/* ==========================================================================
   Paper Plane — ink-on-paper UI.
   Design language: bold ink outlines, hard offset shadows, marker-yellow
   highlights. Colours come from CSS variables that the game re-tints as the
   world changes phase (white paper -> storm -> night sky).
   ========================================================================== */
@font-face { font-family: 'Caveat Brush'; src: url('fonts/caveat-brush-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Patrick Hand'; src: url('fonts/patrick-hand-latin-400-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --paper: #fcfbf7;
  --ink: #141414;
  --hl: #ffd23f;
  --red: #f0432d;
  --display: 'Caveat Brush', 'Segoe Print', 'Bradley Hand', cursive;
  --body: 'Patrick Hand', 'Segoe Print', 'Trebuchet MS', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); overscroll-behavior: none; }
body { font-family: var(--body); color: var(--ink); -webkit-user-select: none; user-select: none; touch-action: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible { outline: 3px dashed var(--red); outline-offset: 4px; }
.icon { width: 100%; height: 100%; display: block; }
.art { width: 100%; height: 100%; overflow: visible; stroke-linecap: round; stroke-linejoin: round; }
.art .b { fill: var(--paper); stroke: var(--ink); }
.art .f { fill: var(--paper); stroke: none; }
.art .l { fill: none; stroke: var(--ink); }
.art .k { fill: var(--ink); stroke: none; }
.art .h { fill: var(--hl); stroke: none; }
.lbl { font-size: 15px; opacity: 0.75; letter-spacing: 0.01em; }

/* ------------------------------ full-screen fx ------------------------------ */
#fx-flash, #fx-danger { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#fx-flash { background: #fff; z-index: 30; }
#fx-danger { z-index: 5; background: radial-gradient(ellipse at center, transparent 45%, rgba(240, 67, 45, 0.55) 100%); }

/* ------------------------------ HUD ------------------------------ */
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none;
  padding: calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l));
  display: flex; flex-direction: column; justify-content: flex-start; }
#hud button { pointer-events: auto; }
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; }
.stat { display: flex; flex-direction: column; line-height: 1.05; }
.stat.right { align-items: flex-end; text-align: right; }
.stat .val { font-family: var(--display); font-size: clamp(22px, 4.6vmin, 38px); }
.mult-wrap { text-align: center; }
.mult { font-family: var(--display); font-size: clamp(60px, 15vmin, 128px); line-height: 0.95; color: var(--ink);
  text-shadow: 4px 4px 0 var(--hl); transform-origin: 50% 60%; will-change: transform; }
.mult.danger { color: var(--red); text-shadow: 4px 4px 0 var(--hl); }
.phase { font-size: clamp(14px, 2.4vmin, 19px); opacity: 0.7; margin-top: 2px; }
.hud-sub { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 4px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 10px; font-family: var(--display); font-size: 24px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); }
.chip svg { width: 22px; height: 22px; color: var(--ink); fill: var(--hl); }
.chip.combo { background: var(--hl); color: #141414; border-color: #141414; box-shadow: 3px 3px 0 var(--ink); display: none; }
.ctrl { display: flex; gap: 10px; }
.round { width: 48px; height: 48px; padding: 10px; border-radius: 50%; background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform 0.08s, box-shadow 0.08s; }
.round:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

#warn-banner { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -10px); opacity: 0; pointer-events: none;
  font-family: var(--display); font-size: clamp(26px, 5.4vmin, 44px); color: #fff; background: var(--red);
  border: 4px solid #141414; border-radius: 14px; padding: 4px 20px 6px; box-shadow: 5px 5px 0 #141414; white-space: nowrap; }

.hud-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#hint { font-size: 20px; opacity: 0; text-align: center; }
.btn-collect { width: min(360px, 78vw); height: clamp(76px, 12vh, 96px); border-radius: 22px; background: var(--hl); color: #141414;
  border: 4px solid #141414 !important; box-shadow: 0 0 0 3px var(--ink), 8px 8px 0 3px var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  transition: transform 0.07s, box-shadow 0.07s, opacity 0.2s; }
.btn-collect .c-label { font-family: var(--display); font-size: clamp(30px, 5.6vmin, 42px); letter-spacing: 0.04em; }
.btn-collect .c-val { font-family: var(--display); font-size: clamp(24px, 4.6vmin, 34px); }
.btn-collect:active:not(:disabled) { transform: translate(6px, 6px); box-shadow: 0 0 0 3px var(--ink), 2px 2px 0 3px var(--ink); }
.btn-collect:disabled { opacity: 0.45; }

/* ------------------------------ popups / banner ------------------------------ */
#pop-layer { position: absolute; inset: 0; pointer-events: none; z-index: 12; overflow: hidden; }
.pop { position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 30px; color: var(--ink); white-space: nowrap;
  text-shadow: 2px 2px 0 var(--hl); will-change: transform, opacity; }
.pop.gold { color: #141414; font-size: 38px; text-shadow: 3px 3px 0 #ffc400; }
.pop.bonus { color: var(--red); text-shadow: 2px 2px 0 var(--hl); }
#banner { position: absolute; left: 50%; top: 34%; transform: translate(-50%, 0); z-index: 12; pointer-events: none; text-align: center; opacity: 0; }
#banner b { display: block; font-family: var(--display); font-weight: normal; font-size: clamp(38px, 9vmin, 76px); line-height: 1; color: var(--ink); text-shadow: 4px 4px 0 var(--hl); white-space: nowrap; }
#banner i { display: block; font-style: normal; font-family: var(--display); font-size: clamp(24px, 5vmin, 40px); color: var(--red); margin-top: 2px; }
#banner.bad b { color: var(--red); }

/* ------------------------------ screens ------------------------------ */
/* On short viewports a screen's content can be taller than the available height. align-items:center alone
   would then clip the top of it with no way to reach it, so the screen scrolls instead; "safe center"
   (falls back silently to plain center where unsupported) keeps it centered whenever it does fit. */
.screen { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; align-items: safe center; justify-content: center; padding: 16px; overflow-y: auto; }
#screen-intro { background: var(--paper); z-index: 25; padding: 0; overflow: hidden; }
/* notebook page: ruled grid + soft vignette */
#intro-page { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(20, 20, 20, 0.13) 100%),
    linear-gradient(rgba(20, 20, 20, 0.07) 2px, transparent 2px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(20, 20, 20, 0.07) 2px, transparent 2px) 0 0 / 48px 48px; }
#intro-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* doodles that draw themselves on the page */
#intro-svg .dd { fill: none; stroke: var(--ink); stroke-width: 4; opacity: 0.5; }
#intro-svg .dd-hl { fill: var(--hl); stroke: none; }
/* the folding sheet: paper front, pale-yellow back, hard yellow offset shadow (same look as the game UI) */
#intro-svg .ip-main { stroke: var(--ink); stroke-linejoin: round; stroke-linecap: round; }
#intro-svg .ip-f { fill: var(--paper); }
#intro-svg .ip-b { fill: #fff1b0; }
#intro-svg .ip-shade { fill: #141414; fill-opacity: 0; stroke: none; pointer-events: none; }
#intro-svg .ip-shadow { fill: var(--hl); stroke: none; }
#intro-svg .crease { fill: none; stroke: var(--ink); stroke-width: 4; stroke-dasharray: 14 12; stroke-linecap: round; opacity: 0.5; }
#intro-svg .trail { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0.1 17; opacity: 0.55; }
#intro-svg .streak { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
#intro-words { position: absolute; left: 0; right: 0; bottom: 15vh; height: 1px; pointer-events: none; }
#intro-words b { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-family: var(--display); font-weight: normal;
  font-size: clamp(46px, 11vmin, 108px); line-height: 1; white-space: nowrap; text-shadow: 5px 5px 0 var(--hl); opacity: 0; }
.intro-hint { position: absolute; bottom: 4vh; opacity: 0; font-size: 18px; animation: intro-hint-in 0.6s 1.2s forwards; }
@keyframes intro-hint-in { to { opacity: 0.5; } }

#screen-menu { background: radial-gradient(ellipse 62% 70% at 50% 46%, var(--paper) 40%, transparent 100%); }
.menu-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; max-width: 560px; width: 100%; }
.hero { width: min(64vw, 380px, 42vh); aspect-ratio: 220 / 130; margin-bottom: 2px; will-change: transform; }
.title { margin: 0; font-family: var(--display); font-weight: normal; font-size: clamp(54px, 13vmin, 112px); line-height: 0.95; letter-spacing: 0.02em; text-shadow: 5px 5px 0 var(--hl); }
.subtitle { margin: 4px 0 16px; font-size: clamp(20px, 3.6vmin, 28px); }
.btn-primary { min-width: 200px; height: 68px; padding: 0 44px; border-radius: 20px; background: var(--hl); color: #141414;
  font-family: var(--display); font-size: 38px; letter-spacing: 0.05em; border: 4px solid #141414;
  box-shadow: 0 0 0 3px var(--ink), 7px 7px 0 3px var(--ink); transition: transform 0.07s, box-shadow 0.07s; will-change: transform; }
.btn-primary:active:not(:disabled) { transform: translate(5px, 5px); box-shadow: 0 0 0 3px var(--ink), 2px 2px 0 3px var(--ink); }
.btn-primary:disabled { opacity: 0.5; }
.btn-secondary { min-width: 200px; height: 56px; padding: 0 32px; border-radius: 18px; background: var(--paper); color: var(--ink);
  font-family: var(--display); font-size: 30px; border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transition: transform 0.07s, box-shadow 0.07s; }
.btn-secondary:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.menu-stats { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
.menu-stats > div { display: flex; flex-direction: column; min-width: 104px; padding: 8px 14px 6px; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); }
.menu-stats b { font-family: var(--display); font-weight: normal; font-size: 30px; line-height: 1.1; }

#screen-result, #screen-pause { background: rgba(20, 20, 20, 0.22); }
.card { width: min(430px, 100%); max-height: 100%; overflow: auto; padding: 20px 22px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: var(--paper); border: 4px solid var(--ink); border-radius: 24px; box-shadow: 9px 9px 0 var(--ink); }
.card.small { width: min(330px, 100%); gap: 14px; }
.res-title { font-family: var(--display); font-size: clamp(34px, 7vmin, 50px); line-height: 1; }
.res-title.bad { color: var(--red); }
.res-mult { font-family: var(--display); font-size: clamp(76px, 18vmin, 124px); line-height: 0.95; text-shadow: 5px 5px 0 var(--hl); }
.res-note { font-size: 22px; min-height: 26px; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; width: 100%; margin: 6px 0 2px; }
.res-grid > div { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-top: 3px solid var(--ink); }
.res-grid b { font-family: var(--display); font-weight: normal; font-size: 32px; line-height: 1.1; }
.res-score { font-size: 22px; min-height: 26px; margin-bottom: 4px; }
.badge { display: inline-block; padding: 1px 12px 3px; background: var(--hl); color: #141414; border: 3px solid #141414; border-radius: 999px; font-family: var(--display); font-size: 24px; transform: rotate(-3deg); }

/* ------------------------------ bet panel (start + result screens) ------------------------------ */
.bet-panel { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 430px; margin: 2px 0 14px; padding: 8px 12px 12px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }
/* on the result card the bet panel is one compact row: balance + bet on the left, - / + on the right (quick chips live on the start screen) */
.card .bet-panel { flex-direction: row; align-items: center; justify-content: space-between; margin: 2px 0 6px; padding: 6px 10px; box-shadow: 3px 3px 0 var(--ink); }
.card .bet-panel .bp-top { flex: 1; justify-content: space-around; }
.card .bet-panel .bp-chips { display: none; }
.card .bet-panel .bp-ctrl { flex: none; }
.card .bet-panel { flex-wrap: wrap; }
.card .bet-panel .bp-refill { flex: 1 0 100%; }
.bp-top { display: flex; justify-content: space-around; }
.bp-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.bp-stat b { font-family: var(--display); font-weight: normal; font-size: 30px; }
.bp-ctrl { display: flex; align-items: center; gap: 8px; }
.bp-step { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--ink); border: 3px solid var(--ink);
  font-family: var(--display); font-size: 28px; line-height: 1; box-shadow: 2px 2px 0 var(--ink); transition: transform 0.07s, box-shadow 0.07s; }
.bp-chips { flex: 1; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.bp-chip { min-width: 46px; height: 38px; padding: 0 9px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px;
  font-family: var(--display); font-size: 20px; box-shadow: 2px 2px 0 var(--ink); transition: transform 0.07s, box-shadow 0.07s; }
.bp-chip.on { background: var(--hl); color: #141414; }
.bp-step:active:not(:disabled), .bp-chip:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.bp-step:disabled, .bp-chip:disabled { opacity: 0.35; cursor: default; }
.bp-refill { height: 44px; border-radius: 12px; background: #f9c8d9; color: #141414; border: 3px solid #141414; font-family: var(--display); font-size: 22px; box-shadow: 3px 3px 0 var(--ink); }
.chip.bet svg { fill: var(--hl); }
.res-money { font-size: 22px; min-height: 26px; }
.res-money b { font-family: var(--display); font-weight: normal; font-size: 28px; }
.res-money .win { color: #1f8a4c; }
.res-money .loss { color: var(--red); }

/* ------------------------------ menu button + cards (menu, settings, how to play, stats) ------------------------------ */
.menu-fab { position: absolute; top: calc(12px + var(--safe-t)); right: calc(14px + var(--safe-r)); z-index: 22; }
.modal { z-index: 28; background: rgba(20, 20, 20, 0.35); }
.btn-tile { width: 100%; max-width: 270px; min-height: 54px; flex: none; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 14px;
  font-family: var(--display); font-size: 28px; line-height: 1.15; letter-spacing: 0.03em; padding: 6px 14px; box-shadow: 5px 5px 0 var(--ink); transition: transform 0.07s, box-shadow 0.07s;
  display: flex; align-items: center; justify-content: center; text-align: center; }
.btn-tile:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.btn-tile.t-yellow { background: var(--hl); color: #141414; }
.btn-tile.t-pink { background: #f9c8d9; color: #141414; }
.btn-tile.t-blue { background: #bfe3f7; color: #141414; }
.btn-tile.t-red { background: #e8603f; color: #fff; border-color: #141414; }
.fine { font-size: 16px; opacity: 0.65; }
.set-list { width: 100%; display: flex; flex-direction: column; margin-bottom: 6px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 3px solid var(--ink); font-size: 22px; text-align: left; }
.set-row > span { flex: 1; }
.tog { flex: none; min-width: 76px; height: 38px; padding: 0 12px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px;
  font-family: var(--display); font-size: 20px; box-shadow: 2px 2px 0 var(--ink); transition: transform 0.07s, box-shadow 0.07s; }
.tog[aria-pressed="true"] { background: var(--hl); color: #141414; }
.tog:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.set-row output { flex: none; width: 46px; text-align: right; font-family: var(--display); font-size: 20px; }
.set-row input[type="range"] { flex: 0 1 140px; min-width: 70px; height: 26px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; touch-action: none; cursor: pointer; }
.set-row input[type="range"]:disabled { opacity: 0.35; cursor: default; }
.set-row input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: var(--paper); border: 3px solid var(--ink); border-radius: 99px; }
.set-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--hl); border: 3px solid #141414; box-shadow: 2px 2px 0 var(--ink); }
.set-row input[type="range"]::-moz-range-track { height: 8px; background: var(--paper); border: 3px solid var(--ink); border-radius: 99px; }
.set-row input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--hl); border: 3px solid #141414; box-shadow: 2px 2px 0 var(--ink); }
.help { width: 100%; margin: 0; padding-left: 24px; text-align: left; font-size: 19px; line-height: 1.28; }
.help li { margin-bottom: 6px; }
/* branded header + section labels on the (shared) How To Play card */
.help-brand { width: 100%; }
.help-brand .title { font-size: clamp(28px, 6.4vmin, 40px); margin: 0; }
.help-brand .subtitle { font-size: clamp(13px, 2.4vmin, 17px); margin: 2px 0 0; }
.help-h { width: 100%; text-align: left; font-family: var(--display); font-weight: normal; font-size: 21px; margin: 8px 0 0; }

#loading { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: var(--paper); font-family: var(--display); font-size: 34px; transition: opacity 0.4s; }
#loading.done { opacity: 0; pointer-events: none; }

/* narrow phones: slightly smaller round buttons so menu + sound + pause fit next to the chips */
@media (max-width: 420px) {
  .round { width: 44px; height: 44px; padding: 9px; }
  .ctrl { gap: 8px; }
}
/* ------------------------------ not very tall screens: keep the start screen (now with a bet panel) on one page ------------------------------ */
@media (max-height: 720px) {
  .hero { width: min(64vw, 300px, 32vh); }
  .subtitle { margin-bottom: 8px; }
  .menu-stats { margin-top: 12px; }
  .bet-panel { margin-bottom: 10px; gap: 6px; }
  .bp-stat b { font-size: 26px; }
  .card { padding: 14px 20px 18px; gap: 6px; }
  .res-title { font-size: clamp(30px, 6vmin, 42px); }
  .res-mult { font-size: clamp(60px, 14vmin, 100px); }
  .res-grid { margin: 2px 0; gap: 4px 22px; }
  .res-grid b { font-size: 26px; }
  .res-note { font-size: 20px; min-height: 22px; }
}
/* ------------------------------ short landscape phones ------------------------------ */
@media (max-height: 520px) {
  .bp-chips { display: none; }
  .bet-panel { max-width: 300px; }
  .menu-fab { top: 8px; }
  .mult { font-size: clamp(44px, 14vh, 80px); text-shadow: 3px 3px 0 var(--hl); }
  .phase { display: none; }
  .stat .val { font-size: 24px; }
  .btn-collect { position: absolute; right: calc(16px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); width: 190px; height: 70px; }
  .hud-bottom { position: static; }
  #hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); }
  .hero { width: min(26vw, 200px); }
  .menu-inner { flex-direction: column; }
  .title { font-size: clamp(40px, 12vh, 64px); }
  .subtitle { margin: 2px 0 8px; font-size: 18px; }
  .btn-primary { height: 54px; font-size: 30px; }
  .menu-stats { margin-top: 10px; }
  .menu-stats > div { padding: 4px 10px 2px; }
  .menu-stats b { font-size: 22px; }
  .card { padding: 12px 16px 16px; gap: 4px; }
  .res-mult { font-size: 64px; }
  .res-grid b { font-size: 24px; }
}
/* ------------------------------ very short screens (e.g. a phone/tablet in landscape): trim further so
   the start and result screens need scrolling as rarely as possible (the .screen scroll from above is
   always there as a fallback, but fitting on one page is nicer) ------------------------------ */
@media (max-height: 460px) {
  .menu-inner { gap: 2px; }
  .hero { width: min(20vw, 150px); }
  .menu-stats { margin-top: 6px; gap: 8px; }
  .menu-stats > div { padding: 3px 8px 1px; }
  .bet-panel { margin: 2px 0 8px; padding: 6px 10px 8px; gap: 4px; }
  .btn-primary { height: 46px; font-size: 26px; }
  .card { padding: 10px 14px 12px; gap: 3px; }
  .res-title { font-size: clamp(26px, 5.5vmin, 36px); }
  .res-mult { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) { .hero { animation: none; } }