/* Frenzy: the page shell and the DOM screens (src/ui/). Fonts are the studio's (static/fonts/, from nimblemyth-ident,
   SIL OFL 1.1), served from this origin: Bungee for display, DM Sans for text, each with a system fallback that covers
   English and French. Every size is in rem, so the text-size option (html[data-text-size]) scales all UI text.
   No inline styles: the CSP allows this file only. Touch targets are 48 px (44 px is the floor, DESIGN 9.5). */
:root {
  --ocean-deep: #0b2a3c;
  --ocean: #12456a;
  --panel: rgb(4 24 36 / 0.72);
  --line: rgb(242 247 250 / 0.28);
  --foam: #f2f7fa;
  --fin: #ff6b4a;
  --fin-ink: #1a0b06;
  --muted: #9fc3d6;
  --font-display: 'Bungee', 'Arial Black', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --target: 3rem;
  color-scheme: dark;
}

/* The text-size option: three steps. */
html[data-text-size='large'] { font-size: 120%; }
html[data-text-size='largest'] { font-size: 140%; }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ocean-deep);
  color: var(--foam);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: radial-gradient(ellipse at 50% 30%, var(--ocean) 0%, var(--ocean-deep) 70%) fixed;
  line-height: 1.45;
}

[hidden] { display: none !important; }

/* --- The title ---------------------------------------------------------------------------------------------------- */

.title {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vh, 1rem);
  padding-block: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-bottom));
  padding-inline: var(--gutter);
  text-align: center;
}

.title-lang {
  position: absolute;
  inset-block-start: max(0.5rem, env(safe-area-inset-top));
  inset-inline-end: max(0.5rem, env(safe-area-inset-right));
  font-size: 0.875rem;
}

.title-name {
  margin: 0;
  margin-block-start: 2.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, min(15vw, 17vh), 9rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--foam);
  text-shadow: 0 0.06em 0 var(--fin);
  overflow-wrap: anywhere;
}

.title-subtitle {
  margin: 0;
  font-size: clamp(1.125rem, min(5vw, 5vh), 2.25rem);
  font-weight: 700;
  font-style: italic;
  color: var(--muted);
}

.title-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  inline-size: min(100%, 20rem);
  margin-block-start: 0.5rem;
}

/* Short, wide views (landscape phones): the menu in three columns, so it fits the height. */
@media (orientation: landscape) and (max-height: 700px) {
  .title-name { margin-block-start: 0; }
  .title-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: min(100%, 44rem); }
}

.title-version {
  margin: 0;
  margin-block-start: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* --- Buttons and controls ------------------------------------------------------------------------------------------ */

button {
  font: inherit;
  min-height: var(--target);
  min-width: var(--target);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  border: 2px solid var(--foam);
  border-radius: 999px;
  background: transparent;
  color: var(--foam);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  button:hover { background: rgb(255 255 255 / 0.1); }
  button.primary:hover { background: #ff866b; }
  .choice:hover { border-color: var(--foam); }
}
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--fin); outline-offset: 3px; }
h2:focus, h3:focus { outline: none; }
h2:focus-visible { outline: 3px solid var(--fin); outline-offset: 3px; }
button:disabled { opacity: 0.4; cursor: default; }
button:disabled:hover { background: transparent; }

button.primary {
  background: var(--fin);
  border-color: var(--fin);
  color: var(--fin-ink);
}

.update-ready {
  border-color: var(--fin);
  color: var(--fin);
}

/* --- Screens ---------------------------------------------------------------------------------------------------- */

.screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  inline-size: min(100%, 44rem);
  margin-inline: auto;
}

.screen-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: max(0.5rem, env(safe-area-inset-top)) 0.5rem;
  padding-inline: var(--gutter);
  background: var(--ocean-deep);
  border-block-end: 1px solid var(--line);
}

.screen-heading {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 5vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.back-button { flex: none; padding-inline: 1rem; }
.back-button::before { content: '\2190\00a0'; }

.screen-body {
  flex: 1;
  padding-block: 1rem;
  padding-inline: var(--gutter);
  overflow-wrap: anywhere;
}

.screen-footer {
  position: sticky;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.5rem max(0.5rem, env(safe-area-inset-bottom));
  padding-inline: var(--gutter);
  background: var(--ocean-deep);
  border-block-start: 1px solid var(--line);
}

/* Coming soon */
.soon-big { font-family: var(--font-display); font-size: clamp(1.5rem, 7vw, 2.5rem); margin-block: 1rem 0.5rem; }
.soon-hint { color: var(--muted); font-size: 1.125rem; }

/* How to play */
.howto-page-title { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; margin-block: 0 0.75rem; color: var(--fin); }
.howto-page p, .howto-lines { font-size: 1.125rem; }
.howto-page p { margin-block: 0 0.5rem; }
.howto-lines { margin: 0; padding-inline-start: 1.5rem; }
.howto-lines li { margin-block-end: 0.625rem; }
.howto-lines li::marker { color: var(--fin); font-weight: 700; }
.howto-counter { margin: 0; font-size: 0.875rem; color: var(--muted); text-align: center; }
.howto-pager button { flex: 0 1 auto; }

/* What's new */
.release { margin-block-end: 1.5rem; }
.release-version { margin: 0; font-size: 1.25rem; }
.release-date { display: block; color: var(--muted); font-size: 0.875rem; margin-block-end: 0.5rem; }
.release-lines { margin: 0; padding-inline-start: 1.25rem; font-size: 1.0625rem; }
.release-lines li { margin-block-end: 0.375rem; }

/* Options */
.option {
  margin: 0 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  min-width: 0;
}
.option-pair { margin: 0 0 1rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.option-pair .option { margin: 0 0 0.5rem; padding: 0; border: 0; background: none; }
.option-label { display: block; padding: 0; margin-block-end: 0.5rem; font-weight: 700; font-size: 1.0625rem; }
/* The legend sits inside the panel, not on its border. */
.option-choice > legend { float: inline-start; inline-size: 100%; }
.option-choice > legend + * { clear: both; }
.option-hint { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.9375rem; }

.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  min-width: var(--target);
  padding-block: 0.375rem;
  padding-inline: 1rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.choice input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice:has(input:checked) { background: var(--foam); border-color: var(--foam); color: var(--ocean-deep); }
.choice:has(input:focus-visible) { outline: 3px solid var(--fin); outline-offset: 3px; }

.slider-row { display: flex; align-items: center; gap: 0.75rem; }
.slider {
  flex: 1;
  min-width: 0;
  block-size: var(--target);
  margin: 0;
  accent-color: var(--fin);
  cursor: pointer;
}
.slider:focus-visible { outline: 3px solid var(--fin); outline-offset: 3px; }
.slider-value { flex: none; min-inline-size: 3.5rem; text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Solo setup ------------------------------------------------------------------------------------------------ */

.shark-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.5rem; }
.shark-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "swatch name" "swatch ability" "rule rule";
  column-gap: 0.625rem;
  align-items: center;
  min-height: var(--target);
  padding: 0.625rem 0.75rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.shark-choice input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.shark-choice:has(input:checked) { border-color: var(--fin); background: rgb(255 107 74 / 0.14); }
.shark-choice:has(input:focus-visible) { outline: 3px solid var(--fin); outline-offset: 3px; }
.shark-choice .shark-swatch { grid-area: swatch; inline-size: 2.25rem; block-size: 2.25rem; }
.shark-choice-name { grid-area: name; font-family: var(--font-display); font-size: 1.125rem; }
.shark-choice-ability { grid-area: ability; font-weight: 700; color: var(--fin); }
.shark-choice-rule { grid-area: rule; margin-block-start: 0.25rem; color: var(--muted); font-size: 0.9375rem; }
.setup-start { flex: 1; font-size: 1.125rem; }

/* The shark colours (assets/palettes/frenzy.gpl): a swatch beside every shark name. */
.shark-swatch { display: inline-block; flex: none; inline-size: 0.875rem; block-size: 0.875rem; border-radius: 50%; border: 2px solid #1b2447; background: #8c9ca8; }
.shark-mako .shark-swatch { background: #4684d2; }
.shark-thresher .shark-swatch { background: #8274ba; }
.shark-tiger .shark-swatch { background: #96a25c; }
.shark-hammerhead .shark-swatch { background: #8c9ca8; }
/* With its portrait (src/ui/art.ts, when the build found the file): the same box, the picture inside. */
.shark-swatch.has-art { overflow: hidden; }
.shark-swatch.has-art > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* --- The game: static/game.css ------------------------------------------------------------------------------------ */

/* Results */
.results-big { margin: 0.5rem 0; font-family: var(--font-display); font-size: clamp(1.75rem, 8vw, 3rem); color: var(--fin); }
.results-why { font-size: 1.125rem; }
.results-sizes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.results-shark { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; }
.results-shark.winner { border-color: var(--fin); }
.results-shark .shark-swatch { inline-size: 1.25rem; block-size: 1.25rem; }

/* --- Motion --------------------------------------------------------------------------------------------------------- */

/* The motion option (src/ui/apply-options.ts resolves AUTO against the device). */
html[data-motion='reduce'] *, html[data-motion='reduce'] *::before, html[data-motion='reduce'] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* The NimbleMyth ident hand-off (src/app/identsplash.ts, static/ident-boot.js). ident-boot: white from the first paint,
   the title hidden under the ident. ident-settle: the page turns to the game's colour. ident-reveal: the title fades in. */
html.ident-boot, html.ident-boot body { background: #fff; }
html.ident-boot #title, html.ident-settle #title { visibility: hidden; }
html.ident-settle, html.ident-settle body { transition: background-color 0.1s linear; }
html.ident-reveal #title { animation: ident-reveal 0.25s ease-out; }
@keyframes ident-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.ident-settle, html.ident-settle body { transition: none; }
  html.ident-reveal #title { animation: none; }
}