:root {
  --ink: #173744;
  --muted: #647278;
  --paper: #fffbf0;
  --navy: #183a5b;
  --navy-deep: #0e2741;
  --teal: #36b8ae;
  --teal-deep: #197a78;
  --coral: #ef765f;
  --coral-deep: #b8493c;
  --gold: #f6bd48;
  --gold-deep: #b87813;
  --mint: #a6e5d8;
  --purple: #9b7bd9;
  --units: 8;
  --playhead: -1;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; }
body { margin: 0; min-width: 1060px; min-height: 700px; overflow: hidden; color: var(--ink); background: #f0eee6; font-family: ui-rounded,"Avenir Next","Nunito Sans",system-ui,sans-serif; }
button { font: inherit; }
button:focus-visible { outline: 4px solid #102e56; outline-offset: 4px; }
.game-shell { width: min(1280px,calc(100vw - 48px)); height: min(840px,calc(100vh - 34px)); margin: 17px auto; display: grid; grid-template-rows: 48px minmax(470px,1fr) 160px; gap: 13px; }
.microbar { display: grid; grid-template-columns: 220px 1fr 52px; gap: 20px; align-items: center; }
.meter-chip { display: grid; gap: 1px; padding: 5px 14px; border: 1px solid #d5d4ca; border-radius: 15px; background: rgba(255,255,255,.76); }
.meter-chip span { color: var(--teal-deep); font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.meter-chip strong { font-size: 15px; }
.measure-status { display: flex; justify-content: center; align-items: center; gap: 13px; }
.measure-status b { min-width: 92px; font-size: 14px; text-align: right; }
.measure-status span { width: min(360px,45vw); height: 9px; overflow: hidden; border-radius: 99px; background: #d1d4ce; }
.measure-status i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--teal); transition: width 160ms,background 160ms; }
.measure-status i.is-over { background: var(--coral); }
.mute { width: 52px; height: 46px; border: 1px solid #d1d2c8; border-radius: 15px; background: var(--paper); color: var(--navy); box-shadow: 0 4px 0 #c4c3b8; cursor: pointer; font-size: 20px; font-weight: 950; }

.factory { position: relative; overflow: hidden; border: 1px solid #fff; border-radius: 32px; background: linear-gradient(180deg,rgba(255,249,233,.36) 0 72%,rgba(228,201,154,.5) 72% 100%),url("./assets/scene-plate.webp") center 46%/cover no-repeat; box-shadow: 0 20px 58px rgba(52,47,32,.17); isolation: isolate; }
.factory::before { content:""; position:absolute; inset:0; z-index:-4; opacity:.45; background: radial-gradient(circle at 10% 15%,#ffd972 0 2%,transparent 2.2%),radial-gradient(circle at 84% 20%,#7bd7cb 0 2%,transparent 2.2%),linear-gradient(90deg,transparent 49.6%,rgba(65,72,69,.06) 50%,transparent 50.4%); background-size: 180px 160px,220px 190px,100% 100%; }
.pipework { position:absolute; inset:0 0 auto; height:105px; z-index:-2; border-bottom:5px solid #c99745; background:linear-gradient(#f9e5b7,#f5d994); opacity:.65; }
.pipework i { position:absolute; top:26px; width:25%; height:22px; border:7px solid #a97835; border-bottom:0; border-radius:18px 18px 0 0; }
.pipework i:nth-child(1){left:7%}.pipework i:nth-child(2){left:38%}.pipework i:nth-child(3){right:5%}
.robot-band { position:absolute; left:7%; right:7%; top:32px; height:113px; display:grid; grid-template-columns:repeat(4,1fr); gap:9%; justify-items:center; }
.robot { position:relative; width:84px; height:90px; border:5px solid var(--navy-deep); border-radius:26px 26px 19px 19px; background:var(--teal); box-shadow:0 7px 0 #11615f; transform-origin:50% 100%; transition:transform 120ms,filter 120ms; }
.robot:nth-child(2){background:var(--coral);box-shadow:0 7px 0 var(--coral-deep)}.robot:nth-child(3){background:var(--gold);box-shadow:0 7px 0 var(--gold-deep)}.robot:nth-child(4){background:var(--purple);box-shadow:0 7px 0 #604c9a}
.robot::before { content:""; position:absolute; left:15px; right:15px; top:14px; height:36px; border-radius:13px; background:var(--navy-deep); box-shadow:inset 0 0 0 2px #fff2; }
.robot::after { content:"••"; position:absolute; left:0; right:0; top:12px; color:#aafbf3; font-size:23px; font-weight:1000; letter-spacing:6px; text-align:center; }
.robot i { position:absolute; left:34px; top:-18px; width:7px; height:20px; border-radius:5px; background:var(--navy-deep); }
.robot i::before{content:"";position:absolute;left:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--gold)}
.robot b { position:absolute; left:50%; bottom:7px; transform:translateX(-50%); color:white; font-size:21px; }
.robot.is-playing { transform:translateY(-9px) rotate(-3deg); filter:brightness(1.15); }

.pulse-towers { position:absolute; left:10%; right:10%; top:153px; height:92px; display:grid; grid-template-columns:repeat(var(--meter,4),1fr); align-items:start; pointer-events:none; }
.pulse-tower { position:relative; justify-self:center; width:72px; height:82px; display:grid; place-items:center; border:6px solid #b1781a; border-radius:32px 32px 18px 18px; background:linear-gradient(#fff5bd,#f4ba42); box-shadow:0 8px 0 #875716,0 0 0 7px #fff8db; color:#75480a; font-size:22px; font-weight:1000; transition:transform 110ms,filter 110ms; }
.pulse-tower::before { content:""; position:absolute; width:34px; height:34px; border-radius:50%; background:#fff9d2; box-shadow:0 0 18px #ffe576; }
.pulse-tower b { position:relative; z-index:1; }
.pulse-tower.is-active,.pulse-tower.is-pointed { transform:translateY(-10px) scale(1.08); filter:brightness(1.15); }

.belt-shell { position:absolute; left:5%; right:5%; top:225px; height:208px; padding:28px 34px 48px; border:8px solid #c28b37; border-radius:35px; background:var(--navy); box-shadow:0 13px 0 var(--navy-deep),inset 0 0 0 4px #315b7e; }
.belt-track { position:relative; height:122px; overflow:hidden; border:4px solid #0a233c; border-radius:22px; background:repeating-linear-gradient(90deg,#244d6e 0 calc(100% / var(--units) - 3px),#3a6785 calc(100% / var(--units) - 3px) calc(100% / var(--units))); box-shadow:inset 0 8px 18px #071d2e88; }
.measure-grid { position:absolute; inset:12px; display:grid; grid-template-columns:repeat(var(--units),1fr); grid-auto-flow:column; gap:5px; align-items:stretch; }
.rhythm-block { position:relative; grid-column:span var(--span); min-width:0; border:4px solid #fff7; border-radius:17px; display:grid; place-items:center; color:#fff; box-shadow:0 7px 0 var(--shadow); cursor:grab; touch-action:none; transition:transform 140ms,filter 140ms; }
.rhythm-block:active { cursor:grabbing; }.rhythm-block:hover { transform:translateY(-3px); }
.rhythm-block.quarter { background:var(--coral);--shadow:var(--coral-deep)}.rhythm-block.half { background:var(--gold);--shadow:var(--gold-deep);color:#5a3b08}.rhythm-block.eighth-pair { background:var(--purple);--shadow:#604c9a}.rhythm-block.rest { background:rgba(166,229,216,.72);--shadow:#4a9d95;color:#155f61;border-style:dashed;backdrop-filter:blur(5px)}
.rhythm-block b { font-size:24px; line-height:1; }.rhythm-block small { position:absolute; right:8px; bottom:5px; font-size:10px; font-weight:950; }
.rhythm-block.is-playing { transform:translateY(-7px) scale(1.02); filter:brightness(1.2) drop-shadow(0 0 13px white); }
.playhead { position:absolute; z-index:9; left:calc((var(--playhead) + .5) * 100% / var(--units)); top:0; bottom:0; width:5px; border-radius:99px; background:#fff5a3; box-shadow:0 0 16px #ffe35c; opacity:0; transition:left 100ms linear; }
.factory.is-playing .playhead { opacity:1; }
.belt-teeth { position:absolute; left:35px; right:35px; bottom:16px; height:21px; border-radius:99px; background:repeating-linear-gradient(90deg,#d5a24a 0 18px,#7c531d 18px 29px); }

.pulse-pads { position:absolute; left:16%; right:16%; bottom:18px; display:grid; grid-template-columns:repeat(var(--meter,4),1fr); gap:18px; }
.pulse-pad { min-height:53px; border:3px solid #b88024; border-radius:17px; background:#f8c557; color:#5e3b07; box-shadow:0 6px 0 #8e5a13; font-weight:950; cursor:pointer; opacity:.54; transition:transform 100ms,opacity 100ms; }
.factory.is-playing .pulse-pad { opacity:1; }.pulse-pad:active,.pulse-pad.is-hit { transform:translateY(5px); box-shadow:0 1px 0 #8e5a13; }
.overflow-flag { position:absolute; z-index:12; right:7%; top:241px; transform:rotate(5deg) translateY(-16px); opacity:0; padding:9px 14px; border-radius:13px; background:var(--coral); color:white; box-shadow:0 5px 0 var(--coral-deep); font-weight:1000; transition:opacity 140ms,transform 140ms; }
.overflow-flag.is-on { opacity:1; transform:rotate(5deg); }
.drop-ghost { position:fixed; z-index:999; min-width:110px; min-height:60px; display:grid; place-items:center; border-radius:16px; background:var(--coral); color:white; box-shadow:0 12px 28px #0005; opacity:0; pointer-events:none; transform:translate(-50%,-50%); font-weight:950; }
.drop-ghost.is-on { opacity:1; }
.impact { position:absolute; z-index:20; left:50%; top:52%; transform:translate(-50%,-50%) scale(.7); opacity:0; color:white; font-size:46px; font-weight:1000; text-shadow:0 4px 0 var(--navy-deep),0 12px 30px #0004; pointer-events:none; }
.impact.is-on { animation:impact 900ms ease-out; }
.toast { position:absolute; z-index:21; left:50%; bottom:14px; transform:translate(-50%,10px); opacity:0; padding:10px 18px; border-radius:99px; background:var(--navy-deep); color:white; font-size:13px; font-weight:850; transition:opacity 160ms,transform 160ms; }
.toast.is-on { opacity:1; transform:translate(-50%,0); }

.action-tray { display:grid; grid-template-columns:minmax(320px,.74fr) minmax(650px,1.65fr); gap:25px; align-items:center; padding:20px 27px; border-radius:28px; background:var(--paper); box-shadow:0 12px 35px rgba(49,47,34,.12); }
.mission-copy span { color:var(--teal-deep); font-size:11px; font-weight:950; letter-spacing:.13em; text-transform:uppercase; }
.mission-copy h1 { margin:5px 0; max-width:450px; font-size:27px; line-height:1.06; letter-spacing:-.03em; }
.mission-copy p { margin:0; color:var(--muted); font-size:13px; font-weight:700; }
.controls { display:flex; justify-content:flex-end; align-items:center; gap:10px; min-width:0; }
.choice,.primary,.secondary,.bank-block,.record-pad { min-height:62px; border:0; border-radius:17px; cursor:pointer; transition:transform 140ms,box-shadow 140ms; font-weight:900; }
.choice:hover,.primary:hover,.secondary:hover,.bank-block:hover,.record-pad:hover { transform:translateY(-3px); }
.choice:active,.primary:active,.secondary:active,.bank-block:active,.record-pad.is-recording { transform:translateY(2px) scale(.98); }
.choice { min-width:145px; max-width:185px; padding:10px 15px; background:#e9eeec; color:var(--ink); }.choice small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.primary { min-width:190px; padding:13px 23px; color:white; background:var(--teal-deep); box-shadow:0 7px 0 #0e5454; font-size:16px; }.primary.gold{color:#533806;background:var(--gold);box-shadow:0 7px 0 var(--gold-deep)}
.secondary { min-width:145px; padding:12px 18px; background:#e4efeb; color:var(--teal-deep); box-shadow:0 5px 0 #b6cec5; }
.record-pad { min-width:220px; padding:12px 22px; color:white; background:var(--coral); box-shadow:0 8px 0 var(--coral-deep); font-size:17px; touch-action:none; }.record-pad.is-recording{box-shadow:0 2px 0 var(--coral-deep);background:#df5d4c}
.block-bank { display:flex; align-items:center; gap:8px; }.bank-block{min-width:82px;padding:8px 10px;color:white;background:var(--coral);box-shadow:0 6px 0 var(--coral-deep);touch-action:none}.bank-block[data-type="half"]{min-width:116px;color:#523708;background:var(--gold);box-shadow:0 6px 0 var(--gold-deep)}.bank-block[data-type="eighth-pair"]{background:var(--purple);box-shadow:0 6px 0 #604c9a}.bank-block[data-type="rest"]{color:#145c5d;background:var(--mint);box-shadow:0 6px 0 #4a9d95}.bank-block small{display:block;font-size:10px}
.feedback { max-width:300px; font-size:15px; font-weight:800; line-height:1.35; }.feedback strong{display:block;font-size:20px}
@keyframes impact{15%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(-2deg)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(.95)}}
@media(max-height:770px){.game-shell{grid-template-rows:42px minmax(430px,1fr) 142px}.mission-copy h1{font-size:24px}.action-tray{padding-block:14px}.robot-band{top:20px;transform:scale(.88);transform-origin:top}.pulse-towers{top:132px}.belt-shell{top:203px;height:194px}.pulse-pads{bottom:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}