/* Rezzie Cards! — the shell.
 *
 * A glowing reef: deep water, light shafts, drifting bubbles, and card faces
 * drawn by cards.js. Everything numeric lives in a custom property at the top
 * so the whole look scales from a 320px phone to a laptop without a media
 * query cascade.
 */

:root {
  /* one place for the palette — mirrors cards.js PALETTE */
  --deep: #04121f;
  --deep-2: #071d30;
  --shade: #0a2740;
  --cyan: #22d3ee;
  --green: #4ade80;
  --pink: #f472b6;
  --gold: #ffd166;
  --violet: #a855f7;
  --ink: #eaf7ff;
  --ink-dim: #8fb4cb;
  --panel: rgba(8, 34, 54, 0.72);
  --panel-edge: rgba(34, 211, 238, 0.35);
  --gap: 8px;
  --radius: 16px;
  /* your reef's cell size — fitBoards() measures it, so the table is one
   * screen on a phone; these defaults are what a first paint uses. */
  --cols: 3;
  --cell-w: 76px;
  --cell-h: 106px;
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", "Nunito", "Trebuchet MS", "DejaVu Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--deep);
  color: var(--ink);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(120% 80% at 50% -10%, #0d3d61 0%, rgba(7, 29, 48, 0) 60%),
    linear-gradient(180deg, #072031 0%, var(--deep) 55%, #020a13 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ------------------------------------------------------------- the water */
.sea { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ray {
  position: absolute; top: -30%; left: 12%; width: 26%; height: 150%;
  background: linear-gradient(180deg, rgba(122, 226, 255, 0.14), rgba(122, 226, 255, 0));
  transform: rotate(14deg);
  filter: blur(6px);
  animation: sweep 14s ease-in-out infinite alternate;
}
.ray.r2 { left: 52%; width: 16%; opacity: 0.7; animation-duration: 19s; }
.ray.r3 { left: 78%; width: 12%; opacity: 0.5; animation-duration: 24s; }
@keyframes sweep { from { transform: rotate(10deg) translateX(-14px); } to { transform: rotate(18deg) translateX(18px); } }

.drift {
  position: absolute; bottom: -40px; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(180, 240, 255, 0.35);
  background: radial-gradient(circle at 35% 30%, rgba(220, 250, 255, 0.5), rgba(220, 250, 255, 0.06));
  animation: rise linear infinite;
}
.drift.d1 { left: 8%;  animation-duration: 17s; animation-delay: 0s; }
.drift.d2 { left: 26%; animation-duration: 23s; animation-delay: 3s; width: 9px; height: 9px; }
.drift.d3 { left: 44%; animation-duration: 19s; animation-delay: 7s; }
.drift.d4 { left: 63%; animation-duration: 27s; animation-delay: 1s; width: 20px; height: 20px; }
.drift.d5 { left: 79%; animation-duration: 21s; animation-delay: 9s; width: 11px; height: 11px; }
.drift.d6 { left: 91%; animation-duration: 25s; animation-delay: 5s; }
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translateY(-105vh) translateX(18px); opacity: 0; }
}

/* ------------------------------------------------------------- screens */
.screen { position: relative; z-index: 1; }
.screen[hidden] { display: none; }

/* --------------------------------------------------------------- the home */
.screen-home {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px 32px;
}
.home-card {
  width: min(520px, 100%);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 22px;
  padding: 22px 20px 18px;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.12) inset, 0 22px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(34, 211, 238, 0.12);
  backdrop-filter: blur(6px);
}
.home-art { display: flex; justify-content: center; }
.home-art svg { width: min(190px, 46vw); height: auto; }
.home-title {
  margin: 4px 0 8px; text-align: center; font-size: clamp(30px, 8vw, 42px);
  letter-spacing: 0.5px; line-height: 1.05;
  background: linear-gradient(180deg, #eafcff 0%, var(--cyan) 60%, var(--green) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 26px rgba(34, 211, 238, 0.28);
}
.home-title em { font-style: normal; color: var(--pink); -webkit-text-fill-color: var(--pink); }
.home-blurb { margin: 0 0 16px; text-align: center; color: var(--ink-dim); font-size: 14px; line-height: 1.5; }
.home-field { margin-bottom: 14px; }
.field-label { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  flex: 1 1 auto; min-width: 120px; cursor: pointer;
  background: rgba(6, 28, 45, 0.85); color: var(--ink);
  border: 1px solid rgba(122, 226, 255, 0.28); border-radius: 12px;
  padding: 9px 10px; font: inherit; font-size: 13.5px; text-align: center;
  transition: transform 120ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.pill i { display: block; font-style: normal; font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.pill.is-on {
  border-color: var(--green); color: #eafff4;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35), 0 0 22px rgba(74, 222, 128, 0.22);
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.16), rgba(6, 28, 45, 0.9));
}
.pill:active { transform: scale(0.97); }
.cta {
  width: 100%; cursor: pointer; font: inherit; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; font-size: 15px; color: #04121f;
  background: linear-gradient(180deg, #9ff2d0 0%, var(--green) 45%, #2fae61 100%);
  border: 0; border-radius: 14px; padding: 14px 18px; margin-top: 6px;
  box-shadow: 0 6px 0 #1c7a44, 0 0 30px rgba(74, 222, 128, 0.3);
  transition: transform 90ms ease, box-shadow 120ms ease;
}
.cta:active { transform: translateY(3px); box-shadow: 0 3px 0 #1c7a44; }
.ghost {
  width: 100%; margin-top: 8px; cursor: pointer; font: inherit; font-size: 13px;
  background: transparent; color: var(--ink-dim); border: 1px solid rgba(122, 226, 255, 0.25);
  border-radius: 12px; padding: 10px;
}
.home-foot { margin: 12px 0 0; text-align: center; font-size: 11.5px; color: rgba(143, 180, 203, 0.8); }

/* ------------------------------------------------------- the Delgotchis */
.pets {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 6px; padding: 5px; max-height: 156px; overflow-y: auto;
  background: rgba(3, 15, 26, 0.55);
  border: 1px solid rgba(34, 211, 238, 0.22); border-radius: 12px;
}
.pet-option {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px; font: inherit; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.pet-option img { display: block; width: 44px; height: 44px; border-radius: 8px; object-fit: contain; }
.pet-option .pet-label {
  font-size: 9px; letter-spacing: 0.4px; color: var(--ink-dim);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pet-option[data-on="1"] {
  border-color: var(--green);
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.14), rgba(6, 28, 45, 0.9));
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35), 0 0 18px rgba(74, 222, 128, 0.22);
}
.pet-option[data-on="1"] .pet-label { color: var(--ink); }
.pet-option:active { transform: scale(0.97); }
.pets-empty { font-size: 11.5px; color: var(--ink-dim); }

/* ----------------------------------------------------------------- the game
 * The table is a column of bands: the opponent's identity and their reef,
 * then yours (the big one), then your hand, then the bar that says what to
 * do. It is one screen by construction — your grid is measured from the
 * height the other bands leave behind (fitBoards() in src/game.js), so no
 * band ever pushes another off a phone.
 */
.screen-game {
  padding: 8px 8px 0; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--gap);
  /* A DEFINITE height, not just a min-height: with an auto height the flex
   * container grows to its content, flex-grow never applies, and the table
   * scrolls past the fold — which is exactly what the phone probe caught.
   * Definite height + the measured cell size is what makes it one screen. */
  height: 100vh; height: 100dvh; max-height: 100dvh; overflow-y: auto;
}

/* ------------------------------------------------- who is at the table */
.ident { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar {
  flex: 0 0 auto; display: block; width: clamp(42px, 12.5vw, 60px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; border: 1px solid var(--panel-edge);
  background: radial-gradient(circle at 38% 28%, rgba(122, 226, 255, 0.24), rgba(4, 18, 31, 0.92));
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.16) inset;
}
.avatar svg, .avatar img { display: block; width: 100%; height: 100%; }
.avatar img { object-fit: contain; }
.ident-text { display: flex; flex-direction: column; min-width: 0; }
.id-name {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-dim);
  max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.band.is-active .id-name { color: var(--green); }
.id-score {
  font-size: 21px; font-weight: 700; line-height: 1.05;
  color: var(--cyan); text-shadow: 0 0 14px rgba(34, 211, 238, 0.5);
}
.id-score.pulse { animation: scorePulse 700ms ease-out; }
@keyframes scorePulse {
  0% { transform: scale(1); color: var(--cyan); }
  35% { transform: scale(1.35); color: var(--gold); text-shadow: 0 0 26px rgba(255, 209, 102, 0.8); }
  100% { transform: scale(1); color: var(--cyan); }
}

/* ------------------------------------------------------- the opponent's band */
.band { position: relative; }
.band-foe {
  display: grid; align-items: center; gap: 8px 10px;
  grid-template-columns: 1fr auto;
  grid-template-areas: "who meta" "reef reef";
}
.band-foe .ident { grid-area: who; }
.band-foe .meta { grid-area: meta; display: flex; align-items: center; gap: 12px; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pile-stack { width: clamp(26px, 7vw, 38px); }
.pile-stack svg { display: block; width: 100%; height: auto; }
.pile-count { font-size: 14px; font-weight: 700; color: var(--gold); line-height: 1; }
.pile-label { font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); }
.turnbox { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fish-icon { width: 40px; height: 26px; overflow: visible; }
.fish-icon .ficon-body { fill: #ef4a2f; }
.fish-icon .ficon-tail, .fish-icon .ficon-fin { fill: #a8240f; }
.fish-icon .ficon-eye { fill: #fff; }
.fish-icon.swim { animation: swim 1.6s ease-in-out infinite; }
@keyframes swim { 0%, 100% { transform: translateX(-5px) rotate(-3deg); } 50% { transform: translateX(5px) rotate(3deg); } }
.clock { font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--ink); }
.clock.low { color: var(--pink); }
.turn-name { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }

/* ------------------------------------------------- the two draw piles
 * In the middle of the table, between the two reefs: the number cards you stack
 * and the assist cards you spend. Two piles, two counts. */
.piles {
  display: flex; align-items: flex-start; justify-content: center; gap: 22px;
  padding: 2px 0 0;
}
.piles .pile { gap: 1px; }
.piles .pile-stack { width: clamp(24px, 6.5vw, 32px); }
.piles .pile-count { font-size: 15px; }
.piles .pile-label { font-size: 8px; letter-spacing: 1.1px; }
.piles .pile-assist .rz-back-pip { fill: rgba(255, 143, 209, 0.85); }
.piles .pile-assist .rz-card-back { filter: drop-shadow(0 0 8px rgba(255, 143, 209, 0.28)); }

.handrow {
  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
  min-height: clamp(96px, 26vw, 128px);
}
.handrow .hand { min-height: 0; }
.hand-split {
  align-self: stretch; width: 1px; margin: 6px 2px 10px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 0.45), rgba(255, 143, 209, 0));
}
.assistslot { gap: 8px; align-items: flex-end; }
.assist-card svg { box-shadow: 0 0 0 1px rgba(255, 143, 209, 0.35); border-radius: 10px; }
.assist-card.is-on { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(255, 209, 102, 0.5); }

/* ---------------------------------------------------------------- the boards */
.board {
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: var(--radius); padding: 6px; position: relative;
}
.board.is-active { border-color: var(--green); box-shadow: 0 0 26px rgba(74, 222, 128, 0.22); }
.board-me { border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 0 22px rgba(74, 222, 128, 0.14); }
.band-foe .board-foe { grid-area: reef; justify-self: center; padding: 5px; }
.grid {
  display: grid; gap: 5px; justify-content: center;
  grid-template-columns: repeat(var(--cols, 3), var(--cell-w, 1fr));
}
.board-me .slot { width: var(--cell-w); height: var(--cell-h); aspect-ratio: auto; }
.band-foe .grid-mini {
  --mini: clamp(32px, 9vw, 44px);
  gap: 4px; grid-template-columns: repeat(var(--cols, 3), var(--mini));
}
.grid-mini .slot {
  width: var(--mini); height: var(--mini); aspect-ratio: auto; border-radius: 8px;
}
.grid-mini .slot .stack-badge { font-size: 9px; right: 1px; top: 1px; border-radius: 5px; padding: 0 3px; }
.grid-mini .slot .shield-badge { font-size: 9px; left: 1px; top: 1px; }
.grid-mini .slot .progress { left: 2px; right: 2px; bottom: 2px; height: 2px; }

/* ---------------------------------------------------------- your own band */
.band-me {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ident-me { position: absolute; right: 8px; bottom: 8px; flex-direction: row-reverse; }
.ident-me .id-name { max-width: 30vw; }

/* ------------------------------------------------------------------- a slot */
.slot {
  position: relative; aspect-ratio: 5 / 7; border-radius: 9px;
  background: rgba(3, 15, 26, 0.6);
  border: 1px solid rgba(122, 226, 255, 0.16);
  cursor: default; padding: 0; overflow: hidden;
  transition: box-shadow 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.slot svg { display: block; width: 100%; height: 100%; border-radius: 8px; }
.slot.ghost-1::before, .slot.ghost-2::before {
  content: ""; position: absolute; inset: 2px 3px -5px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(74, 158, 230, 0.35), rgba(27, 74, 128, 0.4));
  border: 1px solid rgba(168, 85, 247, 0.5); z-index: 0;
}
.slot.ghost-2::after {
  content: ""; position: absolute; inset: 4px 6px -9px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(74, 158, 230, 0.22), rgba(27, 74, 128, 0.3));
  border: 1px solid rgba(168, 85, 247, 0.35); z-index: -1;
}
.slot .stack-badge {
  position: absolute; right: 3px; top: 3px; z-index: 3;
  background: rgba(3, 20, 33, 0.86); border: 1px solid rgba(122, 226, 255, 0.5);
  border-radius: 7px; font-size: 10px; font-weight: 700; padding: 0 4px; color: var(--ink);
}
.slot .shield-badge { position: absolute; left: 3px; top: 3px; z-index: 3; font-size: 11px; line-height: 1; }
.slot .progress {
  position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px; z-index: 3;
  border-radius: 3px; background: rgba(3, 20, 33, 0.7); overflow: hidden;
}
.slot .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); }
.slot.is-target {
  cursor: pointer; border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.55), 0 0 22px rgba(74, 222, 128, 0.4);
  animation: breathe 1.5s ease-in-out infinite;
}
.slot.is-target:hover { transform: translateY(-2px); }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.45), 0 0 14px rgba(74, 222, 128, 0.28); } 50% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.8), 0 0 26px rgba(74, 222, 128, 0.5); } }
.slot.is-picked { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.7), 0 0 24px rgba(255, 209, 102, 0.4); }
.slot.just-cleared { animation: clearPop 620ms ease-out; }
@keyframes clearPop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.9); }
  40% { transform: scale(1.14); box-shadow: 0 0 0 10px rgba(255, 209, 102, 0); }
  100% { transform: scale(1); }
}
.slot.just-merged { animation: mergeGlow 620ms ease-out; }
@keyframes mergeGlow { 0% { box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.7); } 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); } }

/* ------------------------------------------------------------- your hand */
.hand {
  display: flex; gap: 10px; justify-content: center; align-items: flex-end;
  min-height: clamp(96px, 26vw, 128px);
}
.hand-card {
  position: relative; width: clamp(66px, 19vw, 92px); cursor: pointer; padding: 0;
  background: none; border: 0; border-radius: 10px; overflow: hidden;
  transition: transform 140ms ease, box-shadow 140ms ease;
  animation: bubbleIn 320ms ease-out both;
}
.hand-card svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.hand-card:nth-child(2) { animation-delay: 70ms; }
@keyframes bubbleIn {
  from { transform: translateY(14px) scale(0.82); opacity: 0; }
  60% { transform: translateY(-3px) scale(1.04); opacity: 1; }
  to { transform: none; opacity: 1; }
}
.hand-card.is-on { transform: translateY(-7px); box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(255, 209, 102, 0.5); }
.hand-card.is-dead { opacity: 0.45; }

/* --------------------------------------- the bar that stays at the foot */
.actionbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding: 8px 2px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--panel-edge);
  background: linear-gradient(180deg, rgba(4, 18, 31, 0.62), rgba(4, 18, 31, 0.95));
  backdrop-filter: blur(6px);
}
.prompt { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.42; }
.prompt .entry { display: block; }
.prompt .entry:first-child { color: var(--ink); }
.prompt .entry + .entry, .prompt .hintline { color: var(--ink-dim); font-size: 11.5px; }
.prompt .entry.chain { color: var(--gold); font-weight: 700; }
.controls { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.controls button {
  cursor: pointer; font: inherit; font-size: 12.5px; letter-spacing: 0.5px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(122, 226, 255, 0.22), rgba(6, 28, 45, 0.9));
  color: var(--ink); border: 1px solid var(--cyan); border-radius: 10px; padding: 11px 15px;
}
.controls button.wide { background: linear-gradient(180deg, var(--cyan), #1a8fa8); color: #04121f; font-weight: 700; }
.controls .hintline { font-size: 10.5px; color: var(--ink-dim); }

.toast {
  position: fixed; left: 50%; top: 32%; transform: translate(-50%, -50%) scale(0.7);
  z-index: 30; pointer-events: none; opacity: 0;
  font-size: clamp(26px, 9vw, 48px); font-weight: 800; letter-spacing: 2px;
  color: var(--gold); text-shadow: 0 0 22px rgba(255, 209, 102, 0.75), 0 4px 0 rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
}
.toast.show { animation: toastPop 1100ms ease-out both; }
@keyframes toastPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1); }
}

/* ----------------------------------------------------------------- overlay */
.overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 10, 19, 0.78); padding: 18px; backdrop-filter: blur(3px);
}
.overlay[hidden] { display: none; }
.overlay-card {
  width: min(420px, 100%); text-align: center;
  background: var(--panel); border: 1px solid var(--green); border-radius: 20px;
  padding: 22px 18px; box-shadow: 0 0 50px rgba(74, 222, 128, 0.22);
  animation: bubbleIn 340ms ease-out both;
}
.overlay-card h2 { margin: 0 0 6px; font-size: clamp(22px, 6vw, 30px); color: var(--green); }
.over-scores { margin: 0; font-size: 17px; color: var(--ink); }
.over-note { margin: 8px 0 14px; font-size: 12.5px; color: var(--ink-dim); }

@media (min-width: 720px) {
  :root { --gap: 12px; --cell-h: 118px; }
  .screen-game { padding: 14px 14px 0; }
  .hand { min-height: 132px; }
  /* a laptop has width and no height to spare, so the opponent's reef sits
   * beside their name instead of under it and the table gets the difference */
  .band-foe { grid-template-columns: auto auto 1fr; grid-template-areas: "who reef meta"; }
  .band-foe .board-foe { justify-self: start; }
  .band-foe .meta { justify-self: end; }
  .band-foe .grid-mini { --mini: 46px; }
  .board-me { padding: 10px; }
  .prompt { font-size: 13.5px; }
}
@media (max-height: 760px) {
  /* A short window is a laptop or a phone turned sideways: the home card would
   * run past the fold and hide the button that starts the game, so the art and
   * the pet grid give the height back. Everything stays reachable with no
   * scrolling — the one screen the player must not have to hunt through. */
  .screen-home { min-height: 0; padding: 10px 14px 14px; }
  .home-card { padding: 12px 16px 12px; border-radius: 18px; }
  .home-art svg { width: min(112px, 26vw); }
  .home-title { font-size: clamp(24px, 5vw, 32px); margin: 2px 0 4px; }
  .home-blurb { font-size: 12.5px; line-height: 1.4; margin-bottom: 10px; }
  .home-field { margin-bottom: 9px; }
  .pets { max-height: 104px; }
  .home-foot { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ray, .drift, .fish-icon.swim, .slot.is-target { animation: none !important; }
  .hand-card { animation-duration: 1ms; }
}

/* ==========================================================================
   The character — every class web/src/cards.js draws.
   This block is the ONLY styling the sprite has: a class missing here is a
   part that renders black-on-black (the fish) or not at all (the outline).
   Colours follow the character's own references: translucent blue body, a
   white inner line with a violet rim outside it, a lime face panel, one red
   reef fish with a bubble.
   ========================================================================== */
.rz-sprite { pointer-events: none; }
.rz-shell { stroke: none; }
.rz-outline { stroke: #7c5cd6; stroke-width: 6; stroke-linejoin: round; }
.rz-inner { stroke: rgba(255, 255, 255, .88); stroke-width: 3.2; stroke-linejoin: round; }
.rz-drip { fill: rgba(122, 200, 255, .62); }
.rz-band { fill: rgba(122, 200, 255, .26); }
.rz-panel { stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; }
.rz-spot { fill: rgba(38, 84, 40, .4); }

.rz-eye { fill: #10302a; }
.rz-eye-line { fill: none; stroke: #10302a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rz-glint { fill: #fff; }
.rz-brow { fill: none; stroke: #10302a; stroke-width: 2.4; stroke-linecap: round; }
.rz-mouth { fill: none; stroke: #10302a; stroke-width: 2.6; stroke-linecap: round; }
.rz-mouth-thin { stroke-width: 1.8; }
.rz-mouth-fill { fill: #10302a; }
.rz-tongue { fill: #ff7b8a; }
.rz-tear { fill: #8fd8ff; opacity: .92; }
.rz-star { fill: #ffd166; }
.rz-sweat { fill: #8fd8ff; }
.rz-zzz text { fill: #cfeaff; font: 700 8px/1 system-ui, sans-serif; }

.rz-fish-body { fill: #ef4a2f; }
.rz-fish-tail { fill: #cf3a1f; }
.rz-fish-fin { fill: none; stroke: #ffd166; stroke-width: 2.6; stroke-linecap: round; }
.rz-fish-eye { fill: #fff; stroke: #7a1a0c; stroke-width: .7; }
.rz-bubble { fill: none; stroke: rgba(190, 235, 255, .85); stroke-width: 1.3; }

.rz-anem-one { fill: rgba(255, 143, 171, .8); }
.rz-anem-two { fill: rgba(255, 184, 205, .8); }
.rz-anem-three { fill: rgba(214, 110, 150, .8); }
.rz-coral-branches path { fill: none; stroke: #34d399; stroke-width: 2.6; stroke-linecap: round; }
.rz-vortex { fill: none; stroke: rgba(123, 220, 255, .5); stroke-width: 2.4; }
.rz-shard { fill: none; stroke: rgba(196, 240, 255, .8); stroke-width: 1.6; }

.rz-card { display: block; width: 100%; height: auto; }
.rz-frame { fill: none; stroke-width: 2; }
.rz-frame-inner { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.rz-chip-text { fill: #eaf6ff; font: 700 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.rz-name { fill: #dff0ff; font: 700 14px/1 system-ui, sans-serif; }
.rz-ability { fill: rgba(200, 230, 255, .72); font: 500 10.5px/1 system-ui, sans-serif; }
.rz-tag { fill: rgba(180, 215, 240, .6); font: 700 13px/1 system-ui, sans-serif; letter-spacing: 1px; }
.rz-back-pip { fill: rgba(34, 211, 238, .22); stroke: rgba(34, 211, 238, .5); stroke-width: 1; }


/* ==========================================================================
   REVISION 2 — the shared board (see docs/REVISION-2-BRIEF.md)
   Eight teacups in a 3x3 whose centre holds the two piles. One board, one
   score board, one hand. Everything below overrides the two-reef rules above
   by source order; the v1 selectors stay because the character art block at
   the bottom of this file is shared by both revisions.
   ========================================================================== */

.band-foe {
  grid-template-columns: 1fr auto;
  grid-template-areas: "who meta" "played played";
}
.band-foe .played { grid-area: played; }

.handcount {
  font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--ink-dim); white-space: nowrap;
}

/* their last five resolved assists — the window Mewoster reaches into */
.played { display: flex; gap: 4px; align-items: center; min-height: 20px; }
.played .strip-card { width: 15px; height: 21px; opacity: 0.85; }
.played .strip-key {
  font-size: 8.5px; letter-spacing: 0.5px; text-transform: uppercase;
  color: rgba(143, 180, 203, 0.9); border: 1px solid rgba(122, 226, 255, 0.25);
  border-radius: 5px; padding: 1px 4px; white-space: nowrap;
}
.played .strip-empty { font-size: 10px; color: rgba(143, 180, 203, 0.6); }

/* ------------------------------------------------------------- the board */
.board-shared {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 8px;
  border-color: rgba(74, 222, 128, 0.42);
  box-shadow: 0 0 26px rgba(74, 222, 128, 0.12);
}
.grid-board {
  display: grid; gap: 6px;
  grid-template-columns: repeat(3, var(--cell-w, 84px));
  grid-template-rows: repeat(3, var(--cell-h, 84px));
  justify-content: center; align-content: center;
}
.board-note {
  margin: 0; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-dim);
}

/* a cup: the colour of the cup is the multiplier, so it is the whole cell */
.cup {
  position: relative; padding: 0; cursor: default; overflow: hidden;
  background: rgba(3, 15, 26, 0.62);
  border: 2px solid rgba(122, 226, 255, 0.2); border-radius: 12px;
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 130ms ease;
}
.cup svg { display: block; width: 100%; height: 100%; }
.cup[data-filled="1"] { border-color: rgba(122, 226, 255, 0.4); }
.cup[data-color="red"] { border-color: rgba(255, 111, 90, 0.55); }
.cup[data-color="blue"] { border-color: rgba(90, 169, 255, 0.55); }
.cup[data-color="green"] { border-color: rgba(139, 212, 79, 0.55); }
.cup[data-color="pink"] { border-color: rgba(255, 122, 201, 0.55); }
.cup[data-color="white"] { border-color: rgba(230, 243, 255, 0.6); }
.cup[data-mult="2"] { box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.55), 0 0 18px rgba(255, 209, 102, 0.28); }
.cup[data-mult="0"][data-filled="1"] { opacity: 0.72; }
.cup.is-target {
  cursor: pointer; border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.6), 0 0 22px rgba(74, 222, 128, 0.42);
  animation: breathe 1.5s ease-in-out infinite;
}
.cup.is-target:hover { transform: translateY(-2px); }
.cup.is-picked { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.7); }
.cup.just-placed { animation: clearPop 620ms ease-out; }
.cup.just-hit { animation: mergeGlow 620ms ease-out; }
.cup .cup-tag {
  position: absolute; left: 4px; bottom: 3px; z-index: 3;
  font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(234, 247, 255, 0.92); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.cup .cup-worth {
  position: absolute; right: 4px; top: 3px; z-index: 3;
  font-size: 11px; font-weight: 800; color: var(--gold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.cup .cup-worth.is-zero { color: rgba(180, 215, 240, 0.6); font-weight: 600; }

/* the middle of the board: the two piles, side by side and counted */
.centre {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(3, 15, 26, 0.35); border: 1px dashed rgba(122, 226, 255, 0.22);
  border-radius: 12px; padding: 2px;
}
.centre .pile-stack { width: clamp(20px, 5vw, 30px); }
.centre .pile-count { font-size: 13px; }
.centre .pile-label { font-size: 7px; letter-spacing: 0.8px; }
.centre .pile-assist .rz-back-pip { fill: rgba(255, 143, 209, 0.8); }

/* the phase, and whatever is currently eating your next turn */
.phase {
  font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(255, 209, 102, 0.4);
  border-radius: 8px; padding: 3px 7px; white-space: nowrap;
}
.phase[data-phase="assist"] { color: var(--pink); border-color: rgba(255, 143, 209, 0.5); }
.phase[data-phase="number"] { color: var(--green); border-color: rgba(74, 222, 128, 0.5); }
.mods { display: flex; gap: 5px; }
.mods .mod {
  font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--pink); border: 1px solid rgba(255, 143, 209, 0.45);
  border-radius: 6px; padding: 1px 5px;
}

/* the hand holds both kinds now: numbers first, assists beside them */
.hand { flex-wrap: wrap; gap: 8px; align-content: flex-end; justify-content: flex-start; }
.hand-card { width: clamp(56px, 15vw, 76px); }
.hand-card.is-picking { box-shadow: 0 0 0 2px var(--pink), 0 0 20px rgba(255, 143, 209, 0.45); }
.hand-card[data-kind="num"] .rz-chip-text { font-size: 20px; }
.assistslot { justify-content: flex-start; }
.assist-card { width: clamp(56px, 15vw, 76px); }

/* the interrupts */
.react-card { border-color: var(--pink); box-shadow: 0 0 50px rgba(255, 143, 209, 0.28); }
.react-card h2 { color: var(--pink); }
.react-row { display: flex; justify-content: center; margin: 6px 0 12px; }
.react-row svg { width: 104px; height: auto; }
.wide-controls { justify-content: center; }
.peek-row { display: flex; gap: 10px; justify-content: center; margin: 10px 0 4px; flex-wrap: wrap; }
.peek-row button {
  width: 84px; padding: 0; background: none; border: 0; cursor: pointer;
  border-radius: 10px; transition: transform 130ms ease, box-shadow 130ms ease;
}
.peek-row button:hover { transform: translateY(-3px); }
.peek-row button svg { display: block; width: 100%; height: auto; border-radius: 10px; }

/* the fish clock is decoration in revision 2: the turn is not on a timer */
.turnbox .clock { display: none; }
.turnbox { align-items: flex-start; }

@media (min-width: 720px) {
  .band-foe { grid-template-columns: auto 1fr auto; grid-template-areas: "who played meta"; }
  .band-foe .played { justify-content: flex-start; }
  .grid-board { gap: 8px; }
}

@media (max-height: 760px) {
  /* a laptop or a phone on its side: the board is what must survive */
  .grid-board { gap: 4px; }
  .board-shared { padding: 5px; gap: 3px; }
  .hand-card, .assist-card { width: clamp(48px, 12vw, 62px); }
  .handrow { min-height: 72px; }
  .hand { min-height: 0; }
  .board-note { display: none; }
}

/* A face that could not be drawn still says what the card is — a dialog a
   player is looking at must never render blank. */
.card-fallback {
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink, #eaf6ff);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
}

/* A big screen: the table is still ONE column read top to bottom, but a desktop
   has width the phone does not, so the column earns a wider cap — the bands, the
   hand and the bar spread into it while the board hugs its 3x3 (a board stretched
   to a wide box would pillarbox dead space inside its own glow). The cell size
   itself is height-limited, and fitBoards() raises its ceiling when there is room. */
@media (min-width: 1000px) and (min-height: 780px) {
  .screen-game { max-width: 1040px; }
  .handrow { justify-content: center; gap: 14px; }
  .actionbar { justify-content: center; }
  .band-foe, .band-me { padding-inline: 16px; }
}

/* The player's own band is a BAND in revision 2, not a corner label: the v1 rule
   absolutely positioned its identity in the corner of the old board, which flies
   the portrait off to the right of a wide window and reads as unanchored. */
.band-me {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-inline: 10px;
}
.band-me .ident-me { position: static; flex-direction: row; }
.band-me .ident-me .id-name { max-width: 46vw; }
.band-me .mods { display: flex; gap: 6px; margin-left: auto; }

/* ==========================================================================
   REVISION 3 — the tilted tray, cards that can be read, and the examine view
   Darren: "these cards are not legible on mobile at all i need the exact format
   of the reference photo like 3d pov with your character to the bottom right.
   also make it so that when you tap on a card you can examine it closer so it
   takes up the whole screen and you can choose whether to put it back in hand or
   to confirm the use."
   ========================================================================== */

/* ------------------------------------------------------ type that survives
   A face is 200 view units wide and lands in a ~124px hand card, so the old
   10.5–14px type was being drawn at 6–9px: mud. These are the sizes that hold
   up, and the words themselves live on the big card in the examine view. */
.rz-name-lg { font-size: 21px; letter-spacing: 0.4px; }
.rz-mult { fill: rgba(228, 247, 255, 0.97); font: 800 21px/1 var(--font); letter-spacing: 1px; }
.rz-mult-soft { fill: rgba(203, 228, 246, 0.9); font-size: 18px; letter-spacing: 0.6px; }
.rz-ability-lg { fill: rgba(216, 239, 255, 0.95); font: 600 16px/1 var(--font); }

/* --------------------------------------------------------- the 3D point of view
   The board is a table seen from where the player sits: the near edge is larger,
   the far edge recedes. Hit-testing still lands on the right cell, because the
   browser transforms the pointer with the plane. */
.board-shared {
  perspective: 1200px; perspective-origin: 50% 92%;
  border-color: rgba(74, 222, 128, 0.5);
}
.grid-board {
  transform: rotateX(19deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.42);
}
.board-note { padding-right: 96px; }

/* ----------------------------------------------- who sits where at the table
   The other seat watches from the far corner; YOU sit at the near-right corner
   over the tray's own edge, your score on the band above you. The identity is a
   LABEL, not a control: pointer-events are off so a cup underneath keeps every
   pixel of its tap. */
.band-foe .ident,
.band-me .ident {
  position: absolute; z-index: 4; pointer-events: none;
  padding: 3px 9px 3px 4px; border-radius: 14px;
  background: rgba(4, 18, 31, 0.74); border: 1px solid var(--panel-edge);
  backdrop-filter: blur(2px);
}
.band-foe .ident { left: 2px; top: 2px; }
.band-me { position: relative; }
.band-me .ident {
  right: 2px; top: -52px; flex-direction: row-reverse;
  border-color: rgba(74, 222, 128, 0.55); box-shadow: 0 0 22px rgba(74, 222, 128, 0.2);
}
.ident .avatar { width: clamp(40px, 11.5vw, 58px); }
.ident .id-name { font-size: clamp(12px, 3.4vw, 14px); }
.ident .id-score { font-size: clamp(17px, 4.6vw, 20px); }

/* ------------------------------------------------------------ cards you can read
   The hand is a scroller, not a squeeze: at 124–168px a face is legible, and the
   row slides when there are ten of them. */
.handrow { min-height: clamp(148px, 40vw, 208px); align-items: flex-end; gap: 8px; }
.hand, .assistslot {
  flex-wrap: nowrap; align-items: flex-end; gap: 8px;
  overflow-x: auto; overflow-y: hidden; min-width: 0; min-height: 0;
  padding: 4px 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hand { flex: 1 1 auto; justify-content: flex-start; }
.assistslot { flex: 0 0 auto; justify-content: flex-end; }
.hand::-webkit-scrollbar, .assistslot::-webkit-scrollbar { display: none; }
.hand-card, .assist-card {
  flex: 0 0 auto; width: var(--hand-w, clamp(124px, 32vw, 168px));
  border-radius: 14px;
}
.hand-card svg { border-radius: 14px; }

/* --------------------------------------------------------- piles you can count
   The middle of the table is where the clock is read, so it is readable. */
.centre { gap: 7px; }
.centre .pile-stack { width: clamp(44px, 12.5vw, 58px); }
.centre .pile-count { font-size: clamp(19px, 5.4vw, 22px); }
.centre .pile-label { font-size: 9.5px; letter-spacing: 1.2px; }

/* ------------------------------------------------------------- the examine view
   Tap a card and it takes the screen: the card, the numbers the ENGINE says it
   is worth, the rule in words, and two buttons. */
.overlay.zoom { padding: 0; background: rgba(2, 10, 19, 0.95); }
.zoom-stage {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 13px; text-align: center;
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));
}
.zoom-art { width: min(72vw, 320px); max-height: 44vh; display: flex; justify-content: center; }
.zoom-art svg {
  width: 100%; height: auto; border-radius: 18px;
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.55));
}
.zoom-text { display: flex; flex-direction: column; gap: 8px; align-items: center; max-width: 32rem; }
.zoom-name { margin: 0; font-size: clamp(24px, 7.5vw, 34px); color: var(--green); }
.zoom-preview { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.zoom-preview .pv {
  font-size: clamp(13px, 3.8vw, 15px); font-weight: 700; color: var(--ink);
  border: 1px solid var(--panel-edge); border-radius: 999px; padding: 5px 12px;
  background: rgba(8, 34, 54, 0.66);
}
.zoom-preview .pv.is-zero { color: var(--ink-dim); border-color: rgba(143, 180, 203, 0.25); }
.zoom-rule { margin: 0; font-size: clamp(15px, 4.4vw, 18px); color: var(--ink); }
.zoom-actions { display: flex; gap: 12px; width: min(100%, 30rem); margin-top: 2px; }
.zoom-actions .cta, .zoom-actions .ghost { margin-top: 0; flex: 1 1 0; }
.zoom-actions .cta[disabled] { opacity: 0.42; box-shadow: none; cursor: default; }
.zoom-why { margin: 0; min-height: 17px; font-size: clamp(12px, 3.4vw, 14px); color: var(--ink-dim); }

/* a wide screen gets a gentler tilt — the same table, seen from further back */
@media (min-width: 760px) {
  .board-shared { perspective: 1500px; }
  .grid-board { transform: rotateX(12deg); }
  .band-me .ident { top: -46px; }
  .handrow { min-height: clamp(170px, 22vh, 230px); }
}

/* ---------------------------------------------- the bar is a bar on a phone
   Side by side, the controls squeezed the prompt into a 20px column of wrapped
   text ~390px tall, which starved the board down to 172px and every cup with it.
   Stacked, the prompt gets the width of the screen and the board gets its room
   back. */
@media (max-width: 719px) {
  .actionbar { flex-direction: column; align-items: stretch; gap: 6px; }
  .prompt { text-align: center; font-size: 13px; line-height: 1.34; }
  .prompt .entry + .entry { font-size: 12px; }
  .controls { justify-content: center; flex-wrap: wrap; }
  .controls button { padding: 12px 14px; }
}

/* -------------------------------------------- the tray, seen from where you sit
   A near-perspective worth the name: the far row of cups is ~a quarter smaller
   than the near one, so the board reads as a table rather than a diagram. */
.board-shared { perspective: 480px; perspective-origin: 50% 100%; }
.grid-board { transform: rotateX(22deg); }
.board-shared, .handrow { max-width: 100%; min-width: 0; overflow: hidden; }
.handrow { overflow: visible; }
@media (min-width: 760px) {
  /* a wide screen needs a tighter eye distance for the same read: at 900px the
     far row was only 7% smaller, which looks like a flat diagram, not a table */
  .board-shared { perspective: 620px; perspective-origin: 50% 104%; }
  .grid-board { transform: rotateX(17deg); }
}

/* ------------------------------------- the plate is the top layer, deliberately
   The board's own `perspective` makes it a stacking context, and it was painting
   over the player's plate: the avatar's head peeked out with the name and score
   hidden behind the tray. The plate is a HUD element and belongs on top of it. */
.band-foe { z-index: 5; overflow: visible; }
/* overflow: visible matters — the band clipped the plate that sits above it,
   which is why the plate's border showed while its name and score did not. */
.band-me { position: relative; z-index: 8; overflow: visible; }
.band-foe .ident, .band-me .ident { z-index: 9; }

/* the player's band, drawn the way the reference draws it: a bold score plate
   that sits over the near-right corner of the table with your character on it */
.band-me .ident {
  padding: 5px 13px 5px 5px; gap: 9px;
  background: linear-gradient(180deg, rgba(6, 27, 44, 0.95), rgba(4, 18, 31, 0.95));
  border: 1.5px solid rgba(74, 222, 128, 0.72);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 20px rgba(74, 222, 128, 0.22);
}
.band-foe .ident {
  background: linear-gradient(180deg, rgba(6, 27, 44, 0.9), rgba(4, 18, 31, 0.9));
  border: 1.5px solid rgba(34, 211, 238, 0.55);
}
.band-me .ident .id-name { font-size: clamp(13px, 3.6vw, 15px); font-weight: 800; letter-spacing: 0.3px; }
.band-me .ident .id-score { font-size: clamp(20px, 5.6vw, 24px); font-weight: 800; line-height: 1; }
.band-foe .ident .id-score { font-size: clamp(18px, 5vw, 22px); font-weight: 800; }