:root { color-scheme: dark; font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif; background:#050a17; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width:100%; height:100%; height:100dvh; margin:0; overflow:hidden; overscroll-behavior:none; user-select:none; -webkit-user-select:none; }
button, input { font:inherit; }
#app { position:fixed; inset:0; width:100vw; height:100dvh; overflow:hidden; isolation:isolate; background:linear-gradient(135deg,rgb(2% 4% 9%),rgb(5% 1% 12%)); transition:background .25s ease; }
#app.calm { background:linear-gradient(135deg,rgb(4% 7% 10%),rgb(8% 12% 16%)); }
#star-canvas, #play-surface, #bursts { position:absolute; inset:0; width:100%; height:100%; }
#star-canvas { z-index:1; pointer-events:none; }
#play-surface { z-index:2; touch-action:none; cursor:crosshair; }
#bursts { z-index:3; pointer-events:none; }
#start-hint { position:absolute; z-index:4; inset:0; display:flex; flex-direction:column; gap:10px; justify-content:center; align-items:center; text-align:center; color:rgb(255 255 255 / .82); pointer-events:none; }
#start-hint strong { font-size:clamp(38px,11vw,44px); line-height:1; font-weight:900; letter-spacing:-1.5px; }
#start-hint span { font-size:20px; line-height:1.2; font-weight:700; opacity:.72; }
#start-hint[hidden] { display:none; }
#tap-counter { position:absolute; z-index:5; top:max(86px,calc(env(safe-area-inset-top) + 42px)); left:50%; transform:translateX(-50%); padding:10px 18px; border:1px solid rgb(255 255 255 / .18); border-radius:999px; color:white; background:rgb(0 0 0 / .24); font-size:16px; line-height:1; font-weight:900; pointer-events:none; white-space:nowrap; }
#parent-gate { position:absolute; z-index:7; top:0; left:0; width:max(96px,calc(72px + env(safe-area-inset-left))); height:max(96px,calc(72px + env(safe-area-inset-top))); padding:0; border:0; background:transparent; color:transparent; touch-action:none; }
#parent-gate:focus-visible { outline:3px solid rgb(255 255 255 / .82); outline-offset:-7px; border-radius:18px; }
.burst { --burst:#fff; --scale:1; position:absolute; display:grid; place-items:center; width:1px; height:1px; color:var(--burst); font-size:calc(54px * var(--scale)); font-weight:900; opacity:0; transform:translate(-50%,-50%) scale(.35) rotate(0deg); animation:burst-in 1s cubic-bezier(.2,.85,.35,1) forwards; filter:drop-shadow(0 0 16px color-mix(in srgb,var(--burst) 65%,transparent)); }
.burst-symbol { position:absolute; line-height:1; z-index:2; }
.burst-icon { font-family:system-ui,sans-serif; }
@keyframes burst-in { 0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)} 18%{opacity:.95;transform:translate(-50%,-50%) scale(1.08) rotate(11deg)} 28%,72%{opacity:.95;transform:translate(-50%,-50%) scale(1) rotate(18deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(18deg)} }
.effect { position:absolute; width:0; height:0; }
.firework i { position:absolute; left:-2px; top:-9px; width:4px; height:18px; border-radius:999px; background:color-mix(in srgb,var(--burst) 68%,transparent); transform-origin:2px 9px; animation:ray 1s ease-out forwards; }
@keyframes ray { 0%{opacity:0;transform:rotate(var(--angle)) translateY(-10px) scale(.15)} 22%,72%{opacity:.9;transform:rotate(var(--angle)) translateY(-52px) scale(1)} 100%{opacity:0;transform:rotate(calc(var(--angle) + 64.8deg)) translateY(-52px) scale(.2)} }
.sparkle i { position:absolute; font-style:normal; font-size:var(--size); color:color-mix(in srgb,var(--burst) 82%,transparent); animation:sparkle 1s ease-out forwards; }
@keyframes sparkle { 0%{opacity:0;transform:rotate(var(--angle)) translateX(8px) scale(.3)} 22%,72%{opacity:1;transform:rotate(var(--angle)) translateX(48px) rotate(var(--spin)) scale(1)} 100%{opacity:0;transform:rotate(var(--angle)) translateX(48px) rotate(var(--spin)) scale(.5)} }
.ripple i { position:absolute; border:3px solid color-mix(in srgb,var(--burst) var(--alpha),transparent); border-radius:50%; width:var(--diameter); height:var(--diameter); left:calc(var(--diameter) / -2); top:calc(var(--diameter) / -2); animation:ripple 1s ease-out forwards; }
@keyframes ripple { 0%{opacity:0;transform:scale(.45)} 18%{opacity:var(--opacity);transform:scale(var(--ring-scale))} 72%{opacity:var(--opacity);transform:scale(var(--ring-scale))} 100%{opacity:0;transform:scale(calc(var(--ring-scale) + .15))} }
#settings-dialog { width:min(680px,100%); max-width:100%; max-height:min(90dvh,820px); padding:0; border:0; border-radius:24px 24px 0 0; color:#111; background:#f2f2f7; box-shadow:0 24px 90px #000b; user-select:text; touch-action:pan-y pinch-zoom; }
#settings-dialog[open] { display:block; position:fixed; margin:auto auto 0; }
#settings-dialog::backdrop { background:rgb(0 0 0 / .52); backdrop-filter:blur(8px); }
#settings-form { margin:0; }
#settings-dialog header { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:80px 1fr 80px; align-items:center; padding:14px 14px 10px; background:rgb(242 242 247 / .92); backdrop-filter:blur(18px); border-bottom:1px solid #d2d2d7; }
#settings-dialog h1 { margin:0; font-size:18px; text-align:center; }
#settings-dialog header button { padding:8px; border:0; color:#007aff; background:none; font-weight:600; }
#done-top { text-align:right; }
.form-body { overflow:auto; max-height:calc(90dvh - 57px); padding:12px 16px calc(30px + env(safe-area-inset-bottom)); }
.form-body section { margin:0 0 22px; border-radius:12px; background:#fff; overflow:hidden; }
.form-body h2 { margin:0; padding:8px 16px 6px; color:#6d6d72; background:#f2f2f7; font-size:13px; font-weight:500; text-transform:uppercase; }
.form-body p { margin:0; padding:12px 16px; border-top:1px solid #e5e5ea; color:#3a3a3c; font-size:15px; line-height:1.35; }
.setting-row { min-height:52px; padding:8px 16px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid #e5e5ea; font-size:17px; }
.setting-row:first-of-type { border-top:0; }
input[type=checkbox] { appearance:none; width:51px; height:31px; border-radius:999px; background:#e9e9ea; position:relative; transition:.2s; flex:0 0 auto; }
input[type=checkbox]::after { content:""; position:absolute; width:27px; height:27px; top:2px; left:2px; border-radius:50%; background:white; box-shadow:0 2px 5px #0004; transition:.2s; }
input[type=checkbox]:checked { background:#34c759; }
input[type=checkbox]:checked::after { transform:translateX(20px); }
input:focus-visible,button:focus-visible { outline:3px solid #0a84ff; outline-offset:2px; }
.stepper { display:flex; align-items:center; border:1px solid #c7c7cc; border-radius:9px; overflow:hidden; }
.stepper button { width:42px; height:34px; border:0; color:#007aff; background:white; font-size:24px; }
.stepper input { width:44px; height:34px; border:0; border-inline:1px solid #c7c7cc; text-align:center; color:#111; background:#fff; -moz-appearance:textfield; }
.stepper input::-webkit-inner-spin-button { display:none; }
.destructive { width:100%; min-height:52px; border:0; color:#ff3b30; background:white; font-size:17px; }
@media (max-width:360px) {
  #settings-dialog header { grid-template-columns:72px minmax(0,1fr) 54px; padding-inline:8px; }
  #settings-dialog h1 { font-size:16px; white-space:nowrap; }
  #settings-dialog header button { padding-inline:4px; font-size:15px; }
  .form-body { padding-inline:16px; }
  .setting-row { gap:8px; }
}
@media (min-width:681px) { #settings-dialog { margin:auto; border-radius:24px; } #settings-dialog[open] { margin:auto; } }
@keyframes burst-reduced { 0%{opacity:0;transform:translate(-50%,-50%) scale(.35)} 100%{opacity:.95;transform:translate(-50%,-50%) scale(1)} }
@keyframes ray-reduced { 0%{opacity:0;transform:rotate(var(--angle)) translateY(-10px) scale(.15)} 100%{opacity:.9;transform:rotate(var(--angle)) translateY(-10px) scale(1)} }
@keyframes sparkle-reduced { 0%{opacity:0;transform:rotate(var(--angle)) translateX(8px) scale(.3)} 100%{opacity:1;transform:rotate(var(--angle)) translateX(8px) scale(1)} }
@keyframes ripple-reduced { 0%{opacity:0;transform:scale(.45)} 100%{opacity:var(--opacity);transform:scale(.45)} }
@media (prefers-reduced-motion:reduce) {
  .burst { animation-name:burst-reduced; animation-duration:.12s; animation-timing-function:ease-out; }
  .firework i { animation-name:ray-reduced; animation-duration:.12s; }
  .sparkle i { animation-name:sparkle-reduced; animation-duration:.12s; }
  .ripple i { animation-name:ripple-reduced; animation-duration:.12s; }
  *,*::before,*::after { scroll-behavior:auto!important; }
}
#app.calm .burst { animation-name:burst-reduced; animation-duration:.12s; animation-timing-function:ease-out; }
#app.calm .firework i { animation-name:ray-reduced; animation-duration:.12s; }
#app.calm .sparkle i { animation-name:sparkle-reduced; animation-duration:.12s; }
#app.calm .ripple i { animation-name:ripple-reduced; animation-duration:.12s; }
@supports not (color:color-mix(in srgb,red,blue)) { .burst { filter:drop-shadow(0 0 14px currentColor); } }