/* A shared toy bench: the machine and its controls stay together. */
.wk-intro{max-width:680px;padding:1.25rem;margin:auto}
.wk-intro>p{font-size:1rem;line-height:1.55;max-width:38rem}
.wk-intro>.btn{width:100%;margin-top:.6rem}
.is-workshop .wk-intro h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:0 0 1rem}
.is-workshop .wk-intro .eyebrow{margin:.8rem 0;font-size:.875rem}
.wk-intro-art{width:100%;height:clamp(140px,24svh,230px);object-fit:cover;border-radius:14px}
.wk-icon{object-fit:contain;display:block;width:100%;height:auto;aspect-ratio:1;border-radius:8px}
.wk-roles{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1rem 0}
.wk-role{padding:.8rem;border:1px solid var(--line);border-radius:12px}
.wk-role.spark{border-color:var(--coral)}
.wk-role.tinker{border-color:var(--aqua)}
.wk-role small{font-size:.875rem}
.wk-role h2{margin:.4rem 0 .7rem;font-size:1.6rem}
.wk-role>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.wk-role strong{display:block;font-size:.875rem;text-align:center;font-weight:500;overflow-wrap:anywhere}
.wk-handoff-parts{display:flex;gap:1rem;margin:1.25rem 0}
.wk-handoff-parts img{width:calc((100% - 2rem)/3);height:auto;aspect-ratio:1;object-fit:contain;border-radius:12px}
.wk-layout{max-width:1060px;margin:auto;padding:.75rem clamp(.65rem,2vw,1.5rem) 1rem}
.wk-heading{display:flex;align-items:center;gap:.8rem;margin:0 0 .75rem}
.wk-heading h1{flex:1;min-width:0;font-family:inherit;letter-spacing:0;font-weight:600;font-size:1.125rem;line-height:1.4;margin:0;text-wrap:pretty}
.wk-challenge-picker,.wk-help-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;border:1px solid #52707a;border-radius:10px;background:#183943;color:var(--ink);padding:.5rem;font-size:.875rem}
.wk-help-button{width:44px;font-weight:700;font-size:1.15rem}
.wk-challenge-picker:hover,.wk-help-button:hover{border-color:var(--gold)}
.wk-challenges{display:grid;gap:.75rem;margin:1rem 0}
.wk-challenges button{display:grid;gap:.35rem;min-height:64px;text-align:left;padding:.8rem 1rem;background:#183943;color:var(--ink);border:1px solid #52707a;border-radius:10px}
.wk-challenges button[aria-current=page]{border-color:var(--gold);background:#3c462f}
.wk-challenges span{font-size:1rem;color:var(--muted)}
.wk-workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:1.25rem;align-items:center}
.wk-machine{min-width:0;display:grid;justify-items:center}
.wk-grid{width:min(100%,max(268px,calc(100svh - 16rem - var(--safe-top,0px) - var(--safe-bottom,0px))));position:relative;display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));aspect-ratio:1;border:2px solid #55717c;border-radius:12px;overflow:hidden;background:#08202d;isolation:isolate}
.wk-cell{position:relative;aspect-ratio:1;min-width:44px;min-height:44px;padding:9%;background:#102c37;color:var(--muted);border:1px solid #35515c;outline-offset:-3px!important;touch-action:manipulation}
.wk-cell:disabled{opacity:1}
.wk-cell .wk-icon{border-radius:6px}
.wk-cell.spark{box-shadow:inset 0 -4px var(--coral)}
.wk-cell.tinker{box-shadow:inset 0 -4px var(--aqua)}
.wk-cell.selected{border:3px solid var(--gold);padding:7%;background:#3c462f}
@media(hover:hover){.wk-cell:not(:disabled):hover{background:#244b56}}
.wk-coordinate{position:absolute;left:3px;top:1px;font-size:.75rem;z-index:1;text-shadow:0 1px 2px #000}
.wk-direction{position:absolute;right:3px;bottom:1px;color:var(--gold);font-size:1rem;line-height:1;background:#102c37e8;padding:2px;border-radius:3px}
.wk-empty{font-size:1.2rem;color:#67868d}
.wk-cell-label{position:absolute;bottom:1px;left:0;right:0;text-align:center;color:var(--ink);font-size:.875rem;line-height:1.1;background:#102c37d9;overflow-wrap:anywhere}
.wk-cell.wk-blocked{background:repeating-linear-gradient(135deg,#344852,#344852 7px,#293d48 7px,#293d48 14px)}
.wk-blocked .wk-cell-label{top:45%;bottom:auto}
.wk-icon.flipped{transform:scaleX(-1)}
.wk-path{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;stroke:none}
.wk-path polyline{fill:none;stroke:#ffdd89;stroke-width:3;stroke-dasharray:6 8;opacity:.7;vector-effect:non-scaling-stroke}
.wk-traveller{position:absolute;width:13%;height:13%;left:1.84%;top:1.84%;z-index:3;pointer-events:none;filter:drop-shadow(0 0 5px #ffe5ab)}
.wk-traveller .wk-icon{border-radius:50%;border:2px solid #ffdd89}
.wk-tools{min-width:0;padding:1rem;background:#153541;border:1px solid var(--line);border-radius:14px}
.wk-tools .turn-strip{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:.5rem;margin:0 0 .65rem;padding:0;border:0;background:none;border-radius:0}
.wk-tools .turn-strip>div,.wk-tools .turn-strip>button{min-width:0;min-height:48px;padding:.3rem .65rem;border:1px solid #52707a;border-radius:9px;line-height:1.2;text-align:left;background:transparent;color:var(--ink)}
.wk-tools .turn-strip .wk-active-inventor{background:#473c32;border-color:var(--coral)}
.wk-tools.tinker .turn-strip .wk-active-inventor{background:#204b49;border-color:var(--aqua)}
.wk-tools .turn-strip strong{font-size:1rem;line-height:1.3}
.wk-tools .turn-strip small{font-size:.875rem;line-height:1.3;color:var(--muted)}
.wk-tools .turn-strip button strong{display:flex;justify-content:space-between;gap:.3rem;color:var(--gold)}
.wk-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.wk-part{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-width:0;min-height:68px;padding:.4rem;background:#102c37;border:2px solid #52707a;border-radius:10px;color:var(--ink)}
.wk-part>.wk-icon{width:clamp(40px,5vw,72px);height:auto}
.wk-part strong{font-size:.875rem;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.wk-placed{color:var(--muted)}
.wk-part.selected{border-color:var(--gold);background:#3c462f}
.wk-run-bar{display:grid;grid-template-columns:1.2fr .85fr .85fr 1.1fr .85fr;gap:.3rem;margin-top:.65rem}
.wk-run-bar .btn{min-width:0;min-height:44px;font-size:.875rem;padding:.4rem .2rem;gap:0;justify-content:center;overflow-wrap:anywhere}
.wk-run-bar .btn svg{display:none}
.wk-feedback{color:var(--ink);font-size:1rem;line-height:1.4;min-height:2.8em;margin:.65rem 0 0}
.wk-shared-note{font-size:.875rem;line-height:1.4;color:var(--muted);margin:.25rem 0 0}
.wk-route{font-size:1rem;line-height:1.8;color:var(--muted)}
.wk-help-parts{display:grid;gap:.8rem}
.wk-help-parts>div{display:flex;gap:1rem;align-items:center}
.wk-help-parts img{width:64px;height:64px;flex-shrink:0}
.wk-help-parts p{font-size:1rem;margin:0}
.wk-running .wk-path{opacity:.35}
.wk-running .wk-cell,.wk-running .wk-tray{pointer-events:none}
.wk-running [data-action=wk-flip],.wk-running [data-action=wk-remove],.wk-running [data-action=wk-undo]{opacity:.45;pointer-events:none}
/* Keep normal flow for small screens and enlarged text; never clip play controls. */
body:has(.is-workbench){padding-bottom:var(--safe-bottom,0px)}
.is-workbench .topbar{min-height:calc(52px + var(--safe-top,0px));gap:.4rem}
.is-workbench .topbar .back-button,.is-workbench .topbar .icon-button{min-height:44px;height:44px}
.is-workbench .topbar .icon-button{width:44px}
.is-workbench .topbar .home-button{display:flex}
.is-workbench .game-controls{display:none}
@media(max-width:760px){
 .wk-layout{padding:.5rem .65rem .75rem}
 .wk-heading{gap:.5rem;margin-bottom:.5rem}
 .wk-heading h1{font-size:1rem;line-height:1.35}
 .wk-workspace{grid-template-columns:minmax(0,1fr);gap:.5rem;max-width:480px;margin:auto}
 .wk-grid{width:min(100%,max(268px,calc(100svh - 24rem - var(--safe-top,0px) - var(--safe-bottom,0px))))}
 .wk-tools{padding:0;background:none;border:0;border-radius:0}
 .wk-tools .turn-strip{margin-bottom:.4rem}
 .wk-tools .turn-strip>div,.wk-tools .turn-strip>button{min-height:44px}
 .wk-tray{gap:.4rem}
 .wk-part{padding:.3rem;gap:.15rem}
 .wk-part>.wk-icon{width:40px;height:40px}
 .wk-run-bar{margin-top:.4rem}
 .wk-feedback{margin-top:.4rem;font-size:1rem}
 .wk-shared-note{margin-top:.15rem}
}
@media(prefers-reduced-motion:reduce){.wk-traveller{filter:none}}
@media(forced-colors:active){.wk-part.selected,.wk-cell.selected{outline:3px solid Highlight}.wk-tools .turn-strip .wk-active-inventor{border-width:3px}.wk-path polyline{stroke:Highlight}}

/* Two equal companions remain visible at the bench, in fixed left/right positions. */
.wk-companion-avatar{display:block;width:64px;height:64px;flex-shrink:0;border-radius:50%;background:#102c37 url('assets/workshop-companions-portraits.png') 0 0 / 200% 100% no-repeat;transform:rotate(var(--companion-look,0deg));transition:transform .2s ease,border-color .2s ease;border:2px solid var(--coral)}
.wk-companion-avatar.tinker{background-position:100% 0;border-color:var(--aqua)}
.wk-companion-avatar[data-mood=delighted]{border-color:var(--gold);box-shadow:0 0 0 3px #edc77b22}
.wk-companion-avatar[data-mood=surprised]{transform:rotate(-4deg)}
.wk-companion-avatar.tinker[data-mood=surprised]{transform:rotate(4deg)}
.wk-companion-pair{display:flex;justify-content:center;gap:1rem;margin:.25rem auto 1rem}
.wk-companion-pair .wk-companion-avatar{width:88px;height:88px}
.wk-handoff-companion{width:104px;height:104px;margin:0 auto 1rem}
.workshop-celebration .wk-companion-pair{margin-bottom:.6rem}
.workshop-celebration .wk-companion-avatar{width:64px;height:64px}
.wk-role{background:#153541;color:var(--ink);text-align:center;min-height:44px}
.wk-role[aria-pressed=true]{background:#3b4437;outline:2px solid var(--gold);outline-offset:1px}
.wk-role .wk-companion-avatar{width:96px;height:96px;margin:auto}
.wk-role .wk-role-name{font-family:Georgia,serif;font-size:1.4rem;margin:.25rem 0 .7rem}
.wk-role-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.wk-role-parts .wk-icon{max-width:80px;margin:auto}
.wk-tools .turn-strip.wk-companion-switch{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;align-items:stretch}
.wk-tools .wk-companion-switch .wk-companion-tab{min-height:66px;display:flex;align-items:center;gap:.5rem;padding:.3rem;border-color:#52707a}
.wk-tools .wk-companion-tab>span:last-child{min-width:0}
.wk-tools .wk-companion-tab strong{display:block;font-size:1rem;line-height:1.3;color:var(--ink)}
.wk-tools .wk-companion-tab small{font-size:.875rem;line-height:1.3}
.wk-tools .wk-companion-tab.active.spark{background:#473c32;border-color:var(--coral)}
.wk-tools .wk-companion-tab.active.tinker{background:#204b49;border-color:var(--aqua)}
.wk-tools .wk-companion-tab:not(.active) small{color:var(--gold)}
.wk-tools .wk-companion-tab .wk-companion-avatar{width:52px;height:52px}
.wk-placement{position:absolute;width:17%;height:17%;z-index:5;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 3px 8px #0005}
.wk-run-bar{grid-template-columns:1.5fr .75fr .75fr 1fr .8fr}
@media(max-width:760px){.wk-grid{width:min(100%,max(268px,calc(100svh - 25rem - var(--safe-top,0px) - var(--safe-bottom,0px))))}}
@media(max-width:370px){.wk-tools .wk-companion-tab .wk-companion-avatar{width:42px;height:42px}.wk-tools .wk-companion-switch .wk-companion-tab{gap:.3rem}}
@media(max-width:780px){.is-workbench .topbar .brand-home{display:none}}
@media(prefers-reduced-motion:reduce){.wk-companion-avatar{transition:none;transform:none}.wk-placement{transform:translate(-50%,-50%)}}
@media(forced-colors:active){.wk-tools .wk-companion-tab.active{outline:2px solid Highlight;outline-offset:-3px}.wk-companion-avatar{forced-color-adjust:none}}