/* Palette taken from the Pepemon Cards logo: its yellow, the royal blue of its outline, the navy of its shadow. */
:root {
  --bg: #060b22;
  --navy-1: #0a1233;
  --navy-2: #101c4d;
  --navy-3: #182a6e;
  --royal: #2a5bd7;
  --royal-hi: #4f86ff;
  --sky: #9fc2ff;
  --panel: rgba(9, 16, 48, 0.9);
  --panel-line: rgba(126, 164, 255, 0.26);
  --ink: #f4f6ff;
  --ink-dim: #a9b7e2;
  --gold: #ffcb05;
  --gold-hi: #ffe567;
  --gold-deep: #c98a00;
  --blue: #2a5bd7;
  --gas: #38bdf8;
  --gas-deep: #0b68a8;
  --danger: #ff5a52;
  --good: #35d07f;
  --radius: 12px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); overflow: hidden; overscroll-behavior: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #ffe27a; outline-offset: 2px; border-radius: 6px; }
kbd { font: 700 10.5px ui-monospace, monospace; background: #0005; border: 1px solid #fff3; border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; margin-left: 6px; opacity: .8; }
small { font-weight: 600; opacity: .8; }

#app { display: grid; grid-template-columns: 310px 1fr; height: 100%; }

/* ---------- inspector ---------- */
#inspector {
  background: linear-gradient(165deg, #14235c, #080e2a);
  border-right: 1px solid #ffcb0533;
  padding: 14px; overflow-y: auto; min-width: 0;
}
#inspector-empty { text-align: center; color: var(--ink-dim); margin-top: 8vh; }
#inspector-empty img { width: 62%; border-radius: 12px; opacity: 0.55; filter: saturate(0.8); }
#insp-img { width: 100%; display: block; border-radius: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.55); aspect-ratio: 747 / 1038; background: #0006; }
#insp-head { display: flex; gap: 10px; align-items: center; margin: 12px 0 8px; }
#insp-name { font-weight: 800; font-size: 17px; line-height: 1.15; }
#insp-sub { color: var(--ink-dim); font-size: 12.5px; margin-top: 2px; }
.gas-chip {
  flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7dd3fc, var(--gas-deep)); color: #fff; font-weight: 900; font-size: 20px;
  border: 2px solid #e0f2fe; text-shadow: 0 1px 2px #0009; box-shadow: 0 2px 10px #0ea5e988;
}
#insp-rules, .b-inspect .rules { display: grid; gap: 7px; font-size: 13px; line-height: 1.35; }
.rule { background: #7aa2ff0f; border: 1px solid var(--panel-line); border-radius: 10px; padding: 7px 9px; }
.rule .t { font-weight: 800; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rule .d { color: var(--ink-dim); margin-top: 2px; }
.rule.status-rule { border-color: #f0abfc66; background: #f0abfc10; }
.pill { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: #ffffff1a; white-space: nowrap; }
.pill.gas { background: #0ea5e933; color: #7dd3fc; }
.pill.warn { background: #ff5a5230; color: #ff9a94; }
.pill.gx { background: #ffd16633; color: #ffe08a; }
.pill.ach { background: #ffd16622; color: #ffe9b0; font-size: 12.5px; padding: 3px 10px; }
.type-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 3px; border: 1px solid #fff5; }
.type-glyph { display: none; margin-right: 3px; }
body.colorblind .type-glyph { display: inline; }

/* ---------- stage + hud ---------- */
#stage { position: relative; min-width: 0; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#floaters, #banner, #prompt, #toast, #taunt, #flash, #achievements, #preview, #live { pointer-events: none !important; }

.panel {
  position: absolute; left: 12px; width: 236px; padding: 9px 11px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--panel-line); backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px #0006, inset 0 1px 0 #ffffff1a; transition: box-shadow .3s, border-color .3s;
}
#panel-1 { top: 12px; }
#panel-0 { bottom: calc(12px + var(--safe-b)); }
.panel.current { border-color: #ffcb05b3; box-shadow: 0 0 0 1px #ffcb0526, 0 8px 30px #0008, 0 0 24px #ffcb0533; }
.who { display: flex; align-items: center; gap: 7px; font-weight: 800; margin-bottom: 5px; }
#panel-1 .who { color: #ffc49a; } #panel-0 .who { color: #ffe27a; }
.who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .tag { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; background: #ffffff14; color: var(--ink-dim); }
.who .tag:empty { display: none; }
.avatar { font-size: 19px; }
.turn-dot { margin-left: auto; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #334; }
.panel.current .turn-dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.row { display: flex; align-items: center; gap: 7px; margin-top: 4px; min-height: 18px; }
.row.small { color: var(--ink-dim); font-size: 12px; justify-content: space-between; }
.lbl { width: 42px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); }
.prizes { display: flex; gap: 4px; }
.prize { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #1b2440; background: linear-gradient(#2b3556 0 46%, #151c33 46% 54%, #232c49 54%); opacity: .7; }
.prize.on { background: linear-gradient(#5fd13a 0 46%, #222 46% 54%, #fff 54%); opacity: 1; box-shadow: 0 0 8px #7dff5a88; animation: pop .45s ease; }
.gas { display: flex; gap: 2.5px; flex-wrap: wrap; }
.pip { width: 9px; height: 15px; border-radius: 3px; background: #1a2440; border: 1px solid #2c3a63; }
.pip.max { background: #12324a; border-color: #1f5d85; }
.pip.on { background: linear-gradient(#7dd3fc, #0ea5e9); border-color: #bae6fd; box-shadow: 0 0 6px #38bdf8aa; }
.pip.bonus { background: linear-gradient(#fde68a, #f59e0b); border-color: #fef3c7; }
.gas-num { font-weight: 800; font-size: 13px; color: #7dd3fc; margin-left: auto; }
.gas-next { font-weight: 800; color: #86efac; white-space: nowrap; }
.gas-next.bad { color: #fda4af; }
.panel-pop { position: absolute; right: 8px; top: -8px; font-weight: 900; font-size: 15px; padding: 2px 9px; border-radius: 99px; background: #0b3a2a; color: #86efac; border: 1px solid #86efac88; animation: popUp 1.5s ease-out forwards; white-space: nowrap; }
.panel-pop.bad { background: #3a0b12; color: #fda4af; border-color: #fda4af88; }
#panel-0 .panel-pop { top: auto; bottom: 100%; }
@keyframes popUp { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes pop { 0% { transform: scale(.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

#taunt { position: absolute; left: 258px; top: 18px; max-width: 300px; padding: 8px 13px; border-radius: 14px 14px 14px 3px; background: #f5efd9; color: #1a2420; font-weight: 700; font-size: 14px; box-shadow: 0 8px 22px #0008; animation: tauntIn 2.6s ease both; }
#taunt.near { top: auto; bottom: 120px; border-radius: 14px 14px 3px 14px; }
#taunt .who { display: inline; margin: 0 3px 0 0; }
@keyframes tauntIn { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 8% { opacity: 1; transform: none; } 88% { opacity: 1; } 100% { opacity: 0; } }

#actions { position: absolute; right: 14px; bottom: calc(14px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 250px; }
#attack-list { display: flex; flex-direction: column; gap: 8px; }
/* Candy buttons: a bright face, a light top edge, and a solid darker "side" underneath that the press pushes into. */
.act {
  border: 1px solid #fff3b0aa; border-radius: 12px; padding: 10px 14px; font-weight: 800; font-size: 14.5px; color: #14204f;
  background: linear-gradient(180deg, #ffe97a 0%, #ffcb05 52%, #f5a700 100%); box-shadow: 0 3px 0 #a66a00, 0 7px 18px #0007, inset 0 1px 0 #ffffffa6;
  transition: transform .08s, filter .15s, opacity .2s; text-align: left; text-decoration: none; display: inline-block;
}
.act:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.act:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #a66a00, inset 0 1px 0 #ffffff80; }
.act:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.5); }
.act.secondary { background: linear-gradient(180deg, #2f56bd, #1b3685); color: #eef3ff; border: 1px solid #86a9ff66; box-shadow: 0 3px 0 #0c1f5e, 0 7px 18px #0006, inset 0 1px 0 #ffffff40; }
.act.secondary:active:not(:disabled) { box-shadow: 0 1px 0 #0c1f5e, inset 0 1px 0 #ffffff33; }
.act.end { text-align: center; background: linear-gradient(180deg, #5b95ff, #2a5bd7 60%, #2049b4); color: #fff; border-color: #b9d2ff88; box-shadow: 0 3px 0 #12307f, 0 7px 18px #0007, inset 0 1px 0 #ffffff66; }
.act.end:active:not(:disabled) { box-shadow: 0 1px 0 #12307f, inset 0 1px 0 #ffffff55; }
.act.end.nudge { animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { box-shadow: 0 3px 0 #12307f, 0 0 24px #ffd84acc, inset 0 1px 0 #ffffff66; } }
.act.attack { color: #fff; background: linear-gradient(#ff7a6b, #e0342b 60%, #a3140f); box-shadow: 0 3px 0 #6b0b08, 0 8px 18px #0007; border-color: #ffb3a833; }
.act.use { color: #fff; background: linear-gradient(#a78bfa, #6d3fe0 60%, #4321a5); box-shadow: 0 3px 0 #2a1470, 0 8px 18px #0007; }
.act.hot { animation: hot 1s ease-in-out infinite; }
@keyframes hot { 50% { box-shadow: 0 3px 0 #6b0b08, 0 0 0 4px #7dffb0aa, 0 0 26px #7dffb0; } }
.act .line1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.act .line2 { font-size: 11.5px; font-weight: 600; opacity: .92; margin-top: 2px; display: flex; justify-content: space-between; gap: 6px; }
.act .cost { font-size: 12px; background: #0004; padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
.act i { font-style: normal; }
.act i.gx { font-size: 10.5px; font-weight: 900; background: #ffd166; color: #3b2a00; border-radius: 5px; padding: 0 4px; }
.act i.gx.spent { background: #777; color: #ddd; text-decoration: line-through; }
.act.big { font-size: 16px; padding: 13px 18px; }
.act small { display: block; font-size: 11.5px; margin-top: 2px; }

#preview { position: absolute; right: 276px; bottom: calc(60px + var(--safe-b)); width: 250px; padding: 10px 12px; border-radius: 12px; background: #080f2ef2; border: 1px solid #ff8a7a66; font-size: 12.5px; box-shadow: 0 14px 40px #000a; }
#preview .ttl { font-weight: 900; margin-bottom: 5px; }
#preview table { width: 100%; border-collapse: collapse; }
#preview td { padding: 2px 0; border-bottom: 1px dashed #ffffff14; }
#preview td:first-child { width: 44px; color: var(--ink-dim); }
#preview td:last-child { text-align: right; font-weight: 900; color: #ff8a7a; }
#preview tr.ko td { color: #ffd166; }
#preview .steps, #preview .fx { color: var(--ink-dim); margin-top: 5px; line-height: 1.35; }
#preview .kochance { margin-top: 6px; padding-top: 5px; border-top: 1px solid #ffffff22; }

#prompt {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 99px;
  background: linear-gradient(180deg, #ffe97a, #ffcb05); color: #14204f; border: 1px solid #fff3b0; font-weight: 800; font-size: 14px; box-shadow: 0 2px 0 #a66a00, 0 8px 22px #0009; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
}
#tutorial { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(430px, 92%); padding: 13px 15px; border-radius: 14px; background: #0d1a4df5; border: 2px solid #ffcb05cc; box-shadow: 0 14px 40px #000b, 0 0 30px #ffcb0533; font-size: 14.5px; line-height: 1.42; }
#tutorial b { color: #ffe27a; }
.tut-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; color: var(--ink-dim); font-size: 12px; }
.tut-foot .act { padding: 5px 11px; font-size: 12.5px; }

#banner {
  position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: clamp(30px, 5vw, 60px); font-weight: 900;
  letter-spacing: .02em; color: var(--gold); -webkit-text-stroke: 2.5px #2f62c8; paint-order: stroke fill;
  text-shadow: 0 5px 0 #14225c, 0 12px 30px #000c; animation: banner 1.25s ease both;
}
#banner.small { font-size: clamp(18px, 2.6vw, 30px); top: 30%; }
#banner.item { color: #d8c7ff; -webkit-text-stroke-color: #2a1470; text-shadow: 0 5px 0 #2a1470, 0 0 40px #a78bfa; top: 22%; }
#banner.rare { color: #fff2b0; text-shadow: 0 5px 0 #7a4b00, 0 0 50px #ffd166; -webkit-text-stroke-color: #7a4b00; }
@keyframes banner { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; transform: scale(1.06); } 28% { transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(1.04); } }
#toast {
  position: absolute; left: 50%; bottom: calc(190px + var(--safe-b)); transform: translateX(-50%); background: #2a0f12ee; border: 1px solid #ff5a5288;
  color: #ffd5d2; padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 13.5px; max-width: 80%; text-align: center;
}
#toast.info { background: #0d1a4dee; border-color: #8fb8ffaa; color: #e3edff; }
.floater {
  position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 34px; color: #fff; white-space: nowrap;
  -webkit-text-stroke: 1.5px #300; paint-order: stroke fill; text-shadow: 0 3px 0 #0009; animation: floatUp 1.25s ease-out forwards;
}
.floater.dmg { color: #ff6259; }
.floater.heal { color: #6dff9b; -webkit-text-stroke-color: #032; }
.floater.info { font-size: 19px; color: #ffe27a; -webkit-text-stroke: 1px #320; }
.floater.status { font-size: 18px; color: #f5d0fe; -webkit-text-stroke: 1px #3b0764; }
@keyframes floatUp { 0% { opacity: 0; margin-top: 10px; transform: translate(-50%,-50%) scale(.5); } 15% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); } 30% { transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; margin-top: -70px; } }
#flash { position: absolute; inset: 0; background: #fff; animation: flash .42s ease-out forwards; }
@keyframes flash { 0% { opacity: .75; } 100% { opacity: 0; } }

#top-right { position: absolute; right: 14px; top: 12px; display: flex; gap: 6px; }
#fps { align-self: center; padding: 4px 10px; border-radius: 99px; font: 700 11.5px ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--ink-dim); background: var(--panel); border: 1px solid var(--panel-line); white-space: nowrap; pointer-events: none; }
#top-right button { border: 1px solid var(--panel-line); background: var(--panel); border-radius: 99px; padding: 5px 12px; font-weight: 700; font-size: 12.5px; min-width: 32px; }
#log { position: absolute; right: 14px; top: 48px; width: 290px; max-height: 38vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; }
#log div { padding: 2px 0; border-bottom: 1px dashed #ffffff12; color: var(--ink-dim); }
#log div b { color: var(--ink); }
#log div.t { color: var(--gold); font-weight: 800; border-bottom: 0; margin-top: 4px; }

/* online duels: turn clock, connection chip, emotes */
#online-bar { position: absolute; left: 50%; top: 54px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; pointer-events: none; z-index: 2; }
#online-bar span { padding: 4px 12px; border-radius: 99px; font-weight: 800; font-size: 12.5px; background: var(--panel); border: 1px solid var(--panel-line); color: var(--ink-dim); box-shadow: 0 6px 18px #0007; font-variant-numeric: tabular-nums; white-space: nowrap; }
#clock.mine { color: var(--ink); border-color: #ffcb0599; }
#clock.urgent { color: #ffd5d2; border-color: #ff5a52aa; background: #2a0f12ee; }
#clock.mine.urgent { animation: clockPulse 1s ease-in-out infinite; }
@keyframes clockPulse { 50% { box-shadow: 0 0 0 5px #ff5a5233, 0 6px 18px #0007; } }
#net-chip.warn { color: #ffe4a8; border-color: #ffcb0588; }
#net-chip.bad { color: #ffd5d2; border-color: #ff5a5288; background: #2a0f12ee; }
#emote-list { position: absolute; right: 14px; top: 48px; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 250px; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--panel-line); box-shadow: 0 14px 34px #000a; }
#emote-list button { border: 1px solid var(--panel-line); background: #ffffff10; border-radius: 10px; padding: 8px 6px; font-weight: 700; font-size: 13.5px; }
#emote-list button:hover { background: #ffffff22; }
#emote-list label { grid-column: 1 / -1; font-size: 12px; color: var(--ink-dim); display: flex; gap: 6px; align-items: center; }
body.portrait #online-bar { top: 170px; }
body.portrait #emote-list { top: 134px; right: 8px; }
body.reduced-motion #clock.mine.urgent { animation: none; }

/* online lobby */
.online-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.online-grid section { display: flex; flex-direction: column; gap: 10px; }
.online-grid label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; }
.online-grid label input, .online-grid label select { flex: 1; max-width: 62%; }
.on-status { min-height: 74px; padding: 12px 14px; border-radius: 12px; background: #7aa2ff14; border: 1px dashed #8fb8ff66; line-height: 1.45; }
.on-status:empty { display: none; }
.on-status b.big { display: block; font-size: 17px; margin-bottom: 4px; color: var(--ink); }
.on-status .spinner { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; border: 2px solid #ffffff33; border-top-color: var(--gold); animation: spin .9s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.on-status .link-row { display: flex; gap: 6px; margin: 8px 0 6px; }
.on-status .link-row input { flex: 1; min-width: 0; font-size: 12.5px; }
.on-status .code { letter-spacing: .18em; font-size: 18px; color: var(--gold); }
.on-presence { font-size: 13px; font-weight: 700; color: var(--ink-dim); margin-left: 8px; }
.on-presence .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-right: 5px; box-shadow: 0 0 8px var(--good); }
.on-presence.off .dot { background: var(--danger); box-shadow: none; }
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow-y: auto; }
.board li { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 8px; align-items: baseline; padding: 5px 9px; border-radius: 8px; background: #7aa2ff12; font-size: 13.5px; }
.board li:nth-child(1) .rk { color: #ffd84a; } .board li:nth-child(2) .rk { color: #d5def5; } .board li:nth-child(3) .rk { color: #e7a36a; }
.board li.me { background: #5b95ff40; outline: 1.5px solid #ffcb05b3; }
.board li .rk { color: var(--ink-dim); font-weight: 800; }
.board li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.board li .rt { font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.board li .gm { color: var(--ink-dim); font-size: 12px; }
.board-empty { color: var(--ink-dim); font-size: 13.5px; padding: 8px 2px; }
@media (max-width: 760px) { .online-grid { grid-template-columns: 1fr; } }

#replay-bar { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 99px; background: var(--panel); border: 1px solid var(--panel-line); box-shadow: 0 10px 30px #0008; z-index: 3; }
#replay-bar button { border: 0; background: #ffffff14; border-radius: 99px; min-width: 34px; height: 30px; font-weight: 800; }
#rp-seek { width: min(36vw, 340px); accent-color: var(--gold); }
#rp-pos { font-size: 12px; color: var(--ink-dim); min-width: 62px; text-align: center; }
body[data-mode="replay"] #actions { display: none; }

#achievements { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 40; }
.ach-toast { display: flex; gap: 11px; align-items: center; padding: 9px 15px 9px 11px; border-radius: 14px; background: linear-gradient(145deg, #1c2f7a, #0b1437); border: 1px solid #ffcb05aa; box-shadow: 0 12px 34px #000a, 0 0 26px #ffd16633; animation: achIn .5s cubic-bezier(.2,1.4,.4,1) both; min-width: 270px; }
.ach-toast.out { animation: achOut .6s ease forwards; }
.ach-toast .ico { font-size: 30px; }
.ach-toast .k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #ffd166; font-weight: 800; }
.ach-toast .n { font-weight: 900; font-size: 15.5px; }
.ach-toast .t { font-size: 12px; color: var(--ink-dim); }
@keyframes achIn { from { opacity: 0; transform: translateY(-16px) scale(.9); } }
@keyframes achOut { to { opacity: 0; transform: translateY(-10px); } }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; background: radial-gradient(ellipse at center, #13245fdd, #040818f4); padding: 20px; overflow-y: auto; }
.overlay.light { background: #040818b8; backdrop-filter: blur(3px); z-index: 25; }
.overlay.solid { background: radial-gradient(ellipse at 50% 30%, #13245f, #050919 70%); z-index: 30; }
#rules { z-index: 35; }
.sheet {
  position: relative; z-index: 1; background: linear-gradient(165deg, #172b72 0%, #0d1842 52%, #080e2b 100%); border: 1.5px solid #7aa2ff59; border-radius: 20px;
  padding: 22px 26px; max-width: 980px; width: 100%; box-shadow: 0 0 0 1px #03061699, 0 30px 80px #000c, inset 0 1px 0 #ffffff26, inset 0 0 80px #2a5bd71f;
}
/* a thin line of the logo's yellow along the top edge of every sheet */
.sheet::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 3px; border-radius: 0 0 99px 99px; background: linear-gradient(90deg, transparent, #ffcb05 30%, #fff3b0 50%, #ffcb05 70%, transparent); pointer-events: none; }
.menu-sheet { max-height: calc(100vh - 40px); overflow-y: auto; }

/* The menu's own backdrop: a spotlight in the logo's blue, comic-book dots and, on the title screen, slow sun rays.
   (While a duel is paused — data-kind="pause" — the table stays visible behind the plain overlay instead.) */
#menu[data-kind="home"], #menu[data-kind="page"] { background: radial-gradient(95% 62% at 50% 0%, #2f66e0 0%, #1b3c9f 26%, #0c1849 56%, #050919 100%); }
#menu[data-kind="home"]::before, #menu[data-kind="page"]::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(#ffffff17 1.5px, transparent 2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(85% 70% at 50% 8%, #000 0%, transparent 78%); mask-image: radial-gradient(85% 70% at 50% 8%, #000 0%, transparent 78%);
}
#menu[data-kind="home"]::after {
  --size: min(1200px, 150vmin);
  content: ""; position: fixed; z-index: 0; pointer-events: none; left: 50%; top: min(24vh, 210px);
  width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  background: repeating-conic-gradient(from 0deg, #ffffff14 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 12%, transparent 50%); mask-image: radial-gradient(circle, #000 0%, #000 12%, transparent 50%);
  animation: rays 80s linear infinite;
}
@keyframes rays { to { transform: rotate(360deg); } }
#menu[data-kind="page"] .menu-sheet::after { content: ""; position: absolute; top: 14px; right: 20px; width: 136px; aspect-ratio: 1400 / 643; background: url(assets/logo.webp) center / contain no-repeat; filter: drop-shadow(0 4px 8px #0009); pointer-events: none; }
#menu[data-kind="pause"] .menu-sheet { max-width: 430px; text-align: center; }

/* ---------- title screen ---------- */
#menu[data-kind="home"] .menu-sheet { background: none; border: 0; box-shadow: none; padding: 0; max-width: 1040px; max-height: none; overflow: visible; }
#menu[data-kind="home"] .menu-sheet::before { display: none; }
.home { display: grid; justify-items: center; gap: 16px; }
.hero { position: relative; width: 100%; display: grid; justify-items: center; }
h1 { margin: 0; }
h1.logo-wrap {
  position: relative; z-index: 2; width: min(500px, 82vw, 58vh); aspect-ratio: 1400 / 643; font-size: 0; line-height: 0; filter: drop-shadow(0 16px 22px #00000099);
  /* The delays are variables because the title screen is drawn twice — the static boot screen, then the real menu.
     menus.js sets them from the time since page load, so the second drawing carries on mid-motion instead of popping in again. */
  animation: logoIn .75s cubic-bezier(.2, 1.5, .4, 1) var(--in-delay, 0s) backwards, logoFloat 5.5s ease-in-out var(--float-delay, .75s) infinite;
}
.logo { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
/* a glint crosses the lettering every few seconds; the logo itself is the mask, so it only ever shows on the letters */
h1.logo-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(assets/logo.webp) center / 100% 100% no-repeat; mask: url(assets/logo.webp) center / 100% 100% no-repeat;
  background: linear-gradient(108deg, transparent 42%, #ffffffd9 50%, transparent 58%) no-repeat; background-size: 260% 100%; background-position: 160% 0;
  animation: glint 6.5s ease-in-out var(--glint-delay, 1.4s) infinite;
}
@keyframes glint { 0% { background-position: 160% 0; } 22%, 100% { background-position: -60% 0; } }
@keyframes logoIn { from { opacity: 0; transform: scale(.72) translateY(-18px); } }
@keyframes logoFloat { 50% { transform: translateY(-7px) rotate(-.6deg); } }
.hero-sub { position: relative; z-index: 3; margin-top: -2px; animation: subIn .5s cubic-bezier(.2, 1.5, .4, 1) var(--sub-delay, .35s) backwards; }
.hero-sub span {
  display: inline-block; padding: 5px 20px 6px; border-radius: 99px; font-weight: 900; font-size: clamp(12.5px, 1.5vw, 16px); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: #14204f;
  background: linear-gradient(180deg, #ffe97a, #ffcb05 58%, #f5a700); border: 2px solid #fff3b0; box-shadow: 0 3px 0 #a66a00, 0 10px 24px #0009; transform: rotate(-2deg);
}
@keyframes subIn { from { opacity: 0; transform: translateY(-10px) scale(.8); } }
.home .tag { position: relative; z-index: 3; margin: 12px 0 0; text-align: center; color: #d6e0ff; font-size: 15.5px; text-shadow: 0 1px 10px #050919; }

/* real cards fanned out on both sides of the logo (a different handful every visit), with a slow foil shimmer */
.hero-cards { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hc {
  --w: clamp(96px, 11vw, 128px);
  position: absolute; top: 47%; width: var(--w); aspect-ratio: 512 / 711; margin-top: calc(var(--w) * -0.7); border-radius: 8px; overflow: hidden;
  box-shadow: 0 16px 32px #000b, 0 0 0 1px #ffffff2e; transform: rotate(var(--r));
  animation: cardIn .65s cubic-bezier(.2, 1.3, .4, 1) var(--in, .3s) backwards, cardFloat 6s ease-in-out calc(var(--in, .3s) + .65s) infinite;
}
.hc img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hc::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 32%, #ffffff66 46%, #9ff3ff40 50%, #ffc4f040 54%, transparent 68%) no-repeat; background-size: 300% 100%; background-position: 140% 0;
  animation: holo 7s ease-in-out var(--in, 0s) infinite;
}
.hc-1 { left: 2.5%; --r: -13deg; --in: .45s; top: 52%; }
.hc-2 { left: 14%; --r: -4deg; --in: .3s; }
.hc-3 { right: 14%; --r: 5deg; --in: .35s; }
.hc-4 { right: 2.5%; --r: 14deg; --in: .5s; top: 52%; }
@keyframes cardIn { from { opacity: 0; transform: rotate(0deg) translateY(46px) scale(.7); } }
@keyframes cardFloat { 50% { transform: rotate(calc(var(--r) + 1.5deg)) translateY(-9px); } }
@keyframes holo { 0%, 35% { background-position: 140% 0; } 70%, 100% { background-position: -40% 0; } }

.sparks { position: absolute; inset: -12px -1%; z-index: 3; pointer-events: none; }
.spark {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, #ffe567 42%, #ffcb0500 74%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: twinkle var(--t) ease-in-out var(--d) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }

/* the mode tiles sit in a glass dock */
.home .menu-grid {
  width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; border-radius: 24px;
  background: linear-gradient(180deg, #10205ccc, #0a1238e6); border: 1px solid #7aa2ff45; box-shadow: 0 24px 60px #0009, inset 0 1px 0 #ffffff24;
}
.tile {
  --edge: #0c1f5e;
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 12px; text-align: left; min-height: 68px; padding: 11px 14px 12px 12px; border-radius: 16px;
  color: #f4f7ff; border: 1.5px solid #86a9ff59; background: linear-gradient(180deg, #3767dd 0%, #2449b0 48%, #1c3a93 100%);
  box-shadow: 0 4px 0 var(--edge), 0 10px 22px #0007, inset 0 1px 0 #ffffff59, inset 0 -10px 18px #0a1a5540;
  transition: transform .14s cubic-bezier(.3, 1.4, .5, 1), filter .15s, border-color .15s, box-shadow .15s;
  animation: tileIn .5s cubic-bezier(.2, 1.3, .4, 1) calc(var(--i, 0) * 40ms + 150ms) backwards;
}
.tile.wide { grid-column: 1 / -1; }
.tile::before { content: ""; position: absolute; z-index: -1; inset: 0 0 50% 0; border-radius: 14px 14px 50% 50% / 14px 14px 16px 16px; background: linear-gradient(180deg, #ffffff30, #ffffff08); pointer-events: none; }
.tile::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 38%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, #ffffff70, transparent); opacity: 0; pointer-events: none; }
.tile:hover:not(:disabled)::after, .tile:focus-visible::after { animation: sweep .7s ease-out; }
@keyframes sweep { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }
.tile:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.08); border-color: #ffd84a; box-shadow: 0 7px 0 var(--edge), 0 16px 28px #0009, 0 0 0 3px #ffcb0526, inset 0 1px 0 #ffffff59; }
.tile:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge), 0 4px 10px #0007, inset 0 1px 0 #ffffff40; transition-duration: .05s; }
/* keyboard focus: a clean white ring outside the tile instead of the default yellow one (invisible on the yellow tile) */
.tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 16px; }
.tile-ico {
  position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 23px; font-style: normal; line-height: 1; border-radius: 13px;
  background: linear-gradient(180deg, #0c1a52, #132978); border: 1px solid #ffffff30; box-shadow: inset 0 2px 6px #0009, 0 1px 0 #ffffff2e; transition: transform .22s cubic-bezier(.3, 1.6, .5, 1);
}
.tile:hover:not(:disabled) .tile-ico { transform: rotate(-8deg) scale(1.12); }
.tile-txt { min-width: 0; display: grid; gap: 1px; }
.tile-txt b { font-size: 16px; font-weight: 900; letter-spacing: .01em; text-shadow: 0 1px 0 #0a1a5599; }
.tile-txt small { display: block; font-size: 12px; font-weight: 600; opacity: 1; color: #cfdcff; line-height: 1.25; }
.tile.primary { --edge: #a66a00; color: #14204f; border-color: #fff1a8; background: linear-gradient(180deg, #ffe97a 0%, #ffcb05 50%, #f5a700 100%); box-shadow: 0 4px 0 var(--edge), 0 10px 26px #0007, 0 0 34px #ffcb0540, inset 0 1px 0 #ffffffb3; }
.tile.primary:hover:not(:disabled) { border-color: #fff; box-shadow: 0 7px 0 var(--edge), 0 16px 30px #0009, 0 0 44px #ffcb0566, inset 0 1px 0 #ffffffb3; }
.tile.primary .tile-txt b { text-shadow: 0 1px 0 #ffffff80; }
.tile.primary .tile-txt small { color: #5a4300; }
.tile.primary::before { background: linear-gradient(180deg, #ffffff66, #ffffff10); }
.tile.primary::after { animation: sweep 1s ease-out 1.3s, sweepIdle 6s ease-in-out 4s infinite; }
@keyframes sweepIdle { 0% { left: -60%; opacity: 1; } 18%, 100% { left: 130%; opacity: 1; } }
@keyframes tileIn { from { opacity: 0; transform: translateY(16px) scale(.95); } }
.live-dot { position: absolute; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--good); border: 2px solid #0c1a52; box-shadow: 0 0 10px var(--good); animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 5px #35d07f33, 0 0 12px var(--good); } }
.home .menu-row { justify-content: center; margin-top: 0; animation: tileIn .5s ease .55s backwards; }
.home .menu-row .act { border-radius: 99px; padding: 8px 16px; font-size: 13.5px; }

h2 { margin: 4px 0 10px; color: var(--gold); font-size: 25px; text-shadow: 0 2px 0 #0a1440; }
h2 small { color: var(--ink-dim); font-size: 15px; text-shadow: none; }
h3 { margin: 16px 0 7px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--sky); }
.tag { color: var(--ink-dim); font-size: 16px; margin: 12px 0 14px; }
.tag b { color: var(--gas); }
.lead { color: #dbe4ff; font-size: 15px; line-height: 1.45; margin: 0 0 12px; }
.hint { color: var(--ink-dim); font-size: 13px; line-height: 1.45; }
.hint code, .lead code { background: #ffffff1a; padding: 0 5px; border-radius: 5px; }
.hint.keys { line-height: 2; }
.code { font: 900 26px ui-monospace, monospace; letter-spacing: .18em; color: #ffe08a; }
#load { position: relative; height: 10px; border-radius: 99px; background: #060d2c; border: 1px solid #7aa2ff55; overflow: hidden; width: min(360px, 100%); box-shadow: inset 0 2px 4px #0009; }
#load-bar { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #2a5bd7, #5b95ff 45%, #ffcb05); transition: width .2s; }
/* until real progress arrives, a light runs along the track so the page never looks stuck */
#load::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff55, transparent) no-repeat; background-size: 40% 100%; animation: loadRun 1.3s linear infinite; }
@keyframes loadRun { from { background-position: -70% 0; } to { background-position: 170% 0; } }
#boot-error { color: #ffb4ae; font-weight: 700; margin-top: 10px; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.menu-grid .wide { grid-column: 1 / -1; }
.menu-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.menu-col { display: grid; gap: 10px; max-width: 340px; margin: 0 auto; }
.menu-col .act { text-align: center; }
.back { margin-bottom: 6px; padding: 6px 12px; font-size: 13px; }
.cards-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cards-row.tight { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.choice { text-align: left; border-radius: 14px; padding: 11px 13px; background: linear-gradient(180deg, #7aa2ff1f, #7aa2ff0d); border: 2px solid #7aa2ff38; box-shadow: inset 0 1px 0 #ffffff14; display: grid; gap: 3px; transition: transform .12s cubic-bezier(.3, 1.4, .5, 1), border-color .15s, background .15s, box-shadow .15s; }
.choice:hover { transform: translateY(-2px); border-color: #a9c4ff; }
/* selected: brighter glass + the accent as border and glow (a yellow tint over navy would just turn muddy) */
.choice.on { border-color: var(--accent, var(--gold)); background: linear-gradient(180deg, #5b95ff4d, #2a5bd733); box-shadow: 0 0 22px color-mix(in srgb, var(--accent, var(--gold)) 35%, transparent), inset 0 1px 0 #ffffff40; }
.choice small { color: var(--ink-dim); line-height: 1.3; }
.choice.boss.beaten { border-color: #35d07f77; }
.choice em { font-style: normal; color: #86efac; font-weight: 800; font-size: 12px; }
.big-ico { font-size: 38px; line-height: 1; }
.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rung { text-align: center; padding: 10px 6px; border-radius: 12px; background: #7aa2ff14; border: 2px solid #7aa2ff33; display: grid; gap: 2px; opacity: .75; }
.rung.done { border-color: #35d07f88; opacity: 1; background: #35d07f14; }
.rung.now { border-color: var(--gold); opacity: 1; background: linear-gradient(180deg, #5b95ff4d, #2a5bd733); box-shadow: 0 0 20px #ffcb0550; }
.rung small { color: var(--ink-dim); }
.offer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.offer-card { background: #7aa2ff14; border: 2px solid #7aa2ff38; border-radius: 14px; padding: 10px; display: grid; gap: 5px; text-align: center; transition: transform .12s, border-color .15s; }
.offer-card:hover { transform: translateY(-5px) scale(1.02); border-color: var(--gold); }
.offer-card img { width: 100%; border-radius: 10px; }
.offer-card small { color: var(--ink-dim); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.two-col section { background: #7aa2ff12; border: 1px solid var(--panel-line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 9px; align-content: start; }
.two-col h3 { margin-top: 0; }
label { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-weight: 700; font-size: 14px; }
label.check { justify-content: flex-start; }
input:not([type]), input[type="text"], select { background: #060d2c; border: 1.5px solid #7aa2ff55; border-radius: 10px; padding: 7px 10px; min-width: 0; box-shadow: inset 0 2px 4px #0007; transition: border-color .15s, box-shadow .15s; }
input:not([type]):focus, input[type="text"]:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 2px 4px #0007, 0 0 0 3px #ffcb0533; }
input[type="range"] { accent-color: var(--gold); width: 200px; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); }
.settings { display: grid; gap: 11px; max-width: 560px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ach { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 11px; background: #7aa2ff10; border: 1px solid #7aa2ff2e; opacity: .55; }
.ach.on { opacity: 1; border-color: #ffcb0599; background: linear-gradient(180deg, #5b95ff40, #2a5bd726); box-shadow: 0 0 16px #ffcb0526; }
.ach .ico { font-size: 25px; }
.ach small { display: block; color: var(--ink-dim); line-height: 1.3; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.stat-grid div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 9px; background: #7aa2ff14; font-size: 13.5px; }
.stat-grid b { color: #ffe27a; }
.stat-grid span { color: var(--ink-dim); }

.rules-sheet { display: grid; gap: 12px; max-height: 90vh; overflow-y: auto; }
.rules-sheet ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.4; color: #d5def5; }
.rules-sheet code { background: #ffffff1a; padding: 0 5px; border-radius: 5px; font-weight: 800; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; font-size: 13px; }
.legend-grid .rule { padding: 6px 9px; }
.rules-sheet .act { text-align: center; justify-self: center; min-width: 160px; }
.end-sheet { text-align: center; max-width: 620px; display: grid; gap: 10px; justify-items: center; }
.end-sheet h2 { font-size: 38px; margin: 0; }
#end.won .end-sheet { border-color: #ffd166aa; box-shadow: 0 30px 80px #000c, 0 0 60px #ffd16633; }
.end-sheet p { color: var(--ink-dim); margin: 0; }
.end-sheet .stat-grid { width: 100%; }
.end-sheet .menu-row { justify-content: center; }
#end-ach { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.chooser-sheet { max-width: 760px; display: grid; gap: 12px; justify-items: center; }
#chooser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; width: 100%; max-height: 62vh; overflow-y: auto; padding: 4px; }
.pick { position: relative; background: #7aa2ff14; border: 2px solid #7aa2ff38; border-radius: 12px; padding: 6px; display: grid; gap: 3px; text-align: center; transition: transform .1s, border-color .15s; }
.pick:hover, .pick:focus-visible { transform: translateY(-3px); border-color: var(--gold); }
.pick img { width: 100%; border-radius: 8px; }
.pick .nm { font-size: 12px; font-weight: 800; line-height: 1.15; }
.pick .nt { font-size: 11.5px; color: #86efac; font-weight: 800; }
.pick kbd { position: absolute; top: 8px; left: 8px; background: #000a; }

/* ---------- deck builder ---------- */
.overlay.builder { display: block; padding: 0; background: linear-gradient(180deg, #0b1540, #060b22 45%); z-index: 22; overflow: hidden; }
.b-head { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #ffcb0540; background: linear-gradient(180deg, #172b72, #0f1d52); flex-wrap: wrap; }
.b-head h2 { margin: 0 auto 0 4px; font-size: 20px; }
.b-body { display: grid; grid-template-columns: 1fr 400px; height: calc(100vh - 61px); }
.b-pool { overflow-y: auto; padding: 12px 14px 40px; }
.b-filters { display: flex; gap: 7px; flex-wrap: wrap; position: sticky; top: -12px; background: #080f2ef2; padding: 8px 0; z-index: 2; }
.b-filters input { flex: 1 1 200px; }
.b-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 9px; }
.b-grid.items { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.b-card { position: relative; padding: 0; border: 3px solid transparent; border-radius: 9px; background: none; aspect-ratio: 512 / 711; overflow: hidden; transition: transform .1s, border-color .12s, filter .12s; filter: saturate(.85) brightness(.82); }
.b-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-card:hover { transform: translateY(-3px) scale(1.03); filter: none; z-index: 1; }
.b-card.in { border-color: #ffcb05; filter: none; box-shadow: 0 0 16px #ffcb0566; }
.b-card .g { position: absolute; left: 3px; top: 3px; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; background: radial-gradient(circle at 35% 30%, #7dd3fc, var(--gas-deep)); border: 1.5px solid #e0f2fe; color: #fff; }
.b-card .tick { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #16a34a; font-weight: 900; font-size: 13px; }
.b-side { border-left: 1px solid var(--panel-line); display: grid; grid-template-rows: minmax(0, 46%) minmax(0, 1fr); background: #0a1233; min-height: 0; }
.b-inspect { overflow-y: auto; padding: 12px; display: grid; grid-template-columns: 150px 1fr; gap: 11px; align-content: start; border-bottom: 1px solid var(--panel-line); }
.b-inspect img { width: 100%; border-radius: 9px; }
.b-inspect .nm { font-weight: 900; display: flex; gap: 8px; align-items: center; }
.b-inspect .gas-chip { width: 30px; height: 30px; font-size: 15px; }
.b-inspect .sub { color: var(--ink-dim); font-size: 12px; margin: 4px 0 7px; }
.b-inspect .rules { font-size: 12px; gap: 5px; }
.b-deck { overflow-y: auto; padding: 12px; }
.b-meter { display: grid; gap: 8px; font-size: 13px; }
.curve { display: flex; gap: 4px; align-items: flex-end; height: 58px; }
.curve .bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.curve .bar i { width: 100%; background: linear-gradient(#7dd3fc, #0ea5e9); border-radius: 4px 4px 0 0; min-height: 2px; }
.curve .bar span { font-size: 10px; color: var(--ink-dim); }
.curve .bar em { position: absolute; top: -2px; font-size: 10px; font-style: normal; font-weight: 800; }
#b-problems { margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: #ffb4ae; display: grid; gap: 2px; }
#b-problems .ok { color: #86efac; font-weight: 800; }
#b-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 3px; }
#b-list li { display: grid; grid-template-columns: 24px 1fr auto 24px; gap: 7px; align-items: center; padding: 4px 6px; border-radius: 8px; background: #7aa2ff14; font-size: 13px; }
#b-list .g { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 12px; background: var(--gas-deep); }
#b-list .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#b-list .m { color: var(--ink-dim); font-size: 11.5px; }
#b-list button { border: 0; background: #ffffff14; border-radius: 6px; font-weight: 900; }
.bad { color: #ff9a94; font-style: normal; }

/* ---------- responsive ---------- */
/* Below 1280px the inspector stops reserving a column: it floats over the table on the side
   opposite the cursor, only while a card is hovered / tapped. */
@media (max-width: 1279px) {
  #app { grid-template-columns: 1fr; }
  #inspector {
    position: fixed; z-index: 10; top: 8px; left: 8px; width: 250px; max-height: calc(100vh - 16px); overflow: hidden;
    border-radius: 14px; border: 1px solid var(--panel-line); pointer-events: none; padding: 10px;
    opacity: 0; transform: translateY(6px); transition: opacity .14s, transform .14s; box-shadow: 0 20px 50px #000b;
  }
  #inspector.show { opacity: 1; transform: none; }
  #inspector.right { left: auto; right: 8px; }
  #inspector-empty { display: none; }
  #insp-rules { font-size: 12px; gap: 5px; }
  .panel { width: 204px; }
  #actions { width: 216px; }
  #preview { right: 240px; }
  #taunt { left: 226px; }
  .b-body { grid-template-columns: 1fr 340px; }
  .b-inspect { grid-template-columns: 110px 1fr; }
}
@media (max-width: 760px) {
  .panel { width: 168px; padding: 7px 9px; font-size: 13px; }
  .lbl { display: none; }
  #actions { width: 176px; }
  .act { font-size: 13px; padding: 8px 10px; }
  #inspector { width: 200px; }
  #menu[data-kind="page"] .menu-sheet::after { display: none; }
  .two-col, .offer { grid-template-columns: 1fr; }
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .sheet { padding: 16px; }
  #preview { display: none; }
  .b-body { grid-template-columns: 1fr; grid-template-rows: 1fr 44vh; }
  .b-side { border-left: 0; border-top: 1px solid var(--panel-line); grid-template-rows: 1fr; }
  .b-inspect { display: none; }
}
/* title screen: three columns of tiles → two → two compact ones with the icon on top; the card fan needs room */
@media (max-width: 940px) {
  .home .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.solo { grid-column: 1 / -1; }   /* Quick Duel takes a row of its own: 1 + 8 tiles, no orphan at the end */
  .hero-cards { display: none; }
}
@media (max-width: 560px) {
  #menu[data-kind="home"] { padding: max(26px, env(safe-area-inset-top, 0px)) 12px calc(24px + var(--safe-b)); place-items: start center; }
  .home { gap: 12px; }
  .home .tag { font-size: 13.5px; margin-top: 9px; }
  .home .menu-grid { gap: 9px; padding: 10px; border-radius: 20px; }
  .tile { flex-direction: column; justify-content: center; text-align: center; gap: 5px; padding: 10px 6px 11px; min-height: 94px; }
  .tile.wide, .tile.solo { flex-direction: row; justify-content: flex-start; text-align: left; gap: 11px; min-height: 60px; padding: 9px 12px 10px; }
  .tile-ico { width: 36px; height: 36px; font-size: 19px; border-radius: 11px; }
  .tile.wide .tile-ico, .tile.solo .tile-ico { width: 40px; height: 40px; font-size: 21px; }
  .tile-txt b { font-size: 14px; }
  .tile-txt small { font-size: 10.5px; }
  .home .menu-row { gap: 7px; }
  .home .menu-row .act { padding: 7px 12px; font-size: 12.5px; }
}
/* short, wide windows (small laptops, phones on their side): keep the whole title screen in one view */
@media (max-height: 760px) and (min-width: 941px) {
  h1.logo-wrap { width: min(440px, 52vh); }
  .home { gap: 12px; }
  .home .tag { margin-top: 8px; font-size: 14.5px; }
  .tile { min-height: 60px; padding: 8px 12px 9px 10px; }
  .tile-ico { width: 40px; height: 40px; font-size: 21px; }
  .home .menu-grid { padding: 12px; gap: 10px; }
}
/* phones held upright: both panels shrink into a top strip, actions become a compact stack above the hand */
body.portrait .panel { width: calc(50% - 12px); padding: 5px 8px; font-size: 11.5px; top: 8px; bottom: auto; }
body.portrait #panel-1 { left: 8px; }
body.portrait #panel-0 { left: auto; right: 8px; top: 8px; bottom: auto; }
body.portrait .who { margin-bottom: 2px; font-size: 12.5px; gap: 5px; }
body.portrait .who .tag { display: none; }
body.portrait .avatar { font-size: 15px; }
body.portrait .row { margin-top: 2px; min-height: 13px; gap: 4px; }
body.portrait .row.small { font-size: 10.5px; }
body.portrait .lbl { display: none; }
body.portrait .pip { width: 6px; height: 11px; border-radius: 2px; }
body.portrait .gas { gap: 2px; flex-wrap: nowrap; }
body.portrait .gas-num { font-size: 11px; }
body.portrait .prize { width: 12px; height: 12px; border-width: 1.5px; }
body.portrait #panel-0 .panel-pop { top: 100%; bottom: auto; }
body.portrait #top-right { top: 96px; right: 8px; left: auto; }
body.portrait #top-right button { padding: 3px 10px; min-height: 30px; }
body.portrait #log { top: 132px; right: 8px; width: min(290px, 84vw); max-height: 34vh; z-index: 4; }
/* a horizontal action bar in the strip between the table and the hand */
body.portrait #actions { left: 8px; right: 8px; width: auto; bottom: calc(21.5vh + var(--safe-b)); flex-direction: row; flex-wrap: wrap-reverse; justify-content: flex-end; align-items: stretch; gap: 6px; }
body.portrait #attack-list { flex-direction: row; flex: 1 1 100%; gap: 6px; }
body.portrait #attack-list .act { flex: 1 1 0; min-width: 0; }
body.portrait #actions > .act { flex: 0 1 auto; }
body.portrait .act { padding: 8px 10px; font-size: 12.5px; min-height: 42px; }
body.portrait .act .line2 { font-size: 10.5px; }
body.portrait kbd { display: none; }
body.portrait #prompt, body.portrait #tutorial { top: 132px; }   /* below the ☰ ? Log row */
body.portrait #prompt { white-space: normal; text-align: center; font-size: 12.5px; padding: 6px 12px; border-radius: 14px; width: max-content; }
body.portrait #tutorial { font-size: 12.5px; padding: 9px 11px; }
body.portrait #taunt { left: 8px; top: 186px; max-width: 70%; font-size: 12.5px; }
body.portrait #taunt.near { bottom: auto; top: 186px; left: auto; right: 8px; }
body.portrait #toast { bottom: calc(42vh + var(--safe-b)); }
body.portrait #banner { top: 34%; }
body.portrait #inspector { width: min(220px, 56vw); top: 186px; max-height: 56vh; }
body.portrait #replay-bar { bottom: calc(23vh + var(--safe-b)); }
body.portrait #achievements { top: 186px; }
body.portrait .ach-toast { min-width: 0; width: 86vw; }
@media (pointer: coarse) { .act, #top-right button, .choice, #replay-bar button { min-height: 44px; } #top-right button { min-width: 44px; } }

/* ---------- graphics quality: body[data-gfx="high|medium|low|lowest"], set by main.js from quality.js ---------- */
/* Low and Lowest are for devices that struggle, so the page stops asking the browser for its own expensive tricks:
   frosted glass over the moving table (re-blurred every frame), and the title screen's decorative animations. */
:is(body[data-gfx="low"], body[data-gfx="lowest"]) :is(.panel, .overlay.light) { backdrop-filter: none; }
:is(body[data-gfx="low"], body[data-gfx="lowest"]) .overlay.light { background: #040818d9; }
/* (pseudo-elements cannot go inside :is(), hence the long-hand list) */
:is(body[data-gfx="low"], body[data-gfx="lowest"]) #menu::after,
:is(body[data-gfx="low"], body[data-gfx="lowest"]) h1.logo-wrap::after,
:is(body[data-gfx="low"], body[data-gfx="lowest"]) .hc,
:is(body[data-gfx="low"], body[data-gfx="lowest"]) .hc::after,
:is(body[data-gfx="low"], body[data-gfx="lowest"]) .tile::after,
:is(body[data-gfx="low"], body[data-gfx="lowest"]) .live-dot,
:is(body[data-gfx="low"], body[data-gfx="lowest"]) #load::after { animation: none !important; }
:is(body[data-gfx="low"], body[data-gfx="lowest"]) h1.logo-wrap { animation: none !important; filter: none; }
:is(body[data-gfx="low"], body[data-gfx="lowest"]) .spark:nth-child(n+7) { display: none; }
body[data-gfx="lowest"] .sparks, body[data-gfx="lowest"] .hero-cards, body[data-gfx="lowest"] #menu::after { display: none; }
body[data-gfx="lowest"] .tile { animation: none !important; box-shadow: 0 4px 0 var(--edge), inset 0 1px 0 #ffffff59; }

/* ---------- reduced motion ---------- */
/* the title screen keeps its look but holds still: no rays, floating, glints, sparkles or entrance bounces */
@media (prefers-reduced-motion: reduce) {
  .act.end.nudge, .act.hot, #menu::after, h1.logo-wrap, h1.logo-wrap::after, .hero-sub, .hc, .hc::after, .spark, .tile, .tile::after, .home .menu-row, .live-dot, #load::after { animation: none !important; }
  .spark { opacity: .85; }
  .spark:nth-child(n+7) { display: none; }   /* they normally take turns; standing still, six are plenty */
}
body.reduced-motion .act.end.nudge, body.reduced-motion .act.hot, body.reduced-motion #menu::after, body.reduced-motion h1.logo-wrap, body.reduced-motion h1.logo-wrap::after, body.reduced-motion .hero-sub,
body.reduced-motion .hc, body.reduced-motion .hc::after, body.reduced-motion .spark, body.reduced-motion .tile, body.reduced-motion .tile::after, body.reduced-motion .home .menu-row,
body.reduced-motion .live-dot, body.reduced-motion #load::after { animation: none !important; }
body.reduced-motion .spark { opacity: .85; }
body.reduced-motion .spark:nth-child(n+7) { display: none; }
body.reduced-motion .tile, body.reduced-motion .tile-ico { transition: none; }
body.reduced-motion #banner, body.reduced-motion .floater, body.reduced-motion .ach-toast, body.reduced-motion #taunt, body.reduced-motion .panel-pop { animation-duration: .01s !important; animation-fill-mode: none !important; }
body.reduced-motion #flash { display: none !important; }
body.reduced-motion .act, body.reduced-motion .choice, body.reduced-motion .b-card { transition: none; }