:root{
  --void:#080a1f;
  --void-2:#0d1230;
  --nebula:#151a44;
  --nebula-2:#1c2354;
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.09);
  --glass-border:rgba(255,255,255,.13);
  --starlight:#f4c95d;
  --starlight-2:#ffe19a;
  --aurora:#5fe8c6;
  --aurora-2:#3fc7ce;
  --violet:#8c7cf0;
  --comet:#ff6b6b;
  --text:#eef1ff;
  --text-dim:rgba(238,241,255,.62);
  --text-faint:rgba(238,241,255,.38);
  --radius:20px;
  --radius-sm:12px;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  background:radial-gradient(120% 100% at 20% 0%,var(--nebula-2) 0%,var(--void-2) 45%,var(--void) 100%);
  color:var(--text);
  overflow:hidden;
  width:100vw;height:100vh;
  display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;
}
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}

#game-container{
  position:relative;
  width:100%;height:100%;
  max-width:460px;max-height:860px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:18px 18px 22px;
  border-radius:28px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
  margin:10px;
  z-index:1;
}

/* ---------- Header ---------- */
.header{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;z-index:5;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{width:34px;height:34px;flex-shrink:0;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.28rem;letter-spacing:.2px;}
.brand-name span{color:var(--starlight);}

.header-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.chip{
  display:flex;align-items:center;gap:6px;
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  padding:7px 12px;border-radius:100px;
  backdrop-filter:blur(10px);
  flex-shrink:0;
}
.chip i{font-size:.85rem;color:var(--starlight);}
.chip .label{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}
.chip .value{font-family:var(--font-mono);font-weight:700;font-size:1rem;}
.chip.timer-warning{border-color:var(--comet);}
.chip.timer-warning .value{color:var(--comet);}
.icon-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--glass-strong);border:1px solid var(--glass-border);
  color:var(--text);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.2s var(--ease);flex-shrink:0;font-size:.95rem;
}
.icon-btn:active{transform:scale(.9);}
.icon-btn:hover{color:var(--starlight);border-color:var(--starlight);}

.timer-container.hidden{display:none;}

/* ---------- Board ---------- */
#board-wrap{position:relative;width:100%;display:flex;justify-content:center;margin:8px 0;flex:1;align-items:center;min-height:0;}
#game-board{
  position:relative;
  width:min(90vw,400px);
  height:min(90vw,400px);
  max-height:100%;
  border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--glass-border);
  overflow:hidden;
  box-shadow:inset 0 0 60px rgba(0,0,0,.3), 0 18px 40px rgba(0,0,0,.35);
  transition:transform .6s var(--ease);
}
#board-svg{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;}
#board-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;}

.dot{
  position:absolute;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);
  cursor:pointer;z-index:10;
  font-family:var(--font-mono);font-weight:700;font-size:1.05rem;color:var(--void);
  background:radial-gradient(circle at 32% 28%,var(--starlight-2),var(--starlight) 65%);
  box-shadow:0 0 0 3px rgba(255,255,255,.14),0 4px 14px rgba(0,0,0,.35),0 0 18px rgba(244,201,93,.55);
  transition:transform .18s var(--ease),background .25s,box-shadow .25s,opacity .3s;
}
.dot.connected{
  background:radial-gradient(circle at 32% 28%,#bafff0,var(--aurora) 65%);
  box-shadow:0 0 0 3px rgba(255,255,255,.14),0 4px 14px rgba(0,0,0,.35),0 0 18px rgba(95,232,198,.6);
}
.dot.current-target{animation:targetPulse 1.4s infinite;}
.dot.wrong{background:radial-gradient(circle at 32% 28%,#ffb3b3,var(--comet) 65%);animation:shake .4s;}
.dot.hinted{animation:hintFlash 1.1s ease;}
.dot.faded{opacity:.14;}
.dot.teleporting{animation:teleportPop .5s var(--ease);}

@keyframes targetPulse{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.14),0 4px 14px rgba(0,0,0,.35),0 0 14px rgba(244,201,93,.5);}50%{box-shadow:0 0 0 7px rgba(244,201,93,.18),0 4px 18px rgba(0,0,0,.4),0 0 26px rgba(244,201,93,.85);}}
@keyframes hintFlash{0%,100%{opacity:1;}50%{opacity:1;transform:translate(-50%,-50%) scale(1.28);}}
@keyframes teleportPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0;}60%{transform:translate(-50%,-50%) scale(1.3);opacity:1;}100%{transform:translate(-50%,-50%) scale(1);}}
@keyframes shake{0%,100%{transform:translate(-50%,-50%);}25%{transform:translate(-58%,-50%);}75%{transform:translate(-42%,-50%);}}

.obstacle{
  position:absolute;border-radius:8px;z-index:6;
  background:repeating-linear-gradient(135deg,rgba(255,107,107,.28),rgba(255,107,107,.28) 6px,rgba(255,107,107,.14) 6px,rgba(255,107,107,.14) 12px);
  border:1px solid rgba(255,107,107,.55);
  box-shadow:0 0 16px rgba(255,107,107,.35);
}
.zone{
  position:absolute;border-radius:10px;z-index:5;
  background:rgba(95,232,198,.08);
  border:1.5px dashed rgba(95,232,198,.55);
}
.zone.collected{background:rgba(95,232,198,.02);border-color:rgba(95,232,198,.15);}
.zone.teleporter{
  background:radial-gradient(circle,rgba(140,124,240,.35),rgba(140,124,240,.05));
  border:1.5px dashed rgba(140,124,240,.75);
  animation:portalSpin 3s linear infinite;
}
@keyframes portalSpin{0%{filter:hue-rotate(0deg);}100%{filter:hue-rotate(40deg);}}

.floating-text{
  position:absolute;z-index:30;font-family:var(--font-mono);font-weight:700;
  color:var(--aurora);pointer-events:none;font-size:.85rem;
  animation:floatUp 1s ease-out forwards;
}
@keyframes floatUp{0%{opacity:1;transform:translate(-50%,-50%);}100%{opacity:0;transform:translate(-50%,-160%);}}

/* ---------- Controls ---------- */
.controls{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.pill{
  display:flex;align-items:center;gap:8px;background:var(--glass-strong);
  border:1px solid var(--glass-border);padding:9px 16px;border-radius:100px;backdrop-filter:blur(10px);
}
.pill .label{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}
.pill .value{font-family:var(--font-mono);font-weight:700;font-size:1.1rem;}

.hint-button{
  position:relative;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(145deg,var(--starlight-2),var(--starlight));
  color:var(--void);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(244,201,93,.35);transition:transform .15s var(--ease);
}
.hint-button:active{transform:scale(.9);}
.hint-button:disabled{filter:grayscale(.7);opacity:.5;cursor:not-allowed;}
.hint-count{
  position:absolute;top:-4px;right:-4px;background:var(--comet);color:#fff;
  border-radius:50%;width:21px;height:21px;font-size:.72rem;display:flex;align-items:center;justify-content:center;font-weight:700;
}
.pause-fab{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--glass-border);cursor:pointer;
  background:var(--glass-strong);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.pause-fab:active{transform:scale(.9);}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-display);
  background:linear-gradient(135deg,var(--aurora),var(--violet));
  color:#081018;border:none;padding:15px 30px;margin:7px;border-radius:100px;
  font-size:1rem;font-weight:700;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s;
  box-shadow:0 8px 22px rgba(95,232,198,.28);
  min-width:200px;display:flex;align-items:center;justify-content:center;gap:10px;
}
.btn:active{transform:scale(.96);}
.btn.btn-outline{
  background:transparent;color:var(--text);border:1.5px solid var(--glass-border);box-shadow:none;
}
.btn.btn-outline:hover{border-color:var(--starlight);color:var(--starlight);}
.btn.btn-warn{background:linear-gradient(135deg,var(--starlight),#ff9f5b);color:#2a1600;}
.btn.btn-danger{background:linear-gradient(135deg,var(--comet),#ff9d9d);color:#2b0000;}
.btn.btn-small{min-width:0;padding:10px 18px;font-size:.85rem;margin:4px;}

/* ---------- Screens ---------- */
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(6,8,22,.92);backdrop-filter:blur(6px);padding:24px;text-align:center;z-index:100;
  border-radius:28px;transition:opacity .35s var(--ease);
  overflow-y:auto;
}
.screen.hidden{opacity:0;pointer-events:none;}
.screen h1,.screen h2{font-family:var(--font-display);}

/* signature constellation logo */
.logo-mark{width:120px;height:120px;margin-bottom:6px;}
.logo-mark .star{animation:twinkleStar 2.6s ease-in-out infinite;transform-origin:center;}
.logo-mark .star:nth-child(2){animation-delay:.4s;}
.logo-mark .star:nth-child(3){animation-delay:.8s;}
.logo-mark .link{stroke-dasharray:60;stroke-dashoffset:60;animation:drawLink 2.6s ease-in-out infinite;}
@keyframes twinkleStar{0%,100%{opacity:.55;r:3;}50%{opacity:1;r:4.6;}}
@keyframes drawLink{0%{stroke-dashoffset:60;}45%,100%{stroke-dashoffset:0;}}

#main-menu h1{
  font-size:2.5rem;margin-bottom:6px;
  background:linear-gradient(90deg,var(--starlight),var(--aurora));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
#main-menu .tagline{font-size:.95rem;color:var(--text-dim);margin-bottom:22px;max-width:340px;line-height:1.55;}

.game-stats{display:flex;justify-content:space-around;width:100%;max-width:340px;margin:6px 0 18px;}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:2px;}
.stat-value{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;color:var(--starlight);}
.stat-label{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}

.footer{margin-top:16px;font-size:.78rem;color:var(--text-faint);}

/* Level selection */
.level-selection-container{max-height:56vh;overflow-y:auto;padding:6px;margin:14px 0;width:100%;max-width:380px;}
#level-selection{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;}
.level-btn{
  aspect-ratio:1;border-radius:14px;background:var(--glass-strong);
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
  border:2px solid transparent;position:relative;transition:transform .15s var(--ease);gap:1px;
}
.level-btn:active{transform:scale(.93);}
.level-btn.completed{border-color:var(--aurora);background:rgba(95,232,198,.14);}
.level-btn.current{border-color:var(--starlight);background:rgba(244,201,93,.16);}
.level-btn.locked{opacity:.35;cursor:not-allowed;}
.level-number{font-family:var(--font-mono);font-size:1.05rem;font-weight:700;}
.level-stars{font-size:.62rem;color:var(--starlight);letter-spacing:1px;min-height:10px;}
.diff-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:6px;right:6px;}
.diff-training{background:var(--aurora);}
.diff-focus{background:var(--starlight);}
.diff-rush{background:#ff9f5b;}
.diff-chaos{background:var(--comet);}
.diff-mastery{background:var(--violet);}
.diff-finale{background:#ff5ecb;}

.legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:.68rem;color:var(--text-dim);margin-top:4px;}
.legend span{display:flex;align-items:center;gap:4px;}
.legend i{width:7px;height:7px;border-radius:50%;display:inline-block;}

/* Stars */
.stars{display:flex;margin:14px 0;gap:8px;}
.star-icon{font-size:2.6rem;color:rgba(255,255,255,.14);transition:color .4s,transform .4s;}
.star-icon.filled{color:var(--starlight);text-shadow:0 0 16px rgba(244,201,93,.7);animation:starPop .5s var(--ease);}
@keyframes starPop{0%{transform:scale(0);}70%{transform:scale(1.3);}100%{transform:scale(1);}}
.completion-text{font-size:1rem;color:var(--text-dim);margin:4px 0;}
.completion-text b{color:var(--text);font-family:var(--font-mono);}

/* Tutorial */
.tutorial-content{max-width:380px;background:var(--glass);padding:22px;border-radius:var(--radius);border:1px solid var(--glass-border);text-align:left;}
.tutorial-step{display:flex;gap:14px;margin-bottom:16px;align-items:flex-start;}
.tutorial-step:last-child{margin-bottom:0;}
.step-number{
  background:linear-gradient(135deg,var(--aurora),var(--violet));color:#08101a;
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-weight:700;font-family:var(--font-mono);font-size:.9rem;
}
.step-text{line-height:1.5;font-size:.92rem;color:var(--text-dim);}
.step-text b{color:var(--text);}

/* Settings */
.settings-list{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;margin:16px 0;}
.settings-row{
  display:flex;justify-content:space-between;align-items:center;background:var(--glass);
  border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:14px 16px;
}
.settings-row .settings-label{display:flex;align-items:center;gap:10px;font-size:.92rem;}
.switch{width:46px;height:26px;border-radius:100px;background:rgba(255,255,255,.15);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s;}
.switch.on{background:linear-gradient(135deg,var(--aurora),var(--violet));}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s var(--ease);}
.switch.on::after{transform:translateX(20px);}

.segmented{display:flex;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);border-radius:100px;padding:4px;gap:4px;}
.speed-btn{
  flex:1;border:none;background:transparent;color:var(--text-dim);font-family:var(--font-body);font-weight:600;
  font-size:.85rem;padding:9px 0;border-radius:100px;cursor:pointer;transition:.2s var(--ease);
}
.speed-btn.active{background:linear-gradient(135deg,var(--aurora),var(--violet));color:#08101a;}

/* Loading */
#loading-screen{background:radial-gradient(120% 120% at 30% 10%,var(--nebula-2),var(--void));z-index:200;}
.loading-bar-container{width:78%;max-width:280px;height:6px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden;margin-top:22px;}
.loading-bar{height:100%;background:linear-gradient(90deg,var(--starlight),var(--aurora));width:0%;border-radius:6px;transition:width .2s var(--ease);}

/* Level Transition */
.level-transition{
  position:absolute;inset:0;background:rgba(6,8,22,.94);display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:150;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
  border-radius:28px;
}
.level-transition.active{opacity:1;pointer-events:all;}
.transition-text{font-family:var(--font-display);font-size:2.1rem;margin-bottom:18px;background:linear-gradient(90deg,var(--starlight),var(--aurora));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.transition-sub{font-size:.85rem;color:var(--text-dim);margin-top:-10px;margin-bottom:6px;}

/* Toast */
#toast{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  background:rgba(10,12,32,.92);border:1px solid var(--glass-border);color:var(--text);
  padding:10px 18px;border-radius:100px;font-size:.85rem;z-index:300;opacity:0;transition:opacity .3s,transform .3s;
  pointer-events:none;white-space:nowrap;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

@media (max-width:400px){
  .brand-name{font-size:1.1rem;}
  #main-menu h1{font-size:2rem;}
  .btn{padding:13px 22px;font-size:.92rem;min-width:170px;}
  .level-btn{border-radius:11px;}
}
@media (max-height:680px){
  #game-container{padding:12px 14px 16px;}
  #main-menu h1{font-size:2rem;}
}