/* Frenzy: the game screen (src/ui/screens/game*.ts, DESIGN 9.2). The screen root carries data-layout = portrait,
   landscape or short (src/render/screen-layout.ts decides; its budgets mirror the sizes here, and its test and the
   smoke check that everything fits). The screen always fits the view: the board, the player's shark card, the hand and
   the big button never need scrolling; the action list scrolls inside itself; the log folds to its last line on
   phones. Sizes are in rem so the text-size option scales them; touch targets are at least 44 px (DESIGN 9.5).
   No inline styles: the CSP allows these files only. */

.screen.screen-game {
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100vh;
  block-size: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* --- Header ------------------------------------------------------------------------------------------------------- */

.game-header { gap: 0.25rem 0.5rem; flex-wrap: nowrap; padding-block: max(0.25rem, env(safe-area-inset-top)) 0.25rem; min-width: 0; }
.game-back { min-height: 44px; min-width: 44px; padding-inline: 0.75rem; }
.game-header .game-banner { flex: 1 1 auto; min-width: 0; font-size: clamp(0.875rem, 4.2vw, 1.5rem); line-height: 1.1; overflow-wrap: break-word; }
[data-layout='landscape'] .game-header .game-banner { font-size: clamp(1rem, 2.2vw, 1.5rem); }
/* Phones: Back is its arrow alone (its name stays for screen readers), and the round counter is small, so the turn
   banner keeps the width. */
[data-layout='portrait'] .game-back, [data-layout='short'] .game-back { inline-size: 44px; padding: 0; }
[data-layout='portrait'] .back-label, [data-layout='short'] .back-label {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
[data-layout='portrait'] .game-back::before, [data-layout='short'] .game-back::before { content: '\2190'; }
/* Portrait: the banner takes the middle with the round counter under it, between Back and the extra controls. */
[data-layout='portrait'] .game-header {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "back banner extra" "back side extra";
  align-items: center; column-gap: 0.5rem; row-gap: 0;
}
[data-layout='portrait'] .game-back { grid-area: back; }
[data-layout='portrait'] .game-header .game-banner { grid-area: banner; font-size: min(1.125rem, 5vw); }
[data-layout='portrait'] .game-extra { grid-area: extra; }
[data-layout='portrait'] .game-header-side { grid-area: side; flex-direction: row; align-items: center; gap: 0.5rem; }
[data-layout='portrait'] .game-round { font-size: 0.75rem; line-height: 1.15; }
[data-layout='short'] .game-round { font-size: 0.75rem; }
.game-banner.mine { color: var(--fin); }
.game-banner.turn-flash { animation: banner-flash 0.5s ease-out; }
@keyframes banner-flash { from { transform: scale(1.1); transform-origin: left center; text-shadow: 0 0 0.6em rgb(255 107 74 / 0.8); } }
.game-header-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; flex: none; }
.game-round { margin: 0; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.game-timer { margin: 0; padding: 0 0.5rem; border-radius: 999px; background: var(--foam); color: var(--ocean-deep); font-weight: 800; font-variant-numeric: tabular-nums; }
.game-timer.urgent { background: var(--fin); color: var(--fin-ink); }
/* The slot for extra header controls, filled by mountGameExtras (src/ui/emotes.ts): the emote button. On phones a
   control shows its icon alone, 44 px, so the banner keeps the width (its name stays for screen readers). */
.game-extra { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.game-extra:empty { display: none; }
[data-layout='portrait'] .game-extra .emote-open, [data-layout='short'] .game-extra .emote-open { inline-size: 44px; padding: 0; justify-content: center; }
[data-layout='portrait'] .emote-open-text, [data-layout='short'] .emote-open-text {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- The grid ----------------------------------------------------------------------------------------------------- */

.game-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 0.375rem;
  padding: 0.375rem max(0.375rem, env(safe-area-inset-right)) max(0.375rem, env(safe-area-inset-bottom)) max(0.375rem, env(safe-area-inset-left));
  min-width: 0;
}
.game-board { grid-area: board; position: relative; min-width: 0; min-height: 0; }
.game-canvas {
  position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; border-radius: 12px;
  touch-action: manipulation; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.game-me { grid-area: me; min-width: 0; }
.game-sharks { grid-area: sharks; min-width: 0; display: grid; gap: 0.375rem; }
.game-hand { grid-area: hand; min-width: 0; }
.game-actions { grid-area: actions; display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.big-button { grid-area: big; inline-size: 100%; font-size: 1.125rem; min-height: max(52px, 2.75rem); }
.game-log { grid-area: log; position: relative; min-width: 0; }
.game-sub { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 700; color: var(--muted); }

/* Portrait phones and tall pads (DESIGN 9.2): the board across the top, the other sharks as a strip, the player's card
   and hand, the actions (scrolling inside), the big button, the log's last line. The board keeps its natural shape
   unless the view is too short; then it shrinks (never under 150 px) before anything else is pushed out. */
[data-layout='portrait'] .game-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(150px, auto) auto auto auto minmax(1.5rem, 1fr) auto auto;
  grid-template-areas: "board" "sharks" "me" "hand" "actions" "big" "log";
}
[data-layout='portrait'] .game-left, [data-layout='portrait'] .game-right { display: contents; }
[data-layout='portrait'] .game-board { aspect-ratio: 6 / 4.1; max-block-size: 60vh; align-self: stretch; }
[data-layout='portrait'] .game-sharks { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
[data-layout='portrait'] .game-hand .game-sub, [data-layout='short'] .game-hand .game-sub { display: none; }

/* Landscape and desktop: the shark cards down the left, the board in the middle with the hand under it, the actions,
   the big button and the log down the right. */
[data-layout='landscape'] .game-grid, [data-layout='short'] .game-grid {
  grid-template-columns: min(24vw, 13rem) minmax(0, 1fr) min(30vw, 20rem);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "left board right" "left hand right";
}
.game-left { grid-area: left; display: flex; flex-direction: column; gap: 0.375rem; min-height: 0; min-width: 0; overflow-y: auto; }
.game-right { grid-area: right; display: flex; flex-direction: column; gap: 0.375rem; min-height: 0; min-width: 0; }
.game-right .game-actions { flex: 1 1 auto; }
.game-right .big-button, .game-right .game-log { flex: none; }
[data-layout='landscape'] .game-sharks, [data-layout='short'] .game-sharks { grid-template-columns: minmax(0, 1fr); }
[data-layout='short'] .game-grid { grid-template-columns: min(22vw, 13rem) minmax(0, 1fr) min(27vw, 20rem); }
[data-layout='short'] .game-header { padding-block: 0.125rem; }

/* --- Shark cards -------------------------------------------------------------------------------------------------- */

.shark-card {
  margin: 0;
  padding: 0.375rem 0.5rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-size: 0.8125rem;
  line-height: 1.25;
  min-width: 0;
}
.shark-card.mine { border-color: var(--foam); }
.shark-card.active { border-color: var(--fin); box-shadow: 0 0 0 2px rgb(255 107 74 / 0.35); }
.shark-card p { margin: 0; }
/* The shark's name never gives way to the seat's label: a long label (an online player's generated name) wraps under
   it instead of squeezing it. */
.shark-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.3rem; font-weight: 800; min-width: 0; }
.shark-name-text { flex: 0 0 auto; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shark-who {
  flex: 1 1 auto; min-width: 0; margin-inline-start: auto; text-align: end; overflow-wrap: anywhere;
  font-size: 0.6875rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
}
.shark-size { display: flex; align-items: center; gap: 0.3rem; }
.shark-track { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.track-num { font-variant-numeric: tabular-nums; font-weight: 700; }
[data-layout='portrait'] .game-sharks .track-max { display: none; }
/* The phone strip has no label beside the name: the name may shorten instead of wrapping. */
[data-layout='portrait'] .game-sharks .shark-name { flex-wrap: nowrap; }
[data-layout='portrait'] .game-sharks .shark-name-text { flex: 0 1 auto; min-width: 0; }
.shark-ability { color: var(--muted); }
.shark-status { display: block; color: var(--fin); font-weight: 700; }
.pips { display: inline-flex; gap: 2px; }
.pip { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; border: 1px solid rgb(242 247 250 / 0.5); }
.pips.belly .pip.on { background: #f28c8c; border-color: #f28c8c; }
.pips.bites .pip.on { background: #c42840; border-color: #ff8a9a; }
.icon-sm { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.icon-xs { inline-size: 1rem; block-size: 1rem; flex: none; }
/* Icons drawn in ink (sizes, zones, card types) sit on a light disc so they read on the dark panels. */
.icon-badge { inline-size: 1.375rem; block-size: 1.375rem; padding: 0.125rem; flex: none; border-radius: 50%; background: #f7f3e8; box-shadow: 0 0 0 1px #1b2447; }
.icon-badge.frenzy { background: #ff3d7f; }

/* Portrait: the player's card on one or two lines; the other sharks compact (name, then size and numbers). */
[data-layout='portrait'] .game-me .shark-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.625rem; padding: 0.25rem 0.5rem; }
[data-layout='portrait'] .game-me .shark-name { flex: 1 1 100%; }
[data-layout='portrait'] .game-me .shark-name { flex: 0 1 auto; }
[data-layout='portrait'] .game-me .shark-who { margin-inline-start: 0.25rem; }
[data-layout='portrait'] .game-me .shark-ability { display: none; }
[data-layout='portrait'] .game-me .shark-size { margin-inline-end: auto; }
[data-layout='portrait'] .game-sharks .shark-card,
[data-layout='short'] .game-sharks .shark-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.375rem; padding: 0.25rem 0.375rem; font-size: 0.75rem; }
[data-layout='portrait'] .game-sharks .shark-name, [data-layout='short'] .game-sharks .shark-name { flex: 1 1 100%; }
[data-layout='portrait'] .game-sharks :is(.shark-who, .pips, .shark-ability, .shark-size-text, .track-belly .icon-xs, .track-bites .icon-xs),
[data-layout='short'] .game-sharks :is(.shark-who, .pips, .shark-ability, .shark-size-text) { display: none; }
[data-layout='portrait'] .game-sharks .icon-badge { inline-size: 1rem; block-size: 1rem; padding: 1px; }
[data-layout='portrait'] .game-sharks .shark-card { font-size: 0.6875rem; gap: 0.125rem 0.25rem; }
[data-layout='portrait'] .game-sharks .shark-size, [data-layout='portrait'] .game-sharks .shark-track { gap: 0.125rem; }
[data-layout='portrait'] .game-sharks .track-belly .track-num::before { content: '\2665\00a0'; color: #f28c8c; }
[data-layout='portrait'] .game-sharks .track-bites .track-num::before { content: '\2716\00a0'; color: #ff8a9a; }
[data-layout='short'] .game-me .shark-ability { display: none; }
[data-layout='short'] .shark-card { padding: 0.25rem 0.375rem; }

/* --- The hand ----------------------------------------------------------------------------------------------------- */

.hand-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.375rem; }
.hand-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.125rem 0.25rem;
  min-height: 48px; border-radius: 10px; padding: 0.25rem 0.375rem; font-size: 0.8125rem; line-height: 1.15;
  border-color: var(--line); min-width: 0;
}
.hand-card.usable { border-color: #ffb627; box-shadow: 0 0 0 2px rgb(255 182 39 / 0.35); }
.hand-card.back-sunlit { background: rgb(34 166 186 / 0.35); }
.hand-card.back-twilight { background: rgb(28 84 122 / 0.6); }
.hand-card.back-midnight { background: rgb(26 46 86 / 0.8); }
.hand-card.back-abyss { background: rgb(14 16 34 / 0.9); }
.hand-card.back-action { background: rgb(122 92 176 / 0.45); }
.hand-name { font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.hand-stats { font-variant-numeric: tabular-nums; color: var(--muted); }
.hand-card[aria-pressed='true'] .hand-stats { color: var(--ocean-deep); }
.hand-empty { margin: 0; color: var(--muted); align-self: center; }
[data-layout='portrait'] .hand-card .hand-type { display: none; }
/* Phones: hand cards stay one short block; a long name folds to two lines (portrait) or one (short). */
[data-layout='portrait'] .hand-card, [data-layout='short'] .hand-card { font-size: 0.75rem; min-height: 48px; }
[data-layout='portrait'] .hand-name { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
[data-layout='short'] .hand-card { flex-wrap: nowrap; min-height: 44px; }
[data-layout='short'] .hand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-layout='short'] .hand-card .hand-type, [data-layout='short'] .hand-card .hand-zone { display: none; }

/* --- Actions ------------------------------------------------------------------------------------------------------ */

.game-hint { margin: 0; font-weight: 700; }
.game-hint:empty { display: none; }
.game-note { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.game-note:empty { display: none; }
.game-note.note-reason { color: #ffb4a3; font-weight: 700; }
.game-note.note-info { color: var(--foam); }
.game-list { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; min-width: 0; }
.list-label { font-weight: 700; color: var(--muted); }
.chip { min-width: var(--target); padding-inline: 0.625rem; border-radius: 12px; font-variant-numeric: tabular-nums; }
.chip[aria-pressed='true'], .act-row[aria-pressed='true'], .tool[aria-pressed='true'], .hand-card[aria-pressed='true'] {
  background: var(--foam); color: var(--ocean-deep); border-color: var(--foam);
}
.act-row {
  display: flex; flex-wrap: wrap; gap: 0.125rem 0.5rem; align-items: baseline; justify-content: flex-start;
  flex: 1 1 100%; text-align: start; border-radius: 12px; padding-inline: 0.75rem; font-weight: 600;
}
.act-verb { font-weight: 800; }
.act-stats, .act-chance { font-size: 0.875rem; }
.act-chance { color: var(--fin); }
.act-row[aria-pressed='true'] .act-chance { color: #b8361d; }
.game-tools { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.game-tools:empty { display: none; }
.tool { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 12px; padding-inline: 0.75rem; font-size: 0.9375rem; }
.game-auto summary { cursor: pointer; min-height: var(--target); display: flex; align-items: center; }
.auto-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
[data-layout='portrait'] .act-row, [data-layout='short'] .act-row {
  flex: 1 1 calc(33% - 0.375rem); flex-direction: column; align-items: flex-start; gap: 0; font-size: 0.8125rem; line-height: 1.15;
  padding: 0.25rem 0.5rem; min-width: 5.5rem;
}
/* Phones: when the action list shows its rows, the big button already says "Pick a move". */
[data-layout='portrait'] .game-actions:has(.act-row) .game-hint { display: none; }
[data-layout='portrait'] .game-hint, [data-layout='portrait'] .game-note { font-size: 0.875rem; line-height: 1.3; }

/* --- The log ------------------------------------------------------------------------------------------------------ */

.log-toggle {
  display: flex; align-items: center; gap: 0.5rem; inline-size: 100%; min-height: 44px; padding: 0.25rem 0.75rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-weight: 600; font-size: 0.875rem; text-align: start;
}
.log-toggle::after { content: '\25B4'; margin-inline-start: auto; flex: none; color: var(--muted); }
.log-toggle[aria-expanded='true']::after { content: '\25BE'; }
.log-last { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-lines {
  display: none; margin: 0; list-style: none; padding: 0.375rem 0.5rem; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 10px; background: var(--ocean-deep); font-size: 0.875rem;
}
.log-lines li { margin-block-end: 0.125rem; }
/* Phones: the log is its last line; a tap opens the whole log above it. */
.game-log.open .log-lines {
  display: block; position: absolute; z-index: 4; inset-inline: 0; inset-block-end: calc(100% + 0.25rem);
  max-block-size: min(50vh, 22rem); box-shadow: 0 -8px 24px rgb(0 0 0 / 0.45);
}
.game-log .game-sub { display: none; }
/* Landscape with room: the log is always open in the right column. */
[data-layout='landscape'] .game-log .game-sub { display: block; }
[data-layout='landscape'] .log-toggle { display: none; }
[data-layout='landscape'] .log-lines, [data-layout='landscape'] .game-log.open .log-lines {
  display: block; position: static; box-shadow: none; background: var(--panel); max-block-size: clamp(4rem, 22vh, 11rem);
}

/* --- The fight overlay (src/ui/screens/game-fight.ts) -------------------------------------------------------------- */

.fight {
  grid-area: board; position: relative; z-index: 3; overflow-y: auto; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 0.25rem;
  padding: 0.375rem 0.5rem; border-radius: 12px; background: rgb(8 30 46 / 0.93); border: 2px solid var(--foam);
  font-size: 0.875rem; text-align: center; cursor: pointer; animation: fade-in 0.2s ease-out;
}
.fight-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; inline-size: 100%; }
.fighter { display: flex; flex-direction: column; align-items: center; min-width: 0; flex: 1 1 0; }
.fighter-portrait { inline-size: 4.5rem; block-size: 3.25rem; }
.fighter-name { font-weight: 800; max-inline-size: 100%; overflow-wrap: anywhere; line-height: 1.15; }
.fighter-stat { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.fight-vs { font-family: var(--font-display); color: var(--fin); flex: none; }
.fight-sums { display: flex; flex-direction: column; gap: 0.25rem; align-items: stretch; }
.fight-sum { display: flex; align-items: center; justify-content: center; gap: 0.375rem; flex-wrap: wrap; }
.fight-sum-label { font-weight: 700; color: var(--muted); min-inline-size: 4.5rem; text-align: end; }
.dice { display: inline-flex; gap: 0.25rem; }
.die {
  display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 7px;
  background: var(--foam); color: var(--ocean-deep); font-weight: 900; font-size: 1.125rem; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 0 #1b2447;
}
.die.rolling { animation: die-shake 0.14s linear infinite; background: #ffe6a6; }
.die.pop { animation: die-pop 0.28s ease-out; }
.die-dropped { opacity: 0.45; transform: scale(0.85); }
.die-old { opacity: 0.5; text-decoration: line-through; background: transparent; color: var(--foam); box-shadow: inset 0 0 0 2px var(--line); }
.die-wait { opacity: 0.35; }
/* A die face picture (src/ui/art.ts setDieFace): the pips fill the die, the number stays in a corner (DESIGN 9.5). */
.die.die-art { position: relative; background: transparent; box-shadow: none; place-items: end; padding: 0 3px 1px 0; font-size: 0.75rem; }
.die-art > .die-face { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.die-art > .die-num { position: relative; color: #1b2447; text-shadow: 0 0 2px #f7f3e8, 0 0 2px #f7f3e8; }
.sum-parts { display: inline-flex; align-items: baseline; gap: 0.3rem; font-variant-numeric: tabular-nums; }
.sum-op { color: var(--muted); font-weight: 800; }
.sum-base { font-weight: 900; font-size: 1.125rem; }
.sum-stat { font-size: 0.75rem; color: var(--muted); }
.sum-total { font-weight: 900; font-size: 1.375rem; color: var(--fin); }
.fight-note { color: #ffd27a; font-weight: 700; }
.fight-result { font-family: var(--font-display); font-size: 1rem; line-height: 1.2; }
.fight-result.win { color: #4cd07d; }
.fight-result.lose { color: #ffb4a3; }
.fight-gains { margin: 0; padding: 0; list-style: none; font-weight: 700; }
.fight-gains .gain-gain { color: #f9b0b0; }
.fight-gains .gain-loss, .fight-gains .gain-eaten { color: #ff8a9a; }
.fight-gains .gain-frenzy { color: #ff7aa8; }
.fight-gains .gain-apex { color: #ffb627; }
.fight-continue { font-size: 0.75rem; color: var(--muted); }
.reveal { animation: fade-in 0.3s ease-out both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(0.25rem); } }
@keyframes die-shake { 0% { transform: rotate(-12deg) translateY(-2px); } 50% { transform: rotate(12deg) translateY(1px); } 100% { transform: rotate(-12deg) translateY(-2px); } }
@keyframes die-pop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* Reduced motion: nothing rolls or shakes; results still appear, with short fades. */
html[data-motion='reduce'] .fight .reveal, html[data-motion='reduce'] .fight {
  animation-name: fade-plain !important; animation-duration: 160ms !important; animation-timing-function: linear !important;
}
@keyframes fade-plain { from { opacity: 0; } }
/* Phones: the fight takes the board and the strips under it; on short screens, everything under the header. */
[data-layout='portrait'] .fight { grid-area: 1 / 1 / 5 / 2; }
[data-layout='short'] .fight { grid-area: 1 / 1 / -1 / -1; gap: 0.125rem; }
[data-layout='short'] .fighter-portrait { inline-size: 3.5rem; block-size: 2.5rem; }
/* Landscape with room: bigger. */
[data-layout='landscape'] .fight { font-size: 1.0625rem; gap: 0.5rem; }
[data-layout='landscape'] .fighter-portrait { inline-size: 7.5rem; block-size: 5.5rem; }
[data-layout='landscape'] .die { inline-size: 2.75rem; block-size: 2.75rem; font-size: 1.5rem; }
[data-layout='landscape'] .fight-result { font-size: 1.375rem; }
[data-layout='landscape'] .sum-total { font-size: 1.75rem; }

/* --- Tile inspection (src/ui/screens/game-inspect.ts) -------------------------------------------------------------- */

/* It fades in without moving: the sheet sits on the bottom edge on phones, so a slide (fade-in's 0.25rem) would carry it
   past the bottom of the view for its first frames (ticket #65). */
.inspect {
  position: fixed; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center;
  background: rgb(0 0 0 / 0.45); animation: fade-plain 0.15s ease-out;
}
.inspect-sheet {
  inline-size: min(100%, 36rem); max-block-size: 88dvh; overflow-y: auto;
  padding: 0.5rem max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-bottom));
  background: var(--ocean-deep); border: 2px solid var(--foam); border-block-end: 0; border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.45);
}
[data-layout='landscape'] .inspect, [data-layout='short'] .inspect { align-items: center; }
[data-layout='landscape'] .inspect-sheet, [data-layout='short'] .inspect-sheet { border-block-end: 2px solid var(--foam); border-radius: 16px; }
.inspect-head { display: flex; align-items: center; gap: 0.5rem; margin-block-end: 0.375rem; }
.inspect-title { flex: 1 1 auto; margin: 0; font-size: 1.0625rem; min-width: 0; overflow-wrap: anywhere; }
.inspect-close { flex: none; }
.inspect-terrain { margin: -0.25rem 0 0.375rem; color: var(--muted); font-weight: 700; }
.inspect-cards, .inspect-sharks { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.inspect-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.625rem; align-items: start; padding: 0.375rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.inspect-card-pic { inline-size: 3.75rem; block-size: 5.25rem; }
.inspect-card-body p { margin: 0 0 0.25rem; }
.inspect-card-name { font-weight: 800; font-size: 1.0625rem; }
.inspect-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.stat-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem 0.125rem 0.25rem; border-radius: 999px; background: #f7f3e8; color: #1b2447; font-weight: 800; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.inspect-rule { color: var(--foam); font-size: 0.9375rem; }
.inspect-sharks { margin-block-start: 0.5rem; }
.inspect-shark { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.inspect-shark-pic { inline-size: 3rem; block-size: 2rem; }
.inspect-frenzy { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; font-weight: 700; }
.inspect-empty { margin: 0.25rem 0; color: var(--muted); }

/* --- Leaving the game --------------------------------------------------------------------------------------------- */

.leave { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / 0.55); }
.leave-box { inline-size: min(100%, 24rem); padding: 1rem; border: 2px solid var(--fin); border-radius: 16px; background: var(--ocean-deep); box-shadow: 0 8px 32px rgb(0 0 0 / 0.5); }
.leave-title { margin: 0 0 0.375rem; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.leave-text { margin: 0 0 0.75rem; color: var(--muted); }
.leave-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.leave-choices button { flex: 1 1 8rem; border-radius: 12px; }

/* --- Prompts ------------------------------------------------------------------------------------------------------ */

.prompt {
  position: fixed; z-index: 5; inset-inline: 0; inset-block-end: 0;
  margin-inline: auto; max-inline-size: 40rem; max-block-size: 70vh; overflow-y: auto;
  padding: 0.75rem max(1rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-bottom));
  background: var(--ocean-deep); border: 2px solid var(--fin); border-block-end: 0; border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.45);
}
.prompt-text { margin: 0 0 0.5rem; font-weight: 700; font-size: 1.0625rem; }
.prompt-timer { margin: 0 0 0.5rem; font-weight: 800; color: var(--fin); }
.prompt-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.prompt-choice { flex: 1 1 8rem; border-radius: 12px; }
.prompt-choice.armed { background: var(--fin); border-color: var(--fin); color: var(--fin-ink); }