/* pages/trainer/skin-arcade.css — the quiz menu as the Arcade and the
   weekly check as the boss battle (wireframes 1j and 1k, decision 0015).
   Colours are --play-* tokens only. */

.aq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:12px}
.aq-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 10px 12px;border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);color:var(--play-ink);font-family:var(--play-display);font-size:.9rem;cursor:pointer;box-shadow:0 4px 0 var(--play-edge)}
.aq-card:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.aq-card:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
.aq-card:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.aq-ico{font-size:1.5rem;line-height:1.2}
.aq-card b{font-size:1rem}
.aq-d{font-size:.8rem;color:var(--play-mute)}

.aq-boss{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;width:100%;margin-top:14px;padding:16px;cursor:pointer;font-family:var(--play-display);font-size:1rem;border-radius:14px}
.aq-boss b{font-size:1.25rem}
.aq-boss span{color:var(--play-accent)}
.aq-boss:hover{box-shadow:0 4px 0 var(--play-edge);transform:translateY(-2px)}
.aq-boss:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

.boss-hud{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:10px 12px;border:2px solid var(--play-ink);border-radius:12px;background:var(--play-boss);color:var(--play-boss-ink);font-family:var(--play-display)}
.boss-hud>.p-pill{background:var(--play-boss);color:var(--play-boss-ink);border-color:var(--play-boss-line)}
.boss-hp{flex:1;display:flex;flex-direction:column;gap:3px}
.boss-hp .p-tag{color:var(--play-mute)}
.boss-hearts{color:var(--play-accent);border-color:var(--play-boss-line);background:var(--play-boss)}
.is-boss-lost{background:var(--play-lock)}

@media (prefers-reduced-motion: reduce){
  .aq-card,.aq-boss{transition:none}
}