/* Fonts, bundled locally so the game still runs offline and from file://.
   Cinzel: inscriptional capitals for titles, headings and numbers.
   Marcellus: flared classical serif with a true lowercase, for reading.
   Both SIL Open Font License 1.1 — see assets/fonts/OFL-*.txt. */
@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/Cinzel-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Marcellus";
  src: url("../assets/fonts/Marcellus-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ==========================================================================
   Icarus — UI styling.
   The canvas paints the world and the HUD; this file styles only the DOM
   overlay (menus, dialogue, pause button) in a restrained Greek register:
   marble panels, bronze rules, a single meander motif, no ornament clutter.
   ========================================================================== */

:root {
  --marble:        #efe6d3;
  --marble-dark:   #d8cbb2;
  --ink:           #24190e;
  --ink-soft:      #5b4a35;
  --bronze:        #b98a2f;
  --gold:          #d8a93a;
  --gold-bright:   #f4d98a;
  --sea:           #1d5d80;
  --sea-deep:      #0b1620;
  --panel-bg:      rgba(24, 17, 9, 0.82);
  --panel-edge:    rgba(216, 169, 58, 0.55);
  --ui-scale:      1;
  --font-display:  "Cinzel", "Optima", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:     "Marcellus", "Optima", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

/* Every vh size below is declared twice: vh, then dvh. Browsers that know
   dvh size against the visible viewport, so a mobile address bar can no
   longer push panel content off-screen; older browsers keep the vh line. */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--sea-deep);
  color: var(--marble);
  font-family: var(--font-body);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Marcellus ships one upright weight; a browser-faked slant or bold smears
     its flared strokes, so emphasis comes from colour instead. */
  font-synthesis: none;
}

#stage {
  position: fixed;
  inset: 0;
  display: block;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: pointer;
}

#fallback[hidden] { display: none; }
#fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem;
}

/* ── Pause button ─────────────────────────────────────────────────────── */

/* left/top are set by UI.layoutHud() so the button sits under the canvas
   score panel; these are only the pre-layout fallback. */
.hud-button {
  position: absolute;
  top: 120px;
  left: 18px;
  width: 46px;
  height: 46px;
  display: none;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--panel-edge);
  background: rgba(24, 17, 9, 0.55);
  color: var(--marble);
  font-size: 15px;
  letter-spacing: 1px;
  cursor: pointer;
  z-index: 5;
}
.hud-button.visible { display: grid; }
.hud-button:hover { background: rgba(48, 34, 16, 0.75); }

/* ── Daedalus dialogue ribbon ─────────────────────────────────────────── */

#daedalus {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 2%);
  transform: translate(-50%, 14px);
  width: min(620px, 86vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 4;
}
#daedalus.visible { opacity: 1; transform: translate(-50%, 0); }

.daedalus-frame {
  position: relative;
  padding: 11px 22px 12px;
  background: linear-gradient(180deg, rgba(239, 230, 211, .93), rgba(214, 200, 172, .93));
  color: var(--ink);
  border-top: 2px solid var(--bronze);
  border-bottom: 2px solid var(--bronze);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  font-size: clamp(15px, 2.1vw, 18px);
  line-height: 1.45;
  text-align: center;
}
.daedalus-name {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

/* ── Toast: short system notices ─────────────────────────────────────── */

#toast {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  transform: translate(-50%, -8px);
  padding: 7px 18px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marble);
  background: rgba(24, 17, 9, .85);
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 20;
}
#toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ── Overlay + panels ─────────────────────────────────────────────────── */

#overlay {
  position: absolute;
  inset: 0;
  display: grid;
  /* A fixed-size cell, so a card taller than the screen overflows evenly
     around the centre and ui.fitGameOver() can scale it back into view. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: 16px;
  pointer-events: none;
  z-index: 10;
}
#overlay.active {
  pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(8, 14, 20, .42), rgba(6, 10, 16, .78));
}

.ui-panel {
  display: none;
  width: min(520px, 94vw);
  max-height: 92vh; max-height: 92dvh;
  overflow-y: auto;
  padding: clamp(20px, 3.4vw, 34px);
  text-align: center;
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-edge);
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .05);
  animation: rise .28s ease both;
}
.ui-panel.wide { width: min(820px, 95vw); }
.ui-panel.wide h2 { font-size: clamp(19px, min(5vw, 3.5vh), 32px); font-size: clamp(19px, min(5vw, 3.5dvh), 32px); }
.ui-panel.wide .rule { margin: clamp(4px, 0.9vh, 8px) auto clamp(6px, 1.3vh, 12px); margin: clamp(4px, 0.9dvh, 8px) auto clamp(6px, 1.3dvh, 12px); }
.ui-panel.wide .buttons { margin-top: clamp(6px, 1.4vh, 14px); margin-top: clamp(6px, 1.4dvh, 14px); }

/* The two long panels can outgrow a short window. Keep their action buttons
   pinned to the bottom of the scroll area so "Back" is never stranded below
   the fold. The solid backing only appears once the panel actually scrolls
   (UI.syncPanelOverflow() sets .scrolls); otherwise it reads as a stray slab. */
.ui-panel.wide .buttons,
#panel-settings .buttons {
  position: sticky;
  bottom: -2px;
  margin-top: 16px;
  padding: 12px 0 2px;
  border-top: 1px solid transparent;
}
.ui-panel.scrolls .buttons {
  background: #18110a;
  border-top-color: rgba(216, 169, 58, .18);
}
.ui-panel.visible { display: block; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.title {
  margin: 0;
  font-family: var(--font-display);
  /* "WAXFALL" is seven characters: sized so it holds one line on a
     320px-wide phone and never outgrows the panel on a desktop. */
  font-size: clamp(34px, 10vw, 58px);
  font-weight: 700;
  letter-spacing: .16em;
  white-space: nowrap;
  color: var(--gold-bright);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .4), 0 0 32px rgba(216, 169, 58, .35);
}
.subtitle {
  margin: 2px 0 0;
  font-size: clamp(14px, 2.4vw, 18px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--marble-dark);
}

h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(24px, 4.6vw, 34px);
  letter-spacing: .12em;
  color: var(--gold-bright);
}
h3 {
  margin: 16px 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
p { margin: 6px 0; line-height: 1.55; color: var(--marble); }

/* A single meander (Greek key) rule, drawn with gradients — no image needed. */
.rule {
  height: 10px;
  margin: 14px auto 18px;
  width: 78%;
  background-image:
    linear-gradient(90deg, var(--bronze) 0 100%),
    linear-gradient(90deg, var(--bronze) 0 100%),
    repeating-linear-gradient(90deg,
      var(--bronze) 0 5px, transparent 5px 12px);
  background-size: 100% 1.5px, 100% 1.5px, 100% 4px;
  background-position: 0 0, 0 100%, 0 50%;
  background-repeat: no-repeat, no-repeat, repeat-x;
  opacity: .85;
}

/* ── Daedalus' warning: the title-screen hook ────────────────────────── */

.epigraph {
  margin: 0 auto 20px;
  max-width: 42ch;
  padding: 0 4px;
  font-size: clamp(14px, 2.3vw, 16px);
  line-height: 1.6;
  font-style: italic;
  color: #e9dfc8;
  text-wrap: balance;
}
.epigraph cite {
  display: block;
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}
.epigraph cite::before { content: "— "; }

/* ── How to Play: myth passages + the rule list ──────────────────────── */

/* This panel must never scroll, so its type and spacing are sized against
   BOTH viewport axes: min(vw, vh) shrinks the text on a narrow phone and on a
   short landscape window alike, which a width-only breakpoint cannot do.
   The media queries below are then left to handle layout only. */
.myth {
  margin: 0 0 clamp(6px, 1.4vh, 12px); margin: 0 0 clamp(6px, 1.4dvh, 12px);
  padding: clamp(5px, 1.1vh, 9px) clamp(9px, 1.6vw, 14px); padding: clamp(5px, 1.1dvh, 9px) clamp(9px, 1.6vw, 14px);
  text-align: left;
  font-size: clamp(10px, min(3.2vw, 2.15vh), 14px); font-size: clamp(10px, min(3.2vw, 2.15dvh), 14px);
  line-height: 1.45;
  color: #e7dcc6;
  background: rgba(0, 0, 0, .2);
  border-left: 2px solid var(--bronze);
  border-radius: 3px;
}
/* The consequence, tinted with the sun that caused it. */
.myth.fall {
  margin: clamp(5px, 1.2vh, 10px) 0 0; margin: clamp(5px, 1.2dvh, 10px) 0 0;
  font-style: italic;
  background: rgba(150, 82, 20, .18);
  border-left-color: var(--gold);
}

/* Each rule is one flowing line with an inline gold label. That saves the
   ~20px a separate heading costs per entry, and four of those was the
   difference between fitting a phone screen and not. */
.rules {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3px, 0.9vh, 8px) 22px; gap: clamp(3px, 0.9dvh, 8px) 22px;
  margin: 0;
  text-align: left;
}
/* The size and line-height live on the row, not the inline <dd>: an inline
   element can't shrink its line box below the row's own (16px, line-height
   normal) strut, which spread the rules wider than the myth text on phones. */
.rules > div {
  margin: 0;
  font-size: clamp(10px, min(3.2vw, 2.15vh), 14px); font-size: clamp(10px, min(3.2vw, 2.15dvh), 14px);
  line-height: 1.45;
}
.rules dt {
  display: inline;
  font-family: var(--font-display);
  font-size: clamp(9px, min(2.9vw, 1.95vh), 13px); font-size: clamp(9px, min(2.9vw, 1.95dvh), 13px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.rules dt::after { content: " \2014 "; color: var(--marble-dark); }
.rules dd {
  display: inline;
  margin: 0;
  color: #e7dcc6;
}
/* kbd carries border + padding that inflates every line it sits on. */
.rules kbd { padding: 0 4px; font-size: .95em; }

@media (min-width: 620px) { .rules { grid-template-columns: 1fr 1fr; } }
@media (max-height: 460px) and (min-width: 440px) {
  .rules { grid-template-columns: repeat(4, 1fr); }
}

/* The last resort: 320px-class devices, where every remaining pixel of
   chrome has to go so the panel still fits without scrolling. */
@media (max-height: 380px), (max-width: 340px) {
  .ui-panel.wide { padding: 7px 10px; }
  /* The meander divider is pure ornament; at this size its ~18px buys a line
     of actual text instead. */
  .ui-panel.wide .rule { display: none; }
  .ui-panel.wide h2 { font-size: clamp(16px, min(4.4vw, 3.2vh), 22px); font-size: clamp(16px, min(4.4vw, 3.2dvh), 22px); margin-bottom: 6px; }
  .myth {
    padding: 4px 8px;
    margin-bottom: 5px;
    line-height: 1.38;
  }
  .myth.fall { margin-top: 4px; }
  .rules { gap: 2px 10px; }
  .rules > div, .myth { font-size: clamp(8.5px, min(3.1vw, 2.05vh), 12px); font-size: clamp(8.5px, min(3.1vw, 2.05dvh), 12px); }
  .rules dt { font-size: clamp(8px, min(2.8vw, 1.9vh), 11px); font-size: clamp(8px, min(2.8vw, 1.9dvh), 11px); }
  .ui-panel.wide .buttons { margin-top: 5px; padding-top: 6px; }
  .ui-panel.wide .buttons .btn { padding: 6px 14px; font-size: 12px; min-width: 120px; }
  .myth { line-height: 1.3; }
  .rules > div { line-height: 1.3; }
  .rules kbd { padding: 0 2px; border: none; background: rgba(0, 0, 0, .35); }
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
}

.btn {
  width: min(280px, 100%);
  padding: 13px 22px;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marble);
  background: linear-gradient(180deg, rgba(88, 66, 32, .55), rgba(44, 32, 16, .7));
  border: 1.5px solid rgba(216, 169, 58, .45);
  border-radius: 4px;
  cursor: pointer;
  transition: transform .12s ease, border-color .18s ease, background .18s ease;
}
.btn:hover, .btn:focus-visible {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(122, 92, 44, .7), rgba(60, 44, 22, .8));
  outline: none;
  transform: translateY(-1px);
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  color: #2a1d0c;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-bright);
  font-weight: 700;
}
.btn.primary:hover { background: linear-gradient(180deg, #ffeab4, #e8bc4f); }
.btn.quiet {
  font-size: 14px;
  padding: 10px 18px;
  background: transparent;
  border-color: rgba(216, 169, 58, .25);
  color: var(--marble-dark);
}

/* Game over never scrolls: stats pair up into two columns where there's room,
   spacing tracks viewport height, and ui.fitGameOver() scales the card down
   as a last resort on very small screens. */
#panel-gameover {
  width: min(580px, 94vw);
  max-height: none;
  overflow: visible;
  padding: clamp(12px, 3vh, 30px) clamp(14px, 3.4vw, 30px);
  padding: clamp(12px, 3dvh, 30px) clamp(14px, 3.4vw, 30px);
}
#panel-gameover h2 { font-size: clamp(20px, min(4.6vw, 5vh), 34px); font-size: clamp(20px, min(4.6vw, 5dvh), 34px); }
#panel-gameover h2 { text-wrap: balance; }
#panel-gameover .cause { margin: 2px 0 0; line-height: 1.4; text-wrap: balance; }
#panel-gameover .rule { margin: clamp(6px, 1.6vh, 14px) auto clamp(6px, 1.8vh, 16px); margin: clamp(6px, 1.6dvh, 14px) auto clamp(6px, 1.8dvh, 16px); }
#panel-gameover .stats {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 18px;
  row-gap: 0;
  margin: 0;
}
#panel-gameover .stat-row { padding: clamp(4px, 1vh, 7px) 8px; padding: clamp(4px, 1dvh, 7px) 8px; }
#panel-gameover .best-line { margin: clamp(6px, 1.4vh, 14px) 0 0; margin: clamp(6px, 1.4dvh, 14px) 0 0; }
#panel-gameover .buttons {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(8px, 2vh, 20px);
  margin-top: clamp(8px, 2dvh, 20px);
}
#panel-gameover .buttons { align-items: stretch; }
#panel-gameover .btn { width: auto; flex: 1 1 170px; max-width: 250px; }
#panel-gameover .hint { margin: clamp(6px, 1.4vh, 12px) 0 0; margin: clamp(6px, 1.4dvh, 12px) 0 0; }
@media (max-height: 420px) {
  /* Short landscape phones: the buttons say it all; spend the height on stats. */
  #panel-gameover .rule, #panel-gameover .hint { display: none; }
  #panel-gameover .cause { margin-bottom: 8px; }
}

/* Irreversible actions get a second, clearly worded step. */
.confirm {
  width: min(360px, 100%);
  padding: 10px 12px 12px;
  border: 1px solid rgba(214, 96, 70, .55);
  border-radius: 4px;
  background: rgba(90, 24, 12, .35);
}
.confirm[hidden] { display: none; }
.confirm p { margin: 0 0 10px; font-size: 14px; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.confirm-actions .btn { width: auto; min-width: 130px; padding: 9px 14px; font-size: 13px; }
.btn.danger {
  color: #fff3ea;
  background: linear-gradient(180deg, #b5462d, #86301c);
  border-color: #e0876c;
  font-weight: 700;
}
.btn.danger:hover, .btn.danger:focus-visible { background: linear-gradient(180deg, #c9573b, #973a24); border-color: #ffb89f; }
.btn[hidden] { display: none; }

.storage-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #e6b9a0;
}

.hint {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(239, 230, 211, .6);
}
.legal {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: .08em;
}
.legal a { color: rgba(239, 230, 211, .45); text-decoration: none; }
.legal a:hover, .legal a:focus-visible { color: var(--gold-bright); text-decoration: underline; }
kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-body);
  font-size: .92em;
  border: 1px solid rgba(216, 169, 58, .5);
  border-radius: 3px;
  background: rgba(0, 0, 0, .3);
}

.best-line {
  margin-top: 14px;
  text-wrap: balance;
  font-size: 14px;
  color: var(--marble-dark);
}
.best-line strong { font-family: var(--font-display); color: var(--gold-bright); font-weight: 700; }
#gameover-best { font-family: var(--font-display); }

.cause {
  font-size: 15px;
  color: #e6d8ba;
  font-style: italic;
}

/* ── Settings controls ────────────────────────────────────────────────── */

.setting {
  display: grid;
  grid-template-columns: 1fr 160px 48px;
  align-items: center;
  gap: 12px;
  padding: 7px 4px;
  text-align: left;
  font-size: 15px;
}
.setting.check {
  grid-template-columns: 22px 1fr;
  gap: 10px;
}
.setting-note {
  margin-left: 6px;
  font-size: 13px;
  opacity: .62;
}
.setting-value {
  font-family: var(--font-display);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
  font-size: 14px;
}

/* Character picker: a live preview beside a two-option segmented control. */
.setting.skin-setting {
  grid-template-columns: 116px 1fr;
  align-items: center;
  gap: 14px;
  padding: 4px 4px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(216, 169, 58, .16);
}
#skin-preview {
  width: 116px;
  height: 86px;
  display: block;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(58, 96, 124, .55), rgba(24, 44, 62, .55));
  border: 1px solid rgba(216, 169, 58, .28);
}
.skin-label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
}
.segmented {
  display: flex;
  gap: 0;
  border: 1.5px solid rgba(216, 169, 58, .4);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
}
.seg {
  padding: 9px 20px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marble-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.seg + .seg { border-left: 1.5px solid rgba(216, 169, 58, .4); }
.seg:hover { background: rgba(216, 169, 58, .14); color: var(--marble); }
.seg[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #2a1d0c;
  font-weight: 700;
}
.seg:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -3px; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(216, 169, 58, .2) 100%);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold-bright);
  border: 1px solid #7a5a18;
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold-bright);
  border: 1px solid #7a5a18;
  cursor: pointer;
}
input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--gold);
  cursor: pointer;
}
label { cursor: pointer; }

/* ── Game-over stats ──────────────────────────────────────────────────── */

.stats {
  display: grid;
  gap: 2px;
  margin: 4px 0 8px;
  text-align: left;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 10px;
  font-size: 15px;
  border-bottom: 1px solid rgba(216, 169, 58, .14);
}
.stat-row span:last-child {
  font-family: var(--font-display);   /* Marcellus digits are old-style: 0 reads as O */
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.stat-row.record { background: rgba(216, 169, 58, .12); }
.stat-row em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2a1d0c;
  background: var(--gold-bright);
  border-radius: 2px;
  padding: 1px 5px;
  margin-left: 6px;
}

/* ── Small screens / landscape phones ─────────────────────────────────── */

@media (max-width: 560px) {
  .setting { grid-template-columns: 1fr 110px 44px; font-size: 14px; }
  .ui-panel { padding: 14px 12px; }
}

@media (max-height: 460px) {
  /* Landscape phones: go wider rather than taller so the epigraph wraps to
     two lines and Play stays above the fold. */
  .ui-panel { width: min(680px, 94vw); }
  .epigraph {
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 8px;
  }
  .epigraph cite { margin-top: 4px; }
  .best-line { margin-top: 8px; }
  .setting.skin-setting { grid-template-columns: 92px 1fr; padding-bottom: 8px; }
  #skin-preview { width: 92px; height: 68px; }
  .seg { padding: 7px 14px; font-size: 12px; }
  .ui-panel.wide { width: min(880px, 97vw); }
  .ui-panel.wide { padding: 10px 14px; }
  .rules { gap: 3px 12px; }
  .rules dt { letter-spacing: .05em; }
  .title { font-size: clamp(28px, 6vw, 44px); }
  .rule { margin: 8px auto 10px; }
  .buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
  .btn { width: auto; min-width: 150px; padding: 10px 18px; font-size: 15px; }
  .hint { margin-top: 8px; }
  .legal { display: none; }   /* the menu is already tight here; portrait shows it */
  .ui-panel { padding: 14px 18px; }
}

/* ── Tablets and large windows ────────────────────────────────────────── */

/* Plenty of room in both axes: let the panels and their type grow instead of
   floating as a small card in the middle of an iPad-sized screen. */
@media (min-width: 700px) and (min-height: 760px) {
  .ui-panel { width: min(600px, 90vw); }
  #panel-gameover { width: min(640px, 90vw); }
  .epigraph { font-size: 17px; }
  .best-line { font-size: 15px; }
  .hint { font-size: 14px; }
  .cause { font-size: 16px; }
  .stat-row { font-size: 16px; }
  .setting { grid-template-columns: 1fr 190px 52px; font-size: 16px; }
  .skin-label { font-size: 16px; }
  .myth, .rules > div { font-size: clamp(10px, min(3.2vw, 2.15vh), 16px); font-size: clamp(10px, min(3.2vw, 2.15dvh), 16px); }
  .rules dt { font-size: clamp(9px, min(2.9vw, 1.95vh), 14.5px); font-size: clamp(9px, min(2.9vw, 1.95dvh), 14.5px); }
}

/* ── Touch-only devices ───────────────────────────────────────────────── */

/* Keyboard shortcuts mean nothing without a keyboard or pointer, so touch
   screens get touch wording. An iPad with a trackpad reports a fine pointer
   and keeps the keyboard hints. */
.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .touch-only { display: inline; }
  .no-touch { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-panel { animation: none; }
  #daedalus { transition: opacity .2s linear; }
}