/* THINKERS 100 shared arena tokens — linked by index.html (game shell) and intro.html (arena guide).
 * One palette, one border/shadow language, one motion rhythm. Fighter accent colours are NOT set here:
 * they come from the roster (palette) at runtime as --fighter, so game and intro cannot drift.
 */
:root{
 --a-font-ui:"Microsoft JhengHei","PingFang TC","Noto Sans TC",system-ui,sans-serif;
 --a-font-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
 --a-font-display:Impact,"Arial Black",sans-serif;
 --a-ink:#f6f4e7;--a-ink-soft:#d0e5f7;--a-ink-dim:#a9c6dc;
 --a-navy-0:#0a1630;--a-navy-1:#12264d;--a-navy-2:#203d70;--a-navy-3:#2f5588;--a-navy-4:#4a78a8;
 --a-gold:#ffdb75;--a-gold-hi:#fff2ac;--a-gold-deep:#8a5b29;--a-mint:#91f4e0;--a-blue:#8ed8ff;--a-rose:#ffa1a1;
 --a-line:#7eb0d2;--a-line-soft:#5f88ad;--a-panel:#203d68;--a-panel-deep:#16294a;
 --a-focus:#fff4a2;
 --a-bw:2px;                              /* every frame is a 2px hard line, never a soft glow */
 --a-step:0 4px 0 #122e52;                 /* the only elevation: a hard 4px step */
 --a-t-quick:120ms;--a-t-base:220ms;--a-t-slow:480ms;--a-ease:cubic-bezier(.2,.7,.2,1);
 --gold:var(--a-gold);--mint:var(--a-mint);--blue:var(--a-blue);--muted:#c0d5eb;
}
.eyebrow{font:700 11px var(--a-font-mono);color:#a0f4ed;letter-spacing:.2em;margin:0 0 6px}
.quiet,.primary{border:1px solid var(--a-line);border-radius:0;padding:9px 14px;color:#f2f7fa;background:#244975;box-shadow:inset 0 1px #c4eeff40,var(--a-step);font-weight:700;font-size:12px;transition:background var(--a-t-quick) var(--a-ease),transform var(--a-t-quick) var(--a-ease)}
.quiet:hover{background:#326494}
.primary{color:#202c42;background:#ffda78;border-color:var(--a-gold-hi);box-shadow:inset 0 2px #fff2bd,0 4px #805c29}
.primary:hover{background:#ffec9e}
.quiet:active,.primary:active{transform:translateY(2px)}
a.quiet,a.primary{display:inline-block;text-decoration:none;text-align:center}
.quiet:focus-visible,.primary:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--a-focus);outline-offset:3px}

/* ---------- Learning detail (layered): shared by character select, post-match dialog, story theory view and intro ---------- */
.ld{--fighter:var(--a-gold);display:grid;gap:8px;color:var(--a-ink-soft);font-size:12px;line-height:1.75;min-width:0}
.ld-head{display:grid;gap:3px;padding:8px 12px;border-left:4px solid var(--fighter);background:#183457b8}
.ld-head h3{margin:0;font-size:17px;color:#ffe6a4;font-weight:800}
.ld-head h3 small{margin-left:8px;font:600 11px var(--a-font-mono);color:var(--a-ink-dim);letter-spacing:.04em}
.ld-title{margin:0;color:var(--fighter);font-weight:800;font-size:12px;letter-spacing:.06em}
.ld-question{margin:0;color:#f2f8ff;font-size:13px}
.ld-hint{margin:0;color:var(--a-mint);font-size:11px}
.ld-hint::before{content:'對戰提示 ';font:700 10px var(--a-font-mono);letter-spacing:.12em;color:var(--a-ink-dim)}
.ld details{margin:0;padding:0;border:1px solid var(--a-line-soft);background:#1a3358a6;font-size:12px}
.ld summary{cursor:pointer;list-style:none;padding:7px 12px;color:#ffe5a0;font-weight:700;font-size:12px;display:flex;justify-content:space-between;gap:8px}
.ld summary::-webkit-details-marker{display:none}
.ld summary::after{content:'＋';color:var(--a-ink-dim);font-weight:400}
.ld details[open] summary::after{content:'－'}
.ld details[open] summary{border-bottom:1px solid var(--a-line-soft)}
.ld .ld-body{padding:8px 12px 10px;display:grid;gap:6px}
.ld .ld-body p{margin:0}
.ld ul{margin:0;padding-left:1.2em;display:grid;gap:3px}
.ld .ld-tag{display:inline-block;margin-right:6px;padding:0 5px;font:700 10px var(--a-font-mono);letter-spacing:.06em;color:#10233f;background:var(--a-blue)}
.ld .ld-tag.claim{background:var(--a-gold)}
.ld .ld-tag.teach{background:var(--a-mint)}
.ld .ld-tag.game{background:#d9b8ff}
.ld .ld-move{display:grid;gap:1px;padding:5px 8px;border-left:3px solid var(--fighter);background:#10233f80}
.ld .ld-move b{color:#fff3c8}
.ld .ld-note{color:var(--a-ink-dim);font-size:11px}
.ld .ld-reflect{padding:8px 12px;border:1px dashed var(--fighter);color:#fff6d6;font-size:13px}
.ld .ld-src{font-size:11px;color:var(--a-ink-dim);display:grid;gap:2px}
.ld .ld-src a{color:var(--a-blue)}
@media(prefers-reduced-motion:reduce){.quiet,.primary{transition:none}}