@font-face{font-family:Lilita One;src:url(../fonts/lilita-one.woff2) format("woff2");font-display:swap}:root{--ink: #0d0912;--paper: #f3eff6;--lilac: #c9a6ff;--violet: #9b5cff;--green: #2fd27a;--mint: #7cf5ad;--red: #ff4766;--gold: #ffc94a;--display: "Lilita One", ui-sans-serif, system-ui, sans-serif;--body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#07040f;color:var(--paper);font-family:var(--body);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none}:root{--sl: env(safe-area-inset-left, 0px);--sr: env(safe-area-inset-right, 0px);--st: env(safe-area-inset-top, 0px);--sb: env(safe-area-inset-bottom, 0px);--stick: 56px}#stage{position:fixed;inset:0}#stage canvas{width:100%;height:100%;display:block}#stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,#07040f00 55%,#07040f6b)}.hide{display:none!important}.ink{text-shadow:0 3px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}#hud{position:fixed;inset:0;pointer-events:none;font-family:var(--display)}#hud *{text-shadow:0 3px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}#h-left{position:absolute;top:calc(16px + var(--st));left:calc(22px + var(--sl))}#alt{font-size:54px;line-height:1;letter-spacing:.5px}#price{font-size:20px;color:var(--mint);margin-top:2px}#chap{font-size:16px;color:var(--lilac);margin-top:6px;letter-spacing:1px}#h-right{position:absolute;top:calc(16px + var(--st));right:calc(22px + var(--sr));text-align:right}#time{font-size:30px;line-height:1}#falls{font-size:18px;color:var(--red);margin-top:4px}#modebadge{font-size:14px;color:var(--lilac);margin-top:6px;letter-spacing:1px}#pause,#confirm{background:#07040f9e}body.menu #banner,body.menu #toast,body.menu #keys{visibility:hidden}#hud:has(#t-emotes.open) #h-right,#hud:has(#t-emotes.open) #banner{visibility:hidden}#banner{position:absolute;top:16%;left:0;right:0;text-align:center;opacity:0;transition:opacity .5s,transform .5s;transform:translateY(-10px)}#banner.on{opacity:1;transform:none}#banner .b1{font-size:64px;line-height:1}#banner .b2{font-size:24px;color:var(--lilac);margin-top:8px}#toast{position:absolute;top:38%;left:0;right:0;text-align:center;opacity:0;transition:opacity .35s,transform .35s;transform:scale(.85)}#toast.on{opacity:1;transform:none}#toast .t1{font-size:76px;line-height:1;color:var(--red)}#toast .t2{font-size:24px;margin-top:6px}#cphint{position:absolute;right:22px;bottom:18px;font-size:16px;color:var(--lilac)}#keys{position:absolute;left:22px;bottom:18px;font-family:var(--body);font-weight:700;font-size:13px;line-height:1.7;opacity:.9;transition:opacity 1.2s}#keys b{font-family:var(--display);font-weight:400;color:var(--mint);margin-right:6px;letter-spacing:.5px}#keys.fade{opacity:0}#clickhint{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:16px;color:var(--lilac);opacity:.9}.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;background:radial-gradient(ellipse at center,#07040f40,#07040fb8 70%)}#win{background:linear-gradient(270deg,#07040fcc,#07040f66 42%,#07040f00 64%);align-items:flex-end;padding-right:7vw;text-align:right}#win button{text-align:right;min-width:220px}#title{background:linear-gradient(90deg,#07040fd1,#07040f73 45%,#07040f00 70%);align-items:flex-start;padding-left:7vw;text-align:left}.logo{font-family:var(--display);line-height:.9;display:flex;flex-direction:column}.logo .l1,.logo .l2{font-size:clamp(56px,9vw,128px);letter-spacing:1px;text-shadow:0 6px 0 var(--ink),6px 0 0 var(--ink),-6px 0 0 var(--ink),0 -6px 0 var(--ink),4px 4px 0 var(--ink),-4px 4px 0 var(--ink),4px -4px 0 var(--ink),-4px -4px 0 var(--ink),0 12px 0 rgba(13,9,18,.5)}.logo em{font-style:normal;color:var(--green)}.logo.small .l2{font-size:clamp(48px,7vw,96px)}.tag{font-family:var(--display);font-size:22px;color:var(--lilac);max-width:520px;text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink)}.menu{display:flex;flex-direction:column;gap:12px;min-width:300px}.menu.row{flex-direction:row}.screen button{font-family:var(--display);font-size:24px;color:var(--paper);background:#241a3a;border:3px solid var(--ink);border-radius:14px;padding:12px 26px;cursor:pointer;box-shadow:0 5px 0 var(--ink);text-align:left;letter-spacing:.5px;transition:transform .08s,background .15s}.screen button:hover,.screen button:focus-visible{background:#3a2a5e;outline:none;transform:translateY(-2px)}.screen button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}.screen button.primary{background:var(--green);color:var(--ink)}.screen button.primary:hover{background:var(--mint)}.screen button .sub{display:block;font-family:var(--body);font-weight:700;font-size:13px;opacity:.8;margin-top:2px}.screen h2{font-family:var(--display);font-size:52px;margin:0;letter-spacing:1px;text-shadow:0 4px 0 var(--ink),4px 0 0 var(--ink),-4px 0 0 var(--ink),0 -4px 0 var(--ink)}.foot{position:absolute;bottom:18px;left:7vw;font-size:13px;opacity:.6;font-weight:700}.cards{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}.card{width:320px;min-height:160px;text-align:center!important}.card .c1{font-size:32px}.card[data-mode=diamond] .c1{color:#8fd8ff}.card[data-mode=paper] .c1{color:var(--paper)}.card .c2{font-family:var(--body);font-weight:700;font-size:15px;margin-top:10px;opacity:.85;line-height:1.5}.back{margin-top:8px}.stats{font-family:var(--display);font-size:22px;line-height:1.6;text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink)}.stats.big{font-size:28px}.stats .hl{color:var(--gold)}.helpgrid{display:grid;grid-template-columns:1fr;gap:8px;max-width:640px;width:100%;text-align:left;background:#0d091299;border:3px solid var(--ink);border-radius:16px;padding:18px 22px}.helpgrid div{display:flex;gap:14px;font-weight:700}.helpgrid b{font-family:var(--display);font-weight:400;color:var(--mint);min-width:210px}.note{max-width:640px;font-weight:700;color:var(--lilac)}.sets{display:flex;flex-direction:column;gap:14px;background:#0d091299;border:3px solid var(--ink);border-radius:16px;padding:18px 22px;min-width:420px;font-weight:700}.sets label{display:flex;justify-content:space-between;align-items:center;gap:18px}.sets label.tick{justify-content:flex-start}.sets input[type=range]{width:200px;accent-color:var(--green)}.sets input[type=checkbox]{width:20px;height:20px;accent-color:var(--green)}#board{gap:14px}.btabs{display:flex;gap:10px}.screen .btabs button{font-size:18px;padding:8px 18px;border-radius:12px;background:#1a1229;color:var(--lilac)}.screen .btabs button[aria-selected=true]{background:#3a2a5e;color:var(--paper)}.blist{width:min(620px,100%);max-height:46vh;overflow-y:auto;background:#0d0912b8;border:3px solid var(--ink);border-radius:16px;padding:6px 0;text-align:left;touch-action:pan-y}.brow{display:grid;grid-template-columns:42px 1fr auto;column-gap:12px;align-items:baseline;padding:9px 18px;border-bottom:1px solid rgba(255,255,255,.05);font-weight:700}.brow:last-child{border-bottom:0}.brow .n{font-family:var(--display);color:var(--lilac);font-size:18px}.brow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}.brow .r{font-family:var(--display);font-size:20px;color:var(--paper);text-align:right}.brow.done .r{color:var(--gold)}.brow .s{grid-column:2 / 4;font-size:12px;color:var(--lilac);opacity:.8}.brow.me{background:#2fd27a1f}.brow.me .nm{color:var(--mint)}.brow:nth-child(1) .n{color:var(--gold)}.bempty{padding:26px 18px;text-align:center;color:var(--lilac);font-weight:700}.bname{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font-weight:700}.bname input{font:700 18px var(--body);color:var(--paper);background:#120c1d;border:3px solid var(--ink);border-radius:12px;padding:8px 12px;width:190px;user-select:text;-webkit-user-select:text;touch-action:auto}.bname input:focus{outline:2px solid var(--green)}.screen .bname button{font-size:18px;padding:8px 18px;border-radius:12px;background:var(--green);color:var(--ink)}.screen .bname button:hover{background:var(--mint)}.bnote{font-size:13px;font-weight:700;color:var(--lilac);opacity:.85}.onboard{min-height:1em}.onboard .bline{font-family:var(--display);font-size:22px;color:var(--mint);text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink)}#win .bname{justify-content:flex-end}.screen#win .bname button{min-width:0;text-align:center}#win .bname label{font-family:var(--display);font-size:18px;color:var(--mint);text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink)}#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#07040f;z-index:10}#loading .lg{font-family:var(--display);font-size:56px;text-shadow:0 4px 0 var(--ink),4px 0 0 var(--ink),-4px 0 0 var(--ink),0 -4px 0 var(--ink)}#loading .lp{font-weight:700;color:var(--lilac)}.touchonly{display:none!important}body.touch .touchonly{display:revert!important}body.touch .helpgrid.touchonly{display:grid!important}body.touch .sets label.touchonly{display:flex!important}body.touch .deskonly,body.touch #keys,body.touch #clickhint,body.touch #cphint{display:none!important}#touch{display:none;position:absolute;inset:0;pointer-events:auto;touch-action:none}body.touch #touch{display:block}body.menu #touch{display:none}body.touch #h-right{top:calc(68px + var(--st))}#touch *{text-shadow:none}.tb{font-family:var(--display);color:var(--paper);background:#241a3ad1;border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);letter-spacing:.5px;padding:0;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .06s,background .1s}.tb.on{transform:translateY(3px) scale(.96);box-shadow:0 1px 0 var(--ink)}.tb.small{height:44px;min-width:44px;padding:0 14px;font-size:16px}#t-jump{position:absolute;right:calc(28px + var(--sr));bottom:calc(30px + var(--sb));width:calc(var(--stick) * 1.7);height:calc(var(--stick) * 1.7);border-radius:50%;background:var(--green);color:var(--ink);font-size:calc(var(--stick) * .36)}#t-jump.on{background:var(--mint)}#t-drop{position:absolute;right:calc(28px + var(--stick) * 1.95 + var(--sr));bottom:calc(34px + var(--sb));height:calc(var(--stick) * .95);padding:0 18px;border-radius:999px;background:#5a2340;font-size:calc(var(--stick) * .3)}#t-drop.on{background:var(--red)}#t-top{position:absolute;top:calc(12px + var(--st));right:calc(16px + var(--sr));display:flex;gap:8px}#t-pause{width:44px;display:flex;align-items:center;justify-content:center;gap:6px}#t-pause i{width:6px;height:18px;background:var(--paper);border-radius:2px}#t-emotes{position:absolute;top:calc(64px + var(--st));right:calc(16px + var(--sr));display:none;flex-direction:column;gap:8px;align-items:flex-end}#t-emotes.open{display:flex}#t-stick{position:absolute;width:calc(var(--stick) * 2);height:calc(var(--stick) * 2);margin:calc(var(--stick) * -1) 0 0 calc(var(--stick) * -1);border-radius:50%;border:3px solid rgba(243,239,246,.4);background:#0d091247;opacity:0;pointer-events:none;transition:opacity .12s}#t-stick.on{opacity:1}#t-knob{position:absolute;left:50%;top:50%;width:calc(var(--stick) * .92);height:calc(var(--stick) * .92);margin:calc(var(--stick) * -.46) 0 0 calc(var(--stick) * -.46);border-radius:50%;background:#f3eff6e6;border:3px solid var(--ink)}.hint{position:absolute;pointer-events:none;font-family:var(--display);color:var(--lilac);transition:opacity 1.2s;text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink)!important}#touch.nohints .hint{opacity:0}#t-stickhint{left:calc(36px + var(--sl));bottom:calc(26px + var(--sb));display:flex;flex-direction:column;align-items:center;gap:6px;font-size:16px}#t-stickhint .ring{width:calc(var(--stick) * 1.6);height:calc(var(--stick) * 1.6);border-radius:50%;border:3px dashed rgba(201,166,255,.55);display:flex;align-items:center;justify-content:center}#t-stickhint .dot{width:calc(var(--stick) * .6);height:calc(var(--stick) * .6);border-radius:50%;background:#c9a6ff59}#t-stick.on~#t-stickhint{opacity:0}#t-lookhint{right:calc(28px + var(--stick) * 2.1 + var(--sr));bottom:calc(30px + var(--sb) + var(--stick) * 1.2);font-size:16px;text-align:right;max-width:220px}#rotate{display:none;position:fixed;inset:0;z-index:20;background:#07040f;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px}@media(orientation:portrait){body.touch:not(.upright) #rotate{display:flex}}#rotate .phone{width:52px;height:92px;border:5px solid var(--paper);border-radius:12px;animation:turn 2.4s ease-in-out infinite}@keyframes turn{0%,25%{transform:rotate(0)}55%,to{transform:rotate(-90deg)}}#rotate .rt{font-family:var(--display);font-size:30px;margin-top:16px}#rotate .rs{font-weight:700;color:var(--lilac)}#rotate button{font-family:var(--display);font-size:18px;color:var(--paper);background:#241a3a;border:3px solid var(--ink);border-radius:14px;padding:10px 22px;margin-top:10px;box-shadow:0 4px 0 var(--ink)}.screen{overflow-y:auto;padding:calc(24px + var(--st)) calc(24px + var(--sr)) calc(24px + var(--sb)) calc(24px + var(--sl))}#title{padding-left:calc(7vw + var(--sl))}#win{padding-right:calc(7vw + var(--sr))}@media(max-height:520px){#alt{font-size:36px}#price{font-size:15px}#chap{font-size:12px;margin-top:3px}#time{font-size:22px}#falls{font-size:14px}#modebadge{font-size:11px;margin-top:3px}#banner{top:calc(58px + var(--st))}#banner .b1{font-size:40px}#banner .b2{font-size:17px;margin-top:4px}#toast{top:36%}#toast .t1{font-size:50px}#toast .t2{font-size:16px}.screen{gap:10px;justify-content:flex-start}.screen>:first-child{margin-top:auto}.screen>:last-child{margin-bottom:auto}.logo .l1,.logo .l2{font-size:clamp(38px,min(9vw,14vh),128px)}.logo.small .l2{font-size:clamp(34px,min(7vw,12vh),96px)}.tag{font-size:15px;max-width:420px}.menu{gap:8px;min-width:240px}.screen button{font-size:18px;padding:8px 18px;border-radius:12px;box-shadow:0 4px 0 var(--ink)}.screen button .sub{font-size:11px}.screen h2{font-size:32px}.foot{display:none}.cards{gap:12px}.card{width:250px;min-height:110px}.card .c1{font-size:22px}.card .c2{font-size:12px;margin-top:6px}.stats{font-size:16px;line-height:1.45}.stats.big{font-size:19px}.helpgrid{padding:10px 14px;gap:5px;font-size:13px}.helpgrid b{min-width:140px}.note{font-size:12px}.sets{gap:7px;padding:10px 16px;min-width:340px;font-size:14px}.sets input[type=range]{width:150px}.blist{max-height:42vh}.brow{padding:6px 14px}.brow .r{font-size:16px}.brow .nm{font-size:14px}.brow .s{font-size:11px}.bname input,.screen .bname button,.screen .btabs button{font-size:15px;padding:6px 12px}.bnote{display:none}.onboard .bline{font-size:16px}.tb.small{height:38px;min-width:38px;font-size:14px;padding:0 10px}#t-pause{width:38px}#t-pause i{height:15px;width:5px}body.touch #h-right{top:calc(58px + var(--st))}#t-emotes{top:calc(56px + var(--st))}.hint,#t-stickhint{font-size:13px!important}}@media(max-height:420px){#pause .menu{display:grid;grid-template-columns:1fr 1fr;min-width:0;width:min(560px,92vw)}#pause .menu button:first-child{grid-column:1 / -1}.screen h2{font-size:28px}.sets{gap:4px;padding:8px 14px}.sets label{gap:12px}.sets input[type=checkbox]{width:17px;height:17px}.helpgrid{gap:3px;padding:8px 12px}}@media(max-width:560px){#alt{font-size:32px}#price{font-size:14px}#chap{font-size:12px;margin-top:3px}#time{font-size:22px}#falls{font-size:14px}#modebadge{font-size:11px;margin-top:3px}#banner{top:17%;padding:0 16px}#banner .b1{font-size:34px}#banner .b2{font-size:15px}#toast{padding:0 16px}#toast .t1{font-size:44px}#toast .t2{font-size:15px}.tb.small{height:38px;min-width:38px;font-size:13px;padding:0 9px}#t-pause{width:38px}#t-top{gap:6px;right:calc(10px + var(--sr))}body.touch #h-right{top:calc(58px + var(--st))}#t-lookhint{display:none}.helpgrid div{flex-direction:column;gap:0}.helpgrid b{min-width:0}.sets{min-width:0;width:100%}.sets input[type=range]{width:46vw}.card{width:100%}}
