/* Jude's Battle Chess — themes & UI.
 * Every color/shape decision lives in CSS vars under [data-theme] so new
 * themes (Kirby-pink? Mega-Man-blue?) are just another variable block. */

:root, [data-theme="wasteland"] {
  --bg: #0f1219;
  --bg-tex: radial-gradient(ellipse at 20% -10%, #1a2233 0%, transparent 55%),
            radial-gradient(ellipse at 110% 110%, #1b1420 0%, transparent 50%);
  --panel: #171c28;
  --panel-2: #1e2534;
  --line: #2c3446;
  --ink: #dde4f0;
  --ink-soft: #92a4b8;
  --accent: #e8734a;      /* ember */
  --accent-2: #5ba8a0;    /* teal  */
  --danger: #c74a42;
  --gold: #d9a441;
  --sq-light: #39415a;
  --sq-dark: #232a3c;
  --sq-select: #e8734a;
  --sq-legal: #5ba8a0;
  --sq-last: #d9a44133;
  --sq-check: #c74a42;
  --clip: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --font-display: 'Russo One', 'Trebuchet MS', sans-serif;
  --font-body: 'Chakra Petch', 'Verdana', sans-serif;
  --pcw-fill: #e8e2d2; --pcw-edge: #10131a; --pcw-facet: rgba(0,0,0,.18);
  --pcb-fill: #3b4256; --pcb-edge: #05070c; --pcb-facet: rgba(0,0,0,.34);
  /* avatars — dusty, heavy-lined for the wasteland */
  --av-edge: #10131a; --av-facet: rgba(0,0,0,.26); --av-shine: #f4f6fb;
  --av-kirby: #e98aa6; --av-kirby-2: #c2383f; --av-kirby-mouth: #6e1a26;
  --av-pika: #e9c22f;  --av-pika-2: #cf3f36;
  --av-blue: #4d7fd6; --av-red: #cf3f36; --av-green: #3f9a4a; --av-gold: #d9a441;
  --av-skin: #e9bd93; --av-skin-2: #d19a70; --av-hair: #5a3a25; --av-blonde: #e6c64d; --av-peach: #e97fa7;
}
[data-theme="spark"] {
  --bg: #f6f1e3;
  --bg-tex: radial-gradient(ellipse at 15% -10%, #ffffff 0%, transparent 60%),
            radial-gradient(ellipse at 100% 120%, #ffe1b8 0%, transparent 55%);
  --panel: #ffffff;
  --panel-2: #fdf7ea;
  --line: #e3d9c2;
  --ink: #2b2a33;
  --ink-soft: #7a7466;
  --accent: #e3454e;
  --accent-2: #3b6fd4;
  --danger: #d43b3b;
  --gold: #e8a020;
  --sq-light: #f4e9c8;
  --sq-dark: #a8c17c;
  --sq-select: #e3454e;
  --sq-legal: #3b6fd4;
  --sq-last: #e8a02040;
  --sq-check: #d43b3b;
  --clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --pcw-fill: #fffdf4; --pcw-edge: #33302a; --pcw-facet: rgba(0,0,0,.10);
  --pcb-fill: #5a5470; --pcb-edge: #232030; --pcb-facet: rgba(0,0,0,.28);
  /* avatars — candy-bright for spark */
  --av-edge: #33302a; --av-facet: rgba(0,0,0,.10); --av-shine: #ffffff;
  --av-kirby: #ffa9c8; --av-kirby-2: #e3454e; --av-kirby-mouth: #8c2233;
  --av-pika: #ffd83a;  --av-pika-2: #e0403a;
  --av-blue: #3b6fd4; --av-red: #e3454e; --av-green: #46b35a; --av-gold: #f0b32a;
  --av-skin: #ffd6ae; --av-skin-2: #f2b58c; --av-hair: #6b4630; --av-blonde: #ffe066; --av-peach: #ff9ec6;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-tex), var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
button { font-family: inherit; }

.wrap { max-width: 900px; margin: 0 auto; padding: 14px 14px 40px; }

/* ---------- chrome ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px 14px; }
.brand { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .06em; color: var(--ink); text-transform: uppercase; }
.brand .spark { color: var(--accent); }
.topbar .actions { display: flex; gap: 8px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  clip-path: var(--clip);
  padding: 18px;
  margin-bottom: 14px;
}
.card h2 { font-family: var(--font-display); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; color: var(--accent-2); }

.btn {
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  padding: 12px 18px; font-size: .9rem; clip-path: var(--clip);
}
.btn.alt { background: var(--accent-2); }
.btn.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.btn.small { padding: 8px 12px; font-size: .75rem; }
.btn:disabled { opacity: .4; cursor: default; }

/* ---------- gate ---------- */
.gate { min-height: 92vh; display: flex; align-items: center; justify-content: center; }
.gate-card { width: min(420px, 92vw); text-align: center; padding: 34px 26px; }
.gate-mark { width: 84px; height: 84px; margin: 0 auto 14px; }
.gate h1 { font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; font-size: 1.3rem; margin: 0 0 4px; }
.gate p { color: var(--ink-soft); margin: 0 0 18px; font-size: .9rem; }
.gate input {
  width: 100%; padding: 13px 14px; font-size: 1.05rem; text-align: center; letter-spacing: .2em;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  clip-path: var(--clip); outline: none; font-family: var(--font-body);
}
.gate input:focus { border-color: var(--accent-2); }
.gate .btn { width: 100%; margin-top: 12px; }
.gate.err .gate-card { animation: shake .4s; }
.gate.err input { border-color: var(--danger); }

/* ---------- lobby ---------- */
.player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pcard {
  background: var(--panel-2); border: 1px solid var(--line); clip-path: var(--clip);
  padding: 12px; cursor: pointer; text-align: left; color: var(--ink); font-family: inherit;
}
.pcard .icon { font-size: 1.6rem; }
.pcard .name { font-family: var(--font-display); font-size: .85rem; margin: 6px 0 2px; letter-spacing: .03em; }
.pcard .sub { font-size: .74rem; color: var(--ink-soft); }
.pcard .streak { color: var(--gold); }
.pcard.bot { border-style: dashed; }

.newgame .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.newgame label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); display: block; margin-bottom: 5px; }
.seat { flex: 1 1 180px; }
.seat select, .newgame select {
  width: 100%; padding: 11px 12px; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); clip-path: var(--clip); font-family: var(--font-body); font-size: .95rem;
  -webkit-appearance: none; appearance: none;
}
.vs { font-family: var(--font-display); color: var(--accent); font-size: 1.1rem; padding-top: 16px; }

/* fighter rosters in the New Battle card (replaces native <select>, which can't show avatars) */
.roster { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px 7px 8px;
  background: var(--panel-2); border: 1px solid var(--line); clip-path: var(--clip);
  color: var(--ink); font-family: var(--font-body); font-size: .85rem; cursor: pointer; line-height: 1;
}
.chip .av { width: 1.6em; height: 1.6em; vertical-align: middle; }
.chip .em { font-size: 1.2em; }
.chip.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--panel); }
.chip:disabled { opacity: .3; cursor: not-allowed; }
.seat .pickhint { font-size: .75rem; color: var(--ink-soft); margin-top: 6px; min-height: 1em; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.addp { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.addp input[type=text] {
  flex: 1 1 140px; padding: 10px 12px; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); clip-path: var(--clip); font-family: var(--font-body);
}
.iconpick { display: flex; gap: 4px; flex-wrap: wrap; }
.iconpick button { background: var(--panel-2); border: 1px solid var(--line); font-size: 1.15rem; padding: 7px 9px; cursor: pointer; line-height: 1; }
.iconpick button.sel { border-color: var(--accent); background: var(--panel); box-shadow: inset 0 0 0 1px var(--accent); }
.avpick .hint { font-size: .85rem; color: var(--ink-soft); margin: 0 0 10px; }
.avpick .iconpick button { font-size: 1.6rem; padding: 9px 11px; }

.recent .g { display: flex; justify-content: space-between; font-size: .85rem; padding: 7px 2px; border-bottom: 1px dashed var(--line); color: var(--ink-soft); }
.recent .g:last-child { border-bottom: none; }
.recent .who { color: var(--ink); }

/* ---------- game ---------- */
.hud { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.plate {
  flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--line); clip-path: var(--clip);
}
.plate .nm { font-family: var(--font-display); font-size: .8rem; letter-spacing: .04em; }
.plate .clock { margin-left: auto; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-soft); }
.plate.active { border-color: var(--accent); }
.plate.active .clock { color: var(--accent); }
.plate.low .clock { color: var(--danger); animation: pulse 1s infinite; }
.plate .thinking { margin-left: auto; font-size: .75rem; color: var(--accent-2); animation: pulse 1.2s infinite; }

.boardwrap { position: relative; width: min(92vw, 560px); margin: 0 auto; }
.board {
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  width: 100%; aspect-ratio: 1; border: 3px solid var(--line);
  clip-path: none; touch-action: manipulation;
}
/* Squares never size from their content: rows are fixed 1fr and the piece is
 * absolutely positioned, so empty and occupied squares are always identical. */
.sqr { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; }
.sqr.light { background: var(--sq-light); }
.sqr.dark { background: var(--sq-dark); }
.sqr .coord { position: absolute; bottom: 2px; right: 4px; font-size: .55rem; color: var(--ink-soft); opacity: .6; }
.sqr.last { box-shadow: inset 0 0 0 100px var(--sq-last); }
.sqr.sel { outline: 3px solid var(--sq-select); outline-offset: -3px; z-index: 2; }
.sqr.legal::after {
  content: ''; width: 26%; height: 26%; border-radius: 50%;
  background: var(--sq-legal); opacity: .85;
}
.sqr.legal.capture::after {
  width: 84%; height: 84%; background: transparent; border-radius: 0;
  border: 3px solid var(--sq-legal); opacity: .9;
}
.sqr.check { animation: checkpulse 1s infinite; }
.piece-svg { width: 86%; height: 86%; pointer-events: none; }
.sqr > .piece-svg { position: absolute; inset: 7%; width: auto; height: auto; }
.pc-w .pc-fill { fill: var(--pcw-fill); stroke: var(--pcw-edge); stroke-width: 4; stroke-linejoin: round; }
.pc-w .pc-facet { fill: var(--pcw-facet); }
.pc-w .pc-line { fill: none; stroke: var(--pcw-edge); stroke-width: 3; stroke-linejoin: round; }
.pc-b .pc-fill { fill: var(--pcb-fill); stroke: var(--pcb-edge); stroke-width: 4; stroke-linejoin: round; }
.pc-b .pc-facet { fill: var(--pcb-facet); }
.pc-b .pc-line { fill: none; stroke: var(--pcb-edge); stroke-width: 3; stroke-linejoin: round; }

/* ---------- avatars (js/avatars.js) ---------- */
.av { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.32em; overflow: visible; }
.av polygon, .av polyline, .av circle { stroke: var(--av-edge); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.av .av-facet { fill: var(--av-facet); stroke: none; }
.av .av-shine { fill: var(--av-shine); stroke: none; }
.av-kirby .k-body  { fill: var(--av-kirby); }
.av-kirby .k-foot  { fill: var(--av-kirby-2); }
.av-kirby .k-eye   { fill: var(--av-edge); }
.av-kirby .k-iris  { fill: var(--av-blue); stroke: none; }
.av-kirby .k-blush { fill: var(--av-kirby-2); stroke: none; opacity: .7; }
.av-kirby .k-mouth { fill: var(--av-kirby-mouth); }
.av-pika .p-body   { fill: var(--av-pika); }
.av-pika .p-tip, .av-pika .p-eye, .av-pika .p-nose { fill: var(--av-edge); }
.av-pika .p-cheek  { fill: var(--av-pika-2); }
.av-pika .p-mouth  { fill: none; }
.av .c-eye   { fill: var(--av-shine); }
.av .c-iris  { fill: var(--av-blue); stroke: none; }
.av .c-blue  { fill: var(--av-blue); }
.av .c-red   { fill: var(--av-red); stroke: none; }
.av .c-gold  { fill: var(--av-gold); }
.av .c-skin, .av .m-skin { fill: var(--av-skin); }
.av .c-hair, .av .m-hair { fill: var(--av-hair); }
.av .c-mouth { fill: var(--av-red); stroke: none; }
.av-peach .c-hair { fill: var(--av-blonde); }
.av-peach .c-dress { fill: var(--av-peach); }
.av-mario .m-cap { fill: var(--av-red); }
.av-luigi .m-cap { fill: var(--av-green); }
.av .m-badge  { fill: var(--av-shine); }
.av .m-letter { font-family: var(--font-display); font-size: 12px; font-weight: 700; fill: var(--av-edge); stroke: none; }
.av-mario .m-letter { fill: var(--av-red); }
.av-luigi .m-letter { fill: var(--av-green); }
.av .m-nose   { fill: var(--av-skin-2); }
.av .m-stache { fill: var(--av-hair); }
.pcard .icon .av { width: 48px; height: 48px; vertical-align: middle; }
.iconpick button .av { width: 1.3em; height: 1.3em; vertical-align: -.3em; }
.plate .pi { display: inline-flex; align-items: center; }
.plate .pi .av { width: 1.6em; height: 1.6em; vertical-align: middle; }
.overlay h3 .av, .card h2 .av { width: 1.6em; height: 1.6em; vertical-align: -.45em; }

.sqr.wiggle .piece-svg { animation: wiggle .35s; }
.flip .board { transform: rotate(180deg); }
.flip .sqr > * { transform: rotate(180deg); }

.gamebar { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

.movelog {
  margin-top: 12px; max-height: 110px; overflow-y: auto; font-size: .8rem;
  color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line);
  padding: 8px 12px; clip-path: var(--clip); line-height: 1.7;
}
.movelog b { color: var(--ink); font-weight: 600; }

/* promotion + end overlays */
.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 14, .72); z-index: 10;
}
[data-theme="spark"] .overlay { background: rgba(60, 50, 30, .45); }
.overlay .panel { background: var(--panel); border: 1px solid var(--line); clip-path: var(--clip); padding: 20px 22px; text-align: center; max-width: 88%; }
.overlay h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 6px; }
.overlay .reason { color: var(--ink-soft); margin: 0 0 14px; font-size: .9rem; }
.promo-row { display: flex; gap: 10px; justify-content: center; }
.promo-row button { width: 64px; height: 64px; background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; padding: 4px; }
.endstats { text-align: left; font-size: .85rem; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.8; }
.endstats b { color: var(--gold); }

/* ---------- stats screen ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.stat {
  background: var(--panel-2); border: 1px solid var(--line); clip-path: var(--clip);
  padding: 12px; text-align: center;
}
.stat .v { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); }
.stat.alt .v { color: var(--accent-2); }
.stat.gold .v { color: var(--gold); }
.stat .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-top: 3px; }
.h2h .g { display: flex; justify-content: space-between; padding: 8px 2px; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.h2h .rec { font-family: var(--font-display); }
.h2h .rec .w { color: var(--accent-2); } .h2h .rec .l { color: var(--danger); } .h2h .rec .d { color: var(--ink-soft); }

.backlink { background: none; border: none; color: var(--accent-2); font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .06em; cursor: pointer; padding: 0 0 12px; font-size: .8rem; }

@keyframes wiggle {
  0%,100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-7%) rotate(-6deg); }
  75% { transform: translateX(7%) rotate(6deg); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); }
}
@keyframes pulse { 50% { opacity: .45; } }
@keyframes checkpulse { 50% { box-shadow: inset 0 0 0 100px rgba(199, 74, 66, .45); } }