:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0f1115;--panel:#161921;--raised:#1d212b;--line:#262a35;--fg:#eef0f5;--soft:#b9bfcc;--muted:#858c9c;--accent:#3a7bff;--accent-soft:#3a7bff29;--gold:#ffd166;--danger:#ff6b6b;--danger-soft:#ff6b6b1f;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--t-xs:.75rem;--t-sm:.875rem;--t-md:1rem;--t-lg:1.25rem;--t-xl:1.75rem;--t-result:3rem;--t-clock:clamp(3rem, 11vw, 5.5rem);--r-sm:8px;--r-md:12px;--r-lg:16px;--r-full:999px;--control:40px;--shadow:0 16px 48px #00000080;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.4}@media (pointer:coarse){:root{--control:44px}}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--fg);overscroll-behavior:none;margin:0;overflow:hidden}button,select,input{font:inherit;color:var(--fg)}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[hidden]{display:none!important}h2,h3,p{margin:0}.icon{flex:none;display:block}.primary,.ghost,.danger-button{justify-content:center;align-items:center;gap:var(--s2);min-height:var(--control);padding:0 var(--s4);border-radius:var(--r-md);font-size:var(--t-md);white-space:nowrap;font-weight:600;display:inline-flex}.primary{background:var(--accent);color:#fff;border:0}.primary.big{min-width:min(220px,50vw);min-height:52px;padding:0 var(--s6);border-radius:var(--r-lg);font-size:var(--t-lg)}.ghost{border:1px solid var(--line);color:var(--soft);background:0 0}.ghost.small{min-height:36px;padding:0 var(--s3);font-size:var(--t-sm)}.ghost.danger{color:var(--danger)}.danger-button{background:var(--danger);color:#1a0b0b;border:0}.icon-button{width:var(--control);height:var(--control);border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);color:var(--soft);justify-content:center;align-items:center;padding:0;display:inline-flex}.icon-button.quiet{background:0 0;border-color:#0000}.row{align-items:center;gap:var(--s2);flex-wrap:wrap;display:flex}.row.end{justify-content:flex-end}.note,.muted{color:var(--muted);font-size:var(--t-sm);line-height:1.45}.note.error{color:var(--danger)}.badge{padding:2px var(--s2);border-radius:var(--r-full);background:var(--raised);color:var(--muted);font-size:var(--t-xs);letter-spacing:.02em;flex:none;font-weight:600}.field{gap:var(--s2);color:var(--soft);font-size:var(--t-sm);flex-direction:column;display:flex}.field input,.popover select{min-height:var(--control);padding:0 var(--s3);border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:var(--t-md)}.game{height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);grid-template:"top""stage"minmax(0,1fr)"bottom"/minmax(0,1fr);display:grid}.side{display:none}@media (width>=900px){.game{grid-template-columns:220px minmax(0,1fr) 220px;grid-template-areas:"top top top""stats stage keys""bottom bottom bottom"}.side{padding:var(--s5) var(--s5);display:block;overflow:auto}.stats-panel{grid-area:stats}.keys-panel{grid-area:keys}.stats-line{display:none}}.topbar{align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);grid-area:top;grid-template-columns:1fr auto 1fr;display:grid}.brand{align-items:center;gap:var(--s2);justify-self:start;display:inline-flex}.brand-mark{flex:none;display:block}.brand-word{font-weight:700;font-size:var(--t-lg);letter-spacing:-.01em;line-height:1}.brand-q{color:#3d7bff}.topbar-actions{justify-self:end;gap:var(--s2);display:flex;position:relative}.me-button{overflow:hidden}.button-label{display:none}.avatar{flex:none;display:block}.avatar-letter{background:var(--accent);color:#fff;border-radius:28%;justify-content:center;align-items:center;font-weight:600;line-height:1;display:inline-flex}.mode-menu-wrap{position:relative}.mode-button{align-items:center;gap:var(--s2);height:var(--control);padding:0 var(--s3) 0 var(--s3);border:1px solid var(--line);border-radius:var(--r-full);background:var(--panel);color:var(--fg);font-size:var(--t-md);font-weight:600;display:inline-flex}.mode-button .icon:first-child{color:var(--accent)}.mode-button .icon:last-child{color:var(--muted)}.sheet-backdrop{display:none}.mode-tabs{border-radius:var(--r-full);border:1px solid var(--line);background:var(--panel);gap:2px;padding:3px;display:none}.mode-tab{height:calc(var(--control) - 8px);padding:0 var(--s3);border-radius:var(--r-full);color:var(--soft);font-size:var(--t-sm);white-space:nowrap;background:0 0;border:0;align-items:center;gap:6px;font-weight:600;display:inline-flex}.mode-tab:hover:not(.active):not(.soon){background:var(--raised);color:var(--fg)}.mode-tab.active{background:var(--accent);color:#fff}.mode-tab.soon{color:var(--muted);opacity:.6;cursor:default}.mode-tab.locked{color:var(--muted)}.mode-menu{top:calc(100% + var(--s2));z-index:15;width:380px;padding:var(--s2);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);flex-direction:column;gap:2px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.mode-menu-title{padding:var(--s2) var(--s3) var(--s1);color:var(--muted);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:600}.mode-item{align-items:center;gap:var(--s3);width:100%;padding:var(--s2) var(--s3);border-radius:var(--r-md);color:var(--fg);text-align:left;background:0 0;border:0;display:flex}.mode-item:hover:not(.soon){background:var(--raised)}.mode-item.active{background:var(--accent-soft)}.mode-item.soon{cursor:default}.mode-item.soon .mode-item-icon,.mode-item.soon .mode-item-name{color:var(--muted)}.mode-item-icon{border-radius:var(--r-md);background:var(--raised);width:40px;height:40px;color:var(--accent);flex:none;justify-content:center;align-items:center;display:inline-flex}.mode-item-text{flex-direction:column;flex:1;min-width:0;display:flex}.mode-item-name{font-weight:600}.mode-item-note{color:var(--muted);font-size:var(--t-sm)}.mode-item>.icon{color:var(--soft)}.mode-item.active>.icon{color:var(--accent)}.popover{top:calc(100% + var(--s2));z-index:10;width:260px;padding:var(--s4);border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);gap:var(--s3);flex-direction:column;display:flex;position:absolute;right:0}.popover-title{font-size:var(--t-md);font-weight:600}.popover label{gap:var(--s2);color:var(--soft);font-size:var(--t-sm);flex-direction:column;display:flex}.popover .small-note{font-size:var(--t-xs)}.popover label.check{font-size:var(--t-md);flex-direction:row;align-items:center}.popover input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);margin:0}.popover input[type=range]{accent-color:var(--accent)}.toast{top:calc(env(safe-area-inset-top) + 64px);z-index:20;align-items:center;gap:var(--s3);max-width:calc(100vw - var(--s6));padding:var(--s2) var(--s2) var(--s2) var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--shadow);animation:.2s ease-out toast-in;display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast-error{border-color:var(--danger)}.toast-close{border-radius:var(--r-sm);width:32px;height:32px;color:var(--muted);background:0 0;border:0;flex:none;justify-content:center;align-items:center;display:inline-flex}@keyframes toast-in{0%{transform:translate(-50%,-8px)}}.google-button{justify-content:center;align-items:center;gap:var(--s3);width:100%;min-height:var(--control);padding:0 var(--s4);border-radius:var(--r-md);color:#1f1f1f;white-space:nowrap;background:#fff;border:1px solid #dadce0;font-weight:600;display:inline-flex}.google-button:disabled{opacity:.7}.google-g{color:#4285f4;font-weight:700}.stage{flex-direction:column;grid-area:stage;min-height:0;display:flex;position:relative}.clock-block{align-items:center;gap:var(--s1);padding:var(--s4) var(--s4) 0;touch-action:none;-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}.pull-indicator{top:calc(-1 * var(--s5));z-index:6;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-full);border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);color:var(--soft);font-size:var(--t-sm);white-space:nowrap;pointer-events:none;display:inline-flex;position:absolute;left:50%}.pull-indicator span{display:inline-flex}.pull-indicator.ready{border-color:var(--accent);color:var(--fg)}.clock{min-height:1.15em;font-size:var(--t-clock);font-variant-numeric:tabular-nums;font-weight:600;line-height:1.15}.clock[data-state=idle]{color:var(--soft)}.clock[data-state=countdown]{color:var(--gold)}.clock[data-state=countdown-low]{color:var(--danger)}.hint{min-height:1.4em;color:var(--soft);font-size:var(--t-md);text-align:center}.stats-line{color:var(--muted);font-size:var(--t-sm);font-variant-numeric:tabular-nums;margin-top:2px}.canvas-wrap{flex:1;min-height:0;position:relative}.game-canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:100%;display:block}.side h2{margin-bottom:var(--s3);color:var(--muted);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:600}.side h3{margin:var(--s5) 0 var(--s2);color:var(--muted);font-size:var(--t-sm);font-weight:600}.stats-grid{gap:var(--s2) var(--s3);grid-template-columns:auto 1fr;align-items:baseline;margin:0;display:grid}.stats-grid dt{color:var(--soft)}.stats-grid dd{text-align:right;font-size:var(--t-lg);font-variant-numeric:tabular-nums;margin:0;font-weight:600}.recent{gap:var(--s1);font-variant-numeric:tabular-nums;color:var(--soft);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.recent li.best{color:var(--gold)}.keys-panel table{border-collapse:collapse;width:100%}.keys-panel th{width:2.2em;padding:var(--s1) 0;text-align:left;font-weight:600}.keys-panel td{padding:var(--s1) 0}.keys-panel .muted{margin-top:var(--s3)}kbd{min-width:1.9em;padding:2px var(--s2);border:1px solid var(--line);background:var(--panel);text-align:center;font-family:inherit;font-size:var(--t-sm);border-bottom-width:2px;border-radius:6px;display:inline-block}.prime{margin-left:var(--s1);color:var(--muted)}.bottombar{justify-content:center;align-items:center;gap:var(--s4);min-height:84px;padding:var(--s3) var(--s4) var(--s4);grid-area:bottom;display:flex}.result-card{left:50%;bottom:var(--s3);width:min(380px, calc(100% - var(--s6)));padding:var(--s5);border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow);align-items:center;gap:var(--s3);background:#161921f0;flex-direction:column;animation:.2s ease-out rise;display:flex;position:absolute;transform:translate(-50%)}@keyframes rise{0%{opacity:0;transform:translate(-50%,12px)}}.record{color:var(--gold);font-weight:600}.result-time{font-size:var(--t-result);font-variant-numeric:tabular-nums;font-weight:600;line-height:1.1}.result-stats{gap:var(--s5);margin:0 0 var(--s1);display:flex}.result-stats div{flex-direction:column-reverse;align-items:center;display:flex}.result-stats dt{color:var(--muted);font-size:var(--t-sm)}.result-stats dd{font-size:var(--t-lg);font-variant-numeric:tabular-nums;margin:0;font-weight:600}.game-error{left:var(--s4);right:var(--s4);color:var(--danger);text-align:center;position:absolute;bottom:110px}.league{align-items:baseline;gap:var(--s1);font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-flex}.league .gem{font-size:.85em}.league .league-name{display:none}.league.no-sub .league-name,.league.full .league-name{font-weight:600;display:inline}.league.full .league-sub{color:var(--muted)}.league.full .league-sub:before{content:"· "}.stats-league{margin:calc(-1 * var(--s1)) 0 var(--s4)}.training-note{margin-top:var(--s2);display:block}.new-league{font-weight:600}.overlay{z-index:20;padding:var(--s4);background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog{border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);width:min(520px,100%);max-height:100%;box-shadow:var(--shadow);outline:none;flex-direction:column;animation:.15s ease-out fade-in;display:flex}@keyframes fade-in{0%{transform:translateY(8px)}}.dialog-head{align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s5);border-bottom:1px solid var(--line);display:flex}.dialog-head h2{font-size:var(--t-lg);flex:1;font-weight:600}.dialog-sub{margin-left:var(--s2);color:var(--muted);font-size:var(--t-sm);font-weight:400}.dialog-body{gap:var(--s4);min-height:0;padding:var(--s5);flex-direction:column;display:flex;overflow:auto}.dialog-body>*{flex-shrink:0}.dialog-body>p:not(.note){color:var(--soft)}.board-invite{border-bottom:1px solid var(--line);flex-shrink:0;overflow:visible}.board-body{flex-direction:column;min-height:0;display:flex;overflow:auto}.board-note{padding:var(--s5);color:var(--soft)}.board-note p{margin-bottom:var(--s3)}.board-note.small{color:var(--muted);font-size:var(--t-sm);padding:0}.my-card{gap:var(--s2);margin:var(--s4) var(--s4) var(--s2);padding:var(--s4);border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);flex-direction:column;display:flex}.my-main{justify-content:space-between;align-items:baseline;gap:var(--s3);display:flex}.my-place{font-size:var(--t-lg);font-weight:600}.my-time{font-size:var(--t-xl);font-variant-numeric:tabular-nums;font-weight:600}.board-list{padding:var(--s2) var(--s2) var(--s3);margin:0;list-style:none}.board-list li{align-items:center;gap:var(--s3);padding:var(--s2);border-radius:var(--r-sm);grid-template-columns:2.2em 5.4em minmax(0,1fr) auto;display:grid}.board-list li:nth-child(-n+3) .place{color:var(--gold)}.board-list li.me{background:var(--accent-soft)}.board-list .league{overflow:hidden}.board-list .place{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.board-list .nick{align-items:center;gap:var(--s2);min-width:0;display:flex}.nick-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.board-list .time{font-variant-numeric:tabular-nums;font-weight:600}@media (width>=600px){.board-list li{grid-template-columns:2.2em 10.5em minmax(0,1fr) auto}.board-list .league .league-name{display:inline}}.profile-dialog{width:min(460px,100%)}.profile-hero{align-items:flex-start;gap:var(--s4);display:flex}.avatar-button{align-items:center;gap:var(--s1);color:var(--accent);font-size:var(--t-xs);background:0 0;border:0;flex-direction:column;flex:none;padding:0;font-weight:600;display:flex}.nickname-form{gap:var(--s2);flex-direction:column;flex:1;min-width:0;display:flex}.nickname-row{gap:var(--s2);display:flex}.nickname-row input{flex:1;min-width:0}.nickname-row .ghost.small{min-height:var(--control)}.avatar-picker{gap:var(--s3);padding:var(--s3);border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);flex-direction:column;display:flex}.avatar-grid{gap:var(--s2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}@media (width>=480px){.avatar-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}.avatar-option{aspect-ratio:1;border-radius:var(--r-md);background:0 0;border:2px solid #0000;justify-content:center;align-items:center;padding:0;display:flex}.avatar-option.active{border-color:var(--accent)}.profile-stats{gap:var(--s2);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.profile-stats .note{grid-column:1/-1}.stat{min-width:0;padding:var(--s3);border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);flex-direction:column;gap:2px;display:flex}.stat-value{text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-lg);font-variant-numeric:tabular-nums;font-weight:600;overflow:hidden}.stat-value .league{font-size:var(--t-md)}.stat-date{font-size:var(--t-md);white-space:normal}.stat-label{color:var(--muted);font-size:var(--t-sm)}.profile-section{gap:var(--s3);padding-top:var(--s4);border-top:1px solid var(--line);flex-direction:column;display:flex}.profile-section h3{color:var(--muted);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:600}.profile-section.actions{flex-flow:wrap;justify-content:space-between}.danger-zone{padding:var(--s4);border:1px solid var(--danger);border-radius:var(--r-md);background:var(--danger-soft)}.danger-zone h3{color:var(--danger)}.method{align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);display:flex}.method-icon{background:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:32px;height:32px;display:inline-flex}.method-text{text-overflow:ellipsis;flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.method-ok{color:#3ddc84}.name-prompt{width:min(420px,100%)}.canvas-wrap .game-canvas{transition:filter .2s ease-out}.canvas-wrap.veiled .game-canvas{filter:blur(6px)brightness(.7)}.start-layer{justify-content:center;align-items:center;gap:var(--s3);padding:var(--s4);text-align:center;flex-direction:column;display:flex;position:absolute;inset:0}.pause-title{color:var(--soft);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:600}.start-note{max-width:300px;padding:var(--s2) var(--s3);border-radius:var(--r-md);font-size:var(--t-sm);color:var(--fg);background:#0f1115bf}.dev-overlay{top:70px;right:var(--s4);z-index:5;padding:var(--s2) var(--s3);border-radius:var(--r-sm);color:var(--soft);font-family:ui-monospace,Consolas,monospace;font-size:var(--t-xs);background:#0009;line-height:1.4;position:absolute}.dev-overlay pre{margin:0 0 var(--s2);font:inherit}.dev-overlay label{flex-direction:column;gap:2px;display:flex}.dev-overlay input[type=range]{width:160px}.dev-overlay .dev-solve{margin-top:var(--s2);width:100%}.dev-scramble{left:var(--s4);bottom:var(--s2);max-width:40%;color:var(--muted);font-size:var(--t-xs);word-break:break-word;position:absolute}@media (width>=900px){.topbar{grid-template-columns:auto minmax(0,1fr) auto}.topbar>.mode-menu-wrap{justify-self:center}.mode-tabs{display:inline-flex}.mode-button{display:none}.icon-button.labeled{gap:var(--s2);width:auto;padding:0 var(--s3) 0 var(--s2)}.button-label{text-overflow:ellipsis;white-space:nowrap;max-width:140px;font-size:var(--t-sm);font-weight:600;display:inline;overflow:hidden}}@media (width>=900px) and (width<=1179px){.mode-tab.soon .mode-tab-name{display:none}}@media (width<=600px){.topbar{gap:var(--s2);padding:var(--s2) var(--s3);grid-template-columns:auto minmax(0,1fr) auto}.brand-word{display:none}.topbar>.mode-menu-wrap{justify-self:start;min-width:0}.mode-button{max-width:100%}.mode-button-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sheet-backdrop{z-index:14;background:#0000008c;display:block;position:fixed;inset:0}.mode-menu{width:auto;padding:var(--s3) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom));border-radius:var(--r-lg) var(--r-lg) 0 0;border-width:1px 0 0;animation:.2s ease-out sheet-in;position:fixed;inset:auto 0 0;transform:none}.mode-item{padding:var(--s3)}.popover{top:calc(env(safe-area-inset-top) + 60px);left:var(--s3);right:var(--s3);width:auto;position:fixed}.overlay{align-items:stretch;padding:0}.dialog{border:0;border-radius:0;width:100%}.dialog-body{padding:var(--s4)}.dialog-head{padding-left:var(--s4)}}@keyframes sheet-in{0%{transform:translateY(24px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.privacy-link{color:var(--muted);font-size:var(--t-sm);align-self:flex-start}.privacy-link:hover{color:var(--soft)}
