/* Shared color tokens keep paper and midnight versions of the same interface. */
:root {
  --panel:var(--surface);--surface-2:var(--surface-alt);
  --border:var(--line);--border-strong:var(--line-strong);
  --on-solid:#ffffff;--on-accent:#ffffff;--solid:#254b6b;
  --header-surface:#f6f7f9f5;--hover-surface:#f0f5f8;
  --board:#e7eef2;--board-center:#f4f7f9;--zone:#ffffff45;--zone-line:#b3c4cf;
  --card-monster-ink:#785929;--card-monster-bg:#f4eddf;
  --card-spell-ink:#1a6b61;--card-spell-bg:#e0f1ed;
  --card-trap-ink:#8a4567;--card-trap-bg:#f4e4ed;
}
:root[data-theme=dark] {
  color-scheme:dark;
  --bg:#101821;--surface:#17232e;--surface-alt:#20303e;--surface-raised:#263847;
  --ink:#edf4f8;--text:#edf4f8;--muted:#afbfcc;--line:#304554;--line-strong:#577185;
  --accent:#83d4df;--accent-bright:#83d4df;--accent-hover:#a1e3ea;--accent-soft:#173842;
  --plum:#a6c9ed;--plum-soft:#22384d;--solid:#325e81;--on-accent:#102b36;
  --teal:#80d8c6;--teal-bright:#80d8c6;--teal-soft:#1b3936;
  --danger:#ffabb3;--danger-soft:#402c35;--warning:#edcd91;--warning-soft:#3c3528;
  --shadow:#00000040;--overlay:#07111cba;--focus:#91dceb;
  --header-surface:#101821f5;--hover-surface:#243645;
  --board:#162631;--board-center:#203442;--zone:#ffffff04;--zone-line:#49616f;
  --card-monster-ink:#edcd91;--card-monster-bg:#3c3528;
  --card-spell-ink:#80d8c6;--card-spell-bg:#1b3936;
  --card-trap-ink:#e8b7d0;--card-trap-bg:#3d2d3b;
}
html,body{background:var(--bg)}
#header{background:var(--header-surface)}
tbody tr:hover{background:var(--hover-surface)}
button.primary,button.primary:hover{color:var(--on-accent)}
button.secondary,.skip-link,.rules-tabs>button.active{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}
button.secondary:hover{background:color-mix(in srgb,var(--solid),var(--ink) 12%)}
.card-tile .count,#toast{background:var(--solid);color:var(--on-solid)}
.mode-card.featured{background:linear-gradient(135deg,var(--accent-soft),var(--surface) 70%);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.hero-chip{background:var(--surface)}
.tag.mint{border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
.tag.amber,.notice.amber{border-color:color-mix(in srgb,var(--warning) 45%,var(--line))}
.tag.red,.notice.error,button.danger{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}

/* Color-only transitions leave card motion, placement and layout untouched. */
@media(prefers-reduced-motion:no-preference) {
  html,body,#header,#main,.panel,.panel-head,button,.button,a,input,select,textarea,dialog,
  h1,h2,h3,p,small,label,th,td,.tag,.notice,.avatar,.tabs,.card-inspector,.inspector-heading,
  .duel-board,.field-slot,.pile,.pile-tabs,.phase-bar,.duel-player-card,.duel-prompt,
  .duel-options,.duel-chain,.chain-link,.event-log,.duel-response-settings,.builder-secondary,
  .builder-zone-tabs,.deck-view-tools,.builder-controls,.rules-index-tools,.rules-index-count,
  .site-menu-links,.social-dock,.social-dock-panel {
    transition:background-color .32s ease,color .28s ease,border-color .32s ease,box-shadow .32s ease;
  }
}
#header .appearance-controls{display:flex;align-items:center;gap:8px;flex:none}
#header .theme-toggle{display:grid;place-items:center;width:58px;height:44px;min-height:44px;padding:0;border:0;background:transparent;flex:none}
.theme-toggle-track{display:block;width:54px;height:29px;position:relative;border:1px solid var(--line-strong);border-radius:18px;background:var(--surface-alt);box-shadow:inset 0 1px 3px var(--shadow)}
.theme-toggle-track svg{position:absolute;top:6px;width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;z-index:2;transition:color .3s,transform .38s}
.theme-sun{left:6px;color:var(--on-accent)}.theme-moon{right:5px;color:var(--muted)}
.theme-toggle-thumb{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--accent-bright);box-shadow:0 1px 5px var(--shadow);transition:transform .38s cubic-bezier(.25,.8,.25,1)}
.theme-toggle[aria-checked=true] .theme-toggle-thumb{transform:translateX(25px)}
.theme-toggle[aria-checked=true] .theme-sun{color:var(--muted);transform:rotate(90deg)}
.theme-toggle[aria-checked=true] .theme-moon{color:var(--on-accent);transform:rotate(-12deg)}
.theme-toggle:hover .theme-toggle-track{border-color:var(--accent)}
#header .site-menu-toggle{display:grid;place-items:center;min-width:30px;width:30px;padding:0;border:0;flex:none}
.site-menu-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.site-menu-links>a{display:flex;align-items:center;gap:10px;min-height:49px;padding:11px 13px;border:1px solid var(--line);border-radius:7px;background:var(--surface-alt);font-size:14px}
.site-menu-links>a:hover{border-color:var(--accent);background:var(--accent-soft)}
.site-menu-note{font-size:12px!important;line-height:1.7;margin-top:20px}

/* Shared board colors are separate from layout and card movement. */
.duel-center .duel-board{background:radial-gradient(ellipse at 50% 45%,var(--board-center),var(--board) 75%);border-color:var(--line-strong);color:var(--muted);box-shadow:inset 0 0 65px var(--shadow)}
.duel-center .field-slot,.field-cell-field .field-slot,.field-cell-monster .field-slot,.field-cell-spell .field-slot{background:var(--zone);border-color:var(--zone-line);color:var(--muted)}
.duel-center .field-slot .stat,.set-marker{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.duel-center .pile,.duel-center .field-cell .pile{background:linear-gradient(145deg,var(--surface-alt),var(--board));border-color:var(--zone-line);color:var(--muted)}
.duel-center .pile:not(:disabled):hover{background:var(--plum-soft);border-color:var(--plum)}
.duel-center .pile>span:first-child,.duel-center .pile>strong{background:var(--surface);color:var(--ink)}
.duel-center .pile strong{color:var(--ink)}
.duel-center .pile-tabs button{border-color:var(--line-strong)}
.duel-center .pile-tabs button[aria-selected=true]{border-color:var(--plum);box-shadow:0 -2px 0 var(--plum)}
.duel-center .is-opponent .pile-tabs button[aria-selected=true]{box-shadow:0 2px 0 var(--plum)}
.duel-center .phase-bar{background:color-mix(in srgb,var(--surface) 75%,transparent);border-color:var(--line);color:var(--muted)}
.duel-center .phase,.duel-center .phase-bar>.tag,.duel-hand-label{color:var(--muted)}
.duel-center .phase.active{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}
.duel-center .phase[data-phase-action]{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.duel-center .phase[data-phase-action]:hover{background:var(--plum-soft);border-color:var(--plum)}
.duel-player-card.has-priority{border-color:var(--accent);background:var(--accent-soft)}
.duel-player-identity .avatar{color:var(--plum);background:var(--plum-soft)}
.lp-meter{background:var(--surface-alt)}
.lp-meter>span{background:var(--teal)}
.duel-response-settings label.check input{accent-color:var(--accent)}
.action-symbol{color:var(--plum);background:var(--plum-soft)}
.duel-action>kbd{color:var(--plum);border-color:var(--line-strong);background:var(--surface-alt)}
.duel-context .action-menu .duel-action:hover,.duel-action:hover{border-color:var(--line-strong)}
.duel-chain .chain-link{color:var(--ink);background:var(--surface);border-color:var(--line-strong)}
.chain-link>span{color:var(--muted)}
.duel-context .action-menu .duel-action.phase-battle{background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 55%,var(--line));color:var(--warning)}
.duel-context .action-menu .duel-action.phase-main2{background:var(--teal-soft);border-color:color-mix(in srgb,var(--teal) 55%,var(--line));color:var(--teal)}
.duel-context .action-menu .duel-action.phase-end{background:var(--plum-soft);border-color:color-mix(in srgb,var(--plum) 55%,var(--line));color:var(--plum)}
.duel-context .action-menu .duel-action.action-pass{background:var(--surface-alt);border-color:var(--line-strong)}
.inspector-silhouette{background:repeating-linear-gradient(45deg,var(--plum-soft) 0,var(--plum-soft) 3px,var(--surface-alt) 3px,var(--surface-alt) 12px);border-color:var(--line-strong);color:var(--plum)}
.duel-workspace .card-tile .fallback{background:linear-gradient(145deg,var(--plum-soft),var(--surface));color:var(--ink)}
.duel-center .field-cell.is-drop-target .field-slot{background:var(--teal-soft)}
.duel-center .hand .hand-card>.card-tile,.duel-center .hand .hand-card>.card-back{border-color:var(--line-strong)}
.duel-center .hand .hand-card:hover>.card-tile,.duel-center .hand .hand-card:focus-within>.card-tile{border-color:var(--accent)}
.duel-workspace .pile-tabs-cell{background:var(--zone);border-color:var(--zone-line)}

/* Nine destinations remain side by side on desktop; smaller screens wrap groups. */
@media(min-width:1101px) and (max-width:1440px){
 #header{padding-inline:12px}#header .masthead{gap:12px}#header .grouped-nav{gap:12px}
 #header .nav-group+.nav-group{padding-left:12px}#header .nav-group-links{gap:4px}
 #header .nav-group-links a{font-size:12px;padding-inline:7px}#header .header-actions{gap:4px}
#header .brand .wordmark{font-size:21px}
 #header .brand .wordmark>span{font-size:20px}#header .appearance-controls{gap:3px}
 #header .theme-toggle{width:54px}#header .header-actions>.utility-link{display:none}
}
@media(max-width:740px){
 #header .masthead{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
 #header .brand{order:0;flex:none}#header .header-actions{order:1;flex:1;min-width:0;flex-wrap:wrap;gap:4px}
 #header .appearance-controls{order:0;flex:none;justify-content:flex-end;margin:0;gap:0}
 #header .grouped-nav{order:2;width:100%;grid-template-columns:1fr;gap:7px;margin-top:2px}
 #header .nav-group{grid-column:1!important;display:flex;align-items:center;gap:8px;border:0!important;padding:0!important}
 #header .nav-group-heading{width:42px;flex:none;padding:0;font-size:9px}
 #header .nav-group-links{flex:1;justify-content:space-between;gap:6px}
 #header .nav-group-links a{flex:1;min-height:35px;font-size:12px;padding:6px 5px}
 #header .header-actions>.utility-link{display:none}#header .site-menu-toggle{width:30px;min-width:30px;min-height:40px}
 .site-menu-links{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.theme-toggle-track svg,.theme-toggle-thumb{transition:none}}

@media(min-width:1101px) and (max-width:1440px){#header .brand .wordmark{font-size:24px}#header .brand .wordmark>span{font-size:23px}}
@media(max-width:440px){#header .theme-toggle{width:45px}#header .theme-toggle-track{transform:scale(.84)}#header .header-actions{flex-wrap:nowrap;gap:0}#header .header-actions>#sign-in{font-size:10px;padding-inline:5px}#header .site-menu-toggle{width:24px;min-width:24px}}