:root{--backdrop-top: #141d44;--backdrop-bottom: #080c1c;--panel: #0d1430;--panel-edge: #1e2a58;--accent: #4f8cff;--success: #34d399;--warning: #fbbf24;--danger: #fb7185;--text: #f4f7ff;--text-soft: rgba(244, 247, 255, .62);--gutter: 16px;--radius-lg: 28px;--radius-md: 20px;--radius-sm: 14px;--press: 4px;--font-display: "Baloo 2", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overscroll-behavior:none}body{font-family:var(--font-body);color:var(--text);background:linear-gradient(170deg,var(--backdrop-top),var(--backdrop-bottom));background-attachment:fixed;user-select:none;-webkit-user-select:none;transition:background .42s ease}#app{position:relative;height:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 10px) var(--gutter) calc(env(safe-area-inset-bottom) + 14px);overflow:hidden}.screen{position:absolute;inset:calc(env(safe-area-inset-top) + 10px) var(--gutter) calc(env(safe-area-inset-bottom) + 14px);display:flex;flex-direction:column;gap:14px;animation:screen-in .26s cubic-bezier(.22,1,.36,1)}@keyframes screen-in{0%{opacity:0;transform:translateY(14px) scale(.99)}}.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}.scroll::-webkit-scrollbar{display:none}h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:.01em}h1{font-size:clamp(30px,9vw,42px);line-height:1.05}.subtle{color:var(--text-soft);font-size:14px;font-weight:600}.btn{font-family:var(--font-display);font-weight:700;font-size:17px;color:#fff;border:0;border-radius:var(--radius-md);padding:15px 22px;background:var(--accent);box-shadow:0 var(--press) 0 color-mix(in srgb,var(--accent) 62%,#000);transform:translateY(0);transition:transform 90ms ease,box-shadow 90ms ease,filter .16s ease;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;touch-action:manipulation}.btn:active:not(:disabled){transform:translateY(var(--press));box-shadow:0 0 color-mix(in srgb,var(--accent) 62%,#000)}.btn:disabled{filter:grayscale(.7) brightness(.75);cursor:default}.btn.wide{width:100%}.btn.big{font-size:20px;padding:19px 24px;border-radius:var(--radius-lg)}.btn.ghost{background:#ffffff14;box-shadow:0 var(--press) 0 #00000047;color:var(--text)}.btn.success{background:var(--success);box-shadow:0 var(--press) 0 color-mix(in srgb,var(--success) 62%,#000)}.btn.warning{background:var(--warning);color:#3a2a00;box-shadow:0 var(--press) 0 color-mix(in srgb,var(--warning) 62%,#000)}.icon-btn{width:46px;height:46px;padding:0;border-radius:16px;font-size:20px}.hud{display:flex;align-items:center;gap:10px}.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:#ffffff17;font-weight:800;font-size:15px;font-family:var(--font-display);white-space:nowrap}.chip.tight{padding:7px 11px;font-size:14px}.spacer{flex:1}.board-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}#board{display:block;touch-action:none;border-radius:var(--radius-lg)}.banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:44px;font-weight:800;pointer-events:none;text-shadow:0 6px 22px rgba(0,0,0,.45);opacity:0}.banner.show{animation:banner-pop .82s cubic-bezier(.2,1.5,.4,1) forwards}@keyframes banner-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-6deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(2deg)}36%{transform:translate(-50%,-50%) scale(1) rotate(0)}78%{opacity:1}to{opacity:0;transform:translate(-50%,-78%) scale(.94)}}.map-path{position:relative;padding:8px 0 32px}.map-node{position:relative;width:62px;height:62px;border-radius:22px;border:0;font-family:var(--font-display);font-weight:800;font-size:19px;color:#fff;background:#ffffff1a;box-shadow:0 var(--press) 0 #0000004d;cursor:pointer;transition:transform 90ms ease,box-shadow 90ms ease}.map-node:active:not(:disabled){transform:translateY(var(--press));box-shadow:none}.map-node.done{background:var(--success);box-shadow:0 var(--press) 0 color-mix(in srgb,var(--success) 62%,#000)}.map-node.current{background:var(--accent);box-shadow:0 var(--press) 0 color-mix(in srgb,var(--accent) 62%,#000);animation:pulse 1.9s ease-in-out infinite}.map-node.locked{color:var(--text-soft);cursor:default}.map-node .stars{position:absolute;left:0;right:0;bottom:-14px;font-size:11px;letter-spacing:1px;color:var(--warning)}@keyframes pulse{50%{transform:scale(1.06)}}.map-row{display:flex;justify-content:center;gap:18px;margin-bottom:26px}.chapter-head{display:flex;align-items:center;gap:12px;margin:18px 0 14px;font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--text-soft)}.chapter-head:after{content:"";flex:1;height:2px;border-radius:2px;background:#ffffff1a}.card{background:#ffffff12;border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:12px}.row{display:flex;align-items:center;gap:12px}.switch{position:relative;width:54px;height:32px;border-radius:999px;border:0;background:#ffffff29;cursor:pointer;transition:background .18s ease}.switch[aria-checked=true]{background:var(--success)}.switch:after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .18s cubic-bezier(.22,1,.36,1)}.switch[aria-checked=true]:after{transform:translate(22px)}.modal-backdrop{position:fixed;inset:0;background:#040712a8;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:22px;z-index:40;animation:fade-in .18s ease}@keyframes fade-in{0%{opacity:0}}.modal{width:100%;max-width:400px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,#fff 8%),var(--panel));border:1px solid var(--panel-edge);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:16px;text-align:center;animation:modal-in .3s cubic-bezier(.22,1.3,.36,1);max-height:86vh;overflow-y:auto}@keyframes modal-in{0%{opacity:0;transform:translateY(24px) scale(.94)}}.stars-big{font-size:40px;letter-spacing:6px;color:var(--warning)}.stars-big .off{color:#ffffff29}.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 92px);transform:translate(-50%);background:#080c1cf0;border:1px solid var(--panel-edge);color:var(--text);padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;z-index:60;animation:toast-in .24s cubic-bezier(.22,1.3,.36,1);max-width:min(92vw,420px);text-align:center}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,18px)}}.legal{text-align:left;font-size:14px;line-height:1.65;color:var(--text-soft)}.legal h2{color:var(--text);font-size:18px;margin-top:18px}.legal a{color:var(--accent)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}