/* DART Meadow — main menu v3
 * Traced from the concept: glowing title over the galaxy; on the left a
 * pilot portrait card and a compact five-button panel; on the right an
 * instrument panel whose ring holds the 3D start button; round buttons
 * along the bottom left. Thin luminous line frames with chamfered corners,
 * glass behind them, nothing heavy, and space between every panel.
 * Panels sit on hinges: they fold out when the menu opens and fold away
 * like shutters when you head into the game (goScreen adds .mm-leaving).
 */
#screen-menu{padding:0 !important;justify-content:center !important;align-items:stretch !important;perspective:1600px;overflow:hidden;
  --m-line:rgba(var(--acc-rgb),.62);--m-glass:rgba(var(--panel-rgb),.42);}
#screen-menu .menu-glass{display:none;}

/* ── panels + hinges ────────────────────────────────────────────────── */
#screen-menu .mm-panel{position:absolute;z-index:3;transform-style:preserve-3d;backface-visibility:hidden;}
#screen-menu.active .mm-hinge-left  {transform-origin:0 50%;  animation:mmOpenL .8s cubic-bezier(.2,.9,.25,1) .05s both;}
#screen-menu.active .mm-hinge-right {transform-origin:100% 50%;animation:mmOpenR .8s cubic-bezier(.2,.9,.25,1) .15s both;}
#screen-menu.active .mm-hinge-top   {transform-origin:50% 0;  animation:mmOpenT .7s cubic-bezier(.2,.9,.25,1) 0s both;}
#screen-menu.active .mm-hinge-bottom{transform-origin:0 100%; animation:mmOpenB .7s cubic-bezier(.2,.9,.25,1) .28s both;}
@keyframes mmOpenL{from{transform:rotateY(-96deg);opacity:0}55%{opacity:1}to{transform:none;opacity:1}}
@keyframes mmOpenR{from{transform:rotateY(96deg);opacity:0}55%{opacity:1}to{transform:none;opacity:1}}
@keyframes mmOpenT{from{transform:rotateX(96deg);opacity:0}55%{opacity:1}to{transform:none;opacity:1}}
@keyframes mmOpenB{from{transform:rotateX(-96deg);opacity:0}55%{opacity:1}to{transform:none;opacity:1}}
#screen-menu.mm-leaving{display:flex !important;z-index:60;pointer-events:none;background:transparent !important;}
#screen-menu.mm-leaving #menu-bg-canvas,#screen-menu.mm-leaving #menu-glow,#screen-menu.mm-leaving #menu-glow-wash{animation:mmFade .5s ease-in both;}
#screen-menu.mm-leaving .mm-hinge-left  {transform-origin:0 50%;  animation:mmCloseL .55s cubic-bezier(.6,0,.8,.4) both;}
#screen-menu.mm-leaving .mm-hinge-right {transform-origin:100% 50%;animation:mmCloseR .55s cubic-bezier(.6,0,.8,.4) .04s both;}
#screen-menu.mm-leaving .mm-hinge-top   {transform-origin:50% 0;  animation:mmCloseT .5s cubic-bezier(.6,0,.8,.4) .08s both;}
#screen-menu.mm-leaving .mm-hinge-bottom{transform-origin:0 100%; animation:mmCloseB .5s cubic-bezier(.6,0,.8,.4) both;}
@keyframes mmCloseL{to{transform:rotateY(-100deg);opacity:0}}
@keyframes mmCloseR{to{transform:rotateY(100deg);opacity:0}}
@keyframes mmCloseT{to{transform:rotateX(100deg);opacity:0}}
@keyframes mmCloseB{to{transform:rotateX(-100deg);opacity:0}}
@keyframes mmFade{to{opacity:0}}
@media (prefers-reduced-motion:reduce){#screen-menu .mm-panel{animation:none !important;}}

/* ── title: glowing type over the galaxy, no plate ───────────────────── */
#mm-title{top:clamp(10px,3.5vh,34px);left:0;right:0;text-align:center;pointer-events:none;}
#screen-menu .menu-logo{font-size:clamp(1.5rem,4.2vw,3rem);font-weight:900;letter-spacing:.14em;margin:0;color:var(--cyan);
  text-shadow:0 0 18px rgba(var(--acc-rgb),.75),0 0 2px #fff;}
#screen-menu .menu-tagline{margin:4px 0 0;font-family:var(--font-mono);font-size:clamp(.5rem,1vw,.7rem);letter-spacing:.42em;color:var(--text);opacity:.9;}

/* ── left column: portrait card + button panel ─────────────────────── */
#mm-left{left:clamp(12px,3vw,48px);top:clamp(80px,17vh,170px);width:clamp(190px,21vw,280px);display:flex;flex-direction:column;gap:clamp(8px,1.6vh,14px);max-height:calc(100% - clamp(80px,17vh,170px) - 96px);}
#screen-menu .mm-portrait{flex:0 0 auto;height:clamp(150px,32vh,330px);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;}
#screen-menu .mm-portrait #menu-pilot{position:absolute !important;left:0 !important;right:auto !important;top:auto !important;bottom:0 !important;
  width:100% !important;height:104% !important;max-width:none !important;transform:none !important;opacity:.96 !important;mix-blend-mode:normal !important;
  object-fit:cover;object-position:55% 15%;z-index:0;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 18%);mask-image:linear-gradient(to top,transparent 0,#000 18%);
  filter:drop-shadow(0 0 14px rgba(var(--acc-rgb),.4));}
#screen-menu .mm-ticks{position:absolute;left:10px;bottom:14px;display:flex;flex-direction:column;gap:3px;z-index:1;pointer-events:none;}
#screen-menu .mm-ticks i{display:block;height:2px;background:rgba(var(--acc-rgb),.7);}
#screen-menu .mm-ticks i:nth-child(1){width:22px}#screen-menu .mm-ticks i:nth-child(2){width:12px}#screen-menu .mm-ticks i:nth-child(3){width:18px}#screen-menu .mm-ticks i:nth-child(4){width:8px}#screen-menu .mm-ticks i:nth-child(5){width:14px}
#screen-menu #account-chip{position:relative;top:auto;right:auto;margin:0 0 10px;z-index:2;background:rgba(var(--panel-rgb),.75);color:var(--text);border-color:rgba(var(--acc-rgb),.55);}

#screen-menu .mm-stack{flex:0 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:clamp(5px,1vh,8px);padding:clamp(9px,1.6vh,14px);scrollbar-width:thin;}
#screen-menu .mm-stack .menu-btn{margin:0;width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  padding:clamp(.42rem,1.1vh,.62rem) .8rem;font-size:clamp(.5rem,.95vw,.6rem);letter-spacing:.14em;font-weight:600;
  color:var(--text);background:rgba(var(--acc-rgb),.06);border:1px solid rgba(var(--acc-rgb),.55);border-radius:4px;
  text-shadow:0 0 6px rgba(var(--acc-rgb),.45);box-shadow:inset 0 0 10px rgba(var(--acc-rgb),.1);backdrop-filter:none;}
#screen-menu .mm-stack .menu-btn:hover{background:rgba(var(--acc-rgb),.2);border-color:var(--cyan);box-shadow:0 0 12px rgba(var(--acc-rgb),.4),inset 0 0 12px rgba(var(--acc-rgb),.25);}
#screen-menu .mm-stack .menu-btn .mb-ico{width:16px;text-align:center;color:var(--cyan);flex-shrink:0;}
#screen-menu .mm-stack .menu-btn.gold{color:var(--gold);border-color:rgba(var(--hi-rgb),.6);}
#screen-menu .mm-stack .mm-exit{color:#ff8a9c;border-color:rgba(255,80,105,.45);}
#screen-menu .mm-stack .mm-exit .mb-ico{color:#ff8a9c;}

/* ── right: instrument panel; its ring holds the 3D start button ───── */
#mm-right{right:clamp(12px,3vw,48px);top:clamp(80px,17vh,170px);width:clamp(180px,19vw,260px);}
#screen-menu .mm-inst{padding:clamp(10px,1.8vh,16px);display:flex;flex-direction:column;gap:clamp(8px,1.4vh,12px);}
#screen-menu .mm-dial{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
#screen-menu .mm-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
#screen-menu .mm-rings circle{fill:none;stroke-width:1;}
#screen-menu .mm-rings .r0{stroke:rgba(var(--acc-rgb),.25);stroke-dasharray:1 5;}
#screen-menu .mm-rings .r1{stroke:var(--cyan);stroke-width:5;stroke-dasharray:300 253;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(var(--acc-rgb),.95));transform-origin:50% 50%;transform:rotate(130deg);animation:mmBreath 5s ease-in-out infinite;}
#screen-menu .mm-rings .r2{stroke:rgba(var(--acc-rgb),.35);}
#screen-menu .mm-rings .r3{stroke:rgba(var(--hi-rgb),.55);stroke-width:2;stroke-dasharray:46 406;transform-origin:50% 50%;animation:mmSpin 10s linear infinite;}
@keyframes mmSpin{to{transform:rotate(360deg)}}
@keyframes mmBreath{50%{stroke-dasharray:330 223;}}
#screen-menu #start-game-btn{width:62%;max-width:none;aspect-ratio:1;margin:0;border-radius:50%;border:1px solid rgba(var(--acc-rgb),.5);
  background:radial-gradient(circle,rgba(var(--acc-rgb),.18),rgba(var(--panel-rgb),.55) 72%);backdrop-filter:blur(6px);
  box-shadow:0 0 22px rgba(var(--acc-rgb),.35),inset 0 0 18px rgba(var(--acc-rgb),.25);}
#screen-menu #start-game-btn:hover{transform:scale(1.05);box-shadow:0 0 34px rgba(var(--acc-rgb),.65),inset 0 0 22px rgba(var(--acc-rgb),.35);}
#screen-menu #start-game-btn .sg-hint{display:none;}
#screen-menu .mm-start-lbl{position:absolute;left:0;right:0;bottom:4%;text-align:center;font-family:var(--font-hud);font-size:clamp(.5rem,.9vw,.62rem);letter-spacing:.5em;color:var(--text);text-shadow:0 0 10px rgba(var(--acc-rgb),.9);pointer-events:none;}
#screen-menu .mm-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
#screen-menu .mm-mini{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;cursor:pointer;
  border:1px solid rgba(var(--acc-rgb),.45);border-radius:4px;background:rgba(var(--acc-rgb),.06);
  font-family:var(--font-hud);font-size:.4rem;letter-spacing:.12em;color:var(--text);}
#screen-menu .mm-mini span{font-size:.85rem;line-height:1;}
#screen-menu .mm-mini:hover{background:rgba(var(--acc-rgb),.2);border-color:var(--cyan);}
#screen-menu .mm-status{display:flex;flex-direction:column;gap:5px;border-top:1px solid rgba(var(--acc-rgb),.25);padding-top:8px;}
#screen-menu .mm-st-row{display:flex;justify-content:space-between;gap:8px;font-family:var(--font-hud);font-size:.42rem;letter-spacing:.16em;color:rgba(var(--acc-rgb),.85);}
#screen-menu .mm-st-row b{font-family:var(--font-mono);font-weight:400;letter-spacing:.03em;font-size:.56rem;color:var(--text);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── bottom left: round buttons ────────────────────────────────────── */
#mm-bottom{left:clamp(12px,3vw,48px);bottom:clamp(14px,3vh,28px);display:flex;gap:clamp(8px,1.2vw,14px);}
#screen-menu .mm-round{width:clamp(42px,5.2vh,54px);height:clamp(42px,5.2vh,54px);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(var(--acc-rgb),.6);background:radial-gradient(circle,rgba(var(--panel-rgb),.55) 0 60%,rgba(var(--acc-rgb),.14));
  backdrop-filter:blur(6px);box-shadow:0 0 12px rgba(var(--acc-rgb),.3);color:var(--cyan);font-size:1rem;transition:transform .15s,box-shadow .15s;}
#screen-menu .mm-round:hover{transform:scale(1.08);box-shadow:0 0 20px rgba(var(--acc-rgb),.6);}
#screen-menu .mm-round.mm-support{border-color:rgba(var(--hi-rgb),.65);color:var(--gold);box-shadow:0 0 12px rgba(var(--hi-rgb),.3);}
#screen-menu .menu-version{position:absolute;z-index:3;right:clamp(12px,3vw,48px);bottom:clamp(14px,3vh,28px);margin:0;font-size:.48rem;color:rgba(var(--acc-rgb),.5);}

/* soundtrack chip: bottom centre while the menu is up */
body:has(#screen-menu.active) #float-music{top:auto !important;bottom:clamp(14px,3vh,28px) !important;right:auto !important;left:50% !important;transform:translateX(-50%);}

/* ── phones in portrait: one tidy column ───────────────────────────── */
@media (max-width:700px) and (orientation:portrait){
  #screen-menu{overflow-y:auto !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;padding:0 14px 90px !important;}
  #screen-menu .mm-panel{position:relative;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;margin:0 auto;max-height:none;}
  #mm-title{margin:22px auto 18px;}
  #mm-left{order:3;width:min(340px,100%);margin-top:14px;}
  #mm-right{order:2;width:min(340px,100%);}
  #screen-menu .mm-inst{display:grid;grid-template-columns:44% 1fr;align-items:center;}
  #screen-menu .mm-dial{grid-row:span 2;}
  #screen-menu .mm-portrait{height:150px;}
  #mm-bottom{order:4;margin-top:16px;justify-content:center;}
  #screen-menu .menu-version{position:relative;order:5;right:auto;bottom:auto;margin-top:10px;text-align:center;}
  body:has(#screen-menu.active) #float-music{bottom:10px !important;}
}
/* phones in landscape: shorter portrait, smaller dial */
@media (max-height:480px) and (orientation:landscape){
  #mm-left{top:62px;max-height:calc(100% - 62px - 70px);}
  #mm-right{top:62px;width:clamp(160px,22vw,210px);}
  #screen-menu .mm-portrait{display:none;}
  #screen-menu .mm-sub{display:none;}
  #screen-menu .menu-logo{font-size:1.25rem;}
}

/* ══ Skyboard Forge (builder): the same hinged-panel menu, with the live
   3D board filling the background behind the panels ═══════════════════ */
#screen-builder{perspective:1600px;}
#screen-builder #builder-viewport{position:absolute;inset:0;width:auto;}
#screen-builder #builder-sidebar,#screen-builder #builder-footer{--cut:16px;}
#screen-builder #builder-sidebar{
  position:absolute;z-index:10;left:clamp(10px,2.5vw,40px);top:clamp(60px,10vh,96px);bottom:clamp(14px,3vh,28px);width:clamp(270px,27vw,350px);min-width:0;}
#screen-builder #builder-header{background:none;border:none;padding:16px 18px 8px;}
#screen-builder .bh-title{font-size:.78rem;letter-spacing:.3em;color:var(--text);text-shadow:0 0 12px rgba(var(--acc-rgb),.8);}
#screen-builder .bh-sub{font-family:var(--font-mono);letter-spacing:.12em;}
#screen-builder #builder-tabs{border:none;gap:2px;padding:0 12px 8px;}
#screen-builder .btab{height:28px;padding:0 4px;border:none;border-radius:0;font-family:var(--font-hud);font-size:.44rem;letter-spacing:.14em;color:var(--text-dim);
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.1),rgba(var(--panel-rgb),.3));box-shadow:inset 0 -2px 0 rgba(var(--acc-rgb),.25);
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);}
#screen-builder .btab.active{color:var(--text);background:linear-gradient(180deg,rgba(var(--acc-rgb),.38),rgba(var(--acc-rgb),.12));box-shadow:inset 0 -2px 0 var(--cyan);}
#screen-builder #builder-content{padding:6px 16px 18px;}
#screen-builder .sec-label{color:var(--cyan);letter-spacing:.2em;}
/* board name glows at the top, like the menu title */
#screen-builder #builder-name-display{position:absolute;top:clamp(12px,3vh,26px);bottom:auto;left:0;right:0;transform:none;text-align:center;z-index:5;pointer-events:none;
  font-family:var(--font-hud);font-size:clamp(.9rem,2.4vw,1.6rem);letter-spacing:.24em;color:var(--cyan);text-shadow:0 0 16px rgba(var(--acc-rgb),.8);background:none;border:none;}
#screen-builder #builder-hud{right:clamp(12px,3vw,48px);top:clamp(12px,3vh,26px);left:auto;}
/* footer: framed panel bottom-right with MENU + LAUNCH */
#screen-builder #builder-footer{position:absolute;left:auto;right:clamp(12px,3vw,48px);bottom:clamp(14px,3vh,28px);padding:12px 14px;display:flex;gap:10px;z-index:10;}
#screen-builder #builder-footer .launch-btn{flex:none;height:40px;padding:0 20px;border:none;border-radius:0;font-size:.56rem;letter-spacing:.2em;color:var(--text);
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.2),rgba(var(--panel-rgb),.4));box-shadow:inset 0 -2px 0 rgba(var(--acc-rgb),.6);
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);}
#screen-builder #builder-footer .launch-btn.gold{padding:0 28px;color:#fff;font-size:.62rem;
  background:linear-gradient(180deg,rgba(var(--hi-rgb),.45),rgba(var(--acc-rgb),.25));box-shadow:inset 0 -2px 0 var(--gold),0 0 22px rgba(var(--hi-rgb),.45);text-shadow:0 0 8px rgba(var(--hi-rgb),.9);}
#screen-builder #builder-footer .launch-btn:hover{filter:brightness(1.25);}
/* hinges: same fold-out as the menu (desktop/tablet; phones keep the drawer) */
@media (min-width:821px){
  #screen-builder.active #builder-sidebar{transform-origin:0 50%;animation:mmOpenL .8s cubic-bezier(.2,.9,.25,1) .05s both;}
  #screen-builder.active #builder-footer{transform-origin:100% 100%;animation:mmOpenB .7s cubic-bezier(.2,.9,.25,1) .25s both;}
}
@media (max-width:820px){
  #screen-builder #builder-sidebar{left:0;top:0;bottom:0;width:min(330px,88vw);}
  #screen-builder #builder-footer{left:12px;right:12px;justify-content:space-between;}
  #screen-builder #builder-footer .launch-btn.gold{flex:1;}
}