:root { --ink:#070a16; --surface:#10152a; --surface-2:#161d36; --line:#2a355b; --text:#e9f4ff; --muted:#95a4c4; --cyan:#53f5e3; --cyan-dim:#258f98; --pink:#ff4fa2; --danger:#ff6a79; --radius:8px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; color:var(--text); background:var(--ink); }
* { box-sizing:border-box; }
body { min-height:100dvh; margin:0; overflow-x:hidden; background: radial-gradient(circle at 60% 10%, #131a37 0, transparent 28rem), linear-gradient(120deg, #060812, #0b1022 55%, #080913); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.32; background-image:linear-gradient(#1d294b 1px,transparent 1px),linear-gradient(90deg,#1d294b 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,black,transparent 88%); }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }
.ambient { position:fixed; width:28rem; height:28rem; border-radius:50%; filter:blur(120px); opacity:.11; pointer-events:none; }
.ambient-a { background:var(--cyan); top:-16rem; right:-7rem; }.ambient-b { background:var(--pink); bottom:-18rem; left:-8rem; }
#app { position:relative; min-height:100dvh; max-width:1320px; margin:auto; padding:0 32px 56px; }
.topbar { min-height:80px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #202a49; }
.wordmark { color:#fff; text-decoration:none; letter-spacing:.12em; font-size:16px; font-weight:900; }.wordmark span { color:var(--cyan); }.wordmark i { color:var(--pink); font-style:normal; font-size:10px; }
.identity { display:flex; gap:17px; align-items:center; color:var(--muted); font-size:13px; }.text-button,.danger-link,.copy { border:0; background:transparent; color:var(--cyan); padding:4px 0; font-size:12px; }.danger-link { color:var(--danger); }.copy { padding:0 0 0 7px; color:var(--cyan); }
.launch { min-height:calc(100dvh - 80px); display:grid; grid-template-columns:1.18fr .82fr; gap:70px; align-items:center; }.launch-copy { max-width:650px; }.eyebrow { color:var(--cyan); letter-spacing:.14em; font-size:10px; margin:0 0 17px; }.launch h1,.page-head h1,.game-head h1 { font-size:clamp(38px,6vw,76px); line-height:.94; letter-spacing:-.08em; margin:0; font-weight:900; }.launch h1 span { color:var(--pink); text-shadow:0 0 35px #ff4fa266; }.launch-copy>p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:1.8; max-width:470px; margin-top:25px; }
.route-diagram { display:flex; align-items:center; gap:12px; margin-top:50px; color:#c7d5ee; font-size:12px; }.route-diagram em { display:block; width:58px; height:1px; background:linear-gradient(90deg,var(--cyan),var(--pink)); position:relative; }.route-diagram em::after { content:""; position:absolute; right:0; top:-2px; border:3px solid transparent; border-left-color:var(--pink); }
.auth-panel { background:linear-gradient(130deg,#141b34e8,#0b1022e8); border:1px solid #344369; box-shadow:18px 18px 0 #040611,0 0 45px #1be2d41c; padding:28px; }.tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); margin:-8px 0 28px; }.tabs button { color:var(--muted); border:0; background:none; padding:14px; }.tabs button.selected { color:var(--cyan); border-bottom:2px solid var(--cyan); }
form { display:grid; gap:17px; } label { display:grid; gap:8px; color:#b8c5df; font-size:12px; } input,select { background:#080d1d; color:var(--text); border:1px solid #344369; border-radius:0; padding:13px; outline:none; width:100%; } input:focus,select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px #53f5e31a; }.primary,.secondary { border:1px solid var(--cyan); border-radius:0; padding:13px 18px; text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:bold; transition:transform .15s, box-shadow .15s; }.primary { color:#031313; background:var(--cyan); box-shadow:5px 5px 0 #178c89; }.secondary { color:var(--cyan); background:transparent; }.primary:active,.secondary:active { transform:translate(2px,2px); box-shadow:none; }.tiny { color:var(--muted); font-size:11px; line-height:1.6; margin:20px 0 0; }
.page-head,.game-head { padding:60px 0 35px; display:flex; align-items:end; justify-content:space-between; gap:28px; }.page-head h1,.game-head h1 { font-size:42px; }.page-head p:not(.eyebrow),.game-head p:not(.eyebrow) { color:var(--muted); font-size:13px; margin:15px 0 0; }.content-grid { display:grid; grid-template-columns:260px 1fr; gap:55px; }.protocol { border-top:2px solid var(--pink); padding-top:15px; }.protocol ol { color:#b9c8e4; font-size:12px; padding-left:18px; line-height:2.1; }.status-line { color:var(--muted); font-size:11px; margin-top:27px; }.status-line span { width:7px; height:7px; display:inline-block; background:var(--cyan); margin-right:8px; box-shadow:0 0 10px var(--cyan); }
.create-strip { grid-template-columns:1.5fr .8fr .8fr .7fr auto; padding:18px; margin-bottom:18px; background:#111832; border-left:2px solid var(--cyan); align-items:end; }.switch { display:flex; flex-direction:row; align-items:center; padding:13px 0; gap:9px; white-space:nowrap; }.switch input { width:auto; accent-color:var(--cyan); }.room-list,.data-list { display:grid; gap:1px; background:#273254; }.room,.data-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:19px 20px; background:#10162c; }.room:hover { background:#141c36; }.room-top { display:flex; gap:12px; align-items:center; }.room b,.data-row b { font-size:14px; }.room p,.data-row p { color:var(--muted); margin:7px 0 0; font-size:11px; }.tag { color:var(--pink); border:1px solid #8b315f; padding:3px 6px; font-size:10px; }.empty { padding:48px 25px; background:#10162c; color:var(--muted); font-size:13px; text-align:center; }
.waiting-banner { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 20px; background:#11233a; border:1px solid #267b8a; margin-bottom:18px; }.waiting-banner b { color:var(--cyan); font-size:13px; }.waiting-banner p { color:var(--muted); font-size:11px; margin:7px 0 0; }
.game-head { border-bottom:1px solid #243054; }.countdown { color:var(--pink); font-size:39px; font-weight:900; letter-spacing:-.08em; }.forge-layout,.runner { display:grid; grid-template-columns:minmax(310px,1fr) 270px; gap:50px; padding-top:35px; align-items:start; }.maze-shell { width:min(100%, 610px); justify-self:center; }.maze-label { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-bottom:9px; }.zoom-hint { color:var(--muted); font-size:10px; margin:0 0 8px; display:flex; justify-content:space-between; }.zoom-hint b { color:var(--cyan); }.maze-viewport { width:100%; max-height:610px; overflow:auto; border:1px solid #3a4b73; background:#091021; box-shadow:0 0 50px #1ac8c516; }.maze-grid { display:grid; min-width:0; aspect-ratio:1; background:#091021; }.cell { border:0; min-width:0; min-height:0; position:relative; }.editor .cell { outline:1px solid #101a35; }.cell.path { background:#111c34; }.cell.wall { background:#050813; }.editor .cell.path:hover { background:#315e70; }.cell.entry { background:var(--cyan)!important; box-shadow:inset 0 0 0 4px #c2ffff,0 0 15px var(--cyan); z-index:1; }.cell.exit { background:var(--pink)!important; box-shadow:inset 0 0 0 4px #ffc6e1,0 0 15px var(--pink); z-index:1; }.legend { display:flex; flex-wrap:wrap; gap:15px; margin-top:13px; color:var(--muted); font-size:10px; }.legend span::before { content:""; display:inline-block; width:8px; height:8px; margin-right:5px; }.legend-entry::before { background:var(--cyan); }.legend-path::before { background:#111c34; }.legend-wall::before { background:#050813; border:1px solid #344369; }.legend-exit::before { background:var(--pink); }.forge-side { padding-top:25px; }.big-number { font-size:45px; color:var(--cyan); font-weight:900; letter-spacing:-.1em; }.big-number small { color:var(--muted); font-size:20px; }.forge-side p { color:var(--muted); font-size:12px; line-height:1.75; }.forge-side .primary { width:100%; margin-top:12px; }.leave { display:block; margin:20px auto; color:var(--danger); }
.segment-track { display:flex; align-items:center; gap:8px; }.segment-track b { border:1px solid #3a4b73; color:var(--muted); font-size:12px; padding:7px; }.segment-track b.active { border-color:var(--cyan); color:var(--cyan); }.segment-track i { width:22px; height:1px; background:#3a4b73; }.runner-grid .cell { outline:1px solid #0c1327; }.runner-grid .cell.hidden { background:#02030a; outline-color:#02030a; }.runner-grid .cell.near.path { background:#1b3850; }.cell.player::after { content:""; position:absolute; inset:22%; background:#fff; border-radius:50%; box-shadow:0 0 12px 5px var(--cyan),0 0 25px var(--cyan); z-index:2; }.controls { margin:18px auto; display:grid; justify-content:center; gap:5px; }.controls div { display:flex; gap:5px; }.controls button { background:#121c35; border:1px solid #384a77; color:#d4eaff; padding:8px; font-size:10px; }.position { border-left:2px solid var(--pink); padding:10px; color:#b7c8e9; font-size:12px; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #26345b; margin-bottom:42px; }.metrics>div { padding:23px; border-right:1px solid #26345b; }.metrics>div:last-child { border:0; }.metrics b { display:block; font-size:35px; color:var(--cyan); letter-spacing:-.1em; }.metrics span { color:var(--muted); font-size:11px; }.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }.section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }.section-title h2 { font-size:15px; }.section-title span { color:var(--muted); font-size:10px; }.data-row code { color:var(--cyan); font-size:11px; }.data-row { min-height:79px; }.admin-head .primary { white-space:nowrap; }
.registration-state.registered { color:var(--cyan); }.registration-state.unregistered { color:var(--pink); }.access-state { color:#b8d7a7; }.access-state.disabled { color:var(--danger); }
.page-actions { display:flex; align-items:center; gap:14px; }.result-screen { min-height:calc(100dvh - 80px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; max-width:720px; }.result-screen h1 { margin:18px 0; font-size:clamp(37px,5vw,64px); letter-spacing:-.07em; line-height:1; }.result-screen>p:not(.eyebrow) { color:var(--muted); font-size:14px; }.result-mark { color:var(--pink); font-size:15px; border-left:4px solid var(--pink); padding:9px 14px; background:#2a1024; }.result-mark.win { color:var(--cyan); border-color:var(--cyan); background:#092a30; }.result-route { display:flex; align-items:center; gap:10px; color:#c7d5ee; font-size:11px; margin:34px 0; }.result-route i { width:50px; height:1px; background:linear-gradient(90deg,var(--cyan),var(--pink)); }.result-screen .primary { min-width:200px; }
#toast { position:fixed; z-index:20; bottom:28px; left:50%; transform:translate(-50%,20px); opacity:0; background:#17213b; border:1px solid var(--cyan); color:#eaffff; font-size:12px; padding:12px 18px; transition:.25s; pointer-events:none; box-shadow:6px 6px 0 #07121f; } #toast.show { opacity:1; transform:translate(-50%,0); } #toast.error { border-color:var(--danger); } #toast.success { border-color:var(--pink); }
@media (prefers-reduced-motion: no-preference) { .ambient-a { animation:drift 11s ease-in-out infinite alternate; }.ambient-b { animation:drift 14s ease-in-out infinite alternate-reverse; } @keyframes drift { to { transform:translate(6rem,4rem) scale(1.15); } } }
@media (max-width:760px) { #app { padding:0 17px 35px; }.topbar { min-height:68px; }.launch { grid-template-columns:1fr; gap:35px; padding:54px 0; }.launch h1 { font-size:50px; }.route-diagram { margin-top:34px; gap:7px; font-size:9px; }.route-diagram em { width:30px; }.page-head,.game-head { padding:40px 0 25px; align-items:flex-start; flex-direction:column; }.page-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }.page-actions button { padding-inline:8px; }.content-grid,.forge-layout,.runner,.admin-grid { grid-template-columns:1fr; gap:24px; }.create-strip { grid-template-columns:1fr 1fr; }.create-strip .switch { grid-column:1/2; }.create-strip .primary { grid-column:2/3; }.protocol { display:none; }.room { align-items:flex-start; flex-direction:column; }.room .secondary { width:100%; }.forge-side { padding-top:0; }.maze-shell { width:100%; }.countdown { font-size:32px; }.metrics { grid-template-columns:1fr; }.metrics>div { border-right:0; border-bottom:1px solid #26345b; }.metrics>div:last-child { border-bottom:0; }.data-row { align-items:flex-start; }.admin-head .primary { width:100%; }.auth-panel { padding:21px; } }