@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('./fonts/dm-sans.ttf') format('truetype')}
:root{color-scheme:dark;--canvas:#080a12;--ink:#f4f6fb;--muted:#a7b0c6;--lavender:#6d8cff;--focus:#8aa4ff;--rail:rgba(10,13,22,.58);--panel:rgba(255,255,255,.07);--glass-border:rgba(255,255,255,.14);--glass-highlight:inset 0 1px 0 rgba(255,255,255,.16);--glass-blur:blur(24px) saturate(1.3);--glass-shadow:0 24px 64px rgba(2,4,12,.45);--aurora:radial-gradient(1200px 800px at 8% -6%,rgba(88,118,255,.42),transparent 62%),radial-gradient(1000px 700px at 92% 4%,rgba(150,91,255,.30),transparent 60%),radial-gradient(900px 720px at 84% 92%,rgba(52,190,210,.20),transparent 62%),linear-gradient(155deg,#0a0c14 0%,#101425 46%,#090b12 100%);font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background-color:var(--canvas);background-image:var(--aurora);background-attachment:fixed;background-size:cover}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.35}a{color:inherit}::selection{background:rgba(109,140,255,.38);color:#fff}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}svg{width:23px;height:23px}button,a{transition:background-color .15s ease,color .15s ease}button{border:0} [hidden]{display:none!important}
.skip{position:fixed;top:12px;left:128px;z-index:20;padding:12px 20px;background:rgba(16,21,35,.95);color:var(--ink);border:1px solid var(--glass-border);border-radius:12px;transform:translateY(-150%)}.skip:focus{transform:none}
.rail{position:fixed;z-index:10;top:24px;bottom:24px;left:24px;width:72px;display:flex;flex-direction:column;align-items:center;padding:22px 8px;color:var(--muted);isolation:isolate}
.rail::before{content:'';position:absolute;z-index:-1;inset:-2px 0;background:var(--rail);border:1px solid var(--glass-border);border-radius:38px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-highlight),var(--glass-shadow)}
.rail-mark{display:grid;grid-template-columns:repeat(2,7px);gap:3px;margin:0 0 42px;padding:5px}.rail-mark i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(109,140,255,.8)}
#gameNav{display:flex;flex-direction:column;gap:18px;width:100%;align-items:center}#gameNav a{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;text-decoration:none;color:var(--muted)}#gameNav a:hover{background:rgba(255,255,255,.1);color:#fff}#gameNav a[aria-current=page]{background:linear-gradient(135deg,#6d8cff,#8b6bff);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px rgba(64,86,220,.4)}#gameNav a span{position:absolute;left:64px;padding:7px 12px;font-size:12px;font-weight:500;white-space:nowrap;background:rgba(12,16,28,.96);color:#fff;border:1px solid var(--glass-border);border-radius:10px;opacity:0;pointer-events:none;transform:translateX(-3px);transition:opacity .12s ease,transform .12s ease}#gameNav a:is(:hover,:focus-visible) span{opacity:1;transform:none}.rail-caption{margin-top:auto;font-size:10px;letter-spacing:1px;writing-mode:vertical-rl;color:var(--muted)}
.workspace{width:100%;margin:0;padding:32px 32px 40px 128px}.workspace-header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px;min-height:104px}.wordmark{font-size:13px;font-weight:650;letter-spacing:-.2px;margin-bottom:7px;color:var(--muted)}.workspace-header h1{font-size:44px;font-weight:650;line-height:1.08;letter-spacing:-1.6px;margin:0;outline-offset:6px;color:var(--ink)}.workspace-header p{font-size:15px;color:var(--muted);line-height:1.5;margin:8px 0 0}.header-tools{display:flex;align-items:center;gap:8px}.header-tools time{font-size:13px;white-space:nowrap;margin-right:16px;color:var(--muted)}.icon-button,.lang-button{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid var(--glass-border);color:var(--ink);text-decoration:none;box-shadow:var(--glass-highlight);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.lang-button{font-size:12px;font-weight:650}.icon-button:hover,.lang-button:hover{background:rgba(255,255,255,.14);color:#fff}
#frameArea{position:relative;min-height:600px;scroll-margin-top:20px}.game-view{display:block;width:100%;height:850px;border:0;background:transparent;animation:view-in .16s ease-out both;color-scheme:dark}.loading{position:absolute;inset:0 0 auto;min-height:480px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:14px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.loading-dot{width:8px;height:8px;border-radius:50%;background:#8aa4ff;box-shadow:0 0 12px rgba(109,140,255,.8);animation:breathe 1s ease-in-out infinite alternate}.game-error{padding:36px;max-width:640px;background:rgba(255,255,255,.07);border:1px solid var(--glass-border);border-radius:22px;box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.game-error h2{font-size:25px;letter-spacing:-.6px;margin:0 0 12px}.error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px}.error-actions button{background:linear-gradient(135deg,#6d8cff,#8b6bff);color:#fff;border-radius:24px;padding:13px 24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}.error-actions a{font-size:14px;text-underline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes view-in{from{opacity:0}to{opacity:1}}@keyframes breathe{from{opacity:.3}to{opacity:1}}
@media(max-width:1100px){.workspace{padding-right:24px;padding-left:116px}.rail{left:20px}.header-tools time{display:none}.workspace-header h1{font-size:38px}.workspace-header p{font-size:14px}}
@media(max-width:800px){.rail{top:auto;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;height:72px;padding:6px 10px;border-radius:30px;box-shadow:var(--glass-highlight),0 12px 34px rgba(2,4,12,.5)}.rail-mark,.rail-caption{display:none}#gameNav{display:grid;grid-template-columns:repeat(4,1fr);gap:0;height:100%}#gameNav a{width:100%;height:58px;flex-direction:column;gap:4px;border-radius:22px;font-size:10px}#gameNav a svg{width:22px;height:22px}#gameNav a span{position:static;padding:0;color:inherit;background:none;border:0;border-radius:0;opacity:1;transform:none;font-size:10px;line-height:1.2}#gameNav a[aria-current=page]{background:linear-gradient(135deg,#6d8cff,#8b6bff)}.workspace{padding:24px 16px calc(104px + env(safe-area-inset-bottom))}.workspace-header{gap:10px;align-items:flex-start;margin-bottom:20px;min-height:92px}.workspace-header h1{font-size:32px;letter-spacing:-1px}.workspace-header p{font-size:13px;max-width:240px}.wordmark{font-size:12px;margin-bottom:7px}.header-tools{gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:100px}.icon-button,.lang-button{width:44px;min-width:44px;height:44px}.lang-button{order:2}.header-tools #stats{order:3}.header-tools #help{order:1}.header-tools svg{width:20px;height:20px}#frameArea{min-height:500px;scroll-margin-top:12px}.loading{min-height:340px;border-radius:18px}.skip{left:16px}.game-error{padding:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The same blue surface travels vertically on desktop and horizontally on mobile. */
#gameNav{position:relative;isolation:isolate}
.nav-indicator{position:absolute;left:0;top:0;z-index:0;display:block;pointer-events:none;background:linear-gradient(135deg,#6d8cff,#8b6bff);border-radius:50%;opacity:0;transition:transform var(--nav-duration,240ms) cubic-bezier(.4,0,.2,1)}
#gameNav[data-motion-ready] .nav-indicator{opacity:1}
#gameNav a{z-index:1}
#gameNav[data-motion-ready] a[aria-current=page],#gameNav[data-motion-ready] a[aria-current=page]:hover{background:transparent;box-shadow:none}
@media(max-width:800px){.nav-indicator{border-radius:22px;background:linear-gradient(135deg,#6d8cff,#8b6bff)}}
@media(prefers-reduced-motion:reduce){.nav-indicator{transition:none!important}}

/* Route changes focus this noninteractive heading for screen readers. */
#gameTitle:focus{outline:none}

/* Fluid surfaces: fixed chrome separates scrolling content; puzzle geometry stays still. */
:root{--fluid-ease:cubic-bezier(.4,0,.2,1);--fluid-press:120ms;--fluid-state:180ms;--panel-radius:26px}
@media(min-width:801px){html{scrollbar-gutter:stable}}
.rail::before{box-shadow:var(--glass-highlight),var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.nav-indicator{background:linear-gradient(135deg,#6d8cff,#8b6bff);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 8px 22px rgba(64,86,220,.42)}
#gameNav a{transition:color var(--fluid-state) var(--fluid-ease),background-color var(--fluid-state) var(--fluid-ease)}
#gameNav a svg{transition:scale var(--fluid-state) var(--fluid-ease)}
#gameNav a:active svg{scale:.91}
.icon-button,.lang-button{transition:background-color var(--fluid-state) var(--fluid-ease),box-shadow var(--fluid-state) var(--fluid-ease),scale var(--fluid-press) var(--fluid-ease)}
.icon-button:hover:enabled,.lang-button:hover{background:rgba(255,255,255,.14);box-shadow:var(--glass-highlight),0 6px 18px rgba(2,4,12,.3)}
.icon-button:active:enabled,.lang-button:active{scale:.94}
.workspace-header h1{font-weight:600;letter-spacing:-.035em}
.workspace-header p{color:var(--muted)}
#frameArea.has-view{min-height:0;overflow:clip;border-radius:var(--panel-radius)}
.game-view{position:absolute;left:0;top:0;animation:none}
.loading{z-index:2;min-height:280px;inset:0;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);border-radius:var(--panel-radius);color:var(--muted);gap:14px}
.loading-dot{width:7px;height:7px}
.game-error{position:relative;z-index:3;box-shadow:var(--glass-shadow);border-radius:var(--panel-radius)}
.error-actions button{transition:scale var(--fluid-press) var(--fluid-ease),background-color var(--fluid-state) var(--fluid-ease)}
.error-actions button:active{scale:.97}
@media(max-width:800px){:root{--panel-radius:22px}.rail{background:rgba(10,13,22,.82);border:1px solid var(--glass-border);border-radius:29px;box-shadow:var(--glass-highlight),0 12px 34px rgba(2,4,12,.55);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.rail::before{display:none}.workspace-header h1{font-weight:600}.nav-indicator{border-radius:21px}}
@media(prefers-reduced-transparency:reduce){:root{background-image:none;background-color:#0b0e16}.rail::before{background:#0b0e16;-webkit-backdrop-filter:none;backdrop-filter:none}.icon-button,.lang-button{background:#171c2a}.loading{background:#111624}.game-error{background:#111624}}
@media(prefers-reduced-motion:reduce){#gameNav a svg,.icon-button,.lang-button{scale:1!important}.loading-dot{animation:none}}