/* v28y: Workbench challenges — same glass / chrome language as the collection */
.challenge-dialog{width:min(1180px,calc(100% - 20px));height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);max-width:none;padding:0;border-radius:18px;border:1px solid rgba(255,255,255,.12);color:#fff;overflow:hidden;
  background:radial-gradient(900px 500px at 20% -10%,rgba(255,255,255,.07),transparent 60%),#060608;box-shadow:0 40px 120px rgba(0,0,0,.7)}
.challenge-dialog::backdrop{background:rgba(3,3,5,.84);backdrop-filter:blur(16px)}
.cb-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}
.cb-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px 12px}
.cb-title{font:400 clamp(28px,3vw,40px)/1 var(--heading);margin:8px 0 0;background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.cb-body{min-height:0;overflow:auto;padding:0 24px 20px}
.cb-lead{font:400 14px/1.7 var(--label);color:#c9cad0;max-width:620px;margin:0 0 18px}
.cb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cb-card{position:relative;display:grid;grid-template-columns:150px 1fr;align-items:center;gap:8px;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.015));color:#fff;text-align:left;cursor:pointer;transition:border-color .2s,transform .2s}
.cb-card:hover{border-color:#fff;transform:translateY(-2px)}
.cb-card-art{width:150px;height:230px}
.cb-card-art .cb-scatter{transition:transform .5s cubic-bezier(.2,1,.3,1)}
.cb-card:hover .cb-scatter{transform:none!important}
.cb-card-text{display:flex;flex-direction:column;gap:8px}
.cb-card-text small{font:700 9px/1 var(--label);letter-spacing:.34em;color:rgba(255,255,255,.55)}
.cb-card-text strong{font:400 28px/1 var(--heading)}
.cb-card-text span{font:500 12px/1.4 var(--label);color:#c9cad0}
.cb-card-text em{font:700 10px/1 var(--label);letter-spacing:.24em;font-style:normal;text-transform:uppercase;margin-top:6px}
.cb-card[data-done=true]{border-color:rgba(255,255,255,.4)}
.cb-card[data-done=true] .cb-card-text span{color:#fff}

/* build view */
.cb-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;height:min(62vh,640px)}
.cb-blueprint{width:100%;height:100%;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.06),transparent 70%),#0a0a0d}
.cb-ghost{opacity:.12;filter:grayscale(1) brightness(2);transition:opacity .3s}
.cb-ghost.next{opacity:.35;animation:cb-pulse 1.2s ease-in-out infinite}
.cb-ghost.filled{opacity:0}
@keyframes cb-pulse{50%{opacity:.12}}
.cb-slot{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:6 5;animation:cb-dash 1s linear infinite;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
@keyframes cb-dash{to{stroke-dashoffset:-22}}
.cb-part{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.cb-part.drop{animation:cb-drop .55s cubic-bezier(.2,1.4,.3,1) both}
@keyframes cb-drop{0%{opacity:0;transform:translateY(-26px);filter:drop-shadow(0 0 18px #fff) brightness(2)}60%{opacity:1}100%{transform:none}}
.cb-blueprint.complete .cb-part{animation:cb-glow 1.6s ease-in-out 2}
@keyframes cb-glow{50%{filter:drop-shadow(0 0 14px rgba(255,255,255,.7)) brightness(1.25)}}
.cb-info{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));overflow:auto}
.cb-info small{font:700 9px/1 var(--label);letter-spacing:.34em;color:rgba(255,255,255,.55)}
.cb-info small b{color:#fff}
.cb-info-name{font:400 22px/1.2 var(--heading)}
.cb-info-fact{font:400 14px/1.65 var(--label);color:#c9cad0;margin:0}
.cb-meter{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:auto}
.cb-meter i{display:block;height:100%;width:0;background:var(--chrome);transition:width .4s}
.cb-miss{font:600 10px/1 var(--label);letter-spacing:.2em;color:rgba(255,255,255,.55);text-transform:uppercase}
.cb-tray{display:flex;gap:10px;overflow-x:auto;padding:14px 2px 6px;scrollbar-width:thin}
.cb-piece{flex:0 0 112px;height:132px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;padding:10px 8px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#e8e8ec;cursor:pointer;transition:transform .15s,border-color .2s,opacity .3s}
.cb-piece:hover{border-color:#fff;transform:translateY(-3px)}
.cb-piece svg{width:100%;height:84px}
.cb-piece span{font:600 10px/1.25 var(--label);letter-spacing:.04em;text-align:center}
.cb-piece.wrong{animation:cb-wrong .4s;border-color:#ff4d6d}
@keyframes cb-wrong{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.cb-piece.used{opacity:.18;pointer-events:none;transform:scale(.92)}
.cb-done{position:absolute;inset:auto 16px 16px auto;width:min(320px,calc(100% - 32px));padding:22px;border-radius:18px;text-align:center;border:1px solid rgba(255,255,255,.3);
  background:rgba(8,8,12,.86);backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.6);animation:st-in .4s cubic-bezier(.2,1.4,.3,1) both}
.cb-done small{font:700 9px/1 var(--label);letter-spacing:.34em;color:rgba(255,255,255,.6)}
.cb-done strong{display:block;margin:8px 0;font:400 30px/1 var(--heading);background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.cb-stars{font-size:28px;letter-spacing:6px;color:#fff;text-shadow:0 0 14px rgba(255,255,255,.6)}.cb-stars span{color:rgba(255,255,255,.18);text-shadow:none}
.cb-done p{font:500 12px/1.5 var(--label);color:#c9cad0}
.cb-done-actions{display:flex;flex-direction:column;gap:8px}
.cb-done-actions .primary-button{justify-content:center}

/* home entry */
#front-screen .challenge-entry{background:linear-gradient(120deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 45%,rgba(10,10,14,.55))!important}
#front-screen .challenge-entry::after{animation-delay:2.2s!important}

@media(max-width:760px){
  .challenge-dialog{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .cb-head{padding:calc(12px + env(safe-area-inset-top)) 16px 10px}
  .cb-body{padding:0 12px calc(14px + env(safe-area-inset-bottom))}
  .cb-card{grid-template-columns:110px 1fr}.cb-card-art{width:110px;height:170px}
  .cb-stage{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;height:auto}
  .cb-blueprint{height:44dvh}
  .cb-info{padding:14px;gap:6px}.cb-info-name{font-size:18px}.cb-info-fact{font-size:12.5px}
  .cb-piece{flex-basis:96px;height:116px}.cb-piece svg{height:70px}
}
@media(max-width:650px) and (min-height:501px){
  #front-screen #challenge-button{grid-column:2;grid-row:5;margin:0!important;min-height:48px!important;padding:0 12px!important;border-radius:999px!important;justify-content:center;font-size:10px!important;letter-spacing:.16em!important}
  #front-screen #challenge-button>span,#front-screen #challenge-button svg{display:none!important}
  #front-screen .how-button{grid-column:1/-1!important;grid-row:6!important;min-height:30px!important;border:0!important;background:none!important;backdrop-filter:none!important;justify-self:center}
  #front-screen{grid-template-rows:auto 1fr auto auto auto auto!important}
}
@media(prefers-reduced-motion:reduce){.cb-ghost.next,.cb-slot,.cb-part.drop{animation:none}}

.cb-head{padding-bottom:16px}
.cb-title{line-height:1.1;padding-bottom:4px}

/* v28z: drag & snap, sparks, power-on test run */
.cb-piece{touch-action:none;user-select:none}
.cb-piece.lifted{opacity:.35;transform:scale(.94)}
.cb-fly{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;filter:drop-shadow(0 14px 22px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(255,255,255,.25));will-change:transform}
.cb-fly.back{transition:transform .25s cubic-bezier(.3,.7,.3,1),opacity .25s;opacity:0}
.cb-slot.hot{stroke-width:3;stroke-dasharray:none;filter:drop-shadow(0 0 14px #fff)}
.cb-spark line{stroke:#fff;stroke-width:2;stroke-linecap:round;animation:cb-spark .45s ease-out forwards}
@keyframes cb-spark{from{stroke-dasharray:0 40;opacity:1}to{stroke-dasharray:18 40;stroke-dashoffset:-22;opacity:0}}
.cb-power{margin-top:6px;justify-content:center;animation:g-shine 1.8s ease-in-out infinite,cb-pulse-btn 1.2s ease-in-out infinite!important}
@keyframes cb-pulse-btn{50%{box-shadow:0 0 0 6px rgba(255,255,255,.12),0 12px 36px rgba(255,255,255,.2)}}
/* the machine works while you test it */
.cb-blueprint.running.coil [data-part=armature],.cb-blueprint.running.coil [data-part=oring],.cb-blueprint.running.coil [data-part=needle]{animation:cb-buzz .09s linear infinite}
.cb-blueprint.running.coil [data-part=frontspring]{animation:cb-buzz-s .09s linear infinite}
.cb-blueprint.running.coil [data-part=coils]{filter:drop-shadow(0 0 10px rgba(255,150,80,.8))}
.cb-blueprint.running.coil [data-part=contact]{animation:cb-arc .09s steps(2) infinite}
.cb-blueprint.running.rotary [data-part=cam]{transform-box:view-box;transform-origin:200px 275px;animation:cb-spin .12s linear infinite}
.cb-blueprint.running.rotary [data-part=slider],.cb-blueprint.running.rotary [data-part=cartridge]{animation:cb-buzz .12s linear infinite}
.cb-blueprint.running.rotary [data-part=spring]{transform-box:view-box;transform-origin:200px 352px;animation:cb-squash .12s linear infinite}
.cb-blueprint.running.rotary [data-part=motor]{filter:drop-shadow(0 0 10px rgba(255,150,80,.7))}
.cb-blueprint.running.rotary [data-part=battery]{animation:cb-led 1s steps(2) infinite}
.cb-blueprint.running{animation:cb-shake .05s linear infinite}
@keyframes cb-buzz{50%{transform:translateY(3px)}}
@keyframes cb-buzz-s{50%{transform:translateY(2px) rotate(-1deg)}}
@keyframes cb-arc{50%{filter:drop-shadow(0 0 8px #9fd4ff) brightness(1.6)}}
@keyframes cb-spin{to{transform:rotate(360deg)}}
@keyframes cb-squash{50%{transform:scaleY(.82)}}
@keyframes cb-led{50%{filter:brightness(1.5)}}
@keyframes cb-shake{50%{transform:translate(.4px,-.3px)}}
.cb-skin{position:relative;margin-top:4px}
.cb-skin canvas{width:100%;aspect-ratio:560/180;border-radius:12px;cursor:crosshair;touch-action:none;box-shadow:inset 0 0 20px rgba(80,30,10,.35),0 8px 20px rgba(0,0,0,.4)}
.cb-skin-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.12);margin-top:8px;overflow:hidden}
.cb-skin-bar i{display:block;height:100%;width:0;background:var(--chrome)}
@media(prefers-reduced-motion:reduce){.cb-blueprint.running,.cb-blueprint.running *{animation:none!important}}

/* v28aa: parts are found in runs */
.cb-scatter.missing{opacity:.14;filter:grayscale(1) brightness(.6)}
.cb-found{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.cb-found b{display:block;height:100%;background:linear-gradient(90deg,#ffd98a,#fff)}
.cb-card[data-ready=false]{cursor:default}
.cb-card[data-ready=false]:hover{transform:none;border-color:rgba(255,255,255,.14)}
.cb-card[data-ready=false] em{color:rgba(255,255,255,.5)}
.cb-card.nope{animation:cb-wrong .4s}
/* v28aq: never wider than the phone */
@media (max-width:700px){.challenge-dialog{box-sizing:border-box;width:100vw!important;max-width:100vw!important;margin:0!important;inset:0}.challenge-dialog .cb-root,.challenge-dialog .cb-body{max-width:100%;overflow-x:hidden}.challenge-dialog .cb-body>*{min-width:0}}