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

@font-face {
  font-family: "Lilita One";
  src: url("fonts/lilita-one-latin.woff2") format("woff2");
  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: "Lilita One";
  src: url("fonts/lilita-one-latin-ext.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Baloo 2";
  src: url("fonts/baloo-2-latin.woff2") format("woff2");
  font-weight: 500 800;
  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: "Baloo 2";
  src: url("fonts/baloo-2-latin-ext.woff2") format("woff2");
  font-weight: 500 800;
  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;
  --line: #b8463a;
  --text: #fff8ef;
  --muted: #eadbd3;
  --accent: #ffd23f;
  --accent-ink: #2b1a12;
  --red: #d8261f;
  --nope: #c81e1e;
  --ink: #2b1a12;
  --scrim: rgba(14, 8, 7, .62); /* the backdrop's dark layer; tools/backdrop-contrast.mjs assumes this */
  --display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Baloo 2", system-ui, sans-serif;
  --cw: clamp(64px, 17.5vw, 104px); /* hand card width */
  --radius: 12px;
  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-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%; }
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 40%, rgba(14, 8, 7, .45)), var(--scrim);
}

.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: .02em;
  white-space: nowrap; line-height: 1.1;
}
.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.5rem; 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; }

/* ---------- start screen ---------- */
.start { display: flex; flex-direction: column; align-items: center; padding-top: 20px; padding-bottom: 32px; text-align: center; }
.start-art { width: min(150px, 38vw); 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); }
.start-art svg, .start-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.logo {
  font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 10vw, 4.6rem); line-height: 1.05; margin: 18px 0 4px;
  color: var(--accent); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink);
}
.logo span { color: var(--text); }
.tagline { margin: 0 0 16px; color: var(--text); font-size: 1.1rem; font-weight: 700; }
.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);
}
.field { border: 0; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 700; color: var(--muted); padding: 0; font-size: .95rem; }
.field input[type="text"] {
  min-height: 48px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); padding: 8px 14px; font-size: 1.05rem;
}
.field input[type="text"]::placeholder { color: #b3a39c; }
.seg { display: flex; gap: 6px; background: var(--bg); border: 2px solid var(--line); 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 ---------- */
.lobby { display: flex; flex-direction: column; align-items: center; padding-top: 20px; padding-bottom: 32px; text-align: center; }
.lobby-box { max-width: 480px; }
/* phones: the two columns melt into one list, players before the host's settings */
.lobby-col { display: contents; }
.host-controls { order: 1; }
.lobby-wait, .lobby-col > .btn { order: 2; }
.lobby-kicker { margin: 0; color: var(--muted); font-weight: 700; }
.room-code {
  margin: -4px 0 0; font-family: var(--display); font-size: clamp(3.2rem, 16vw, 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); }
.lobby-share { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lobby-share .btn { flex: 1 1 0; min-width: max-content; margin-top: 0; padding-inline: 14px; } /* equal widths; wraps only when they don't fit */
.lobby-head { margin: 8px 0 0; font-family: var(--display); font-weight: 400; font-size: 1.3rem; text-align: left; }
.lobby-head span { color: var(--muted); font-family: var(--body); font-weight: 700; font-size: 1rem; }
.lobby-seats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lobby-seat { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 10px; border-radius: 14px; background: var(--bg); border: 2px solid #3a2a27; text-align: left; }
.lobby-seat .seat-avatar { width: 46px; flex: none; }
.lobby-seat.empty { border-style: dashed; background: transparent; }
.lobby-seat.empty .seat-avatar { aspect-ratio: 1; border-radius: 50%; border: 2px dashed #5a4642; width: 40px; margin-inline: 3px; }
.lobby-seat.empty .lobby-name { color: #b3a39c; font-weight: 600; }
.lobby-seat.away .seat-avatar { opacity: .45; }
.lobby-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.lobby-name { font-weight: 800; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-tag { color: var(--muted); font-weight: 600; font-size: .9rem; }
.lobby-tag:empty { display: none; }
.btn-small { min-height: 44px; padding: 4px 16px; font-size: 1rem; border-width: 2px; }
.host-controls { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.lobby-wait { margin: 4px 0 0; color: var(--text); font-weight: 600; }
.lobby-box .btn-big { margin-top: 0; }

/* 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; }
.turn-chip { margin: 0; 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); }

.seats { list-style: none; margin: 0; padding: 6px 0 0; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 132px)); justify-content: center; gap: 8px; }
.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); }
.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; }
.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; }
.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 */

.table { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 8vw, 80px); min-height: 0; padding: 8px 0; }
.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; }
.deck, .discard { position: relative; width: calc(var(--cw) * 1.15); 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%; }
.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); }
.discard { border: 3px dashed var(--line); padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.discard:disabled { cursor: default; }
.discard .card { position: absolute; inset: -3px; width: calc(100% + 6px); }
/* 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: calc(var(--cw) * 1.15); 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); }
.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; }
.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-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 .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 ---------- */
.card {
  --c: #f4e3c1; --k: var(--ink);
  width: var(--cw); aspect-ratio: 5 / 7; border-radius: var(--radius); padding: 0;
  background: 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-name {
  font-family: var(--display); font-size: calc(var(--cw) * .135); line-height: 1.05; padding: 5% 6% 3%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.card-name.long { white-space: normal; font-size: calc(var(--cw) * .112); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-art { flex: 1; margin: 0 5% 5%; border-radius: 8px; overflow: hidden; border: 2px solid var(--ink); min-height: 0; background: #fff; }
.card-art svg { width: 100%; height: 100%; }
.card-art .painted { display: block; width: 100%; height: 100%; object-fit: cover; }
.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.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; }
.fx .fly { position: fixed; }
.fx .fly .card { --cw: 100px; }
.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);
}
.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 {
  position: fixed; font-family: var(--display); font-size: clamp(2.2rem, 10vw, 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); }
.fx-paw { position: fixed; pointer-events: none; }
.fx-paw svg { width: 100%; height: auto; }
.fx-confetti { position: fixed; top: -20px; width: 10px; height: 16px; border-radius: 2px; }
.fx-glowball { position: fixed; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(155, 231, 255, .8), rgba(123, 63, 196, 0) 70%); }

/* ---------- 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);
}
.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); }
.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, loosely overlapped like a held hand */
/* One row: the overlap grows with the count (--n, set in ui.js) so any hand fits the dialog. */
.steal-fan { display: flex; justify-content: center; padding: 18px 12px 8px; }
.steal-fan .card { --cw: 76px; flex: none; }
.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; }
.rules h3 { font-family: var(--display); font-weight: 400; font-size: 1.2rem; line-height: 1.1; margin: 18px 0 6px; color: var(--accent); }
.rules ol { padding-left: 1.3em; margin: 0 0 8px; }
.rules li { margin-bottom: 6px; }
.rule-cards { display: grid; gap: 10px; }
.rule-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.rule-card .card { --cw: 64px; }
.rule-card .rule-name { display: block; font-family: var(--display); font-weight: 400; font-size: 1.1rem; line-height: 1.1; }
.rule-card .rule-text { color: var(--muted); font-size: .92rem; }
.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; }
.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); }
  .start-art { width: 200px; }
  .start { padding-top: 36px; }
  .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);
    --pile-w: clamp(105px, min(12vw, 30vh - 95px), 300px); /* what's left after the cats and the hand */
    --av: clamp(84px, min(8.5vw, 14.5vh), 210px);
  }

  /* start screen: art and title on the left, the setup panel on the right */
  .start.screen {
    max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
    grid-template-rows: repeat(4, auto); align-content: center; column-gap: clamp(40px, 6vw, 110px); padding-block: 40px;
  }
  .start-art { grid-column: 1; justify-self: center; width: clamp(220px, 24vw, 330px); }
  .logo { grid-column: 1; font-size: clamp(3.8rem, 5.4vw, 5.8rem); }
  .tagline { grid-column: 1; font-size: 1.3rem; margin-bottom: 0; }
  .fineprint { grid-column: 1; justify-self: center; margin-top: 14px; }
  .setup {
    grid-column: 2; grid-row: 1 / span 4; align-self: center; max-width: none; gap: 16px;
    border-radius: 26px; padding: 28px 28px 24px;
  }

  /* lobby: room code, share and the host's settings on the left, the players and Simulan on the right */
  .lobby.screen { justify-content: center; padding-block: 40px; }
  .lobby-box {
    max-width: 940px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(28px, 3.5vw, 48px);
    align-items: start; padding: 32px;
  }
  .lobby-col { display: flex; flex-direction: column; gap: 14px; }
  .lobby-head { margin-top: 0; }

  /* 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; justify-content: space-evenly; gap: 16px; padding: 0; }
  .seat {
    flex: 0 1 230px; 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); }
  .seat-glow { border-radius: 28px; }
  .seat-name { order: -1; 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);
  }
  .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; }
  .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; }

  .story { grid-area: status; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 18px; min-height: 0; }
  .status { justify-content: flex-end; text-align: right; min-height: 0; padding: 0; font-size: clamp(1.12rem, 1.3vw, 1.4rem); line-height: 1.35; }
  .status > span { max-width: 19em; }
  .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); }
  .card-info.tip { display: block; width: auto; max-width: 19em; padding: 0; background: none; border: 0; text-align: right; }
  .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; }

  .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);
    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 .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; }
  .pick-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 14px; }
  .pick-grid .card { --cw: 116px; }
  .steal-fan .card { --cw: 112px; }
  .modal-cards .card { --cw: 150px; }
  .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; }
}
/* 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; }
}
@media (max-height: 700px) and (max-width: 759px) {
  :root { --cw: clamp(58px, 15vw, 84px); }
  .seat-avatar { width: 42px; }
  /* short phones: the card info keeps just the name and effect so the piles keep their room */
  .info-card, .info-how { display: none; }
  .card-info { padding-block: 6px; margin-bottom: 4px; }
  .info-name { font-size: 1.05rem; }
  .info-text { font-size: .9rem; line-height: 1.25; }
}