/* COLOR CREW UI: layout, controls, themed stages, responsive rules and path map. */
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:#faf4e5;
  color:#42535b;
  font-family:Arial,sans-serif;
  min-height:100svh;
  background-image:radial-gradient(ellipse at 15% 0%,#fffdf4,transparent 70%)
}
button{
  cursor:pointer;
  font:inherit;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent
}
button:focus-visible{
  outline:3px solid #16b8d7;
  outline-offset:4px
}
button:disabled{
  cursor:default
}
header{
  height:75px;
  max-width:1210px;
  margin:auto;
  padding:0 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  direction:ltr
}
.logo{
  display:flex;
  align-items:center;
  font-size:30px;
  font-weight:900;
  letter-spacing:-1.8px;
  text-shadow:0 2px #00000012;
  gap:8px
}
.logo .crew{
  letter-spacing:-1.4px;
  font-weight:900;
  color:#687787
}
.logo small{
  font-size:8px;
  letter-spacing:1.5px;
  color:#a5a799;
  font-weight:400;
  align-self:end;
  margin-bottom:4px;
  margin-left:7px;
  text-shadow:none
}
.header-actions{
  display:flex;
  gap:7px
}
.icon{
  width:36px;
  height:36px;
  border-radius:13px;
  border:1px solid #e5dfd2;
  background:linear-gradient(#fffef7,#f0e9db);
  box-shadow:0 3px 0 #ded6c8;
  color:#7d8790;
  font-size:18px
}
.icon.active{
  background:#e4f4f0;
  border-color:#92d5cb;
  color:#348f93
}
.shell{
  max-width:1210px;
  padding:0 24px 25px;
  margin:auto
}
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 315px;
  gap:26px;
  direction:ltr;
  align-items:center
}
.playarea{
  direction:ltr;
  width:min(100%,calc((100svh - 130px)*.85));
  margin:auto
}
.levelbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 9px 8px;
  font-size:10px;
  color:#a3aaa7
}
.levelbar b{
  color:#697b83;
  font-size:13px;
  font-weight:500
}
.levelbar .badge{
  font-size:9px;
  letter-spacing:1px;
  background:#e8e8dd;
  padding:5px 10px;
  border-radius:20px;
  color:#929e9b
}
.stage{
  position:relative;
  aspect-ratio:.85;
  border-radius:23px;
  overflow:hidden;
  background:#fbefce;
  box-shadow:0 22px 60px #a7926630,inset 0 1px #fff;
  container-type:inline-size
}
canvas{
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  touch-action:none
}
.stagehud{
  position:absolute;
  top:12px;
  left:13px;
  right:13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
  direction:ltr
}
.stat{
  padding:7px 11px;
  border:1px solid #fff6;
  background:#ffffffad;
  backdrop-filter:blur(5px);
  border-radius:20px;
  font-size:10px;
  color:#9b9b88;
  font-variant-numeric:tabular-nums
}
.stat b{
  color:#6e817f
}
.bin-label{
  position:absolute;
  pointer-events:none;
  transform:translate(-50%,-50%);
  width:22%;
  text-align:center;
  font-size:clamp(11px,2.8cqw,18px);
  font-weight:800;
  color:#3a5263;
  letter-spacing:-.5px;
  text-shadow:0 1px #fff4;
  font-variant-numeric:tabular-nums
}
.bin-label.empty{
  font-weight:400;
  font-size:clamp(9px,2cqw,12px);
  color:#a6a997
}
.bin-label.complete{
  color:#2e9671
}
.stagehint{
  font-size:10px;
  text-align:center;
  color:#a3aaa0;
  margin:10px 0 0;
  line-height:1.6
}
.progress{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:4px;
  background:#e4decf
}
.progress span{
  height:100%;
  display:block;
  width:0;
  transition:width .2s;
  background:linear-gradient(90deg,#0bbcec,#a5d83b,#ffcc18)
}
.overlay{
  position:absolute;
  inset:0;
  background:#faf3e5ed;
  backdrop-filter:blur(6px);
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:25px
}
.overlay[hidden]{
  display:none
}
.overlay .symbol{
  font-size:52px;
  color:#f4bf28
}
.overlay h2{
  font-size:30px;
  letter-spacing:-1px;
  color:#5d7480;
  margin:13px 0
}
.overlay p{
  font-size:13px;
  line-height:1.8;
  color:#99a297;
  max-width:280px;
  margin:0 auto
}
.primary{
  border:1px solid #18aac6;
  background:linear-gradient(#27d0ed,#0bb4db);
  color:#fff;
  font-size:13px;
  font-weight:bold;
  border-radius:14px;
  padding:13px 25px;
  box-shadow:0 4px 0 #078ba9;
  margin-top:20px;
  text-shadow:0 1px #00769155
}
.secondary{
  display:block;
  margin:18px auto 0;
  background:none;
  border:0;
  text-decoration:underline;
  color:#a2aa9f;
  font-size:11px
}
.panel{
  direction:ltr;
  padding:24px 19px 20px;
  border:1px solid #e9e2d3;
  background:linear-gradient(160deg,#fffffabf,#f1ecdf70);
  border-radius:25px;
  box-shadow:0 18px 35px #b9ac9212
}
.eyebrow{
  font-size:8px;
  letter-spacing:2px;
  color:#aeb6a6;
  text-align:center;
  direction:ltr
}
.panel h1{
  font-size:26px;
  color:#6e8189;
  font-weight:500;
  text-align:center;
  margin:11px 0 10px;
  letter-spacing:-.7px
}
.intro{
  font-size:12px;
  line-height:1.8;
  color:#9aa797;
  text-align:center;
  margin:0 0 20px
}
.queue-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  color:#a7b09e;
  margin:0 4px 10px
}
.queue-head b{
  color:#879c94;
  font-size:11px;
  font-weight:500
}
.supply{
  display:grid;
  grid-template-columns:repeat(var(--columns,3),minmax(0,1fr));
  gap:9px;
  align-items:start;
  min-height:162px;
  direction:ltr
}
.supply[data-count="1"]{
  grid-template-columns:minmax(0,130px);
  justify-content:center
}
.supply[data-count="2"]{
  grid-template-columns:repeat(2,minmax(0,125px));
  justify-content:center
}
.lane{
  min-width:0
}
.lane-top{
  display:flex;
  justify-content:space-between;
  font-size:8px;
  color:#b3b6a7;
  margin:0 4px 6px;
  direction:ltr
}
.pod{
  width:100%;
  border:1px solid color-mix(in srgb,var(--color),#fff 25%);
  border-radius:15px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--color),#fff 70%),color-mix(in srgb,var(--color),#fff 88%));
  padding:10px 3px 8px;
  box-shadow:0 5px 0 color-mix(in srgb,var(--color),#ddd 70%);
  display:flex;
  align-items:center;
  flex-direction:column;
  position:relative;
  transition:transform .15s,box-shadow .15s
}
.pod:hover:not(:disabled){
  transform:translateY(-4px);
  box-shadow:0 9px 0 color-mix(in srgb,var(--color),#ddd 70%),0 10px 17px #9f9a7e14
}
.pod:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 2px 0 color-mix(in srgb,var(--color),#ddd 70%)
}
.pod:disabled{
  opacity:.48;
  filter:saturate(.65)
}
.pod strong{
  font-size:22px;
  color:#59717e;
  text-shadow:0 1px #fff8;
  margin-top:5px
}
.pod small{
  font-size:8px;
  color:#91a196;
  margin-top:2px
}
.bot-icon{
  width:47px;
  height:47px;
  position:relative;
  filter:drop-shadow(0 4px 2px #0002);
  transform:rotate(-6deg)
}
.bot-head{
  position:absolute;
  left:6px;
  top:2px;
  width:35px;
  height:27px;
  background:var(--color);
  border-radius:12px 12px 9px 9px;
  box-shadow:inset 2px 3px 2px #fff5,inset -3px -3px 3px #0002
}
.bot-face{
  position:absolute;
  left:6px;
  top:10px;
  width:24px;
  height:12px;
  border-radius:6px;
  background:#243d54;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px
}
.bot-face i{
  width:4px;
  height:5px;
  border-radius:50%;
  background:#fff
}
.bot-body{
  position:absolute;
  left:12px;
  top:28px;
  width:25px;
  height:15px;
  background:var(--color);
  border-radius:6px;
  box-shadow:inset -3px -3px 3px #0002
}
.bot-body:before,.bot-body:after{
  content:'';
  position:absolute;
  bottom:-3px;
  width:7px;
  height:8px;
  background:#3c5364;
  border-radius:4px
}
.bot-body:before{
  left:-4px
}
.bot-body:after{
  right:-4px
}
.peeks{
  margin:9px 5px 0;
  display:flex;
  flex-direction:column;
  gap:4px
}
.peek{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  height:22px;
  border:1px solid #dfdfd04d;
  background:#efefe473;
  border-radius:6px;
  padding:0 7px;
  font-size:10px;
  color:#a0ad9d
}
.peek i{
  width:10px;
  height:10px;
  border-radius:3px;
  box-shadow:inset 0 1px #fff6
}
.peek small{
  font-size:7px;
  color:#b8bcae
}
.peek.far{
  opacity:.6;
  margin:0 5px
}
.empty-supply{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:130px;
  font-size:11px;
  color:#acb4a5;
  line-height:1.9;
  text-align:center
}
.status{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px 4px;
  font-size:12px;
  line-height:1.7;
  color:#8e9f94;
  margin:5px 0
}
.bridge{
  border:1px solid #e5c16c;
  background:linear-gradient(#fff0bb,#f8e4a7);
  border-radius:15px;
  box-shadow:0 4px 0 #dcc18b;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:10px;
  color:#967746
}
.bridge svg{
  width:41px;
  height:31px
}
.bridge b{
  font-size:13px;
  display:block;
  text-align:left
}
.bridge small{
  font-size:9px;
  display:block;
  margin-top:4px;
  color:#b39b6c;
  text-align:left
}
.bridge:disabled{
  opacity:.45;
  box-shadow:0 2px 0 #d4ccba;
  filter:saturate(.4)
}
.bridge.suggest{
  animation:bridgePulse 1.2s ease-in-out infinite alternate
}
.bridge.active{
  outline:2px solid #4dcfbc;
  outline-offset:3px
}
.bridge-controls{
  display:flex;
  gap:7px;
  margin-top:11px
}
.bridge-controls[hidden]{
  display:none
}
.bridge-controls button{
  border:1px solid #d3dacc;
  border-radius:10px;
  padding:9px;
  background:#f9fff4;
  color:#8e9e8b;
  font-size:11px;
  flex:1
}
.bridge-controls .confirm{
  color:#fff;
  border-color:#16bfa9;
  background:#2cc6b1
}
.bridge-controls .confirm:disabled{
  opacity:.4
}
.tools{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:19px
}
.tool{
  flex:1;
  border:1px solid #e2ded0;
  border-radius:11px;
  background:#fffdf5;
  padding:10px 4px;
  font-size:10px;
  color:#99a59a;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px
}
.tool span{
  font-size:16px;
  color:#a8b6b0
}
.tool:disabled{
  opacity:.4
}
.tool.active{
  background:#e6f5eb;
  border-color:#b0d5c5;
  color:#78a996
}
.footer{
  margin-top:18px;
  text-align:center;
  font-size:8px;
  color:#b7baab;
  line-height:1.8
}
.error{
  background:#fff9ef;
  padding:30px;
  text-align:center;
  color:#8c9c93;
  font-size:13px;
  line-height:1.9
}
.error[hidden]{
  display:none
}
@keyframes bridgePulse{
  to{
    box-shadow:0 0 0 4px #f5d67c44,0 5px 0 #dcc18b
  }
  
}
@media(max-width:800px){
  header{
    height:56px;
    padding:0 17px
  }
  .logo{
    font-size:25px;
    gap:6px
  }
  .logo small{
    font-size:6px;
    letter-spacing:1px;
    margin-left:3px
  }
  .icon{
    height:30px;
    width:30px;
    border-radius:11px;
    font-size:16px
  }
  .shell{
    padding:0 13px 20px;
    max-width:510px
  }
  .layout{
    display:block
  }
  .playarea{
    width:100%
  }
  .levelbar{
    margin-bottom:7px;
    font-size:9px
  }
  .levelbar b{
    font-size:11px
  }
  .stage{
    border-radius:21px;
    aspect-ratio:.9
  }
  .stagehint{
    font-size:9px;
    margin-top:7px
  }
  .panel{
    border:0;
    background:none;
    box-shadow:none;
    padding:15px 0 0
  }
  .eyebrow,.panel h1,.intro{
    display:none
  }
  .queue-head{
    margin-bottom:7px
  }
  .supply{
    min-height:112px;
    gap:10px
  }
  .pod{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    padding:7px 8px 6px 4px;
    min-height:66px
  }
  .bot-icon{
    grid-row:1/3;
    width:45px;
    height:45px;
    justify-self:center
  }
  .pod strong{
    font-size:22px;
    margin:0;
    align-self:end
  }
  .pod small{
    font-size:8px;
    align-self:start;
    margin-top:3px
  }
  .lane-top{
    margin-bottom:5px
  }
  .peeks{
    display:flex;
    flex-direction:row;
    gap:4px;
    margin:7px 4px 0
  }
  .peek{
    flex:1;
    justify-content:center;
    padding:0 3px;
    height:20px;
    font-size:9px
  }
  .peek small{
    display:none
  }
  .peek.far{
    margin:0
  }
  .status{
    min-height:43px;
    font-size:11px;
    padding:6px 5px;
    margin:2px 0
  }
  .bridge{
    padding:8px;
    gap:10px;
    border-radius:13px
  }
  .bridge svg{
    height:25px;
    width:35px
  }
  .bridge b{
    font-size:12px
  }
  .bridge small{
    font-size:8px;
    margin-top:3px
  }
  .bridge-controls{
    margin-top:9px
  }
  .tools{
    margin-top:13px;
    gap:9px
  }
  .tool{
    padding:8px 4px;
    font-size:10px
  }
  .footer{
    margin-top:12px
  }
  .stat{
    font-size:9px;
    padding:5px 9px
  }
  .stagehud{
    top:10px;
    right:10px;
    left:10px
  }
  .overlay h2{
    font-size:26px
  }
  .overlay p{
    font-size:12px
  }
  
}
@media(prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important
  }
  
}


body{
  background:#d7f2e8;
  background-image:radial-gradient(ellipse at 20% 0%,#f3ffe8,transparent 65%);
  color:#245164
}
.stage{
  background:#29586b;
  border-color:#91ccbf;
  box-shadow:0 14px 0 #afdbcb,0 24px 45px #24526525
}
.stagehint{
  color:#508d8b
}
.panel{
  background:#effff1;
  border-color:#b8d9be;
  box-shadow:0 8px 0 #acd5be
}
.status{
  color:#467b77
}
.intro{
  color:#638b79
}
.footer{
  color:#6f9a8d
}
.stat{
  background:#183c50db;
  color:#b2e7db;
  border-color:#629c9c
}
.stat b{
  color:#fff
}
.levelbar{
  color:#2b645e
}
.badge{
  color:#548a7c
}
.level-switch{
  display:flex;
  gap:8px;
  margin:16px 0 20px;
  direction:ltr
}
.level-switch button{
  flex:1;
  border:1px solid #c0dac8;
  border-radius:12px;
  background:#e0eee3;
  color:#66897e;
  padding:8px;
  font-weight:900;
  font-size:17px
}
.level-switch span{
  display:block;
  font-size:9px;
  font-weight:400;
  margin-top:4px
}
.level-switch .selected{
  color:#fff;
  background:linear-gradient(135deg,#28ba9d,#159da0);
  border-color:#21a493;
  box-shadow:0 3px 0 #14877e
}
.pod small{
  color:#527669
}
.pod strong{
  color:#294f66
}
.peek{
  color:#6a897e;
  background:#dceadc
}
.peek small{
  color:#89a392
}
.lane-top{
  color:#6f9989
}
.tool{
  color:#5c897c
}
.tool span{
  color:#419b8c
}
.bin-label{
  color:#163d56!important;
  font-weight:900;
  text-shadow:0 1px #fff
}
.bin-label.empty{
  color:#bcead8!important;
  text-shadow:none
}
.icon{
  background:linear-gradient(#f9fff1,#d8ead9);
  border-color:#a9ccba;
  box-shadow:0 3px 0 #99c8b2;
  color:#3b807c
}

.home-screen{
  position:fixed;
  inset:0;
  z-index:50;
  overflow:auto;
  background:radial-gradient(ellipse at 50% 10%,#bbf6e3 0%,#68d4c4 40%,#2f7c99 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 18px;
  isolation:isolate
}
.home-screen[hidden]{
  display:none
}
.home-screen:before{
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:60px 60px;
  transform:perspective(500px) rotateX(30deg) scale(1.3);
  z-index:-1
}
.home-content{
  width:min(720px,100%);
  text-align:center;
  position:relative
}
.home-logo{
  font-size:clamp(40px,7vw,68px);
  font-weight:1000;
  letter-spacing:-3px;
  color:#fff;
  text-shadow:0 5px 0 #287b91,0 8px 15px #184c7e30;
  direction:ltr
}
.home-logo span:nth-child(1){
  color:#fff173
}
.home-logo span:nth-child(2){
  color:#fff
}
.home-kicker{
  letter-spacing:3px;
  font-size:10px;
  color:#247789;
  font-weight:800;
  margin:13px 0
}
.hero-toy{
  height:220px;
  position:relative;
  width:280px;
  margin:0 auto;
  filter:drop-shadow(0 15px 10px #17466535)
}
.hero-toy .bot-icon{
  position:absolute;
  left:87px;
  top:65px;
  transform:scale(3.1);
  --color:#ffc82c;
  animation:heroBob 3s ease-in-out infinite
}
.hero-toy .bot-face i{
  animation:eyeBlink 5s infinite
}
.hero-toy .bot-head{
  animation:headLook 7s ease-in-out infinite;
  transform-origin:50% 80%
}
.hero-platform{
  position:absolute;
  left:45px;
  bottom:19px;
  width:190px;
  height:55px;
  border-radius:50%;
  background:#377e98;
  box-shadow:0 10px #236078,0 13px 0 3px #7de9c9,inset 0 0 0 3px #73d4c5
}
.orbit-cube{
  position:absolute;
  width:39px;
  height:39px;
  border-radius:11px;
  background:var(--c);
  box-shadow:inset 3px 4px 3px #ffffff70,inset -4px -5px 3px #0002,0 7px 0 #185e7620;
  animation:cubeFloat 3.8s ease-in-out infinite;
  transform:rotate(var(--r))
}
.orbit-cube.one{
  --c:#a056f8;
  --r:-14deg;
  left:27px;
  top:30px
}
.orbit-cube.two{
  --c:#fa68ae;
  --r:14deg;
  right:18px;
  top:66px;
  animation-delay:-1.3s
}
.orbit-cube.three{
  --c:#14beef;
  --r:-9deg;
  left:28px;
  bottom:23px;
  width:31px;
  height:31px;
  animation-delay:-2.5s
}
.hero-tag{
  position:absolute;
  right:2px;
  top:16px;
  background:#edfff1;
  border:2px solid #fff;
  border-radius:16px;
  padding:7px 12px;
  font-size:11px;
  color:#238c80;
  transform:rotate(8deg);
  box-shadow:0 4px #368c9b25;
  animation:tagRock 4s infinite
}
.home-content h1{
  font-size:clamp(23px,4vw,33px);
  color:#fff;
  margin:12px 0 9px;
  text-shadow:0 2px #307d9135
}
.home-sub{
  color:#dcfff0;
  font-size:13px;
  line-height:1.7;
  margin:0 auto 22px
}
.home-levels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
  max-width:580px;
  margin:auto
}
.home-level{
  border:2px solid #fff8;
  border-radius:22px;
  padding:18px 15px 16px;
  background:linear-gradient(145deg,#f2ffe9,#c5f2d4);
  color:#235e66;
  box-shadow:0 7px 0 #22758d,0 12px 20px #164c6c24;
  position:relative;
  transition:transform .2s
}
.home-level:hover{
  transform:translateY(-5px)
}
.home-level:active{
  transform:translateY(4px)
}
.home-level.hard{
  background:linear-gradient(145deg,#e5d4ff,#c2b3f4);
  color:#57438e
}
.level-num{
  font-size:42px;
  display:block;
  font-weight:1000;
  letter-spacing:-2px;
  line-height:1
}
.home-level b{
  font-size:17px;
  display:block;
  margin:8px 0
}
.home-level small{
  font-size:11px;
  line-height:1.7;
  display:block;
  opacity:.8
}
.home-level em{
  font-style:normal;
  display:inline-block;
  font-size:12px;
  font-weight:800;
  color:#fff;
  border-radius:20px;
  padding:7px 20px;
  background:#26b28f;
  box-shadow:0 3px 0 #138a77;
  margin-top:14px
}
.home-level.hard em{
  background:#9160df;
  box-shadow:0 3px 0 #7146bd
}
.home-note{
  font-size:10px;
  color:#c8eee8;
  margin:23px 0 0
}
.home-sparks{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1
}
.home-sparks i{
  position:absolute;
  border:1px solid #a9ffdc80;
  border-radius:15px;
  width:56px;
  height:56px;
  left:var(--x);
  top:var(--y);
  animation:sparkDrift 8s ease-in-out infinite;
  animation-delay:var(--d);
  transform:rotate(20deg)
}
@keyframes heroBob{
  0%,100%{
    transform:translateY(0) rotate(-4deg) scale(3.1)
  }
  50%{
    transform:translateY(-9px) rotate(3deg) scale(3.1)
  }
  
}
@keyframes headLook{
  0%,25%,100%{
    transform:rotate(0)
  }
  35%,50%{
    transform:rotate(-8deg)
  }
  65%,80%{
    transform:rotate(8deg)
  }
  
}
@keyframes eyeBlink{
  0%,45%,49%,100%{
    transform:scaleY(1)
  }
  47%{
    transform:scaleY(.12)
  }
  
}
@keyframes cubeFloat{
  50%{
    transform:translateY(-15px) rotate(9deg)
  }
  
}
@keyframes tagRock{
  50%{
    transform:rotate(2deg) translateY(-4px)
  }
  
}
@keyframes sparkDrift{
  50%{
    transform:translateY(-30px) rotate(40deg);
    opacity:.3
  }
  
}
@media(max-width:800px){
  .level-switch{
    margin:0 0 12px;
    gap:9px
  }
  .level-switch button{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
    font-size:15px;
    padding:6px
  }
  .level-switch span{
    margin:0
  }
  .home-screen{
    align-items:safe center
  }
  .hero-toy{
    height:190px
  }
  .home-level{
    padding:14px 9px
  }
  .home-level b{
    font-size:14px
  }
  .home-level small{
    font-size:10px
  }
  .home-sub{
    font-size:12px;
    margin-bottom:17px
  }
  .home-levels{
    gap:12px
  }
  .home-kicker{
    font-size:8px
  }
  .home-logo{
    font-size:43px
  }
  .level-num{
    font-size:35px
  }
  
}

@media(prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important
  }
  
}
.color-track{
  position:absolute;
  left:50%;
  top:46px;
  transform:translateX(-50%);
  display:flex;
  gap:5px;
  pointer-events:none;
  direction:ltr
}
.color-dot{
  width:11px;
  height:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  background:var(--color);
  border:1px solid #ffffff70;
  box-shadow:0 1px 3px #102c4930;
  font-size:8px;
  color:#fff;
  transition:transform .3s,opacity .3s
}
.color-dot.done{
  background:#23556d;
  opacity:.65;
  transform:scale(.85);
  border-color:#aefcda
}
@media(max-width:800px){
  .color-track{
    top:37px;
    gap:4px
  }
  .color-dot{
    width:9px;
    height:9px;
    font-size:6px
  }
  
}

.home-content{
  width:min(890px,100%)
}
.home-logo{
  font-size:clamp(38px,5vw,53px)
}
.home-kicker{
  margin:7px 0
}
.hero-toy{
  height:145px;
  transform:scale(.76);
  margin-top:-14px;
  margin-bottom:-17px
}
.home-content h1{
  font-size:26px;
  margin:6px 0
}
.home-sub{
  margin-bottom:12px;
  font-size:12px
}
.chapter-intro{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  margin:14px auto 20px;
  color:#e1fff4;
  font-size:11px
}
.chapter-intro button{
  background:linear-gradient(#fff29e,#ffd452);
  color:#6c642a;
  border:2px solid #fff7c4;
  border-radius:16px;
  padding:11px 24px;
  font-size:15px;
  font-weight:900;
  box-shadow:0 4px 0 #c5a850,0 7px 15px #1a687c20;
  transition:transform .2s
}
.chapter-intro button:hover{
  transform:translateY(-3px)
}
.home-levels{
  grid-template-columns:repeat(5,minmax(0,1fr));
  max-width:880px;
  gap:13px
}
.home-level{
  padding:33px 7px 12px;
  border-radius:18px;
  position:relative;
  min-height:177px
}
.home-level b{
  font-size:13px;
  margin:5px 0
}
.home-level small{
  font-size:8px;
  white-space:nowrap
}
.home-level em{
  font-size:10px;
  padding:7px 10px;
  margin-top:11px
}
.level-stamp{
  position:absolute;
  top:9px;
  right:11px;
  font-size:9px;
  font-weight:800;
  opacity:.65
}
.card-art{
  width:66px;
  height:66px;
  margin:auto;
  filter:drop-shadow(0 3px 1px #17374b25)
}
.card-art svg{
  width:100%;
  height:100%;
  overflow:visible
}
.chapter-1{
  background:linear-gradient(145deg,#ffe0df,#f5c3d5)
}
.chapter-2{
  background:linear-gradient(145deg,#ddfff1,#a8e9e1)
}
.chapter-3{
  background:linear-gradient(145deg,#ecdfff,#cdb7ee)
}
.chapter-4{
  background:linear-gradient(145deg,#dceeff,#a5c9eb)
}
.chapter-5{
  background:linear-gradient(145deg,#fff2c0,#eacb9b)
}
.home-level.finished{
  border-color:#d2ffe5;
  box-shadow:0 7px 0 #1b9a86,0 0 0 2px #b9ffe760
}
.home-level.finished .level-stamp{
  color:#147759;
  opacity:1
}
.home-note{
  margin-top:20px
}
.level-switch{
  gap:7px
}
.level-switch button{
  padding:8px 0;
  font-size:16px;
  position:relative
}
.level-switch .finished:after{
  content:'·';
  position:absolute;
  bottom:-6px;
  left:50%;
  color:#12a883;
  font-size:24px
}
.level-switch .selected{
  box-shadow:0 3px 0 #14877e
}
.supply[data-count="4"],.supply[data-count="5"]{
  gap:6px
}
.supply[data-count="4"] .pod,.supply[data-count="5"] .pod{
  padding:7px 2px 8px
}
.supply[data-count="4"] .bot-icon,.supply[data-count="5"] .bot-icon{
  transform:scale(.84) rotate(-6deg);
  height:43px
}
.supply[data-count="4"] .pod strong,.supply[data-count="5"] .pod strong{
  font-size:19px;
  margin-top:0
}
.supply[data-count="4"] .pod small,.supply[data-count="5"] .pod small{
  font-size:8px
}
.supply[data-count="4"] .lane-top,.supply[data-count="5"] .lane-top{
  font-size:7px;
  margin:0 1px 5px
}
.supply[data-count="5"] .peek{
  padding:0 3px
}
.supply[data-count="5"] .peek small{
  display:none
}
.supply[data-count="5"] .peeks{
  margin:7px 2px 0
}
.bin-label[hidden]{
  display:none
}
.stage[data-stations="5"] .bin-label{
  font-size:clamp(9px,2cqw,14px)
}
.stage[data-stations="4"] .bin-label{
  font-size:clamp(10px,2.3cqw,16px)
}
.intro{
  font-size:11px;
  line-height:1.7
}

@media(max-width:800px){
  .home-screen{
    padding:20px 15px
  }
  .home-content{
    max-width:520px
  }
  .home-levels{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px
  }
  .home-level:last-child{
    grid-column:1/-1;
    width:calc(50% - 6px);
    justify-self:center
  }
  .home-level{
    padding:29px 7px 11px;
    min-height:157px
  }
  .card-art{
    width:52px;
    height:52px
  }
  .home-level b{
    font-size:13px
  }
  .home-level small{
    font-size:9px
  }
  .home-level em{
    font-size:10px;
    padding:6px 14px;
    margin-top:8px
  }
  .home-logo{
    font-size:37px
  }
  .hero-toy{
    height:103px;
    transform:scale(.59);
    margin-top:-23px;
    margin-bottom:-30px
  }
  .hero-tag{
    font-size:10px
  }
  .home-content h1{
    font-size:23px;
    margin:1px 0 5px
  }
  .home-sub{
    font-size:11px
  }
  .home-kicker{
    font-size:8px
  }
  .chapter-intro{
    margin:11px 0 17px;
    font-size:10px;
    gap:12px
  }
  .chapter-intro button{
    font-size:13px;
    padding:9px 17px
  }
  .home-note{
    font-size:9px;
    margin:18px 0 0
  }
  .level-switch{
    margin:0 0 13px
  }
  .level-switch button{
    padding:6px;
    font-size:14px
  }
  .supply[data-count="4"] .pod,.supply[data-count="5"] .pod{
    display:flex;
    min-height:88px;
    flex-direction:column;
    justify-content:center;
    padding:4px 1px 7px
  }
  .supply[data-count="4"] .bot-icon,.supply[data-count="5"] .bot-icon{
    height:39px;
    flex-shrink:0;
    transform:scale(.76) rotate(-6deg)
  }
  .supply[data-count="4"] .pod small,.supply[data-count="5"] .pod small{
    margin-top:2px;
    font-size:7px
  }
  .supply[data-count="4"] .pod strong,.supply[data-count="5"] .pod strong{
    font-size:19px;
    margin:0
  }
  .supply[data-count="4"] .peeks,.supply[data-count="5"] .peeks{
    flex-direction:column;
    gap:3px;
    margin-top:6px
  }
  .supply[data-count="4"] .peek,.supply[data-count="5"] .peek{
    height:17px;
    flex-basis:17px
  }
  .supply[data-count="5"] .peek.far{
    margin:0 3px
  }
  .supply[data-count="5"] .peek i{
    height:8px;
    width:8px
  }
  .supply{
    min-height:128px
  }
  .lane-top{
    white-space:nowrap
  }
  
}

@media(prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important
  }
  
}

.pod .bot-head{
  animation:queueLook 5.1s ease-in-out infinite;
  animation-delay:var(--delay,0s)
}
.pod .bot-face i{
  animation:eyeBlink 4.3s infinite;
  animation-delay:var(--delay,0s)
}
@keyframes queueLook{
  0%,60%,100%{
    transform:rotate(0) translateY(0)
  }
  20%,35%{
    transform:rotate(-5deg) translateY(-2px)
  }
  80%{
    transform:rotate(4deg) translateY(-1px)
  }
  
}
@media(prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important
  }
  
}
.home-level small{
  font-size:8px;
  white-space:normal
}
.pod small{
  line-height:1.2
}
.lane-top{
  direction:ltr
}
.bin-label{
  direction:ltr
}
.chapter-intro{
  direction:ltr
}
.intro{
  font-size:11px
}
.status{
  min-height:47px
}
.footer{
  margin-top:13px
}
.level-stamp{
  right:auto;
  left:11px
}
@media(max-width:800px){
  .home-level small{
    font-size:8px
  }
  .status{
    min-height:36px
  }
  .home-sub{
    font-size:11px
  }
  
}
.stage.final-sweep .progress span{
  background:linear-gradient(90deg,#44d8ad,#ffe282);
  box-shadow:0 0 12px #ffe88b55
}
.stage.final-sweep .stat{
  border-color:#f4e4a5
}
.badge{
  white-space:nowrap
}
.home-sub{
  line-height:1.6
}
@media(prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important
  }
  
}

body{
  background:#102639;
  background-image:radial-gradient(ellipse at 12% 0%,#22565e66,transparent 55%),radial-gradient(ellipse at 95% 70%,#40377355,transparent 60%);
  color:#d7eaf4;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
.logo .crew{
  color:#e1f3ff
}
.logo small{
  color:#82b7c6
}
.icon{
  background:linear-gradient(#24475b,#163247);
  border-color:#3c6e80;
  color:#a5f3ee;
  box-shadow:0 3px 0 #081b2c,inset 0 1px #9ee9f61a
}
.icon.active{
  background:#206878;
  color:#d7ffff
}
.stage{
  border:1px solid #4a8399;
  box-shadow:0 5px 0 #0a1a2d,0 0 0 5px #2c5e741c,0 20px 55px #020b1840
}
.levelbar b{
  color:#c8e8f0
}
.levelbar .badge{
  color:#99b9ce;
  background:#18364a;
  border:1px solid #36586c;
  padding:4px 8px;
  border-radius:7px
}
.stagehint{
  color:#7da9ba
}
.panel{
  background:linear-gradient(150deg,#1d3b50f2,#122c41f2);
  border:1px solid #3d647a;
  box-shadow:0 6px 0 #091b2a,inset 0 1px #a6dfec12;
  border-radius:23px
}
.eyebrow{
  color:#6be4e0;
  letter-spacing:2.1px
}
.panel h1{
  color:#e8f6ff
}
.intro{
  color:#91b3c6
}
.queue-head b{
  color:#d2e9f3
}
.queue-head span{
  color:#88abbf
}
.level-switch button{
  background:#17354a;
  border-color:#33596d;
  color:#91b6cb;
  box-shadow:inset 0 1px #82d5e511
}
.level-switch .selected{
  background:linear-gradient(135deg,#25bdc2,#176b9f);
  color:#efffff;
  border-color:#5bded9;
  box-shadow:0 3px 0 #0b3e62,0 0 13px #44d9d921
}
.level-switch .finished:after{
  color:#85f5ce
}
.lane-top{
  color:#95bbcd
}
.pod{
  border:1px solid color-mix(in srgb,var(--color),#fff 32%);
  background:linear-gradient(145deg,color-mix(in srgb,var(--color),#fff 78%),color-mix(in srgb,var(--color),#c7e6ed 57%));
  box-shadow:0 4px 0 color-mix(in srgb,var(--color),#0c314b 56%),inset 0 1px #fff9;
  border-radius:16px
}
.pod:hover:not(:disabled){
  box-shadow:0 8px 0 color-mix(in srgb,var(--color),#0c314b 56%),0 0 20px color-mix(in srgb,var(--color),transparent 72%)
}
.pod strong{
  color:#153a55
}
.pod small{
  color:#36596c
}
.peek{
  border-color:#386174;
  background:#193d52;
  color:#b7d7df;
  border-radius:7px
}
.peek small{
  color:#739aae
}
.peeks{
  gap:5px
}
.status{
  color:#a2c1d2
}
.empty-supply{
  color:#92bacc
}
.bridge{
  background:linear-gradient(#57482d,#3e3529);
  border-color:#a98c4d;
  color:#fff0b8;
  box-shadow:0 4px 0 #201f26,inset 0 1px #ffe6a922
}
.bridge small{
  color:#d5c399
}
.bridge.suggest{
  animation:futureBridge 1.4s ease-in-out infinite alternate
}
.bridge-controls button{
  background:#17394f;
  border-color:#41687c;
  color:#c3e6ee
}
.bridge-controls .confirm{
  background:#20aeb5;
  border-color:#72e6dd;
  color:#fff
}
.tool{
  background:linear-gradient(#21445a,#18344a);
  border-color:#3d6377;
  color:#b2d3e2;
  box-shadow:0 2px 0 #0a1d2e
}
.tool span{
  color:#7be2df
}
.tool.active{
  background:#1c666b;
  border-color:#73d8c9;
  color:#e3fff7
}
.footer{
  color:#6e98ad
}
.bin-label:not(.empty){
  color:#efffff!important;
  text-shadow:0 0 4px #9ffeff45;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-weight:800;
  letter-spacing:0
}
.bin-label.empty{
  display:none
}
.overlay{
  background:radial-gradient(ellipse at 50% 30%,#254c61f5,#0a2234f5);
  color:#e2f3fc;
  border:1px solid #5ea2b6
}
.overlay h2{
  color:#e6fcff
}
.overlay p{
  color:#a3c8d9
}
.overlay .secondary{
  color:#93b9ca
}
.home-screen{
  background:radial-gradient(ellipse at 50% 0%,#268f9580 0%,#244369 43%,#101b35 100%)
}
.home-kicker{
  color:#a3f0e8
}
.home-logo{
  text-shadow:0 4px 0 #0a274c,0 8px 20px #07162f50
}
.home-sub{
  color:#c1e8ed
}
.home-note{
  color:#80b3c2
}
.home-screen:before{
  background-image:linear-gradient(#91e9f40b 1px,transparent 1px),linear-gradient(90deg,#91e9f40b 1px,transparent 1px)
}
.home-level{
  box-shadow:0 6px 0 #071b33,0 12px 20px #020f2d30
}
.home-level.finished{
  box-shadow:0 6px 0 #0e665f,0 0 0 2px #87ffe844
}
.hero-platform{
  background:#1d516c;
  box-shadow:0 10px #102f4c,0 13px 0 3px #5de5dc,inset 0 0 0 3px #9bedeb
}
.home-sparks i{
  border-color:#69b6dd44
}
.error{
  background:#18374c;
  color:#cae6f2
}
.stage.final-sweep .stat{
  border-color:#d4cf88
}
@keyframes futureBridge{
  to{
    box-shadow:0 0 0 3px #ffe18122,0 0 20px #ffe17e20,0 4px 0 #201f26
  }
  
}
@media(max-width:800px){
  .panel{
    background:transparent;
    border:0;
    box-shadow:none
  }
  .stage{
    box-shadow:0 5px 0 #081c2e,0 14px 30px #06162544
  }
  .levelbar .badge{
    padding:3px 6px
  }
  .lane-top{
    color:#95bbcd
  }
  .tools{
    margin-top:11px
  }
  .home-levels{
    gap:13px
  }
  
}
@media(prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important
  }
  
}


.home-content{
  max-width:1060px;
  width:min(1060px,100%)
}
.home-kicker{
  font-size:9px;
  letter-spacing:2.7px
}
.home-levels{
  max-width:1000px;
  gap:15px
}
.home-level{
  min-height:225px;
  padding:37px 8px 13px;
  border-radius:25px 25px 20px 20px;
  isolation:isolate
}
.home-level:after{
  content:'';
  position:absolute;
  left:12px;
  right:12px;
  bottom:-8px;
  height:14px;
  background:#07182c;
  border:1px solid #7ce2e72b;
  border-radius:0 0 40% 40%;
  z-index:-1
}
.era-number{
  position:absolute;
  right:10px;
  top:10px;
  font-size:10px;
  opacity:.5;
  font-weight:900
}
.level-stamp{
  font-size:8px;
  letter-spacing:.3px
}
.home-level b{
  font-size:13px;
  margin:9px 0 4px
}
.home-level small{
  font-size:9px
}
.card-art{
  width:78px;
  height:78px;
  background:#ffffff28;
  border:1px solid #ffffff55;
  border-radius:16px;
  padding:4px;
  box-shadow:inset 0 2px 12px #28567615
}
.home-level em{
  display:block;
  width:max-content;
  margin:10px auto 0;
  font-size:10px
}
.era-egypt{
  background:linear-gradient(145deg,#f8e4b7,#d9b887);
  color:#735c30;
  transform:translateY(9px)
}
.era-rome{
  background:linear-gradient(145deg,#f2e4ce,#d1c2aa);
  color:#6c5951;
  transform:translateY(-10px)
}
.era-metro{
  background:linear-gradient(145deg,#d3efff,#9dbcd8);
  color:#214f74;
  transform:translateY(11px)
}
.era-aether{
  background:linear-gradient(145deg,#f4e3ff,#c7b9ea);
  color:#65508a;
  transform:translateY(-10px)
}
.era-orbit{
  background:linear-gradient(145deg,#d6e4ff,#9faed7);
  color:#344b80;
  transform:translateY(8px)
}
.home-level:hover{
  transform:translateY(-15px)
}
.home-level.current{
  outline:2px solid #b5fff2;
  outline-offset:4px
}
.journey-map{
  position:relative;
  padding:18px 0 20px;
  align-items:center
}
.journey-trail{
  position:absolute;
  left:2%;
  right:2%;
  top:51%;
  height:40px;
  border-top:3px dashed #77d8de80;
  filter:drop-shadow(0 0 4px #89fff440);
  z-index:-1
}
.journey-trail:after{
  content:'';
  width:9px;
  height:9px;
  border-radius:50%;
  background:#cefff7;
  position:absolute;
  top:-6px;
  left:0;
  box-shadow:0 0 12px #bafff2;
  animation:timeTravel 15s linear infinite
}
.difficulty{
  display:block;
  width:max-content;
  margin:9px auto 0;
  border-radius:5px;
  padding:3px 8px;
  background:#9ad8bc;
  color:#23614b;
  font-size:8px;
  letter-spacing:.7px;
  font-weight:900
}
.difficulty.hard{
  background:#f2cb86;
  color:#815724
}
.difficulty.boss{
  background:#f1a2b4;
  color:#7b234a;
  box-shadow:0 0 0 2px #ef8aad35
}
.difficulty.intro{
  background:#cbbaff;
  color:#624993
}
.badge[data-difficulty="Boss"]{
  background:#5e2947;
  color:#ffb9d5;
  border-color:#a35079
}
.badge[data-difficulty="Hard"]{
  background:#5c472c;
  color:#ffe0a4;
  border-color:#9e7e4d
}
.badge[data-difficulty="Intro"]{
  background:#42365d;
  color:#dfd1ff;
  border-color:#8d74b7
}
.home-note a{
  color:#aedfe8;
  text-decoration:underline;
  text-underline-offset:3px
}
.flight-icon{
  display:none
}
.bridge[data-flight="true"] .bridge-icon{
  display:none
}
.bridge[data-flight="true"] .flight-icon{
  display:block
}
.bridge[data-flight="true"]{
  background:linear-gradient(#334e71,#2e355d);
  border-color:#a6a1ef;
  opacity:.9;
  filter:none
}
.bridge[data-flight="true"] b{
  color:#e9ecff
}
.bridge[data-flight="true"] small{
  color:#c4c9ee
}
.stage{
  border-color:var(--era-glow,#4a8399)
}
@keyframes timeTravel{
  to{
    left:100%
  }
  
}

@media(max-width:800px){
  .home-content{
    max-width:530px
  }
  .home-levels{
    gap:20px 14px
  }
  .home-level{
    min-height:196px;
    padding:33px 7px 12px
  }
  .card-art{
    width:66px;
    height:66px
  }
  .home-level b{
    font-size:13px
  }
  .home-level small{
    font-size:9px
  }
  .level-stamp{
    font-size:8px
  }
  .era-egypt,.era-rome,.era-metro,.era-aether,.era-orbit{
    transform:none
  }
  .journey-trail{
    top:5%;
    bottom:4%;
    left:50%;
    right:auto;
    height:auto;
    width:1px;
    border-top:0;
    border-left:3px dashed #77d8de80
  }
  .journey-trail:after{
    left:-6px;
    top:0;
    animation:timeTravelMobile 15s linear infinite
  }
  .home-sub{
    max-width:330px;
    margin:auto;
    font-size:10px
  }
  .home-kicker{
    font-size:8px;
    letter-spacing:1.5px
  }
  .home-note{
    line-height:1.8
  }
  .home-level.current{
    outline-offset:3px
  }
  .home-level:hover{
    transform:translateY(-4px)
  }
  
}
@keyframes timeTravelMobile{
  to{
    top:100%
  }
  
}
@media(prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important
  }
  
}

@media(max-width:800px){
  header .logo small{
    display:none
  }
  .stage{
    aspect-ratio:.95;
    max-height:calc(100svh - 330px);
    min-height:280px
  }
  .stagehint,.panel .footer{
    display:none
  }
  .status{
    font-size:10px;
    min-height:31px;
    padding:4px
  }
  .panel{
    padding-top:12px
  }
  .tools{
    margin-top:9px
  }
  .level-switch{
    margin-bottom:10px
  }
  
}

[hidden]{
  display:none!important
}
.path-home{
  position:fixed;
  inset:0;
  z-index:100;
  overflow:auto;
  background:radial-gradient(ellipse at 20% 0%,#273f5a,transparent 55%),#101c2c;
  color:#e5f4fa
}
.path-wrap{
  max-width:850px;
  margin:auto;
  padding:42px 24px
}
.path-head h1{
  font-size:clamp(36px,7vw,60px);
  line-height:1;
  letter-spacing:-2px;
  margin:16px 0
}
.path-head p{
  color:#a7c2d4
}
.path-head .eyebrow{
  color:#67eeeb
}
.path-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:24px 0 30px
}
.path-actions b{
  color:#a7c2d4;
  font-size:14px
}
.path-actions .primary{
  margin:0;
  width:auto;
  padding:15px 28px
}
.world{
  position:relative;
  border:1px solid color-mix(in srgb,var(--accent),transparent 70%);
  border-radius:26px;
  background:radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--land),transparent 30%),transparent 90%),#17283b;
  margin-bottom:28px;
  padding:20px 14px 12px;
  box-shadow:0 18px 30px #0002
}
.world:not(:last-child):after{
  content:'';
  position:absolute;
  height:28px;
  bottom:-29px;
  left:50%;
  border-left:3px dashed #55758a
}
.world.locked{
  filter:saturate(.55)
}
.world-title{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 8px
}
.world-title>svg{
  width:64px;
  height:64px;
  filter:drop-shadow(0 5px 4px #0005)
}
.world-title h2{
  margin:7px 0;
  font-size:23px;
  color:#fff
}
.world-title .eyebrow{
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--accent)
}
.world-title>b{
  margin-left:auto;
  font-size:13px;
  color:var(--accent);
  white-space:nowrap
}
.route{
  position:relative;
  height:170px;
  margin-top:12px
}
.route-lines{
  position:absolute;
  width:100%;
  height:170px;
  inset:0;
  overflow:visible
}
.route-lines path{
  fill:none;
  stroke:#496173;
  stroke-width:9;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round
}
.route-lines path.passed{
  stroke:var(--accent);
  filter:drop-shadow(0 0 5px var(--accent))
}
.map-node{
  position:absolute;
  transform:translate(-50%,-50%);
  border:2px solid #7a9baa;
  background:linear-gradient(#436477,#243b52);
  box-shadow:0 5px 0 #0c1928,0 8px 12px #0004;
  color:#fff;
  border-radius:50%;
  width:50px;
  height:50px;
  padding:0;
  overflow:visible
}
.map-node strong{
  font-size:19px
}
.map-node>span{
  position:absolute;
  left:50%;
  top:58px;
  transform:translateX(-50%);
  width:100px;
  font-size:10px;
  line-height:1.2;
  font-weight:bold;
  color:#dbebf3
}
.map-node small{
  position:absolute;
  left:50%;
  top:85px;
  transform:translateX(-50%);
  width:90px;
  font-size:9px;
  font-style:normal;
  color:#9bb9cb
}
.map-node:disabled{
  background:#223144;
  color:#617b8e;
  border-color:#41576a;
  box-shadow:0 4px 0 #0c1928
}
.map-node:disabled>span{
  color:#8196a6
}
.map-node.finished{
  background:linear-gradient(#2db7a0,#26788c);
  border-color:#9cfff0
}
.map-node.current{
  border-color:#fff;
  box-shadow:0 0 0 5px #85fff02a,0 0 24px var(--accent),0 5px 0 #0c1928
}
.map-node.boss{
  border-radius:16px;
  border-color:#ffc65d
}
.map-node.hard>span,.map-node.boss>span{
  color:#ffd580
}
.map-actor{
  position:absolute;
  left:10%;
  top:25px;
  transform:translate(-50%,0);
  transition:left 1s cubic-bezier(.4,0,.2,1),top 1s;
  width:29px;
  height:22px;
  border-radius:8px;
  background:linear-gradient(#c4f9ff,#50bbd0);
  box-shadow:0 0 14px #79fff670,0 7px 0 -3px #398da9;
  pointer-events:none
}
.map-actor:before{
  content:'';
  position:absolute;
  left:13px;
  top:-7px;
  height:6px;
  border-left:2px solid #9cfff0
}
.map-actor i{
  position:absolute;
  inset:5px 4px;
  background:#0e2e46;
  border-radius:4px;
  color:#b9fff1;
  font:bold 14px/9px monospace;
  text-align:center;
  animation:map-blink 4s infinite
}
.path-home .home-note{
  color:#98b5c7;
  line-height:2
}
.path-home a{
  color:#9aeee9
}
.level-switch{
  grid-template-columns:repeat(5,1fr)
}
@keyframes map-blink{
  0%,45%,50%,100%{
    transform:scaleY(1)
  }
  47%{
    transform:scaleY(.2)
  }
  
}
@media(max-width:600px){
  .path-wrap{
    padding:30px 12px
  }
  .world{
    padding:16px 6px 12px;
    border-radius:20px
  }
  .world-title h2{
    font-size:20px
  }
  .world-title>svg{
    width:48px;
    height:48px
  }
  .world-title{
    gap:10px
  }
  .map-node{
    width:46px;
    height:46px
  }
  .map-node>span{
    width:66px;
    font-size:9px
  }
  .map-node small{
    width:66px;
    font-size:8px
  }
  .path-actions{
    position:sticky;
    top:0;
    background:#14263aee;
    backdrop-filter:blur(12px);
    padding:10px;
    border-radius:16px;
    z-index:2
  }
  .path-actions .primary{
    font-size:14px;
    padding:14px 18px
  }
  .path-actions b{
    font-size:12px
  }
  
}
@media(prefers-reduced-motion:reduce){
  .map-actor{
    transition:none
  }
  .map-actor i{
    animation:none
  }
  
}