/* Sumasabog na Pusa. All motion lives in src/anim.js (GSAP); CSS only describes states. */

/* Bangers (the "Komiks" pair, Ernest 2026-10-23) is narrower than the Lilita One it replaced: drawn 10%
   bigger everywhere it's used (CSS, the SVG card words, canvas), so the sizes tuned for Lilita still read */
@font-face {
  font-family: "Bangers";
  src: url("fonts/bangers-latin.woff2") format("woff2");
  font-display: swap;
  size-adjust: 110%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bangers";
  src: url("fonts/bangers-latin-ext.woff2") format("woff2");
  font-display: swap;
  size-adjust: 110%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-latin.woff2") format("woff2");
  font-weight: 500 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-latin-ext.woff2") format("woff2");
  font-weight: 500 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The classic box's colours: bomb red, black, white and yellow. */
:root {
  --bg: #120b0a;
  --raise: #1f1615;
  --raise-2: #2b1e1c; /* a box inside a panel */
  --line: #b8463a;
  --edge: #4d3531; /* quiet border on menu controls; the picked one turns --accent */
  --text: #fff8ef;
  --muted: #eadbd3;
  --accent: #ffd23f;
  --accent-ink: #2b1a12;
  --red: #d8261f;
  --nope: #c81e1e;
  --ink: #2b1a12;
  --sky: #7cc8f2; /* Mga Reward */
  --scrim: rgba(14, 8, 7, .62); /* the backdrop's dark layer; tools/backdrop-contrast.mjs assumes this */
  --plate: rgba(14, 8, 7, .35); /* the soft backing of a label that sits on a painted table; the same tool checks it */
  --display: "Bangers", "Impact", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --cw: clamp(64px, 17.5vw, 104px); /* hand card width */
  --radius: 12px;
  /* film grain, like the paintings': on the card faces and over the table */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: hidden; }
#app { position: relative; z-index: 1; overflow-x: clip; }
body {
  margin: 0;
  /* dark, with a faint warm glow behind the logo (a full red screen was hard on the eyes); the game screen covers it with a backdrop */
  background: radial-gradient(90% 60% at 50% 18%, #3a1512 0%, #1e1110 45%, var(--bg) 100%) fixed, var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 500;
  font-synthesis-weight: none; /* Bangers has one weight: a bold one would be smeared, not drawn */
  font-size: 16px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
svg { display: block; }

/* ---------- backdrop: a table scene behind the game, with a dark layer so the text stays readable ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.bd-surface { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-prop { position: absolute; }
.bd-prop svg { width: 100%; height: auto; }
.bd-prop.wide svg { height: 100%; }
.bd-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* fx.js's two Pixi canvases: the painted table that ripples and twists (under the dark layer), and the
   light, fire and sparks over the table (#fx; over the result pop-up while the win's confetti falls) */
.backdrop canvas, .fx > canvas, .fx-confetti-layer > canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Lit like a lamp hangs over the table: darker towards the edges, and grain over all of it.
   Nothing here is lighter than --scrim, so tools/backdrop-contrast.mjs holds everywhere. */
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    var(--grain) 0 0 / 120px,
    radial-gradient(ellipse 85% 80% at 50% 50%, transparent 30%, rgba(14, 8, 7, .62)),
    var(--scrim);
}
/* A painted table's dark layer only keeps 3:1 (large text and icons), so the paintings show more (Ernest,
   2026-10-21). The small labels that sit straight on it bring their own soft backing for 4.5:1. */
.turn-chip, .seat-name, .seat-rank, .me-name, .me-rank, .me-count, .pile-label {
  background: var(--plate); box-shadow: 0 0 8px 4px var(--plate); border-radius: 999px;
}

.screen { min-height: 100dvh; width: 100%; max-width: 1040px; margin-inline: auto; padding: 0 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px 22px; border-radius: 999px;
  border: 3px solid var(--ink); font-family: var(--display); font-size: 1.15rem; letter-spacing: .05em;
  white-space: nowrap; line-height: 1.1;
}
.btn .nw { white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 0 var(--ink); }
.btn-primary:hover { background: #ffdf6b; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--muted); }
.btn-ghost:hover { background: rgba(255, 246, 229, .08); }
.btn-action { background: #fff6e5; color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.btn-action:hover { background: #ffffff; }
.btn-nope { background: var(--nope); color: #fff; box-shadow: 0 5px 0 var(--ink); font-size: 1.6rem; min-height: 60px; padding-inline: 30px; }
.btn-big { min-height: 58px; font-size: 1.7rem; padding-inline: 40px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
  background: rgba(18, 11, 10, .72); border: 2px solid rgba(255, 248, 239, .2); color: var(--text);
}
.icon-btn:hover { background: var(--bg); border-color: rgba(255, 248, 239, .45); }
.icon-btn svg { width: 22px; height: 22px; }
.menu-settings { position: absolute; z-index: 30; top: max(12px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }

/* ---------- start screen ---------- */
/* Two views (index.html): the title screen ("hub") and the picked mode's setup panel. */
.start { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 72px; padding-bottom: 28px; text-align: center; }
.start[data-view="hub"] .setup,
.start[data-view="setup"] :is(.hub, .player-chip, .fineprint) { display: none; }
/* phones and tablets: the setup panel alone, from the top (the title screen has the logo) */
@media (max-width: 1023px), (max-height: 639px) {
  .start[data-view="setup"] { justify-content: flex-start; padding-top: 68px; }
  .start[data-view="setup"] .start-brand { display: none; }
}

/* A painted table behind the menu, dimmed well past the game's own layer: the menu's small text sits
   straight on it (the lightest scene colour, #f4d2b2, comes out near #3c2f28 under it). */
.menu-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg) var(--menu-tall, none) center / cover no-repeat; }
@media (orientation: landscape) { .menu-bg { background-image: var(--menu-wide, none); } }
.menu-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 50% 30%, rgba(90, 26, 20, .5), transparent 75%),
    radial-gradient(120% 90% at 50% 40%, rgba(14, 8, 7, .74), rgba(14, 8, 7, .93) 70%);
}

/* the profile, top left (the gear is top right) */
.player-chip {
  position: absolute; z-index: 30; top: max(12px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: calc(100vw - 96px); padding: 4px 16px 4px 5px;
  border-radius: 999px; background: rgba(18, 11, 10, .72); border: 2px solid rgba(255, 248, 239, .2); color: var(--text); font-weight: 800;
}
.player-chip:hover { background: var(--bg); border-color: rgba(255, 248, 239, .45); }
.player-chip > svg { flex: none; width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.player-chip .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-chip .rank-badge { flex: none; }

.start-brand { position: relative; display: flex; flex-direction: column; align-items: center; }
/* comic-book rays behind the cat; anim.js menuRays() turns them slowly */
.start-rays {
  position: absolute; z-index: -1; left: 50%; top: 0; width: 640px; aspect-ratio: 1; margin: -230px 0 0 -320px; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 210, 63, .13) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%); mask: radial-gradient(closest-side, #000 20%, transparent 100%);
  will-change: transform;
}
.start-art {
  position: relative; width: clamp(110px, min(40vw, 21vh), 180px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 5px solid var(--ink); box-shadow: 0 0 0 6px var(--accent), 0 0 0 10px var(--ink), 0 18px 40px rgba(0, 0, 0, .6);
}
.start-art svg, .start-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The wordmark: a big yellow SUMASABOG with a red-and-ink drop, and "NA PUSA" on a red comic caption band. */
.logo { position: relative; display: flex; flex-direction: column; align-items: center; margin: -16px 0 6px; font-family: var(--display); font-weight: 400; line-height: 1.05; }
.logo-top {
  display: block; font-size: clamp(3.3rem, 17vw, 5.6rem); letter-spacing: .03em; color: var(--accent); transform: rotate(-3deg);
  -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--red), 7px 9px 0 var(--ink);
}
.logo-band {
  display: block; margin-top: -2px; padding: .06em .55em .1em; font-size: clamp(1.6rem, 8vw, 2.5rem); letter-spacing: .1em; color: #fff;
  background: var(--red); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 0 5px 0 var(--ink); transform: rotate(-3deg) skewX(-8deg);
}
.tagline { margin: 14px 0 0; color: var(--text); font-size: 1.1rem; font-weight: 800; }

/* the two ways to play, big; the leaderboard and the rules under them */
.hub { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 390px; margin-top: 24px; }
.hub-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 10px 20px 10px 16px; text-align: left;
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink), 0 14px 28px rgba(0, 0, 0, .45);
}
.hub-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink), 0 8px 18px rgba(0, 0, 0, .45); }
.hub-icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: rgba(43, 26, 18, .14); }
.hub-icon svg { width: 32px; height: 32px; }
.hub-text { display: flex; flex-direction: column; min-width: 0; }
.hub-text b { font-family: var(--display); font-weight: 400; font-size: 1.85rem; line-height: 1.05; letter-spacing: .04em; }
.hub-text small { font-size: .92rem; font-weight: 700; line-height: 1.25; }
.hub-solo { background: var(--accent); color: var(--accent-ink); }
.hub-solo:hover { background: #ffdf6b; }
/* text on the bomb red is pure white (5:1); hover goes darker, never lighter */
.hub-online { background: var(--red); color: #fff; }
.hub-online:hover { background: #bd1f19; }
.hub-online .hub-icon { background: rgba(255, 255, 255, .16); }
/* Mga Reward: light blue (Ernest, 2026-10-24) with the ink text (8:1) */
.hub-rewards { background: var(--sky); color: var(--ink); }
.hub-rewards:hover { background: #9ad6f7; }
.hub-word { white-space: nowrap; } /* "ma-u-unlock" never breaks at its hyphens */
.hub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hub-mini {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 6px 10px; border-radius: 14px;
  background: rgba(31, 22, 21, .88); border: 2px solid var(--edge); color: var(--text);
  font-family: var(--display); font-size: 1.25rem; letter-spacing: .04em; white-space: nowrap;
}
.hub-mini:hover { border-color: var(--accent); background: var(--raise-2); }
.hub-mini svg { width: 22px; height: 22px; color: var(--accent); }
.hub .btn-install { justify-self: center; }
/* phones on their side: the logo on the left, the menu on the right */
@media (orientation: landscape) and (max-height: 639px) {
  .start[data-view="hub"] { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 6vw; padding-top: 56px; }
  .start[data-view="hub"] .start-art { width: clamp(80px, 24vh, 130px); }
  .start[data-view="hub"] .logo-top { font-size: clamp(2.6rem, 14vh, 4rem); }
  .start[data-view="hub"] .logo-band { font-size: clamp(1.3rem, 7vh, 1.9rem); }
  .start[data-view="hub"] .tagline { font-size: 1rem; margin-top: 10px; }
  .start[data-view="hub"] .hub { width: min(360px, 46vw); margin-top: 0; gap: 10px; }
  .start[data-view="hub"] .hub-btn { min-height: 62px; padding-block: 6px; }
  .start[data-view="hub"] .hub-mini { min-height: 46px; font-size: 1.1rem; }
  .start[data-view="hub"] .hub-mini svg { display: none; }
  .start[data-view="hub"] .fineprint { flex-basis: 100%; margin-top: 14px; }
}
/* a small phone on its side (667×375): a closer gap and a slimmer menu keep the logo beside it, not over it */
@media (orientation: landscape) and (max-height: 639px) and (max-width: 739px) {
  .start[data-view="hub"] { column-gap: 3vw; }
  .start[data-view="hub"] .hub { width: 44vw; }
}
/* narrow phones: "Paano maglaro?" only fits its half without the icon */
@media (max-width: 389px) { .hub-mini svg { display: none; } }
/* short phones (360×640, 375×667): a smaller cat and buttons, so the whole menu shows without scrolling */
@media (max-width: 1023px) and (max-height: 700px) {
  .start { padding-top: 64px; }
  .start-art { width: clamp(90px, 16vh, 120px); }
  .logo { margin-top: -12px; }
  .tagline { margin-top: 8px; font-size: 1rem; }
  .hub { margin-top: 14px; gap: 10px; }
  .hub-btn { min-height: 64px; padding-block: 6px; }
  .hub-icon { width: 42px; height: 42px; }
  .hub-text b { font-size: 1.6rem; }
  .hub-mini { min-height: 48px; }
}

/* the setup panel's head: back to the title screen, and the mode's name */
.setup-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.setup-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1.05; letter-spacing: .05em; color: var(--accent); }
.setup-title:focus { outline: none; }
.setup-back { background: var(--raise-2); }
.setup {
  width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 12px; align-items: stretch;
  background: var(--raise); border: 2px solid #3a2a27; border-radius: 22px; padding: 18px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
/* the start panel's own width decides two-up rows and tiles, not the window's (the lobby's tiles sit in a narrow column, so it stays out) */
#setup { container: setup / inline-size; }
.field { border: 0; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-weight: 700; color: var(--muted); padding: 0; font-size: .95rem; }
.field-row { display: grid; gap: 12px; }
.field input[type="text"] {
  min-height: 48px; border-radius: 12px; border: 2px solid var(--edge); background: var(--bg); padding: 8px 14px; font-size: 1.05rem;
}
.field input[type="text"]:focus { border-color: var(--accent); }
.field input[type="text"]::placeholder { color: #b3a39c; }
.seg { display: flex; gap: 6px; background: var(--bg); border: 2px solid var(--edge); border-radius: 14px; padding: 4px; }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 42px; border-radius: 10px; font-weight: 700; white-space: nowrap; padding: 0 6px; }
.seg input:checked + span { background: var(--accent); color: var(--accent-ink); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.setup .btn-primary { margin-top: 6px; }
.fineprint { color: var(--muted); font-size: .9rem; margin-top: 18px; max-width: 440px; }
.mode-fields { display: flex; flex-direction: column; gap: 12px; }
.seg-mode span { min-height: 46px; font-family: var(--display); font-weight: 400; font-size: 1.1rem; letter-spacing: .02em; }
.online-note { margin: 2px 0 0; color: var(--muted); text-align: left; }
.or { display: flex; align-items: center; gap: 10px; margin: 4px 0 -2px; color: var(--muted); font-weight: 700; font-size: .95rem; }
.or::before, .or::after { content: ""; flex: 1; height: 2px; background: #3a2a27; }
.join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.field input.code-input { font-family: var(--display); font-size: 1.5rem; letter-spacing: .3em; text-transform: uppercase; padding-block: 4px; }
.field input.code-input::placeholder { letter-spacing: .3em; color: #8f7f78; }
.form-msg { margin: 0; min-height: 1.4em; color: var(--accent); font-weight: 700; }
.form-msg:empty { display: none; }

/* ---------- online lobby ---------- */
/* Like the title screen (Ernest, 2026-10-23: "more professional"): the painted table behind it (.menu-bg),
   a head with the way out, then three panels. Phones stack them: the code, the players with Simulan, the
   settings. Desktop puts them side by side (below). */
.lobby.screen { max-width: 1360px; display: flex; flex-direction: column; gap: 14px; padding-block: max(12px, env(safe-area-inset-top)) 28px; }
.lobby-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 44px; }
.lobby-leave {
  justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 16px 4px 8px; border-radius: 999px;
  background: rgba(18, 11, 10, .72); border: 2px solid rgba(255, 248, 239, .2); color: var(--text);
  font-family: var(--display); font-size: 1.2rem; letter-spacing: .05em; padding-right: calc(16px + .16em);
}
.lobby-leave:hover { background: var(--bg); border-color: rgba(255, 248, 239, .45); }
.lobby-leave svg { width: 22px; height: 22px; }
.lobby-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 6vw, 2.3rem); line-height: 1.05; letter-spacing: .05em; color: var(--accent); white-space: nowrap; }
/* beside the gear, which sits in the window's corner: clear of it until the page is wide enough */
.lobby-help { justify-self: end; margin-right: clamp(0px, 796px - 50vw, 54px); }

.lobby-grid { display: grid; gap: 14px; width: 100%; max-width: 520px; margin-inline: auto; }
.lobby-panel {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border-radius: 22px;
  background: rgba(31, 22, 21, .92); border: 2px solid #3a2a27; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.lobby-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.lobby-head { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.55rem; line-height: 1.05; letter-spacing: .05em; color: var(--accent); }
.lobby-head span { color: var(--muted); font-family: var(--body); font-weight: 800; font-size: 1rem; letter-spacing: 0; }

/* the room code: big, with the share buttons and the QR */
.lobby-room { align-items: center; text-align: center; }
.lobby-kicker { margin: 0; color: var(--muted); font-weight: 800; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
.room-code {
  margin: -6px 0 0; font-family: var(--display); font-size: clamp(3rem, 14vw, 4.6rem); line-height: 1.05; letter-spacing: .14em; padding-left: .14em;
  color: var(--accent); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink);
}
.lobby-note { margin: 0; color: var(--muted); font-size: .92rem; }
.lobby-share { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.lobby-share .btn { flex: 1 1 0; min-width: max-content; padding-inline: 14px; } /* equal widths; wraps only when they don't fit */
/* the room link as a QR code: dark on white with its quiet zone, which phone cameras read best */
.lobby-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lobby-qr .qr { display: block; width: 168px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 3px var(--ink); }
.lobby-qr svg { display: block; width: 100%; height: 100%; }
.lobby-qr figcaption { color: var(--muted); font-size: .85rem; font-weight: 700; }

/* the players: a tile each, like a character-select screen, and every free chair */
.lobby-add {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 4px 16px 4px 10px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  font-family: var(--display); font-size: 1.2rem; letter-spacing: .05em; padding-right: calc(16px + .16em);
}
.lobby-add:hover { background: #ffdf6b; }
.lobby-add:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.lobby-add svg { width: 20px; height: 20px; }
.lobby-seats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 6px; }
.lobby-seat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 12px 3px 8px;
  border-radius: 14px; background: rgba(18, 11, 10, .8); border: 2px solid var(--edge); text-align: center;
}
.lobby-seat.is-me { border-color: var(--accent); background: rgba(70, 52, 14, .55); }
.lobby-seat .seat-avatar { width: min(100%, 76px); margin-bottom: 4px; }
.lobby-seat.away .seat-avatar { opacity: .45; }
.lobby-name { max-width: 100%; font-weight: 800; font-size: clamp(.78rem, 2.7vw, 1rem); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-tag { color: var(--muted); font-weight: 700; font-size: clamp(.72rem, 2.2vw, .8rem); line-height: 1.2; }
.lobby-tag:empty { display: none; }
.lobby-seat.empty { background: transparent; border-style: dashed; border-color: #4a3733; }
.lobby-seat.empty .seat-avatar { aspect-ratio: 1; width: min(76%, 58px); border-radius: 50%; border: 2px dashed #5a4642; margin-block: 2px 6px; }
.lobby-seat.empty .lobby-name { color: #b3a39c; font-weight: 700; }
/* the host's tag sits on the tile's top edge */
.lobby-host {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%); padding: 1px 8px 0 7px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); border: 2px solid var(--ink);
  font-family: var(--display); font-size: .82rem; line-height: 1.1; letter-spacing: .06em; white-space: nowrap;
}
/* the host takes a bot out with the × in its corner; the touch area reaches 44px past the small dot */
.lobby-kick {
  position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(18, 11, 10, .9); border: 2px solid rgba(255, 248, 239, .35); color: var(--text);
}
.lobby-kick::before { content: ""; position: absolute; inset: -9px; }
.lobby-kick:hover { background: var(--nope); border-color: #fff; }
.lobby-kick svg { width: 14px; height: 14px; }
.lobby-go { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 4px; }
.lobby-wait { margin: 0; color: var(--text); font-weight: 700; text-align: center; }
.lobby-go .btn-big { width: 100%; }
/* the card art under the seats (Ernest, 2026-10-24: "move the card art options here"): a tile per style with its
   bomb card, picked like a seat (the host), or just the table's (everyone else) */
.lobby-art { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 2px solid var(--edge); }
.lobby-art-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.lobby-art-head .field-label { margin: 0; }
.art-picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.art-pick {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 10px 3px 8px;
  border-radius: 14px; background: rgba(18, 11, 10, .8); border: 2px solid var(--edge); text-align: center;
}
label.art-pick { cursor: pointer; }
label.art-pick:hover { border-color: rgba(255, 248, 239, .45); }
.art-pick input { position: absolute; opacity: 0; pointer-events: none; }
.art-pick:has(input:checked), .art-pick.is-on { border-color: var(--accent); background: rgba(70, 52, 14, .55); }
.art-pick:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.art-pick .card { --cw: clamp(48px, 13vw, 76px); margin-bottom: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
.art-pick b { max-width: 100%; font-family: var(--display); font-weight: 400; font-size: clamp(.8rem, 1.85vw, 1.05rem); line-height: 1.1; letter-spacing: .04em; }
.art-pick small { color: var(--muted); font-weight: 700; font-size: clamp(.68rem, 2vw, .78rem); line-height: 1.2; }
/* phones: three a row, so the long names (Mahiwagang Mundo) fit their tile */
@media (max-width: 559px) {
  .art-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .art-pick .card { --cw: clamp(56px, 16vw, 76px); }
  .art-pick small { display: none; }
}

/* the settings: the host's controls, or what the host picked */
.lobby-rules { container: rules / inline-size; text-align: left; }
.host-controls { display: flex; flex-direction: column; gap: 12px; }
.lobby-summary { margin: 0; display: grid; gap: 8px; }
.lobby-summary > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px; border-radius: 12px; background: var(--bg); border: 2px solid var(--edge); }
.lobby-summary dt { color: var(--muted); font-weight: 700; }
.lobby-summary dd { margin: 0; font-weight: 800; text-align: right; }
@container rules (min-width: 420px) {
  .host-controls { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .host-controls > .field:nth-child(n + 3) { grid-column: 1 / -1; }
  .lobby-rules .packs { grid-template-columns: 1fr 1fr; }
  .lobby-rules .pack-body { height: 100%; padding: 10px 36px 10px 12px; }
  .lobby-rules .pack-body::before { left: auto; right: 10px; top: 12px; margin-top: 0; width: 18px; height: 18px; }
  .lobby-rules .pack-body small { font-size: .8rem; }
}
/* phones: the QR beside the code, so the players come up sooner */
@media (max-width: 1023px), (max-height: 639px) {
  .lobby-room {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker qr" "code qr" "share share" "note note";
    align-items: center; column-gap: 12px; row-gap: 8px;
  }
  .lobby-kicker { grid-area: kicker; align-self: end; }
  .room-code { grid-area: code; align-self: start; }
  .lobby-qr { grid-area: qr; }
  .lobby-qr .qr { width: 112px; }
  .lobby-share { grid-area: share; }
  .lobby-share .btn { min-height: 44px; font-size: 1.02rem; padding-inline: 10px; }
  .lobby-note { grid-area: note; }
}
/* narrow phones: the way out is just the arrow and the title sits beside it, so it clears the buttons;
   a free chair is just its dashed circle */
@media (max-width: 479px) {
  .lobby-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lobby-leave { width: 44px; padding: 0; justify-content: center; font-size: 0; }
  .lobby-title { justify-self: start; font-size: clamp(1.4rem, 6.2vw, 1.8rem); }
}
@media (max-width: 399px) { .lobby-seat.empty .lobby-name { display: none; } }
.btn-small { min-height: 44px; padding: 4px 16px; font-size: 1.1rem; border-width: 2px; }

/* connection lost: a small notice at the top until it's back */
.net-note {
  position: fixed; z-index: 60; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); margin: 0;
  max-width: calc(100vw - 32px); padding: 8px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  border: 2px solid var(--ink); font-weight: 800; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); text-align: center;
}

/* ---------- game screen ---------- */
.game { display: grid; grid-template-rows: auto auto 1fr auto auto auto; height: 100dvh; min-height: 560px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.bar { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; }
.bar-right { display: flex; gap: 6px; margin-left: auto; }
/* the quick reactions (online): a box of one-liners dropping from the top bar, over the table */
.emote-panel {
  position: fixed; z-index: 30; top: calc(max(8px, env(safe-area-inset-top)) + 56px); right: max(12px, env(safe-area-inset-right));
  width: min(340px, calc(100vw - 24px)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px;
  background: var(--raise); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.emote-chip {
  min-height: 44px; padding: 6px 10px; border-radius: 999px; border: 2px solid rgba(255, 236, 210, .25);
  background: rgba(255, 246, 229, .08); color: var(--text); font: 800 1rem/1.15 var(--body); cursor: pointer;
}
.emote-chip:hover, .emote-chip:focus-visible { background: #fff6e5; color: var(--ink); border-color: var(--ink); outline: none; }
.emote-chip:active { transform: scale(.96); }
/* Bangers leans right: its last letter's ink overhangs the box, so anything in it that clips (overflow:
   hidden for the ellipsis) keeps .16em on the right or the letter is cut ("Pusakal" read "Pusakai"). */
.turn-chip { margin: 0; padding-right: .16em; font-family: var(--display); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.turn-chip.mine { color: var(--accent); }

/* --cols seats a row; wrapping rows centred, so a shorter last row sits in the middle (Ernest, 2026-10-17) */
.seats {
  --gap: 8px; list-style: none; width: 100%; margin: 0 auto; padding: 6px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
  max-width: calc(var(--cols, 2) * 132px + (var(--cols, 2) - 1) * var(--gap)); /* never more than --cols a row */
}
.seats > .seat { flex: none; width: min(132px, calc((100% - (var(--cols, 2) - 1) * var(--gap)) / var(--cols, 2) - .1px)); }
/* 6 to 9 others (a 7 to 10 player game): two rows of smaller seats */
.seats.many { --gap: 6px; row-gap: 4px; --avw: clamp(36px, 10.5vw, 54px); }
.seats.many .seat { padding: 3px 2px 5px; gap: 0; }
.seats.many .seat-avatar { width: var(--avw); }
.seats.many .seat-name { font-size: .8rem; }
.seats.many .seat-meta { font-size: .74rem; }
.seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 16px; background: rgba(18, 11, 10, .6); border: 2px solid transparent; min-width: 0; }
.seat.turn { border-color: var(--accent); background: rgba(40, 30, 10, .78); }
.seat.out { opacity: .55; }
.seat.away .seat-avatar { opacity: .45; } /* online: their phone lost its connection */
.seat.out .seat-avatar { filter: grayscale(1); }
/* will-change: the pulse (anim.js glow()) changes only its opacity on its own layer; repainting the blurred
   shadow every frame, under a Pixi effect, dropped Sugod! to 30 fps (2026-10-20) */
.seat-glow { position: absolute; inset: -6px; border-radius: 20px; box-shadow: 0 0 22px 4px rgba(255, 210, 63, .55); opacity: 0; pointer-events: none; will-change: opacity; }
.seat-avatar { width: clamp(46px, 13vw, 64px); aspect-ratio: 8 / 7; }
.seat-avatar svg { width: 100%; height: 100%; }
/* painted portraits: a round frame as tall as the box (8:7), so swapping a drawing for a picture moves nothing */
.seat-avatar { display: block; }
.portrait { display: block; width: 87.5%; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--text); background: var(--raise); }
.portrait.out { filter: grayscale(1); }
.seat-name { font-weight: 800; font-size: .92rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-meta { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--muted); white-space: nowrap; }
/* a signed-in player's Barkada rank (src/medals.js) under their name */
.seat-rank, .me-rank { font-size: .7rem; font-weight: 800; color: var(--accent); line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
.seats.many .seat-rank { font-size: .62rem; }
.me-rank { padding: 1px 8px 2px; border-radius: 999px; background: rgba(255, 210, 63, .14); }
.mini-card { width: 11px; height: 15px; border-radius: 3px; background: var(--red); border: 2px solid var(--ink); flex: none; }
.seat-think { position: absolute; top: 2px; right: 6px; font-family: var(--display); color: var(--accent); font-size: 1.1rem; opacity: 0; }
.seat.pickable { border-color: var(--accent); cursor: pointer; }
.seat-hand { display: none; } /* the held fan only shows on the desktop table */

/* No mat under the piles (Ernest, 2026-10-17: the banig came out; the painted tables carry the scene) */
/* Phones and tablets: the table row takes what's left of the screen, and the piles grow into it on a
   tall phone (a container query on the row's height) instead of floating small in an empty middle
   (Ernest, 2026-10-19). --pw is the pile width; the desktop table sets its own --pile-w. */
.table {
  display: flex; align-items: center; justify-content: center; gap: clamp(28px, 8vw, 80px); padding: 8px 0;
  min-height: calc(var(--cw) * 1.61 + 64px); /* the smallest pile plus its labels: size containment would otherwise let the row collapse */
  container-type: size; --note: 0px;
  /* never wider than the row can hold: two piles, the gaps and the Ikot/Higop column when it's shown */
  --pw: clamp(calc(var(--cw) * 1.15), min(31vw, calc((100cqh - 64px) * 5 / 7), calc((100cqw - var(--note) - 2 * clamp(28px, 8vw, 80px)) / 2)), 168px);
}
.table:has(.pile-note:not([hidden])) { --note: 112px; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pile-label { margin: 0; font-size: .85rem; color: var(--muted); white-space: nowrap; text-align: center; }
.pile-label .nowrap { white-space: nowrap; }
.deck, .discard { position: relative; width: var(--pw); aspect-ratio: 5 / 7; border-radius: var(--radius); }
.deck { padding: 0; border: 0; background: none; }
.deck:disabled { cursor: default; }
.deck .card { position: absolute; inset: 0; width: 100%; }
/* will-change: the deck and its three cards each keep a layer, so the Katomik spin, the shuffle and the
   shakes move them rather than repainting the glowing stack every frame (about 200 times a Katomik) */
.deck, .deck .card { will-change: transform; }
.deck .card:nth-child(1) { transform: translate(5px, 5px); }
.deck .card:nth-child(2) { transform: translate(2.5px, 2.5px); }
.deck.can-draw .card:last-child { box-shadow: 0 0 0 4px var(--accent), 0 0 24px 6px rgba(255, 210, 63, .5); }
/* empty: a faint card outline with a paw in it; the top card covers both */
.discard {
  border: 2px dashed rgba(255, 236, 210, .32); padding: 0; color: inherit; font: inherit; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,236,210,.2)'%3E%3Cpath d='M12 12.5c-3.2 0-5.8 3-5.8 5.2 0 1.6 1.3 2.5 2.7 2.5 1.2 0 2-.7 3.1-.7s1.9.7 3.1.7c1.4 0 2.7-.9 2.7-2.5 0-2.2-2.6-5.2-5.8-5.2z'/%3E%3Cellipse cx='5.4' cy='10.6' rx='1.9' ry='2.4' transform='rotate(-20 5.4 10.6)'/%3E%3Cellipse cx='9.3' cy='6.2' rx='2' ry='2.6'/%3E%3Cellipse cx='14.7' cy='6.2' rx='2' ry='2.6'/%3E%3Cellipse cx='18.6' cy='10.6' rx='1.9' ry='2.4' transform='rotate(20 18.6 10.6)'/%3E%3C/svg%3E") 50% 50% / 40% no-repeat, rgba(0, 0, 0, .18);
}
.discard:disabled { cursor: default; }
.discard .card { position: absolute; inset: -2px; width: calc(100% + 4px); }
/* Danger meter under the deck: a fixed green-to-red track, uncovered from the left as the risk grows. */
.risk {
  position: relative; display: block; width: var(--pw); height: 8px; border-radius: 6px; overflow: hidden;
  border: 2px solid var(--ink); background: linear-gradient(90deg, #3fbf6a, var(--accent) 45%, #ff7a1f 70%, var(--nope)); margin-top: 4px;
}
.risk-cover { position: absolute; inset: 0; background: #1a100e; transform-origin: right center; }

.status { min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px 8px; font-size: 1rem; color: var(--text); }
/* The story line sits on its own dark plate so it reads on every painted table and doesn't float loose. */
.status > span {
  display: inline-block; padding: 6px 14px; border-radius: 12px; line-height: 1.3;
  background: rgba(31, 22, 21, .84); border: 1.5px solid rgba(184, 70, 58, .55); box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.status b { color: var(--accent); font-weight: 800; }
.status .rule { color: var(--muted); }

/* Card info: what the selected, hovered or last-played card does. On phones it takes the status line's place. */
.story { display: grid; min-width: 0; }
.game.has-info .status { display: none; }
.card-info {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; padding: 8px 12px 8px 10px; text-align: left;
  background: var(--raise); border: 2px solid var(--line); border-radius: 12px;
}
.card-info.tip { display: none; }
/* a capped info whose text scrolls: a fade at its foot says there's more (`more` is set by infoMore() in ui.js) */
.card-info.more { flex-wrap: wrap; }
.card-info.more::after {
  content: ""; flex: 0 0 100%; position: sticky; bottom: -8px; display: block; height: 20px; margin: -20px -12px -8px -10px;
  background: linear-gradient(rgba(31, 22, 21, 0), var(--raise) 85%); pointer-events: none;
}
.info-card { flex: none; }
.info-card .card { --cw: 46px; border-width: 2px; box-shadow: none; }
.info-card .card .card-name { display: none; } /* beats .card-name.long, which sets display */
.info-card .card-art { margin: 6%; border-width: 1px; border-radius: 5px; }
.info-card .card-icon, .info-card .card-pack, .seat-marked .card-icon, .seat-marked .card-pack { display: none; } /* too small to read */
.info-body { min-width: 0; }
.info-name { margin: 0; font-family: var(--display); font-size: 1.15rem; line-height: 1.1; color: var(--accent); }
.info-text { margin: 2px 0 0; font-size: .95rem; line-height: 1.3; color: var(--text); }
.info-how { margin: 4px 0 0; font-size: .86rem; line-height: 1.25; color: var(--muted); }
.info-how:empty { display: none; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 56px; align-items: center; padding: 2px 0 6px; }

.me { position: relative; }
.me-tag { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 800; font-size: .95rem; color: var(--muted); }
.me-tag .seat-avatar { width: 34px; }
.me-tag.turn { color: var(--accent); }
.me-count { margin-left: -4px; } /* the tag's gap plus the dot's own space was a double space */
.me-count::before { content: "· "; }
.hand { position: relative; height: calc(var(--cw) * 1.4 + 44px); margin-top: 4px; touch-action: manipulation; }
.hand .card { position: absolute; left: 0; bottom: 18px; transform-origin: 50% 120%; }
.hand.two-rows { height: calc(var(--cw) * 1.4 + 44px + var(--raise)); } /* a big hand in two rows (anim.js layoutHand) */
.hand .card.selected { box-shadow: 0 0 0 4px var(--accent), 0 8px 18px rgba(0, 0, 0, .4); }
.hand .card.match { box-shadow: 0 0 0 3px #fff6e5; }
.hand-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }

/* ---------- cards ---------- */
/* Printed like a real card: a dark keyline with a thin light rule inside it (the back has the same),
   paper grain, light from the top, the name on a darker plate, the picture in a window with a soft
   inner shadow, the type's icon top-left and an expansion's mark bottom-right.
   --band is the plate and icon colour: the card's colour darkened, or a cat's own colour (cards.js). */
.card {
  --c: #f4e3c1; --k: var(--ink);
  --band: color-mix(in srgb, var(--c) 58%, #120a08); --bt: #fff8ef; --rule: rgba(255, 248, 239, .5);
  --r: clamp(7px, calc(var(--cw) * .1), 20px);
  position: relative; width: var(--cw); aspect-ratio: 5 / 7; border-radius: var(--r); padding: 0;
  background: var(--grain) 0 0 / 120px, linear-gradient(170deg, rgba(255, 250, 240, .2), rgba(255, 250, 240, 0) 36%, rgba(0, 0, 0, .14)), var(--c);
  color: var(--k); border: 3px solid var(--ink);
  display: flex; flex-direction: column; overflow: hidden; text-align: left;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
.card:not(.back)::before {
  content: ""; position: absolute; inset: calc(var(--cw) * .022); border-radius: calc(var(--r) * .75);
  border: max(1px, calc(var(--cw) * .012)) solid var(--rule); pointer-events: none;
}
.card-name {
  position: relative; flex: none; margin: 5.5% 5.5% 3%; padding: 3.5% 5% 3%;
  border-radius: calc(var(--r) * .45); background: var(--band); color: var(--bt);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 250, 240, .2);
  font-family: var(--display); font-size: calc(var(--cw) * .13); line-height: 1.05; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-name.long { white-space: normal; font-size: calc(var(--cw) * .108); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-art { position: relative; flex: 1; margin: 0 5.5% 5.5%; border-radius: calc(var(--r) * .45); overflow: hidden; border: 2px solid var(--ink); min-height: 0; background: #fff; }
.card-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35); pointer-events: none; }
.card-art > svg { width: 100%; height: 100%; }
.card-art .painted { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-icon, .card-pack {
  position: absolute; z-index: 1; display: block; aspect-ratio: 1; border-radius: 50%;
  border: max(1.5px, calc(var(--cw) * .014)) solid var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.card-icon { left: 5%; top: 5%; width: calc(var(--cw) * .23); padding: calc(var(--cw) * .032); background: var(--band); color: var(--bt); }
.card-pack { right: 5%; bottom: 5%; width: calc(var(--cw) * .19); padding: calc(var(--cw) * .026); background: #1a1112; color: #fff8ef; }
.card-icon svg, .card-pack svg { width: 100%; height: 100%; }
/* Foil on the bomb and the Higop, only in the peeks (anim.js shine()): a light band that GSAP sweeps across,
   and a lit edge on the Higop. Without motion the band stays hidden and only the edge shows. The bomb keeps
   its own dark frame, the same as everywhere else (Ernest, 2026-10-19: no gold edge). */
.card.shiny[data-type="higop"], .modal-cards .card.shiny[data-type="higop"] { --shine: #7df4ff; box-shadow: 0 0 0 2px var(--shine), 0 0 16px 4px color-mix(in srgb, var(--shine) 55%, transparent), 0 4px 10px rgba(0, 0, 0, .35); } /* cyan, not lilac: the Silipin view's own glow is purple */
.card-shine {
  position: absolute; top: -20%; bottom: -20%; left: 32%; width: 36%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 250, 230, .5) 50%, rgba(255, 255, 255, 0));
}
.card.back { background: var(--red); }
.card.back .card-art { margin: 0; border: 0; border-radius: 0; background: none; } /* the back's SVG draws its own frame */
.card.back .card-art::after { content: none; }
.card.back.mat-back { background: #3a0d10; }
/* Ernest's painted back (src/art.js): the seats' tiny backs use it too */
.painted-back .mini-card { background: var(--back-img) center / cover, var(--red); }
/* in a steal the Pusang Mabait's back glows, so it can't be missed in the fan */
.steal-fan .card.mat-back { box-shadow: 0 0 0 3px #ffd23f, 0 0 18px 6px rgba(255, 210, 63, .6), 0 4px 10px rgba(0, 0, 0, .35); }

.card.big { --cw: min(200px, 46vw); }
.card.big .card-text { font-size: .86rem; line-height: 1.25; padding: 0 7% 7%; font-weight: 600; flex: none; }
.card.big .card-art { flex: none; aspect-ratio: 1; }

/* ---------- Ayoko! prompt ---------- */
.nope-prompt {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 40;
  width: min(360px, calc(100vw - 32px)); background: var(--raise); border: 3px solid var(--ink); border-radius: 22px;
  padding: 16px; text-align: center; box-shadow: 0 0 0 4px var(--nope), 0 20px 50px rgba(0, 0, 0, .55);
}
.nope-what { margin: 0 0 12px; font-weight: 700; }
.nope-none { display: block; margin-top: 4px; color: var(--muted); font-weight: 600; }
.nope-row { display: flex; gap: 10px; justify-content: center; align-items: center; }
.nope-timer { height: 8px; border-radius: 4px; background: rgba(255, 246, 229, .15); margin-top: 14px; overflow: hidden; }
.nope-timer span { display: block; height: 100%; background: var(--accent); transform-origin: left center; }

/* ---------- effects layer ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
/* Every effect part on its own layer, drawn once and then only moved and faded. Otherwise each flash, dim,
   ray and slash that changed repainted the whole full-screen effects layer every frame: 130 to 550 full
   repaints per Sugod, Higop or Laban Tayo!, at 3.5× on a phone (Pixel 7 Pro). The flying cards (.fly)
   and the rings grow, and a layer kept for a transform would be scaled up blurry, so theirs is kept for
   opacity only (the browser still redraws them sharp at a new size). */
.fx > :not(canvas, .fly, .fx-ring, .fx-shock, .fx-glowring) { will-change: transform, opacity; }
.fx > :is(.fly, .fx-ring, .fx-shock, .fx-glowring) { will-change: opacity; }
/* The game screen is its own layer, so the screen shakes (Sugod!, the bomb, Laban Tayo!) only move it,
   instead of repainting the whole table when the shake starts and again when it ends. Only while the
   table shows: it changes what position: fixed is measured against. */
#app:has(#game:not([hidden])) { will-change: transform; }
.fx .fly { position: fixed; }
.fx .fly .card { --cw: 100px; }
/* Words always read over the cards and paws moving under them (anim.js gives those z-index 2–5). */
.fx-banner, .fx-stamp, .fx-arrow, .fx-say { z-index: 10; }
.fx-banner {
  position: fixed; left: 50%; top: 38%;
  font-family: var(--display); font-size: clamp(2rem, 9vw, 4rem); line-height: 1.05; text-align: center; white-space: nowrap;
  color: var(--accent); text-shadow: 0 4px 0 var(--ink), 0 0 30px rgba(0, 0, 0, .5); -webkit-text-stroke: 2px var(--ink);
  will-change: transform; /* drawn once and scaled: the slam from 3.4× redrew the blurred shadow and the masked band every frame (Katomik's last stutter) */
}
.fx-banner small { display: block; font-size: .45em; color: var(--text); -webkit-text-stroke: 1px var(--ink); }
/* A dark band across the screen behind every banner, fading out at the ends. */
.fx-banner::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -.2em; bottom: -.2em; width: 100vw; transform: translateX(-50%);
  background: rgba(14, 8, 7, .84); border-block: 4px solid var(--accent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.fx-stamp {
  /* sized so "AYOKO! ×2" fits a phone's width; stamp() also keeps it inside the viewport (Ernest, 2026-10-19: it was cut off) */
  position: fixed; font-family: var(--display); font-size: clamp(1.7rem, 7.6vw, 3.6rem); color: #fff; background: var(--nope);
  border: 5px solid var(--ink); border-radius: 14px; padding: 4px 18px; line-height: 1.05; white-space: nowrap; box-shadow: 0 6px 0 var(--ink);
}
.fx-flash { position: fixed; inset: 0; background: #fff3b0; opacity: 0; }
.fx-boom { position: fixed; width: min(520px, 110vw); aspect-ratio: 1; left: 50%; top: 45%; margin: calc(min(520px, 110vw) / -2) 0 0 calc(min(520px, 110vw) / -2); }
.fx-arrow { position: fixed; font-family: var(--display); color: var(--accent); font-size: 2.6rem; -webkit-text-stroke: 2px var(--ink); }
/* A speech bubble over an avatar (say() in anim.js), tail pointing down at the cat */
.fx-say {
  position: fixed; font-family: var(--display); font-size: clamp(1.1rem, 3.6vw, 1.6rem); line-height: 1.1; white-space: nowrap;
  color: var(--ink); background: var(--accent); border: 3px solid var(--ink); border-radius: 14px; padding: 4px 14px 5px; box-shadow: 0 4px 0 var(--ink);
}
.fx-say::after {
  content: ""; position: absolute; left: 50%; bottom: -11px; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg);
  background: var(--accent); border: solid var(--ink); border-width: 0 3px 3px 0;
}
/* a quick reaction (online): cream, so it never reads as the game's own yellow callouts */
.fx-say.emote { z-index: 12; font-family: var(--body); font-weight: 800; font-size: clamp(1rem, 3.2vw, 1.3rem); background: #fff6e5; padding: 5px 12px 6px; }
.fx-say.emote::after { background: #fff6e5; }
.fx-paw { position: fixed; pointer-events: none; }
.fx-paw svg { width: 100%; height: auto; }
/* Win confetti: its own layer above the result pop-up (.modal is z-index 60), so the scrim never dims it */
.fx-confetti-layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.fx-confetti { position: absolute; left: 0; top: 0; border-radius: 2px; box-shadow: 0 0 0 1.5px rgba(43, 26, 18, .75); }
.fx-confetti.round { border-radius: 50%; }
/* Silipin ang Future: a crystal-ball glow sized from the deck (anim.js crystal()) */
.fx-glowball { position: fixed; border-radius: 50%; background: radial-gradient(circle, rgba(200, 245, 255, .95) 0%, rgba(155, 231, 255, .8) 18%, rgba(160, 110, 255, .6) 42%, rgba(123, 63, 196, 0) 70%); }
.fx-glowcore { position: fixed; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(214, 248, 255, .9) 35%, rgba(155, 231, 255, 0) 70%); }
.fx-glowring { position: fixed; border-radius: 50%; border: 4px solid rgba(190, 240, 255, .95); box-shadow: 0 0 22px 6px rgba(160, 110, 255, .8), inset 0 0 16px rgba(155, 231, 255, .8); }
.fx-sparkle { position: fixed; background: #f4fbff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
/* Laktaw: speed lines, a leaning title and a blue comet that jumps the deck */
.fx-flash.blue { background: radial-gradient(ellipse at center, rgba(120, 190, 255, .35), rgba(10, 30, 90, .9)); }
.fx-speed { position: fixed; left: 0; border-radius: 3px; background: linear-gradient(90deg, rgba(143, 208, 255, 0), rgba(214, 238, 255, .95) 70%, #fff); }
.fx-banner.laktaw { color: #8fd0ff; }
.fx-banner.laktaw::before { border-color: #4fa3ff; }
.fx-comet { position: fixed; z-index: 11; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: radial-gradient(circle, #fff 0 16%, #bfe4ff 30%, #4fa3ff 50%, rgba(36, 89, 184, .5) 62%, rgba(36, 89, 184, 0) 72%); }
.fx-ring.blue { z-index: 11; border-color: #4fa3ff; box-shadow: 0 0 24px rgba(79, 163, 255, .85), inset 0 0 18px rgba(191, 228, 255, .7); }
/* Tuyo: the bomb cat watches a swinging tuyo, eats it, and its fuse goes out */
/* A soft shadow under the cat rather than a drop-shadow filter: the head, eyes and spark move every frame,
   and the filter blurred the whole cat again each time (about 500 redraws per Tuyo). */
.fx-tuyo-cat { position: fixed; }
.fx-tuyo-cat::before { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -2%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.fx-tuyo-cat svg { width: 100%; height: 100%; display: block; }
/* the cat's moving parts are stacked layers (art.js bombCat), moved by transform and opacity only */
.fx-tuyo-cat .tc-layer { position: absolute; inset: 0; will-change: transform; }
.fx-tuyo-cat .tc-head { transform-origin: 50% 85%; }
.fx-tuyo-cat .tc-spark { transform-origin: 62% 11%; }
.fx-tuyo-fish, .fx-heart { position: fixed; }
.fx-tuyo-fish svg, .fx-heart svg { width: 100%; height: auto; display: block; }
.fx-puff { position: fixed; border-radius: 50%; background: radial-gradient(circle at 40% 45%, rgba(235, 230, 225, .95), rgba(170, 160, 155, .75) 45%, rgba(120, 110, 105, 0) 70%); }
/* Sugod!: claw slashes, a red flash, rays round the title and a fireball to the next player */
.fx-flash.red { background: radial-gradient(ellipse at center, rgba(255, 90, 40, .55), rgba(150, 10, 6, .95)); }
.fx-banner.sugod { color: #ff5a2a; }
.fx-slash {
  position: fixed; left: 50%; top: 38%; width: 130vmax; height: clamp(16px, 2.6vmin, 28px); margin: calc(clamp(16px, 2.6vmin, 28px) / -2) 0 0 -65vmax;
  /* the blade shape is drawn in the picture, not cut with clip-path: a clipped layer redrew its mask on
     every frame of the slash */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffd23f' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%23fff6d0'/%3E%3Cstop offset='.55' stop-color='%23ffd23f'/%3E%3Cstop offset='.8' stop-color='%23ff5a2a'/%3E%3Cstop offset='1' stop-color='%23d8261f' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpolygon points='0,5 14,1 86,3 100,5 86,7 14,9' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.fx-ray { position: fixed; height: 5px; width: 34vmax; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 210, 63, .95), rgba(255, 90, 42, 0)); }
.fx-fireball { position: fixed; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: radial-gradient(circle, #fff 0 14%, #ffe27a 28%, #ff8a1f 48%, rgba(216, 38, 31, .55) 62%, rgba(216, 38, 31, 0) 72%); }
.fx-ring { position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 6px solid #ff8a1f; box-shadow: 0 0 24px rgba(255, 138, 31, .8), inset 0 0 18px rgba(255, 210, 63, .7); }
/* Katomik Bomba: a charging core, a white-hot flash, shockwaves and a mushroom cloud that burns to smoke */
.fx-nuke-core { position: fixed; border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, #fff3b0 24%, #ffd23f 38%, #ff8a1f 55%, rgba(216, 38, 31, .5) 66%, rgba(216, 38, 31, 0) 72%); }
.fx-flash.nuke { background: radial-gradient(ellipse at center, #fff 0%, #fff6d0 35%, rgba(255, 170, 60, .9) 75%, rgba(150, 30, 10, .95)); }
.fx-shock { position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 10px solid rgba(255, 246, 208, .95); box-shadow: 0 0 30px 8px rgba(255, 138, 31, .75), inset 0 0 24px 6px rgba(255, 210, 63, .7); }
.fx-shock.thin { border-width: 4px; border-color: rgba(255, 138, 31, .9); }
.fx-nuke-stem {
  position: fixed; border-radius: 45% 45% 20% 20% / 20% 20% 8% 8%;
  background: linear-gradient(90deg, rgba(120, 40, 20, .9), #ff8a1f 30%, #ffd23f 50%, #ff8a1f 70%, rgba(120, 40, 20, .9));
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 25%); mask-image: linear-gradient(0deg, transparent, #000 25%);
}
.fx-nuke-puff { position: fixed; border-radius: 50%; }
/* flat in the middle and soft at the edge, so overlapping puffs merge into one cloud instead of reading as balls */
.fx-nuke-puff.fire { background: radial-gradient(circle, rgba(255, 226, 122, .95) 0%, rgba(255, 170, 50, .92) 30%, rgba(240, 100, 30, .82) 48%, rgba(170, 40, 18, .45) 60%, rgba(120, 30, 15, 0) 70%); }
.fx-nuke-puff.smoke { background: radial-gradient(circle, rgba(128, 102, 92, .96) 0%, rgba(98, 76, 68, .9) 34%, rgba(70, 52, 47, .6) 52%, rgba(45, 32, 30, 0) 70%); }
.fx-banner.katomik { color: #ffd23f; }
.fx-banner.katomik::before { border-color: #ff8a1f; }
/* will-change: the glow is drawn once and the card's layer moves, rather than redrawn every frame */
.fly.nuke-bomb { filter: drop-shadow(0 0 14px rgba(255, 138, 31, .95)) drop-shadow(0 0 4px #ff5a2a); will-change: transform; }

/* ---------- battle embers (src/embers.js) ---------- */
/* The sparks fly above the table, below the Ayoko! prompt, the effects and dialogs; the glow (the
   hearth) sits right after the backdrop, under the table, so it never tints names and counts. */
.embers { position: fixed; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; opacity: 0; }
.embers-hearth { z-index: 0; }
/* will-change: the glow flickers all through the battle; without its own layer each change repainted the
   whole backdrop (about 1000 full-screen repaints in 5 seconds) */
.embers-glow {
  position: absolute; inset: 0; opacity: 0; will-change: opacity;
  /* strongest in the corners and up the sides; light at the bottom middle, where the hand is */
  background:
    radial-gradient(ellipse 36% 34% at 0 100%, rgba(255, 96, 24, .42), rgba(255, 96, 24, 0)),
    radial-gradient(ellipse 36% 34% at 100% 100%, rgba(255, 96, 24, .42), rgba(255, 96, 24, 0)),
    linear-gradient(90deg, rgba(216, 38, 31, .55), rgba(216, 38, 31, 0) 12%, rgba(216, 38, 31, 0) 88%, rgba(216, 38, 31, .55)),
    linear-gradient(0deg, rgba(255, 96, 24, .4), rgba(255, 96, 24, 0) 8%),
    linear-gradient(180deg, rgba(150, 16, 10, .45), rgba(150, 16, 10, 0) 10%);
}
/* the flicker stays on the side edges: the corners hold my seat's name and count on desktop */
.embers-flicker {
  background: linear-gradient(90deg, rgba(255, 140, 40, .45), rgba(255, 140, 40, 0) 6%, rgba(255, 140, 40, 0) 94%, rgba(255, 140, 40, .45));
}
.ember { position: absolute; border-radius: 50%; background: radial-gradient(circle, #ffe9a8 0 22%, #ffa53a 40%, rgba(255, 90, 24, .55) 56%, rgba(255, 70, 20, 0) 72%); }
.ember.hot { background: radial-gradient(circle, #fff 0 24%, #ffe27a 42%, rgba(255, 138, 31, .5) 58%, rgba(255, 138, 31, 0) 72%); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal-scrim { position: absolute; inset: 0; background: rgba(8, 4, 3, .74); }
.modal-box {
  position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--raise); border: 3px solid var(--ink); border-radius: 22px; padding: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  text-align: center; /* Ernest, 2026-10-17: pop-ups read centred */
}
/* long reading stays left-aligned: How to play and the game log */
.modal-box:has(.rules), .modal-box:has(.log-list) { text-align: left; }
.modal-title { font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; margin: 0 0 12px; color: var(--accent); }
.modal-body p { margin: 0 0 12px; }
.modal-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.modal-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.modal-cards .slot { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; font-size: .9rem; color: var(--muted); }
.modal-cards .card { --cw: clamp(78px, 24vw, 112px); }
/* pause / settings: over any open pop-up (.modal is 60), under the win confetti (70) */
.pause { z-index: 65; }
.pause-box { width: min(400px, 100%); }
.volume { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; text-align: left; margin: 4px 0 6px; }
.volume label { font-weight: 800; }
.volume output { justify-self: end; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.volume input[type="range"] { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0 0 8px; accent-color: var(--accent); cursor: pointer; }
.volume .mute-switch { min-height: 44px; display: flex; align-items: center; margin-bottom: 6px; cursor: pointer; }
.volume.muted input[type="range"], .volume.muted output { opacity: .4; }
.anim-setting { border-top: 2px solid rgba(255, 236, 210, .12); padding-top: 8px; margin-top: 0; }
.anim-setting .mute-switch { margin-bottom: 0; }
.anim-note { grid-column: 1 / -1; margin: -2px 0 4px; font-size: .85rem; line-height: 1.3; color: var(--muted); }
/* phone landscape: the sound on the left, the animations and the button on the right, so it fits without scrolling */
@media (orientation: landscape) and (max-height: 639px) {
  .pause-box {
    width: min(660px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: start;
    grid-template-areas: "title title" "sound anim" "sound go"; grid-template-rows: auto auto 1fr;
  }
  .pause-box > .modal-title { grid-area: title; margin-bottom: 6px; }
  .pause-box > #volume { grid-area: sound; margin: 0; }
  .pause-box > .anim-setting { grid-area: anim; border-top: 0; padding: 0 0 0 20px; border-left: 2px solid rgba(255, 236, 210, .12); margin: 0; }
  .pause-box > .modal-row { grid-area: go; align-self: end; margin-top: 8px; }
  .pause-box .volume input[type="range"] { height: 34px; margin-bottom: 2px; }
}
/* the mute switch: a pill with a sliding knob, yellow when on */
.switch {
  appearance: none; width: 56px; height: 32px; margin: 0 0 6px; border-radius: 999px; position: relative; cursor: pointer;
  background: rgba(255, 248, 239, .15); border: 2px solid rgba(255, 248, 239, .35); transition: background .15s, border-color .15s;
}
.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.switch:checked { background: var(--accent); border-color: var(--ink); }
.switch:checked::before { transform: translateX(24px); background: var(--ink); }
.switch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; justify-items: center; }
.pick-grid .card { --cw: 84px; }
.pick-grid .card[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--accent); }
/* A pair: the target's cards face down in an even fan, like a held hand (the arc is set in ui.js) */
/* One row: the overlap grows with the count (--n, set in ui.js) so any hand fits the dialog. */
/* The side padding keeps the tilted end cards inside the dialog. */
.steal-fan {
  --cw: 76px; display: flex; justify-content: center;
  padding: 22px calc(var(--cw) * .45) max(30px, calc(14px + var(--dy, 0px) + var(--cw) * .5 * var(--sin, 0))); /* room for the lowest end card */
}
.steal-fan .card { flex: none; position: relative; }
/* a pair's marked cards, face up in their own row above the fan, so none hides another */
.steal-marked { --cw: 76px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 14px 0 4px; }
.steal-marked .card { flex: none; position: relative; }
/* a seat's Markado pill, tapped: each marked card face up with its name and what it does */
.marked-list { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.marked-item { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 14px; background: var(--bg); }
.marked-card { flex: none; padding: 6px; }
.marked-card .card { --cw: clamp(68px, 19vw, 88px); }
.marked-card .mark-tag { font-size: 13px; padding: .3em; } /* just the eye: the word didn't fit a small card, and the name sits beside it */
.marked-card .mark-tag span { display: none; }
.marked-card .mark-tag svg { width: 1.5em; }
.marked-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.25; }
.marked-text b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: #ffb02e; }
.marked-text small { font-size: .92rem; color: var(--text); }
.steal-fan .card + .card { margin-left: min(-8px, calc((100% - var(--cw) * var(--n)) / (var(--n) - 1))); }
.target-list { display: grid; gap: 8px; }
.target {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 6px 14px; border-radius: 14px;
  background: rgba(255, 246, 229, .07); border: 2px solid var(--line); text-align: left; font-weight: 800;
}
.target:hover { border-color: var(--accent); }
.target .seat-avatar { width: 46px; }
.target small { margin-left: auto; color: var(--muted); font-weight: 600; white-space: nowrap; }
.pos-control { display: flex; flex-direction: column; gap: 10px; }
.pos-control input[type="range"] { width: 100%; accent-color: var(--accent); height: 32px; }
.pos-readout { font-family: var(--display); font-size: 1.4rem; text-align: center; color: var(--text); margin: 0; }
.pos-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pos-quick .btn { min-height: 40px; font-size: 1rem; padding-inline: 14px; }
/* How to play: a sheet with a fixed head (title and ×) and foot (Gets ko na); the middle scrolls. The one
   modal box is reused by every pop-up, so the sheet's look comes from its content (:has), not a class that
   would stay on. */
.modal-box:has(.rules) {
  width: min(720px, 100%); height: calc(100dvh - 32px); padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
/* the title stops short of the × (its box under the button counts as an overlap); the line under the head is the body's */
.modal-box:has(.rules) .modal-title { margin: 0 64px 0 0; padding: 16px 0 14px 20px; }
.modal-box:has(.rules) .modal-body { flex: 1; min-height: 0; display: flex; border-top: 2px solid var(--edge); }
.rules-sheet { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rules-close { position: absolute; top: 12px; right: 12px; }
.rules { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 20px 20px; display: grid; gap: 22px; align-content: start; }
.rules-foot { display: flex; justify-content: flex-end; align-items: center; padding: 12px 20px; border-top: 2px solid var(--edge); background: var(--raise); }
.rules-foot .btn { min-width: 200px; }
.rules-kicker { margin: 0 0 12px; color: var(--muted); font-weight: 800; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }

/* the turn, step by step */
.rules-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.rules-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; counter-increment: step; }
.rules-steps li::before {
  content: counter(step); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-family: var(--display); font-size: 1.25rem; padding-right: .08em;
}
.rules-steps b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; letter-spacing: .03em; line-height: 1.2; padding-right: .16em; }
.rules-steps span { color: var(--muted); font-size: .95rem; line-height: 1.45; }
.rules-steps strong { color: var(--text); }
@media (max-width: 559px) { .rules-foot .btn { flex: 1; } }

/* the cards: one deck at a time */
.rules-deck { min-width: 0; }
.rules-pack-note {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; color: var(--muted); font-size: .92rem; line-height: 1.45;
  background: color-mix(in srgb, var(--accent) 7%, var(--raise-2)); border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--edge));
}
.rules-pack-note b { display: block; margin-bottom: 4px; color: var(--accent); font-weight: 800; }
.rules-pack-note ul { margin: 0; padding-left: 1.2em; }
.rules-pack-note li + li { margin-top: 4px; }
.rule-cards { display: grid; gap: 10px; }
.rules .rules-credit { margin: 0; font-size: .8rem; color: var(--muted); opacity: .85; }
.rules-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rule-card {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--raise-2); border: 2px solid var(--edge);
}
.rule-card .card { --cw: 64px; }
.rule-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 3px; }
.rule-card .rule-name { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.1; letter-spacing: .02em; padding-right: .16em; }
.rule-sub { display: block; margin-bottom: 3px; color: var(--text); font-size: .82rem; font-weight: 700; }
/* how many copies are in the deck */
.rule-count {
  padding: 1px 8px; border-radius: .8em; background: var(--bg); border: 1.5px solid var(--edge); color: var(--text);
  font-size: .75rem; font-weight: 800;
  /* a long count ("1 bawat player + 2 (6 lang pag 5 players…") wraps: on one line it widened the list past a phone's pop-up */
}
.rule-card .rule-text { display: block; color: var(--muted); font-size: .9rem; line-height: 1.4; }
/* the deck switch in the rules looks like the lobby's .seg; the leaderboard keeps the pills below */
.rules .rules-tabs { flex-wrap: nowrap; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 14px; background: var(--bg); border: 2px solid var(--edge); }
.rules .rules-tabs button { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0 4px; border: 0; border-radius: 10px; white-space: nowrap; font-size: .92rem; }
.rules .rules-tabs button:not([aria-selected="true"]):hover { background: var(--raise-2); }
/* Original | Streaking Kittens in the rules */
.rules-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rules-tabs button {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line); background: transparent;
  color: var(--text); font-weight: 800; font-size: .95rem;
}
.rules-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rules-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 559px) { .tab-long { display: none; } } /* three tabs fit one line on a phone */
.rules-pack-note { margin: 0 0 12px; color: var(--muted); font-size: .92rem; }

/* ---------- Streaking Kittens on the table ---------- */
/* Expansion toggles on the start screen */
.field-hint { font-weight: 600; opacity: .8; }
.packs { display: grid; gap: 6px; }
.pack { position: relative; display: block; }
.pack input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pack-body {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 10px 46px; border-radius: 14px;
  border: 2px solid var(--edge); background: var(--bg); position: relative;
}
.pack-body::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  border-radius: 6px; border: 2px solid var(--muted);
}
.pack input[type="radio"] + .pack-body::before { border-radius: 50%; } /* the deck: one or the other */
.pack-body b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; letter-spacing: .05em; }
.pack-body small { color: var(--muted); font-size: .85rem; line-height: 1.3; }
.pack input:checked + .pack-body { border-color: var(--accent); }
.pack input:checked + .pack-body::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--bg); }
.pack input:focus-visible + .pack-body { outline: 3px solid var(--accent); outline-offset: 2px; }
.pack input:disabled + .pack-body { opacity: .5; }
.deck-note { margin: 0; font-size: .85rem; color: var(--muted); }
/* a wide panel: Level beside Speed, the deck and expansion tiles two-up with the tick in the corner */
@container setup (min-width: 380px) {
  .field-row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .packs { grid-template-columns: 1fr 1fr; }
  .pack-body { height: 100%; padding: 10px 36px 10px 12px; }
  .pack-body::before { left: auto; right: 10px; top: 12px; margin-top: 0; width: 18px; height: 18px; }
  .pack-body small { font-size: .8rem; }
}

/* Mabuti vs Masama: a gold tag on whoever holds the Pusang Mabait (its back is different, so all can see) */
.seat-god {
  display: inline-flex; align-items: center; gap: .3em; padding: .15em .6em .15em .45em; border-radius: .9em; position: relative; z-index: 2;
  background: #ffe27a; color: #2b1a12; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink), 0 0 14px 3px rgba(255, 226, 122, .6);
  font-family: var(--display); font-size: clamp(.74rem, 2.4vw, 1rem); line-height: 1.2; letter-spacing: .02em;
}
.seat-god[hidden] { display: none; }
.seat-god svg { width: 1.2em; height: auto; flex: none; }
/* Laban Tayo! and Gulo sa Ilalim dialogs: the cards side by side */
.laban-pair { display: flex; justify-content: center; gap: clamp(14px, 5vw, 36px); margin: 4px 0 12px; }
/* Tap-the-card choices (ui.js tapCard()): each card and its caption is one button that lifts and glows */
.pick-card {
  --cw: clamp(104px, 30vw, 150px);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; padding: 6px; border: 0; border-radius: 14px;
  background: none; color: var(--text); font: inherit; cursor: pointer; transition: transform .15s ease; touch-action: manipulation;
}
.pick-card .card { transition: box-shadow .15s ease; }
.pick-cap { font-family: var(--display); font-size: clamp(.95rem, 3.6vw, 1.1rem); line-height: 1.15; text-align: center; color: var(--accent); max-width: calc(var(--cw) + 20px); }
@media (hover: hover) { .pick-card:hover { transform: translateY(-6px); } .pick-card:hover .card { box-shadow: 0 0 0 4px var(--accent), 0 10px 24px rgba(0, 0, 0, .5); } }
.pick-card:active { transform: scale(.96); }
.pick-card:focus-visible { outline: none; }
.pick-card:focus-visible .card { box-shadow: 0 0 0 4px var(--accent), 0 0 0 7px var(--ink); }
/* Gulo sa Ilalim's "put it on top": a short stack of backs with the drawn card on top */
.pick-deck { position: relative; display: block; width: var(--cw); aspect-ratio: 5 / 7; margin-bottom: 18px; }
.pick-deck .card { position: absolute; inset: 0; width: 100%; }
.pick-deck .card:nth-child(1) { transform: translate(-12px, 14px) rotate(-8deg); }
.pick-deck .card:nth-child(2) { transform: translate(12px, 10px) rotate(7deg); }
.pick-deck .card:nth-child(3) { transform: translateY(6px); }
.pick-deck .card.on-top { transform: translateY(-8px) rotate(-1deg); }
.pick-card:focus-visible .pick-deck .card:not(.on-top), .pick-card:hover .pick-deck .card:not(.on-top) { box-shadow: none; }

/* A seat's marked cards (face up for all) and the blind badge */
.seat-marked { display: flex; justify-content: center; max-width: 100%; }
.seat-marked:empty { display: none; }
/* A marked card on someone's seat (Ernest, 2026-10-19: words, not a tiny card): an orange pill with
   the eye and the card's name. No "MARKADO" word: that's only on the marked card itself. */
.seat-mark {
  display: inline-flex; align-items: center; gap: .35em; max-width: 100%; margin: 0; padding: .2em .65em .2em .5em; border-radius: .9em;
  background: #ffb02e; color: #2b1a12; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink), 0 0 14px 3px rgba(255, 176, 46, .6);
  font-family: var(--display); font-weight: 400; font-size: clamp(.78rem, 1.9vw, 1.05rem); line-height: 1.2; letter-spacing: .02em; text-align: left; position: relative; z-index: 2;
  cursor: pointer; /* a button: it opens the list of that player's marked cards */
}
.seat-mark:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.seat.marked { cursor: pointer; } /* the whole seat opens the list too: the badge alone is a small target */
.seat-mark svg { width: 1.3em; height: auto; flex: none; }
/* The first marked card's name, wrapping between words rather than being cut ("Pus…" on a phone seat
   said nothing), and a red "+1" badge for each more: a list of names stretched the seat row and pushed
   the piles into the hand (UI audit, 2026-10-19). The steal fan and the seat's label name them all. */
.seat-mark b { font-weight: 400; min-width: 0; }
.seat-mark i { font-style: normal; text-wrap: balance; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.seat-mark i + i { display: none; }
.seat-mark em {
  position: absolute; top: -.5em; right: -.8em; padding: .12em .35em .05em; border-radius: 999px; line-height: 1; font-style: normal;
  background: var(--red); color: #fff; border: 1.5px solid var(--ink);
}
/* the badge hangs inside the pill's corner: room for it, so it never sits on the name's last letter */
@media (min-width: 760px) { .seat-mark:has(> em) { padding-right: 1.1em; } }
@media (max-width: 759px) {
  /* a phone seat is ~80px wide: the eye goes on top so one long word ("Pagpalitin") has the whole width */
  .seat-mark { flex-direction: column; gap: 0; font-size: .74rem; padding: .2em .45em .3em; text-align: center; }
  .seat-mark svg { width: 1.4em; }
  /* 7 to 10 players: two rows of ~64px seats with no height to spare, and a name pill laid over the
     portrait hid the cat and still cut the name ("Ipakita ang…"). So it's a small badge on the portrait's
     lower-right corner: the eye and how many are marked. Tapping it (or the seat) lists them by name
     (Ernest, 2026-10-20). */
  .seats.many .seat-marked { position: absolute; z-index: 2; right: 1px; top: calc(3px + var(--avw) * .875); transform: translateY(-100%); }
  .seats.many .seat-mark { flex-direction: row; gap: .2em; font-size: .78rem; padding: .08em .45em .08em .35em; box-shadow: 0 2px 0 var(--ink), 0 0 10px 2px rgba(255, 176, 46, .6); }
  .seats.many .seat-mark b, .seats.many .seat-mark em { display: none; }
  .seats.many .seat-mark::after { content: attr(data-n); }
  .seats.many .seat-mark svg { width: 1.25em; }
  /* blind and marked: the BULAG stamp moves up to the top of the portrait, above the badge */
  .seats.many .seat.marked.blind .seat-avatar::after { top: 14%; }
  /* the moves stay on one line (a second line of buttons pushed my tag under them on a short phone);
     a long label wraps inside its own button instead */
  .actions { flex-wrap: nowrap; align-items: stretch; gap: 6px; }
  .actions .btn { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: center; padding-inline: 16px; }
  .actions .btn-primary { flex-shrink: 0; white-space: nowrap; } /* "Mag-draw" broke at its hyphen */
  .actions:has(> :nth-child(3)) { gap: 5px; }
  .actions:has(> :nth-child(3)) .btn { font-size: .95rem; padding-inline: 12px; }
  .actions:has(> :nth-child(3)) .btn-more { display: none; } /* "I-play": the card info above names the card */
  /* I-play, pair, 3 of a kind and draw: still one row, each label on up to two lines. Two rows of buttons
     made the column taller than the screen, and the grid then squeezed the row so the second one ran
     over my tag (check:ui, 2026-10-20). */
  .actions:has(> :nth-child(4)) { gap: 4px; }
  .actions:has(> :nth-child(4)) .btn { font-size: .86rem; padding-inline: 8px; line-height: 1.15; min-width: min-content; }
  /* A long card info (Laban Tayo!, the Mabait, a Ligaw) pushed a tall phone's hand 27px off the bottom:
     the piles may shrink further to make room, and past what's left (~600px goes to the rest of a
     10-player table) the info scrolls, with a fade at its foot (.more, set in ui.js). */
  .table {
    min-height: calc(var(--cw) * 1.12 + 56px);
    --pw: clamp(calc(var(--cw) * .8), min(31vw, calc((100cqh - 64px) * 5 / 7), calc((100cqw - var(--note) - 2 * clamp(28px, 8vw, 80px)) / 2)), 168px);
  }
  /* the row is a size container, so its content doesn't hold it open: in a short row the Ikot / Higop /
     Mabait badges get compact, or three of them stuck out over the seats and the info */
  @container (max-height: 176px) {
    .table .pile-note { font-size: .76rem; gap: 5px; }
    .table .pile-note > span { padding: 2px 8px 2px 6px; }
    .table .pile { gap: 4px; }
  }
  .card-info { max-height: max(88px, calc(100dvh - 600px)); overflow-y: auto; overscroll-behavior: contain; }
}
/* Turns owed after a Sugod!/Sugurin Kita! (Ernest, 2026-10-19: make it stand out): a red pill */
.seat-turns {
  display: inline-flex; align-items: baseline; gap: .25em; padding: .12em .7em .14em .55em; border-radius: 999px;
  background: var(--red); color: #fff; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink), 0 0 16px 3px rgba(216, 38, 31, .6);
  font-family: var(--display); font-size: clamp(.82rem, 2.7vw, 1.1rem); line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; position: relative; z-index: 2;
}
.seat-turns[hidden] { display: none; }
.seat-turns b { font-weight: 400; font-size: 1.35em; line-height: 1; }
.me-tag .seat-turns { margin-left: 4px; }
/* Bulag (Ernest, 2026-10-17: make it noticeable): the portrait dims and a "BULAG" stamp sits across it
   (Ernest, 2026-10-19: the word on the avatar, no blindfold), and a "BULAG KA!" band across my own hand */
.seat.blind .seat-avatar img, .seat.blind .seat-avatar svg, .me-tag.blind .seat-avatar img, .me-tag.blind .seat-avatar svg { filter: grayscale(.6) brightness(.75); }
.seat.blind .seat-avatar, .me-tag.blind .seat-avatar { position: relative; container-type: inline-size; }
.seat.blind .seat-avatar::after, .me-tag.blind .seat-avatar::after, .fx-bulag {
  content: "BULAG"; position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); pointer-events: none;
  padding: .06em .3em .02em; border-radius: .3em; background: #e9ecf2; color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  font-family: var(--display); font-size: max(9px, 21cqw); line-height: 1.1; letter-spacing: .04em; white-space: nowrap;
}
.fx-dim { position: fixed; inset: 0; background: radial-gradient(circle at var(--x) var(--y), rgba(8, 8, 12, 0) 0, rgba(8, 8, 12, .15) 90px, rgba(8, 8, 12, .82) 340px); }
/* the stamp as it lands: drawn big (font size set by anim.js) and scaled down, so it stays sharp; GSAP owns its transform */
.fx-bulag { position: fixed; z-index: 11; transform: none; border-width: .15em; box-shadow: 0 .2em 0 var(--ink); }
.fx-banner.bulag { color: #e9ecf2; }
.fx-banner.bulag::before { border-color: #cfd3dc; }
/* Mga Pusang Higop: the black hole, its motes, a portrait being pulled in, and the Baliktarin arrows */
.fx-dim.higop { background: radial-gradient(circle at var(--x) var(--y), rgba(22, 10, 46, .2) 0, rgba(22, 10, 46, .6) 160px, rgba(8, 4, 18, .9) 420px); }
.fx-vortex {
  position: fixed; border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 71%);
  mask-image: radial-gradient(circle, #000 50%, transparent 71%);
}
.fx-vortex svg { display: block; width: 100%; height: 100%; }
.fx-orbit { position: fixed; width: 0; height: 0; }
.fx-orbit i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #e6d6ff; box-shadow: 0 0 10px 3px rgba(201, 166, 255, .8); }
.fx-sucked { position: fixed; z-index: 7; }
.fx-flash.higop { background: #c9a6ff; }
.fx-banner.higop { color: #c9a6ff; top: 27%; } /* above the card in the middle of the hole */
.fx-banner.higop::before { border-color: #8a63d2; }
.fx-reverse { position: fixed; z-index: 6; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
.fx-reverse svg { display: block; width: 100%; height: 100%; }
.fx-banner.reverse { color: #3fd0a8; }
.fx-banner.reverse::before { border-color: #0f6e5a; }
/* Laban Tayo!'s face-off (anim.js faceOff()): two halves meeting on a diagonal, a cat on each, lightning
   down the seam and a VS between them. The halves overlap so the seam runs 58vw at the top to 42vw at the bottom. */
.fx-vs-bg { position: fixed; inset: 0; background: rgba(6, 4, 8, .82); }
.fx-vs-side { position: fixed; top: 0; bottom: 0; width: 58vw; }
.fx-vs-side.left {
  left: 0; clip-path: polygon(0 0, 100% 0, 72.4% 100%, 0 100%);
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 5px, transparent 5px 16px),
    radial-gradient(circle at 40% 44%, rgba(255, 122, 176, .55), transparent 55%), linear-gradient(160deg, #c2185b, #5a0a2c 60%, #23040f);
}
.fx-vs-side.right {
  right: 0; clip-path: polygon(27.6% 0, 100% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(65deg, rgba(255, 255, 255, .07) 0 5px, transparent 5px 16px),
    radial-gradient(circle at 60% 44%, rgba(120, 180, 255, .5), transparent 55%), linear-gradient(200deg, #2f5fd0, #12286e 60%, #060c26);
}
.fx-vs-streak { position: fixed; height: 3px; border-radius: 2px; }
.fx-vs-streak.left { background: linear-gradient(90deg, rgba(255, 210, 230, 0), rgba(255, 210, 230, .85)); }
.fx-vs-streak.right { background: linear-gradient(270deg, rgba(200, 225, 255, 0), rgba(200, 225, 255, .85)); }
.fx-vs-fighter { position: fixed; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .3em; }
.fx-vs-face { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--raise); border: 5px solid #fff6e5; }
.fx-vs-fighter.left .fx-vs-face { box-shadow: 0 0 0 4px #ff7ab0, 0 0 40px 10px rgba(255, 90, 160, .65); }
.fx-vs-fighter.right .fx-vs-face { box-shadow: 0 0 0 4px #7fb2ff, 0 0 40px 10px rgba(90, 150, 255, .65); }
.fx-vs-face .portrait { width: 100%; height: 100%; border: 0; box-shadow: none; }
.fx-vs-face svg { width: 100%; height: 100%; display: block; }
.fx-vs-fighter b {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 6.5vw, 2.6rem); color: #fff6e5; white-space: nowrap;
  -webkit-text-stroke: 2px var(--ink); text-shadow: 0 4px 0 var(--ink);
}
.fx-vs-bolt { position: fixed; inset: 0; z-index: 2; }
.fx-vs-bolt svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fx-vs-bolt polyline { fill: none; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.fx-vs-bolt .glow { stroke: rgba(240, 215, 255, .85); stroke-width: 26px; filter: blur(6px); }
.fx-vs-bolt .core { stroke: #fff; stroke-width: 7px; }
.fx-vs {
  position: fixed; z-index: 5; font-family: var(--display); font-size: clamp(4.5rem, 24vw, 11rem); line-height: 1;
  color: #ffd23f; -webkit-text-stroke: 4px var(--ink); text-shadow: 0 8px 0 var(--ink), 0 0 50px rgba(255, 138, 31, .9);
}
.fx-ray.vs { z-index: 4; background: linear-gradient(90deg, #fff6d0, rgba(255, 210, 63, 0)); }
.fx-banner.laban { color: #ff7ab0; top: 80%; }
.fx-banner.laban::before { border-color: #c2185b; }
/* Laban Tayo!'s duel (anim.js duel()): sparks and a swelling light between the cards, the Mabait's gold
   ring of rays, the Masama's embers */
.fx-dim.laban { background: radial-gradient(circle at var(--x) var(--y), rgba(10, 6, 12, .72) 0, rgba(10, 6, 12, .84) 200px, rgba(6, 4, 8, .93) 460px); }
.fx-duel-name {
  position: fixed; z-index: 7; font-family: var(--display); font-size: clamp(1rem, 4vw, 1.4rem); color: #fff6e5; white-space: nowrap;
  -webkit-text-stroke: 1px var(--ink); text-shadow: 0 2px 0 var(--ink);
}
.fx-ray.duel { z-index: 7; height: 3px; background: linear-gradient(90deg, #fff, #ffd23f 40%, rgba(255, 90, 42, 0)); }
.fx-duel-core { position: fixed; z-index: 7; border-radius: 50%; background: radial-gradient(circle, #fff 0 14%, #fff3b0 28%, rgba(255, 122, 176, .8) 48%, rgba(194, 24, 91, 0) 70%); }
.fx-holy {
  position: fixed; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 228, 140, .75) 0 7deg, rgba(255, 228, 140, 0) 7deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .6) 45%, transparent 70%);
  mask-image: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .6) 45%, transparent 70%);
}
.fx-ember-dot { position: fixed; z-index: 7; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: radial-gradient(circle, #fff3b0, #ff8a1f 50%, rgba(216, 38, 31, 0) 75%); box-shadow: 0 0 8px #ff5a2a; }
/* will-change: as .nuke-bomb, the glow is drawn once while the card wobbles and flies to its holder */
.fly.duel-god { filter: drop-shadow(0 0 16px rgba(255, 214, 90, .95)) drop-shadow(0 0 4px #fff3b0); will-change: transform; }
.fly.duel-devil { filter: drop-shadow(0 0 16px rgba(255, 60, 30, .95)) drop-shadow(0 0 4px #ff8a1f); will-change: transform; }
/* The face-up Pusang Higop on top of the deck: everyone sees it coming */
.deck.higop-top .card:last-child { box-shadow: 0 0 0 4px #c9a6ff, 0 0 26px 8px rgba(160, 110, 255, .65); }
.deck.higop-top.can-draw .card:last-child { box-shadow: 0 0 0 4px #c9a6ff, 0 0 30px 10px rgba(160, 110, 255, .8); }
/* Their own column between the deck and the discard pile, so they never cover a card: which way the
   turns go, then where the Higop is. Badges, not small print, so they're seen at a glance.
   The table row is centred, so the piles just move apart to make room.
   No transforms here: the change bounce (GSAP) scales the badges. */
.pile-note {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0 -10px;
  pointer-events: none; font-size: .82rem; line-height: 1.15; white-space: nowrap;
}
.pile-note[hidden] { display: none; }
.pile-note > span {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 14px; /* centred (Ernest, 2026-10-19) */
  border: 2px solid; font-weight: 800; letter-spacing: .02em; box-shadow: 0 3px 10px rgba(0, 0, 0, .55);
}
.pile-note svg { width: 1.4em; height: 1.4em; flex: none; }
.pile-note .hg b, .pile-note .hg small, .pile-note .god b, .pile-note .god small { display: block; }
.pile-note .hg b, .pile-note .god b { text-transform: uppercase; }
.pile-note .hg small, .pile-note .god small { font-size: .9em; font-weight: 700; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.pile-note .god { background: #3d2f08; border-color: #ffd23f; color: #ffe9a6; }
.pile-note.held .god { background: #ffe27a; border-color: #fff; color: #2b1a12; box-shadow: 0 0 0 3px rgba(255, 226, 122, .35), 0 0 18px 4px rgba(255, 210, 63, .6); }
.pile-note .dir { text-transform: uppercase; background: #0d3a31; border-color: #3fd0a8; color: #5ff0c6; }
.pile-note.rev .dir { background: #4a2a06; border-color: #ffb347; color: #ffc46b; }
.pile-note.rev .dir svg { transform: scaleX(-1); }
.pile-note .hg { background: #241843; border-color: #9b7be0; color: #e6d9ff; }
.pile-note.up .hg { background: #c9a6ff; border-color: #fff; color: #160f2e; box-shadow: 0 0 0 3px rgba(201, 166, 255, .35), 0 0 20px 5px rgba(160, 110, 255, .75); }
.pile-note.gone .hg { background: #2a2226; border-color: #6b5c60; color: #b3a39c; box-shadow: none; }
.hand.blind::before {
  content: "BULAG KA!"; position: absolute; z-index: 40; left: 50%; top: 34%; transform: translate(-50%, -50%) rotate(-3deg); pointer-events: none;
  padding: .1em .8em; border-radius: 12px; background: rgba(20, 22, 28, .9); border: 3px solid #cfd3dc; box-shadow: 0 4px 0 var(--ink);
  font-family: var(--display); font-size: clamp(1.4rem, 6vw, 2.2rem); color: #e9ecf2; white-space: nowrap; -webkit-text-stroke: 1px var(--ink);
}
.hand.blind::after {
  content: "Hindi mo kita ang cards mo hanggang maka-draw ka nang ligtas"; position: absolute; z-index: 40; left: 50%; top: calc(34% + clamp(1.9rem, 5vw, 2.6rem));
  transform: translateX(-50%); pointer-events: none; padding: .35em .9em; border-radius: 999px; background: rgba(20, 22, 28, .92);
  border: 2px solid #cfd3dc; color: #e9ecf2; font-weight: 700; font-size: .95rem; line-height: 1.25; width: max-content; max-width: 88%; text-align: center;
}
/* My own marked cards: everyone can see these, so they glow orange and carry a "MARKADO" band */
.card.marked { box-shadow: 0 0 0 4px #ffb02e, 0 0 22px 7px rgba(255, 176, 46, .85), 0 8px 18px rgba(0, 0, 0, .4); }
.hand .card.marked.selected { box-shadow: 0 0 0 4px var(--accent), 0 0 0 8px #ffb02e, 0 0 26px 10px rgba(255, 176, 46, .85); }
.mark-tag {
  /* left-aligned: in the fanned hand the next card covers this card's right side */
  position: absolute; left: 6%; bottom: 9%; display: flex; align-items: center; gap: .3em;
  padding: .22em .3em; border-radius: 999px; background: #2b1a12; color: #ffb02e; border: 2px solid #ffb02e;
  font-family: var(--display); font-size: max(9px, calc(var(--cw) * .1)); line-height: 1; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.mark-tag svg { width: 1.25em; height: auto; flex: none; }
/* the phone hand overlaps too tightly for the word ("MA..."), so it keeps just a bigger eye badge */
@media (max-width: 759px) {
  .hand .mark-tag { font-size: 13px; padding: .3em; }
  .hand .mark-tag span { display: none; }
  .hand .mark-tag svg { width: 1.5em; }
}

/* Ayusin ang Future: the top cards in a row, arrows under each */
.order-row { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.order-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.order-pos { font-weight: 800; font-size: .85rem; color: var(--muted); }
.order-slot:first-child .order-pos { color: var(--accent); }
.order-card .card { --cw: clamp(58px, 15vw, 96px); }
.order-move { display: flex; gap: 4px; }
.order-btn { min-height: 44px; min-width: 44px; padding: 0; font-size: 1rem; }
.log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 6px; }
.log-list li { padding: 6px 10px; border-radius: 10px; background: rgba(255, 246, 229, .06); }
.log-list li.mine { background: rgba(255, 210, 63, .13); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .28); }
.result { text-align: center; }
.result .seat-avatar { width: 120px; margin: 0 auto 4px; }
.result .modal-title { font-size: 2.4rem; }
.result-saved { color: var(--accent); font-weight: 700; font-size: .95rem; }
/* the story of the game (src/recap.js): fun awards, who blew up in what order, a picture to share */
.recap { margin: 4px auto 14px; max-width: 400px; padding: 12px 14px; border-radius: 16px; background: var(--bg); }
.recap-title { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--accent); }
.recap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.recap-award { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 12px; background: rgba(255, 246, 229, .06); }
.recap-award .seat-avatar { width: 40px; flex: none; margin: 0; }
.recap-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.recap-text b { font-family: var(--display); font-weight: 400; font-size: 1.02rem; color: var(--accent); letter-spacing: .01em; }
.recap-text span { font-size: .92rem; overflow-wrap: anywhere; }
.recap-outs, .recap-totals { margin: 8px 0 0; font-size: .9rem; color: var(--muted); line-height: 1.3; }
.recap-list + .recap-outs { margin-top: 12px; }
.recap-share { margin-top: 10px; min-height: 40px; padding-inline: 16px; font-size: .95rem; }
.recap-note { margin: 6px 0 0; min-height: 1.2em; font-size: .85rem; color: var(--muted); }
.recap-note:empty { display: none; }
/* this game's XP, rank and new medals, filled in when the profiles server answers (Barkada.fillProgress) */
.result-progress { margin: 4px auto 14px; max-width: 360px; padding: 12px 14px; border-radius: 16px; background: var(--bg); text-align: left; }
.prog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prog-xp { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: #6fe08f; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.prog-xp.lost { color: #ff8a7a; }
.prog-move { margin: 8px 0 0; font-weight: 800; }
.prog-move.up { color: var(--accent); }
.prog-move.down { color: var(--muted); }
.prog-new { margin: 12px 0 6px; font-family: var(--display); font-size: 1.2rem; color: var(--accent); }
.prog-medals { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prog-medals li { display: flex; align-items: center; gap: 10px; }
.prog-medals li > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.prog-medals small { color: var(--muted); font-size: .85rem; }
/* a card art this game unlocked (src/rewards-screen.js fillUnlocks) */
.prog-unlock { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--edge); }
.prog-unlock-card { flex: none; }
.prog-unlock-card .card { --cw: 64px; }
.prog-unlock-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; line-height: 1.25; }
.prog-unlock-text .prog-new { margin: 0; color: var(--sky); }
.prog-unlock-text small { color: var(--muted); font-size: .85rem; }
.prog-unlock-text .btn { margin-top: 6px; }

/* ---------- Mga Reward ---------- */
/* A sheet like How to play: the title and × fixed on top, the list scrolls (no Close bar: the × closes it) */
.modal-box:has(.rewards) {
  width: min(720px, 100%); height: calc(100dvh - 32px); padding: 0; overflow: hidden; text-align: left;
  display: flex; flex-direction: column;
}
.modal-box:has(.rewards) .modal-title { margin: 0 64px 0 0; padding: 16px 0 14px 20px; }
.modal-box:has(.rewards) .modal-body { flex: 1; min-height: 0; display: flex; border-top: 2px solid var(--edge); }
.rewards-sheet { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rewards { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 20px 20px; }
.rewards-intro { color: var(--muted); line-height: 1.45; }
.rewards-signin {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--sky) 10%, var(--raise-2)); border: 2px solid color-mix(in srgb, var(--sky) 45%, var(--edge));
}
.modal-body .rewards-signin p { flex: 1 1 220px; margin: 0; line-height: 1.4; }
.reward-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.reward {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border-radius: 18px;
  background: var(--raise-2); border: 2px solid var(--edge);
}
.reward[data-state="using"] { border-color: var(--sky); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sky) 35%, transparent), 0 0 22px rgba(124, 200, 242, .22); }
.reward-cover { position: relative; }
.reward-cover .card { --cw: clamp(78px, 22vw, 96px); }
/* locked: the cover dims under a padlock */
.reward[data-state="locked"] .reward-cover .card { filter: grayscale(.75) brightness(.55); }
.reward-lock {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); border: 2px solid var(--muted); color: var(--text);
}
.reward-lock svg { width: 24px; height: 24px; }
.reward-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.reward-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.4rem; line-height: 1.1; letter-spacing: .04em; color: var(--text); }
.reward-tag { padding: 1px 10px 2px; border-radius: 999px; font-size: .8rem; font-weight: 800; border: 2px solid #6fe08f; color: #6fe08f; white-space: nowrap; }
.reward[data-state="using"] .reward-tag { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.modal-body .reward-style { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.reward-goals { margin-top: 10px; display: grid; gap: 4px; }
.goal-how { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 800; font-size: .95rem; line-height: 1.3; }
.modal-body .goal-how { margin: 0; }
.goal-how b { flex: none; color: var(--sky); font-variant-numeric: tabular-nums; }
.goal-bar { height: 10px; margin-top: 4px; border-radius: 999px; background: #3a2a27; border: 2px solid var(--ink); overflow: hidden; }
.goal-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3c8fd0, var(--sky)); border-radius: inherit; }
.modal-body .goal-or { margin: 2px 0; color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.modal-body .goal-note { margin: 4px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.4; }
.modal-body .goal-soon { color: var(--sky); font-weight: 700; }
.reward-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* every card in one style */
.reward-preview-head { margin: 4px 0 14px; }
.reward-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; justify-items: center; }
.reward-cards .card { --cw: 92px; }
/* phone landscape: a slimmer head and foot leave room for the list; two by two once it's wide enough */
@media (orientation: landscape) and (max-height: 639px) {
  .modal-box:has(.rewards) .modal-title { padding: 10px 0 8px 20px; }
  .modal-box:has(.rewards) .rules-close { top: 4px; right: 8px; }
  .rewards { padding-top: 12px; }
  .rewards-intro { margin-top: 0; }
}
@media (orientation: landscape) and (max-height: 639px) and (min-width: 800px) {
  .reward-list { grid-template-columns: 1fr 1fr; }
  .reward:first-child { grid-column: 1 / -1; }
}

/* ---------- ranks and medals ---------- */
.rank-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 3px 3px; border-radius: 999px; vertical-align: middle;
  background: #2e211f; border: 2px solid var(--accent); color: var(--text); font-weight: 800; font-size: .9rem; line-height: 1.2; white-space: nowrap;
}
.rank-badge i {
  display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; font-style: normal;
  background: var(--accent); color: var(--accent-ink); font-family: var(--display); font-weight: 400; font-size: .85rem;
}
/* the top three ranks get a hotter ring */
.rank-badge[data-rank="7"], .rank-badge[data-rank="8"], .rank-badge[data-rank="9"] { border-color: #ff7a1f; box-shadow: 0 0 10px rgba(255, 122, 31, .45); }
.profile-text .rank-badge { font-size: .8rem; }
.xp-bar { height: 12px; margin-top: 10px; border-radius: 999px; background: #3a2a27; border: 2px solid var(--ink); overflow: hidden; }
.xp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7a1f, var(--accent)); border-radius: inherit; }
.xp-label { display: block; margin-top: 4px; color: var(--muted); font-size: .85rem; }
.stats-rank { margin-top: 10px; }
.medals-count { margin: 0 0 4px; color: var(--muted); }
.medals-count b { color: var(--accent); font-size: 1.1rem; }
.medal-group { margin: 12px 0 6px; color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.medal-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.medal { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: var(--bg); }
.medal.locked .medal-text { opacity: .6; }
.medal-icon { flex: none; width: 30px; }
.medal-svg { display: block; width: 100%; height: auto; }
.medal-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.medal-text small { color: var(--muted); font-size: .82rem; }
.medal-text em { font-style: normal; font-weight: 800; font-size: .78rem; color: var(--accent); }

/* ---------- Barkada profile and leaderboard ---------- */
.profile-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px;
  border-radius: 14px; background: var(--raise-2);
}
.profile-text { flex: 1 1 210px; margin: 0; text-align: left; color: var(--muted); font-size: .95rem; line-height: 1.3; }
.profile-text b { color: var(--accent); }
/* only when the browser offers it: a plain link under the menu */
.btn-install {
  flex-basis: 100%; min-height: 44px; border: 0; background: none; padding: 4px 8px;
  color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.modal-box:has(.board), .modal-box:has(.profile-form) { text-align: left; }
.profile-form { display: flex; flex-direction: column; gap: 12px; }
.profile-form .rules-tabs { margin: 0; }
.profile-form p { margin: 0; } /* the form's gap spaces it, not .modal-body p */
.profile-help { color: var(--muted); }
.field input[type="password"] {
  min-height: 48px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); padding: 8px 14px; font-size: 1.05rem;
}
.field input.pin-input { max-width: 170px; font-family: var(--display); font-size: 1.5rem; letter-spacing: .4em; padding-block: 4px; }

.board-note { margin: 0 0 10px; color: var(--muted); font-size: .95rem; }
.board-list { display: flex; flex-direction: column; gap: 4px; }
.board-row {
  display: grid; grid-template-columns: 2em minmax(0, 1fr) repeat(3, 4.4em); align-items: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 6px 12px; border-radius: 12px; border: 2px solid transparent;
  background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.board-row:hover { border-color: var(--line); }
.board-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.board-row.is-me { border-color: var(--accent); }
.board-head { background: transparent; min-height: 0; padding-block: 0; color: var(--muted); font-weight: 800; font-size: .85rem; cursor: default; }
.board-head:hover { border-color: transparent; }
.board-row > span:nth-child(n + 3) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.board-row small { color: var(--muted); font-weight: 600; }
.board-rank { color: var(--muted); font-weight: 800; }
.board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.board-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.board-row .board-title { color: var(--accent); font-size: .76rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-back { margin-bottom: 10px; }

.stats-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--accent); }
.stats-since { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.stats-card h4 { margin: 16px 0 6px; font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: .02em; }
.stats-bigs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.stat-big { background: var(--bg); border-radius: 14px; padding: 10px 6px; text-align: center; }
.stat-big b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.8rem; line-height: 1; color: var(--accent); }
.stat-big span { display: block; margin-top: 4px; color: var(--muted); font-size: .82rem; font-weight: 700; line-height: 1.15; }
.stats-line { margin: 0; }
.stats-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats-levels div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; background: var(--bg); border-radius: 12px; padding: 8px 12px; }
.stats-levels span { color: var(--muted); font-weight: 700; }
.stats-levels b, .stats-list dd { font-variant-numeric: tabular-nums; }
.stats-levels small { color: var(--muted); font-weight: 600; }
.stats-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 0; }
.stats-list div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255, 248, 239, .1); }
.stats-list dt { color: var(--muted); }
.stats-list dd { margin: 0; font-weight: 800; }
.stats-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.stats-fav { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: 14px; padding: 10px 12px; }
.stats-fav-card .card { --cw: 74px; }
.stats-rivals { display: grid; gap: 8px; }
.stats-fav p, .stats-rivals p { margin: 0; display: flex; flex-direction: column; line-height: 1.2; }
.stats-rivals p { background: var(--bg); border-radius: 14px; padding: 8px 12px; }
.stats-fav span, .stats-rivals span { color: var(--muted); font-size: .85rem; font-weight: 700; }
.stats-fav b, .stats-rivals b { font-size: 1.1rem; }
.stats-fav small, .stats-rivals small { color: var(--muted); }
@media (max-width: 559px) {
  .board-row { grid-template-columns: 1.6em minmax(0, 1fr) repeat(3, 3.3em); gap: 6px; padding-inline: 8px; }
  .stats-bigs { grid-template-columns: 1fr 1fr; }
  .stats-list, .stats-extra { grid-template-columns: 1fr; }
  .stats-levels div { flex-direction: column; align-items: flex-start; gap: 0; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { padding: 24px; text-align: center; }

@media (min-width: 760px) {
  :root { --cw: clamp(80px, min(8.5vw, 13.5vh), 124px); }
  .bar { padding-top: 14px; }
  .status { font-size: 1.08rem; }
}
/* ---------- desktop table (after Exploding Kittens 2's layout) ----------
   Full screen instead of a column: the cats sit in an arc across the top holding their cards,
   the piles are big in the middle with the story on the left and your moves on the right,
   and you sit in the bottom-left corner behind a large hand. Sizes follow the window's height first. */
@media (min-width: 1024px) and (min-height: 640px) {
  :root {
    --cw: clamp(100px, min(9.5vw, 17.5vh), 230px);
    /* what's left after the cats and the hand, with room for a two-line Markado pill on a seat and a
       marked card standing up out of the fan (at -95px "Bomba: 50%" sat under them, check:ui 2026-10-20) */
    --pile-w: clamp(96px, min(12vw, 30vh - 115px), 300px);
    --av: clamp(84px, min(8.5vw, 14.5vh), 210px);
  }
  /* a hand big enough for two rows (20-odd cards at 1024px): the raised back row takes its height from the piles */
  .game:has(.hand.two-rows) { --pile-w: clamp(84px, min(12vw, 30vh - 115px - var(--cw) * .42), 300px); }

  /* the title screen: one centred column, sized from the window's height */
  .start.screen { max-width: 1180px; padding-block: 64px 24px; }
  .start-art { width: clamp(130px, 24vh, 250px); }
  .logo-top { font-size: clamp(4.4rem, 11vh, 7.2rem); }
  .logo-band { font-size: clamp(2rem, 4.8vh, 3.1rem); }
  .tagline { font-size: 1.3rem; }
  .hub { max-width: 440px; margin-top: clamp(18px, 3.4vh, 36px); }
  /* a short window (1024×640, 1366×768): a smaller cat and slimmer buttons, so all three and the row under them show */
  @media (max-height: 779px) {
    .start-art { width: 20vh; }
    .logo-top { font-size: 10vh; }
    .hub { gap: 10px; }
    .hub-btn { min-height: 64px; padding-block: 6px; }
    .hub-mini { min-height: 48px; }
  }
  .start-rays { width: 900px; margin: -330px 0 0 -450px; }
  /* the setup: the art and title on the left, the panel on the right. The 1fr rows above and below take
     the panel's extra height, so it never pulls the group apart. */
  .start[data-view="setup"].screen {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(480px, 44vw, 530px);
    grid-template-rows: 1fr auto 1fr; grid-template-areas: ". setup" "brand setup" ". setup";
    column-gap: clamp(40px, 6vw, 110px); padding-block: 32px;
    padding-right: max(16px, calc(80px - max(0px, (100vw - 1180px) / 2))); /* clear the gear in the corner on narrower desktops */
  }
  .start-brand { grid-area: brand; }
  .start .setup { grid-area: setup; align-self: center; max-width: none; gap: 14px; border-radius: 26px; padding: 20px 26px 22px; }
  .start .setup .mode-fields { gap: 14px; }

  /* lobby: the room code on the left, the players beside it with the settings under them; from 1280px
     wide, the settings get a column of their own. The head and panels sit in the middle of the window
     (Ernest, 2026-10-23: "center align this on desktop"); a lobby taller than the window still scrolls. */
  .lobby.screen { padding-inline: 24px; gap: 18px; justify-content: center; }
  .lobby-grid { max-width: none; grid-template-columns: clamp(260px, 26vw, 320px) minmax(0, 1fr); grid-template-areas: "room players" "room rules"; gap: 18px; align-items: start; }
  .lobby-room { grid-area: room; padding-block: 24px; }
  .lobby-players { grid-area: players; }
  .lobby-rules { grid-area: rules; }
  .lobby-panel { padding: 20px 22px; border-radius: 24px; }
  .lobby-seats { gap: 18px 10px; }
  .lobby-art { margin-top: 6px; padding-top: 18px; }
  .art-picks { gap: 10px; }
  .art-pick { padding: 14px 4px 10px; }
  .art-pick .card { --cw: clamp(64px, 6.4vw, 96px); }
  .art-pick b { font-size: 1.05rem; }
  /* a short window (1366×768): smaller tiles, so the art adds little to the lobby's height */
  @media (max-height: 859px) {
    .lobby-art { padding-top: 14px; }
    .art-pick { padding: 10px 4px 8px; }
    .art-pick .card { --cw: clamp(56px, 8vh, 72px); }
  }
  @media (min-width: 1280px) {
    .lobby.screen { max-width: 1500px; }
    .lobby-grid { grid-template-columns: clamp(270px, 21vw, 320px) minmax(0, 1fr) clamp(320px, 26vw, 380px); grid-template-areas: "room players rules"; align-items: stretch; }
    .lobby-seat .seat-avatar { width: min(100%, 92px); }
    .lobby-seat.empty .seat-avatar { width: min(76%, 70px); }
  }

  /* game screen */
  /* clip: a card dealt or lifted past the bottom edge must not flash a scrollbar and reflow the table */
  .game.screen { max-width: none; padding-inline: clamp(20px, 2.5vw, 48px); overflow: clip; }
  .game {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "bar bar bar" "seats seats seats" "status table actions" "me me me";
    column-gap: clamp(28px, 3.5vw, 72px);
  }
  .bar { grid-area: bar; padding-top: 14px; }
  .icon-btn { width: 52px; height: 52px; }
  .icon-btn svg { width: 26px; height: 26px; }
  .turn-chip { font-size: 1.45rem; }

  .seats { grid-area: seats; display: flex; flex-wrap: nowrap; justify-content: space-evenly; gap: 16px; padding: 0; max-width: none; margin: 0; }
  .seats > .seat {
    flex: 0 1 230px; width: auto; gap: 0; padding: 8px 12px 12px; border-radius: 24px; background: transparent;
    margin-top: calc(var(--off, 0) * clamp(0px, 7vh - 36px, 42px)); /* the ends sit lower, so the row curves round the table */
  }
  .seat.turn { background: rgba(40, 30, 10, .55); }
  /* a 7 to 10 player game: one row still, with the cats shrunk to fit across */
  .seats.many { gap: 6px; --av: min(clamp(84px, min(8.5vw, 14.5vh), 210px), calc((100vw - 120px) / var(--n) - 24px)); }
  .seats.many .seat { padding: 6px 2px 10px; gap: 0; }
  .seats.many .seat-avatar { width: var(--av); }
  .seats.many .seat-name { font-size: clamp(1rem, 1.25vw, 1.4rem); }
  .seats.many .seat-meta { font-size: .9rem; padding: 0 8px; }
  /* the Markado pill scales with the cats: at 1024px with 10 players a full-size pill cut its name
     ("Ayok", "Pusan") and stood on the deck, and at 1366px "Mingming" lost its last letter. .135 of a
     cat fits the longest one-word name ("Pagpalitin") with the eye and a "+1". */
  .seats.many .seat-mark { font-size: clamp(.7rem, calc(var(--av) * .135), 1.05rem); }
  .seat-glow { border-radius: 28px; }
  .seat-name { order: -1; padding-inline: .08em .16em; font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, 1.5vw, 1.65rem); line-height: 1.1; margin-bottom: 4px; }
  .seat.turn .seat-name { color: var(--accent); }
  .seat-avatar { width: var(--av); }
  .portrait { border-width: 4px; box-shadow: 0 0 0 3px var(--text), 0 8px 18px rgba(0, 0, 0, .45); }
  .seat-think { font-size: 2.2rem; top: 0; right: 10px; }
  .seat-hand { display: block; position: relative; z-index: 1; width: var(--av); height: calc(var(--av) * .42); margin-top: calc(var(--av) * -.2); }
  .seat-hand i {
    position: absolute; left: 50%; bottom: 0; width: calc(var(--av) * .3); aspect-ratio: 5 / 7; margin-left: calc(var(--av) * -.15);
    border-radius: 6px; border: 2px solid var(--ink); transform-origin: 50% 150%; transform: rotate(var(--r, 0deg));
    /* a tiny red card back: two lines stand in for the wordmark */
    background: linear-gradient(var(--accent), var(--accent)) 50% 40% / 66% 9% no-repeat, linear-gradient(var(--text), var(--text)) 50% 60% / 50% 12% no-repeat, var(--red);
    box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3.5px var(--text);
  }
  .painted-back .seat-hand i:not(.god) { background: var(--back-img) center / cover, var(--red); box-shadow: none; }
  /* the Pusang Mabait's back: gold over the Masama's dark red, split by a light seam */
  .seat-hand i.god {
    background: linear-gradient(150deg, #f2cf5b 0 46%, #fff8ef 46% 54%, #3a0d10 54%);
    box-shadow: inset 0 0 0 3.5px var(--text), 0 0 10px 2px rgba(255, 210, 63, .7);
  }
  .painted-mat-back .seat-hand i.god { background: var(--mat-back-img) center / cover, #3a0d10; box-shadow: 0 0 10px 2px rgba(255, 210, 63, .7); }
  .seat-meta {
    position: relative; z-index: 2; margin-top: -6px; padding: 0 12px; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink); border: 2px solid var(--ink); font-weight: 800; font-size: 1rem;
  }
  .seat-meta .mini-card { display: none; }
  .seat.out .seat-meta { background: #e0d2cb; }  .table { grid-area: table; position: relative; gap: clamp(32px, 4vw, 76px); padding: 0; }
  .pile { gap: 8px; }
  .table { container-type: normal; min-height: 0; } /* the desktop table sizes its own piles (--pile-w) */
  .deck, .discard { width: var(--pile-w); border-radius: 16px; }
  .deck .card:nth-child(1) { transform: translate(8px, 8px); }
  .deck .card:nth-child(2) { transform: translate(4px, 4px); }
  .risk { width: var(--pile-w); height: 12px; margin-top: 8px; }
  .pile-label { font-size: 1.1rem; }
  .pile-note { font-size: clamp(1.05rem, calc(var(--pile-w) * .12), 1.4rem); gap: 16px; margin: 0 -14px; }

  /* the foot's padding: my portrait stands a little above its row, into the info's (1024×640) */
  .story { grid-area: status; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 18px; min-height: 0; padding-bottom: 10px; }
  /* the boxes sit on the right, their text centred (Ernest, 2026-10-20) */
  .status { justify-content: flex-end; text-align: center; min-height: 0; padding: 0; font-size: clamp(1.12rem, 1.3vw, 1.4rem); line-height: 1.35; }
  .status > span { max-width: 19em; }
  /* a long effect (Laban Tayo!) on a short desktop ran under my cat and the hand: it scrolls in its space */
  .card-info {
    width: min(100%, 25em); margin: 0; padding: clamp(10px, 1.6vh, 16px) 18px clamp(10px, 1.6vh, 16px) 14px; gap: clamp(12px, 1.2vw, 18px);
    max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  }
  .card-info.more::after { bottom: calc(-1 * clamp(10px, 1.6vh, 16px)); margin: -20px -18px calc(-1 * clamp(10px, 1.6vh, 16px)) -14px; }
  .card-info.tip {
    display: block; width: auto; max-width: 19em; padding: 6px 14px; text-align: center;
    background: rgba(31, 22, 21, .84); border: 1.5px solid rgba(184, 70, 58, .55); box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  }
  .card-info.tip .info-text { color: var(--muted); font-size: 1rem; }
  .info-card .card { --cw: clamp(44px, min(5vw, 7vh - 4px), 88px); }
  .info-name { font-size: clamp(1.2rem, min(1.5vw, 2.6vh), 1.7rem); }
  .info-text { font-size: clamp(.95rem, min(1.1vw, 1.6vh + .2rem), 1.2rem); margin-top: 4px; }
  .info-how { font-size: clamp(.88rem, min(1vw, 1.5vh + .1rem), 1.08rem); margin-top: 6px; }
  .actions { grid-area: actions; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 12px; min-height: 0; padding: 0; }
  .actions .btn { min-height: 58px; font-size: 1.35rem; padding-inline: 30px; max-width: 100%; white-space: normal; } /* "Wala sa mat ang Pusang Mabait" ran off a 1024px screen */
  /* four moves in the column: smaller, or on a 640px-high screen they stood up into the cats' row */
  .actions:has(> :nth-child(4)) { gap: 6px; }
  .actions:has(> :nth-child(4)) .btn { min-height: 42px; font-size: 1.05rem; padding-inline: 20px; }

  .me { grid-area: me; --me-w: calc(var(--av) * 1.45 + 20px); display: grid; grid-template-columns: var(--me-w) minmax(0, 1fr) var(--me-w); align-items: end; }
  .me-tag { grid-column: 1; grid-row: 1; flex-direction: column; gap: 0; padding-bottom: 22px; }
  .me-tag .seat-avatar { width: calc(var(--av) * 1.1); }
  .me-name {
    max-width: var(--me-w); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: -10px; padding: 3px 16px;
    background: var(--bg); color: var(--text); border: 2px solid var(--ink); border-radius: 10px; transform: rotate(-3deg); box-shadow: none;
    font-family: var(--display); font-weight: 400; font-size: clamp(1.1rem, 1.3vw, 1.4rem); line-height: 1.2;
  }
  .me-tag.turn .me-name { background: var(--accent); color: var(--accent-ink); }
  .me-count { margin: 6px 0 0; font-size: 1rem; }
  .me-count::before { content: none; }
  .hand { grid-column: 2; grid-row: 1; margin-top: 0; height: calc(var(--cw) * 1.4 + 30px); }
  .hand.two-rows { height: calc(var(--cw) * 1.4 + 30px + var(--raise)); }
  .hand .card { bottom: 12px; }

  /* dialogs, prompt and effects scale up with the table */
  .modal-box { width: min(620px, 100%); padding: 28px; }
  .modal-title { font-size: 2.1rem; }
  .modal-body { font-size: 1.08rem; }
  .rule-card { grid-template-columns: 84px 1fr; }
  .rule-card .card { --cw: 84px; }
  .rule-card .rule-name { font-size: 1.3rem; }
  .rule-card .rule-text { font-size: 1rem; }
  /* How to play is a landscape sheet: the steps on the left, the cards in two columns on the right, each
     side scrolling on its own under the fixed deck switch; the music credit joins Gets ko na in the foot bar */
  .modal-box:has(.rules) { width: min(1240px, 100%); }
  .modal-box:has(.rules) .modal-title { margin-right: 76px; padding: 20px 0 16px 28px; }
  .rules-close { top: 16px; right: 18px; }
  /* Mga Reward: the free art across the top, the four to unlock two by two under it */
  .modal-box:has(.rewards) .modal-title { margin-right: 76px; padding: 20px 0 16px 28px; }
  .rewards { padding: 20px 28px 24px; }
  .rewards-intro { margin: 0 0 16px; }
  .reward-list { grid-template-columns: 1fr 1fr; gap: 14px; }
  .reward:first-child { grid-column: 1 / -1; }
  .reward { padding: 14px; gap: 16px; }
  .reward-cover .card { --cw: 104px; }
  .reward-cards { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 14px; }
  .reward-cards .card { --cw: 112px; }
  .rules-steps { gap: 12px; }
  .rules-steps span { font-size: .92rem; line-height: 1.4; }
  .rules-sheet {
    display: grid; grid-template-columns: minmax(340px, .8fr) 2fr; grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "how deck" "credit foot";
  }
  .rules { display: contents; }
  .rules-how { grid-area: how; overflow: auto; overscroll-behavior: contain; padding: 22px 28px; }
  .rules-deck { grid-area: deck; display: flex; flex-direction: column; min-height: 0; padding: 22px 28px 0; border-left: 2px solid var(--edge); background: rgba(0, 0, 0, .12); }
  .rules-panels { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; margin-inline: -6px; padding: 0 6px 24px; }
  .rules .rules-credit { grid-area: credit; align-self: stretch; display: flex; align-items: center; padding: 10px 28px; border-top: 2px solid var(--edge); background: var(--raise); }
  .rules-foot { grid-area: foot; padding: 14px 28px; }
  .rule-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rule-card { grid-template-columns: 72px 1fr; align-items: start; }
  .rule-card .card { --cw: 72px; }
  .pick-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 14px; }
  .pick-grid .card { --cw: 116px; }
  .steal-fan, .steal-marked { --cw: 112px; }
  .modal-cards .card { --cw: 150px; }
  /* Silipin ang Future: the cards you saw glow like the crystal ball (Ernest: a stronger glow on desktop) */
  .modal-cards .card { box-shadow: 0 0 0 3px #c9b0ff, 0 0 30px 10px rgba(160, 110, 255, .7), 0 0 70px 18px rgba(155, 231, 255, .3); }
  .modal-cards { padding: 18px 0 6px; }
  /* Silipin ×5: wide enough for all five cards in one row */
  .modal-box:has(.modal-cards > :nth-child(4)) { width: min(880px, 100%); }
  .seat-marked .card { --cw: 44px; }
  .card.big { --cw: 250px; }
  .card.big .card-text { font-size: 1rem; }
  .target { min-height: 72px; font-size: 1.15rem; }
  .target .seat-avatar { width: 58px; }
  .nope-prompt { width: 460px; padding: 22px; top: calc(100dvh - var(--cw) * .95); } /* over the hand, so the played card stays in view */
  .nope-what { font-size: 1.2rem; }
  .btn-nope { font-size: 2.1rem; min-height: 74px; padding-inline: 40px; }
  .fx-banner { font-size: clamp(4rem, 6.5vw, 7.2rem); }
  .fx-stamp { font-size: 4.8rem; }
  .fx-boom { width: 760px; margin: -380px 0 0 -380px; }
}
/* Bigger pop-ups on big screens (Ernest, 2026-10-20: "too small" on desktop; at 1920×1080 the Future cards
   were smaller than the hand's). zoom scales the whole box (text, cards, buttons, gaps) by --mz, so the
   limits that come from the screen are divided by it: the zoomed box still fits inside the screen. */
/* (A browser without zoom keeps --mz at 1, so its limits aren't shrunk for nothing.) */
.modal-box { --mz: 1; zoom: var(--mz); }
@media (min-width: 1024px) and (min-height: 640px) {
  .modal-box { width: min(620px, (100vw - 32px) / var(--mz)); max-height: calc((100dvh - 32px) / var(--mz)); }
  .modal-box:has(.rules) { width: min(1240px, (100vw - 32px) / var(--mz)); height: min(820px, (100dvh - 32px) / var(--mz)); max-height: none; }
  .modal-box:has(.rewards) { width: min(1000px, (100vw - 32px) / var(--mz)); height: min(820px, (100dvh - 32px) / var(--mz)); max-height: none; }
  .modal-box:has(.modal-cards > :nth-child(4)) { width: min(880px, (100vw - 32px) / var(--mz)); }
}
@supports (zoom: 2) {
  @media (min-width: 1280px) and (min-height: 760px) { .modal-box { --mz: 1.15; } }
  @media (min-width: 1600px) and (min-height: 880px) { .modal-box { --mz: 1.3; } }
  @media (min-width: 1900px) and (min-height: 1000px) { .modal-box { --mz: 1.45; } }
  @media (min-width: 2400px) and (min-height: 1300px) { .modal-box { --mz: 1.8; } }
  /* How to play and Mga Reward fill the screen anyway, so they stay a step smaller: more fits without scrolling */
  @media (min-width: 1280px) and (min-height: 760px) { .modal-box:is(:has(.rules), :has(.rewards)) { --mz: 1; } }
  @media (min-width: 1600px) and (min-height: 880px) { .modal-box:is(:has(.rules), :has(.rewards)) { --mz: 1.15; } }
  @media (min-width: 1900px) and (min-height: 1000px) { .modal-box:is(:has(.rules), :has(.rewards)) { --mz: 1.3; } }
  @media (min-width: 2400px) and (min-height: 1300px) { .modal-box:is(:has(.rules), :has(.rewards)) { --mz: 1.6; } }
}
/* A short desktop (1024×640): three full-size moves stood up into a two-line Markado pill above them */
@media (min-width: 1024px) and (min-height: 640px) and (max-height: 799px) {
  .actions { gap: 8px; }
  .actions .btn { min-height: 44px; font-size: 1.1rem; padding-inline: 22px; }
  .actions:has(> :nth-child(4)) { gap: 5px; }
  .actions:has(> :nth-child(4)) .btn { min-height: 38px; font-size: 1rem; padding-inline: 18px; }
  /* the start panel packs tighter so Laro na! stays on screen at 1366×768 */
  .start.screen { padding-block: 20px; }
  .start .setup, .start .setup .mode-fields { gap: 10px; }
  .start .setup { padding: 18px 22px; }
  .start .seg span { min-height: 38px; }
  .start .field input[type="text"] { min-height: 44px; }
  .start .profile-bar { padding-block: 6px; }
  .start .btn-big { min-height: 52px; }
}
/* 1024×640 to 1280×720: the tiles drop their one-line descriptions (the rules have them) and the name box keeps its label for screen readers only */
@media (min-width: 1024px) and (min-height: 640px) and (max-height: 749px) {
  .start.screen { padding-block: 12px; }
  .start .setup, .start .setup .mode-fields { gap: 8px; }
  .start .setup { padding-block: 14px; }
  .start .pack-body small { display: none; }
  .start #nameField .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Tall desktops have room for the story and the card info together; shorter ones swap them like phones. */
@media (min-width: 1024px) and (min-height: 800px) {
  .game.has-info .status { display: flex; }
}
/* The small labels grow with the screen (Ernest, 2026-10-20: "some font sizes are too small" at 1920×1080).
   Each keeps its old size at 1024px and is about a fifth bigger at 1920px: card counts, ranks, the pile
   labels, the hover tip and the line under the "BULAG KA!" band. */
@media (min-width: 1024px) and (min-height: 640px) {
  .seat-meta, .me-count, .card-info.tip .info-text { font-size: clamp(1rem, .75rem + .4vw, 1.3rem); }
  .seats.many .seat-meta { font-size: clamp(.9rem, .7rem + .3vw, 1.15rem); }
  .seat-rank, .me-rank { font-size: clamp(.78rem, .55rem + .35vw, 1.05rem); }
  .seats.many .seat-rank { font-size: clamp(.7rem, .5rem + .3vw, .92rem); }
  .pile-label { font-size: clamp(1.1rem, .85rem + .4vw, 1.45rem); }
  .hand.blind::after { font-size: clamp(.95rem, .7rem + .4vw, 1.25rem); }
}
@media (max-height: 700px) and (max-width: 759px) {
  :root { --cw: clamp(58px, 15vw, 84px); }
  .seat-avatar { width: 42px; }
  /* a 10-player game with a two-row hand must still fit a 667px phone: the piles may shrink further,
     and the story line and the space under the hand get tighter */
  /* The card info used to grow up over the piles here, and a second row of buttons pushed my tag under
     them (Ernest, 2026-10-20: overlapping on phones). Now everything keeps its own space: the info sits
     in the story's row and the piles (the row's flexible 1fr) shrink to make room, down to ~.8 of a
     hand card; the seats, the Ikot/Higop badges and the info are a little tighter to leave them more. */
  .table {
    min-height: calc(var(--cw) * 1.12 + 56px); padding: 4px 0;
    --pw: clamp(calc(var(--cw) * .8), min(31vw, calc((100cqh - 56px) * 5 / 7), calc((100cqw - var(--note) - 2 * clamp(28px, 8vw, 80px)) / 2)), 168px);
  }
  .pile { gap: 4px; }
  .pile-note { font-size: .76rem; gap: 6px; }
  .pile-note > span { padding: 3px 8px 3px 6px; }
  .seats.many { row-gap: 3px; padding-top: 4px; }
  .seats.many .seat { padding: 2px 2px 4px; }
  .seats.many .seat-name, .seats.many .seat-meta { line-height: 1.2; }
  .status { min-height: 44px; }
  .bar { padding: 5px 0 2px; }
  .hand { height: calc(var(--cw) * 1.4 + 26px); }
  .hand.two-rows { height: calc(var(--cw) * 1.4 + 26px + var(--raise)); }
  .hand .card { bottom: 8px; }
  /* short phones: the card info keeps just the name and effect, run together, so it's two or three
     lines tall (five for a cat's long text). Past what the screen leaves it (the bar, a 10-player seat
     block, the smallest piles, a row of two-line moves and my hand take ~540px) it scrolls rather than
     push the hand off the bottom. */
  .info-card, .info-how { display: none; }
  .card-info { display: block; padding: 6px 12px; margin: 0 0 4px; max-height: max(64px, calc(100dvh - 545px)); overflow-y: auto; overscroll-behavior: contain; }
  /* a two-row hand is ~40px taller: the info gives that up (10 players, 14 cards and Tuyo's text ran 8px past 667) */
  .game:has(.hand.two-rows) .card-info { max-height: max(56px, calc(100dvh - 590px)); }
  .card-info.more::after { bottom: -6px; margin: -20px -12px -6px; }
  .info-name, .info-text { display: inline; }
  .info-name { font-size: 1rem; margin-right: .4em; }
  .info-text { font-size: .86rem; line-height: 1.22; }
}
/* ---------- phone landscape ----------
   The phone column is ~800px tall and put the deck and hand below the fold on a 390px-high screen.
   A small version of the desktop table instead: every cat in one row along the top, the story, piles
   and moves side by side in the middle, and my tag beside the hand at the bottom.
   Up to 639px high, where the desktop table (640px+) takes over: an Android tablet in landscape has a
   ~1280×620 page under Chrome's tabs and address bar, fell between the two into the phone column, and
   its hand sat below the screen's edge, so a tapped card showed nothing (2026-10-29). */
@media (orientation: landscape) and (max-height: 639px) {
  :root { --cw: clamp(50px, 15vh, 80px); }
  .game.screen { max-width: none; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .game {
    min-height: 0;
    /* the story gets the wider side: a card's effect can run to 130 letters */
    grid-template-columns: minmax(0, 1.4fr) auto minmax(132px, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "bar bar bar" "seats seats seats" "status table actions" "me me me";
    column-gap: clamp(12px, 2.4vw, 40px);
  }
  .bar { grid-area: bar; padding: 4px 0 2px; }

  /* all the cats in one row, small; a mark's pill sits on the portrait so the row never grows */
  .seats, .seats.many {
    grid-area: seats; --avw: clamp(28px, 8.5vh, 40px); flex-wrap: nowrap; justify-content: center; gap: 6px;
    max-width: none; padding-top: 2px;
  }
  .seats > .seat { flex: 0 1 104px; width: auto; padding: 3px 2px 4px; gap: 0; }
  .seats .seat-avatar, .seats.many .seat-avatar { width: var(--avw); }
  .seats .seat-name, .seats.many .seat-name { font-size: .78rem; line-height: 1.2; }
  .seats .seat-meta, .seats.many .seat-meta { font-size: .72rem; line-height: 1.2; }
  .seats .seat-marked, .seats.many .seat-marked { position: absolute; z-index: 2; left: auto; right: 1px; top: calc(3px + var(--avw) * .875); transform: translateY(-100%); }
  .seats .seat-mark, .seats.many .seat-mark { flex-direction: row; gap: .2em; font-size: .74rem; padding: .08em .45em .08em .35em; box-shadow: 0 2px 0 var(--ink), 0 0 10px 2px rgba(255, 176, 46, .6); }
  .seats .seat-mark b, .seats .seat-mark em { display: none; }
  .seats .seat-mark::after { content: attr(data-n); }
  .seats .seat-mark svg { width: 1.25em; }
  .seats .seat.marked.blind .seat-avatar::after { top: 14%; }
  .seat-turns { font-size: .72rem; }

  /* not a size container here: its grid column is "auto", and containment would make that 0 wide.
     The piles get what the height leaves: the bar, the seat row and the hand take ~235px, the labels ~48px. */
  .table {
    grid-area: table; padding: 4px 0; gap: clamp(20px, 4vw, 44px); container-type: normal; min-height: 0;
    --pw: clamp(calc(var(--cw) * .95), calc((100dvh - 290px) / 1.4), 150px);
  }
  /* a two-row hand is taller by its raise (anim.js: max(40px, .42 of a card's height)), and the piles
     stood up into the cats' row: they give up that height */
  .game:has(.hand.two-rows) .table { --pw: clamp(calc(var(--cw) * .7), calc((100dvh - 290px - max(40px, var(--cw) * .59)) / 1.4), 150px); }
  .pile { gap: 4px; }
  .pile-label { font-size: .78rem; line-height: 1.2; white-space: normal; max-width: calc(var(--pw) + 40px); } /* "40 cards · Bomba: 23%" in two lines keeps the table narrow */
  .pile-note { font-size: .74rem; gap: 6px; }
  .pile-note > span { padding: 3px 8px 3px 6px; }

  /* the story on the left of the piles, the moves on their right */
  .story { grid-area: status; position: static; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
  /* the box on the right, its text centred like the desktop's (Ernest, 2026-10-20) */
  .status { min-height: 0; padding: 0; justify-content: flex-end; text-align: center; font-size: .92rem; }
  .card-info { position: static; width: min(100%, 22em); max-height: 100%; overflow: auto; margin: 0; padding: 6px 10px; box-shadow: none; }
  .info-card, .info-how { display: none; }
  .info-name { font-size: .98rem; }
  .info-text { font-size: .8rem; line-height: 1.22; }
  .actions { grid-area: actions; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 6px; min-height: 0; padding: 0; }
  .actions .btn { min-height: 44px; font-size: 1rem; padding-inline: 18px; max-width: 100%; white-space: normal; } /* "I-play: Silipin ang Future ×5" ran off the edge */
  /* three or four moves: two to a row (stacked, they stood up into the cats' row), "I-play" without the
     card's name (the info names it), and with three, "Mag-draw" across the bottom */
  .actions:has(> :nth-child(3)) { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); align-content: center; justify-content: start; gap: 5px; }
  .actions:has(> :nth-child(3)) .btn { min-height: 36px; font-size: .84rem; padding-inline: 10px; line-height: 1.15; text-align: center; justify-content: center; }
  .actions:has(> :nth-child(3)) .btn-more { display: none; }
  .actions:has(> :nth-child(3)):not(:has(> :nth-child(4))) .btn-primary { grid-column: 1 / -1; }

  /* my tag on the left of the hand, an empty column of the same width on its right to keep the hand centred */
  .me { grid-area: me; display: grid; grid-template-columns: 112px minmax(0, 1fr) 112px; align-items: end; }
  .me-tag { grid-column: 1; grid-row: 1; flex-direction: column; gap: 0; padding-bottom: 10px; font-size: .82rem; line-height: 1.2; text-align: center; }
  .me-tag .seat-avatar { width: 34px; }
  .me-name { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .me-count { margin: 0; max-width: 100px; } /* "8 cards · Bulag ka" in Nunito filled the column, and the fanned hand reaches 3px into it: two lines */
  .me-count::before { content: none; }
  .me-tag .seat-turns { margin: 2px 0 0; }
  .hand { grid-column: 2; grid-row: 1; margin-top: 0; height: calc(var(--cw) * 1.4 + 22px); }
  .hand.two-rows { height: calc(var(--cw) * 1.4 + 22px + var(--raise)); }
  .hand .card { bottom: 8px; }
  .hand .mark-tag { font-size: 13px; padding: .3em; }
  .hand .mark-tag span { display: none; }
  .hand .mark-tag svg { width: 1.5em; }
  .hand.blind::after { display: none; } /* the "BULAG KA!" band says it; the long line has no room */

  /* the Ayoko! prompt over the hand's top edge, so the played card stays in view */
  .nope-prompt { top: auto; bottom: 8px; transform: translateX(-50%); padding: 10px 14px; }
  .nope-what { margin-bottom: 8px; }
  .btn-nope { font-size: 1.3rem; min-height: 50px; }
}