:root {
  --bg: #141833;
  --bg2: #232a5c;
  --bg3: #2f3878;
  --ink: #ffffff;
  --muted: #aab2e0;
  --p1: #3d8bff;
  --p1-soft: #3d8bff3a;
  --p2: #ff8c2b;
  --p2-soft: #ff8c2b3a;
  --gold: #ffd84d;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, Roboto, "Segoe UI", sans-serif;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  touch-action: none;
  cursor: pointer;
}

#app {
  position: fixed;
  inset: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---- Screen frame: zones for each player, play area between ---- */
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
}

.face .screen {
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "z2" "play" "z1";
}

.side .screen {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "z1 play z2";
}

.zone {
  position: relative;
  padding: 6px;
  min-width: 0;
  min-height: 0;
}

.z1 {
  grid-area: z1;
  --pc: var(--p1);
  --pcs: var(--p1-soft);
}

.z2 {
  grid-area: z2;
  --pc: var(--p2);
  --pcs: var(--p2-soft);
}

.zone-in {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

/* The top player's half faces them. */
.face .z2 .zone-in {
  rotate: 180deg;
}

.play {
  grid-area: play;
  position: relative;
  min-width: 0;
  min-height: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.face .zones-slim .zone { height: 84px; }
.side .zones-slim .zone { width: 132px; }
.face .zones-pad .zone { height: clamp(140px, 20vmax, 200px); }
.side .zones-pad .zone { width: clamp(140px, 20vmax, 200px); }
.face .zones-big .zone { height: clamp(160px, 29vmax, 280px); }
.side .zones-big .zone { width: clamp(160px, 29vmax, 280px); }
.zones-none .zone { display: none; }
.face .home .zone { height: 116px; }
.side .home .zone { width: 150px; }

/* ---- Buttons ---- */
.round-btn {
  border: none;
  border-radius: 50%;
  background: var(--bg2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 4px 0 #0006;
}

.round-btn:active { translate: 0 3px; box-shadow: 0 1px 0 #0006; }
.round-btn.small { width: 56px; height: 56px; font-size: 26px; }
.round-btn.big { width: 80px; height: 80px; font-size: 40px; }

.hold {
  position: relative;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--bg2);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.hold .ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  rotate: -90deg;
  pointer-events: none;
}

.hold .ring circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
}

.hold.holding .ring circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s linear;
}

.hold.reset.holding .ring circle { transition-duration: 1.5s; }

/* Hold-to-exit: on the play area's edge, where both players can reach it, or tucked into
   player 1's corner when the play area is a board that fills its width. */
.hold.exit {
  position: absolute;
  z-index: 10;
  width: 50px;
  height: 50px;
  font-size: 22px;
  background: #0b0e2499;
}

.face .hold.exit { left: 4px; top: 50%; translate: 0 -50%; }
.side .hold.exit { top: 4px; left: 50%; translate: -50% 0; }
.face .zones-slim .hold.exit { top: auto; bottom: 17px; left: 10px; translate: none; }
.side .zones-slim .hold.exit { top: 10px; left: 10px; translate: none; }

/* ---- Home ---- */
.home-mid {
  flex-direction: column;
  gap: 10px;
  padding: 6px 10px;
}

.title {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, var(--p1), #b07cff, var(--p2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tiles {
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.side .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 640px; gap: 8px; }
.face .tile:last-child { grid-column: 2; }

.tile {
  border: none;
  border-radius: 20px;
  background: var(--bg2);
  padding: 10px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  box-shadow: 0 5px 0 #0006;
  min-width: 0;
}

.tile:active { translate: 0 3px; box-shadow: 0 2px 0 #0006; }
.tile .ti { font-size: 44px; line-height: 1.1; }
.tile .tn { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tile .tt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.side .tile { padding: 6px 4px; }
.side .tile .ti { font-size: 36px; }

.settings {
  display: flex;
  gap: 16px;
  align-items: center;
}

.pcard {
  display: flex;
  align-items: center;
  gap: 18px;
}

.side .pcard { flex-direction: column; }

.avatar.big {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 5px solid var(--pc);
  background: var(--pcs);
  font-size: 56px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boost {
  border: 2px dashed #ffffff40;
  border-radius: 16px;
  background: none;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.boost .stars { font-size: 28px; color: var(--gold); letter-spacing: 2px; }
.boost small { font-size: 11px; color: var(--muted); }

.sheet {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: #0b0e24d0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet-card {
  background: var(--bg2);
  border-radius: 24px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 94%;
}

.sheet-title { font-size: 22px; font-weight: 900; }
.opt-row { display: flex; gap: 10px; }

.opt {
  border: 3px solid transparent;
  border-radius: 18px;
  background: var(--bg3);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 82px;
}

.opt.on { border-color: var(--gold); background: #ffd84d22; }
.opt .oi { font-size: 38px; }
.opt .ol { font-size: 13px; font-weight: 700; }
.round-btn.go { background: #2fbf71; }
.sheet .close { position: absolute; top: 10px; right: 10px; }

/* ---- Player panel (board games) ---- */
.panel {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.2s, box-shadow 0.2s;
}

.side .panel { flex-direction: column; gap: 6px; }
.zone.active .panel { background: var(--pcs); box-shadow: inset 0 0 0 3px var(--pc); }
.panel .avatar { font-size: 44px; line-height: 1; }
.zone.active .panel .avatar { animation: bob 0.7s ease-in-out infinite alternate; }
.panel-text { font-size: 22px; font-weight: 900; color: var(--pc); text-align: center; min-width: 1px; }
.panel-score { font-size: 22px; font-weight: 800; }

/* ---- Tic-Tac-Toe ---- */
.ttt {
  width: 92cqmin;
  height: 92cqmin;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 2.4cqmin;
}

.ttt-cell {
  border: none;
  border-radius: 18px;
  background: var(--bg2);
  font-size: 19cqmin;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ttt-cell.own1 { background: var(--p1-soft); }
.ttt-cell.own2 { background: var(--p2-soft); }
.ttt-cell.win { box-shadow: inset 0 0 0 5px var(--gold); animation: pulse 0.5s ease-in-out infinite alternate; }

.mark { display: inline-block; animation: pop 0.25s ease-out; }
.face .mark.p2 { rotate: 180deg; }

/* ---- Four in a Row ---- */
.c4 {
  --cols: 7;
  --rows: 6;
  --gap: 1.3cqmin;
  --cell: min(calc((96cqw - (var(--cols) + 1) * var(--gap)) / var(--cols)), calc((96cqh - (var(--rows) + 1) * var(--gap)) / var(--rows)));
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: repeat(var(--rows), var(--cell));
  gap: var(--gap);
  padding: var(--gap);
  background: #6a3fd1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 0 #0006;
}

.face .c4 { --cols: 6; --rows: 7; }
.c4-cell { position: relative; border-radius: 50%; background: var(--bg); }

.c4-piece {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell) * 0.55);
  line-height: 1;
  box-shadow: inset 0 -4px 0 #0003;
}

.c4-piece.p1 { background: var(--p1); }
.c4-piece.p2 { background: var(--p2); }
.c4-piece .mark { animation: none; }
.c4-piece.win { box-shadow: 0 0 0 4px var(--gold) inset; animation: pulse 0.5s ease-in-out infinite alternate; }

/* ---- Memory ---- */
.mem {
  --gap: 8px;
  --cell: min(calc((97cqw - (var(--cols) - 1) * var(--gap)) / var(--cols)), calc((97cqh - (var(--rows) - 1) * var(--gap)) / var(--rows)));
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-auto-rows: var(--cell);
  gap: var(--gap);
}

.face .mem.n6 { --cols: 3; --rows: 4; }
.side .mem.n6 { --cols: 4; --rows: 3; }
.face .mem.n10 { --cols: 4; --rows: 5; }
.side .mem.n10 { --cols: 5; --rows: 4; }

.card { border: none; background: none; padding: 0; perspective: 600px; }

.card-in {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.3s;
}

.card.up .card-in { transform: rotateY(180deg); }

.card-back,
.card-front {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-back {
  background: repeating-linear-gradient(45deg, #5b3fd0, #5b3fd0 10px, #6c50e0 10px, #6c50e0 20px);
  font-size: calc(var(--cell) * 0.4);
  font-weight: 900;
  color: #ffffff50;
  box-shadow: 0 4px 0 #0006;
}

.card-front {
  transform: rotateY(180deg);
  background: #f3f0ff;
  font-size: calc(var(--cell) * 0.58);
  line-height: 1;
}

.card.own1 .card-front { background: #d6e6ff; box-shadow: inset 0 0 0 4px var(--p1); }
.card.own2 .card-front { background: #ffe6d1; box-shadow: inset 0 0 0 4px var(--p2); }
.sym { transition: rotate 0.3s; }
.face .mem.turn2 .card.up:not(.own1):not(.own2) .sym,
.face .card.own2 .sym { rotate: 180deg; }

/* ---- Snack Snakes ---- */
.stage { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.snake-zone { justify-content: space-between; padding: 0 4px; }
.side .snake-zone { flex-direction: column; padding: 4px 0; }

.sn-hud {
  width: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 900;
}

.side .sn-hud { width: auto; }
.sn-av { font-size: 30px; line-height: 1; }
.sn-len { font-size: 22px; color: var(--pc); white-space: nowrap; }
.sn-ic { font-size: 20px; }
.sn-time { font-size: 26px; }
.sn-time.hurry { color: #ff5b5b; animation: pulse 0.5s ease-in-out infinite alternate; }

.joy {
  position: relative;
  width: 88cqmin;
  height: 88cqmin;
  max-width: 190px;
  max-height: 190px;
  border-radius: 50%;
  border: 4px solid var(--pc);
  background: radial-gradient(circle, var(--pcs) 0 40%, #ffffff08 41%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.joy-arrows {
  position: absolute;
  top: 6%;
  font-size: 18px;
  color: var(--pc);
  opacity: 0.6;
}

.joy-knob {
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: var(--pc);
  box-shadow: 0 4px 0 #0006;
  transition: translate 0.12s;
}

.joy.on .joy-knob { transition: none; }
.side .joy-arrows { display: none; }

/* ---- Big tap buttons (Tug-of-War, Quick Tap) ---- */
.big-btn {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 28px;
  background: var(--pc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 7px 0 #0007;
  transition: filter 0.15s, opacity 0.15s;
}

.big-btn.pressed { translate: 0 5px; box-shadow: 0 2px 0 #0007; }
.big-btn .bb-av { font-size: min(64px, 30cqmin); line-height: 1.1; }
.big-btn .bb-txt { font-size: min(34px, 15cqmin); font-weight: 900; letter-spacing: 1px; }
.big-btn.frozen { background: #9fd8ff; filter: saturate(0.4); }
.big-btn.frozen .bb-txt::before { content: "❄️ "; }
.big-btn.sleep { opacity: 0.5; }
[data-game="tug"] .big-btn:not(.live) { filter: brightness(0.75); }

/* ---- Tug-of-War ---- */
.tug { position: relative; width: 64cqw; height: 94cqh; }
.side .tug { width: 94cqw; height: 64cqh; }

.tug-rope {
  position: absolute;
  background: repeating-linear-gradient(45deg, #c9944f, #c9944f 8px, #a8743a 8px, #a8743a 16px);
  border-radius: 6px;
}

.face .tug-rope { left: 50%; top: 9%; bottom: 9%; width: 14px; translate: -50% 0; }
.side .tug-rope { top: 50%; left: 9%; right: 9%; height: 14px; translate: 0 -50%; }

.tug-goal { position: absolute; border-radius: 14px; }
.tug-goal.g1 { background: var(--p1-soft); border: 3px dashed var(--p1); }
.tug-goal.g2 { background: var(--p2-soft); border: 3px dashed var(--p2); }
.face .tug-goal { left: 0; right: 0; height: 9%; }
.face .tug-goal.g1 { bottom: 0; }
.face .tug-goal.g2 { top: 0; }
.side .tug-goal { top: 0; bottom: 0; width: 9%; }
.side .tug-goal.g1 { left: 0; }
.side .tug-goal.g2 { right: 0; }

.tug-av { position: absolute; font-size: min(48px, 12cqmin); line-height: 1; }
.face .tug-av { left: 50%; translate: -50% 0; }
.face .tug-av.a1 { bottom: 1%; }
.face .tug-av.a2 { top: 1%; rotate: 180deg; }
.side .tug-av { top: 50%; translate: 0 -50%; }
.side .tug-av.a1 { left: 1%; }
.side .tug-av.a2 { right: 1%; }
.tug-av.lean { animation: lean 0.12s ease-out; }

.tug-knot {
  --f: 0.5;
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ff3b5c;
  border: 5px solid #fff;
  box-shadow: 0 0 0 4px #ff3b5c66;
  transition: left 0.08s, bottom 0.08s;
}

.face .tug-knot { left: 50%; bottom: calc(9% + var(--f) * 82%); translate: -50% 50%; }
.side .tug-knot { top: 50%; left: calc(9% + var(--f) * 82%); translate: -50% -50%; }

/* ---- Quick Tap ---- */
.qt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqmin; }
.qt-sym { font-size: 50cqmin; line-height: 1.05; height: 58cqmin; display: flex; align-items: center; justify-content: center; }
.qt-sym.target { animation: pop 0.18s ease-out; filter: drop-shadow(0 0 18px #3ddc84); }
.qt-sym.got { animation: pop 0.25s ease-out; }
.qt-sym.intro { font-size: 30cqmin; opacity: 0.7; }
.qt-hint { font-size: min(24px, 7cqmin); font-weight: 900; color: var(--muted); height: 1.3em; }
.qt-hint.b { rotate: 180deg; }
.side .qt-hint.b { display: none; }
.dots { display: flex; gap: 6px; margin-bottom: 4px; }
.dot { width: 16px; height: 16px; border-radius: 50%; background: #0004; border: 2px solid #fff8; }
.dot.on { background: var(--gold); border-color: #fff; }

/* ---- Center messages, countdown ---- */
.flash {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6cqmin;
  pointer-events: none;
}

.flash-a,
.flash-b {
  font-size: min(64px, 14cqmin);
  font-weight: 900;
  text-shadow: 0 4px 0 #0008;
  animation: pop 0.25s ease-out;
}

.flash-b { rotate: 180deg; }
.side .flash-b { display: none; }
.flash.count .flash-a,
.flash.count .flash-b { font-size: min(110px, 24cqmin); }
.flash.go .flash-a,
.flash.go .flash-b { color: #3ddc84; }
.flash.goal .flash-a,
.flash.goal .flash-b { color: var(--gold); }

/* ---- Pause and result screens ---- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #0b0e24ee;
}

.overlay.pause { display: flex; align-items: center; justify-content: center; gap: 26px; }
.pause-icon { font-size: 44px; }
.side .overlay.pause,
.face .overlay.pause { flex-wrap: wrap; }

.overlay.result { display: grid; }
.face .overlay.result { grid-template-rows: 1fr auto 1fr; grid-template-areas: "h2" "mid" "h1"; }
.side .overlay.result { grid-template-columns: 1fr auto 1fr; grid-template-areas: "h1 mid h2"; }

.half {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.half.h1 { grid-area: h1; }
.half.h2 { grid-area: h2; }
.face .half.h2 { rotate: 180deg; }
.res-icon { font-size: 64px; line-height: 1.1; }
.half.won .res-icon { animation: bob 0.6s ease-in-out infinite alternate; }
.res-av { font-size: 48px; line-height: 1.1; }
.res-msg { font-size: 30px; font-weight: 900; }
.half.won .res-msg { color: var(--gold); }

.res-mid {
  grid-area: mid;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px;
}

.side .res-mid { flex-direction: column; }
.res-score { font-size: 20px; font-weight: 800; white-space: nowrap; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@keyframes pop {
  from { transform: scale(0.3); }
  to { transform: scale(1); }
}

@keyframes pulse {
  from { opacity: 1; }
  to { opacity: 0.55; }
}

@keyframes bob {
  from { transform: translateY(-3px) scale(1.04); }
  to { transform: translateY(3px) scale(0.96); }
}

@keyframes lean {
  50% { transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}