/* Compact game HUD (opt-in: <body class="hud-v2">). The board gets most of the screen;
   queues are small number tiles, linked bins hang on a chain, tools sit in one bottom bar. */
body.hud-v2 header{height:46px;padding:0 12px;max-width:540px}
body.hud-v2 header .logo small{display:none}
body.hud-v2 .shell{max-width:540px;padding:0 10px 12px}
body.hud-v2 .layout{display:block}
body.hud-v2 .playarea{width:100%}
body.hud-v2 .levelbar{margin:0 4px 5px}
body.hud-v2 .stage{aspect-ratio:.8;height:auto;max-height:calc(100svh - 352px);min-height:300px;margin:auto}
body.hud-v2 .stagehint,
body.hud-v2 .panel>.eyebrow,
body.hud-v2 .panel h1,
body.hud-v2 .panel .intro,
body.hud-v2 .level-switch,
body.hud-v2 .queue-head,
body.hud-v2 .panel .footer,
body.hud-v2 .panel .tools{display:none}
body.hud-v2 .panel{padding:8px 0 0;background:none;border:0;box-shadow:none}

/* Queue tiles */
body.hud-v2 .supply{display:grid;grid-template-columns:repeat(var(--columns,3),minmax(0,1fr));gap:8px;min-height:0;align-items:start}
body.hud-v2 .supply[data-count="1"],body.hud-v2 .supply[data-count="2"]{grid-template-columns:repeat(var(--columns),minmax(0,96px));justify-content:center}
body.hud-v2 .lane{display:flex;flex-direction:column;align-items:stretch}
body.hud-v2 .tile{
  --shade:color-mix(in srgb,var(--color),#000 32%);
  display:flex;align-items:center;justify-content:center;height:30px;margin-top:5px;border-radius:9px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--color),#fff 22%),var(--color));
  box-shadow:0 3px 0 var(--shade),inset 0 1px 0 #ffffff59;
  color:#fff;font:900 15px/1 system-ui,-apple-system,sans-serif;text-shadow:0 1px 0 #0006,0 0 3px #0004;
  transition:transform .15s,filter .15s
}
body.hud-v2 .tile.far{height:25px;font-size:13px;opacity:.5}
body.hud-v2 .tile.mystery{background:repeating-linear-gradient(135deg,#3a4658 0 6px,#2c3646 6px 12px);box-shadow:0 3px 0 #1b2230;color:#cfd9e6}
body.hud-v2 .pod.tile{
  display:flex;width:100%;height:48px;min-height:0;margin:0;padding:0;border:0;border-radius:12px;
  font-size:23px;cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--color),#fff 25%),var(--color));
  box-shadow:0 5px 0 var(--shade),0 0 0 2px #ffffff26,inset 0 1px 0 #ffffff66
}
body.hud-v2 .pod.tile{justify-content:center;align-items:center;grid-template-columns:none}
body.hud-v2 .pod.tile strong{font:inherit;color:inherit;margin:0 auto;align-self:center;text-shadow:inherit}
body.hud-v2 .pod.tile:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 0 var(--shade),0 0 14px color-mix(in srgb,var(--color),transparent 50%),inset 0 1px 0 #ffffff66}
body.hud-v2 .pod.tile:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--shade)}
body.hud-v2 .pod.tile:disabled{opacity:.55;filter:saturate(.6)}
body.hud-v2 .lane .more{font-size:9px;text-align:center;color:#8fb0c2;margin-top:3px}
body.hud-v2 .empty-supply{grid-column:1/-1;text-align:center;font-size:12px;color:#8fb0c2;padding:14px 0}

/* Chain between linked bins: steel eyelets are riveted to both tiles and two heavy chains hook
   into them. The pair shares a pulsing gold glow; chains sway, glint, and snap taut when sent. */
body.hud-v2 .tile,body.hud-v2 .pod.tile{position:relative}
body.hud-v2 .pod.tile.linked.chained::after,body.hud-v2 .tile.hooked::before{
  content:'';position:absolute;left:22%;right:22%;height:9px;pointer-events:none;
  background:radial-gradient(circle at 6px 50%,#0000 2.2px,#eef3f7 2.6px,#7d8b97 4.2px,#0000 4.6px) left/12px 9px no-repeat,
             radial-gradient(circle at 6px 50%,#0000 2.2px,#eef3f7 2.6px,#7d8b97 4.2px,#0000 4.6px) right/12px 9px no-repeat;
  filter:drop-shadow(0 1px 0 #0008)
}
body.hud-v2 .pod.tile.linked.chained::after{bottom:-3px}
body.hud-v2 .tile.hooked::before{top:-4px}
body.hud-v2 .chain{position:relative;display:flex;justify-content:space-between;height:24px;margin:-9px calc(22% + 1px) -10px;z-index:3;pointer-events:none}
body.hud-v2 .chain i{display:block;width:12px;height:28px;transform-origin:50% 2px;animation:chainSway 2.2s ease-in-out infinite,chainShine 2.6s ease-in-out infinite;filter:drop-shadow(0 2px 1px #000a)}
body.hud-v2 .chain i:last-child{animation-delay:-1.1s}
body.hud-v2 .chain svg{display:block;width:100%;height:100%}
body.hud-v2 .pod.tile.linked{box-shadow:0 5px 0 var(--shade),0 0 0 2px #ffe07a,0 0 18px #ffd34d88,inset 0 1px 0 #ffffff66;animation:linkGlow 1.8s ease-in-out infinite}
body.hud-v2 .tile.hooked{box-shadow:0 3px 0 var(--shade),0 0 0 2px #ffe07acc,0 0 12px #ffd34d55,inset 0 1px 0 #ffffff59}
body.hud-v2 .lane.ghost .chain i{animation:chainTaut .45s ease-out forwards}
body.hud-v2 .lane.ghost .pod.tile.linked{animation:linkSnap .45s ease-out}
@keyframes chainSway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes chainShine{0%,70%,100%{filter:drop-shadow(0 2px 1px #000a) brightness(1)}80%{filter:drop-shadow(0 2px 1px #000a) drop-shadow(0 0 4px #fff) brightness(1.5)}}
@keyframes chainTaut{40%{transform:scaleY(.8) rotate(0)}to{transform:scaleY(1.5) rotate(0)}}
@keyframes linkGlow{50%{box-shadow:0 5px 0 var(--shade),0 0 0 2px #fff1b0,0 0 26px #ffd34dcc,inset 0 1px 0 #ffffff66}}
@keyframes linkSnap{30%{filter:brightness(1.6)}}

/* Dock counters: a pill in the crew's color that fills as cubes arrive */
body.hud-v2 .bin-label:not(.empty){width:auto!important;min-width:54px;padding:4px 9px;border-radius:12px;font:900 13px/1 system-ui,-apple-system,sans-serif!important;color:#fff!important;text-shadow:0 1px 0 #0008!important;letter-spacing:0!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--team,#4cd),#fff 10%) calc(var(--fill,0)*100%),#0d1f2fcc calc(var(--fill,0)*100%));border:2px solid color-mix(in srgb,var(--team,#4cd),#fff 45%);box-shadow:0 3px 8px #0006}
body.hud-v2 .bin-label.complete{background:#2bd38f!important;border-color:#c9ffe6!important}
body.hud-v2 .bin-label.blocked{animation:dockWait 1s ease-in-out infinite}
@keyframes dockWait{50%{box-shadow:0 0 0 4px #ff6b6b88,0 3px 8px #0006}}

/* Status: one quiet line */
body.hud-v2 .feedback-line{min-height:0;margin:8px 2px 0}
body.hud-v2 .status{font-size:11px;line-height:1.35;min-height:15px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Bottom bar: round buttons for powers and tools */
body.hud-v2 .bottom-bar{position:relative;display:flex;justify-content:center;gap:10px;margin-top:10px;flex-wrap:nowrap}
body.hud-v2 .power-bar{display:contents}
body.hud-v2 .power-bar>div{position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:5;padding:6px;border-radius:14px;background:#0f2436f0;box-shadow:0 8px 20px #0007}
body.hud-v2 .power,body.hud-v2 .bottom-bar>#bridge,body.hud-v2 .bottom-bar>#speed,body.hud-v2 .bottom-bar>#restart{
  position:relative;flex:0 0 auto;width:58px;height:58px;margin:0;padding:0;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:2px solid #4f7f96;background:radial-gradient(circle at 50% 30%,#2f5d78,#163247);
  box-shadow:0 4px 0 #0a1a2b;color:#e8f6ff;font:700 9px/1 system-ui,sans-serif;cursor:pointer
}
body.hud-v2 .power>span{font-size:20px;line-height:1}
body.hud-v2 .power>small{font-size:8px;opacity:.75}
body.hud-v2 .power>b{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#ffcf14;color:#3b2a00;font:900 11px/18px system-ui;text-align:center;box-shadow:0 1px 0 #7a5d00}
body.hud-v2 .power[aria-pressed="true"]{border-color:#ffe07a;box-shadow:0 4px 0 #0a1a2b,0 0 14px #ffe07a88}
body.hud-v2 .power:disabled,body.hud-v2 .bottom-bar>button:disabled{opacity:.45;filter:saturate(.5);cursor:default}
body.hud-v2 .bottom-bar>#bridge svg{width:30px;height:20px;margin:0}
body.hud-v2 .bottom-bar>#bridge .flight-icon{display:none}
body.hud-v2 .bottom-bar>#bridge>span{display:block}
body.hud-v2 .bottom-bar>#bridge>span b{font-size:8px;font-weight:700}
body.hud-v2 .bottom-bar>#bridge>span small{display:none}
body.hud-v2 .bottom-bar>#speed span,body.hud-v2 .bottom-bar>#restart span{display:block;font-size:19px;line-height:1;margin-bottom:2px}
/* "New!" card: a glowing badge for the mechanic, a ribbon and a springy entrance */
body.hud-v2 .overlay.intro-card>div{position:relative;max-width:300px;padding:30px 22px 22px;border-radius:24px;background:linear-gradient(160deg,#21486a,#132a40);border:2px solid #7fe3ff;box-shadow:0 0 0 6px #7fe3ff22,0 24px 60px #000a;animation:introPop .5s cubic-bezier(.2,1.5,.4,1)}
body.hud-v2 .overlay.intro-card>div::before{content:'NEW!';position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-3deg);padding:5px 14px;border-radius:9px;background:linear-gradient(180deg,#ffe07a,#ffb21f);color:#3b2a00;font:900 13px/1 system-ui,sans-serif;letter-spacing:.08em;box-shadow:0 3px 0 #8a5a00}
body.hud-v2 .overlay.intro-card .symbol{width:84px;height:84px;margin:4px auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:42px;background:radial-gradient(circle at 50% 35%,#4fd6ff,#1b6f9c);box-shadow:0 0 30px #4fd6ff88,inset 0 -6px 0 #0003;animation:introGlow 2s ease-in-out infinite}
body.hud-v2 .overlay.intro-card h2{color:#fff;font-size:21px;margin:0 0 8px}
body.hud-v2 .overlay.intro-card p{color:#cfe6f2;font-size:14px;line-height:1.45}
@keyframes introPop{from{transform:scale(.6) translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes introGlow{50%{box-shadow:0 0 44px #4fd6ffcc,inset 0 -6px 0 #0003}}
/* Journey map: each node wears its difficulty color and name. An old panel rule (.intro{display:none})
   also hid every intro node, including Level 1; map nodes always show. */
body.hud-v2 .map-node.intro{display:block}
body.hud-v2 .map-node[class*="cat-"]{border-color:var(--cat)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--cat),transparent 70%),0 4px 0 #0006}
body.hud-v2 .map-node[class*="cat-"]>small{color:var(--cat)!important;text-shadow:0 1px 3px #000c;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
body.hud-v2 .map-node.cat-boss{box-shadow:0 0 0 4px color-mix(in srgb,var(--cat),transparent 50%),0 0 22px var(--cat),0 4px 0 #0006}
/* Level-start banner */
body.hud-v2 .level-banner{position:absolute;left:50%;top:38%;z-index:6;pointer-events:none;transform:translate(-50%,-50%) scale(.6);opacity:0;text-align:center;padding:12px 26px 14px;border-radius:18px;background:#0b1b2bdd;border:3px solid var(--cat);box-shadow:0 0 0 6px color-mix(in srgb,var(--cat),transparent 75%),0 14px 40px #000a}
body.hud-v2 .level-banner small{display:block;font:800 11px/1 system-ui,sans-serif;color:#bcd6e4;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
body.hud-v2 .level-banner b{display:block;font:900 34px/1 system-ui,-apple-system,sans-serif;color:var(--cat);text-transform:uppercase;letter-spacing:.04em;text-shadow:0 2px 0 #0008}
body.hud-v2 .level-banner.show{animation:bannerShow 1.9s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes bannerShow{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}25%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(.96)}}
@media(max-width:380px){
  body.hud-v2 .power,body.hud-v2 .bottom-bar>#bridge,body.hud-v2 .bottom-bar>#speed,body.hud-v2 .bottom-bar>#restart{width:52px;height:52px}
  body.hud-v2 .bottom-bar{gap:7px}
}
@media(prefers-reduced-motion:reduce){body.hud-v2 .level-banner.show{animation:bannerShow 1.9s steps(1) forwards}body.hud-v2 .overlay.intro-card>div,body.hud-v2 .overlay.intro-card .symbol,body.hud-v2 .chain i,body.hud-v2 .bin-label.blocked,body.hud-v2 .pod.tile.linked{animation:none}}

/* Linked groups: a gold badge with the group letter on every member, in any queue. */
body.hud-v2 .link-badge{position:absolute;top:-7px;right:-5px;font:800 10px/1 system-ui,sans-serif;font-style:normal;color:#3a2a00;background:linear-gradient(#fff3c4,#ffd34d);border:1px solid #b8860b;border-radius:9px;padding:2px 4px 2px 3px;box-shadow:0 1px 3px #0006;pointer-events:none;letter-spacing:.02em}
body.hud-v2 .tile{position:relative}
body.hud-v2 .tile.mystery .link-badge{filter:saturate(.6)}
/* A front bin whose partners are still buried in other queues cannot leave yet. */
body.hud-v2 .pod.tile.waiting{filter:saturate(.45) brightness(.8);animation:none;box-shadow:0 5px 0 var(--shade),0 0 0 2px #b8860b,inset 0 1px 0 #ffffff44}
body.hud-v2 .pod.tile.waiting strong::after{content:' 🔒';font-size:.7em}
/* Danger: every dock busy. A soft red pulse around the stage. */
body.hud-v2 #stage.danger::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 3px #ff5d6c,inset 0 0 38px #ff3b4f66;animation:dangerPulse 1.1s ease-in-out infinite}
@keyframes dangerPulse{50%{box-shadow:inset 0 0 0 3px #ff5d6c88,inset 0 0 22px #ff3b4f33}}
/* A new area opens with a bigger banner naming it. */
body.hud-v2 .level-banner.area{padding:16px 30px 16px;background:linear-gradient(160deg,#13324bf0,#0b1b2bf0)}
body.hud-v2 .level-banner i{display:block;font:800 11px/1 system-ui,sans-serif;font-style:normal;color:#ffd67a;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
body.hud-v2 .level-banner em{display:block;font:900 26px/1.1 system-ui,-apple-system,sans-serif;font-style:normal;color:#fff;margin-bottom:10px;white-space:nowrap}
body.hud-v2 .level-banner.area.show{animation:bannerShow 3s cubic-bezier(.2,1.3,.4,1) forwards}
@media(prefers-reduced-motion:reduce){body.hud-v2 #stage.danger::after{animation:none}body.hud-v2 .level-banner.area.show{animation:bannerShow 3s steps(1) forwards}}
/* The clock's last ten seconds pulse. */
body.hud-v2 #levelClock.urgent{animation:clockPulse .5s ease-in-out infinite alternate;font-weight:900}
@keyframes clockPulse{to{transform:scale(1.18);text-shadow:0 0 10px #ff6b6b}}
/* A bin that cannot leave yet shakes. */
body.hud-v2 .pod.tile.nope{animation:nopeShake .38s ease-in-out}
@keyframes nopeShake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){body.hud-v2 #levelClock.urgent{animation:none}}
/* The win card pops in with a short golden shine. */
body.hud-v2 .overlay.victory>div{animation:winPop .55s cubic-bezier(.2,1.45,.4,1) both;position:relative;overflow:hidden}
body.hud-v2 .overlay.victory>div::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#fff6c855 48%,transparent 66%);transform:translateX(-120%);animation:winShine 1.1s .35s ease-out forwards}
body.hud-v2 .overlay.victory h2{background:linear-gradient(90deg,#fff3b0,#9bfff0);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes winPop{0%{opacity:0;transform:translateY(24px) scale(.85)}100%{opacity:1;transform:none}}
@keyframes winShine{to{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){body.hud-v2 .overlay.victory>div,body.hud-v2 .overlay.victory>div::after{animation:none}}