:root {
  color-scheme: light;
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --ink: #18233f;
  --ink-soft: #52617b;
  --cream: #fff5df;
  --paper: #fffaf0;
  --raspberry: #f55d83;
  --raspberry-dark: #c53c63;
  --tangerine: #ff9f3d;
  --mint: #49c8ae;
  --lemon: #ffd44d;
  --lavender: #7068d8;
  --panel: rgba(255, 250, 240, 0.96);
  --shadow: 0 20px 55px rgba(13, 22, 47, 0.28);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:#10172b; }
body { min-width:0; min-height:0; display:grid; place-items:center; }
button, select { font:inherit; }
button:focus-visible, select:focus-visible, canvas:focus-visible { outline:4px solid white; outline-offset:3px; }
#app { position:relative; width:100vw; height:100vh; height:100dvh; min-width:0; min-height:0; overflow:hidden; }
#game-shell { position:relative; width:100%; height:100%; min-width:0; min-height:0; max-width:620px; max-height:100%; margin:0 auto; overflow:hidden; isolation:isolate; background:#1d2949; box-shadow:0 0 90px rgba(0,0,0,.48); }
#game-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; user-select:none; }
.is-hidden { display:none !important; }
.execution-paused * { animation-play-state:paused !important; }

.overlay { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:max(34px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom)); text-align:center; }
.overlay-menu { justify-content:flex-end; padding-bottom:max(38px, calc(env(safe-area-inset-bottom) + 22px)); background:linear-gradient(180deg, rgba(24,35,63,.02) 8%, rgba(24,35,63,.12) 45%, rgba(18,25,48,.92) 100%); }
.overlay-upgrade, .overlay-game-over, .overlay-panel { background:rgba(19,28,54,.76); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.overlay-panel { z-index:60; background:rgba(19,28,54,.9); }
.overlay-system { z-index:100; background:radial-gradient(circle at 50% 30%, #3f5790, #202d52 58%, #151d37); }
.overlay-system h2 { margin-bottom:14px; }
.overlay-upgrade::before, .overlay-game-over::before { content:""; position:absolute; width:150%; height:58%; top:20%; background:radial-gradient(circle, rgba(255,212,77,.2), transparent 63%); pointer-events:none; }

.eyebrow { position:relative; margin:0 0 9px; color:#ffe58e; font-size:clamp(10px,2.5vw,14px); font-weight:950; letter-spacing:.17em; line-height:1.35; text-transform:uppercase; }
h1, h2, p { text-wrap:balance; }
h1 { position:relative; margin:0; color:white; font-size:clamp(50px,13.5vw,82px); font-weight:1000; line-height:.84; letter-spacing:-.075em; text-shadow:0 7px 0 rgba(10,18,39,.3), 0 18px 34px rgba(8,15,32,.35); }
h1 span { color:var(--lemon); }
h2 { position:relative; margin:0 0 24px; color:white; font-size:clamp(34px,8.7vw,52px); font-weight:950; line-height:.96; letter-spacing:-.05em; }
.menu-copy { position:relative; max-width:440px; margin:18px 0 14px; color:rgba(255,255,255,.9); font-size:clamp(14px,3.5vw,18px); font-weight:650; line-height:1.4; }

.menu-factory { position:absolute; top:9%; left:50%; width:250px; height:220px; transform:translateX(-50%); filter:drop-shadow(0 18px 22px rgba(8,15,35,.3)); animation:factory-float 3s ease-in-out infinite; }
.menu-chute { position:absolute; top:0; left:73px; width:104px; height:96px; border:7px solid #f5d7aa; border-top:0; border-radius:0 0 36px 36px; background:linear-gradient(90deg,#8d516a,#f55d83 45%,#8d516a); box-shadow:inset 0 -10px 0 rgba(56,30,62,.18); }
.menu-chute::before { content:""; position:absolute; left:17px; top:-10px; width:56px; height:22px; border-radius:50%; background:#fff0cf; box-shadow:0 7px 0 #b9826d; }
.menu-box { position:absolute; bottom:0; left:37px; width:176px; height:70px; border:6px solid #f8d9a9; border-radius:9px 9px 22px 22px; background:linear-gradient(#ffb553,#f07b42); box-shadow:inset 0 13px 0 rgba(255,255,255,.18); }
.menu-box::before, .menu-box::after { content:""; position:absolute; top:-30px; width:87px; height:35px; background:#ffbf63; border:5px solid #f8d9a9; }
.menu-box::before { left:-6px; transform:skewY(-16deg); } .menu-box::after { right:-6px; transform:skewY(16deg); }
.menu-snack { position:absolute; z-index:3; display:grid; place-items:center; border:5px solid rgba(255,255,255,.75); box-shadow:0 10px 18px rgba(10,18,40,.28); }
.menu-cookie { top:88px; left:48px; width:57px; height:57px; border-radius:50%; background:#f6b854; color:#704428; font-size:38px; line-height:1; transform:rotate(-12deg); animation:snack-bob 1.8s ease-in-out infinite; }
.menu-donut { top:105px; right:46px; width:59px; height:59px; border-radius:50%; background:#f55d83; animation:snack-bob 1.8s .35s ease-in-out infinite; }
.menu-donut::after { content:""; width:20px; height:20px; border-radius:50%; background:#1e2b4b; box-shadow:inset 0 3px 0 rgba(255,255,255,.18); }

.best-score-card { position:relative; display:flex; align-items:baseline; gap:8px; margin:2px 0 14px; color:rgba(255,255,255,.7); font-size:12px; font-weight:900; letter-spacing:.14em; }
.best-score-card strong { color:white; font-size:22px; letter-spacing:-.03em; }
.primary-button, .secondary-button, .upgrade-card { position:relative; border:0; cursor:pointer; user-select:none; }
.primary-button { display:flex; width:min(100%,390px); min-height:64px; align-items:center; justify-content:center; gap:18px; padding:16px 24px; border:3px solid rgba(255,255,255,.66); border-radius:22px; background:linear-gradient(180deg,#ffe36b,#ffbd3e); color:#3d2c17; box-shadow:0 8px 0 #d77a33,0 18px 36px rgba(8,15,33,.38); font-size:16px; font-weight:1000; letter-spacing:.045em; transition:transform 120ms ease,box-shadow 120ms ease; }
.primary-button span:last-child { font-size:25px; }
.primary-button:active { transform:translateY(6px) scale(.99); box-shadow:0 2px 0 #d77a33,0 8px 18px rgba(8,15,33,.32); }
.secondary-button { margin-top:16px; padding:10px 18px; background:transparent; color:rgba(255,255,255,.86); font-size:13px; font-weight:900; letter-spacing:.1em; }
.secondary-button-panel { min-height:42px; border:2px solid rgba(255,255,255,.3); border-radius:15px; background:rgba(10,18,40,.24); }
.compact-button { min-height:56px; margin-top:22px; }
.control-hint { margin:16px 0 0; color:rgba(255,255,255,.62); font-size:11px; font-weight:750; }

.icon-button { position:absolute; z-index:30; top:max(14px, env(safe-area-inset-top)); display:grid; height:43px; place-items:center; border:2px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(24,35,63,.48); color:white; box-shadow:0 8px 18px rgba(8,15,36,.2); font-size:13px; font-weight:1000; cursor:pointer; backdrop-filter:blur(7px); }
.language-button { left:max(14px, env(safe-area-inset-left)); width:64px; padding:0 8px; appearance:none; text-align:center; text-align-last:center; }
.language-button option { color:var(--ink); background:white; font-weight:800; }
.language-button.in-game { top:auto; left:max(12px, env(safe-area-inset-left)); bottom:max(12px, env(safe-area-inset-bottom)); width:56px; height:38px; border-color:rgba(255,255,255,.28); background:rgba(24,35,63,.58); }
.sound-button { right:max(14px, env(safe-area-inset-right)); width:43px; font-size:22px; }
.sound-button.in-game { top:auto; right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom)); width:38px; height:38px; border-color:rgba(255,255,255,.28); font-size:18px; }
.hosted .sound-button { display:none; }

#hud { position:absolute; z-index:8; inset:max(15px, env(safe-area-inset-top)) 14px auto; min-height:78px; pointer-events:none; }
.hud-pill { position:absolute; display:flex; flex-direction:column; min-width:108px; padding:9px 12px; border:2px solid rgba(255,255,255,.5); border-radius:17px; background:rgba(24,35,63,.72); color:white; box-shadow:0 8px 20px rgba(8,15,35,.22); backdrop-filter:blur(8px); }
.hud-label { color:rgba(255,255,255,.66); font-size:9px; font-weight:950; letter-spacing:.14em; }
.hud-pill strong { font-size:20px; line-height:1.06; }
.hud-pill small { color:#ffe88f; font-size:8px; font-weight:850; letter-spacing:.05em; }
.hud-score { left:0; top:0; }
.hud-time { left:50%; top:0; min-width:90px; align-items:center; transform:translateX(-50%); }
.hud-boxes { right:0; top:0; min-width:92px; flex-direction:row; align-items:center; gap:8px; }
.hud-boxes > span:last-child { display:flex; flex-direction:column; }
.box-symbol { color:var(--lemon); font-size:22px; }
.combo-pill { position:absolute; top:82px; left:0; display:flex; align-items:baseline; gap:6px; padding:7px 11px; border-radius:999px; background:var(--raspberry); color:white; box-shadow:0 6px 14px rgba(197,60,99,.32); }
.combo-pill strong { font-size:15px; }.combo-pill span { font-size:8px; font-weight:950; letter-spacing:.12em; }
.jam-meter { position:absolute; top:84px; right:0; width:126px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:7px; color:white; font-size:8px; font-weight:950; letter-spacing:.1em; }
.jam-meter > div { height:9px; overflow:hidden; border:2px solid rgba(255,255,255,.55); border-radius:999px; background:rgba(8,15,35,.42); }
.jam-meter i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--mint),var(--lemon) 55%,var(--raspberry)); transition:width 180ms ease; }

.help-grid { position:relative; width:min(100%,440px); display:grid; gap:11px; }
.help-grid article { display:grid; grid-template-columns:54px 1fr; align-items:center; gap:12px; padding:14px; border:2px solid rgba(255,255,255,.18); border-radius:19px; background:rgba(255,255,255,.1); color:white; text-align:left; }
.help-grid article > span { display:grid; width:50px; height:50px; place-items:center; border-radius:16px; background:linear-gradient(145deg,var(--raspberry),var(--tangerine)); color:white; font-size:25px; font-weight:950; }
.help-grid strong { display:block; font-size:14px; }.help-grid p { margin:4px 0 0; color:rgba(255,255,255,.7); font-size:11px; line-height:1.42; }

.upgrade-options { position:relative; width:min(100%,470px); display:grid; gap:12px; }
.upgrade-card { width:100%; min-height:116px; display:grid; grid-template-columns:62px 1fr auto; align-items:center; gap:13px; padding:15px; border:3px solid rgba(255,255,255,.7); border-radius:23px; background:var(--panel); color:var(--ink); box-shadow:0 8px 0 rgba(138,76,74,.65),var(--shadow); text-align:left; transition:transform 120ms ease; }
.upgrade-card:hover, .upgrade-card:focus-visible { transform:translateY(-3px); }
.upgrade-card:active { transform:translateY(5px); box-shadow:0 3px 0 rgba(138,76,74,.65),0 8px 16px rgba(8,15,35,.3); }
.upgrade-card .upgrade-icon { display:grid; width:60px; height:60px; place-items:center; border-radius:19px; background:linear-gradient(145deg,#ffe77a,#ffae4a); color:#573e20; font-size:27px; font-weight:1000; }
.upgrade-card strong { display:block; font-size:17px; letter-spacing:-.025em; }.upgrade-card p { margin:5px 0 0; color:var(--ink-soft); font-size:11px; line-height:1.4; }
.upgrade-card .upgrade-arrow { color:var(--raspberry); font-size:24px; }

.result-score { position:relative; width:min(100%,390px); margin:0 0 13px; padding:18px; border:3px solid rgba(255,255,255,.55); border-radius:25px; background:linear-gradient(145deg,#fff4d0,#ffd67a); color:var(--ink); box-shadow:0 9px 0 #c66f48,0 20px 42px rgba(8,15,35,.34); }
.result-score span { display:block; color:#775c4b; font-size:10px; font-weight:950; letter-spacing:.15em; }.result-score strong { display:block; font-size:clamp(50px,14vw,76px); line-height:.95; letter-spacing:-.06em; }
.result-grid { position:relative; width:min(100%,390px); display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0 14px; }
.result-grid div { padding:12px 6px; border:2px solid rgba(255,255,255,.16); border-radius:17px; background:rgba(255,255,255,.1); color:white; }
.result-grid span { display:block; color:rgba(255,255,255,.55); font-size:8px; font-weight:900; letter-spacing:.12em; }.result-grid strong { display:block; margin-top:2px; font-size:20px; }
.new-best { position:relative; margin:1px 0 12px; padding:7px 14px; border-radius:999px; background:var(--raspberry); color:white; font-size:11px; font-weight:1000; letter-spacing:.1em; animation:record-pop .75s ease-in-out infinite alternate; }

.system-symbol { display:grid; width:88px; height:88px; margin-bottom:20px; place-items:center; border:5px solid rgba(255,255,255,.55); border-radius:28px; background:rgba(255,255,255,.1); color:white; font-size:38px; font-weight:1000; }
.error-symbol { color:#ffe371; }.system-copy { max-width:380px; margin:0; color:rgba(255,255,255,.72); font-size:14px; line-height:1.55; }
.loading-mark { width:104px; height:104px; margin-bottom:23px; filter:drop-shadow(0 14px 20px rgba(0,0,0,.25)); animation:factory-float 2.2s ease-in-out infinite; }
.loading-track { width:min(74%,330px); height:8px; margin-top:18px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.14); }
.loading-track span { display:block; width:38%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--raspberry),var(--lemon)); animation:loading-line 1.15s ease-in-out infinite; }

.announcement { position:absolute; z-index:25; top:24%; left:50%; width:max-content; max-width:88%; padding:12px 18px; transform:translateX(-50%); border:3px solid rgba(255,255,255,.74); border-radius:17px; background:rgba(24,35,63,.88); color:white; box-shadow:0 10px 24px rgba(8,15,35,.3); font-size:13px; font-weight:1000; letter-spacing:.05em; text-align:center; pointer-events:none; animation:announce-in 1.6s both; }
.drop-hint { position:absolute; z-index:7; top:155px; left:50%; display:flex; flex-direction:column; align-items:center; transform:translateX(-50%); color:white; pointer-events:none; }
.drop-hint span { width:38px; height:52px; border:3px solid rgba(255,255,255,.86); border-radius:21px; animation:hint-slide 1.2s ease-in-out infinite; }.drop-hint p { margin:7px 0 0; padding:6px 9px; border-radius:999px; background:rgba(24,35,63,.72); font-size:10px; font-weight:900; }
#screen-flash { position:absolute; z-index:23; inset:0; opacity:0; background:white; pointer-events:none; }
#screen-flash.flash { animation:screen-flash .28s ease-out; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

@keyframes factory-float { 0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg)} 50%{transform:translateX(-50%) translateY(-9px) rotate(1deg)} }
@keyframes snack-bob { 0%,100%{transform:translateY(0) rotate(-12deg)} 50%{transform:translateY(-9px) rotate(7deg)} }
@keyframes loading-line { 0%{transform:translateX(-110%)} 55%,100%{transform:translateX(270%)} }
@keyframes record-pop { to{transform:scale(1.05)} }
@keyframes announce-in { 0%{opacity:0;transform:translate(-50%,-14px) scale(.9)} 15%,78%{opacity:1;transform:translate(-50%,0) scale(1)} 100%{opacity:0;transform:translate(-50%,-6px) scale(.96)} }
@keyframes hint-slide { 0%,100%{transform:translateX(-62px)} 50%{transform:translateX(62px)} }
@keyframes screen-flash { 0%{opacity:.45} 100%{opacity:0} }

@media (min-aspect-ratio: 4/3) {
  #game-shell { max-width:720px; }
  .overlay-menu { padding-left:48%; justify-content:center; align-items:flex-start; text-align:left; background:linear-gradient(90deg,rgba(18,25,48,.12),rgba(18,25,48,.92) 58%); }
  .menu-factory { left:25%; top:27%; transform:translateX(-50%) scale(1.15); }
  .menu-copy { max-width:340px; }.primary-button { max-width:340px; }.best-score-card { align-self:flex-start; }
  @keyframes factory-float { 0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg) scale(1.15)} 50%{transform:translateX(-50%) translateY(-8px) rotate(1deg) scale(1.15)} }
}

@media (max-height: 700px) {
  .overlay { padding-top:20px; padding-bottom:18px; }
  .menu-factory { top:5%; transform:translateX(-50%) scale(.78); transform-origin:top center; }
  h1 { font-size:clamp(42px,11vw,64px); }.menu-copy { margin:10px 0 8px; font-size:13px; }.control-hint { margin-top:10px; }
  .help-grid { gap:7px; }.help-grid article { padding:9px; min-height:62px; }.help-grid article > span { width:42px; height:42px; }.compact-button { margin-top:13px; }
  .upgrade-options { gap:8px; }.upgrade-card { min-height:90px; padding:10px; }.upgrade-card .upgrade-icon { width:52px; height:52px; }
  .result-score { padding:11px; }.result-score strong { font-size:46px; }.result-grid { margin:6px 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}