:root {
  color-scheme: light;
  font: 16px/1.5 Inter, system-ui, sans-serif;
  --bg: #f2eee3;
  --panel: #fffdf7;
  --line: #b0c4bd;
  --ink: #163333;
  --muted: #425e59;
  --accent: #006d62;
  --amber: #91501a;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
main {
  max-width: 35rem;
  margin: auto;
  padding: 1.25rem 1rem 1.5rem;
  padding-top: calc(1.25rem + max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)));
  padding-bottom: calc(1.5rem + max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px)));
}
body:not(:has(.arena)) {
  min-height: 100vh;
  background:
    linear-gradient(165deg, #f6f2e8ef 16%, #f6f2e884 67%, #f2eee3),
    #f2eee3 url("assets/field.webp") center 40% / cover no-repeat;
}
header { margin-bottom: 2rem; }
.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  font-weight: 850;
  font-size: .9rem;
  letter-spacing: .14em;
}
.brand-mark { color: var(--accent); font-size: 1.35rem; line-height: 1; }
h1, h2, p { margin: 0; }
h1 { line-height: 1.13; font-size: clamp(1.8rem, 7vw, 2.65rem); text-wrap: balance; }
h2 { font-size: 1.05rem; }
.stack { display: grid; gap: 1rem; }
.lobby, .summary { gap: 1.25rem; }
.topic {
  color: var(--accent);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.muted { color: var(--muted); }
.panel { padding: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: .85rem; }
.options { display: grid; gap: .5rem; }
button {
  width: 100%;
  min-height: 2.8rem;
  border-radius: .6rem;
  border: 1px solid var(--line);
  padding: .58rem .75rem;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  overflow-wrap: anywhere;
}
button:focus-visible, h1:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: #e0eee8; }
button.primary { background: var(--accent); border-color: var(--accent); color: #ffffff; text-align: center; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.review { padding-left: 1.35rem; margin: 0; }
.review li + li { margin-top: 1rem; }
.review p { margin-top: .3rem; }

main:has(.arena) { max-width: 38rem; padding: 0; box-shadow: 0 0 4rem #344c4022; }
main:has(.arena) > header { display: none; }
.arena {
  --back-width: clamp(2.85rem, 12vw, 4.25rem);
  display: grid;
  grid-template-rows: auto auto auto auto minmax(11rem, 1fr) auto auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(.7rem + max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)))
    clamp(.65rem, 3vw, 1.2rem)
    calc(.6rem + max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px)));
  gap: .55rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(#f6f2e8ef 6%, #f6f2e876 32%, #f6f2e808 51%, #f6f2e829 71%, #f2eee3 100%),
    #eee9da url("assets/field.webp") center / cover no-repeat;
}
.arena > .brand { justify-content: center; font-size: .68rem; }
.arena > .brand .brand-mark { font-size: 1rem; }
.arena-hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .45rem; }
.duelist {
  --side: var(--accent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .18rem;
  min-width: 0;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--side);
  border-radius: .55rem;
  background: #fefcf3;
  padding: .28rem .48rem;
  font-size: .77rem;
  font-weight: 750;
}
.duelist.bot { --side: var(--amber); border-inline-start-width: 1px; border-inline-end: 3px solid var(--side); }
.score-value { position: relative; color: var(--side); font-size: 1.35rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.point {
  position: absolute;
  top: 110%;
  left: 50%;
  translate: -50% 0;
  z-index: 6;
  border-radius: .3rem;
  padding: .1rem .25rem;
  color: #ffffff;
  background: var(--side);
  font-size: .78rem;
  animation: point-in .24s ease-out both;
}
@keyframes point-in { from { opacity: 0; transform: translateY(.35rem); } }
.round-meta { display: grid; gap: .28rem; justify-items: center; min-width: 4.45rem; }
.round-number { font-size: .69rem; font-weight: 750; color: var(--muted); white-space: nowrap; }
.round-track { display: flex; gap: .16rem; width: 100%; }
.round-track i { flex: 1; height: .18rem; border-radius: .3rem; background: #c3d1c8; }
.round-track i[data-step="done"] { background: #80a59b; }
.round-track i[data-step="current"] { background: var(--accent); }
.arena-question {
  display: grid;
  place-items: center;
  min-height: 4.35rem;
  padding: .62rem .8rem;
  border: 1px solid #adc4b9;
  border-radius: .65rem;
  background: #fffdf4ee;
  text-align: center;
  font-size: clamp(1rem, 4.4vw, 1.52rem);
  line-height: 1.24;
}
.arena-timer { display: grid; grid-template-columns: 1fr 2.45rem; align-items: center; gap: .5rem; color: var(--muted); font-size: .75rem; }
.arena-timer span { justify-self: end; font-variant-numeric: tabular-nums; }
.arena-timer progress { appearance: none; width: 100%; height: .27rem; border: 0; background: #cdd9d0; border-radius: 1rem; overflow: hidden; }
.arena-timer progress::-webkit-progress-bar { background: #cdd9d0; }
.arena-timer progress::-webkit-progress-value { background: var(--accent); }
.arena-timer progress::-moz-progress-bar { background: var(--accent); }
.arena-timer[data-urgent="true"] { color: var(--amber); }
.arena-timer[data-urgent="true"] progress::-webkit-progress-value { background: var(--amber); }
.arena-timer[data-urgent="true"] progress::-moz-progress-bar { background: var(--amber); }
.table {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--back-width) + .4rem);
  align-items: center;
  justify-items: center;
  min-width: 0;
}
.table::before {
  content: "";
  position: absolute;
  inset: 12% 11%;
  border: 1px solid #1f69534d;
  outline: 1px solid #1f695325;
  outline-offset: .3rem;
  border-radius: 49%;
  pointer-events: none;
}
.opponent-hand {
  position: absolute;
  right: 0;
  top: 48%;
  width: calc(var(--back-width) * .95);
  height: calc(var(--back-width) * 2.2);
  transform: translateY(-50%);
  z-index: 2;
}
.opponent-hand > span:first-child {
  position: absolute;
  top: -.65rem;
  right: .15rem;
  color: var(--amber);
  font-size: .61rem;
  letter-spacing: .045em;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 4px #fffdf7;
}
.card-back {
  display: block;
  width: var(--back-width);
  aspect-ratio: 5 / 7;
  border: 1px solid #477d73;
  border-radius: .4rem;
  background: #102b43 url("assets/card-back.webp") center / 100% 100% no-repeat;
  box-shadow: 0 4px 8px #162f325a;
}
.opponent-hand .card-back {
  position: absolute;
  right: .1rem;
  top: var(--offset);
  width: calc(var(--back-width) * .82);
  transform: rotate(var(--angle));
}
.opponent-hand .card-back:nth-of-type(2) { --offset: .5rem; --angle: 17deg; z-index: 4; }
.opponent-hand .card-back:nth-of-type(3) { --offset: 1.22rem; --angle: 9deg; z-index: 3; }
.opponent-hand .card-back:nth-of-type(4) { --offset: 1.95rem; --angle: 1deg; z-index: 2; }
.opponent-hand .card-back:nth-of-type(5) { --offset: 2.68rem; --angle: -8deg; z-index: 1; }
.table-cards {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 21rem);
  gap: clamp(.45rem, 3vw, 1.1rem);
}
.table-card { display: grid; justify-items: center; gap: .35rem; margin: 0; font-size: .68rem; font-weight: 750; color: var(--side); }
.table-card.player-slot { --side: var(--accent); }
.table-card.bot-slot { --side: var(--amber); }
.table-card figcaption { background: #fffdf4eb; padding: .05rem .32rem; border-radius: .2rem; }
.played-card {
  display: grid;
  width: min(100%, 8.4rem);
  min-height: clamp(7.5rem, 34vw, 10.5rem);
  perspective: 32rem;
}
.played-card .card-back, .played-card-face {
  grid-area: 1 / 1;
  width: 100%;
  border-radius: .55rem;
  backface-visibility: hidden;
  transition: transform 330ms ease-in-out;
}
.played-card .card-back { aspect-ratio: auto; border-color: var(--side); }
.played-card:not(.played) .card-back { border: 1px dashed var(--side); background: #fffdf68a; box-shadow: none; }
.played-card-face {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .3rem;
  padding: .4rem .3rem;
  border: 2px solid var(--verdict-border, #acbcb8);
  color: var(--verdict-ink, #425e59);
  background: var(--verdict-paper, #faf8f0);
  text-align: center;
  overflow-wrap: anywhere;
  transform: rotateY(-180deg);
}
.played-card-status { font-size: clamp(.6rem, 2.6vw, .82rem); }
.played-card-answer { color: var(--ink); font-size: clamp(.72rem, 3.3vw, 1.07rem); line-height: 1.16; }
.played-card[data-result="correct"] { --verdict-border: #288256; --verdict-ink: #135939; --verdict-paper: #e4f5e7; }
.played-card[data-result="incorrect"] { --verdict-border: #b74d4c; --verdict-ink: #892b31; --verdict-paper: #fce9e6; }
.played-card[data-result] .card-back { transform: rotateY(180deg); }
.played-card[data-result] .played-card-face { transform: rotateY(0deg); }
.played-card[data-result="timeout"] .card-back { visibility: hidden; }
.played-card[data-result="timeout"] .played-card-face { border-style: dashed; transition: none; }
.hand-area { display: grid; }
.hand-area > * { grid-area: 1 / 1; min-width: 0; }
.hand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.28rem, 1.4vw, .65rem); }
.hand button {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  gap: .12rem;
  min-width: 0;
  min-height: clamp(5.65rem, 24vw, 7.7rem);
  padding: .35rem .18rem .38rem;
  border: 1px solid #a6c7cf;
  border-radius: .55rem;
  color: #163333;
  background: #fffdf5 url("assets/card-face.webp") center / 100% 100% no-repeat;
  box-shadow: 0 4px 8px #162f3235;
  text-align: center;
  font-size: clamp(.69rem, 2.95vw, 1rem);
  font-weight: 760;
  line-height: 1.15;
  hyphens: auto;
  transition: transform .16s ease, border-color .16s ease;
}
.card-letter {
  display: grid;
  place-items: center;
  width: 1.4em;
  aspect-ratio: 1;
  border-radius: .2rem;
  background: #d9ebe4;
  color: #175448;
  font-weight: 850;
}
@media (hover: hover) {
  .hand button:not(:disabled):hover { transform: translateY(-.22rem); border-color: var(--accent); }
}
.round-verdict {
  align-self: center;
  justify-self: center;
  width: min(100%, 21rem);
  padding: .48rem .6rem;
  border: 1px solid #97b6aa;
  border-radius: .65rem;
  background: #fffdf6fa;
  text-align: center;
  line-height: 1.25;
}
.round-verdict strong { color: var(--accent); }
.round-verdict p { font-size: .8rem; margin-top: .22rem; }
.arena .feedback { text-align: center; color: var(--muted); font-size: .76rem; }
.arena.revealing .arena-timer, .hand[aria-hidden="true"], .hand button[data-played="true"] { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .hand button, .played-card .card-back, .played-card-face { transition: none; }
  .point { animation: none; }
}