/* Shared styles for subpages (/commander/, /quiz/) — same GBA tokens as style.css */
.subhero{padding:28px 0 8px}
.subhero h1 span{color:var(--gold)}
.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:start}
.stage>*{min-width:0}
@media(max-width:900px){.stage{grid-template-columns:1fr}}
.orbpick{display:flex;gap:8px;flex-wrap:wrap}
.orbpick button{all:unset;cursor:pointer;width:48px;height:48px;display:grid;place-items:center;border:2px solid transparent;position:relative}
.orbpick button canvas{width:36px;height:36px;opacity:.45;filter:grayscale(.7)}
.orbpick button[aria-pressed=true] canvas{opacity:1;filter:none}
.orbpick button[aria-pressed=true]{border-color:var(--ink);background:var(--cream)}
.orbpick button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.seg{display:inline-flex;flex-wrap:wrap;gap:0;border:2px solid var(--ink);max-width:100%}
.seg button{font:10px/1.3 var(--head);padding:10px 10px;background:var(--cream);color:var(--ink);border:0;border-right:2px solid var(--ink);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--blue);color:var(--white);box-shadow:inset 3px 3px 0 var(--navy)}
.field{margin:0 0 14px}.field>.lbl{display:block;font:10px var(--head);margin-bottom:8px;color:var(--blue)}
select{font:18px var(--body);padding:8px;border:2px solid var(--ink);background:var(--white);color:var(--ink);box-shadow:inset 3px 3px 0 var(--cream);max-width:100%}
.summon{position:relative;max-width:480px;margin:0 auto}
.summon canvas{width:100%;aspect-ratio:3/2;display:block;background:var(--ink);border:3px solid var(--ink)}
.flipwrap{perspective:1200px;max-width:340px;margin:0 auto}
.flip{position:relative;aspect-ratio:488/680;transform-style:preserve-3d;transition:transform .6s steps(6)}
.flip.shown{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .back{display:grid;place-items:center;background:var(--ink);border:2px solid var(--ink);border-radius:4.75%/3.5%}
.flip .back canvas{width:70%;height:auto}
.flip .front{transform:rotateY(180deg)}
.flip.shown .back{visibility:hidden;transition:visibility 0s .3s}
@media (prefers-reduced-motion:reduce){.flip .back{display:none}.flip .front{transform:none}.flip.shown{transform:none}}
.idrow{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.idrow canvas{width:24px;height:24px}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:8px;margin:10px 0}
.stat div{background:var(--cream);border:2px solid var(--ink);padding:6px 8px;font-size:16px}
.stat b{display:block;font:8px var(--head);color:var(--blue);margin-bottom:4px}
.stars{color:var(--red);letter-spacing:2px;font-size:16px}
.skel{display:grid;gap:4px;margin:8px 0}
.skel .r{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) 2.5em;gap:8px;align-items:center;font-size:16px}
.skel .bar{height:14px;border:2px solid var(--ink);background:var(--white)}
.skel .bar i{display:block;height:100%;background:var(--blue);box-shadow:inset -3px 0 0 var(--navy)}
.hist{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:8px 0 0}
.hist button{all:unset;cursor:pointer;width:64px;display:block}
.hist img{width:64px;height:auto;display:block;border-radius:4px;border:2px solid var(--ink);image-rendering:auto}
.hist button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cta-box{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.empty{text-align:center;padding:24px 8px;font-size:18px}
.win a.btn{color:var(--white)}.win a.btn.gold,.win a.btn:hover{color:var(--ink)}
/* quiz */
.gmenu{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.gmenu button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:center;width:100%;padding:12px 12px 12px 30px;position:relative;border:2px solid transparent}
.gmenu button:hover,.gmenu button:focus-visible{background:var(--cream);border-color:var(--ink)}
.gmenu button:hover::before,.gmenu button:focus-visible::before{content:"";position:absolute;left:8px;top:50%;margin-top:-6px;border:6px solid transparent;border-left:9px solid var(--red);animation:bob .6s steps(2) infinite}
.gmenu .nm{font:12px var(--head)}.gmenu .ds{font-size:16px;grid-column:2}.gmenu .best{font:8px var(--head);color:var(--blue);grid-row:1/3;grid-column:3}
.gmenu canvas{grid-row:1/3;width:32px;height:32px}
.qtop{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-bottom:10px;font:10px var(--head)}
.hearts{display:flex;gap:4px}.hearts i{width:18px;height:16px;background:var(--red);clip-path:polygon(0 25%,25% 0,50% 25%,75% 0,100% 25%,100% 50%,50% 100%,0 50%)}
.hearts i.off{background:var(--navy)}
.qbody{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:20px;align-items:start}
.qbody.nocard{grid-template-columns:1fr}
.qbody .cards{display:flex;gap:8px}.qbody .cards .mcard{flex:1;min-width:0}
@media(max-width:700px){.qbody{grid-template-columns:1fr}.qbody .cards{max-width:280px;margin:0 auto}}
.opts{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.opts button{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:10px 10px 10px 30px;position:relative;font-size:18px;border:2px solid var(--ink);background:var(--white)}
.opts button:hover::before,.opts button:focus-visible::before{content:"";position:absolute;left:9px;top:50%;margin-top:-6px;border:6px solid transparent;border-left:9px solid var(--red)}
.opts button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.opts .k{font:10px var(--head);margin-right:8px;color:var(--blue)}
.opts .right{background:var(--leaf)}.opts .wrong{background:#f0a090}
.timer{height:10px;border:2px solid var(--ink);background:var(--white);width:120px}.timer i{display:block;height:100%;background:var(--gold);transition:width 1s steps(1)}
.rank{font:clamp(14px,3vw,22px)/1.5 var(--head);color:var(--red);margin:0 0 6px}