/* ============ In-game layout ============ */
/* Centered with auto margins, not justify-content: content taller than the screen stays scrollable from the top. */
.game-layout { margin-block: auto; }

/* The classroom-castle room. Anchored to the top so the logo (top-left) and chalkboard (top-right) stay in view;
   they are part of the picture, so the layout keeps below them, on the table. */
.game-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #b06a2c url("../assets/game-background.png") center top / cover no-repeat;
}

/* Where the table starts on screen: 36% down the 3:2 picture, which is drawn at max(screen height, width / 1.5) tall.
   The top panels start there, so they stay clear of the painted logo and chalkboard. */
#screen-game { --table-top: max(36vh, 24vw); --table-top: max(36dvh, 24vw); }

/* Always in the top-right corner of the screen */
.pause-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: var(--gutter);
  margin: 0;
  font-size: 1.6rem;
}

/* Landscape: board in the middle, panels on the table's four corners, dice on the right below the green panel */
.game-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: clamp(.75rem, 2vw, 1.5rem);
  row-gap: 1rem;
  align-items: center;
  width: 100%;
  height: 100%;
}

.player-panels { display: contents; }

.board-wrap {
  position: relative;
  z-index: 0;   /* keeps token z-indexes inside the board, under the question popup */
  grid-column: 2;
  grid-row: 1 / span 2;
  width: min(calc(100vh - 32px), 56vw);
  width: min(calc(100dvh - 32px), 56vw);
  aspect-ratio: 1;
}

.dice-area {
  grid-column: 3;
  grid-row: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

/* Player panels: little wooden signs. Red top-left, green top-right, yellow bottom-right, blue bottom-left */
.player-panel {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: min(240px, 100%);
  min-width: 0;
  padding: .5rem .8rem;
  border-radius: var(--radius);
  text-shadow: 0 2px 0 rgba(60, 30, 10, .6);
  transition: box-shadow .3s ease, transform .3s var(--ease-bounce);
}

.player-panel { border-bottom: 6px solid var(--pc, var(--wood-edge)); }

.player-panel.seat-red { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; margin-top: calc(var(--table-top) - 16px); }
.player-panel.seat-green { grid-column: 3; grid-row: 1; justify-self: start; align-self: start; margin-top: calc(var(--table-top) - 16px); }
.player-panel.seat-yellow { grid-column: 3; grid-row: 2; justify-self: start; align-self: end; }
.player-panel.seat-blue { grid-column: 1; grid-row: 2; justify-self: end; align-self: end; }

.player-panel.current {
  transform: scale(1.06);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .28),
    0 0 0 4px #fff,
    0 0 0 8px var(--pc, var(--glow)),
    0 0 30px 8px rgba(255, 255, 255, .7);
  animation: panel-glow 1.6s ease-in-out infinite;
}

/* The current player can tap their own panel to roll, like the dice */
.player-panel.can-roll { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.player-panel.can-roll:active { transform: scale(1.02) translateY(2px); }

@keyframes panel-glow {
  50% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 0 0 4px #fff, 0 0 0 8px var(--pc, var(--glow)), 0 0 44px 14px rgba(255, 255, 255, .9); }
}

.player-panel.current .panel-avatar .pawn-svg { animation: pawn-hop .7s ease-in-out infinite alternate; }

@keyframes pawn-hop {
  from { translate: 0 0; scale: 1 1; }
  to { translate: 0 -14%; scale: 1.04 .97; }
}

.panel-avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: end center;
  width: 50px;
  height: 58px;
}

.panel-avatar .pawn-svg { width: 44px; }

.panel-bot {
  position: absolute;
  right: -8px;
  bottom: -4px;
  font-size: 1.05rem;
  line-height: 1;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.panel-info { min-width: 0; }

.panel-name {
  font-size: 1.3rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-text-stroke: .06em var(--wood-edge);
  paint-order: stroke fill;
}

.panel-stats {
  display: flex;
  flex-wrap: wrap;
  column-gap: .7rem;
  font-size: 1rem;
  color: #fff3d6;
}

.panel-place {
  margin-left: auto;
  font-size: 1.7rem;
  text-shadow: none;
  animation: pop-in .5s var(--ease-bounce);
}

/* ============ Board: classic Ludo on a wooden frame ============ */
.board {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2.2%;
  border-radius: 4%;
  background:
    repeating-linear-gradient(176deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 55%, var(--wood-lo));
  border: 4px solid var(--wood-edge);
  /* a soft contact shadow so it sits on the table */
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .3),
    0 6px 0 #3a1e0a,
    0 14px 14px -4px rgba(45, 20, 5, .55),
    0 26px 50px 6px rgba(45, 20, 5, .35);
}

.board-svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2%;
}

.board-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: star-twinkle 2.4s ease-in-out infinite;
}

.board-star:nth-of-type(2n) { animation-delay: -1.2s; }

@keyframes star-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  50% { transform: scale(1.18) rotate(15deg); filter: brightness(1.2); }
}

.base-empty { opacity: .45; filter: saturate(.35); }

.board-tokens,
.board-fx {
  position: absolute;
  inset: 2.2%;
  pointer-events: none;
}

/* ============ Tokens: hero characters on a colored ring ============ */
.token {
  position: absolute;
  width: calc(100% / 15 * 1.08);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: default;
  transform: translate(-50%, -60%) scale(var(--scale, 1));
  transition: left .25s ease, top .25s ease, transform .25s var(--ease-bounce), scale .35s ease, opacity .35s ease;
}

.token:disabled { cursor: default; }

.token-ring {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 28%;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--pc);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

.token .hero-svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
  animation: bob 2.6s ease-in-out infinite;
}

.token:nth-child(3n + 1) .hero-svg { animation-delay: -.9s; }
.token:nth-child(3n + 2) .hero-svg { animation-delay: -1.7s; }

.token.movable {
  z-index: 300 !important;
  cursor: pointer;
  animation: token-pulse .8s ease-in-out infinite alternate;
}

/* A bigger invisible target for small fingers */
.token.movable::before {
  content: '';
  position: absolute;
  inset: -35%;
  border-radius: 50%;
}

.token.movable .token-ring { box-shadow: 0 0 0 3px var(--glow), 0 0 12px 4px var(--glow); }
.token.movable .hero-svg { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px var(--glow)); }
.token.movable:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; border-radius: 50%; }

@keyframes token-pulse {
  from { scale: 1; }
  to { scale: 1.2; }
}

.token.moving { transition: left .19s ease-out, top .19s ease-out; }
.token.teleport { transition: none; }
.token.vanish { scale: 0; opacity: 0; }
.token.pop-back { animation: pop-back .45s var(--ease-bounce); }

@keyframes pop-back {
  0% { scale: 0; }
  70% { scale: 1.3; }
  100% { scale: 1; }
}

/* Specific enough to beat the staggered bob delays above */
.token .hero-svg.hop { animation: hop .22s ease-out 0s; }

/* Stretch up, land with a little squash */
@keyframes hop {
  0% { translate: 0 0; scale: 1 1; }
  15% { translate: 0 0; scale: 1.1 .88; }
  50% { translate: 0 -40%; scale: .92 1.1; }
  85% { translate: 0 0; scale: 1.14 .86; }
  100% { translate: 0 0; scale: 1 1; }
}

/* Capture cloud */
.poof {
  position: absolute;
  width: calc(100% / 15 * 2.2);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 600;
}

.puff {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #eef1f6 60%, #c9d1dc);
  opacity: 0;
  animation: puff 1s ease-out forwards;
}

.puff.p1 { left: 0; top: 20%; }
.puff.p2 { right: 0; top: 15%; animation-delay: .05s; }
.puff.p3 { left: 22%; top: 0; animation-delay: .1s; }
.puff.p4 { left: 25%; bottom: 0; animation-delay: .08s; }

@keyframes puff {
  0% { opacity: 0; transform: scale(.2); }
  25% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.5) translateY(-25%); }
}

.poof-text {
  position: absolute;
  left: 50%;
  top: 50%;
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  color: #fff;
  -webkit-text-stroke: .12em #8a46e0;
  paint-order: stroke fill;
  white-space: nowrap;
  animation: poof-text 1.1s var(--ease-bounce) forwards;
}

@keyframes poof-text {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-15deg); }
  30% { opacity: 1; transform: translate(-50%, -80%) scale(1.15) rotate(6deg); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1) rotate(0); }
}

/* Message bubble over the board */
.game-msg {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 700;
  width: max-content;
  max-width: 82%;
  padding: .65em 1.1em;
  border: 4px solid var(--wood-edge);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  text-align: center;
  white-space: pre-line;
  box-shadow: 0 6px 0 #3a1e0a, 0 12px 26px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity .25s ease, transform .35s var(--ease-bounce);
}

.game-msg.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.game-msg.streak {
  border-color: #b05400;
  background: linear-gradient(180deg, #fff3bf, #ffd8a8);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  box-shadow: 0 6px 0 #8a4300, 0 0 40px rgba(255, 146, 43, .8);
}

/* ============ Dice: a solid white 3D cube on the table (tap it to roll) ============ */
.dice-btn {
  --size: clamp(60px, 7vw, 84px);
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--size) * 1.7);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.dice-btn:disabled { cursor: default; }
.dice-btn:active:not(:disabled) { transform: translateY(3px) scale(.96); }
.dice-btn:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }

/* Soft glow in the player's color when it's their turn to roll */
.dice-btn::before {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9) 38%, var(--pc, var(--glow)) 60%, transparent 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.dice-btn.ready::before { opacity: .75; animation: dice-glow 1.4s ease-in-out infinite; }

@keyframes dice-glow {
  0%, 100% { scale: .94; opacity: .6; }
  50% { scale: 1.06; opacity: .9; }
}

/* Contact shadow on the table; it shrinks and fades while the dice is in the air */
.dice-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(50% + var(--size) * .55);
  width: calc(var(--size) * 1.05);
  height: calc(var(--size) * .3);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 18, 4, .7), transparent);
  pointer-events: none;
}

.dice-btn.rolling::after { animation: dice-shadow 1s linear; }

@keyframes dice-shadow {
  38% { scale: .55; opacity: .45; }
  72% { scale: 1; opacity: 1; }
  85% { scale: .85; opacity: .8; }
}

.dice-stage {
  position: relative;
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
  /* perspective() here, not the perspective property on the button: that stops the glow and shadow painting */
  transform: perspective(600px) rotateX(-16deg) rotateY(20deg);   /* keep in step with STAGE_TILT in effects.js */
}

/* No filter here: a filter would flatten the 3D cube into a picture */
.cube {
  --half: calc(var(--size) / 2);
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.cube-face,
.cube-core {
  position: absolute;
  inset: 0;
}

.cube-face {
  --shade: 0;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 13%;
  border-radius: 20%;
  background:
    linear-gradient(rgba(60, 50, 70, var(--shade)), rgba(60, 50, 70, var(--shade))),
    radial-gradient(circle at 32% 26%, #ffffff, #f6f6f9 55%, #e2e3ea);
  box-shadow: inset 0 0 0 1px rgba(150, 150, 165, .35), inset 0 0 calc(var(--size) * .12) rgba(120, 120, 140, .35);
  backface-visibility: hidden;
}

.face-1 { transform: rotateY(0deg) translateZ(var(--half)); }
.face-2 { transform: rotateY(90deg) translateZ(var(--half)); }
.face-3 { transform: rotateX(90deg) translateZ(var(--half)); }
.face-4 { transform: rotateX(-90deg) translateZ(var(--half)); }
.face-5 { transform: rotateY(-90deg) translateZ(var(--half)); }
.face-6 { transform: rotateY(180deg) translateZ(var(--half)); }

/* Light inner planes through the middle fill the rounded corners */
.cube-core {
  inset: 3%;
  border-radius: 8%;
  background: #dcdde4;
}

.core-x { transform: rotateY(90deg); }
.core-y { transform: rotateX(90deg); }

.pip {
  place-self: center;
  width: 74%;
  height: 74%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #3b3b46, #0d0d12 70%);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .7);
}

.pip.off { visibility: hidden; }

.dice-label {
  min-height: 2.6em;
  max-width: 11em;
  margin: 0;
  padding: .25em .7em;
  border-radius: 12px;
  font-size: 1.1rem;
  text-align: center;
  color: #fff;
  -webkit-text-stroke: .1em var(--wood-edge);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 var(--wood-edge);
}

.dice-label:empty { visibility: hidden; }

/* ============ Portrait: panels above and below the board, dice between the bottom panels ============ */
@media (max-aspect-ratio: 1/1) {
  /* Tall screens: everything rests at the bottom, on the table (the logo and chalkboard are cropped off the sides) */
  .game-layout {
    grid-template-rows: auto auto auto;
    align-content: end;
    row-gap: .75rem;
    column-gap: .5rem;
    padding-top: 62px;
    padding-bottom: 8px;
  }

  /* As big as fits */
  .board-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, calc(100vh - 300px));
    width: min(100%, calc(100dvh - 300px));
  }

  .dice-area { grid-column: 2; grid-row: 3; gap: .3rem; }
  .dice-btn { --size: 50px; }
  .dice-label { font-size: .9rem; min-height: 2.4em; }

  .player-panel.seat-red { grid-column: 1; grid-row: 1; justify-self: stretch; margin-top: 0; }
  .player-panel.seat-green { grid-column: 3; grid-row: 1; justify-self: stretch; margin-top: 0; }
  .player-panel.seat-yellow { grid-column: 3; grid-row: 3; justify-self: stretch; align-self: center; }
  .player-panel.seat-blue { grid-column: 1; grid-row: 3; justify-self: stretch; align-self: center; }
  .player-panel { width: auto; padding: .4rem; gap: .35rem; border-width: 3px; border-bottom-width: 5px; }
  .player-panel.current { transform: scale(1.03); }
  .panel-avatar { width: 34px; height: 42px; }
  .panel-avatar .pawn-svg { width: 30px; }
  .panel-bot { font-size: .85rem; right: -5px; }
  .panel-name { font-size: 1rem; }
  .panel-stats { font-size: .82rem; column-gap: .35rem; }
  .panel-place { font-size: 1.2rem; }
}

/* ============ Short landscape (phones held sideways) ============ */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  /* Short screens: the picture is anchored to the bottom (the logo is cropped off), so the top panels can go to the top */
  #screen-game { --table-top: 16px; }
  .game-bg { background-position: center bottom; }
  .player-panel.seat-green, .player-panel.seat-yellow { align-self: center; }
  .dice-area { grid-row: 1 / span 2; }
  .game-layout { row-gap: .5rem; }
  .player-panel { padding: .35rem .55rem; gap: .45rem; }
  .panel-avatar { width: 38px; height: 46px; }
  .panel-avatar .pawn-svg { width: 34px; }
  .panel-name { font-size: 1.05rem; }
  .panel-stats { font-size: .85rem; }
  .dice-btn { --size: 44px; }
  .pause-btn { width: 46px; height: 46px; font-size: 1.3rem; }
  .dice-area { gap: .3rem; }
  .dice-label { font-size: .9rem; min-height: 2.3em; }
}

/* Narrow phones: slimmer panels so names and stats fit */
@media (max-aspect-ratio: 1/1) and (max-width: 400px) {
  .game-layout { column-gap: .35rem; }
  .player-panel { padding: .3rem; gap: .25rem; }
  .panel-avatar { width: 28px; height: 36px; }
  .panel-avatar .pawn-svg { width: 25px; }
  .panel-name { font-size: .9rem; }
  .panel-stats { font-size: .74rem; column-gap: .25rem; }
  .dice-btn { --size: 42px; }
}