:root{color-scheme:light;--ink:#243b50;--muted:#7c8d99;--green:#167c75;--paper:#eaf3f4;--navy:#284b64;--gold:#ffcb64}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 0,#d4eeea,transparent 48%),radial-gradient(ellipse at 90% 80%,#f8ebcf,transparent 60%),var(--paper);font:14px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}a{color:var(--green);text-decoration:none}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #28a99a;outline-offset:3px}button{transition:transform .13s,box-shadow .13s}button:active:not(:disabled){transform:translateY(2px)}header{height:58px;max-width:620px;padding:10px 20px;margin:auto;display:flex;align-items:center;justify-content:space-between}header>a{font-size:20px;font-weight:850;letter-spacing:-.04em}header>div{display:flex;gap:8px;align-items:center}header button,header #language{border:1px solid #fff9;background:#ffffff80;border-radius:10px;color:#446577;padding:8px 11px;font-size:12px}main{max-width:620px;padding:0 12px 22px;margin:auto}.game{height:calc(100dvh - 72px);min-height:480px;max-height:990px;padding:17px;background:linear-gradient(150deg,#fffffff5,#f5f9f8f5);border-radius:27px;border:2px solid #fff;box-shadow:0 8px 0 #cededa,0 16px 40px #28444a16;display:flex;flex-direction:column;overflow:hidden}.heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none}.eyebrow{font-size:9px;letter-spacing:.19em;color:#70a096;font-weight:800}.heading h2{font-size:21px;margin:4px 0;line-height:1.1;letter-spacing:-.025em}.heading p{font-size:10px;color:var(--muted);margin:0}.score{display:flex;align-items:flex-end;flex-direction:column;gap:1px;flex:none}.score #percent{font-size:23px;font-weight:850;letter-spacing:-.06em;color:var(--green);line-height:1.1}.score #progress{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.track{height:6px;border-radius:5px;background:#e4ece8;margin:11px 0 2px;overflow:hidden;flex:none;box-shadow:inset 0 1px 2px #314a3910}.track i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#62c5b0,#1b9c90);box-shadow:0 0 7px #5ccab880;transition:width .2s}.scene{flex:1;min-height:100px;position:relative;display:grid;place-items:center;isolation:isolate}canvas{width:100%;height:100%;display:block}.belt-info{display:flex;align-items:center;justify-content:space-between;color:#778e9b;font-size:10px;padding:1px 5px 8px;gap:8px;flex:none;min-height:22px}#belt-count{font-weight:700;color:var(--navy)}#belt-slots{display:flex;gap:4px;margin-right:auto}#belt-slots i{width:9px;height:9px;border-radius:3px;background:#e2e9e7;border:1px solid #cedcda}#belt-slots i.occupied{background:#f9c967;border-color:#e2aa48;box-shadow:inset 0 1px #fff9}.game.belt-full #belt-count{color:#b37420}.section-label{display:flex;align-items:center;gap:8px;font-size:11px;margin:2px 2px 6px;flex:none}.section-label strong{font-weight:800}.section-label span{font-size:10px;color:var(--muted)}#wait-note{margin-right:auto}#wait-capacity{font-size:10px;font-variant-numeric:tabular-nums;color:#66877d;white-space:nowrap}.waiting{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;background:#e9eeeb;padding:8px;border-radius:17px;box-shadow:inset 0 2px 3px #3152430b;flex:none;border:1px solid #e0e7e0}.waiting button{height:54px;min-width:0;border:1px dashed #cbd8d1;border-radius:11px;background:linear-gradient(#f6f9f3,#f0f5ed);position:relative;padding:0;color:#b3c3b9}.empty-marker{font-size:18px;font-weight:300;display:block}.empty-number{position:absolute;bottom:4px;right:5px;font-size:8px;opacity:.75}.waiting .piece{border:1px solid #c6dfd5;background:#f8fffa;box-shadow:0 3px 0 #bfcfc5}.waiting .piece::after{content:'↻';position:absolute;bottom:1px;left:5px;font-size:11px;color:var(--green);font-weight:900}.game.wait-warning #wait-capacity{color:#c47b28}.game.wait-warning .waiting{background:#fbefd9;border-color:#efd8ad}.game.wait-critical .waiting{border-color:#e3aa7d;box-shadow:0 0 0 2px #f9dfbc}.piece{--color:#aaa;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e0e8e6;border-radius:14px;position:relative;color:var(--ink);overflow:visible;min-width:0}.unit-art{display:block;width:34px;height:30px;position:relative;border-radius:11px 11px 9px 9px;background:var(--color);box-shadow:inset 0 3px #ffffff7a,inset 0 -5px #0002,0 3px 3px #2a4a3c16;flex:none;transform:rotate(-5deg);pointer-events:none}.unit-art::before{content:'';position:absolute;width:13px;height:12px;top:-6px;left:11px;border-radius:5px 5px 2px 2px;background:var(--color);box-shadow:inset 0 2px #fff7,inset 0 -3px #0002}.unit-art::after{content:'';position:absolute;left:6px;right:6px;height:7px;top:11px;border-radius:4px;background:#1d3547d9;box-shadow:inset 0 1px 1px #0003}.unit-eyes{position:absolute;z-index:1;top:13px;left:11px;width:3px;height:3px;background:#fff;border-radius:50%;box-shadow:9px 0 #fff}.ammo{position:absolute;top:-5px;right:-4px;min-width:26px;height:24px;display:grid;place-items:center;border-radius:9px;background:#fffef8;color:#26495b;font-size:13px;font-weight:850;border:2px solid white;box-shadow:0 2px 3px #20344a20;font-variant-numeric:tabular-nums;pointer-events:none}.color-code{position:absolute;font-size:8px;color:#82948b;bottom:3px;right:4px;font-weight:600;pointer-events:none}.shortcut{position:absolute;top:5px;left:6px;font-size:9px;color:#a0b0b6;font-weight:700;pointer-events:none}.launch-label{position:absolute;bottom:5px;left:0;right:0;font-size:9px;font-weight:750;color:var(--green);pointer-events:none}.piece.previewed{outline:2px solid #28a791;outline-offset:1px;box-shadow:0 4px 0 #b8dfd0}.piece[aria-disabled=true]{background:#f0f3f0;box-shadow:0 2px #d8e0d9;cursor:default}.piece[aria-disabled=true] .launch-label{color:#8b9a9b}.piece:disabled{cursor:default}.piece.fresh .unit-art{animation:pop .25s ease-out}.piece[aria-disabled=false]:hover{border-color:#7fc3ad;box-shadow:0 5px 0 #c6e2d7}.piece.just-returned{animation:return-glow .8s ease-out}.message-preview{color:var(--green)!important;background:#eaf5e9!important}#message{display:flex;align-items:center;justify-content:center;font-size:11px;text-align:center;height:30px;min-height:30px;line-height:1.35;padding:4px 8px;border-radius:8px;background:#f1f5f0;color:#60816d;margin:7px 0;flex:none}.queue-label{margin-bottom:6px}.queue-label #queue-note{margin-right:auto}.queue-label button{background:transparent;border:0;padding:4px 0 4px 8px;color:var(--green);font-size:10px;font-weight:700}.queues{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;height:88px;flex:none;padding:5px 3px 0}.column{display:flex;flex-direction:column;align-items:stretch;min-width:0;position:relative}.column::before,.column::after{content:'';position:absolute;top:6px;left:7px;right:7px;height:58px;background:#dce8e2;border-radius:12px;z-index:0;border:1px solid #d0dfd6}.column::after{top:3px;left:4px;right:4px;background:#e7efea}.column button{height:65px;min-height:44px;width:100%;z-index:1;box-shadow:0 4px 0 #ccded4;padding-bottom:10px}.column .unit-art{margin-top:-2px}.queue-depth{font-size:9px;font-weight:600;line-height:16px;white-space:nowrap;text-align:center;color:#93a7a4;margin:4px 0 0}.column.empty::before,.column.empty::after{display:none}.column.empty button{border:1px dashed #dbe5df;background:transparent;box-shadow:none;color:#b1c2ba}.column.empty .queue-depth{opacity:.5}footer{display:flex;justify-content:center;gap:8px;flex:none;margin-top:8px;padding-top:6px;border-top:1px solid #edf0e9}footer button{font-size:11px;padding:9px 13px;border:1px solid #dde8e4;border-radius:10px;color:#537a7e;background:#f7faf6;min-height:36px}footer #pause{background:#2b5c68;color:white;border-color:#2b5c68;box-shadow:0 3px 0 #1c434e;min-width:70px}footer #speed{font-weight:800;min-width:44px}footer #reset{color:#899a9a}footer #sound[aria-pressed=true]{color:var(--green);background:#e5f4e9}.guide{padding:34px 12px;font-size:14px;line-height:1.9;color:#6a7b72}.guide h1,.guide h2{font-size:20px;color:var(--ink)}dialog{border:2px solid #fff;border-radius:23px;background:#f5f9f6;max-width:620px;width:calc(100% - 28px);max-height:85dvh;padding:22px;color:var(--ink);box-shadow:0 20px 70px #153d3935}dialog::backdrop{background:#1937418c;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.dialog-heading h2,dialog>h2{font-size:21px;margin:4px 0 14px}.dialog-heading button{background:#e9f0e9;border:0;font-size:23px;border-radius:10px;color:#6e8b84;min-width:36px;min-height:36px}input{padding:12px;border:1px solid #dbe7e0;border-radius:11px;width:100%;background:white;color:var(--ink)}#matches,dialog>p{font-size:12px;color:#82958e}#pictures{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}#pictures button{background:white;border:1px solid #dbe7df;border-radius:14px;padding:10px;color:var(--ink)}#pictures button.current{border:2px solid #30a18b;background:#ecf7ed}#pictures img{width:100%;aspect-ratio:1;object-fit:contain;image-rendering:pixelated}#pictures strong{display:block;font-size:11px}#pictures small{font-size:9px;color:var(--muted)}#queue-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:10px 3px}#queue-list .piece{height:65px;margin:9px 0 12px;pointer-events:none}#queue-list .queue-number{font-size:10px;color:#829c99;text-align:center;display:block}.dialog-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.dialog-actions button,.primary{padding:12px 20px;border:1px solid #d6e3da;border-radius:12px;background:#edf3ed;color:#527769}.dialog-actions .primary,.primary{background:#247e78;border-color:#247e78;color:white;box-shadow:0 4px 0 #155852;font-weight:700}#rules-steps{list-style:none;counter-reset:steps;padding:0;margin:16px 0}#rules-steps li{counter-increment:steps;position:relative;padding:9px 0 9px 44px;font-size:13px;line-height:1.65}#rules-steps li::before{content:counter(steps);position:absolute;left:0;top:12px;width:29px;height:29px;border-radius:10px;background:#e3eee4;display:grid;place-items:center;font-size:12px;font-weight:850;color:#438478}#keyboard-note{font-size:11px;color:#8c9d94}#rules-play{margin-top:10px;width:100%}#paused-overlay,#result{position:absolute;inset:12px;border-radius:24px;background:#f5faf2ed;box-shadow:0 8px 25px #294b3420;align-content:center;text-align:center;padding:20px;backdrop-filter:blur(6px);z-index:5}#paused-overlay[hidden],#result[hidden]{display:none}#paused-overlay>span{display:block;font-size:36px;color:#70a595;font-weight:800}#paused-overlay strong{display:block;font-size:20px;margin:4px 0 20px}#resume{background:#246e70;color:white;border:0;padding:12px 22px;border-radius:12px;font-weight:750;box-shadow:0 4px 0 #184d55}#result strong{font-size:28px;display:block}#result-icon{font-size:49px;display:block;line-height:1.4;color:#e7aa3f;text-shadow:0 3px 0 #fff2b2}#result p{font-size:12px;color:var(--muted)}#result>div{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}#result button,#result a{border:1px solid #d9e6d4;background:#eff6e9;border-radius:10px;padding:11px;font-size:12px;color:var(--green)}#result #next{background:#278d7c;color:white;border-color:#278d7c;box-shadow:0 3px #196556}#celebrate{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}#celebrate i{position:absolute;width:7px;height:11px;top:-16px;animation:confetti 1.8s ease-out forwards;border-radius:2px}.shake{animation:shake .25s linear}#belt-slots.capacity-pop i{animation:return-glow .6s ease-out}.queue-label,#wait-label{letter-spacing:.01em}@keyframes pop{from{transform:translateY(6px) scale(.8) rotate(-5deg)}to{transform:rotate(-5deg)}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@keyframes return-glow{0%{box-shadow:0 0 0 4px #f5ca6790}100%{box-shadow:0 3px 0 #bfcfc5}}@keyframes confetti{to{transform:translate(var(--drift),430px) rotate(420deg);opacity:0}}@media(max-width:380px){header{height:50px;padding:8px 14px}header>a{font-size:18px}header button,header #language{font-size:11px;padding:7px 9px}main{padding:0 8px 20px}.game{height:calc(100dvh - 62px);padding:12px;border-radius:23px}.heading h2{font-size:18px}.section-label span{font-size:9px}#wait-note{max-width:155px}.queues{gap:8px}footer{gap:6px}footer button{padding:8px 10px}#pictures{grid-template-columns:repeat(2,1fr)}}@media(max-height:700px){.game{padding:10px;max-height:none}.heading h2{font-size:17px;margin:3px 0}.heading p{font-size:9px}.eyebrow{font-size:8px}.score #percent{font-size:21px}.track{height:4px;margin:7px 0 0}.scene{min-height:90px}.belt-info{padding-bottom:4px;min-height:18px;font-size:9px}.section-label{margin-bottom:4px;font-size:10px}.section-label span{font-size:8px}.waiting{padding:5px;gap:6px}.waiting button{height:44px}.unit-art{width:30px;height:26px}.unit-art::before{left:9px}.unit-art::after{top:10px}.unit-eyes{top:12px;left:9px}.ammo{height:22px;min-width:24px;font-size:12px}.queues{height:71px;padding-top:4px}.column button{height:52px;min-height:44px}.column::before,.column::after{height:48px}.launch-label{font-size:8px;bottom:3px}.color-code{font-size:7px}.queue-depth{font-size:8px;line-height:12px}#message{height:24px;min-height:24px;font-size:10px;margin:5px 0;padding:3px 5px}footer{margin-top:4px;padding-top:4px}footer button{min-height:32px;padding:7px 11px;font-size:10px}.scene #paused-overlay,.scene #result{inset:4px;padding:12px;border-radius:16px}#result-icon{font-size:32px}#result strong{font-size:22px}#result p{font-size:10px;margin:7px 0}#result button,#result a{padding:9px;font-size:10px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Keep canvas bitmap dimensions out of the flex/grid sizing calculation. */
.scene>canvas{position:absolute;inset:0;width:100%;height:100%}


@media(max-height:650px){.heading .eyebrow,.heading p{display:none}.heading h2{font-size:18px;margin:4px 0}.heading{min-height:33px}.queues{height:56px}.queue-depth{display:none}.waiting{padding:3px 5px}#message{height:22px;min-height:22px}.section-label #wait-note{font-size:8px}}