:root { color-scheme: dark; --ink: #fff2db; --muted: #b1c2b9; --mint: #bce6d5; --gold: #ffe09c; --panel: #18353cf5; --line: #e5edd31b; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #162f38; color: var(--ink); }
body { -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; }
button:disabled { cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
button { transition: background .18s ease, transform .18s ease, border-color .18s ease; }
button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(1px); }
[hidden] { display: none !important; }
#gameCanvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; outline: none; }
.site-header { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(24px + var(--safe-top)) max(28px, env(safe-area-inset-right)); z-index: 3; pointer-events: none; }
.site-header button { pointer-events: auto; }
.wordmark { display: flex; gap: 9px; align-items: center; background: transparent; padding: 0; text-align: left; color: var(--mint); }
.wordmark svg { width: 37px; height: 37px; }
.wordmark > span { font-size: 14px; letter-spacing: .27em; font-weight: 700; line-height: 1.25; }
.wordmark-sub { display: block; font-size: 9px; letter-spacing: .32em; font-weight: 500; }
.header-tools { display: flex; align-items: center; gap: 24px; }
.local-tag { font-size: 9px; color: var(--muted); letter-spacing: .24em; }
.icon-button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff08; border: 1px solid var(--line); border-radius: 50%; }
.icon-button:hover { background: #ffffff16; }
.icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.overlay { position: fixed; inset: 96px 0 0; padding: 20px 24px calc(30px + var(--safe-bottom)); display: flex; align-items: center; justify-content: center; overflow-y: auto; overscroll-behavior: contain; z-index: 5; }
.home-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 80px; max-width: 980px; width: 100%; margin: auto; }
.eyebrow { display: block; font-size: 10px; line-height: 1.6; letter-spacing: .19em; text-transform: uppercase; color: var(--mint); font-weight: 650; }
.hero h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(60px, 7vw, 91px); line-height: .98; font-weight: normal; letter-spacing: -.055em; margin: 20px 0 22px; }
.hero h1 em { font-weight: normal; color: var(--mint); }
.hero p { max-width: 330px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.hero-foot { margin-top: 30px; display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .15em; color: var(--muted); text-transform: uppercase; }
.hero-foot i { width: 6px; height: 6px; background: var(--mint); border-radius: 50%; }
.journey-card, .surface { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 20px 80px #0b1c242e; }
.journey-card { padding: 30px; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pill { display: inline-block; background: #bce6d511; color: var(--mint); border: 1px solid #bce6d525; border-radius: 30px; font-size: 9px; letter-spacing: .09em; padding: 6px 9px; text-transform: uppercase; }
.journey-card h2, .screen-title { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; letter-spacing: -.035em; line-height: 1.05; }
.journey-card h2 { font-size: 36px; margin: 28px 0 10px; }
.card-copy { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0 0 22px; }
.path-preview { display: flex; align-items: center; gap: 0; margin: 22px 0; }
.path-preview i { height: 1px; flex: 1; background: var(--line); }
.path-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; background: #ffffff08; color: var(--muted); border: 1px solid var(--line); }
.path-dot.done { color: var(--mint); border-color: #bce6d544; }
.path-dot.current { color: #18353c; background: var(--mint); box-shadow: 0 0 0 5px #bce6d50b; }
.primary, .secondary { min-height: 48px; border-radius: 12px; padding: 13px 20px; font-weight: 650; font-size: 13px; display: inline-flex; gap: 15px; align-items: center; justify-content: center; }
.primary { background: var(--mint); color: #15363b; }
.primary:hover { background: #d1f1df; }
.secondary { background: #ffffff08; border: 1px solid var(--line); }
.secondary:hover { background: #ffffff12; }
.full-width { width: 100%; }
.button-row { display: flex; gap: 10px; margin-top: 12px; }
.button-row > button { flex: 1; }
.quiet-button { background: transparent; color: var(--muted); padding: 10px 4px; font-size: 12px; }
.quiet-button:hover { color: var(--ink); }
.card-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 14px; color: var(--muted); font-size: 11px; }
.screen { width: min(100%, 760px); margin: auto; }
.screen-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 24px; }
.screen-title { font-size: 44px; margin: 10px 0; }
.screen-subtitle { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; max-width: 480px; }
.chapter-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 20px; }
.chapter-tab { min-height: 58px; padding: 10px 4px; background: #ffffff06; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 11px; }
.chapter-tab span { display: block; font-size: 9px; margin-top: 5px; }
.chapter-tab.selected { border-color: #bce6d577; background: #bce6d512; color: var(--mint); }
.level-list { display: grid; gap: 9px; }
.level-card { display: flex; align-items: center; gap: 16px; text-align: left; padding: 15px 18px; width: 100%; border-radius: 14px; border: 1px solid var(--line); background: #17343eea; }
.level-card:hover { background: #264a4e; }
.level-card:disabled { opacity: .43; }
.level-number { flex: 0 0 36px; height: 36px; display: grid; place-items: center; font-family: Georgia, serif; font-size: 21px; border: 1px solid #bce6d541; border-radius: 50%; color: var(--mint); }
.level-text { flex: 1; }
.level-text strong { display: block; font-size: 14px; margin-bottom: 5px; }
.level-text small { color: var(--muted); font-size: 10px; }
.stars { letter-spacing: .12em; font-size: 16px; white-space: nowrap; }
.stars .earned { color: var(--gold); }
.stars .empty { color: #a5bfb32b; }
.map-note { padding: 18px 4px 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.mode-card { padding: 26px; text-align: left; min-height: 220px; display: flex; flex-direction: column; align-items: flex-start; border-radius: 20px; background: #17353def; border: 1px solid var(--line); }
.mode-card:hover { border-color: #bce6d56b; background: #214347; }
.mode-symbol { font-size: 27px; color: var(--gold); margin-bottom: 16px; }
.mode-card strong { font-family: Georgia, serif; font-size: 26px; font-weight: normal; }
.mode-card p { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 10px 0; }
.mode-card small { color: var(--mint); font-size: 10px; letter-spacing: .06em; margin-top: auto; }
.modal { width: min(100%, 520px); padding: 32px; margin: auto; }
.modal .screen-title { font-size: 38px; }
.result-stars { text-align: center; margin: 24px 0 12px; font-size: 32px; }
.result-stars .stars { font-size: 32px; }
.result-score { font-family: Georgia, serif; font-size: 66px; text-align: center; line-height: 1; margin: 20px 0 6px; }
.result-caption { text-align: center; color: var(--muted); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-block: 1px solid var(--line); margin: 25px 0; padding: 20px 0; }
.stat-grid strong { display: block; font-size: 22px; font-weight: 500; }
.stat-grid span { display: block; margin-top: 6px; font-size: 10px; color: var(--muted); }
.result-tip, .settings-note { color: var(--muted); line-height: 1.8; font-size: 12px; }
.badge-list { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0; }
.reward { background: #ffe09c0b; border: 1px solid #ffe09c35; border-radius: 12px; padding: 12px 15px; color: var(--gold); font-size: 12px; margin: 16px 0; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.setting-row strong { display: block; font-size: 13px; font-weight: 550; }
.setting-row small { display: block; font-size: 10px; line-height: 1.6; color: var(--muted); margin-top: 5px; max-width: 280px; }
.toggle { appearance: none; -webkit-appearance: none; width: 43px; height: 25px; min-width: 43px; border-radius: 20px; background: #6d858740; border: 1px solid #bce6d530; position: relative; cursor: pointer; margin: 0; }
.toggle::after { content: ''; display: block; width: 17px; height: 17px; border-radius: 50%; background: #7f9b98; margin: 3px; transition: transform .18s; }
.toggle:checked { background: #bce6d540; }
.toggle:checked::after { background: var(--mint); transform: translateX(17px); }
input[type=range] { width: 125px; accent-color: var(--mint); }
select { background: #16323a; border: 1px solid #bce6d53b; border-radius: 8px; color: var(--ink); padding: 8px; max-width: 150px; font-size: 12px; }
.settings-section { margin-top: 28px; }
.warning { color: #f5bc9c; border: 1px solid #f5bc9c33; background: #f5bc9c09; padding: 12px; border-radius: 10px; font-size: 12px; line-height: 1.7; }
.collection-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.fruit-card { text-align: center; padding: 12px 5px; border: 1px solid var(--line); border-radius: 14px; background: #17353dcf; }
.fruit-card img { width: 74px; height: 74px; max-width: 100%; object-fit: contain; }
.fruit-card.undiscovered img { filter: grayscale(1) brightness(.55); opacity: .5; }
.fruit-card span { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.hud { position: fixed; top: calc(20px + var(--safe-top)); left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); z-index: 3; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; align-items: start; pointer-events: none; }
.hud button { pointer-events: auto; }
.score-block > strong { display: block; font-size: 37px; line-height: 1.2; font-variant-numeric: tabular-nums; font-weight: 550; }
.flow-label { font-size: 9px; letter-spacing: .17em; color: var(--gold); }
.objective-block { text-align: center; padding-top: 2px; }
.objective-block > strong { display: block; font-size: 19px; margin: 5px 0 8px; font-weight: 500; }
.objective-track { width: min(160px, 100%); height: 3px; margin: auto; background: #ffffff14; border-radius: 3px; overflow: hidden; }
.objective-track > span { display: block; height: 100%; width: 0%; background: var(--mint); }
#roundDetail { display: block; color: var(--muted); font-size: 9px; letter-spacing: .05em; margin-top: 8px; }
.round-tools { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.clock { text-align: right; margin-right: 6px; }
.clock > strong { font-weight: 500; font-size: 25px; font-variant-numeric: tabular-nums; }
#heartsValue { display: block; min-height: 14px; color: #edaa9b; font-size: 12px; letter-spacing: .1em; }
.rush-hud { position: fixed; bottom: calc(84px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); width: 132px; z-index: 2; text-align: center; pointer-events: none; }
.rush-hud > span { font-size: 8px; letter-spacing: .18em; color: var(--gold); }
.rush-hud > div { height: 3px; background: #ffe09c22; margin-top: 6px; border-radius: 3px; overflow: hidden; }
.rush-hud i { display: block; height: 100%; background: var(--gold); }
.play-footer { position: fixed; bottom: calc(23px + var(--safe-bottom)); left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: end; z-index: 2; pointer-events: none; }
.play-footer button { pointer-events: auto; }
.coach { display: block; font-size: 14px; color: var(--ink); }
.input-hint { display: block; margin-top: 7px; font-size: 8px; letter-spacing: .11em; color: var(--muted); }
.toast { position: fixed; bottom: calc(30px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); padding: 12px 18px; background: #102d36f5; color: var(--ink); border: 1px solid #bce6d54b; font-size: 12px; border-radius: 12px; z-index: 10; box-shadow: 0 8px 40px #0004; }
body[data-screen=playing] .site-header { display: none; }
body[data-screen=paused] .site-header, body[data-screen=results] .site-header { opacity: .35; pointer-events: none; }
body[data-screen=paused] .site-header button, body[data-screen=results] .site-header button { pointer-events: none; }
body[data-screen=paused] .overlay, body[data-screen=results] .overlay { inset: 0; background: #0b202570; padding-top: calc(30px + var(--safe-top)); }
body.high-contrast { --muted: #d4e1d7; --line: #e5edd350; --panel: #0c222dfc; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.noscript { position: fixed; inset: 20%; padding: 30px; background: #17353d; border: 1px solid #bce6d533; z-index: 10; }
@media (max-width: 700px) {
  .site-header { padding: calc(18px + var(--safe-top)) 22px; }
  .local-tag { display: none; }
  .overlay { inset: calc(80px + var(--safe-top)) 0 0; padding: 15px 20px calc(25px + var(--safe-bottom)); }
  .home-layout { display: block; max-width: 420px; }
  .hero h1 { font-size: 58px; margin: 12px 0 14px; }
  .hero p { font-size: 13px; margin: 0 0 22px; max-width: 330px; }
  .hero-foot { display: none; }
  .journey-card { padding: 23px; border-radius: 20px; }
  .journey-card h2 { font-size: 29px; margin: 20px 0 8px; }
  .card-copy { margin-bottom: 14px; font-size: 12px; }
  .path-preview { margin: 15px 0 20px; }
  .card-bottom { margin-top: 16px; padding-top: 9px; }
  .screen-title { font-size: 35px; }
  .screen-heading { margin-bottom: 20px; }
  .chapter-tabs { gap: 5px; }
  .chapter-tab { font-size: 10px; padding: 9px 2px; }
  .level-card { gap: 11px; padding: 14px 12px; }
  .level-text strong { font-size: 13px; }
  .stars { font-size: 14px; }
  .mode-grid { gap: 10px; }
  .mode-card { padding: 19px; min-height: 230px; }
  .mode-card strong { font-size: 23px; }
  .mode-card p { font-size: 11px; }
  .modal { padding: 25px; }
  .collection-grid { grid-template-columns: repeat(3, 1fr); }
  .hud { left: 18px; right: 18px; grid-template-columns: 1fr 1fr; top: calc(15px + var(--safe-top)); gap: 6px; }
  .objective-block { position: absolute; top: 66px; left: 0; right: 0; }
  .objective-block .eyebrow { font-size: 8px; }
  .objective-block > strong { font-size: 14px; margin: 2px 0 4px; }
  #roundDetail { display: none; }
  .score-block > strong { font-size: 31px; }
  .hud .eyebrow { font-size: 8px; }
  .round-tools { gap: 6px; }
  .round-tools .icon-button { width: 38px; height: 38px; }
  .clock > strong { font-size: 23px; }
  .play-footer { left: 20px; right: 20px; }
  .coach { font-size: 12px; }
  .input-hint { font-size: 7px; }
}
@media (max-height: 620px) {
  .overlay { align-items: flex-start; }
  .home-layout, .screen, .modal { margin-top: 0; margin-bottom: 0; }
  .hero h1 { font-size: 43px; }
  .hero p { font-size: 12px; }
  .journey-card { padding: 19px; }
  .hero-foot { display: none; }
  .screen-title { font-size: 30px; }
  .site-header { padding-top: calc(12px + var(--safe-top)); padding-bottom: 12px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .overlay { inset: calc(64px + var(--safe-top)) 0 0; }
  .home-layout { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 43px; margin-top: 10px; }
  .journey-card h2 { font-size: 27px; margin-top: 10px; }
  .path-preview, .card-bottom, .card-copy { display: none; }
  .hud { top: calc(10px + var(--safe-top)); }
  .objective-block { position: static; }
  .objective-block .eyebrow { font-size: 8px; }
  .score-block > strong { font-size: 27px; }
  .objective-block > strong { font-size: 15px; margin: 2px 0 4px; }
  #roundDetail { display: none; }
  .play-footer { bottom: calc(12px + var(--safe-bottom)); }
  .input-hint { display: none; }
  .rush-hud { bottom: calc(49px + var(--safe-bottom)); }
}
@media (prefers-reduced-motion: reduce) { button, .toggle::after { transition: none; } }
body.reduced-motion button, body.reduced-motion .toggle::after { transition: none; }