.armory.dark::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(4, 3, 10, .62); pointer-events: none; animation: fade-in .3s; }
@keyframes fade-in { from { opacity: 0; } }
.armory .arm-stage { transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.hatchery.slowmo .arm-stage, .quarry.slowmo .arm-stage { transform: scale(1.14); }
.hatchery, .quarry { user-select: none; }
.hatchery.hitstop .arm-box, .quarry.hitstop .arm-box, .combo.hitstop .arm-box { filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)) brightness(2.2) saturate(.6); }
.hatchery.hitstop .arm-halo, .quarry.hitstop .arm-halo, .combo.hitstop .arm-halo { opacity: 1; }

.ht-meter { position: absolute; left: 50%; bottom: 8px; z-index: 5; width: 300px; margin-left: -150px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: opacity .3s; }
.ht-track { width: 100%; height: 14px; background: #120e18; box-shadow: 0 0 0 3px var(--ink), inset 0 3px 0 0 #07050a; overflow: hidden; }
.ht-fill { height: 100%; width: 0; background: linear-gradient(90deg, #3a6ae0, #e0a040 55%, #ff5a2a 80%, #fff1b0); background-size: 300px 100%; box-shadow: inset 0 3px 0 0 rgba(255,255,255,.35); }
.ht-label { font-size: 14px; line-height: 16px; white-space: nowrap; text-align: center; color: var(--muted, #a8a2c0); letter-spacing: 1px; animation: blink 1s steps(1) infinite; }
.ht-meter.hold .ht-label { animation: none; color: #ffb24a; }
.ht-meter.auto .ht-label { animation: none; opacity: .5; }
.ht-meter.done { opacity: 0; }
.ht-lamp { position: absolute; left: calc(50% - 160px); bottom: 20px; width: 320px; height: 300px; pointer-events: none; opacity: calc(var(--heat, 0) * .9);
  background: radial-gradient(ellipse 50% 60% at 50% 70%, rgba(255, 140, 50, .38), transparent 70%); }
.hatchery.t1 .ht-lamp { opacity: calc(var(--heat, 0) * .45); }
.hatchery.still .ht-lamp { opacity: .1; transition: opacity .2s; }
.hatchery.still .arm-box { filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)) brightness(.7); }
.ht-xray { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); opacity: .5; mix-blend-mode: screen; animation: ht-x .18s steps(2) infinite; pointer-events: none; }
.ht-xray canvas { filter: brightness(3) sepia(1) hue-rotate(-20deg); }
@keyframes ht-x { 50% { opacity: .2; } }
.ht-runes { position: absolute; left: 50%; top: 62%; z-index: 2; width: 0; height: 0; pointer-events: none; }
.ht-rune { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; transform: rotate(var(--a)) translateX(min(190px, 40vw)) rotate(45deg); background: #2a2230; box-shadow: 0 0 0 3px #120e18; transition: background .15s, box-shadow .15s; }
.ht-rune::after { content: ''; position: absolute; inset: 5px; background: #120e18; }
.ht-rune.on { background: #f2c45a; box-shadow: 0 0 0 3px #57331f, 0 0 18px 4px rgba(242, 196, 90, .7); }
.ht-runes.all .ht-rune { animation: ht-rune 1s steps(2) infinite; }
@keyframes ht-rune { 50% { background: #fff0a8; } }
.ht-glyph { position: absolute; line-height: 0; }
.ht-glyph canvas { display: block; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.ht-glyph.on canvas { filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(242, 196, 90, .75)); }

.qr-pick { position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; transform-origin: 0 0; line-height: 0; }
.qr-pick canvas { display: block; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.qr-spot { position: absolute; z-index: 3; line-height: 0; pointer-events: none; }
.qr-spot canvas { display: block; filter: drop-shadow(0 0 6px rgba(255, 220, 120, .8)); }
.qr-spot.pop { animation: qr-pop .25s steps(3); }
@keyframes qr-pulse { 50% { opacity: .45; } }
@keyframes qr-pop { from { transform: scale(0); } }
.arm-box.holds { filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)) brightness(1.4); }
.quarry.hot .arm-box { filter: drop-shadow(0 0 18px rgba(255, 120, 40, .9)) sepia(1) saturate(4) hue-rotate(-30deg) brightness(1.15); }
.quarry.cooled .arm-box { transition: filter 1.2s steps(6); }
.qr-trail { position: absolute; bottom: 50%; z-index: -1; line-height: 0; pointer-events: none; }
.qr-trail canvas { display: block; filter: drop-shadow(0 0 10px rgba(255, 138, 58, .7)); }

.emerge { position: absolute; z-index: 6; pointer-events: none; line-height: 0; }
.emerge canvas { display: block; }
.emerge canvas { filter: drop-shadow(3px 0 0 var(--rc)) drop-shadow(-3px 0 0 var(--rc)) drop-shadow(0 3px 0 var(--rc)) drop-shadow(0 -3px 0 var(--rc)) drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 60%, transparent)); }
.emerge-glow { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 30%, transparent), transparent); animation: throb 1.2s infinite; }

.col-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.col-tab { display: flex; align-items: center; gap: 8px; }
.hatchery .arm-stage { padding-bottom: 72px; }

.lunch.slowmo .arm-stage, .brew.slowmo .arm-stage { transform: scale(1.14); }
.lunch .arm-stage, .brew .arm-stage, .encore .arm-stage { padding-bottom: 72px; }
.lunch.leak:not(.lit) .arm-halo, .brew.leak:not(.lit) .arm-halo, .encore.leak:not(.lit) .arm-halo { opacity: var(--leak, 0); transition: opacity .15s; }
.lunch.still .arm-box { filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)) brightness(.6) saturate(.4); }
.lu-dot { position: absolute; z-index: 3; transform: translate(-50%, -50%); opacity: .9; pointer-events: none; animation: blink 1s steps(1) infinite; }
.lu-dot.gold { filter: drop-shadow(0 0 4px rgba(242, 196, 90, .6)); }
.lu-dot.on { animation: none; opacity: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--lc) 80%, transparent)); }
.lu-dot.gone { opacity: 0; transition: opacity .3s steps(3); }
.lu-tab { position: absolute; z-index: 4; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 0 8px rgba(255, 220, 120, .7)); animation: qr-pulse .6s steps(2) infinite; }
.lu-coin { position: absolute; z-index: 7; line-height: 0; pointer-events: none; }
.lu-crumb { position: absolute; z-index: 7; pointer-events: none; }
.lunch.stuck .arm-box { transition: none; }
.lu-spot { position: absolute; left: calc(50% - min(170px, 47%)); top: 0; width: min(340px, 94%); height: 100%; pointer-events: none; opacity: 0; transition: opacity .4s; background: linear-gradient(180deg, rgba(255, 241, 176, .28), rgba(255, 241, 176, .06) 70%, transparent); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
.lunch.spot .lu-spot { opacity: 1; }
.lunch.steam .arm-box::after, .brew.fume .arm-box::after, .dock.steam .arm-box::after { content: ''; position: absolute; left: 30%; top: -10%; width: 40%; height: 30%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 248, 238, .35), transparent); animation: lu-steam 1.4s steps(6) infinite; }
.dock.steam .arm-box::after { left: calc(var(--sx, 50%) - 20%); top: calc(var(--sy, 5%) - 15%); }
.brew.fume .arm-box::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 45%, transparent), transparent); }
@keyframes lu-steam { from { transform: translateY(0) scale(.7); opacity: .9; } to { transform: translateY(-60px) scale(1.3); opacity: 0; } }
.bw-swirl { position: absolute; z-index: 3; line-height: 0; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; transition: opacity .2s; }
.bw-swirl.gone, .bw-spoon.gone { opacity: 0 !important; transition: opacity .3s steps(3); }
.bw-spoon { position: absolute; line-height: 0; pointer-events: none; transform: translate(-29%, -79%); }
.bw-bit { position: absolute; z-index: 7; line-height: 0; pointer-events: none; }
.brew.still .arm-box { filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)) brightness(.6) saturate(.4); }
.brew.still .bw-swirl { opacity: .1 !important; }
.bw-runes { position: absolute; left: 50%; top: 62%; z-index: 2; width: 0; height: 0; pointer-events: none; }
.bw-rune { position: absolute; left: 0; top: 0; line-height: 0; transform: rotate(var(--a)) translateX(min(190px, 40vw)) rotate(calc(var(--a) * -1)) translate(-50%, -50%); }
.bw-rune.on { filter: drop-shadow(0 0 8px rgba(154, 255, 216, .8)); }
.bw-runes.all .bw-rune { animation: bw-rune 1s steps(2) infinite; }
@keyframes bw-rune { 50% { filter: drop-shadow(0 0 14px rgba(200, 255, 192, 1)) brightness(1.3); } }

.encore.slowmo .arm-stage, .dock.slowmo .arm-stage { transform: scale(1.14); }
.dock .arm-stage { padding-bottom: 72px; }
.encore.still .arm-box { filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)) brightness(.6) saturate(.4); }
.ec-fly { position: absolute; z-index: 6; line-height: 0; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 106, 208, .6)); }
.ec-fly.gold { filter: drop-shadow(0 0 6px rgba(242, 196, 90, .7)); }
.ec-spot { position: absolute; top: 4px; z-index: 1; width: min(160px, 40%); height: 115%; pointer-events: none; transform-origin: 50% 0; }
.ec-spot canvas { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.ec-spot i { position: absolute; left: 0; right: 0; top: 20px; bottom: 0; background: linear-gradient(180deg, rgba(255, 240, 200, .3), rgba(255, 240, 200, .04) 80%, transparent); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.ec-spot:first-child { left: calc(50% - min(300px, 48%)); animation: ec-sweep 3s steps(12) infinite alternate; }
.ec-spot:last-child { right: calc(50% - min(300px, 48%)); animation: ec-sweep 3s steps(12) infinite alternate-reverse; }
@keyframes ec-sweep { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }

.arm-box.brace { filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)) brightness(1.7) contrast(1.2); }
.dk-pad { position: absolute; z-index: 1; line-height: 0; pointer-events: none; }
.dk-pad canvas { display: block; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.dk-pad.on canvas { filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)) drop-shadow(0 0 8px rgba(106, 255, 138, .5)); }
.dk-flame { position: absolute; z-index: -1; line-height: 0; pointer-events: none; opacity: 0; }
.dk-flame canvas { display: block; filter: drop-shadow(0 0 8px rgba(255, 140, 50, .8)); }
.dk-flame.on { opacity: 1; }
.dk-flame.big.on { animation: dk-roar .5s steps(4); }
@keyframes dk-roar { from { filter: brightness(1.8); } }
.dock.warn .arm-box { filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)) brightness(.75) sepia(.7) hue-rotate(-30deg); }
.dk-beam { position: absolute; z-index: 1; left: calc(50% - 90px); top: 0; width: 180px; height: 100%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(106, 224, 255, .18) 30%, rgba(106, 224, 255, .3) 50%, rgba(106, 224, 255, .18) 70%, transparent); animation: throb 1.2s infinite; }

.garage.slowmo .arm-stage, .trawl.slowmo .arm-stage { transform: scale(1.14); }
.garage .arm-stage { padding-bottom: 96px; }
.trawl .arm-stage { padding-bottom: 72px; }
.gr-tach { position: absolute; z-index: 4; line-height: 0; transform: translateX(-50%); pointer-events: none; transition: opacity .3s; }
.garage.nitro .gr-tach > canvas, .garage.nitro .gr-gear { filter: drop-shadow(0 0 10px rgba(122, 208, 255, .7)); }
.gr-needle { position: absolute; line-height: 0; transform: translateX(-50%); }
.garage.redline .gr-needle { filter: drop-shadow(0 0 6px rgba(255, 90, 58, .8)); }
.gr-gear { position: absolute; right: 100%; top: 50%; margin-right: 10px; line-height: 0; transform: translateY(-50%); }
.gr-tach.gone { opacity: 0; }
.gr-puff { position: absolute; z-index: 6; pointer-events: none; }
.garage.stall .arm-box { filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)) brightness(.55) saturate(.3); }
.gr-runway { position: absolute; left: 50%; bottom: 70px; z-index: 2; display: flex; gap: min(34px, 6vw); transform: translateX(-50%); pointer-events: none; }
.gr-runway canvas { filter: drop-shadow(0 0 6px rgba(255, 194, 74, .6)); }

.tw-water { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(42, 120, 168, .62), rgba(10, 30, 64, .94) 60%); box-shadow: inset 0 3px 0 rgba(216, 244, 255, .7); transition: opacity .3s steps(3); }
.tw-crest { position: absolute; left: 0; right: 0; image-rendering: pixelated; animation: tw-wave 1.6s steps(16) infinite; }
.tw-ripple { position: absolute; inset: 0; opacity: .5; image-rendering: pixelated; animation: tw-wave 3.2s steps(16) infinite reverse; }
@keyframes tw-wave { to { background-position: var(--tw, 48px) 0; } }
.tw-water.gone { opacity: 0; }
.tw-rope { position: absolute; top: 6px; z-index: 2; transform-origin: 50% 0; pointer-events: none; image-rendering: pixelated; background-repeat: repeat-y; transition: opacity .2s; }
.tw-hook, .tw-gaff { position: absolute; top: 0; z-index: 4; line-height: 0; pointer-events: none; transition: opacity .2s; }
.tw-gaff { z-index: 2; }
.tw-hook canvas, .tw-gaff canvas { display: block; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
.trawl.slack .tw-rope { filter: brightness(.7); }
.tw-rope.gone, .tw-hook.gone, .tw-gaff.gone { opacity: 0; }
.tw-ping { position: absolute; left: 50%; top: 45%; z-index: 2; line-height: 0; pointer-events: none; animation: tw-ping 1.2s steps(8) forwards; }
.tw-ping canvas { display: block; filter: drop-shadow(0 0 6px rgba(122, 255, 232, .7)); }
@keyframes tw-ping { to { opacity: .2; } }
.tw-drip { position: absolute; left: 50%; top: 100%; line-height: 0; pointer-events: none; opacity: .85; }
.tw-drip canvas { display: block; }
.brew.t1 .bw-swirl { display: none; }

.sprout, .combo { user-select: none; touch-action: none; }
.sprout.slowmo .arm-stage, .combo.slowmo .arm-stage { transform: scale(1.14); }
.sprout .arm-stage, .combo .arm-stage { padding-bottom: 72px; }
.sprout.still .arm-box { filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)) brightness(.7) saturate(.5); }
.sp-can { position: absolute; z-index: 6; line-height: 0; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.sp-can canvas, .sp-pest canvas { display: block; }
.sp-drop { position: absolute; z-index: 5; line-height: 0; pointer-events: none; }
.sp-drop canvas { display: block; }
.sp-pest { position: absolute; z-index: 6; line-height: 0; pointer-events: none; transform-origin: 50% 100%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); animation: fade-in .3s steps(3); }
.sp-pest.munch canvas { animation: sp-munch .16s steps(2) infinite; }
@keyframes sp-munch { 50% { transform: translateY(-3px); } }
.sp-pest.gold { filter: drop-shadow(0 0 6px rgba(242, 196, 90, .8)); }
.sp-flies { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sp-flies i { position: absolute; line-height: 0; animation: sp-fly 3.2s steps(16) infinite alternate; animation-delay: var(--d); }
.sp-flies canvas { display: block; filter: drop-shadow(0 0 6px rgba(232, 255, 122, .7)); }
@keyframes sp-fly { to { transform: translate(40px, -30px); } }
.sprout.t4 .arm-stage { background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(216, 208, 255, .12), transparent); }

.cb-row { position: absolute; z-index: 5; display: flex; gap: 6px; transform: translateX(-50%); transform-origin: 0 0; pointer-events: none; transition: opacity .3s; }
.cb-row.ready .cb-key.cur { animation: cb-cur .14s steps(2) infinite; background: #3a3a4a; }
.cb-key { width: 33px; height: 33px; display: flex; align-items: center; justify-content: center; background: #18161e; box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 rgba(0,0,0,.4); }
.cb-key.cur { background: #2a2a3a; box-shadow: 0 0 0 3px #f4f2ec, 0 0 0 6px var(--ink); animation: cb-cur .5s steps(2) infinite; }
@keyframes cb-cur { 50% { transform: translateY(-3px); } }
.cb-key.ok { background: #7aff6a; }
.combo.t4 .cb-key.ok { background: #f2c45a; }
.cb-pad { position: absolute; z-index: 5; display: flex; align-items: center; gap: 22px; padding: 12px 14px; background: #24222c; box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.08); transition: opacity .3s; }
.combo.t4 .cb-pad { background: #b08a2a; box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 #7a5a14, inset 0 3px 0 #f2d88a; }
.cb-dpad { display: grid; grid-template: repeat(3, 33px) / repeat(3, 33px); }
.cb-dpad .u { grid-area: 1 / 2; }
.cb-dpad .l { grid-area: 2 / 1; }
.cb-dpad .r { grid-area: 2 / 3; }
.cb-dpad .d { grid-area: 3 / 2; }
.cb-dpad i { grid-area: 2 / 2; background: #3a3a48; }
.cb-pad { pointer-events: none; transform-origin: 50% 0; }
.cb-btn { display: flex; align-items: center; justify-content: center; background: #3a3a48; box-shadow: inset 0 -4px 0 #18161e; }
.cb-btn.down { animation: cb-down .16s steps(2); }
.cb-btn.held { animation: cb-down .5s steps(2); }
@keyframes cb-down { from { background: #7aff6a; box-shadow: inset 0 4px 0 #18161e; } }
.cb-ab { display: flex; align-items: flex-start; gap: 10px; }
.cb-ab .cb-btn { width: 39px; height: 39px; background: #c8302a; box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 #7a1a14; }
.cb-ab .cb-btn.b { margin-top: 18px; }
.cb-flash { position: absolute; z-index: 5; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none; opacity: 0; }
.cb-flash.hit { animation: cb-flash .3s steps(3); }
@keyframes cb-flash { from { opacity: 1; background: #ffffff; box-shadow: 0 0 18px 8px var(--bc); } }
.cb-row.gone, .cb-pad.gone, .cb-flash.gone { opacity: 0; pointer-events: none; }
.cb-key.kit, .cb-key.kit.cur, .cb-key.kit.ok, .combo.t4 .cb-key.kit.ok, .cb-row.ready .cb-key.kit.cur { width: auto; height: auto; background: none; box-shadow: none; }
.cb-key.kit canvas, .cb-pad.kit canvas { display: block; }
.cb-pad.kit, .combo.t4 .cb-pad.kit { padding: 0; gap: 0; background: none; box-shadow: none; filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)); }
.combo.glitch .arm-box { animation: cb-glitch .1s steps(2) infinite; filter: hue-rotate(90deg) saturate(2); }
.combo.glitch .cb-row { animation: cb-glitch-row .08s steps(2) infinite; }
@keyframes cb-glitch { 50% { transform: translateX(4px) skewX(6deg); } }
@keyframes cb-glitch-row { 50% { transform: translateX(calc(-50% + 4px)) skewX(6deg); } }
.boutique.slowmo .arm-stage { transform: scale(1.14); }
.boutique .arm-stage { padding-bottom: 72px; }
.boutique .arm-box { transition: translate .08s steps(1); }
.boutique.knot .arm-box { filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)) brightness(.9) sepia(.3) hue-rotate(-20deg); }
.bq-rope { position: absolute; z-index: 4; pointer-events: none; }
.mystery { cursor: grab; user-select: none; touch-action: none; }
.mystery.held { cursor: grabbing; }
.mystery .arm-stage { padding-bottom: 72px; }
.mystery.slowmo .arm-stage { transform: scale(1.14); }
.my-ring { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.my-em { position: absolute; transform: translate(-50%, -50%); transform-origin: 0 0; display: flex; flex-direction: column; align-items: center; gap: 6px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.45)); }
.my-em canvas { display: block; image-rendering: pixelated; }
.my-tag { font-size: 12px; line-height: 14px; letter-spacing: 1px; color: var(--muted, #a8a2c0); white-space: nowrap; }
.my-em.hi { filter: drop-shadow(0 0 10px #f2c45a) brightness(1.3); }
.my-em.hi .my-tag { color: #fff1b0; }
.my-em.won { filter: drop-shadow(0 0 14px var(--wc)) brightness(1.2); }
.my-em.won .my-tag { color: var(--wc); }
.my-meter .ht-fill { background: linear-gradient(90deg, #3a1a6a, #8a5ad8 55%, #f2c45a 85%, #fff1b0); background-size: 300px 100%; }
.mystery.final .my-meter .ht-label { animation: none; color: #f2c45a; }