/* ===== Base ===== */
:root {
  --yellow: #f5c518;
  --yellow-dark: #b38a00;
  --red: #e53935;
  --red-dark: #9e1b18;
  --ink: #2b2d42;
  --paper: #fbf8ef;
  --paper-line: #dfe7f2;
  --bg: #1f2033;
  --slot: min(15vw, 7.4dvh, 66px);
  --die: min(24vw, 13dvh, 120px);
  --radius: 18px;
}

* { box-sizing: border-box; }

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

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

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

.hidden { display: none !important; }

.screen {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding:
    max(10px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}

/* ===== Animated background ===== */
#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity .6s, visibility .6s;
}
#bg[data-mode="menu"] .bg-game,
#bg[data-mode="game"] .bg-menu { opacity: 0; visibility: hidden; }
#bg[data-mode="menu"] .bg-game *,
#bg[data-mode="game"] .bg-menu *,
#bg.paused * { animation-play-state: paused !important; }

/* Menu: moving gradient + falling dice */
.bgm-gradient {
  position: absolute;
  inset: -50%;
  background: linear-gradient(125deg, #3b2a83 0%, #1f6fb2 22%, #1c9a8c 40%, #7b3fb8 60%, #d0533a 80%, #3b2a83 100%);
  animation: grad-move 16s ease-in-out infinite alternate;
  will-change: transform;
}
.bg-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(20,20,40,.15), rgba(20,20,40,.6));
}
@keyframes grad-move {
  from { transform: translate3d(-12%, -8%, 0) scale(1); }
  to   { transform: translate3d(12%, 8%, 0) scale(1.1); }
}

.bgm-faller {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  background-size: cover;
  opacity: var(--op);
  animation: fall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
.bgm-faller.die { filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.bgm-faller.pip { border-radius: 50%; }
.bgm-faller.pip.yellow { background: var(--yellow); }
.bgm-faller.pip.red { background: var(--red); }
.bgm-faller.pip.white { background: #fff; }
@keyframes fall {
  from { transform: translate3d(0, -15vh, 0) rotate(0deg); }
  to   { transform: translate3d(var(--drift), 115vh, 0) rotate(var(--spin)); }
}

/* Gameplay: felt table */
.bgg-felt {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.03) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 45%, #2f8f50 0%, #1e6e3c 45%, #0f4526 100%);
}
.bgg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.6) 100%);
}
.bgg-rim {
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 0 9px #4a2a12,
    inset 0 0 0 12px #8a5a2b,
    inset 0 0 0 14px #2e1a0b,
    inset 0 0 26px 16px rgba(0,0,0,.55);
}
.bgg-rim::after { /* leather stitching */
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgba(255,214,160,.35);
  border-radius: 6px;
}
.bgg-glow {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 58%;
  opacity: 0;
  transition: opacity .8s ease;
}
.bgg-glow.top { top: 0; background: radial-gradient(ellipse at 50% 0%, rgba(229,57,53,.55), transparent 70%); }
.bgg-glow.bottom { bottom: 0; background: radial-gradient(ellipse at 50% 100%, rgba(245,197,24,.5), transparent 70%); }
#bg[data-turn="1"] .bgg-glow.top,
#bg[data-turn="0"] .bgg-glow.bottom { opacity: 1; }

.bgg-beam {
  position: absolute;
  top: -20vh;
  left: var(--x);
  width: 34vw;
  height: 140vh;
  background: linear-gradient(90deg, transparent, rgba(255,250,215,.09) 50%, transparent);
  transform: rotate(var(--tilt));
  animation: beam var(--dur) ease-in-out var(--delay) infinite alternate;
  will-change: transform, opacity;
}
@keyframes beam {
  from { transform: translate3d(-14vw, 0, 0) rotate(var(--tilt)); opacity: .35; }
  to   { transform: translate3d(14vw, 0, 0) rotate(var(--tilt)); opacity: 1; }
}

.bgg-sparkle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #fff8d6;
  box-shadow: 0 0 6px 2px rgba(255,240,180,.6);
  opacity: 0;
  animation: dust var(--dur) linear var(--delay) infinite;
  will-change: transform, opacity;
}
@keyframes dust {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  20%  { opacity: .8; }
  50%  { transform: translate3d(3vw, -20vh, 0); opacity: .35; }
  80%  { opacity: .7; }
  100% { transform: translate3d(-2vw, -40vh, 0); opacity: 0; }
}

.bgg-drifter {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background-size: cover;
  opacity: .1;
  animation: drift var(--dur) ease-in-out var(--delay) infinite alternate;
  will-change: transform;
}
.bgg-drifter.pip { border-radius: 50%; background: rgba(255,255,255,.8); }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--spin)); }
}

/* ===== Buttons ===== */
.big-btn {
  display: block;
  width: 100%;
  max-width: 340px;
  min-height: 64px;
  margin: 0 auto 16px;
  padding: 14px 20px;
  border-radius: 999px;
  font-size: clamp(1.15rem, 5vw, 1.4rem);
  font-weight: 800;
  letter-spacing: .02em;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--yellow-dark), 0 10px 20px rgba(0,0,0,.3);
  transition: transform .08s, box-shadow .08s;
}
.big-btn.alt {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 0 var(--red-dark), 0 10px 20px rgba(0,0,0,.3);
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--yellow-dark); }
.big-btn.alt:active { box-shadow: 0 2px 0 var(--red-dark); }

.icon-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  font-size: 1.35rem;
  line-height: 1;
  flex: none;
}
.gear-btn { width: 56px; height: 56px; font-size: 1.7rem; }
.big-btn.plain {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 0 #b9bccb, 0 10px 20px rgba(0,0,0,.2);
}
.big-btn.plain:active { box-shadow: 0 2px 0 #b9bccb; }

/* ===== Start screen ===== */
#screen-start { justify-content: center; }
.corner-btns {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
}
.start-inner { text-align: center; width: 100%; }
h1 {
  font-size: clamp(2.6rem, 13vw, 4rem);
  margin: 12px 0 4px;
  letter-spacing: .02em;
  text-shadow: 0 4px 0 rgba(0,0,0,.3), 0 0 24px rgba(0,0,0,.25);
}
.tagline { margin: 0 0 36px; opacity: .9; font-size: 1.05rem; text-shadow: 0 2px 4px rgba(0,0,0,.4); }

.logo {
  display: flex;
  justify-content: center;
  gap: 14px;
  animation: logo-float 3.2s ease-in-out infinite;
}
.logo-title { animation: title-pulse 3.2s ease-in-out infinite; }
.logo-die {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: #fff;
  position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.logo-die.yellow { animation: logo-bounce-a 1.6s ease-in-out infinite; }
.logo-die.red { animation: logo-bounce-b 1.6s ease-in-out .8s infinite; }
.logo-die::after {
  content: "";
  position: absolute;
  inset: 0; margin: auto;
  width: 24px; height: 24px;
  border-radius: 50%;
}
.logo-die.yellow::after { background: var(--yellow); }
.logo-die.red::after { background: var(--red); }

@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes logo-bounce-a {
  0%, 100% { transform: translateY(0) rotate(-12deg); }
  40% { transform: translateY(-22px) rotate(8deg); }
  60% { transform: translateY(-22px) rotate(8deg); }
}
@keyframes logo-bounce-b {
  0%, 100% { transform: translateY(0) rotate(10deg); }
  40% { transform: translateY(-22px) rotate(-10deg); }
  60% { transform: translateY(-22px) rotate(-10deg); }
}
@keyframes title-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ===== Game screen ===== */
#screen-game { gap: 8px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

.game-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.turn-indicator {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(.95rem, 4.4vw, 1.2rem);
  white-space: nowrap;
  background: var(--yellow);
  color: var(--ink);
  transition: background .4s, color .4s;
}
.turn-indicator.red { background: var(--red); color: #fff; }
.turn-dot {
  width: 14px; height: 14px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

/* Player zones */
.zone {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px 8px;
  border-radius: 22px;
  background: rgba(0,0,0,.18);
  border: 2px solid rgba(255,255,255,.08);
  transition: border-color .6s, box-shadow .6s, background-color .6s;
}
.zone.yellow.active {
  border-color: var(--yellow);
  background-color: rgba(245,197,24,.1);
  box-shadow: 0 0 26px rgba(245,197,24,.45);
}
.zone.red.active {
  border-color: var(--red);
  background-color: rgba(229,57,53,.12);
  box-shadow: 0 0 26px rgba(229,57,53,.5);
}
/* Pass-and-play: Red's side faces the other player */
.pvp .zone.red { transform: rotate(180deg); }

.zone-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.zone.yellow .zone-name { color: var(--yellow); }
.zone.red .zone-name { color: #ff8a80; }
.zone-stats { display: flex; gap: 10px; }
.zone-score, .zone-stars { font-size: .95rem; letter-spacing: 0; }
.zone-stars { display: inline-block; }
.zone-stars.bump { animation: star-bump .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes star-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.7) rotate(-12deg); }
  100% { transform: scale(1); }
}

/* Paper board with circles */
.board {
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 20px, rgba(229,57,53,.25) 20px, rgba(229,57,53,.25) 22px, transparent 22px),
    repeating-linear-gradient(var(--paper) 0 21px, var(--paper-line) 21px 22px);
  background-color: var(--paper);
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
  opacity: .75;
  transition: opacity .5s;
}
.zone.active .board { opacity: 1; }

.slots {
  display: grid;
  grid-template-columns: repeat(3, var(--slot));
  justify-content: space-evenly;
  row-gap: 6px;
}

.slot {
  position: relative;
  width: var(--slot);
  height: var(--slot);
  border-radius: 50%;
  border: 3px dashed rgba(43,45,66,.55);
  background: rgba(255,255,255,.6);
  display: grid;
  place-items: center;
  font-size: calc(var(--slot) * .42);
  font-weight: 800;
  color: rgba(43,45,66,.75);
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", system-ui, sans-serif;
}
.zone.yellow { --glow: var(--yellow); --glow-dark: var(--yellow-dark); }
.zone.red { --glow: var(--red); --glow-dark: var(--red-dark); }

.chip, .fly-chip {
  border-radius: 50%;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 6px rgba(0,0,0,.35);
}
.chip {
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  font-size: calc(var(--slot) * .38);
  font-family: system-ui, sans-serif;
  font-weight: 900;
}
.zone.yellow .chip, .fly-chip.yellow, .pile-chip, .win-chip.yellow {
  background: radial-gradient(circle at 35% 30%, #fff3b0, var(--yellow) 45%, #d9a800);
  color: rgba(90,65,0,.7);
}
.zone.red .chip, .fly-chip.red, .zone.red .pile-chip, .win-chip.red {
  background: radial-gradient(circle at 35% 30%, #ff9e9b, var(--red) 45%, #b71c1c);
  color: rgba(255,255,255,.8);
}
.chip.new { animation: chip-in .35s cubic-bezier(.3,1.6,.5,1); }
.fly-chip { position: fixed; z-index: 2; will-change: transform; }

/* Choice targets: pulsing circles */
.slot.target { z-index: 1; cursor: pointer; }
.slot.target-place {
  border-style: solid;
  border-color: var(--glow-dark);
  background: #fffbe6;
  animation: target-pulse .8s ease-in-out infinite alternate;
}
.slot.target-kick { animation: target-pulse .8s ease-in-out infinite alternate; }
.slot.target-kick .chip { animation: wobble .6s ease-in-out infinite; }
.slot.target-kick::after {
  content: "👟";
  position: absolute;
  top: -8px; right: -8px;
  font-size: 18px;
  z-index: 2;
}
.slot.hit { animation: shake .4s; }
.slot.shielded { animation: shield-glow 1.2s ease-out; }
@keyframes shield-glow {
  0%   { box-shadow: 0 0 0 0 rgba(80,170,255,.9); }
  30%  { box-shadow: 0 0 0 8px rgba(80,170,255,.7), 0 0 24px 8px rgba(80,170,255,.6); }
  100% { box-shadow: 0 0 0 0 rgba(80,170,255,0); }
}
.shield {
  position: fixed;
  z-index: 3;
  font-size: calc(var(--slot) * 1.1);
  transform: translate(-50%, -50%);
  animation: shield-pop 1.3s ease-out forwards;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
@keyframes shield-pop {
  0%   { transform: translate(-50%, -50%) scale(.2) rotate(-30deg); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(1.25) rotate(8deg); opacity: 1; }
  45%  { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}

@keyframes target-pulse {
  from { transform: scale(1); box-shadow: 0 0 0 0 var(--glow); }
  to   { transform: scale(1.1); box-shadow: 0 0 0 5px var(--glow), 0 0 18px 6px var(--glow); }
}
@keyframes chip-in {
  from { transform: scale(0) rotate(-90deg); }
  to   { transform: scale(1) rotate(0); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg) scale(1.05); }
  75% { transform: rotate(12deg) scale(1.05); }
}

/* Pile + Roll + choice row */
.zone-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
}
.pile {
  position: relative;
  width: 62px;
  height: 58px;
  flex: none;
}
.pile-chip {
  position: absolute;
  left: 8px;
  bottom: calc(6px + var(--k) * 6px);
  width: 42px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.pile-count {
  position: absolute;
  right: -2px;
  bottom: 0;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  font-size: .8rem;
  font-weight: 800;
}
.pile.bump { animation: bump .35s ease-out; }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.roll-btn {
  flex: 1;
  min-height: 56px;
  border-radius: 999px;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--glow);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--glow-dark), 0 8px 16px rgba(0,0,0,.35);
  transition: transform .08s, box-shadow .08s, opacity .3s;
}
.zone.red .roll-btn { color: #fff; }
.roll-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--glow-dark); }
.roll-btn:disabled { opacity: .35; cursor: default; }
.roll-btn.thinking { opacity: .8; font-size: 1.05rem; }

.choice {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.choice-buttons { display: flex; gap: 8px; }
.choice-btn {
  flex: 1;
  min-height: 56px;
  padding: 6px 8px;
  border-radius: 16px;
  font-size: clamp(.85rem, 3.8vw, 1.02rem);
  font-weight: 800;
  line-height: 1.15;
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
  transition: transform .1s;
}
.choice-btn.place { background: var(--glow); color: var(--ink); }
.zone.red .choice-btn.place { color: #fff; }
.choice-btn.kick { background: #fff; color: var(--ink); }
.choice-btn.kick::before { content: "👟 "; }
.choice-btn:active:not(:disabled) { transform: translateY(3px); }
.choice-btn:disabled { cursor: default; }
.choice-btn.chosen { transform: scale(1.06); outline: 4px solid #fff; outline-offset: 2px; }
.choice-timer {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.2);
  overflow: hidden;
}
.choice-timer span {
  display: block;
  height: 100%;
  background: #fff;
  transform-origin: left;
}
body.paused .choice-timer span,
body.paused .quiz-timer span { animation-play-state: paused !important; }
@keyframes timer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Center: die + status */
.center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 0;
}

.die {
  width: var(--die);
  height: var(--die);
  padding: calc(var(--die) * .14);
  border-radius: calc(var(--die) * .2);
  background: linear-gradient(145deg, #ffffff, #e6e6ea);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.12), 0 10px 24px rgba(0,0,0,.5);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  place-items: center;
}
.die.rolling { animation: tumble .25s linear infinite; }
.die.landed { animation: land .3s ease-out; }
.pip {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.5);
  visibility: hidden;
}
.pip.on { visibility: visible; }

@keyframes tumble {
  0%   { transform: rotate(0) scale(1); }
  25%  { transform: rotate(12deg) scale(.94) translateY(-4px); }
  50%  { transform: rotate(-8deg) scale(1.03); }
  75%  { transform: rotate(10deg) scale(.96) translateY(3px); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes land {
  0% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.status {
  margin: 4px 0 0;
  min-height: 1.4em;
  font-weight: 700;
  font-size: clamp(.95rem, 4.2vw, 1.1rem);
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}

/* Flying chips + kick captions */
#fx {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.kick-caption {
  position: fixed;
  z-index: 3;
  transform: translate(-50%, -50%);
  font-size: clamp(1.8rem, 10vw, 2.6rem);
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 3px 0 #ff4f9a, 0 6px 14px rgba(0,0,0,.5);
  -webkit-text-stroke: 1.5px #2b2d42;
  animation: caption 1.3s ease-out forwards;
}
.kick-caption.good { text-shadow: 0 3px 0 #3a8dde, 0 6px 14px rgba(0,0,0,.5); }
@keyframes caption {
  0%   { transform: translate(-50%, -50%) scale(.3) rotate(-10deg); opacity: 0; }
  20%  { transform: translate(-50%, -80%) scale(1.25) rotate(4deg); opacity: 1; }
  35%  { transform: translate(-50%, -85%) scale(1) rotate(-2deg); }
  80%  { opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(1); opacity: 0; }
}

/* ===== Quiz defense ===== */
.quiz-overlay { z-index: 55; background: rgba(10,25,15,.62); }
.quiz-pop {
  width: 100%;
  max-width: 420px;
  animation: pop-in .45s cubic-bezier(.3,1.5,.5,1);
}
.quiz-card {
  overflow: hidden;
  border-radius: 26px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  border: 5px solid var(--card-color, var(--yellow));
}
.quiz-card.yellow { --card-color: var(--yellow); --card-dark: var(--yellow-dark); --card-text: var(--ink); }
.quiz-card.red { --card-color: var(--red); --card-dark: var(--red-dark); --card-text: #fff; }
.quiz-card.flipped { transform: rotate(180deg); }
.quiz-head {
  margin: 0;
  padding: 12px 16px;
  background: var(--card-color);
  color: var(--card-text);
  font-size: clamp(1.4rem, 7vw, 1.9rem);
}
.quiz-head::before { content: "\1F6E1\FE0F  "; }
.quiz-question {
  margin: 18px 14px 16px;
  font-size: clamp(1.4rem, 7.2vw, 2rem);
  font-weight: 900;
  line-height: 1.25;
}
.quiz-question small {
  display: block;
  margin-bottom: 4px;
  font-size: .6em;
  font-weight: 800;
  opacity: .7;
}
.quiz-question .expr { white-space: nowrap; }
.quiz-answers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 14px;
}
.quiz-answer {
  min-height: 72px;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--card-dark, #999);
  font-size: clamp(1.6rem, 8vw, 2.2rem);
  font-weight: 900;
  box-shadow: 0 5px 0 var(--card-dark, #999);
  transition: transform .1s, background .2s;
}
.quiz-answer:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--card-dark); }
.quiz-answer:disabled { cursor: default; }
.quiz-answer.picked { outline: 4px solid var(--ink); outline-offset: 2px; }
.quiz-answer.correct { background: #4caf6a; border-color: #2e7d46; color: #fff; box-shadow: 0 5px 0 #2e7d46; animation: answer-pop .5s; }
.quiz-answer.wrong { background: #ffd8a8; border-color: #e0a060; box-shadow: 0 5px 0 #e0a060; }
.quiz-feedback {
  min-height: 1.5em;
  margin: 14px 14px 10px;
  font-size: 1.15rem;
  font-weight: 800;
}
.quiz-feedback.good { color: #2e7d46; }
.quiz-feedback.gentle { color: #8a5a00; }
.quiz-timer {
  height: 10px;
  margin: 0 14px 14px;
  border-radius: 5px;
  background: rgba(43,45,66,.15);
  overflow: hidden;
}
.quiz-timer span {
  display: block;
  height: 100%;
  background: var(--card-color);
  transform-origin: left;
}
@keyframes answer-pop {
  0% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ===== Settings ===== */
.settings-screen {
  z-index: 70;
  background: linear-gradient(160deg, rgba(43,42,110,.97), rgba(25,30,60,.98));
}
.settings-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-header h2 { margin: 0; font-size: clamp(1.5rem, 7vw, 2rem); }
.back-btn {
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: 0 4px 0 #b9bccb;
}
.back-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b9bccb; }
.settings-inner {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  max-width: 480px;
  margin: 16px auto 0;
}
.settings-card {
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  overflow: hidden;
}
.toggle-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 12px 14px;
  cursor: pointer;
}
.toggle-row + .toggle-row { border-top: 1px solid var(--paper-line); }
.row-icon { font-size: 1.8rem; flex: none; }
.toggle-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-text b { font-size: 1.15rem; }
.toggle-text small { font-size: .88rem; opacity: .7; line-height: 1.3; }
.toggle-row input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.switch {
  position: relative;
  flex: none;
  width: 68px; height: 40px;
  border-radius: 999px;
  background: #c9ccd6;
  transition: background .2s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
  transition: transform .2s;
}
.toggle-row input:checked + .switch { background: #3bb273; }
.toggle-row input:checked + .switch::after { transform: translateX(28px); }
.toggle-row input:focus-visible + .switch { outline: 3px solid var(--yellow); outline-offset: 2px; }
.age-row { cursor: default; flex-wrap: wrap; }
.stepper { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.step-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 0 var(--yellow-dark);
}
.step-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--yellow-dark); }
.step-btn:disabled { opacity: .4; }
.age-input {
  width: 60px;
  height: 48px;
  border: 2px solid #c9ccd6;
  border-radius: 12px;
  text-align: center;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ink);
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
  user-select: text;
  -webkit-user-select: text;
}
.age-input::-webkit-outer-spin-button,
.age-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.settings-note { text-align: center; opacity: .75; margin: 14px 0; }

/* ===== Overlays (exit + win) ===== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20,21,35,.72);
  animation: fade-in .3s;
}
.card {
  width: 100%;
  max-width: 380px;
  padding: 28px 20px 12px;
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  animation: pop-in .4s cubic-bezier(.3,1.5,.5,1);
}
.card h2 { font-size: clamp(1.6rem, 8vw, 2.3rem); margin: 8px 0 8px; }
.card-text { margin: 0 0 22px; opacity: .8; }
.score-line { font-size: 1.3rem; font-weight: 800; opacity: 1; }
.score-line .y { color: var(--yellow-dark); }
.score-line .r { color: var(--red-dark); }
.win-chip {
  width: 84px; height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.2), 0 6px 12px rgba(0,0,0,.3);
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }

/* Very short screens: tighten up */
@media (max-height: 600px) {
  .zone-head { display: none; }
  .zone { padding: 6px; gap: 4px; }
  .zone-controls { min-height: 52px; }
  .roll-btn, .choice-btn { min-height: 50px; }
}

/* ===== Reduced motion: slow & gentle, no big or fast movement ===== */
@media (prefers-reduced-motion: reduce) {
  .bgm-gradient { animation-duration: 60s; }
  .bgm-faller {
    top: var(--y);
    animation: gentle-float 12s ease-in-out var(--delay) infinite alternate;
  }
  .bgg-beam { animation-name: beam-soft; animation-duration: 30s; }
  .bgg-sparkle { animation-name: twinkle; }
  .bgg-drifter { animation-name: gentle-float; animation-duration: 20s; }
  .logo { animation: gentle-bob 6s ease-in-out infinite; }
  .logo-die.yellow, .logo-die.red, .logo-title { animation: none; }
  .logo-die.yellow { transform: rotate(-12deg); }
  .logo-die.red { transform: rotate(10deg); }

  .die.rolling { animation: none; }
  .slot.target-place, .slot.target-kick { animation: target-soft 1.6s ease-in-out infinite alternate; }
  .slot.target-kick .chip, .slot.hit { animation: none; }
  .kick-caption { animation: caption-soft 1.3s ease-out forwards; }
  .shield { animation: caption-soft 1.3s ease-out forwards; }
  .quiz-pop { animation: fade-in .3s; }
  .zone, .bgg-glow, .turn-indicator { transition-duration: 1.2s; }

  @keyframes gentle-float {
    from { transform: translate3d(0, 0, 0) rotate(0deg); opacity: calc(var(--op, .1) * .6); }
    to   { transform: translate3d(0, -12px, 0) rotate(6deg); opacity: var(--op, .1); }
  }
  @keyframes gentle-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  @keyframes beam-soft {
    from { transform: rotate(var(--tilt)); opacity: .4; }
    to   { transform: rotate(var(--tilt)); opacity: .9; }
  }
  @keyframes twinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: .6; }
  }
  @keyframes target-soft {
    from { box-shadow: 0 0 0 0 var(--glow); }
    to   { box-shadow: 0 0 0 5px var(--glow); }
  }
  @keyframes caption-soft {
    0% { transform: translate(-50%, -80%); opacity: 0; }
    15%, 80% { opacity: 1; }
    100% { transform: translate(-50%, -80%); opacity: 0; }
  }
}