html,body{touch-action:auto}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}canvas:focus{outline:none}
.ov{overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start;touch-action:pan-y;padding:24px 18px calc(60px + env(safe-area-inset-bottom));height:100dvh}
.screen{display:flex;flex-direction:column;align-items:center;gap:13px;width:100%;max-width:380px;margin:auto}
.screen h1{font-size:clamp(42px,11vw,58px)}.game-icon{object-fit:cover;border-radius:22%;box-shadow:0 8px 32px #0005}.screen .game-icon{margin-bottom:0}.screen .how{font-size:13px;line-height:1.9;padding:12px 16px;max-width:none;width:100%}
.btn{min-height:48px;font-size:18px;padding:12px 36px;transition:filter .15s,transform .15s}.btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.97)}.btn.sec{min-height:44px;padding:10px 18px;font-size:14px}.text-btn{border:0;background:transparent;color:#b4c5e3;font-size:12px;min-height:34px;padding:6px 8px}.text-btn:hover{color:#fff}
.status{font-size:12px;line-height:1.7;color:#b4c5de;max-width:100%;overflow-wrap:anywhere}.status:empty{display:none}.connection{font-size:10px;letter-spacing:.02em;color:#9eebd4}.connection:before{content:'●';margin-right:7px;font-size:7px}.connection.offline{color:#ffd980}
.floating-tools{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:6;display:flex;gap:8px}.float-btn,#mute{position:static;width:42px;height:42px;min-height:42px;border-radius:50%;border:1px solid #ffffff30;background:#0b0f24cc;color:#fff;font-size:19px;backdrop-filter:blur(8px)}.play-mode{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:16px;font-size:10px;color:#e0c798;pointer-events:none}
.eyebrow{font-size:10px;letter-spacing:.2em;color:#8399c0;font-weight:800}.big{font-size:clamp(44px,14vw,62px)}.killer{font-size:16px}.result-screen{gap:16px}.result-screen .stat{line-height:1.9;font-size:12px}.score-form{width:100%;border:1px solid #5ff3ff30;border-radius:16px;padding:16px;background:#14203899;text-align:left;display:flex;flex-direction:column;gap:10px}.score-form label{font-size:12px;color:#afc8e4}input[type=text],input:not([type]){width:100%;border:1px solid #ffffff30;border-radius:10px;padding:12px;background:#090f24;color:#fff;user-select:text;-webkit-user-select:text;font-size:16px;min-width:0}.submit{width:100%;color:var(--accent)!important}
dialog{position:fixed;margin:auto;width:min(440px,calc(100% - 28px));max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border:1px solid #6c82b64d;border-radius:24px;background:linear-gradient(155deg,#17223c,#0b1023);color:var(--fg);box-shadow:0 24px 100px #0009;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}dialog::backdrop{background:#020617b8;backdrop-filter:blur(7px)}.dialog-inner{padding:26px 22px;display:flex;flex-direction:column;align-items:center;gap:15px}h2{font-size:24px;line-height:1.4}.setting-card{width:100%;background:#ffffff05;border:1px solid #ffffff12;border-radius:16px;padding:18px;text-align:left}.setting-card strong{font-size:13px}.setting-card p{color:#a9bad4;font-size:12px;line-height:1.85;margin-top:10px}.setting-title{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:800}output{font-size:24px;color:var(--accent);font-variant-numeric:tabular-nums}input[type=range]{width:100%;margin:18px 0 9px;accent-color:var(--accent);height:30px;touch-action:pan-x}.range-labels{display:flex;justify-content:space-between;font-size:10px;color:#9bb0d0}.setting-card .text-btn{padding-left:0;margin-top:6px;color:#9ee7f5}
.periods{display:flex;background:#050a1d80;border:1px solid #ffffff10;border-radius:14px;padding:4px;gap:4px;width:100%}.periods button{flex:1;border:0;border-radius:10px;color:#9cabc7;background:none;padding:11px 6px;font-size:14px}.periods button[aria-pressed=true]{background:#5ff3ff;color:#091526;font-weight:800;box-shadow:0 0 20px #5ff3ff15}.rank-meta{width:100%;display:flex;align-items:center;justify-content:space-between;color:#9bacc8;font-size:11px}.rank-meta .text-btn{min-height:28px;padding:3px 4px}#rankingList{list-style:none;width:100%;max-height:42dvh;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain}.rank-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:1px solid #ffffff0b;padding:12px 8px}.rank-row.is-you{background:#5ff3ff0b;border-radius:10px;box-shadow:inset 2px 0 var(--accent)}.place{font-size:14px;color:#728aaa;font-weight:800;font-variant-numeric:tabular-nums}.top-1{color:#ffe14d}.top-2{color:#cad8f2}.top-3{color:#eda36f}.rank-name{font-size:13px;overflow-wrap:anywhere}.rank-row strong{font-size:18px;text-align:right;font-variant-numeric:tabular-nums}.rank-row small{display:block;font-size:9px;letter-spacing:.04em;font-weight:500;color:#90a4c4}.rank-name small{color:#5ff3ff}.your-rank{width:100%;border:1px solid #5ff3ff30;border-radius:12px;background:#5ff3ff09;padding:12px 8px;text-align:center;color:#8decf7;font-size:12px;line-height:1.7}.fine-print{text-align:center;color:#8599bb;font-size:10px;line-height:1.85}
@media(max-height:740px){.screen{gap:9px}.screen .game-icon{width:48px;height:48px}.screen h1{font-size:42px}.screen .how{line-height:1.75;font-size:12px}.sub{font-size:13px}.ov{padding-top:18px;padding-bottom:56px}.result-screen{gap:12px}.dialog-inner{padding:22px 18px;gap:12px}}
.archive-select{display:flex;flex-direction:column;gap:7px;width:100%;font-size:11px;color:#9bacc8}.archive-select select{width:100%;min-height:42px;border:1px solid #ffffff25;border-radius:10px;padding:8px 10px;background:#0b1023;color:var(--fg);font:inherit;font-size:12px}
@media(prefers-reduced-motion:reduce){.tap,.new{animation:none}.btn{transition:none}}
.depth-link{display:block;width:100%;padding:12px 15px;text-align:left;border:1px solid #b594ff30;border-radius:14px;background:linear-gradient(110deg,#775ea81f,#18334e40);color:#dae7ff;min-height:54px}.depth-link strong{display:block;font-size:12px;font-weight:800}.depth-link span{float:right;color:#b995ff;font-size:20px;line-height:14px}.depth-link small{display:block;color:#9cafd1;font-size:10px;margin-top:5px}.next-challenge{color:#b9a0f3;background:#ab89ff0b;border-radius:10px;padding:8px 12px}.depth-guide{align-items:stretch}.depth-guide>.eyebrow,.depth-guide>h2,.depth-guide>.status{text-align:center}.depth-guide h2{font-size:22px}.depth-steps{list-style:none;display:flex;flex-direction:column;gap:10px}.depth-steps li{display:flex;gap:14px;border:1px solid #ffffff10;border-radius:13px;padding:14px 12px;background:#ffffff03}.depth-steps li>span{flex:0 0 29px;color:#b49ce5;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}.depth-steps strong{font-size:13px}.depth-steps p{font-size:11px;line-height:1.8;color:#9fb1cc;margin-top:5px}.depth-steps li.reached{border-color:#5ff3ff35;background:#5ff3ff06}.depth-steps li.reached>span{color:#5ff3ff}.depth-guide .btn{align-self:center}
#depthGuide{width:min(640px,calc(100% - 28px))}.depth-steps{display:grid;grid-template-columns:1fr 1fr}#depthHeading:focus{outline:none}@media(max-width:480px){.depth-steps{grid-template-columns:1fr}}
.title-top{display:flex;align-items:center;width:100%;gap:16px}.title-top>.game-icon{flex-shrink:0}.language-entry{display:grid;grid-template-columns:28px minmax(0,1fr) 12px;align-items:center;gap:7px 9px;min-width:0;padding:10px 12px;border:1px solid #7edfff45;border-radius:15px;background:linear-gradient(120deg,#24566b50,#19294080);color:#e9f8ff;text-align:left}.title-top>.language-entry{flex:1}.language-entry:hover{border-color:#9ae8ff80;background:#23445b80}.language-globe{width:28px;height:28px;fill:none;stroke:#9ee7f5;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.language-copy{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1.3}.language-copy strong{font-size:14px;letter-spacing:.01em}.language-copy>[data-current-language]{font-size:11px;color:#bed3e7;overflow-wrap:normal}.language-arrow{font-size:18px;color:#a4c8e5;align-self:center}.language-examples{grid-column:1/-1;display:block;font-size:10px;color:#afc9de;white-space:nowrap;text-align:center;line-height:1.5}.language-setting{width:100%}.language-dialog-inner{position:relative;gap:9px;padding-top:28px}.language-dialog-inner>.language-globe{width:32px;height:32px}.language-dialog-inner>h2{font-size:26px}.language-dialog-examples{font-size:11px;color:#acc7de;line-height:1.5}.language-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:100%;margin-top:13px}.language-option{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:52px;padding:11px 12px;border:1px solid #ffffff24;border-radius:12px;background:#ffffff05;color:#e7f0ff;text-align:left;font-size:14px;line-height:1.4}.language-option:last-child:nth-child(odd){grid-column:1/-1}.language-option:hover{background:#ffffff0c;border-color:#8ecbe766}.language-option[aria-pressed=true]{border-color:#8cefff;background:#5ff3ff12;color:#b9f5ff}.language-check{visibility:hidden;color:#8cefff;font-weight:800}.language-option[aria-pressed=true]>.language-check{visibility:visible}select:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}.screen>.sub{font-size:13px;line-height:1.5;max-width:100%}.screen h1{font-size:clamp(38px,10vw,54px)}
.screen .intro-steps{list-style:none;display:flex;flex-direction:column;gap:10px;padding:14px 16px;line-height:1.5}.intro-steps li{display:flex;gap:12px;align-items:flex-start;min-width:0}.intro-steps .step-number{flex:0 0 24px;height:24px;display:grid;place-items:center;border:1px solid #6a9fd24d;border-radius:8px;color:#9eedff;font-size:12px;font-weight:800}.intro-steps strong{font-size:13px;color:#ecf7ff}.intro-steps p{font-size:11px;color:#adbed8;line-height:1.65;margin-top:3px}.intro-steps li:nth-child(2) .step-number{color:#ffe14d;border-color:#ffe14d45}.intro-steps li:nth-child(3) .step-number{color:#ff9cd4;border-color:#ff9cd445}.intro-steps .intro-tip{display:block;border-top:1px solid #ffffff10;padding-top:8px;color:#c6b5e8;font-size:10px;line-height:1.6}.depth-link strong{display:flex;align-items:center;justify-content:space-between;gap:10px}.depth-link strong>span{float:none;font-size:12px;line-height:1.55;color:inherit}.depth-link strong>.chevron{font-size:22px;color:#b995ff}.depth-link small{line-height:1.5}.stat:empty{display:none}#finalStat{white-space:pre-line}
.guide-intro{font-size:12px;line-height:1.8;color:#bccce4;text-align:center}.depth-guide{position:relative;padding-top:46px}.guide-close{position:absolute;top:7px;right:9px;width:36px;height:36px;background:#ffffff0a;color:#c5d9ee;border:1px solid #ffffff17;border-radius:50%;font-size:23px}.depth-steps li{gap:12px}.depth-steps li>.unlock-number{flex:0 0 39px}.unlock-number small{display:block;font-size:8px;line-height:1.4;margin-top:4px;letter-spacing:0}.depth-steps li>div{min-width:0}.depth-steps strong{line-height:1.55;display:block}.depth-steps p{font-size:11px;line-height:1.85;color:#b0c0d8}.line-legend{display:flex;gap:15px;flex-wrap:wrap;margin-top:9px;font-size:10px}.line-legend span{padding-top:5px;border-top:2px dashed #ffc085;color:#ffd1a6;min-width:44px}.line-legend .legend-danger{border-top:3px solid #ff7866;color:#ffae9e}.rank-meta{gap:10px}.periods button{overflow-wrap:anywhere}.screen,dialog{overflow-wrap:break-word}button{max-width:100%}html:lang(ko){word-break:keep-all}.depth-guide>h2{padding:0 12px}
@media(max-height:740px){.title-top{gap:12px}.screen .intro-steps{padding:11px 13px;gap:8px}.intro-steps p{font-size:10px}.intro-steps strong{font-size:12px}.screen h1{font-size:38px}.screen>.sub{font-size:12px}.depth-guide{padding-top:46px}}
.item-dock{position:fixed;z-index:4;height:54px;max-width:300px}.item-button{--item:#829bbd;position:relative;display:flex;align-items:center;gap:9px;width:100%;height:54px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--item) 38%,transparent);border-radius:13px;background:#111b30;color:var(--item);text-align:left;overflow:hidden;touch-action:manipulation;transition:background .15s}.item-button[data-kind=clock]{--item:#b49aff}.item-button[data-kind=pulse]{--item:#94ffd4}.item-button[data-kind=magnet]{--item:#ffcc75}.item-button:disabled{opacity:1;cursor:default}.item-button:not(:disabled){background:#211f3c;box-shadow:0 0 20px #a793ff12}.item-button:not(:disabled):active{background:#353052}.item-symbol{flex:0 0 25px;width:25px;height:25px}.item-symbol svg{display:none;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.item-button[data-kind=clock] [data-icon=clock],.item-button[data-kind=pulse] [data-icon=pulse],.item-button[data-kind=magnet] [data-icon=magnet],.item-button[data-kind=empty] [data-icon=empty]{display:block}.item-copy{flex:1;min-width:0;line-height:1.4}.item-copy strong{display:block;font-size:12px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-copy small{display:block;font-size:10px;color:#b0bbd0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-key{position:absolute;right:8px;top:5px;font-size:8px;color:#dfd5ff}.item-button:not(:disabled) .item-copy{padding-top:7px}.item-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--item);transform-origin:left;pointer-events:none}.item-guide{grid-column:1/-1}.depth-steps .clock-text{color:#c1adf5}.depth-steps .pulse-text{color:#9bd9c5}.depth-steps .magnet-text{color:#e1c695}.play-mode{bottom:76px;left:18px;z-index:3;max-width:220px;background:#0b0f24b0;border-radius:4px;padding:2px 5px}@media(max-width:350px){.item-button{gap:6px;padding:6px}.item-symbol,.item-symbol svg{width:22px;height:22px;flex-basis:22px}.item-copy strong{font-size:11px}.item-copy small{font-size:9px}.item-key{font-size:7px}}
.depth-steps li:first-child,.depth-steps li:last-child{grid-column:1/-1}
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}.item-button{height:100%}
@media(max-width:480px){.depth-steps .item-guide{flex-direction:column;gap:8px}.item-guide>.unlock-number{display:flex;align-items:center;gap:6px;flex-basis:auto;font-size:14px}.item-guide>.unlock-number small{margin:0;font-size:9px}}
@media(max-width:350px){.item-key{font-size:9px}}
.item-button{border-radius:16px;background:linear-gradient(130deg,#1c283d,#10192c);border-color:#7e94b533;gap:10px;padding:6px 11px}.item-button[data-kind=clock]{--item:#c5afff}.item-button[data-kind=pulse]{--item:#91edcb}.item-button[data-kind=magnet]{--item:#ffcf86}.item-button:not(:disabled){background:linear-gradient(130deg,color-mix(in srgb,var(--item) 13%,#11192b),#10192c);border-color:color-mix(in srgb,var(--item) 55%,transparent);box-shadow:none}.item-button:not(:disabled):active{background:color-mix(in srgb,var(--item) 23%,#10192c)}.item-symbol,.item-symbol svg{width:35px;height:35px;flex-basis:35px}.item-symbol{border-radius:10px;background:#090f2045}.item-copy strong{color:#eaf1ff}.item-copy small{color:#9eacc2}.item-copy small:empty{display:none}.item-button[data-kind=empty]{border-color:transparent;background:#111a2845;max-width:160px}.item-button[data-kind=empty] .item-symbol{background:none}.item-button[data-kind=empty] .item-copy strong{font-size:10px;color:#7c8da7}.item-progress{height:3px}.item-guide-row{display:flex;gap:11px;align-items:center;margin-top:9px}.item-guide-row>[data-item-art]{display:block;flex:0 0 38px;width:38px;height:38px;border:1px solid #c4d4f220;border-radius:11px;background:#101829}.item-guide-row svg{display:block;width:36px;height:36px}.item-guide-row>p{margin:0;flex:1;min-width:0}@media(max-width:350px){.item-button{padding:5px 7px;gap:7px}.item-symbol,.item-symbol svg{width:30px;height:30px;flex-basis:30px}.item-guide-row{gap:8px}}