/* The garage is a full-screen place; its deck is an overlay, never a second viewport. */
.cap-workshop { --deck-space:270px; --cw-paper:var(--paper,#faf5e2); position:fixed; inset:0; display:none; color:var(--cw-paper); background:transparent; overflow:hidden; }
.screen.cap-workshop.is-active { display:block; padding:0; animation:none; }
.workshop-open :is(#sound-toggle,.camera-controls,#film-frame) { visibility:hidden; }
.workshop-open #game-canvas { pointer-events:none; }
.cap-workshop button,.cw-inspection-tools summary { font:800 14px/1.15 var(--font-body); letter-spacing:0; color:var(--cw-paper); background:#17221ff5; border:1px solid #9ba69b66; border-radius:2px; min-height:44px; padding:10px 14px; cursor:pointer; clip-path:none; transform:none; touch-action:manipulation; transition:transform 120ms cubic-bezier(.23,1,.32,1); }
.cap-workshop button:disabled { color:#b8bcb3; background:#242f2b; opacity:.65; cursor:default; }
.cap-workshop button:focus-visible,.cw-object:focus-visible,.cw-inspection-tools summary:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.cap-workshop button:active:not(:disabled) { transform:scale(.97); transition-duration:80ms; }
.cw-keyboard * { transition:none!important; }
@media (hover:hover) and (pointer:fine) {
 .cap-workshop button:hover:not(:disabled),.cw-inspection-tools summary:hover { border-color:var(--paper); background:#2a3932; }
 .cw-choice-row button:hover:not(:disabled) { transform:translateY(-3px); }
 .cap-workshop .cw-save:hover:not(:disabled) { background:var(--paper); color:#112018; }
}
.cw-header { position:absolute; top:max(24px,env(safe-area-inset-top)); left:max(32px,env(safe-area-inset-left)); right:max(32px,env(safe-area-inset-right)); display:flex; align-items:center; gap:18px; z-index:2; pointer-events:none; }
.cw-header button { pointer-events:auto; min-width:48px; font-size:22px; }
.cw-header h2 { font:36px/1.1 var(--font-display); margin:0; letter-spacing:0; text-shadow:0 2px 5px #10221e; }
.cw-header p { font:800 12px var(--font-body); margin:6px 0 0; text-shadow:0 2px 5px #10221e; }
.cw-identity { margin-left:auto; display:flex; align-items:center; gap:10px; background:#0c1714e8; border-left:3px solid var(--yellow); padding:8px 12px; }
.cw-identity canvas { width:40px; height:40px; }
.cw-identity strong { display:block; font:20px var(--font-display); }
.cw-save-state { display:block; margin-top:3px; font:800 10px var(--font-body); color:#d3d8cc; }
.cw-dirty .cw-save-state { color:var(--yellow); }
.cw-object { position:absolute; inset:100px 0 var(--deck-space); touch-action:none; cursor:grab; }
body .cap-workshop .cw-object,
body .cap-workshop .cw-object:active { cursor:url('../assets/konk-cursor-hold.svg') 13 10,grabbing; }
.cw-object:focus-visible { outline-offset:-4px; outline-width:2px; }
.cw-inspect { position:absolute; bottom:calc(var(--deck-space) + 4px); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; z-index:3; }
.cw-inspect button { min-width:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
.cw-icon { width:20px; height:20px; flex:0 0 20px; display:inline-block; vertical-align:middle; }
.cw-save-state .cw-icon { width:12px; height:12px; }
.cw-tray footer [data-workshop=test] { display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
.cw-inspection-tools { position:relative; }
.cw-inspection-tools summary { display:flex; align-items:center; gap:12px; list-style:none; font-size:12px; }
.cw-inspection-tools summary::-webkit-details-marker { display:none; }
.cw-inspection-tools > div { position:absolute; bottom:54px; right:0; width:250px; padding:12px; background:#14211ffa; border:1px solid #c5c7b8; box-shadow:6px 6px 0 #07120e80; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.cw-tray { position:absolute; bottom:max(20px,env(safe-area-inset-bottom)); left:max(24px,env(safe-area-inset-left)); right:max(24px,env(safe-area-inset-right)); max-width:1440px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:24px; padding:16px 20px; background:#0c1512f2; border-top:3px solid #a9b5a16b; box-shadow:6px 8px 0 #09140d55; z-index:2; transition:transform 220ms cubic-bezier(.23,1,.32,1),opacity 160ms cubic-bezier(.23,1,.32,1); }
.cw-tray-content { min-width:0; display:grid; grid-template-rows:130px 52px; gap:12px; }
.cw-options { display:flex; gap:12px; min-width:0; }
.cw-choice-row { display:flex; align-items:center; gap:10px; padding:5px 3px 8px; overflow-x:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#70847b transparent; width:100%; min-width:0; }
.cw-choice-row button { position:relative; flex:1 0 100px; max-width:180px; min-height:112px; padding:12px 8px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:#25362eef; border:1px solid #7e94848c; border-bottom:3px solid #101f18; }
.cw-choice-row button[aria-pressed=true] { background:#344638; border-color:var(--yellow); border-bottom:4px solid var(--yellow); transform:translateY(-3px); }
.cw-choice-row button:not(:focus-visible) { clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.cw-choice-row canvas { width:58px; height:58px; background:var(--sample); padding:4px; border:4px double #c0bfb0; border-radius:50%; box-sizing:border-box; }
.cw-country-row button { flex-basis:116px; }
.cw-country-row canvas { padding:0; border:3px solid #c0bfb0; }
.cw-choice-label { font:800 12px/1.2 var(--font-body); text-align:center; }
.cw-check { position:absolute; right:7px; top:5px; color:var(--yellow); font-size:18px; }
.cw-finish { width:56px; height:56px; border-radius:50%; background:var(--sample); border:6px solid #b3b7ae; box-sizing:border-box; box-shadow:inset 0 2px 3px #fff3,0 2px 4px #0005; }
.cw-painted { border-color:var(--sample); } .cw-contrast { border-color:var(--art); }
.cw-played-in { background:repeating-linear-gradient(135deg,transparent 0 12px,#ece8de80 13px,transparent 14px),var(--sample); }
.cw-street-worn { background:repeating-linear-gradient(125deg,transparent 0 6px,#ece8deb0 7px,transparent 8px),var(--sample); border-style:dashed; }
.cw-chalk { background:#ede9dd; } .cw-ink { background:#222727; } .cw-gold { background:#edc743; }
.cw-paint-channel { display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:96px; }
.cw-paint-channel button { font-size:12px; background:transparent; }
.cw-paint-channel button[aria-pressed=true] { color:var(--yellow); border-color:var(--yellow); }
.cw-choice-row .cw-swatch { flex-basis:96px; }
.cw-color-chip { width:64px; height:54px; background:var(--swatch); border:2px solid #c9c3ae80; clip-path:polygon(4% 0,100% 4%,96% 100%,0 94%); box-shadow:inset 0 -5px 0 #0002; }
.cw-name-panel { width:min(680px,100%); margin:auto; display:grid; grid-template-columns:auto minmax(160px,1fr) auto 86px; align-items:center; gap:8px 14px; }
.cw-name-panel label { font:24px var(--font-display); color:var(--yellow); }
.cw-name-panel input { min-width:0; height:52px; box-sizing:border-box; padding:8px 12px; border:2px solid #9ba69b; border-radius:0; background:#f1eddf; color:#17221f; font:800 20px var(--font-body); letter-spacing:0; text-transform:uppercase; }
.cw-name-panel input:focus { outline:3px solid var(--yellow); outline-offset:2px; }
.cw-name-panel small { grid-column:2/-1; color:#cdd4c8; font:800 10px var(--font-body); }
.cw-tabs { display:flex; align-items:stretch; gap:8px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.cw-tabs button { flex:1; min-width:110px; color:#cdd4c8; font:22px var(--font-display); background:transparent; border:0; border-bottom:3px solid transparent; }
.cw-tabs button[aria-selected=true] { color:var(--yellow); border-bottom-color:var(--yellow); background:#2b3c2a80; }
.cw-tray footer { display:grid; grid-template-rows:44px 52px 64px; gap:8px; align-content:center; }
.cw-tray footer [data-workshop=fresh] { border:0; background:transparent; color:#cdd4c8; font-size:12px; }
.cw-tray footer [data-workshop=test] { border:2px solid #bdc4ae; font:20px var(--font-display); }
.cap-workshop .cw-save { display:flex; align-items:center; justify-content:space-between; border:2px solid var(--yellow); color:#112018; background:var(--yellow); font:24px var(--font-display); padding:12px 18px; box-shadow:3px 4px 0 #77652a; }
.cap-workshop .cw-save:disabled { background:#304336; color:#d5dfcd; border-color:#7b947e; opacity:1; box-shadow:none; }
.cw-dirty .cw-save { border-right-width:6px; }
.cw-status { position:absolute; left:50%; bottom:calc(var(--deck-space) - 12px); transform:translateX(-50%); margin:0; color:var(--yellow); font:800 12px var(--font-body); pointer-events:none; }
.cw-status:empty { display:none; }
.cw-testing .cw-tray,.cw-revealing .cw-tray { transform:translateY(125%); opacity:0; pointer-events:none; visibility:hidden; transition:transform 220ms cubic-bezier(.23,1,.32,1),opacity 160ms cubic-bezier(.23,1,.32,1),visibility 0s 220ms; }
.cw-testing .cw-inspect,.cw-revealing .cw-inspect { display:none; }
.cw-testing .cw-object,.cw-revealing .cw-object { bottom:180px; }
.cw-test,.cw-reveal { position:absolute; left:16px; right:16px; bottom:max(24px,env(safe-area-inset-bottom)); margin:auto; max-width:640px; text-align:center; background:#0b1713f2; padding:16px 24px; border-bottom:4px solid var(--yellow); z-index:3; }
.cw-test h2,.cw-reveal h2 { font:36px/1.1 var(--font-display); margin:0; letter-spacing:0; }
.cw-test p,.cw-reveal p { font:800 12px var(--font-body); margin:6px 0 12px; color:#d3d8cc; }
.cw-test > div { display:flex; justify-content:center; gap:8px; }
.cw-test-settled [data-workshop=keyboard-flick] { display:none; }
.cw-test [data-workshop=save],.cw-reveal [data-workshop=take] { background:var(--yellow); color:#112018; }
.cw-reveal [data-workshop=skip] { background:transparent; border:0; }
.cw-revealing:not(.cw-reveal-ready) [data-workshop=take] { visibility:hidden; }
.my-cap-badge { width:40px; height:40px; display:block; margin-bottom:6px; }
.screen-title .home-utilities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.screen-title .home-utilities [data-action=cap-workshop] { color:var(--yellow); }
.screen-title .home-more .home-secondary { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.screen-title .home-more .home-secondary .btn { display:inline-flex; flex:1 1 140px; align-items:center; justify-content:center; min-width:0; min-height:44px; padding:8px 10px; border:0; border-bottom:1px solid var(--line-strong); background:transparent; box-shadow:none; clip-path:none; color:var(--paper); font:700 13px/1.2 var(--font-body); text-align:center; white-space:normal; }
.screen-title .home-more .home-secondary .btn:is(:hover,:focus-visible) { color:var(--yellow); border-bottom-color:var(--yellow); }
.screen-title .home-cap-zone { display:grid; gap:4px; width:100%; margin-top:2px; }
.screen-title .home-cap-label { color:var(--paper-muted); font:800 11px/1.2 var(--font-body); text-transform:uppercase; }
.screen-title .home-cap-workshop { display:block; width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--line-strong); border-left:3px solid var(--yellow); background:rgb(var(--ink-rgb) / .82); color:var(--paper); cursor:pointer; font:800 14px/1.2 var(--font-body); text-align:left; text-transform:uppercase; }
.screen-title .home-cap-workshop:is(:hover,:focus-visible) { border-color:var(--yellow); color:var(--yellow); }
.screen-title .home-cap-workshop:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.screen-title .home-more-utilities.cap-workshop-utilities { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:2px; }
.screen-title .home-more-utilities.cap-workshop-utilities > * { display:inline-flex; flex:1 1 0; align-items:center; justify-content:center; box-sizing:border-box; min-width:0; min-height:44px; padding:8px 2px; border:0; background:transparent; color:var(--paper-muted); font:700 12px/1.2 var(--font-body); text-align:center; white-space:normal; }
.screen-title .home-more-utilities.cap-workshop-utilities > :is(:hover,:focus-visible) { color:var(--yellow); text-decoration:underline; }
@media (max-width:800px) and (min-height:501px) {
 .cap-workshop { --deck-space:300px; }
 .cw-header { top:max(16px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); right:max(16px,env(safe-area-inset-right)); gap:10px; }
 .cw-header h2 { font-size:24px; } .cw-header p { font-size:10px; }
 .cw-identity { padding:6px; } .cw-identity canvas { width:30px; height:30px; } .cw-identity strong { font-size:16px; }
 .cw-save-state { font-size:9px; max-width:65px; }
 .cw-object { top:80px; }
 .cw-tray { bottom:max(12px,env(safe-area-inset-bottom)); left:12px; right:12px; display:flex; flex-direction:column; gap:8px; padding:10px 12px; }
 .cw-tray-content { grid-template-rows:130px 48px; gap:6px; }
 .cw-options { flex-direction:column; gap:2px; }
 .cw-choice-row { gap:8px; padding-block:5px; }
 .cw-choice-row button { flex:1 0 88px; min-height:112px; max-width:none; padding:8px 6px; }
 .cw-choice-row canvas,.cw-finish { width:56px; height:56px; }
 .cw-paint-channel { flex-direction:row; justify-content:flex-start; gap:6px; }
 .cw-paint-channel button { min-height:44px; padding:8px 12px; }
 .cw-options:has(.cw-swatch) .cw-choice-row button { min-height:76px; flex-basis:88px; gap:6px; }
 .cw-name-panel { grid-template-columns:auto minmax(88px,1fr) auto 58px; gap:5px 7px; padding:8px 2px; }
 .cw-name-panel label { font-size:14px; } .cw-name-panel input { height:44px; padding-inline:8px; font-size:14px; } .cw-name-panel small { grid-column:2/-1; }
 .cw-color-chip { width:56px; height:36px; }
 .cw-tabs { gap:4px; } .cw-tabs button { font-size:16px; min-width:76px; padding:6px 8px; }
 .cw-tabs button[data-category=underside] { min-width:94px; }
 .cw-tray footer { grid-template-columns:.8fr 1fr 1.3fr; grid-template-rows:52px; gap:6px; }
 .cw-tray footer [data-workshop=fresh] { font-size:10px; padding:6px 2px; } .cw-tray footer [data-workshop=test] { font-size:18px; padding:6px; }
 .cap-workshop .cw-save { font-size:20px; padding:8px 10px; }
 .cw-inspect { bottom:calc(var(--deck-space) + 2px); }
 .cw-test,.cw-reveal { padding:12px; } .cw-test h2,.cw-reveal h2 { font-size:28px; }
 .cw-test > div { flex-wrap:wrap; } .cw-test button { font-size:12px; padding:8px; }
}
@media (max-height:500px) and (min-aspect-ratio:1/1) {
 .cap-workshop { --deck-space:170px; }
 .cw-header { top:10px; left:max(16px,env(safe-area-inset-left)); right:max(16px,env(safe-area-inset-right)); gap:10px; }
 .cw-header h2 { font-size:24px; } .cw-header p { display:none; } .cw-identity { padding:4px 8px; } .cw-identity canvas { width:28px; height:28px; } .cw-identity strong { font-size:16px; }
 .cw-object { top:64px; } .cw-inspect { left:auto; right:16px; top:72px; bottom:auto; transform:none; }
 .cw-inspect [data-workshop=flip] { font-size:12px; }
 .cw-tray { bottom:max(8px,env(safe-area-inset-bottom)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); grid-template-columns:minmax(0,1fr) 172px; gap:12px; padding:8px 12px; }
 .cw-tray-content { grid-template-rows:78px 44px; gap:4px; }
 .cw-choice-row { padding:4px 2px; gap:6px; } .cw-choice-row button { flex-basis:80px; min-height:68px; padding:5px 4px; gap:4px; }
 .cw-choice-row canvas,.cw-finish { width:32px; height:32px; border-width:3px; } .cw-choice-label { font-size:10px; }
 .cw-tabs { gap:4px; } .cw-tabs button { min-width:74px; font-size:16px; padding:4px; } .cw-tabs button[data-category=underside] { min-width:92px; }
 .cw-paint-channel { min-width:164px; flex-direction:row; align-items:center; gap:4px; } .cw-paint-channel button { font-size:10px; min-height:44px; padding:5px; }
 .cw-choice-row .cw-swatch { flex-basis:82px; } .cw-color-chip { width:52px; height:30px; }
 .cw-tray footer { grid-template-columns:64px 1fr; grid-template-rows:44px 56px; gap:6px; }
 .cw-tray footer [data-workshop=fresh] { font-size:10px; padding:4px; } .cw-tray footer [data-workshop=test] { font-size:18px; padding:4px; }
 .cap-workshop .cw-save { grid-column:1/-1; font-size:22px; padding:8px 12px; }
 .cw-test,.cw-reveal { max-width:520px; bottom:12px; padding:10px 16px; }
 .cw-test h2,.cw-reveal h2 { font-size:26px; } .cw-testing .cw-object,.cw-revealing .cw-object { bottom:138px; }
 .cw-inspection-tools > div { top:50px; bottom:auto; }
}
@media (prefers-reduced-motion:reduce) { .cap-workshop * { animation:none!important; transition:none!important; } }
@media (max-height:360px) and (min-aspect-ratio:1/1) {
 .cap-workshop { --deck-space:140px; }
 .cw-header { top:6px; } .cw-header h2 { font-size:20px; }
 .cw-object { top:52px; right:200px; }
 .cw-tray-content { grid-template-rows:62px 44px; gap:2px; }
 .cw-tray { padding:6px 8px; }
 .cw-choice-row button { min-height:54px; gap:3px; }
 .cw-choice-row canvas,.cw-finish { width:24px; height:24px; }
 .cw-inspect { flex-wrap:wrap; width:184px; top:64px; right:12px; }
 .cw-paint-channel { min-width:164px; gap:4px; }
 .cw-paint-channel button { min-height:44px; }
 .cw-testing .cw-object,.cw-revealing .cw-object { right:0; bottom:138px; }
}