:root {
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #243543;
  background: #bfe9f5;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #bfe9f5; }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; }
.game-shell { position: relative; width: 100%; height: 100%; min-height: 320px; overflow: hidden; isolation: isolate; background: #bfe9f5; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: absolute; z-index: 5; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; pointer-events: none; }
.level-chip { min-width: 74px; height: 42px; padding: 6px 12px 5px; border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(58,107,126,.14), inset 0 0 0 1px rgba(255,255,255,.7); display:flex; align-items:baseline; justify-content:center; gap:5px; backdrop-filter: blur(7px); }
.level-label { font-size: 10px; font-weight: 850; letter-spacing: .12em; color:#718894; }
.level-chip strong { font-size: 20px; line-height: 1; color:#2e4958; }
.progress-track { height: 10px; border-radius: 999px; background: rgba(45,87,103,.16); box-shadow: inset 0 1px 2px rgba(38,70,82,.12); overflow: hidden; }
.progress-fill { height:100%; width:0; border-radius:inherit; background: linear-gradient(90deg,#67cf83,#72dda0); box-shadow:0 0 10px rgba(63,197,118,.25); transform-origin:left center; }
.icon-btn { pointer-events:auto; width:42px; height:42px; border:0; border-radius:16px; background:rgba(255,255,255,.9); color:#496777; font-size:25px; font-weight:800; line-height:1; box-shadow:0 6px 18px rgba(58,107,126,.14); cursor:pointer; }
.icon-btn:active { transform:scale(.96); }
.tutorial { position:absolute; z-index:4; left:50%; bottom:max(48px, calc(env(safe-area-inset-bottom) + 34px)); transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:10px 14px 10px 11px; border-radius:22px; background:rgba(255,255,255,.9); box-shadow:0 9px 28px rgba(43,93,112,.16); transition:opacity .25s ease, transform .25s ease; pointer-events:none; white-space:nowrap; }
.tutorial.hidden { opacity:0; transform:translate(-50%,12px); }
.tutorial-hand { font-size:26px; animation:tapPulse 1.1s ease-in-out infinite; transform-origin:50% 80%; }
.tutorial-copy { display:flex; flex-direction:column; gap:1px; }
.tutorial-copy strong { font-size:14px; }
.tutorial-copy span { font-size:11px; color:#71848f; }
@keyframes tapPulse { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(5px) scale(.94)} }
.result-card { position:absolute; z-index:10; left:50%; top:50%; width:min(88vw,360px); transform:translate(-50%,-50%); padding:24px 22px 20px; border-radius:30px; text-align:center; background:rgba(255,255,255,.96); box-shadow:0 24px 70px rgba(35,76,91,.25); }
.result-icon { font-size:52px; filter:drop-shadow(0 6px 6px rgba(92,68,21,.14)); }
.result-card h1 { margin:6px 0 4px; font-size:25px; color:#2f4d5c; }
.result-card p { margin:0 0 18px; font-size:14px; color:#71848f; }
.result-actions { display:grid; grid-template-columns:1fr 1.3fr; gap:10px; }
.primary-btn,.secondary-btn { border:0; border-radius:16px; padding:13px 14px; font-weight:850; cursor:pointer; }
.primary-btn { color:white; background:linear-gradient(#62d487,#49bf74); box-shadow:0 7px 16px rgba(48,169,101,.22); }
.secondary-btn { color:#4b6877; background:#edf5f7; }
.primary-btn:active,.secondary-btn:active { transform:translateY(1px); }
.primary-btn:disabled,.secondary-btn:disabled { cursor:not-allowed; opacity:.55; transform:none; }
.wide-action { width:100%; margin-top:10px; }
.reward-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:10px; margin-top:10px; }
.reward-actions a,.gate-actions a { text-decoration:none; text-align:center; }
.access-gate { position:absolute; z-index:20; left:50%; top:50%; width:min(90vw,430px); transform:translate(-50%,-50%); padding:28px 24px 24px; border-radius:30px; text-align:center; background:rgba(255,255,255,.96); box-shadow:0 24px 70px rgba(35,76,91,.22); }
.gate-icon { font-size:50px; }
.access-gate h1 { margin:5px 0 8px; font-size:27px; color:#2f4d5c; }
.access-gate p { margin:0 0 20px; color:#596f7b; line-height:1.65; }
.gate-actions { display:grid; gap:10px; }
.gate-actions .primary-btn,.gate-actions .secondary-btn { display:block; }
.quick-retry { position:absolute; z-index:9; right:max(14px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); }
.toast { position:absolute; z-index:8; left:50%; bottom:max(22px, env(safe-area-inset-bottom)); transform:translate(-50%,10px); padding:9px 14px; border-radius:999px; background:rgba(31,49,58,.82); color:white; font-size:12px; font-weight:750; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width: 360px) { .hud{gap:8px}.level-chip{min-width:66px;padding-inline:9px}.tutorial-copy span{display:none} }
@media (prefers-reduced-motion: reduce) { .tutorial-hand{animation:none}.tutorial,.toast{transition:none} }