/* Practice game page. Shares tokens and seat styles with app.css. */
.play {
  max-width: 1200px; margin: 0 auto; padding: clamp(16px, 3vw, 36px) clamp(16px, 4vw, 48px) 60px;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(20px, 3vw, 40px); align-items: start;
}
.console, .side {
  background: linear-gradient(180deg, #141417, #0d0d0f); border: 1px solid var(--line); border-radius: 22px; padding: 20px;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .9);
}
.console { min-height: 560px; display: flex; flex-direction: column; }
.side { position: sticky; top: 84px; }

.hud { display: flex; align-items: center; gap: 18px; }
.hud .round { margin-left: 0; font-size: 22px; }
.lives { display: inline-flex; align-items: center; gap: 7px; }
.lives-k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-right: 2px; }
.lives i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff4bf, var(--y) 52%, #b38600); box-shadow: 0 0 12px rgba(240, 185, 11, .7); transition: all .4s; }
.lives i.dead { background: #19191c; box-shadow: 0 0 0 1.5px rgba(255, 75, 85, .55) inset; }
.hud .timer { margin-left: auto; font-size: 40px; line-height: 1; }
.ptag { margin: 12px 0 0; }

.lobby { flex: 1; display: grid; place-content: center; text-align: center; gap: 10px; padding: 40px 0; }
.seatno { font-family: var(--display); font-size: clamp(48px, 6vw, 80px); line-height: 1; text-transform: uppercase; color: var(--y); }
html[lang^=zh] .seatno { font-family: var(--body); font-weight: 900; }
.lobby-sub { color: var(--mute); font-size: 17px; }
.lobby-cd { margin-top: 18px; font-size: 15px; color: var(--mute); }
.lobby-cd b { display: block; font-family: 'Anton', sans-serif; font-weight: 400; font-size: 96px; line-height: 1; color: var(--ink); margin-top: 6px; }

.ask { flex: 1; display: flex; flex-direction: column; padding-top: 22px; }
.q { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4vw, 54px); line-height: 1.02; text-transform: uppercase; text-wrap: balance; }
html[lang^=zh] .q { font-family: var(--body); font-weight: 900; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2; }
.rule { margin-top: 12px; color: var(--mute); font-size: 16px; max-width: 560px; }
.big2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.big2[hidden], .guess[hidden] { display: none; }
.pick {
  height: 150px; border-radius: 22px; border: 2px solid #2c2c33; background: #18181c; color: var(--ink); cursor: pointer;
  font: 400 clamp(30px, 3.4vw, 46px) 'Anton', var(--body); text-transform: uppercase; letter-spacing: .02em;
  transition: transform .12s, border-color .15s, background .15s, opacity .3s;
}
html[lang^=zh] .pick { font-family: var(--body); font-weight: 900; }
.pick:hover:not(:disabled) { border-color: var(--y); transform: translateY(-2px); }
.pick:active:not(:disabled) { transform: scale(.98); }
.pick:focus-visible { outline: 3px solid var(--y-hot); outline-offset: 3px; }
.pick:disabled { cursor: default; }
.pick.chosen { background: var(--y); color: #111; border-color: var(--y-hot); box-shadow: 0 0 40px -6px rgba(240, 185, 11, .8); }
.pick.faded { opacity: .3; }
.guess { margin-top: 26px; display: grid; gap: 10px; max-width: 520px; }
.now { color: var(--mute); }
.now b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 30px; color: var(--ink); margin-left: 6px; }
.guess label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.guess-row { display: flex; gap: 10px; }
.guess input {
  flex: 1; min-width: 0; height: 64px; border-radius: 16px; border: 2px solid #2c2c33; background: #18181c; color: var(--ink);
  font: 400 34px 'Anton', sans-serif; padding: 0 18px; font-variant-numeric: tabular-nums;
}
.guess input:focus { outline: none; border-color: var(--y); }
.guess .btn { height: 64px; flex: none; }
.status { margin-top: 20px; min-height: 1.5em; font-weight: 700; font-size: 16px; color: var(--ink); }
.status.waiting::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.seal { margin-top: auto; padding-top: 18px; font-size: 12px; color: #5d5b56; font-family: ui-monospace, Menlo, monospace; }

.verdict { flex: 1; display: grid; place-content: center; text-align: center; gap: 12px; padding: 30px 0; }
.end:not([hidden]) ~ .verdict, .verdict:has(~ .end:not([hidden])) { flex: none; padding: 18px 0 8px; }
.v-big { font-family: 'Anton', sans-serif; font-size: clamp(72px, 10vw, 140px); line-height: .95; text-transform: uppercase; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }
html[lang^=zh] .v-big:not(.v-safe):not(.v-rekt) { font-family: var(--body); font-weight: 900; font-size: clamp(48px, 7vw, 92px); }
.v-safe { color: var(--y); text-shadow: 0 0 40px rgba(240, 185, 11, .5); }
.v-hit { color: #ff9f43; }
.v-rekt { color: var(--red); text-shadow: 0 0 40px rgba(255, 75, 85, .45); }
.v-void, .v-spect, .v-muted { color: var(--ink); }
.vd-spect .v-big, .vd-muted .v-big { font-size: clamp(44px, 6vw, 80px); }
.v-line { font-size: 19px; font-weight: 700; }
.v-why { color: var(--mute); font-size: 15px; max-width: 560px; margin: 0 auto; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .v-big { animation: none; } .status.waiting::after { animation: none; content: '…'; } }

.end { display: grid; gap: 16px; padding-top: 10px; }
.console:has(.end:not([hidden])) .v-big { font-size: clamp(44px, 5vw, 72px); }
.end canvas { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.end-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-ghost { background: none; color: var(--ink); box-shadow: 0 0 0 1.5px #3a3a42 inset; cursor: pointer; }
.btn-ghost:hover { background: rgba(255, 255, 255, .05); }
button.btn { border: 0; cursor: pointer; }

.side-head { display: flex; align-items: baseline; gap: 12px; }
.wall-sm { --seat: 42px; margin: 16px 0 16px; }
.seat.me { outline: 3px solid var(--red); outline-offset: 3px; }

@media (max-width: 900px) {
  .play { grid-template-columns: 1fr; }
  .side { position: static; }
  .console { min-height: 0; }
}
@media (max-width: 640px) {
  .play { padding: 12px 12px 40px; gap: 14px; }
  .console, .side { padding: 16px; border-radius: 18px; }
  .hud .timer { font-size: 32px; }
  .hud .round { font-size: 18px; }
  .pick { height: 116px; border-radius: 18px; }
  .big2 { gap: 10px; margin-top: 20px; }
  .lobby { padding: 24px 0; }
  .guess-row { flex-direction: column; }
  .guess .btn { width: 100%; }
  .wall-sm { --seat: 28px; grid-template-columns: repeat(10, var(--seat)); row-gap: 10px; margin: 12px 0; }
  .wall-sm .seat { font-size: 9px; }
  .wall-sm .seat.a::after { font-size: 7px; padding: 0 2px; bottom: -4px; right: -4px; }
  .wall-sm .seat.me { outline-width: 2px; outline-offset: 2px; }
  .verdict { padding: 14px 0; }
  .side .alive b { font-size: 28px; }
}
@media (max-width: 370px) { .wall-sm { --seat: 25px; } }

/* live game page */
.live .lobby { gap: 12px; }
.lobby-cd b { font-variant-numeric: tabular-nums; }
.lobby-utc { color: var(--mute); font-size: 14px; margin-top: -4px; }
.lobby .btn { margin: 14px auto 0; min-width: 240px; }
.joined { color: var(--y); font-weight: 700; min-height: 1.4em; }
.last { color: var(--mute); font-size: 14px; }
.practice-link { color: var(--mute); font-size: 14px; }
.practice-link:hover { color: var(--ink); }
.neterr { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 75, 85, .12); color: var(--red); font-weight: 700; }
.pxline { margin-top: 8px; color: var(--mute); font-size: 14px; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.gid { color: var(--mute); font-size: 13px; margin-left: 6px; }
.arena-side { margin: 12px -20px 12px; height: 340px; }
.side.has-arena .arena { display: block; }
.side.has-arena .wall { display: none; }
@media (max-width: 640px) { .arena-side { margin: 10px -16px; height: 280px; } }

.sound { font: 700 12px var(--body); letter-spacing: .06em; color: var(--mute); background: none; border: 1px solid var(--line); border-radius: 999px; height: 28px; padding: 0 10px; cursor: pointer; margin-left: auto; }
.sound[aria-pressed="true"] { color: var(--y); border-color: rgba(240, 185, 11, .5); }
.hud .sound + .timer { margin-left: 8px; }

.potbox { margin: 6px auto 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 8px; max-width: 420px; text-align: center; }
.potline { color: var(--mute); }
.potline b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 26px; color: var(--y); margin-left: 6px; }
.walletrow { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; font-weight: 700; }
.walletrow .btn { height: 42px; }
.seatinfo { color: var(--mute); font-size: 14px; }
.linkish { background: none; border: 0; color: var(--mute); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }