:root{color-scheme:dark;--bg:#101210;--panel:#191c19;--line:#343a32;--text:#e9ece3;--muted:#a1a99c;--accent:#eca04d;--green:#b7d78b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 'Segoe UI',Arial,sans-serif}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}header{height:94px;border-bottom:1px solid var(--line);padding:0 5%;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:13px;color:var(--text);text-decoration:none;font-size:20px;font-weight:800;letter-spacing:2px;line-height:1.3}.brand small{display:block;font-size:12px;letter-spacing:1px;color:var(--muted);margin-top:5px}.brand-icon{background:var(--accent);color:#171a15;font-size:32px;width:44px;text-align:center}.header-note{font:12px monospace;color:var(--muted);letter-spacing:1px}.tag{border:1px solid var(--line);padding:8px;margin-left:25px}main{max-width:1400px;padding:38px 5% 0;margin:auto}.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{font:12px/1.5 monospace;letter-spacing:2px;color:var(--accent);margin:0 0 12px}h1{font-size:44px;line-height:1.06;letter-spacing:-1.8px;margin:0;font-weight:650}h1 span{color:#a4ad9d}.stats{display:flex;gap:52px}.stats>div{min-width:130px}.stats strong{display:block;font:54px/1.2 monospace;color:var(--accent)}.stats>div+div strong{color:var(--text)}.stat-label,.stats small{font-size:12px;color:var(--muted)}.stat-label{letter-spacing:1px}.toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:26px;gap:20px}.tabs{display:flex;gap:30px}.tabs button{background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);padding:16px 0;font:12px monospace}.tabs button span{font:600 16px 'Segoe UI',sans-serif;margin-left:8px}.tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}.volume{display:flex;align-items:center;gap:10px;font:12px monospace;color:var(--muted)}input[type=range]{width:88px;accent-color:var(--accent)}.workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr);gap:24px}.inventory-panel,.answer-panel{background:var(--panel);border:1px solid var(--line);padding:25px}.panel-heading,.target-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}h2{font-size:22px;line-height:1.3;font-weight:600;margin:0;letter-spacing:-.4px}.round{font:12px monospace;color:var(--muted);white-space:nowrap}.round b{color:var(--text);margin-left:5px}.muted{color:var(--muted);font-size:14px;margin:14px 0 24px}.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-height:260px;align-items:stretch}.slot{position:relative;border:1px solid #454b3e;background:repeating-linear-gradient(0deg,transparent,transparent 35px,#ffffff03 36px),repeating-linear-gradient(90deg,#20251e,#20251e 35px,#ffffff06 36px);color:var(--muted);display:flex;align-items:center;flex-direction:column;justify-content:center;gap:16px;padding:35px 6px 18px;min-width:0}.slot:hover{border-color:#8b947f}.slot.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.slot.selected:before{content:'';height:3px;position:absolute;top:0;left:0;right:0;background:var(--accent)}.slot-number{position:absolute;top:12px;left:12px;font:12px monospace}.slot-check{position:absolute;top:10px;right:10px;color:var(--green)}.footprint{display:grid;grid-template-columns:repeat(var(--w),20px);grid-template-rows:repeat(var(--h),20px);gap:3px}.footprint i{border:1px solid #626a55;background:#72815b16}.selected .footprint i{border-color:#ba8b4c;background:#e9a75418}.slot-size{font:18px monospace;color:var(--text)}.slot small{font:12px monospace;letter-spacing:1px}.slot img{width:70px;height:70px;object-fit:contain}.slot.solved{border-color:#738b58}.slot.failed{border-color:#9b6b58}.board-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:17px;font:12px monospace;color:var(--muted)}.text-button{border:0;background:none;color:var(--text);font-size:14px;padding:8px 0}.tip{border-top:1px solid var(--line);margin-top:20px;padding-top:19px}.tip span{font:12px monospace;letter-spacing:1px;color:#c6ceb9}.tip p{font-size:14px;color:var(--muted);margin:7px 0 0}.answer-panel>.eyebrow{color:var(--muted)}.size-label{border:1px solid var(--line);padding:3px 10px;font:14px monospace}.play-button{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:16px;margin-top:18px;background:#302d23;border:1px solid #75603c;color:var(--accent)}.play-icon{font-size:22px}.play-button b{display:block;font-size:16px;font-weight:600}.play-button small{display:block;font-size:12px;color:var(--muted);margin-top:3px}.key{margin-left:auto;font:12px monospace;border:1px solid #62563f;padding:4px}.audio-status{font-size:12px;color:var(--muted);min-height:34px;padding-top:6px}.choice-heading{display:flex;align-items:center;justify-content:space-between;margin:8px 0 12px;gap:10px}h3{font-size:14px;margin:0}.choice-heading>span{font:12px monospace;color:var(--muted)}.choices{display:grid;gap:8px}.choice{display:flex;align-items:center;gap:12px;background:#21251f;border:1px solid var(--line);padding:12px;color:var(--text);text-align:left;font-size:14px;min-height:54px}.choice:hover:not(:disabled){border-color:#a69c80;background:#2b3027}.choice>span{font:12px monospace;color:var(--muted);border:1px solid #454c3d;padding:2px 6px}.choice.correct{border-color:var(--green);background:#2b3721}.choice.wrong{border-color:#dc8b78;background:#3b2823}.choice:disabled:not(.correct):not(.wrong){opacity:.45}.feedback{font-size:14px;margin-top:12px}.feedback.success{color:var(--green)}.feedback.error{color:#efad99}.primary{width:100%;border:0;background:var(--accent);color:#201c13;padding:12px;font-weight:700;margin-top:14px}.reveal{margin-top:24px;padding:26px;border:1px solid var(--line);background:var(--panel)}.reveal-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.reveal-heading>span{font:12px monospace;color:var(--muted)}.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.item{border:1px solid var(--line);padding:12px;background:#20241e;border-top:2px solid var(--rarity)}.item img{display:block;width:100%;height:85px;object-fit:contain;margin:8px auto 14px}.item b{font-size:14px;display:block;line-height:1.3}.item small{display:block;font-size:12px;color:var(--muted);margin-top:6px}.item.match{background:#2a3023}.size-match{color:var(--green)!important}.merchant.board{grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:60px;gap:3px;min-height:0;grid-auto-flow:row}.merchant .slot{grid-column:span var(--w);grid-row:span var(--h);gap:3px;padding:20px 2px 3px}.merchant .slot-number{top:4px;left:5px;font-size:12px}.merchant .slot-size{font-size:14px}.merchant .slot small,.merchant .footprint{display:none}.merchant .slot img{height:32px;width:32px}.cargo-name{font-size:12px;line-height:1.05;color:var(--muted);padding:0 2px}.merchant .slot-check{top:2px;right:3px}footer{display:flex;justify-content:space-between;gap:20px;font:12px/1.6 monospace;color:#8c9486;padding:30px 0}footer a{color:var(--muted)}[hidden]{display:none!important}@media(max-width:1000px){main{padding:28px 3% 0}.workspace{gap:16px;grid-template-columns:minmax(0,1.1fr) minmax(320px,1fr)}.inventory-panel,.answer-panel{padding:18px}.header-note{display:none}.stats{gap:25px}.tabs{gap:20px}.key{display:none}.board{gap:6px}.slot small{letter-spacing:0}}@media(max-width:760px){header{height:78px}.topline{gap:20px;align-items:flex-start}h1{font-size:32px}.stats{gap:16px}.stats>div{min-width:0}.stats strong{font-size:38px}.stats small{display:none}.stat-label{font-size:12px}.topline .eyebrow{letter-spacing:1px}.toolbar{flex-wrap:wrap;gap:0;padding-bottom:12px}.volume{margin-top:12px}.workspace{grid-template-columns:1fr}.board{min-height:230px}.slot small{font-size:12px}.tabs button span{font-size:14px}.reveal{padding:18px}.reveal-heading{align-items:flex-start}footer{flex-direction:column;gap:6px}.merchant.board{grid-auto-rows:56px}}@media(max-width:420px){.topline{flex-direction:column}.stats{gap:40px}.slot{padding-left:2px;padding-right:2px}.slot small{display:none}.tabs{gap:15px}.tabs button span{margin-left:3px}.cargo-name{font-size:12px}.merchant .slot{padding-top:17px}.merchant .slot-number{display:none}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s,border-color .15s}.playing .play-icon{animation:pulse .5s infinite alternate}@keyframes pulse{to{opacity:.3}}}

.board.single{grid-template-columns:minmax(140px,240px);justify-content:center}.primary:disabled{opacity:.45;cursor:default}.tabs{flex-wrap:wrap;gap:20px}.toolbar{flex-wrap:wrap}.volume{padding-bottom:10px}@media(max-width:420px){.tabs{gap:12px}.tabs button span{font-size:13px}.tabs button{font-size:12px}}

.merchant .slot.marked{background:#433725;border-color:var(--accent)}.selection-label{font:10px monospace;color:var(--accent);letter-spacing:.3px}.merchant .slot-check{font:11px monospace;background:#182115;padding:2px;max-width:100%}.merchant .slot.failed{border:2px solid #dc8b78}.merchant .slot.solved{border:2px solid var(--green)}

/* Match row and column units so labels never distort item dimensions. */
.inventory-panel{container-type:inline-size}.merchant.board{grid-auto-rows:calc((100cqw - 21px)/8)}.merchant .slot{min-height:0;overflow:hidden;padding:0;gap:2px}.merchant .slot-size{white-space:nowrap;font:14px/1 monospace;flex-shrink:0}.merchant .slot img{min-height:0;max-height:55%;max-width:70%;object-fit:contain}.merchant .slot-number,.merchant .cargo-name,.merchant .selection-label{display:none}