.screen--game {
  padding: max(8px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  gap: 6px;
}

.level-pill__ornament {
  position: relative;
  width: min(170px, 70%);
  height: 10px;
  margin-top: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .9) 30%, rgba(255, 240, 200, .9) 70%, transparent) center / 100% 1.5px no-repeat;
}
.level-pill__ornament i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
  background: linear-gradient(135deg, #ffd3f0, #ff5fb8 55%, #b02a8a);
  box-shadow: 0 0 0 1.5px #ffe08a, 0 0 8px rgba(255, 110, 200, .8);
}
.game-hud { flex: none; display: flex; align-items: center; gap: 10px; }
.level-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.level-pill__top {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(70, 25, 160, .55);
}
.level-pill__top b { color: var(--c-gold); }
.level-pill__name {
  max-width: 100%;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .05em;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.turn-banner {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  background: linear-gradient(180deg, var(--p-hi) -30%, var(--p) 55%, var(--p-lo) 130%);
  border: 1.5px solid rgba(255, 255, 255, .8);
  box-shadow: 0 0 14px var(--p), 0 4px 10px rgba(20, 0, 70, .35);
  transition: background .3s, box-shadow .3s;
}
.turn-banner__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff;
  animation: pulse-opacity 1.2s ease-in-out infinite;
}
.turn-banner.p-yellow { color: #5a3300; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.turn-banner.is-changing { animation: banner-pop .45s var(--ease-bounce); }

.board-stage {
  --seat-h: 30px;
  --overscan: 1.2;
  --overlap: .06;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  container-type: size;
}
.board-stage > * {
  --board: max(250px, min(
    calc((100cqw + 20px) * var(--overscan)),
    calc((100cqh - 2 * var(--seat-h) - 4px) / (1 - 2 * var(--overlap)))
  ));
}
@supports not (container-type: size) {
  .board-stage > * { --board: min(calc((100vw + 0px) * 1.14), calc(100vh - 230px), 500px); }
}

.seat-row {
  flex: none;
  width: 100%;
  height: var(--seat-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 7;
}
.player-slot { min-width: 0; display: flex; }
.player-slot--end { justify-content: flex-end; }
.seat-hint {
  min-width: 0;
  max-width: 44vw;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(20, 0, 70, .7);
  transition: color .2s;
}
.seat-hint.is-warn { color: #ffd0ef; }

.player-card {
  position: relative;
  max-width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px 0 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(160deg, rgba(150, 120, 255, .7), rgba(85, 55, 195, .6));
  border: 1.5px solid rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 10px rgba(20, 0, 70, .3);
  transition: transform .3s var(--ease-bounce), background .3s, border-color .3s;
}
.player-card .face--xs { --face-size: 20px; }
.player-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 2px var(--p-hi), 0 0 14px var(--p);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.player-card.is-active {
  border-color: transparent;
  background: linear-gradient(160deg, var(--p) -40%, rgba(110, 80, 230, .7) 90%);
  transform: scale(1.06);
}
.player-card.is-active::before { opacity: 1; animation: card-glow 1.6s ease-in-out infinite alternate; }
.player-card__name {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-card__pips, .dock__pips { display: flex; gap: 2px; flex: none; }
.pip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.pip-dot.is-active { background: var(--p); box-shadow: 0 0 0 1.2px rgba(255, 255, 255, .85); }
.pip-dot.is-home { background: var(--c-gold); box-shadow: 0 0 0 1.2px #fff, 0 0 5px var(--c-gold); }
.thinking {
  position: absolute;
  right: 4px;
  top: -8px;
  display: none;
  gap: 2px;
  padding: 3px 5px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 2px 6px rgba(20, 0, 70, .35);
}
.player-card.is-thinking .thinking { display: flex; }
.thinking i { width: 4px; height: 4px; border-radius: 50%; background: var(--p-lo); animation: think-dot 1s ease-in-out infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; }
.thinking i:nth-child(3) { animation-delay: .3s; }

.board {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--board);
  height: var(--board);
  margin: calc(var(--board) * var(--overlap) * -1) 0;
  -webkit-touch-callout: none;
}
.board-grid, .token-layer, .fx-layer { position: absolute; inset: 0; }
.board-grid { z-index: 1; }
.token-layer { z-index: 5; }
.fx-layer { z-index: 6; pointer-events: none; }
.board-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(25, 5, 90, .55));
  -webkit-user-drag: none;
  user-select: none;
}
.board-grid.is-missing-art .board-art { display: none; }
.board-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.seat-dim {
  fill: rgba(30, 14, 80, .6);
  opacity: 0;
  transition: opacity .3s;
}
.seat-dim.is-empty { opacity: 1; }

.token {
  position: absolute;
  left: 0;
  top: 0;
  width: 5.2%;
  height: 5.2%;
  padding: 0;
  z-index: var(--z, 10);
  transform: translate3d(calc(var(--x, 0) * 100%), calc(var(--y, 0) * 100%), 0) scale(var(--s, 1));
  transform-origin: 50% 50%;
  transition: transform var(--step-ms) var(--ease-out);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.token.no-transition { transition: none !important; }
.token__shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 34%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 5, 60, .55), rgba(20, 5, 60, 0));
}
.token__body {
  position: absolute;
  left: -2%;
  bottom: 38%;
  width: 104%;
  height: 158%;
  transform-origin: 50% 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.token__pawn {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 1px 1px rgba(20, 0, 60, .45));
  -webkit-user-drag: none;
}
.token.is-fallback .token__pawn { display: none; }
.token.is-fallback .token__body::after {
  content: "";
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #fff 0 7%, var(--p-hi) 18%, var(--p) 55%, var(--p-lo) 100%);
  box-shadow: 0 0 0 1.5px #fff;
}
.token__ring {
  position: absolute;
  left: -14%;
  right: -14%;
  top: 26%;
  height: 52%;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 10px 3px var(--c-gold), inset 0 0 8px var(--c-gold);
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
}
.token.is-movable { z-index: 150; cursor: pointer; }
.token.is-movable .token__ring { animation: ring-pulse 1.1s ease-in-out infinite; }
.token.is-movable .token__body { animation: token-bob 1.1s ease-in-out infinite; }
.token.is-movable .token__pawn { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px var(--c-gold)); }
.token.is-moving { z-index: 200; }
.token.hop-a .token__body { animation: hop-a var(--step-ms) var(--ease-out); }
.token.hop-b .token__body { animation: hop-b var(--step-ms) var(--ease-out); }
.token.is-captured .token__body { animation: token-captured .42s ease-in forwards; }
.token.is-respawn .token__body { animation: token-respawn .5s var(--ease-bounce); }
.token.is-denied .token__body { animation: shake .32s; }

.dock {
  position: relative;
  flex: none;
  align-self: center;
  width: min(calc(100vw * 1.08), 540px, 66dvh);
  aspect-ratio: 1080 / 357;
  container-type: inline-size;
}
.dock__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 14px rgba(20, 0, 70, .45));
  pointer-events: none;
}
.dock__progress {
  position: absolute;
  left: 8%;
  top: 30%;
  width: 30%;
  height: 38%;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
}
.dock__home-icon { height: 100%; width: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 40, .45)); }
.dock__stack { display: flex; flex-direction: column; gap: .6cqw; min-width: 0; }
.dock__label { font-size: max(9px, 2.3cqw); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; line-height: 1; }
.dock__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(14px, 4.6cqw);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 60, .5);
}
.dock__pips .pip-dot { width: max(6px, 2cqw); height: max(6px, 2cqw); }
.roll-btn {
  position: absolute;
  left: 61.5%;
  top: 48%;
  width: 33%;
  transform: translateY(-50%);
  padding: 0;
  transition: transform var(--dur-fast) var(--ease-bounce), filter .25s;
}
.roll-btn img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 30, 0, .45)); }
.roll-btn:not(:disabled):active { transform: translateY(-50%) scale(.93); }
.roll-btn:disabled { filter: grayscale(.75) brightness(.85); opacity: .8; }
.roll-btn.is-ready { animation: roll-img-invite 1.4s ease-in-out infinite; }

.dice {
  --size: 60px;
  position: relative;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  border-radius: 26%;
  background: linear-gradient(145deg, #ffffff 0%, #f4efff 50%, #dcd0ff 100%);
  box-shadow:
    inset 0 3px 0 #fff,
    inset 0 -6px 10px rgba(110, 80, 210, .35),
    0 0 0 3px var(--p, #8f6bff),
    0 0 0 5px rgba(255, 255, 255, .6),
    0 8px 18px rgba(20, 0, 80, .45),
    0 0 26px var(--p, #8f6bff);
  transition: box-shadow .3s;
}
.dice::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 6%;
  height: 34%;
  border-radius: 40%;
  background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.dice:not(:disabled) { cursor: pointer; }
.dice__face {
  position: absolute;
  inset: 15%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.pip {
  place-self: center;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a08cff, #4a24b8 70%);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: scale(.3);
  transition: opacity 90ms, transform 90ms;
}
.dice__face[data-value="1"] .pip--5,
.dice__face[data-value="2"] :is(.pip--3, .pip--7),
.dice__face[data-value="3"] :is(.pip--3, .pip--5, .pip--7),
.dice__face[data-value="4"] :is(.pip--1, .pip--3, .pip--7, .pip--9),
.dice__face[data-value="5"] :is(.pip--1, .pip--3, .pip--5, .pip--7, .pip--9),
.dice__face[data-value="6"] :is(.pip--1, .pip--3, .pip--4, .pip--6, .pip--7, .pip--9) {
  opacity: 1;
  transform: none;
}
.dice.is-six .pip { background: radial-gradient(circle at 35% 30%, #ff9ad5, #d6246e 70%); }
.dice.is-rolling { animation: dice-tumble .45s linear infinite; }
.dice.is-landed { animation: dice-land .45s var(--ease-bounce); }
.dice.is-ready { animation: dice-invite 1.6s ease-in-out infinite; }

.player-card--empty { opacity: .45; border-style: dashed; }
.player-card--empty .face { filter: grayscale(.8); }

body.is-paused .screen--game * { animation-play-state: paused !important; }

.dock .dice {
  position: absolute;
  left: 40.3%;
  top: 25.2%;
  width: 19%;
  height: 43.4%;
  margin: 0;
  border-radius: 20%;
  background: none;
  box-shadow: none;
  animation: none;
  transition: box-shadow .3s;
}
.dock .dice::before { display: none; }
.dock .dice::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 18%;
  box-shadow: inset 0 0 0 2px var(--p-hi), inset 0 0 14px var(--p);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.dock .dice.is-ready::after { opacity: 1; animation: slot-glow 1.4s ease-in-out infinite; }
.dock .dice.is-six::after { opacity: 1; box-shadow: inset 0 0 0 2px #ffe38a, inset 0 0 18px #ffc53d; animation: slot-glow .8s ease-in-out 2; }
.dock .dice__face {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  width: 11cqw;
  height: 11cqw;
  margin: -5.5cqw 0 0 -5.5cqw;
  gap: 0;
}
.dock .pip {
  width: 74%;
  height: 74%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8) 0 8%, var(--p) 22%, var(--p-lo) 55%, #0b0630 100%);
  box-shadow:
    0 .4cqw .5cqw rgba(0, 0, 40, .5),
    inset 0 -.4cqw .6cqw rgba(0, 0, 0, .45);
  transition: opacity 80ms, transform 120ms var(--ease-bounce);
}
.dock .dice.is-six .pip {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8) 0 8%, #f5a623 22%, #b35f00 55%, #4a2200 100%);
  box-shadow:
    0 0 1cqw rgba(255, 190, 60, .7),
    0 .4cqw .5cqw rgba(60, 20, 0, .5),
    inset 0 -.4cqw .6cqw rgba(60, 25, 0, .45);
}
.dock .dice { perspective: 40cqw; }
.dock .dice.is-rolling .dice__face { animation: pips-tumble .5s cubic-bezier(.45, .05, .55, .95) infinite; transform-style: preserve-3d; }
.dock .dice.is-rolling .pip { transform: scale(.82); }
.dock .dice.is-rolling::after { opacity: 1; animation: slot-flicker .18s ease-in-out infinite alternate; }
.dock .dice.is-rolling::before {
  content: "";
  display: block;
  position: absolute;
  inset: -7%;
  border-radius: 24%;
  padding: .7cqw;
  background: conic-gradient(from 0deg, transparent 0 12%, var(--p-hi) 22%, #fff 25%, transparent 36% 62%, var(--p-hi) 72%, #fff 75%, transparent 86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 1.2cqw var(--p));
  animation: spin-slow .55s linear infinite;
  pointer-events: none;
}
.dock .dice .fx-ring--dice { width: 110%; border-width: .8cqw; }
.dock .dice .fx-ring--late { animation-delay: .12s; opacity: 0; animation-fill-mode: both; }
.dock .dice.is-landed .dice__face { animation: pips-land .5s var(--ease-bounce); }
.dock .dice.is-ready .dice__face { animation: pips-breathe 1.6s ease-in-out infinite; }
.dock .dice:not(:disabled):active .dice__face { transform: scale(.9); }