:root{--ink:#e8e4ff;--dim:#8a86b8;--line:rgba(180,170,255,.16);
    --panel:rgba(14,12,28,.62);--accent:#ffcf8a;--accent2:#7fb4ff;--earth:#6fd6a8;}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%;overflow:hidden;background:#04030a;color:var(--ink);
    font-family:"JetBrains Mono",monospace}
  #stage{position:fixed;inset:0} canvas{display:block;touch-action:none}
  #stage::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
    background:radial-gradient(120% 90% at 50% 45%,transparent 42%,rgba(0,0,0,.55) 100%)}
  .ui{position:fixed;z-index:5;pointer-events:none}.ui *{pointer-events:auto}
  #title{top:env(safe-area-inset-top,16px);left:20px;max-width:min(72vw,420px);transition:opacity .6s}
  #title .sub{color:var(--dim);font-size:11px;letter-spacing:3px;text-transform:uppercase}
  #title h1{font-family:"Cormorant",serif;font-weight:500;font-style:italic;margin:12px 0 2px;
    font-size:clamp(24px,6vw,42px);line-height:.95}
  #title .read{color:var(--dim);font-size:10.5px;margin-top:8px;line-height:1.7}
  #title .read b{color:var(--accent);font-weight:500}
  #deckStack{position:fixed;right:16px;
    top:max(env(safe-area-inset-top,0px) + 14px, 14px);z-index:6;
    display:flex;flex-direction:row-reverse;align-items:center;gap:12px;pointer-events:none}
  .pod{
    width:clamp(180px,52vw,224px);aspect-ratio:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:var(--panel);border:1px solid var(--line);border-radius:50%;
    padding:16px;backdrop-filter:blur(14px) saturate(1.2);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:0 18px 60px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05);
    pointer-events:auto;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    overflow:visible}
  .pod *{pointer-events:auto}
  /* circular layout: dissolve rows so icons tile evenly inside the circle */
  .pod>div{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:7px;width:100%}
  .pod .row{display:contents}
  .pod .seg{display:contents}
  .pod .slide{flex:0 0 100%;min-width:0;gap:8px}
  .pod .btn{height:38px;min-width:38px;font-size:16px;padding:0 7px}
  .pod .btn.hero,.pod .btn.up{flex:0 0 auto;height:38px}
  .pod .seg button{flex:0 0 auto;min-width:38px;min-height:38px;padding:0 6px;font-size:15px}
  .pod .val{font-size:10px;min-width:30px;text-align:center}
  /* per-level disc sizing (progressive enhancement via :has) */
  #deck:has(#galaxyCtrls:not(.hide)),
  #deck:has(#streetCtrls:not(.hide)),
  #deck:has(#cityCtrls:not(.hide)),
  #deck:has(#solarCtrls:not(.hide)){width:clamp(156px,46vw,184px)}
  #deck:has(#earthCtrls:not(.hide)){width:clamp(166px,48vw,196px)}
  #deck:has(#surfaceCtrls:not(.hide)){width:clamp(132px,40vw,152px)}
  #deck2{width:clamp(150px,44vw,176px)}
  #deck2:has(#cityCtrls2:not(.hide)){width:clamp(156px,46vw,184px)}
  #deck2:has(#solarCtrls2:not(.hide)){width:clamp(132px,42vw,156px)}
  #deck2:not(:has(>div:not(.hide))){display:none}
  /* ----- cinematic auto-tour ----- */
  #tourBar{position:fixed;left:16px;bottom:max(env(safe-area-inset-bottom,0px) + 14px, 14px);z-index:62;
    display:flex;gap:8px;pointer-events:none}
  #tourBar button{pointer-events:auto;font-family:inherit;cursor:pointer;border-radius:30px;
    border:1px solid var(--line);background:var(--panel);color:var(--ink);
    backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
    box-shadow:0 8px 30px rgba(0,0,0,.5);padding:11px 18px;font-size:13px;letter-spacing:.5px;font-weight:600;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:.2s}
  #tourBar button:hover{border-color:rgba(255,120,200,.5)}
  #tourBar #tourSnd, #tourBar #eosBoardBtn{padding:11px 13px;font-size:15px}
  #tourBar button.on{background:linear-gradient(180deg,#ffd0ec,#ff79c6 60%,#d23f9b);color:#23071a;border-color:transparent}
  #tourCap{position:fixed;left:50%;bottom:17%;transform:translate(-50%,12px);z-index:62;
    width:min(86vw,820px);text-align:center;pointer-events:none;
    opacity:0;transition:opacity .6s ease, transform .6s ease;font-family:Georgia,'Times New Roman',serif}
  #tourCap.show{opacity:1;transform:translate(-50%,0)}
  #tourCap .tc-title{font-size:clamp(26px,5vw,46px);font-weight:700;color:#fff;
    text-shadow:0 0 26px rgba(255,90,180,.55),0 2px 16px rgba(0,0,0,.85)}
  #tourCap .tc-sub{margin-top:8px;font-style:italic;font-size:clamp(14px,2.4vw,21px);color:#ecccef;
    text-shadow:0 2px 12px rgba(0,0,0,.8)}
  body.touring #deckStack,body.touring #joystick{opacity:0;pointer-events:none;transition:opacity .5s ease}
  .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.row+.row{margin-top:11px}
  .label{display:none}
  .seg{display:flex;gap:6px;flex:1}
  .seg button{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--dim);
    border-radius:10px;padding:9px 4px;font-family:inherit;font-size:10px;letter-spacing:.5px;
    cursor:pointer;transition:.22s;text-transform:uppercase;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px}
  .seg button:hover{color:var(--ink);border-color:rgba(180,170,255,.4)}
  .seg button.on{color:#0a0814;background:linear-gradient(180deg,var(--accent),#e8a85a);
    border-color:transparent;font-weight:700;box-shadow:0 4px 16px rgba(255,180,100,.28)}
  .btn{height:44px;min-width:44px;border:1px solid var(--line);background:rgba(255,255,255,.03);
    color:var(--ink);border-radius:11px;font-family:inherit;font-size:17px;cursor:pointer;
    transition:.16s;display:grid;place-items:center;line-height:1;padding:0 8px;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .btn:hover{border-color:var(--accent2);color:var(--accent2);background:rgba(127,180,255,.08)}
  .btn:active,.btn:focus{transform:scale(.92);outline:none}
  .btn.wide{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;padding:0 12px}
  .btn.hero{flex:1;height:48px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;
    background:linear-gradient(180deg,rgba(127,180,255,.18),rgba(127,180,255,.06));
    border-color:rgba(127,180,255,.5);color:#cfe2ff}
  .btn.hero:hover{background:linear-gradient(180deg,rgba(127,180,255,.3),rgba(127,180,255,.12))}
  .btn.up{background:linear-gradient(180deg,rgba(255,207,138,.16),rgba(255,207,138,.05));
    border-color:rgba(255,207,138,.5);color:var(--accent)}
  .pod .btn.hero,.pod .btn.up{font-size:18px;letter-spacing:0}
  .slide{flex:1;display:flex;align-items:center;gap:10px}
  input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:3px;
    background:linear-gradient(90deg,var(--accent2),var(--accent));outline:none;cursor:pointer;min-height:24px}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
    background:#fff;box-shadow:0 0 10px rgba(255,255,255,.6);touch-action:manipulation}
  input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;
    background:#fff;box-shadow:0 0 10px rgba(255,255,255,.6)}
  .val{font-size:11px;color:var(--accent);min-width:36px;text-align:right}
  /* POI info card — shown when tapping a location marker */
  #poiCard{position:fixed;z-index:20;background:rgba(14,12,28,.92);border:1px solid rgba(255,207,138,.4);
    border-radius:14px;padding:14px 18px 12px;min-width:160px;max-width:220px;text-align:center;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 8px 40px rgba(0,0,0,.6);pointer-events:auto;touch-action:manipulation;
    transition:opacity .2s,transform .2s;transform-origin:bottom center}
  #poiCard.hide{opacity:0;pointer-events:none;transform:scale(.85) translateY(10px)}
  #poiCard .poi-icon{font-size:30px;margin-bottom:6px}
  #poiCard .poi-name{color:#fff;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
  #poiCard .poi-type{color:var(--dim);font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-top:4px}
  #poiCard .poi-close{position:absolute;top:8px;right:10px;color:var(--dim);font-size:14px;cursor:pointer;
    padding:4px;touch-action:manipulation}
  #readout{position:fixed;z-index:5;left:50%;transform:translateX(-50%);bottom:max(env(safe-area-inset-bottom,0px) + 12px, 12px);text-align:center;
    color:var(--dim);font-size:10px;letter-spacing:1px;line-height:1.7;opacity:.85}
  #readout b{color:var(--accent2);font-weight:500}
  #flash{position:fixed;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none;transition:opacity .5s}
  .hide{display:none!important}
  #joystick{position:fixed;left:24px;bottom:calc(env(safe-area-inset-bottom,0px) + 130px);
    width:104px;height:104px;z-index:6;pointer-events:auto}
  #joypad{width:100%;height:100%;border-radius:50%;background:rgba(14,12,28,.55);
    border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    position:relative;touch-action:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
  #joyknob{width:42px;height:42px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%, #fff, #cfd6e6);
    box-shadow:0 4px 12px rgba(0,0,0,.45);position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);pointer-events:none}
  #joylabel{position:absolute;left:0;right:0;bottom:-18px;text-align:center;
    color:var(--dim);font-size:9px;letter-spacing:2px;text-transform:uppercase}

#exploreModal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(4,6,12,0.68);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
#exploreModal .ebox{width:90vw;max-width:540px;max-height:82vh;overflow-y:auto;background:linear-gradient(160deg,rgba(22,28,44,0.97),rgba(10,14,24,0.97));border:1px solid rgba(127,200,255,0.35);border-radius:18px;padding:16px 16px 20px;box-shadow:0 24px 70px rgba(0,0,0,0.6);}
#exploreModal .ehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;color:#dce8f5;font:600 14px/1 system-ui,-apple-system,Arial,sans-serif;letter-spacing:3px;}
#exploreModal .eclose{cursor:pointer;border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.06);color:#fff;border-radius:50%;width:30px;height:30px;font-size:14px;line-height:28px;text-align:center;padding:0;}
#explorePalette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
#explorePalette button{aspect-ratio:1;font-size:21px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:12px;color:#fff;cursor:pointer;padding:0;transition:background .15s,transform .1s,border-color .15s;}
#explorePalette button:hover{background:rgba(127,200,255,0.2);transform:translateY(-1px);border-color:rgba(127,200,255,0.55);}
#explorePalette button.on{background:rgba(127,255,170,0.2);border-color:rgba(127,255,170,0.55);}
@media(max-width:480px){#explorePalette{grid-template-columns:repeat(5,1fr);gap:6px;}#explorePalette button{font-size:19px;}}
#schoolModal{position:fixed;inset:0;z-index:81;display:none;align-items:center;justify-content:center;background:rgba(4,6,12,0.7);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
#schoolModal .sbox{width:90vw;max-width:430px;background:linear-gradient(160deg,rgba(22,28,44,0.97),rgba(10,14,24,0.97));border:1px solid rgba(127,200,255,0.35);border-radius:18px;padding:18px 18px 24px;box-shadow:0 24px 70px rgba(0,0,0,0.6);text-align:center;}
#schoolModal .shead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#dce8f5;font:600 14px/1 system-ui,-apple-system,Arial,sans-serif;letter-spacing:3px;}
#schoolModal .sclose{cursor:pointer;border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.06);color:#fff;border-radius:50%;width:30px;height:30px;font-size:14px;line-height:28px;text-align:center;padding:0;}
#schoolModal p{color:#aab8c8;font:400 14px/1.5 system-ui,Arial,sans-serif;margin:2px 0 18px;}
#schoolModal a.slink{display:inline-block;text-decoration:none;color:#06223a;font:700 15px/1 system-ui,Arial,sans-serif;letter-spacing:.4px;background:linear-gradient(180deg,#bfe0ff,#7fc8ff);border:1px solid rgba(127,200,255,0.6);border-radius:12px;padding:13px 22px;box-shadow:0 6px 20px rgba(127,200,255,0.25);transition:filter .12s,transform .1s;}
#schoolModal a.slink:hover{filter:brightness(1.08);transform:translateY(-1px);}
/* ===== Universe intro overlay (Echoes of Universe) ===== */
#universe{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 38%, #1d0b33 0%, #0c0618 55%, #04030d 100%);opacity:1;transition:opacity 1.2s ease;overflow:hidden;}
#universe.hidden{opacity:0;pointer-events:none;}
#uniCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
#uniWrap{position:relative;z-index:2;text-align:center;padding:24px;max-width:92vw;font-family:Georgia,'Times New Roman',ui-serif,serif;color:#fdeaf6;text-shadow:0 0 24px rgba(255,90,180,0.45);transition:opacity .5s ease;animation:uniIn 1.7s cubic-bezier(.2,.7,.2,1) both;}
#uniWrap .kick{font:600 11px/1.4 system-ui,Arial,sans-serif;letter-spacing:4px;color:#e6a9d8;opacity:.85;margin-bottom:14px;text-transform:uppercase;}
#uniWrap h1{margin:0;font-weight:700;font-size:clamp(30px,8vw,68px);letter-spacing:2px;line-height:1.05;background:linear-gradient(180deg,#ffffff 0%,#ffc7e9 55%,#ff79c6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
#uniWrap .dia{margin:0 .3em;background:none;-webkit-text-fill-color:#ff8fd0;color:#ff8fd0;text-shadow:0 0 18px rgba(255,140,210,0.85);}
#uniWrap .tag{margin:14px 0 0;font-style:italic;font-size:clamp(14px,3.4vw,22px);color:#ecd6f7;text-shadow:0 0 18px rgba(180,90,240,0.5);}
#uniWrap .domains{margin:18px auto 0;max-width:660px;font:500 11px/1.7 system-ui,Arial,sans-serif;letter-spacing:1.5px;color:#cdb0e8;opacity:.82;}
#uniEnter{margin-top:30px;display:inline-block;cursor:pointer;border:none;font:700 16px/1 system-ui,Arial,sans-serif;letter-spacing:.6px;color:#2a0820;background:linear-gradient(180deg,#ffd0ec,#ff79c6 60%,#d23f9b);padding:16px 30px;border-radius:40px;box-shadow:0 8px 30px rgba(255,90,180,0.45),0 0 0 1px rgba(255,200,235,0.5) inset;transition:transform .12s ease,box-shadow .2s ease;}
#uniEnter:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 40px rgba(255,90,180,0.62),0 0 0 1px rgba(255,220,245,0.7) inset;}
#uniFoot{position:absolute;bottom:18px;left:0;right:0;z-index:2;text-align:center;font:500 11px/1 system-ui,Arial,sans-serif;letter-spacing:2px;color:#b98fd0;opacity:.7;transition:opacity .5s ease;}
@media(max-width:480px){#uniWrap .domains{display:none;}}
@keyframes uniIn{0%{opacity:0;transform:translateY(12px) scale(.985);}100%{opacity:1;transform:none;}}

  #eosDashModal{position:fixed;inset:0;z-index:90;display:none;background:#05070d}
  #eosDashModal.show{display:block}
  #eosDashModal iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#05070d}
  #eosDashClose{position:fixed;top:14px;right:16px;z-index:91;width:42px;height:42px;border-radius:50%;
    background:rgba(8,12,20,0.72);border:1px solid rgba(127,255,212,0.55);color:#eafff7;
    font:600 18px/1 system-ui,-apple-system,Arial,sans-serif;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,0.45)}
  #eosDashClose:hover{border-color:rgba(127,255,212,0.9)}