:root{color-scheme:dark;--ink:#eef3ff;--muted:#adbfdf;--night:#0e2143;--gold:#ffc65c;--blue:#1c3a69;font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 30%,#254b7b 0,transparent 60%),#101f3b;color:var(--ink);min-height:100dvh}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,canvas:focus-visible{outline:3px solid #fff;outline-offset:4px}button{border:0}kbd{font-family:inherit;font-size:.75rem;font-weight:700}.arcade{max-width:1080px;min-height:100dvh;margin:auto;display:grid;grid-template-columns:1fr 430px;gap:72px;align-items:center;padding:28px 36px}.intro{padding-bottom:20px}.eyebrow{display:flex;gap:10px;align-items:center;color:#c8d8f5;font-weight:700;font-size:.875rem}.brand-mark{color:var(--gold);font-size:28px}.edition{background:#ffffff10;border:1px solid #ffffff1c;border-radius:6px;padding:4px 9px;font-size:.75rem;margin-left:4px}h1{font-size:clamp(64px,7vw,86px);letter-spacing:-.075em;line-height:1.13;margin:34px 0 18px;font-weight:900}h1>span{display:block}.title-dot{color:var(--gold);letter-spacing:0}.lead{font-size:1.5rem;font-weight:700;margin:0 0 16px}.description{line-height:1.9;color:var(--muted);font-size:1rem}.guide{display:flex;gap:25px;margin:35px 0 25px;border-top:1px solid #ffffff1c;padding-top:24px}.guide>div{display:flex;gap:11px;align-items:flex-start}.step{color:var(--gold);font-weight:800;font-size:.875rem;padding-top:3px}.guide p{font-size:.875rem;line-height:1.7;margin:0;color:var(--muted)}.guide strong{color:#eaf1ff;font-weight:700}.rule{font-size:.875rem;color:#adbfdf;line-height:1.8}.keys{display:flex;gap:9px;align-items:center;color:#adc1e4;font-size:.875rem;margin-top:30px}.keys kbd{padding:7px 11px;border:1px solid #7f9bc04a;border-bottom-width:3px;border-radius:6px;background:#172e51;color:#e5eeff}.local-note{font-size:.75rem;color:#8ea7cd;margin:22px 0 0}.machine{width:100%;border:1px solid #8daddd35;box-shadow:0 20px 80px #030c2660;background:#122a50;border-radius:24px;padding:12px;overflow:hidden}.hud{height:72px;display:flex;align-items:center;padding:4px 10px 12px;gap:28px}.metric{display:flex;flex-direction:column;gap:1px}.metric>span{font-size:.8125rem;color:#b9c9e7}.metric strong{font-size:1.875rem;line-height:1.15;font-variant-numeric:tabular-nums}.best strong{color:var(--gold)}.utility{margin-left:auto;display:flex;gap:8px;align-items:center}.icon-button{height:36px;padding:0 9px;background:#ffffff0b;border:1px solid #ffffff15;border-radius:10px;color:#cad8f1;font-size:.75rem}.icon-button:disabled{opacity:.4}#pause{font-size:1rem;width:36px}.playfield{position:relative;isolation:isolate;width:100%;height:min(62dvh,570px);min-height:310px;border-radius:16px;overflow:hidden;background:linear-gradient(#427ecc,#76b4e2 65%,#abd9ef);touch-action:none}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.speed-badge{position:absolute;top:16px;left:16px;font-size:.75rem;font-weight:700;color:#f4f8ff;background:#214b7959;border:1px solid #ffffff38;padding:6px 10px;border-radius:30px;pointer-events:none}.field-caption{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:.8125rem;font-weight:700;color:#183965;pointer-events:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:#11356a24;backdrop-filter:blur(4px)}.overlay[hidden]{display:none}.panel{width:100%;max-width:310px;text-align:center;padding:28px 22px;border-radius:22px;border:1px solid #fff8;background:#f2f7fff5;color:#18365e;box-shadow:0 12px 30px #23477e25}.panel-tag{font-size:.75rem;font-weight:800;color:#3d64a0;letter-spacing:.06em}.panel h2{font-size:1.75rem;letter-spacing:-.06em;line-height:1.45;margin:12px 0}.panel p{font-size:.9375rem;line-height:1.8;color:#516787;margin:12px 0 22px}.primary{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;border-radius:12px;background:var(--gold);color:#38250e;font-weight:800;font-size:1rem;box-shadow:0 4px 0 #b77927;transition:filter .15s,transform .1s}.primary:hover:enabled{filter:brightness(1.06)}.primary:active:enabled{transform:translateY(2px);box-shadow:0 2px 0 #b77927}.primary:disabled{background:#3b5276;color:#c2d0e5;box-shadow:0 4px 0 #253b5c}.controls{display:flex;gap:10px;margin:14px 2px 0}.drop{flex:1}.drop kbd{background:#57360917;padding:3px 7px;border-radius:5px}.restart{min-width:54px;background:#203d67;color:#d6e2f7;border:1px solid #526e9640;border-radius:12px;font-size:.875rem}.status{text-align:center;min-height:20px;font-size:.75rem;color:#b3c5e4;margin:12px 0 0;line-height:1.5}.toast{position:absolute;top:31%;left:0;right:0;text-align:center;font-size:1.5rem;font-weight:900;color:#fff6d9;text-shadow:0 3px 0 #3c6594;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .15s,transform .15s}.toast.show{opacity:1;transform:translateY(0)}.result{margin:8px 0 22px;display:flex;align-items:baseline;justify-content:center;gap:10px}.result[hidden]{display:none}.result strong{font-size:3.5rem;color:#224f89}.result span{font-size:.9375rem}.machine.is-paused .speed-badge{visibility:hidden}
@media(max-width:780px){.arcade{display:flex;flex-direction:column;gap:12px;padding:14px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom));justify-content:center;min-height:100dvh}.intro{display:flex;align-items:center;justify-content:space-between;width:min(100%,430px);padding:0}.eyebrow{font-size:.75rem;gap:6px}.brand-mark{font-size:22px}.edition{display:none}h1{font-size:1.75rem;letter-spacing:-.07em;line-height:1.3;margin:0}h1>span{display:inline}.intro>p,.guide,.keys{display:none}.machine{max-width:430px;border-radius:20px;padding:10px}.hud{height:61px;padding:0 6px 10px;gap:22px}.metric strong{font-size:1.625rem}.playfield{height:calc(100dvh - 226px);min-height:290px;max-height:680px}.controls{margin-top:12px}.status{margin-top:10px}.field-caption{font-size:.75rem}.panel{padding:24px 20px}.panel h2{font-size:1.625rem}.panel p{font-size:.875rem}.primary{min-height:48px}.speed-badge{top:12px;left:12px}}
@media(max-height:560px) and (min-width:600px){.arcade{display:grid;grid-template-columns:1fr min(48vw,430px);gap:30px;padding:12px 24px;align-items:center}.intro{display:block}.intro .eyebrow{display:flex}.intro h1{font-size:3rem;margin:12px 0}.intro h1>span{display:inline}.intro>.description,.keys{display:block}.intro>.lead,.guide,.rule,.local-note{display:none}.playfield{height:calc(100dvh - 174px);min-height:180px}.hud{height:52px}.panel{padding:12px 18px;max-width:270px}.panel h2{font-size:1.25rem;margin:5px}.panel p{font-size:.8125rem;margin:8px 0}.panel-tag{display:none}.result{margin:3px 0}.result strong{font-size:2rem}.primary{min-height:40px}.status{font-size:.75rem;margin-top:8px}.machine{padding:8px}.field-caption{display:none}}
.toast{top:12%;font-size:1.25rem}.field-caption:empty{display:none}
.hud{height:auto;min-height:72px;flex-wrap:wrap}.utility,.metric{flex-shrink:0}.drop{min-width:0;flex-wrap:wrap;padding:10px}.panel{max-height:100%;overflow-y:auto;touch-action:pan-y}.intro{min-width:0}
@media(max-width:780px){.edition{display:inline;font-size:.75rem;padding:3px 6px;margin-left:0}}
@media(max-width:780px){.intro{flex-wrap:wrap;gap:8px}.hud{min-height:61px}}
@media(max-height:560px) and (min-width:600px){.hud{min-height:52px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.overlay{backdrop-filter:none}}
.eyebrow a{color:inherit;text-decoration:none}.edition{color:#eaf1ff;white-space:nowrap;min-height:36px}.eyebrow a:focus-visible{outline:3px solid white}#save-form{display:grid;gap:8px;text-align:left}#save-form label{font-size:.875rem;font-weight:700}#nickname{width:100%;min-width:0;padding:10px 12px;border:1px solid #849bc0;border-radius:8px;font:inherit;font-size:1rem;color:#17365e;background:#fff}#save-score{min-height:44px;border-radius:8px;background:#244f87;color:#fff;font-size:.875rem;font-weight:700}#save-score:disabled{opacity:.6}#save-status{font-size:.875rem!important;line-height:1.5!important;margin:10px 0!important}.name-note{font-size:.75rem!important;line-height:1.5!important;margin:8px 0 18px!important}dialog{color:var(--ink);background:#142d52;border:1px solid #879fcf;border-radius:18px;width:min(430px,calc(100vw - 24px));max-height:85dvh;overflow-y:auto;padding:22px;font-size:1rem}dialog::backdrop{background:#050d20b8;backdrop-filter:blur(3px)}dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}dialog h2{font-size:1.25rem;margin:0}dialog p{font-size:.875rem;color:#c1d0eb;line-height:1.6}dialog button{min-height:44px;background:#315483;color:#fff;border-radius:8px;padding:8px 12px;font-size:.875rem}#ranking-list{list-style:none;padding:0;margin:20px 0}#ranking-list li{display:grid;grid-template-columns:24px 1fr auto;gap:12px;padding:12px 4px;border-bottom:1px solid #ffffff1c;font-size:1rem;align-items:center}#ranking-list li>span:nth-child(2){overflow-wrap:anywhere}#ranking-list strong{color:var(--gold);font-variant-numeric:tabular-nums}
@media(max-width:780px){.eyebrow{flex-wrap:wrap}.edition{font-size:.75rem;min-height:32px}.playfield{height:calc(100dvh - 242px)}.hud{gap:16px}.metric>span{font-size:.75rem}.intro{align-items:center}}
.playfield:has(.overlay:not([hidden])) .field-caption{visibility:hidden}.panel:has(#result:not([hidden])){padding:16px 18px}.panel:has(#result:not([hidden])) h2{font-size:1.375rem;line-height:1.35;margin:8px 0}.panel:has(#result:not([hidden]))>p{line-height:1.5;margin:8px 0}.panel:has(#result:not([hidden])) .result{margin:4px 0 12px}.panel:has(#result:not([hidden])) .result strong{font-size:2.5rem}

#nickname-entry{margin:12px 0 14px;text-align:left}#nickname-entry label{display:block;font-size:14px;font-weight:800;margin-bottom:7px}#nickname{box-sizing:border-box;width:100%;font-size:16px}#nickname-error{font-size:12px;color:#9d3527;margin:5px 0 0;min-height:0}#nickname-error:empty{display:none}.player-line{margin:7px 12px 0;text-align:center;font-size:12px;color:#b5cadd}.confirmed-name{margin:0 0 8px;font-size:14px}.player-line strong{color:#fff1b2}
@media(max-width:780px){.playfield{height:calc(100dvh - 270px)}}
@media(max-height:560px) and (min-width:600px){.playfield{height:calc(100dvh - 198px)}}

.main-ranking{width:100%;padding:20px;border:1px solid #8daddd35;border-radius:18px;background:#142d52}.main-ranking header{display:flex;align-items:center;justify-content:space-between;gap:12px}.main-ranking h2{font-size:20px;margin:0;color:#ffe5ac}.main-ranking p{font-size:12px;line-height:1.6;color:#b9cce7}.main-ranking button{min-height:36px;padding:6px 10px;border-radius:8px;background:#315483;color:white;font-size:12px}#main-ranking-list{list-style:none;margin:12px 0;padding:0}#main-ranking-list li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;padding:8px 2px;border-bottom:1px solid #ffffff15;font-size:14px}#main-ranking-list li>span:nth-child(2){overflow-wrap:anywhere}#main-ranking-list strong{color:#ffcf73}.personal-result #personal-ranking{font-size:18px;font-weight:900;color:#224f89;margin:8px 0 2px;line-height:1.4}.personal-result #personal-best{font-size:12px;line-height:1.5;margin:0 0 12px;color:#526887}
@media(min-width:781px) and (min-height:561px){.arcade{row-gap:16px}.intro{grid-column:1;grid-row:1;padding-bottom:0}.machine{grid-column:2;grid-row:1 / span 2}.main-ranking{grid-column:1;grid-row:2}.intro h1{margin-top:20px}.guide{margin:22px 0 18px}.keys{margin-top:16px}}
@media(max-width:780px){.arcade{justify-content:flex-start}.main-ranking{max-width:430px;margin-bottom:16px}.main-ranking h2{font-size:18px}}
@media(max-height:560px) and (min-width:600px){.main-ranking{grid-column:1 / -1}}
@media(min-width:781px) and (min-height:561px){.intro h1{font-size:64px;margin:16px 0 12px}.intro h1>span{display:inline}.intro .guide,.intro .keys,.intro .local-note{display:none}.intro .lead{font-size:20px;margin-bottom:8px}.intro .description{margin:10px 0}.intro .rule{margin:8px 0}}

.toast.perfect{font-size:1.8rem;color:#fff5a9;text-shadow:0 3px 0 #7a5628,0 0 12px #ffcf7360;animation:perfect-pop .6s ease-out both}.toast.perfect::before,.toast.perfect::after{content:'✦';display:inline-block;margin:0 12px;color:#fff9dc;font-size:1.3rem;animation:perfect-star .6s ease-out both}@keyframes perfect-pop{0%{transform:translateY(8px) scale(.75);opacity:0}22%{transform:translateY(0) scale(1.12);opacity:1}45%,80%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-8px) scale(1);opacity:0}}@keyframes perfect-star{0%{transform:scale(.2) rotate(-35deg)}40%{transform:scale(1.25) rotate(15deg)}100%{transform:scale(1) rotate(0)}}@media(prefers-reduced-motion:reduce){.toast.perfect,.toast.perfect::before,.toast.perfect::after{animation:none}}