/* Color emoji for browsers without one (the Tesla panel draws outlines otherwise).
   Twemoji Mozilla (COLRv0), subset to the emoji this app uses. See fonts/EMOJI-LICENSE.txt. */
@font-face {
  font-family: "TF Emoji";
  src: url("../fonts/emoji.woff2") format("woff2");
  font-display: swap;
}

/* Plate lettering. Open-license (OFL) fonts served from teslafun/fonts. */
@font-face { font-family: "TF Oswald"; font-weight: 600; font-display: swap; src: url("../fonts/oswald-600.woff2") format("woff2"); }
@font-face { font-family: "TF Bebas"; font-weight: 400; font-display: swap; src: url("../fonts/bebas-neue.woff2") format("woff2"); }
@font-face { font-family: "TF Barlow"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "TF Archivo"; font-weight: 400; font-display: swap; src: url("../fonts/archivo-black.woff2") format("woff2"); }
@font-face { font-family: "TF Baskerville"; font-weight: 700; font-display: swap; src: url("../fonts/libre-baskerville-700.woff2") format("woff2"); }
@font-face { font-family: "TF Kaushan"; font-weight: 400; font-display: swap; src: url("../fonts/kaushan-script.woff2") format("woff2"); }

:root {
  --font: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif, "TF Emoji";
  --emoji: "TF Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --ease: cubic-bezier(0.22, 1.2, 0.36, 1);
  --left: #3de0ff;
  --right: #ff7ad9;
  --gold: #ffd36e;
  --card: #1c2538;
  --plus: #e2ffef;
  --glass: rgba(255, 255, 255, 0.14);
  --glass-2: rgba(255, 255, 255, 0.07);
  --stroke: rgba(255, 255, 255, 0.28);
  --ink: #f6fbff;
  --muted: rgba(246, 251, 255, 0.72);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  --pad: max(12px, env(safe-area-inset-top, 0px));
  --gap: 10px;
}

[data-theme="day"] {
  --left: #0077aa;
  --right: #d44800;
  --gold: #e0a800;
  --card: #ffffff;
  --plus: #11804f;
  --glass: rgba(255, 255, 255, 0.5);
  --glass-2: rgba(255, 255, 255, 0.28);
  --stroke: rgba(255, 255, 255, 0.7);
  --ink: #16304a;
  --muted: rgba(22, 48, 74, 0.7);
  --shadow: 0 16px 40px rgba(70, 110, 160, 0.18);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: #090b14;
  touch-action: manipulation;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

[data-theme="day"] body,
[data-theme="day"] {
  background: #c9e7ff;
}

button {
  font-family: inherit;
}

.sky {
  position: fixed;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 15% 10%, color-mix(in srgb, var(--left) 40%, transparent), transparent 55%),
    radial-gradient(800px 700px at 90% 90%, color-mix(in srgb, var(--right) 38%, transparent), transparent 50%),
    radial-gradient(1200px 500px at 50% 120%, rgba(160, 90, 255, 0.35), transparent 55%),
    linear-gradient(160deg, #070a16, #141a33 55%, #1b1230);
  animation: drift 22s var(--ease) infinite alternate;
}

[data-theme="day"] .sky {
  background:
    radial-gradient(800px 500px at 20% 0%, #fff6c4, transparent 50%),
    radial-gradient(900px 600px at 100% 100%, #ffd0b8, transparent 50%),
    radial-gradient(700px 400px at 70% 20%, #b8f3ff, transparent 45%),
    linear-gradient(180deg, #9ad6ff, #e8f6ff 40%, #ffe9d2);
}

.bloom {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.025) 0 8deg, transparent 8deg 18deg);
  mix-blend-mode: overlay;
  animation: spin 48s linear infinite;
  opacity: 0.45;
}

[data-theme="day"] .bloom {
  opacity: 0.22;
  mix-blend-mode: soft-light;
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  to { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.app {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--vh, 100dvh);
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--pad) 14px 12px;
  gap: 10px;
  overflow: hidden;
}

/* Handheld: lay out on the virtual (cabin-proportioned) viewport, then shrink to the screen. */
html[data-scaled] .app,
html[data-scaled] .burst-layer {
  width: var(--vw);
  height: var(--vh);
  max-height: none;
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 0;
}

html[data-scaled] .burst-layer {
  inset: auto;
  left: 0;
  top: 0;
}

/* Fitted grids must never push their container wider; Fit measures the
   container, so the container has to be the boss. */
[data-fit] {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

/* ---------- chrome ---------- */

.chrome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--emoji);
  font-size: 26px;
  line-height: 1;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), transparent 40%),
    linear-gradient(180deg, var(--left), var(--right));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.brand h1 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.chrome-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.theme-cycle,
.tip-btn {
  min-height: 44px;
  padding: 0 14px;
  gap: 6px;
  font-weight: 650;
  white-space: nowrap;
}

.theme-cycle {
  min-width: 108px;
  color: var(--ink);
}

.theme-ico,
.tip-ico {
  font-family: var(--emoji);
  font-size: 1.15em;
  line-height: 1;
}

.tip-btn {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05)),
    color-mix(in srgb, var(--gold) 38%, var(--glass));
  border-color: color-mix(in srgb, var(--gold) 55%, var(--stroke));
}

input,
textarea,
.name-edit {
  user-select: text !important;
  -webkit-user-select: text !important;
  pointer-events: auto;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}

.pill {
  border: 0;
  color: inherit;
  font: inherit;
  border-radius: 999px;
  min-height: 48px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), filter 0.18s var(--ease), background 0.2s;
}

.pill:active {
  transform: scale(0.96);
  filter: brightness(1.12);
}

.look-switch {
  display: flex;
  padding: 4px;
  border-radius: 999px;
  gap: 4px;
}

.look-switch button {
  min-width: 72px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.look-switch button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.look-switch button[aria-pressed="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 55%, transparent), color-mix(in srgb, var(--gold) 25%, transparent));
}

.names {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.name-edit {
  min-width: min(140px, 22vw);
  text-align: center;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: inherit;
  font: inherit;
  font-weight: 700;
  min-height: 48px;
  padding: 0 14px;
}

.name-edit.left { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 55%, transparent); }
.name-edit.right { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 55%, transparent); }

.name-big {
  width: 100%;
  min-height: 72px;
  font-size: 1.8rem;
  margin: 12px 0;
}

/* ---------- screens ---------- */

.screen {
  min-height: 0;
  min-width: 0;
  height: 100%;
  border-radius: 28px;
  padding: 14px;
  display: grid;
  animation: rise 0.5s var(--ease);
  overflow: hidden;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.play,
.setup {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.play.has-bar {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.play-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.top-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  font-weight: 700;
}

.top-center > b { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.top-right {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.mode-label { color: var(--muted); font-weight: 700; white-space: nowrap; }

.count-pill {
  border-radius: 999px;
  padding: 0 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ---------- hub ---------- */

.hub {
  min-height: 0;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  height: 100%;
}

.game-btn {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 4px;
  border-radius: 24px;
  padding: 10px 12px 12px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(220px 140px at 80% 0%, color-mix(in srgb, var(--game-tint, var(--left)) 55%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--game-tint, var(--left)) 28%, var(--glass)), var(--glass-2));
  transition: transform 0.22s var(--ease), filter 0.22s var(--ease);
}

.game-btn:active { transform: scale(0.97); filter: brightness(1.1); }

.game-btn::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 65%);
  pointer-events: none;
}

.game-btn .game-ico {
  font-size: clamp(2.4rem, 12vh, 6.4rem);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.28));
  transition: transform 0.4s var(--ease);
}

.game-btn:hover .game-ico { transform: translateY(-3px) scale(1.04); }

.game-btn h3 {
  margin: 0;
  font-size: clamp(0.95rem, 1.7vw, 1.4rem);
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.game-btn.open {
  cursor: default;
  background: var(--glass-2);
  border-style: dashed;
  box-shadow: none;
  opacity: 0.55;
}

.game-btn.open::after { display: none; }
.game-btn.open .game-ico {
  font-size: 1.4rem;
  color: var(--muted);
  filter: none;
  opacity: 0.5;
}

/* ---------- mode pickers ---------- */

.modes {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), var(--cell-w, 40px));
  grid-auto-rows: var(--cell-h, 40px);
  gap: 18px;
  justify-content: center;
  align-content: center;
  min-height: 0;
  padding: 8px;
}

.mode-card {
  border-radius: 28px;
  padding: 12px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 6px;
  min-height: 0;
  min-width: 0;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 70% 0%, color-mix(in srgb, var(--mode-tint, var(--left)) 55%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--mode-tint, var(--left)) 28%, var(--glass)), var(--glass-2));
  transition: transform 0.22s var(--ease), filter 0.22s var(--ease);
}

.mode-card:active { transform: scale(0.96); filter: brightness(1.1); }

.mode-ico {
  font-size: calc(var(--cell-w, 40px) * 0.42);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.3));
}

.mode-card b {
  font-size: clamp(0.85rem, calc(var(--cell-w, 40px) * 0.085), 1.5rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- alphabet ---------- */

.letter-stage {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), var(--cell-w, 40px));
  grid-auto-rows: var(--cell-h, 40px);
  justify-content: center;
  align-content: center;
  min-height: 0;
  height: 100%;
  gap: 16px;
  padding: 4px 6px 8px;
  overflow: hidden;
}

.letter-pad {
  border: 0;
  color: inherit;
  font: inherit;
  border-radius: 32px;
  min-height: 0;
  min-width: 0;
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  overflow: visible;
  isolation: isolate;
  touch-action: manipulation;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.4), transparent 38%),
    linear-gradient(160deg, color-mix(in srgb, var(--tint, var(--left)) 62%, #fff), color-mix(in srgb, var(--tint2, var(--right)) 34%, var(--glass)));
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.65);
  transition: background 0.5s ease, box-shadow 0.3s;
}

.letter-pad:disabled { cursor: default; filter: saturate(0.6); }

.letter-pad::after {
  content: "";
  position: absolute;
  inset: 6px -44px -52px;
  z-index: 3;
}

.glyph-juice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 28px 22px rgba(0, 0, 0, 0.48));
  transform: perspective(920px) rotateX(11deg);
  transform-origin: 50% 62%;
}

.letter-pad.left .glyph-juice { transform: perspective(920px) rotateX(10deg) rotateY(9deg); }
.letter-pad.right .glyph-juice { transform: perspective(920px) rotateX(10deg) rotateY(-9deg); }

.progress {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 12px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.progress b {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.95));
  transition: width 0.4s var(--ease);
}

.glyph {
  font-size: clamp(7rem, 22vw, 14rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.85;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.45);
}

.score-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: clamp(2.6rem, 8vh, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
}

.score-big b { min-width: 1.2em; text-align: center; }
.score-big .l { color: var(--left); text-shadow: 0 6px 24px color-mix(in srgb, var(--left) 55%, transparent); }
.score-big .r { color: var(--right); text-shadow: 0 6px 24px color-mix(in srgb, var(--right) 55%, transparent); }
.score-big i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
}

.ripple {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%) scale(1);
  animation: pop 0.7s var(--ease) forwards;
  pointer-events: none;
}

@keyframes pop {
  to { transform: translate(-50%, -50%) scale(40); opacity: 0; }
}

/* ---------- find it ---------- */

.find-board {
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  gap: var(--gap);
  min-height: 0;
  overflow: visible;
}

/* Co-op uses the same board; the tallies just glow gold because the win is shared. */
.find-board.coop .tally { color: var(--gold); }

.side-col {
  display: grid;
  place-items: center;
  min-width: 0;
  position: relative;
  z-index: 0;
}

/* Watermark tally: the swiped tiles land on top of it, so it stays a soft
   background number instead of fighting the cards for attention. */
.tally {
  font-size: clamp(5rem, 42vh, 18rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 1;
  opacity: 0.22;
  transition: transform 0.4s var(--ease);
}

.side-col.left .tally { color: var(--left); }
.side-col.right .tally { color: var(--right); }

.tiles {
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
  overflow: visible;
  padding: 6px 0;
}

.tile {
  --ico: clamp(2rem, calc(var(--row-h, 80px) * 0.78), 7.5rem);
  border-radius: 22px;
  display: grid;
  grid-template-columns: calc(var(--ico) + 8px) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 2px 14px 2px 8px;
  position: relative;
  z-index: 1;
  isolation: isolate;
  touch-action: none;
  overflow: visible;
  min-height: 0;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tile-color, #fff) 45%, transparent), var(--glass));
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.26),
    inset 0 2px 0 rgba(255, 255, 255, 0.78),
    inset 0 -14px 24px rgba(0, 40, 20, 0.14);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease), box-shadow 0.28s var(--ease), filter 0.28s;
}

.tile.dragging { transition: none; z-index: 8; }

.tile::before {
  content: "";
  position: absolute;
  inset: 1px 10% auto 8%;
  height: 42%;
  border-radius: 20px 26px 80% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
  z-index: 0;
}

.tile.locked { cursor: default; }

/* Side columns are 3/10 of the board, the tile column 4/10. A claimed tile
   shrinks to 70% of the tile column and slides so it sits centred inside
   the winner's column, fully on screen. Percentages are of the new width. */
.tile.claimed-left {
  width: 70%;
  transform: translateX(calc(-103.57% - var(--gap))) rotate(-2deg);
  z-index: 6;
  filter: saturate(1.15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--left) 80%, #fff), 0 18px 36px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.85);
}

.tile.claimed-right {
  width: 70%;
  transform: translateX(calc(146.43% + var(--gap))) rotate(2deg);
  z-index: 6;
  filter: saturate(1.15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--right) 80%, #fff), 0 18px 36px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.85);
}

.tile.claimed-team {
  transform: scale(1.03);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--gold) 80%, white),
    0 18px 36px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.85);
}

.tile.auto:not(.claimed-left):not(.claimed-right):not(.claimed-team) {
  outline: 2px dashed color-mix(in srgb, var(--gold) 80%, white);
  outline-offset: -6px;
}

.tile .ico {
  width: var(--ico);
  height: 100%;
  display: grid;
  place-items: center;
  font-size: var(--ico);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.32));
  pointer-events: none;
  z-index: 0;
}

.duo {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  font-size: 0.62em;
  line-height: 1;
}

.duo span:first-child { transform: translate(6%, 8%); }
.duo span:last-child { transform: translate(-14%, -6%); }

.tile-title {
  position: relative;
  z-index: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(0.9rem, calc(var(--row-h, 80px) * 0.26), 1.6rem);
  line-height: 1.12;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tile.claimed-left .tile-title,
.tile.claimed-right .tile-title {
  font-size: clamp(0.8rem, calc(var(--row-h, 80px) * 0.22), 1.3rem);
}

.hint { color: var(--muted); font-size: 0.82rem; }

/* ---------- overlay ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #000 42%, transparent);
  backdrop-filter: blur(10px) saturate(0.8);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  animation: rise 0.4s var(--ease);
}

.win-card {
  --tone: var(--ink);
  position: relative;
  width: min(560px, 92%);
  padding: 30px 28px 26px;
  border-radius: 32px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--tone) 28%, transparent), transparent 70%),
    color-mix(in srgb, var(--card) 55%, var(--glass));
  animation: win-pop 0.55s var(--ease);
}

.win-card.left { --tone: var(--left); }
.win-card.right { --tone: var(--right); }
.win-card.team { --tone: #ffb02e; }

.win-cup {
  font-size: clamp(3.4rem, 12vh, 5.6rem);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.3));
  animation: cup-bounce 0.9s var(--ease) 0.1s both;
}

.win-card h2 {
  margin: 0 0 8px;
  font-size: clamp(2.2rem, 6vh, 3.2rem);
  letter-spacing: -0.04em;
  color: var(--tone);
}

@keyframes win-pop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: none; }
}

@keyframes cup-bounce {
  0% { transform: translateY(-40px) scale(0.6); opacity: 0; }
  50% { transform: translateY(6px) scale(1.08); opacity: 1; }
  75% { transform: translateY(-4px) scale(0.98); }
  100% { transform: none; }
}
.actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }

.primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08));
  min-width: 160px;
}

.tiny { min-height: 44px; min-width: 44px; border-radius: 16px; }

/* ---------- tip jar ---------- */

.tip-card {
  --tone: var(--gold);
  width: min(760px, 94%);
  max-height: calc(var(--vh, 100dvh) - 24px);
  overflow: auto;
  padding: 22px 26px 22px;
}

.tip-card h2 { margin: 0 0 4px; font-size: clamp(1.8rem, 5vh, 2.6rem); }
.tip-card .tip-cup { font-size: clamp(2.4rem, 8vh, 3.6rem); }

.tip-x {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

.tip-note {
  margin: 0 auto 14px;
  max-width: 44ch;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.35;
}

.tip-amounts {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  margin-bottom: 14px;
}

.tip-chip {
  min-width: 72px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 750;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.tip-chip[aria-pressed="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 70%, #fff), color-mix(in srgb, var(--gold) 85%, #000 10%));
  color: #2a1d00;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--gold) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

.tip-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tip-way {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 22px;
  text-decoration: none;
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s var(--ease), filter 0.15s;
}

.tip-way:active { transform: scale(0.97); filter: brightness(1.1); }
.tip-way.venmo { background: linear-gradient(180deg, #2f9bf0, #1c7fd2); }
.tip-way.paypal { background: linear-gradient(180deg, #1f4bb8, #142f7a); }
.tip-way-name { font-weight: 850; font-size: 1.35rem; letter-spacing: -0.02em; }
.tip-way-to { font-size: 0.92rem; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip-way-amt {
  margin: 8px auto 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 750;
}

.tip-scan {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}

.tip-scan-hint { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }

.tip-qrs {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.tip-qr {
  margin: 0;
  display: grid;
  gap: 4px;
  justify-items: center;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
}

.tip-qr svg {
  width: clamp(84px, 16vh, 132px);
  height: auto;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* Short landscape (phone dock, climate bar up): head on the left, ways + QR on the right. */
html[data-shape="dock"] .tip-card {
  width: min(880px, 96%);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: center;
  text-align: center;
}
html[data-shape="dock"] .tip-card .tip-cup { font-size: 2.2rem; }
html[data-shape="dock"] .tip-card h2 { font-size: 1.7rem; }
html[data-shape="dock"] .tip-note { font-size: 0.88rem; margin-bottom: 10px; }
html[data-shape="dock"] .tip-amounts { margin-bottom: 0; }
html[data-shape="dock"] .tip-way { padding: 10px 12px; }
html[data-shape="dock"] .tip-way-name { font-size: 1.15rem; }
html[data-shape="dock"] .tip-way-amt { margin-top: 5px; padding: 4px 12px; }
html[data-shape="dock"] .tip-scan { margin-top: 10px; padding-top: 8px; }
html[data-shape="dock"] .tip-scan-hint { margin-bottom: 6px; font-size: 0.82rem; }
html[data-shape="dock"] .tip-qr svg { width: 84px; }
html[data-shape="phone"] .tip-card { display: block; padding: 18px 16px; }
html[data-shape="phone"] .tip-ways { grid-template-columns: 1fr; gap: 8px; }
html[data-shape="phone"] .tip-way { padding: 10px 14px; grid-template-columns: 1fr auto; text-align: left; align-items: center; }
html[data-shape="phone"] .tip-way-name { grid-column: 1; }
html[data-shape="phone"] .tip-way-to { grid-column: 1; }
html[data-shape="phone"] .tip-way-amt { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
html[data-shape="phone"] .tip-qr svg { width: 96px; }

/* ---------- bursts ---------- */

.burst-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}

.burst-bit {
  position: fixed;
  left: 0;
  top: 0;
  line-height: 1;
  font-family: var(--emoji);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  animation: burst-fly 1.4s cubic-bezier(0.12, 0.7, 0.2, 1) 40ms both;
  will-change: transform, opacity;
}

.burst-huge { z-index: 51; }

@keyframes burst-fly {
  0% {
    transform: translate(-50%, -50%) scale(calc(var(--s, 1) * 0.4));
    opacity: 0;
  }
  7% { opacity: 1; }
  18% {
    transform: translate(calc(-50% + var(--dx) * 0.22), calc(-50% + var(--dy) * 0.22)) rotate(calc(var(--rot) * 0.2)) scale(var(--s, 1));
    opacity: 1;
  }
  78% { opacity: 1; }
  to {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(var(--s-end, 0.9));
    opacity: 0;
  }
}

/* ---------- bingo ---------- */

.bingo-board {
  display: grid;
  grid-template-columns: repeat(4, var(--cell-w, 40px));
  grid-auto-rows: var(--cell-h, 40px);
  gap: 8px;
  justify-content: center;
  align-content: center;
  min-height: 0;
}

.bingo-duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-height: 0;
}

.bingo-duel .bingo-board.left { border-radius: 24px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 45%, transparent); padding: 8px; }
.bingo-duel .bingo-board.right { border-radius: 24px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 45%, transparent); padding: 8px; }

.bingo-cell {
  position: relative;
  border-radius: 18px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 2px;
  padding: 6px 6px 8px;
  min-height: 0;
  min-width: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
  transition: transform 0.2s var(--ease);
}

.bingo-cell:active { transform: scale(0.95); }

.bingo-cell .ico {
  font-size: calc(var(--cell-w, 40px) * 0.5);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}

.bingo-cell .cap {
  font-size: clamp(9px, calc(var(--cell-w, 40px) * 0.105), 18px);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bingo-duel .bingo-cell { padding: 4px 4px 6px; gap: 1px; }
.bingo-duel .bingo-cell .ico { font-size: calc(var(--cell-w, 40px) * 0.54); }
.bingo-duel .bingo-cell .cap {
  font-size: clamp(9px, calc(var(--cell-w, 40px) * 0.135), 24px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.pill.seat-left { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 70%, transparent); }
.pill.seat-right { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 70%, transparent); }

.link-toggle { gap: 6px; padding: 0 12px; color: var(--muted); }
.link-toggle[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--gold) 30%, var(--glass)); }
.link-toggle .link-ico { font-family: var(--emoji); font-size: 1.1em; line-height: 1; }
.link-toggle[aria-pressed="false"] .link-ico { filter: grayscale(1); opacity: 0.6; }

.chip-red {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 42%),
    radial-gradient(circle, rgba(232, 40, 60, 0.62), rgba(180, 20, 40, 0.72));
  box-shadow: 0 8px 18px rgba(120, 0, 20, 0.35), inset 0 -4px 10px rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  opacity: 0;
  transform: scale(1.6) translateY(-30%);
  pointer-events: none;
  transition: transform 0.32s var(--ease), opacity 0.2s;
}

.bingo-cell.marked .chip-red { opacity: 1; transform: none; }
.bingo-cell.marked { cursor: default; }

/* ---------- plate collector ---------- */

.lp-board {
  --lp-gap: 10px;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  padding: 6px;
  gap: var(--lp-gap);
}

.lp-rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lp-gap);
  width: calc(var(--cols, 10) * var(--cell-w, 40px) + (var(--cols, 10) - 1) * var(--lp-gap));
  max-width: 100%;
}

.lp-cell {
  flex: 0 0 var(--cell-w, 40px);
  width: var(--cell-w, 40px);
  height: var(--cell-h, 40px);
}

.lp-cell {
  flex: 0 0 var(--cell-w, 40px);
  width: var(--cell-w, 40px);
  height: var(--cell-h, 40px);
}

.lp-cell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 0.35s var(--ease), filter 0.3s;
  transform: scale(0.94);
  filter: saturate(0.4) brightness(0.72);
  z-index: 1;
}

.lp-plate {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 0;
  border-radius: 8%/16%;
  overflow: hidden;
}

.lp-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.55), inset 0 -2px 4px rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(5, 8, 20, 0.28), rgba(5, 8, 20, 0.12));
  pointer-events: none;
  transition: opacity 0.3s;
}

.plate-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lp-cell.got {
  transform: scale(1.08) translateY(-2%);
  filter: none;
  z-index: 3;
}

.lp-cell.got .lp-plate::after { opacity: 0; }

.lp-cell.got .lp-plate {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--gold),
    0 14px 26px rgba(0, 0, 0, 0.4);
  animation: pop-out 0.5s var(--ease);
}

@keyframes pop-out {
  0% { transform: scale(0.94); }
  55% { transform: scale(1.12); }
  100% { transform: none; }
}

/* ---------- punch ---------- */

.punch-title {
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  letter-spacing: -0.03em;
}

.punch-board {
  display: grid;
  grid-template-columns: repeat(3, var(--cell-w, 40px));
  grid-auto-rows: var(--cell-h, 40px);
  gap: 12px;
  justify-content: center;
  align-content: center;
  min-height: 0;
}

.punch-cell {
  position: relative;
  border-radius: 24px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 4px;
  padding: 8px 10px 12px;
  min-height: 0;
  min-width: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, 0.38), transparent 70%),
    var(--glass);
  transition: transform 0.16s var(--ease), filter 0.3s, box-shadow 0.3s;
}

.punch-cell:active { transform: scale(0.92); }

.punch-cell .ico {
  font-size: calc(var(--cell-w, 40px) * 0.46);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s var(--ease), filter 0.3s;
}

.punch-cell .cap {
  font-size: clamp(0.8rem, calc(var(--cell-w, 40px) * 0.1), 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.punch-cell.out {
  cursor: default;
  transform: scale(0.94);
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(0, 0, 0, 0.2), transparent 70%),
    color-mix(in srgb, #000 22%, var(--glass));
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.5), inset 0 -2px 0 rgba(255, 255, 255, 0.2);
  animation: punched 0.45s var(--ease);
}

.punch-cell.out .ico { filter: grayscale(0.7) brightness(0.7); transform: scale(0.88); }
.punch-cell.out .cap { opacity: 0.55; }

@keyframes punched {
  0% { transform: scale(1); }
  30% { transform: scale(0.86) rotate(-2deg); }
  60% { transform: scale(0.97) rotate(1.5deg); }
  100% { transform: scale(0.94); }
}

.fx-fist {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
  font-family: var(--emoji);
  font-size: calc(var(--cell-w, 40px) * 0.62);
  line-height: 1;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
  animation: slam 0.42s var(--ease);
}

@keyframes slam {
  0% { transform: scale(2.4) rotate(-20deg); opacity: 0; }
  55% { transform: scale(0.9) rotate(4deg); opacity: 1; }
  100% { transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- i spy ---------- */

.spy-board {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 0;
  padding-bottom: 4px;
}

.spy-side {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  min-height: 0;
  align-items: stretch;
}

.spy-hit {
  width: clamp(120px, 21vw, 320px);
  min-height: 0;
  border: 0;
  border-radius: 28px;
  color: inherit;
  font: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.14s var(--ease), filter 0.2s;
}

.spy-hit:active { transform: scale(0.94); filter: brightness(1.15); }
.spy-hit.left { background: linear-gradient(180deg, color-mix(in srgb, var(--left) 55%, #fff), color-mix(in srgb, var(--left) 30%, var(--glass))); }
.spy-hit.right { background: linear-gradient(180deg, color-mix(in srgb, var(--right) 55%, #fff), color-mix(in srgb, var(--right) 30%, var(--glass))); }

.spy-hit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1;
  margin: -39% 0 0 -39%;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.5);
  animation: pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.35; }
  50% { transform: scale(1.06); opacity: 0.85; }
}

.bullseye {
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.35));
}

.thermo {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  width: 46px;
  min-height: 0;
  --fill: var(--left);
}

.thermo.right { --fill: var(--right); }

.thermo .tube {
  position: relative;
  width: 22px;
  height: 100%;
  min-height: 0;
  border-radius: 999px 999px 0 0;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  border-bottom: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.thermo .tube::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, 0.35) calc(10% - 1px) 10%);
  pointer-events: none;
  z-index: 2;
}

.thermo .tube b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--p, 0) * 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fill) 70%, #fff), var(--fill));
  box-shadow: 0 0 16px color-mix(in srgb, var(--fill) 70%, transparent);
  transition: height 0.45s var(--ease);
}

.thermo .bulb {
  width: 42px;
  height: 42px;
  margin-top: -4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fill) 60%, #fff), var(--fill) 70%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--fill) 45%, transparent), inset 0 -3px 8px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.spy-stage {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 18px;
  min-height: 0;
  border-radius: 28px;
  gap: 8px;
  animation: rise 0.35s var(--ease);
}

.spy-ico {
  font-size: clamp(4.5rem, 24vh, 11rem);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.35));
}

.spy-stage h2 {
  margin: 0;
  font-size: clamp(1.6rem, 4.2vw, 3.4rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

/* ---------- oregon trail ---------- */

.trail-help {
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: left;
  max-width: 62ch;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.trail-board {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr;
  gap: 12px;
  min-height: 0;
}

.trail-side {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
}

.trail-side.left { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 40%, transparent); }
.trail-side.right { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 40%, transparent); }

.trail-side .pen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.trail-side .pen::after { content: ""; }

.herd-count {
  position: relative;
  z-index: 1;
  font-size: clamp(2.4rem, 8vh, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  text-align: center;
  padding-top: 8px;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.herd-count.left { color: var(--left); }
.herd-count.right { color: var(--right); }
.herd-count.bump { animation: bump 0.4s var(--ease); }

@keyframes bump {
  30% { transform: scale(1.18); }
}

.calc {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  padding: 0 10px 10px;
}

.calc-title {
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--muted);
  transition: color 0.2s;
}

.calc.neg .calc-title { color: #ff5a6a; }

.stock-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.stock-btn {
  border: 0;
  color: inherit;
  font: inherit;
  border-radius: 16px;
  min-height: 64px;
  display: grid;
  grid-template-rows: auto 1fr;
  place-items: center;
  padding: 4px 2px 6px;
  cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, #7ef0c3 45%, var(--glass)), var(--glass-2));
  transition: transform 0.16s var(--ease), background 0.25s;
}

.stock-btn:active { transform: scale(0.92); }

.stock-btn em {
  font-style: normal;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--plus);
  transition: color 0.2s;
}

.stock-btn span {
  font-size: clamp(1.6rem, 3.4vh, 2.3rem);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.calc.neg .stock-btn { background: linear-gradient(180deg, color-mix(in srgb, #ff4d5e 55%, var(--glass)), color-mix(in srgb, #ff4d5e 20%, var(--glass-2))); }
.calc.neg .stock-btn em { color: #ffd0d4; }

.calc-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.calc-key {
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 800;
  font-size: 1.15rem;
  min-height: 44px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.14s var(--ease), background 0.2s;
}

.calc-key:active { transform: scale(0.94); }
.calc-key.sign { font-size: 1.4rem; }
.calc-key.sign.on { background: color-mix(in srgb, var(--ink) 18%, var(--glass)); box-shadow: inset 0 0 0 2px var(--stroke); }
.calc.neg .calc-key { background: color-mix(in srgb, #ff4d5e 22%, var(--glass)); }
.calc.neg .calc-key.sign.on { background: color-mix(in srgb, #ff4d5e 60%, var(--glass)); }

.trail-mid {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  padding: 4px 0;
}

.trail-events {
  display: grid;
  grid-template-columns: repeat(3, var(--cell-w, 40px));
  grid-auto-rows: var(--cell-h, 40px);
  gap: 8px;
  justify-content: center;
  align-content: start;
  min-height: 0;
  height: clamp(72px, 16vh, 150px);
}

.grave-btn,
.bridge-btn {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 22px;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  font-size: calc(var(--cell-w, 40px) * 0.58);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
  transition: transform 0.16s var(--ease);
}

.grave-btn:active,
.bridge-btn:active { transform: scale(0.92); }

.bridge-btn { background: linear-gradient(180deg, color-mix(in srgb, #4aa3ff 55%, var(--glass)), color-mix(in srgb, #4aa3ff 25%, var(--glass-2))); }
.grave-btn { background: linear-gradient(180deg, color-mix(in srgb, #3a3a4a 55%, var(--glass)), color-mix(in srgb, #1b1b1b 45%, var(--glass-2))); }

.trail-road {
  position: relative;
  min-height: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #000 18%, transparent);
  width: 34px;
  justify-self: center;
  overflow: hidden;
}

.trail-road::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--gold) 0 22px, transparent 22px 44px);
  opacity: 0.7;
  animation: road 1.6s linear infinite;
}

@keyframes road {
  to { transform: translate(-50%, 44px); }
}

/* ---------- responsive shapes ---------- */

/* Phone portrait only. Do not use a 900px width query: Tesla shared
   windows are often ~773×601 and must keep two-column cabin layouts. */
@media (max-width: 560px) and (orientation: portrait) {
  .chrome { grid-template-columns: 1fr auto; }
  .names { grid-column: 1 / -1; }
}

html[data-shape="phone"] .chrome {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand theme"
    "names names";
  gap: 6px;
}
html[data-shape="phone"] .brand { grid-area: brand; }
html[data-shape="phone"] .names { grid-column: auto; grid-area: names; }
html[data-shape="phone"] .chrome-right { grid-area: theme; justify-self: end; }
html[data-shape="phone"] .theme-cycle,
html[data-shape="phone"] .tip-btn { min-width: 0; padding: 0 12px; min-height: 40px; }
html[data-shape="phone"] .theme-word,
html[data-shape="phone"] .tip-word,
html[data-shape="phone"] .link-word { display: none; }
html[data-shape="phone"] .link-toggle { padding: 0 8px; }
html[data-shape="phone"] .brand p { display: none; }
html[data-shape="phone"] .brand h1 { font-size: 1.05rem; }
html[data-shape="phone"] .logo { width: 32px; height: 32px; border-radius: 10px; }
html[data-shape="phone"] .game-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
html[data-shape="phone"] .game-btn { border-radius: 18px; padding: 8px; }
html[data-shape="phone"] .game-btn .game-ico { font-size: clamp(2rem, 7vh, 3.4rem); }
html[data-shape="phone"] .game-btn h3 { font-size: 0.8rem; }
html[data-shape="phone"] .modes { grid-template-columns: repeat(var(--cols, 3), var(--cell-w)); gap: 10px; }
html[data-shape="phone"] .find-board { grid-template-columns: 1fr; }
html[data-shape="phone"] .side-col { display: none; }
html[data-shape="phone"] .tile.claimed-left,
html[data-shape="phone"] .tile.claimed-right { width: 100%; transform: none; }
html[data-shape="phone"] .bingo-duel { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
html[data-shape="phone"] .spy-board { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
html[data-shape="phone"] .spy-board .spy-stage { grid-column: 1 / -1; order: -1; overflow: hidden; padding: 10px; }
html[data-shape="phone"] .spy-ico { font-size: clamp(3.5rem, 16vh, 8rem); }
html[data-shape="phone"] .spy-stage h2 { font-size: clamp(1.4rem, 6vw, 2.2rem); }
html[data-shape="phone"] .spy-side { grid-template-rows: 1fr; height: 24vh; grid-template-columns: minmax(0, 1fr) auto; }
html[data-shape="phone"] .spy-side.right { grid-template-columns: auto minmax(0, 1fr); }
html[data-shape="phone"] .spy-hit { width: auto; }
html[data-shape="phone"] .bullseye { font-size: 3.2rem; }
html[data-shape="phone"] .trail-board { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; gap: 8px; }
html[data-shape="phone"] .trail-help { display: none; }
html[data-shape="phone"] .trail-road { display: none; }
html[data-shape="phone"] .trail-events { height: 56px; }
html[data-shape="phone"] .trail-side { gap: 4px; }
html[data-shape="phone"] .herd-count { font-size: 2rem; padding-top: 4px; }
html[data-shape="phone"] .calc { gap: 4px; padding: 0 6px 6px; }
html[data-shape="phone"] .calc-title { font-size: 0.65rem; }
html[data-shape="phone"] .stock-btn { min-height: 48px; }
html[data-shape="phone"] .stock-btn span { font-size: 1.5rem; }
html[data-shape="phone"] .calc-pad { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
html[data-shape="phone"] .calc-key { min-height: 38px; font-size: 1rem; }
html[data-shape="phone"] .play-top { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
html[data-shape="phone"] .play-top .tiny { padding: 0 10px; font-size: 0.85rem; }
html[data-shape="phone"] .top-center { gap: 6px; font-size: 0.9rem; }
html[data-shape="phone"] .punch-title { font-size: 1rem; }
html[data-shape="phone"] .count-pill { display: none; }
html[data-shape="phone"] .look-switch button { min-width: 0; padding: 0 10px; font-size: 0.85rem; }
html[data-shape="phone"] .mode-label { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; }
html[data-shape="phone"] .lp-board { --lp-gap: 4px; padding: 0; }

html[data-shape="dock"] .chrome { gap: 6px; }
html[data-shape="dock"] .brand p { display: none; }
html[data-shape="dock"] .trail-help { display: none; }

html[data-shape="share"] .trail-help { font-size: 0.72rem; -webkit-line-clamp: 2; }
html[data-shape="share"] .trail-board { grid-template-columns: 1fr 0.7fr 1fr; }
html[data-shape="share"] .spy-hit { width: clamp(80px, 13vw, 140px); }

html[data-short] { --pad: 6px; }
html[data-short] .app { padding: 6px 8px 8px; gap: 6px; }
html[data-short] .logo { width: 32px; height: 32px; border-radius: 10px; }
html[data-short] .brand h1 { font-size: 1rem; }
html[data-short] .brand p { display: none; }
html[data-short] .pill,
html[data-short] .name-edit { min-height: 40px; }
html[data-short] .name-edit { min-width: 96px; padding: 0 10px; }
html[data-short] .look-switch button { min-width: 52px; min-height: 36px; padding: 0 10px; }
html[data-short] .theme-cycle,
html[data-shape="dock"] .tip-btn { min-width: 0; min-height: 36px; padding: 0 10px; }
html[data-short] .theme-word { display: none; }
html[data-short] .screen { padding: 8px; border-radius: 18px; }
html[data-short] .play,
html[data-short] .setup { gap: 6px; }
html[data-short] .game-grid { gap: 8px; }
html[data-short] .game-btn { padding: 6px 8px 8px; border-radius: 18px; }
html[data-short] .game-btn .game-ico { font-size: clamp(1.6rem, 9vh, 3.6rem); }
html[data-short] .game-btn h3 { font-size: clamp(0.8rem, 1.6vw, 1.1rem); }
html[data-short] .modes { gap: 10px; padding: 4px; }
html[data-short] .mode-card { border-radius: 20px; padding: 8px; }
html[data-short] .tile { border-radius: 16px; column-gap: 8px; padding: 2px 10px 2px 4px; }
html[data-short] .tiles { gap: 5px; padding: 2px 0; }
html[data-short] .find-board { --gap: 8px; }
html[data-short] .herd-count { font-size: clamp(1.8rem, 6vh, 3rem); padding-top: 4px; }
html[data-short] .stock-btn { min-height: 48px; border-radius: 12px; }
html[data-short] .stock-btn span { font-size: 1.4rem; }
html[data-short] .stock-btn em { font-size: 0.8rem; }
html[data-short] .calc-key { min-height: 34px; font-size: 1rem; border-radius: 10px; }
html[data-short] .calc { gap: 4px; padding: 0 6px 6px; }
html[data-short] .calc-title { font-size: 0.7rem; }
html[data-short] .trail-events { height: clamp(56px, 15vh, 96px); }
html[data-short] .lp-board { --lp-gap: 5px; padding: 2px; }
html[data-short] .bingo-board { gap: 5px; }
html[data-short] .punch-board { gap: 8px; }
html[data-short] .play-top { gap: 6px; min-height: 36px; }
html[data-short] .tiny { min-height: 36px; }
html[data-short] .count-pill { min-height: 36px; padding: 0 10px; font-size: 0.85rem; }
html[data-short] .win-card h2 { font-size: 1.8rem; }
html[data-short] .score-big { font-size: clamp(1.8rem, 7vh, 3rem); }
html[data-short] .thermo { width: 34px; }
html[data-short] .thermo .bulb { width: 34px; height: 34px; font-size: 0.95rem; }
html[data-short] .thermo .tube { width: 16px; }
html[data-short] .spy-board { gap: 8px; }
html[data-short] .spy-side { gap: 6px; }
html[data-short] .spy-stage { padding: 8px; gap: 2px; }
html[data-short] .letter-stage { gap: 10px; padding: 2px; }
html[data-short] .trail-help { display: none; }