:root {
  color-scheme: dark;
  font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  background: #050b14;
}

* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
button, a { font:inherit; }
button { touch-action:manipulation; }
body { color:#f4fbff; background:#050b14; }

.maze-app { position:relative; width:100%; height:100dvh; overflow:hidden; background:radial-gradient(circle at 50% 45%,#163450,#07121f 58%,#030810); }
#rift-world { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; touch-action:none; }
.screen-vignette { position:absolute; z-index:2; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,transparent 43%,rgba(0,4,11,.26) 70%,rgba(0,2,8,.77) 100%),linear-gradient(180deg,rgba(2,7,15,.35),transparent 22% 73%,rgba(2,6,13,.45)); }
.screen-vignette::after { content:""; position:absolute; inset:0; opacity:.18; background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(157,237,255,.055) 4px); mix-blend-mode:screen; }

.dust { position:absolute; z-index:3; inset:0; overflow:hidden; pointer-events:none; }
.dust i { position:absolute; width:3px; height:3px; border-radius:50%; background:#8cffe4; box-shadow:0 0 10px 3px rgba(77,239,213,.48); animation:dust-drift 9s linear infinite; }
.dust i:nth-child(1){left:12%;top:74%;animation-delay:-2s}.dust i:nth-child(2){left:28%;top:33%;animation-delay:-7s}.dust i:nth-child(3){left:49%;top:82%;animation-delay:-4s}.dust i:nth-child(4){left:72%;top:27%;animation-delay:-6s}.dust i:nth-child(5){left:86%;top:67%;animation-delay:-1s}.dust i:nth-child(6){left:61%;top:48%;animation-delay:-8s}
@keyframes dust-drift { 0%{opacity:0;transform:translateY(45px)} 25%{opacity:.72} 75%{opacity:.25} 100%{opacity:0;transform:translate(24px,-120px)} }

.maze-header { position:absolute; z-index:20; top:0; right:0; left:0; display:grid; min-height:76px; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left)); border-bottom:1px solid rgba(98,224,222,.2); background:linear-gradient(180deg,rgba(3,9,19,.94),rgba(5,15,28,.78)); box-shadow:0 18px 42px rgba(0,0,0,.34); backdrop-filter:blur(14px); }
.maze-brand { display:inline-flex; width:max-content; align-items:center; gap:11px; color:#fff; text-decoration:none; }
.maze-brand>span { display:grid; width:48px; height:48px; place-items:center; border:2px solid #ffed94; border-radius:15px; color:#242e5e; background:linear-gradient(145deg,#fff39b,#e8a940); box-shadow:inset 0 -7px rgba(138,65,16,.22),0 8px 24px rgba(0,0,0,.32); font-size:25px; font-weight:1000; }
.maze-brand strong { display:flex; flex-direction:column; font-size:19px; line-height:1; }
.maze-brand small { margin-top:6px; color:#79f5dc; font-size:8px; letter-spacing:.16em; }
.level-chip { display:inline-flex; min-width:260px; align-items:center; justify-content:center; gap:11px; padding:9px 18px; border:1px solid rgba(76,235,213,.38); border-radius:18px; background:linear-gradient(145deg,rgba(10,63,76,.82),rgba(10,31,61,.78)); box-shadow:0 0 28px rgba(38,224,196,.09); }
.level-chip i { width:13px; height:13px; border-radius:3px; background:#60f4d3; box-shadow:0 0 17px #44e8cb; transform:rotate(45deg); }
.level-chip span { display:flex; flex-direction:column; }
.level-chip small { color:#84e8d5; font-size:8px; font-weight:1000; letter-spacing:.15em; }
.level-chip strong { margin-top:2px; font-size:13px; }
.header-actions { display:flex; justify-content:flex-end; gap:9px; }
.header-actions button { min-width:88px; min-height:46px; border:1px solid rgba(169,221,238,.23); border-radius:15px; color:#ecfbff; background:rgba(17,45,70,.76); font-size:11px; font-weight:900; cursor:pointer; }
.header-actions button span { margin-right:5px; color:#79f5dc; font-size:17px; }

.mission-hud { position:absolute; z-index:15; top:96px; left:max(20px,env(safe-area-inset-left)); width:min(340px,calc(100vw - 40px)); padding:14px 16px; border:1px solid rgba(105,219,213,.28); border-radius:20px; background:linear-gradient(145deg,rgba(4,18,32,.86),rgba(9,35,52,.76)); box-shadow:0 16px 44px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(13px); }
.mission-kicker { color:#70eacf; font-size:8px; font-weight:1000; letter-spacing:.17em; }
.mission-hud>strong { display:block; margin-top:5px; font-size:15px; }
.rune-meter { display:flex; align-items:center; gap:8px; margin-top:11px; }
.rune-meter i { width:24px; height:24px; border:1px solid rgba(115,239,214,.28); border-radius:7px; background:rgba(21,75,83,.32); transform:rotate(45deg) scale(.7); transition:.4s ease; }
.rune-meter i.is-lit { border-color:#d8ff9f; background:linear-gradient(145deg,#eaff9e,#53e5c0); box-shadow:0 0 18px rgba(78,246,204,.76); }
.rune-meter b { margin-left:auto; color:#d7e7f2; font-size:9px; letter-spacing:.1em; }
.rune-meter b span { color:#fff48e; font-size:16px; }

.mini-map { position:absolute; z-index:15; top:96px; right:max(20px,env(safe-area-inset-right)); width:218px; padding:11px 13px 13px; border:1px solid rgba(103,224,219,.3); border-radius:20px; background:rgba(3,15,28,.84); box-shadow:0 18px 45px rgba(0,0,0,.34); backdrop-filter:blur(12px); transition:.25s ease; }
.mini-map[hidden] { display:none; }
.mini-map>div { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.mini-map strong { color:#7cf5dc; font-size:8px; letter-spacing:.14em; }
.mini-map small { color:#8fa9bd; font-size:7px; }
#maze-map { display:block; width:190px; height:190px; border:1px solid rgba(120,238,220,.2); border-radius:12px; background:#04101c; image-rendering:auto; }

.nearby-prompt { position:absolute; z-index:16; top:50%; left:50%; display:grid; min-width:240px; grid-template-columns:42px 1fr; transform:translate(-50%,-50%); padding:11px 15px; border:1px solid rgba(184,255,219,.55); border-radius:17px; color:#fff; background:rgba(5,34,47,.88); box-shadow:0 0 40px rgba(65,240,199,.32); pointer-events:none; }
.nearby-prompt[hidden]{display:none}.nearby-prompt>span{grid-row:1/3;align-self:center;color:#baff96;font-size:27px}.nearby-prompt strong{font-size:12px}.nearby-prompt small{color:#a7cbcf;font-size:9px}

.touch-controls { position:absolute; z-index:18; right:0; bottom:max(16px,env(safe-area-inset-bottom)); left:0; display:flex; align-items:flex-end; justify-content:center; gap:24px; padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left)); pointer-events:none; }
.move-cluster { position:relative; display:grid; width:258px; height:146px; grid-template-columns:repeat(3,1fr); grid-template-rows:82px 56px; gap:7px; pointer-events:auto; }
.move-cluster button { border:1px solid rgba(150,237,229,.34); border-radius:21px; color:#efffff; background:linear-gradient(180deg,rgba(20,73,92,.9),rgba(8,38,66,.92)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 9px 24px rgba(0,0,0,.3); cursor:pointer; user-select:none; -webkit-user-select:none; }
.move-cluster button.is-held { border-color:#dfff9b; background:linear-gradient(180deg,#2b9a93,#155a75); box-shadow:0 0 26px rgba(75,241,204,.45),inset 0 2px rgba(255,255,255,.18); transform:translateY(2px); }
.move-cluster button span { display:block; font-size:25px; font-weight:1000; }
.move-cluster button small { display:block; margin-top:2px; color:#b7d4dc; font-size:8px; font-weight:900; letter-spacing:.1em; }
.move-forward { grid-column:2; grid-row:1; }
.turn-left { grid-column:1; grid-row:1; }
.turn-right { grid-column:3; grid-row:1; }
.move-back { grid-column:2; grid-row:2; border-radius:18px!important; }
.move-back span { font-size:18px!important; }
.look-tip { display:flex; min-width:210px; flex-direction:column; align-items:center; padding:12px 17px; border:1px solid rgba(145,215,231,.2); border-radius:18px; background:rgba(4,17,31,.7); backdrop-filter:blur(10px); pointer-events:none; }
.look-tip>span { font-size:25px; }.look-tip strong{margin-top:2px;font-size:10px}.look-tip small{margin-top:3px;color:#95b0c3;font-size:8px}

.start-screen,.learning-gate,.pause-screen,.escape-screen { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background:rgba(2,7,14,.79); backdrop-filter:blur(13px); }
.start-screen[hidden],.learning-gate[hidden],.pause-screen[hidden],.escape-screen[hidden] { display:none; }
.start-screen { grid-template-columns:minmax(0,1.08fr) minmax(390px,.72fr); padding:clamp(22px,4vw,60px); background:linear-gradient(90deg,rgba(1,5,12,.1),rgba(1,6,13,.86) 64%),#020812; }
.start-art { position:absolute; z-index:-1; inset:0 34% 0 0; background:linear-gradient(90deg,transparent 54%,#020812 100%),url("assets/maze/rift-portal-hero.webp") center/cover no-repeat; filter:saturate(1.13) contrast(1.06); }
.start-copy { grid-column:2; display:flex; width:min(520px,100%); flex-direction:column; align-items:flex-start; padding:clamp(26px,3.5vw,48px); border:1px solid rgba(92,231,213,.28); border-radius:32px; background:linear-gradient(145deg,rgba(7,28,43,.94),rgba(4,13,28,.97)); box-shadow:0 34px 90px rgba(0,0,0,.54),inset 0 1px rgba(255,255,255,.06); }
.demo-label { color:#73f3d8; font-size:9px; font-weight:1000; letter-spacing:.19em; }
.start-copy h1 { margin:10px 0 12px; font-size:clamp(48px,5vw,76px); line-height:.85; letter-spacing:-.065em; }
.start-copy h1 em { color:#aaffd8; font-style:normal; text-shadow:0 0 27px rgba(73,244,204,.28); }
.start-copy>p { max-width:440px; margin:0 0 18px; color:#bdd0dd; font-size:14px; font-weight:700; line-height:1.5; }
.start-copy>.easy-safety { display:flex; max-width:none; align-items:center; gap:9px; margin:-7px 0 16px; color:#8ff6dc; font-size:10px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.easy-safety span { color:#f3dd83; }
.start-copy ol { display:grid; width:100%; gap:8px; margin:0 0 20px; padding:0; list-style:none; }
.start-copy li { display:flex; align-items:center; gap:11px; padding:9px 11px; border:1px solid rgba(136,206,213,.15); border-radius:15px; background:rgba(19,51,68,.42); }
.start-copy li>b { display:grid; width:32px; height:32px; flex:0 0 auto; place-items:center; border-radius:10px; color:#0b3c50; background:linear-gradient(145deg,#eaff9a,#5fe8c7); }
.start-copy li span { display:flex; flex-direction:column; }.start-copy li strong{font-size:11px}.start-copy li small{margin-top:2px;color:#9eb6c4;font-size:9px}
.start-copy>button,.gate-card button,.pause-screen button,.escape-screen button { min-height:56px; border:0; border-radius:17px; color:#0b3549; background:linear-gradient(145deg,#efff9e,#5ee7c6 67%,#45bfe2); box-shadow:inset 0 2px rgba(255,255,255,.58),0 7px 0 #176a79,0 16px 35px rgba(0,0,0,.3); font-weight:1000; cursor:pointer; }
.start-copy>button { width:100%; font-size:14px; }.start-copy>button span{float:right;font-size:22px}.control-note{align-self:center;margin-top:15px;color:#87a4b6;font-size:9px}.start-copy>a,.pause-screen a,.escape-screen a{align-self:center;margin-top:15px;color:#a9c8d6;font-size:10px;font-weight:850}

.gate-card,.pause-screen>div,.escape-screen>div { display:flex; width:min(520px,100%); flex-direction:column; align-items:center; padding:clamp(27px,5vw,48px); border:1px solid rgba(107,246,216,.44); border-radius:32px; text-align:center; background:linear-gradient(145deg,#0d3a4c,#07172e 70%); box-shadow:0 0 70px rgba(48,230,198,.2),0 32px 90px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.08); }
.gate-rune,.escape-mark { display:grid; width:78px; height:78px; place-items:center; border:1px solid #dfff9a; border-radius:23px; color:#ecff9d; background:linear-gradient(145deg,#1e8e8b,#0a4b6d); box-shadow:0 0 42px rgba(77,242,205,.58),inset 0 0 22px rgba(189,255,228,.22); font-size:39px; transform:rotate(45deg); }
.gate-rune { line-height:1; }.gate-rune::first-letter{transform:rotate(-45deg)}
.gate-card>small,.pause-screen small,.escape-screen small { margin-top:22px; color:#79f4d7; font-size:9px; font-weight:1000; letter-spacing:.17em; }
.gate-card h2,.pause-screen h2,.escape-screen h2 { margin:7px 0 6px; font-size:clamp(31px,6vw,48px); }
.gate-card>p,.escape-screen p { margin:6px 0 22px; color:#e8f7fa; font-size:clamp(18px,3.5vw,25px); font-weight:900; }
.answer-grid { display:grid; width:100%; grid-template-columns:repeat(3,1fr); gap:10px; }
.answer-grid button { min-width:0; font-size:20px; }
.answer-grid button.is-wrong { color:#fff; background:linear-gradient(145deg,#c64b64,#7f2948); box-shadow:inset 0 2px rgba(255,255,255,.25),0 7px 0 #4e1b35; }
.gate-card output { min-height:20px; margin-top:19px; color:#a7c5d0; font-size:11px; font-weight:800; }
.pause-screen button,.escape-screen button { width:100%; margin-top:15px; }.pause-screen button.secondary{color:#d9edf3;border:1px solid rgba(141,216,224,.25);background:#173b53;box-shadow:none}.escape-stars{margin:0 0 10px;color:#fff083;font-size:32px;letter-spacing:.16em;text-shadow:0 0 20px rgba(255,223,75,.6)}

.webgl-warning { position:fixed; z-index:200; inset:50% auto auto 50%; width:min(520px,calc(100% - 30px)); transform:translate(-50%,-50%); padding:25px; border-radius:22px; color:#fff; text-align:center; background:#752c42; }
body>.ck-settings-launcher { top:102px; right:auto; bottom:auto; left:380px; }

@media (max-width:820px),(pointer:coarse) {
  .maze-header { min-height:64px; grid-template-columns:1fr auto; padding:9px 10px; }
  .maze-brand>span{width:43px;height:43px}.maze-brand strong{font-size:16px}.maze-brand small{font-size:7px}
  .level-chip { min-width:0; padding:7px 10px; }.level-chip strong{font-size:10px}.level-chip small{font-size:7px}.level-chip i{width:9px;height:9px}
  .header-actions { position:absolute; top:72px; right:10px; }.header-actions button{min-width:54px;min-height:46px;padding:0 9px;font-size:0}.header-actions button span{margin:0;font-size:18px}
  .mission-hud { top:72px; left:10px; width:min(285px,calc(100vw - 90px)); padding:10px 12px; }.mission-hud>strong{font-size:12px}.rune-meter{margin-top:7px}.rune-meter i{width:19px;height:19px}
  .mini-map { top:128px; right:10px; width:154px; padding:7px; }.mini-map>div{margin-bottom:4px}.mini-map small{display:none}#maze-map{width:138px;height:138px}
  .touch-controls { bottom:max(10px,env(safe-area-inset-bottom)); justify-content:space-between; gap:10px; padding-inline:10px; }.move-cluster{width:232px;height:128px;grid-template-rows:72px 49px}.look-tip{min-width:150px;padding:10px}.look-tip strong{font-size:9px}
  .start-screen { display:grid; grid-template-columns:1fr; padding:12px; background:linear-gradient(180deg,rgba(1,5,12,.25),#020812 48%); overflow:auto; }
  .start-art { inset:0 0 45% 0; background:linear-gradient(180deg,transparent 38%,#020812 100%),url("assets/maze/rift-portal-hero.webp") center/cover no-repeat; }
  .start-copy { grid-column:1; align-self:end; width:min(600px,100%); padding:22px; border-radius:26px; }.start-copy h1{font-size:clamp(42px,10vw,62px)}.start-copy>p{font-size:12px}.start-copy ol{grid-template-columns:repeat(3,1fr);gap:6px}.start-copy li{align-items:flex-start;padding:8px;gap:7px}.start-copy li>b{width:27px;height:27px}.start-copy li small{display:none}.control-note{font-size:8px}
  body>.ck-settings-launcher { top:auto; right:10px; bottom:154px; left:auto; }
}

@media (max-width:520px) {
  .maze-brand small{display:none}.level-chip small{display:none}.level-chip{max-width:142px}.mission-hud{width:230px}.mission-kicker{font-size:7px}
  .mini-map{top:126px;width:122px}.mini-map strong{font-size:7px}#maze-map{width:106px;height:106px}
  .touch-controls{align-items:flex-end}.move-cluster{width:218px}.look-tip{min-width:0;width:118px;padding:8px}.look-tip>span{font-size:19px}.look-tip small{display:none}
  .start-copy{padding:18px}.start-copy h1{font-size:42px}.start-copy ol{grid-template-columns:1fr}.start-copy li small{display:block}.start-copy li{padding:6px 8px}.control-note{display:none}
  .answer-grid{gap:7px}.answer-grid button{font-size:17px}.gate-card{padding:25px 17px}
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition-duration:.001ms!important} }