:root {
  --bg: #000;
  --fg: #fff;
  --muted: #a3a3a3;
  --line: #262626;
  --green: #8ef200;
  --pink: #f560ee;
  --yellow: #ffe100;
  --orange: #ff4a14;
  --blue: #2f5bff;
  --red: #ff1a3c;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.display {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

input {
  font: inherit;
  color: inherit;
}

[hidden] { display: none !important; }

.screen {
  min-height: 100%;
  padding: calc(var(--sat) + 20px) calc(var(--sar) + 20px) calc(var(--sab) + 24px) calc(var(--sal) + 20px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 520px;
  margin: 0 auto;
}

/* ---------- Setup ---------- */

.setup-head { text-align: center; padding-top: 8px; }
.logo { width: min(80%, 320px); height: auto; display: block; margin: 0 auto; }
.tagline { margin: 10px 0 0; font-size: 22px; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 8px; }
.label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; background: #141414; padding: 6px; border-radius: 14px; }
.seg-btn { height: 48px; border-radius: 10px; font-weight: 900; font-size: 20px; color: var(--muted); }
.seg-btn.on { background: var(--fg); color: var(--bg); }

.player-list { display: flex; flex-direction: column; gap: 12px; }

.player-row {
  display: grid;
  grid-template-columns: 64px 1fr auto; --tile: #222;
  gap: 12px;
  align-items: center;
  background: #111;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
}
.player-row .thumb { width: 64px; height: 64px; border-radius: 12px; }

.player-row input {
  width: 100%; min-width: 0;
  background: transparent; border: 0; border-bottom: 2px solid var(--line);
  padding: 8px 0; font-size: 18px; font-weight: 700; outline: none;
}
.player-row input:focus { border-color: var(--accent, var(--fg)); }
.player-row .row-actions { display: flex; flex-direction: column; gap: 6px; }
.small-btn {
  padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: #222; white-space: nowrap;
}
.small-btn:active { background: #333; }

.cta {
  display: block; width: 100%; height: 64px; border-radius: 16px;
  background: var(--green); color: var(--bg); font-size: 22px;
}
.cta:active { filter: brightness(.9); }

.ghost {
  display: block; width: 100%; height: 52px; border-radius: 14px;
  background: #1a1a1a; font-weight: 700; font-size: 16px;
}
.link { color: var(--muted); font-weight: 700; padding: 12px; text-decoration: underline; text-underline-offset: 3px; }
.link.danger { color: var(--red); }
.hint { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }

/* Install button + the iPhone how-to (Apple only lets you add to the home screen by hand). */
.ghost.install { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--green); }
.sheet-item.install { color: var(--green); }
.install-how { text-align: left; }
.steps li > span:last-child { text-align: left; }
.install-how h2 { text-align: center; }
.install-sub { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.steps { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.4; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.steps .n {
  flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--green); color: var(--bg);
  font-weight: 900; font-size: 14px; display: grid; place-items: center; margin-top: 1px;
}
.share-icon {
  display: inline-block; width: 15px; height: 17px; vertical-align: -3px; margin: 0 2px;
  background: var(--blue);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16"><path fill="black" d="M7 0l3.5 3.5-1 1L7.75 2.8V10h-1.5V2.8L4.5 4.5l-1-1zM2 6h2.5v1.5H3.5v7h7v-7H9.5V6H12v10H2z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16"><path fill="black" d="M7 0l3.5 3.5-1 1L7.75 2.8V10h-1.5V2.8L4.5 4.5l-1-1zM2 6h2.5v1.5H3.5v7h7v-7H9.5V6H12v10H2z"/></svg>') center / contain no-repeat;
}

/* ---------- Bars (picker / stats) ---------- */

.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.bar-title { margin: 0; font-size: 18px; text-align: center; }
.bar-btn { font-weight: 700; font-size: 16px; padding: 10px 0; text-align: left; }
.bar-btn:last-child { text-align: right; }

/* ---------- Avatar swatch: background image stretched to fill, character standing on the bottom ---------- */

.av {
  position: relative; overflow: hidden;
  background: var(--bg) center / cover no-repeat, var(--tile, #222);
  color: var(--ink, #fff);
}
.av > img {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 86%; width: auto; max-width: 96%; object-fit: contain; object-position: bottom center;
  display: block;
}

/* ---------- Picker ---------- */

.icon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px;
}
.icon-grid button { aspect-ratio: 1; border-radius: 16px; border: 3px solid transparent; padding: 0; }
.icon-grid button.on { border-color: var(--green); }

/* ---------- Game board ---------- */

#game { padding: 0; max-width: none; gap: 0; height: 100%; position: relative; }
.board {
  height: 100%;
  display: grid;
  gap: 10px;
  padding: calc(var(--sat) + 10px) calc(var(--sar) + 10px) calc(var(--sab) + 10px) calc(var(--sal) + 10px);
}
.board[data-n="2"] { grid-template-rows: 1fr 1fr; }
.board[data-n="3"] { grid-template-rows: 1fr 1fr 1fr 72px; }
.board[data-n="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* Face-to-face: the players sitting across the table get their tiles upside down. */
.board.flip[data-n="2"] .tile:nth-child(1),
.board.flip[data-n="4"] .tile:nth-child(-n+2) { transform: rotate(180deg); }

.tile {
  position: relative; overflow: hidden; border-radius: 22px;
  background: var(--bg) center / cover no-repeat, var(--tile, #222);
  color: var(--ink, #fff);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12);
  container-type: size;
  transition: background .25s, color .25s;
}
/* Character height is fixed per layout but a wide character is held back so it can't swallow
   a narrow tile; the box always matches the art exactly (--ar is the art's aspect ratio).
   These live on the tile's children, not the tile: a @container rule can only size things
   *inside* the container, so anything set on .tile itself would silently never apply. */
.tile > * {
  --hh: min(82cqh, calc(60cqw / var(--ar, 1)));
  --hw: calc(var(--ar, 1) * var(--hh));
}

/* The character stands on the tile's bottom edge, in the corner `data-side` names. */
.tile .head { position: absolute; bottom: 0; height: var(--hh); width: var(--hw); pointer-events: none; }
.tile .head img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom left; }
.tile[data-side="left"] .head { left: 2cqw; }
.tile[data-side="right"] .head { right: 2cqw; }
.tile[data-side="right"] .head img { object-position: bottom right; }

/* The number, centred in whatever space the character leaves. Sized to fit both ways. */
.tile .hp {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  font-weight: 900; letter-spacing: -0.04em; line-height: 1; pointer-events: none;
  font-size: min(52cqh, 24cqw + 8cqh, 220px);
}
@container (aspect-ratio > 1.15) {
  .tile .hp {
    inset: 0 0 0 calc(var(--hw) + 4cqw);
    font-size: min(52cqh, 0.7 * (100cqw - var(--hw) - 8cqw), 220px);
  }
  .tile[data-side="right"] .hp { inset: 0 calc(var(--hw) + 4cqw) 0 0; }
  /* Characters look towards their number: mirror any that would be looking away. */
  .tile[data-side="left"][data-faces="left"] .head img,
  .tile[data-side="right"][data-faces="right"] .head img { transform: scaleX(-1); }
}
/* Tall tiles: the character stands centred on the bottom edge and the number is centred in
   whatever space is left above it (the box is the art's exact size, so that space is real). */
@container (aspect-ratio <= 1.15) {
  .tile > * { --hh: min(46cqh, calc(92cqw / var(--ar, 1))); }
  .tile[data-side] .head { left: 50%; right: auto; transform: translateX(-50%); }
  .tile[data-side] .head img { object-position: bottom center; }
  .tile .hp { inset: 0 0 var(--hh) 0; font-size: min(28cqh, 44cqw); }
}

.tile .name {
  position: absolute; z-index: 3; top: 10px; left: 14px; right: 14px;
  font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; opacity: .6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.tile[data-side="left"] .name { text-align: right; }

.tile.out { --tile: #2a2a2a; --ink: #8a8a8a; }
.tile.out .head img { filter: grayscale(1) opacity(.5); }
.tile .ko {
  position: absolute; z-index: 4; inset: 0; display: none; place-items: center;
  font-size: clamp(28px, 18cqh, 64px); color: var(--red); text-shadow: 0 2px 10px rgba(0,0,0,.6);
  pointer-events: none; transform: rotate(-12deg);
}
.tile.out .ko { display: grid; }

.tile .delta {
  position: absolute; z-index: 5; top: 8px; left: 50%; transform: translateX(-50%);
  font-size: clamp(16px, 9cqh, 30px); font-weight: 900; padding: 3px 12px; border-radius: 999px;
  background: var(--ink); color: var(--tile); opacity: 0; transition: opacity .2s; pointer-events: none;
}
.tile .delta.show { opacity: 1; }

/* Winner celebration: the winning tile flashes and its head bounces while the rest dim. */
.board.celebrate .tile { transition: filter .4s; }
.board.celebrate .tile:not(.win) { filter: brightness(.45) saturate(.6); }
.tile.win { z-index: 6; animation: win-flash 1.5s ease-in-out both; }
@keyframes win-flash {
  0%        { scale: 1; filter: brightness(1); }
  12%       { scale: 1.04; filter: brightness(1.6); }
  24%       { scale: 1; filter: brightness(1); }
  36%       { scale: 1.04; filter: brightness(1.6); }
  48%       { scale: 1; filter: brightness(1); }
  60%       { scale: 1.04; filter: brightness(1.6); }
  75%, 100% { scale: 1.02; filter: brightness(1.15); }
}
.tile.win .head img { animation: win-bounce .5s ease-in-out 3; }
@keyframes win-bounce {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9%; }
}
.tile.win .hp { animation: win-pop .5s ease-in-out 3; }
@keyframes win-pop {
  0%, 100% { scale: 1; }
  50%      { scale: 1.12; }
}

/* Invisible tap zones: left half takes one away, right half adds one. */
.tap {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; touch-action: none;
  background: var(--ink); opacity: 0; transition: opacity .12s;
}
.tap.minus { left: 0; }
.tap.plus { right: 0; }
.tap.down { opacity: .14; }

.menu-btn {
  position: absolute; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 999px; background: #000; color: #fff;
  display: grid; place-items: center; border: 3px solid #000;
}
.menu-btn svg { display: block; }
.board[data-n="3"] ~ .menu-btn { top: auto; bottom: calc(var(--sab) + 18px); transform: translateX(-50%); }

.tap-hint {
  position: absolute; z-index: 30; left: 50%; top: 62%; transform: translate(-50%, -50%);
  width: max-content; max-width: 80vw; padding: 10px 16px; border-radius: 12px;
  background: #fff; color: #000; font-size: 14px; font-weight: 700; text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.5); pointer-events: none;
}

/* ---------- Sheet & overlays ---------- */

.sheet, .overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.7);
  display: flex; align-items: flex-end; justify-content: center;
}
.overlay { align-items: center; padding: 20px; }
.sheet-body {
  width: 100%; max-width: 520px; background: #111; border-radius: 20px 20px 0 0;
  padding: 12px 12px calc(var(--sab) + 12px); display: flex; flex-direction: column; gap: 6px;
  max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
}
.sheet-note { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; }
.sheet-label { margin: 6px 4px 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.menu-players { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 8px; }
.menu-players button { aspect-ratio: 1; border-radius: 14px; border: 2px solid rgba(255,255,255,.12); }
.menu-players button:active { filter: brightness(1.15); }
.menu-players .tag {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 11px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(0,0,0,.55); color: #fff; text-align: center;
}
.sheet-actions { display: flex; flex-direction: column; gap: 6px; }
.sheet-item { height: 54px; border-radius: 12px; background: #1c1c1c; font-weight: 700; font-size: 17px; }
.sheet-item:active { background: #2a2a2a; }
.sheet-item.cancel { background: transparent; color: var(--muted); }
.sheet-item.play { background: var(--green); color: var(--bg); font-size: 20px; }
a.sheet-item { display: grid; place-items: center; text-decoration: none; }
.sheet-item.site { color: var(--green); }

.overlay-body {
  width: 100%; max-width: 420px; background: #111; border: 1px solid var(--line); border-radius: 22px;
  padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; text-align: center;
}
.overlay-body h2 { margin: 0; font-size: 28px; }
.kicker { margin: 0; color: var(--pink); font-size: 16px; }
.winner-name { font-size: clamp(32px, 10vw, 44px); color: var(--green); }
.winner-sub { margin: -6px 0 8px; color: var(--muted); font-weight: 700; }

.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick-list .ghost { color: var(--accent, #fff); }

/* ---------- Stats ---------- */

.stats-list { display: flex; flex-direction: column; gap: 8px; }
.stat-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: baseline;
  padding: 14px 16px; background: #111; border: 1px solid var(--line); border-radius: 14px;
}
.stat-row .n { font-weight: 900; font-size: 18px; text-transform: uppercase; }
.stat-row .v { font-weight: 900; font-size: 20px; text-align: right; }
.stat-row .v small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
.stat-row .w { color: var(--green); }
.stat-row .l { color: var(--red); }
.stats-empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* Short screens (a phone on its side): tighter rows and a two-column action grid so it all fits. */
@media (max-height: 500px) {
  .sheet-body { max-width: 720px; padding-top: 8px; }
  .sheet-body .seg { padding: 4px; }
  .sheet-body .seg-btn { height: 36px; font-size: 16px; }
  .sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .sheet-item { height: 42px; font-size: 15px; }
  .sheet-item.play, .sheet-item.site, .sheet-item.cancel { grid-column: 1 / -1; }
  .sheet-item.install:last-of-type { grid-column: 1 / -1; }
  .sheet-item.cancel { height: 36px; }
  .menu-players button { aspect-ratio: 1.6; }
}