/* Meteor Miner - flat vector on a dark ground. The asteroid pieces are SVG
   drawn by game.js; everything in here is the room around them. */

:root{
  --void:#0A0E1A; --deep:#0E1426; --panel:#151D33; --panel-2:#1C2742;
  --line:#2A3550; --ink:#EEF2FA; --ink-2:#9FB0CC; --ink-3:#6B7C9B;
  --amber:#E8A33D; --amber-2:#F2C273; --teal:#4EA8A0; --orange:#E2703A;
  --bad:#E0524B; --good:#4FBF7B;
  --r:10px; --r-lg:16px; --rail:104px; --bay:256px;
  --steel:#2B3445; --steel-2:#39435A; --steel-hi:#4E5B75; --bronze:#8A6A32;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--void); color:var(--ink);
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  overflow-y:auto; -webkit-text-size-adjust:100%;
}
/* The room. Every panel on the page sits on top of this, so the player is
   always looking at a station interior rather than a flat dark page. */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:#0B0D13;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 22% 14%,rgba(255,200,120,.16) 0%,transparent 55%),
             radial-gradient(120% 100% at 50% 50%,rgba(8,11,22,.10) 0%,rgba(6,9,18,.62) 100%);
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font-family:inherit}

.back-link{
  position:fixed; top:12px; left:12px; z-index:60;
  font-size:.8125rem; font-weight:600; color:var(--ink-3); text-decoration:none;
  background:rgba(10,14,26,.8); padding:6px 12px; border-radius:99px; border:1px solid var(--line);
}
.back-link:hover{color:var(--ink)}

.game-viewport{min-height:100dvh;display:flex;align-items:center;justify-content:center;width:100%}
#app{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}

.screen{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding-block:56px 32px}
.screen[hidden]{display:none!important}

h1,h2,h3{font-family:'Barlow Condensed',sans-serif;letter-spacing:.01em;margin:0}
.eyebrow{
  display:block;font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);margin-bottom:6px;
}

.big{
  min-height:52px;padding:0 28px;border-radius:var(--r);
  background:var(--amber);color:#1A1204;font-weight:700;font-size:1rem;letter-spacing:.06em;
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  transition:transform .08s,filter .12s;
}
.big:hover{filter:brightness(1.08)}
.big:active{transform:translateY(1px)}
.big.ghost{background:transparent;color:var(--ink-2);border:2px solid var(--line)}
.big.ghost:hover{color:var(--ink);border-color:var(--ink-3)}
.big:disabled{opacity:.4;cursor:not-allowed}

/* ------------------------------------------------------------------ title */
#screen-title{align-items:center;text-align:center;position:relative;justify-content:center}
.title-art{
  position:absolute;inset:0;background:url('assets/title.png') center/cover no-repeat;
  opacity:.55;border-radius:var(--r-lg);
  mask-image:linear-gradient(to bottom,#000 0%,#000 40%,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,transparent 92%);
}
.title-panel{position:relative;z-index:1;max-width:460px;width:100%}
#screen-title h1{
  font-size:clamp(3rem,10vw,5.5rem);font-weight:700;line-height:.86;
  text-transform:uppercase;text-shadow:0 6px 40px rgba(10,14,26,.95);
}
#screen-title h1 span{display:block;color:var(--amber)}
.title-sub{color:var(--ink-2);font-size:1.0625rem;margin:14px 0 30px;text-shadow:0 2px 16px var(--void)}
.field{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.14em;color:var(--ink-3);margin-bottom:8px}
#nameInput{
  width:100%;height:52px;padding:0 16px;border-radius:var(--r);
  background:var(--panel);border:2px solid var(--line);color:var(--ink);
  font-size:1.0625rem;font-weight:600;text-align:center;
}
#nameInput:focus{outline:0;border-color:var(--amber)}
.title-buttons{display:flex;gap:10px;margin-top:18px}
.title-buttons .big{flex:1}
.title-note{color:var(--ink-3);font-size:.8125rem;margin:18px 0 0}

/* Sector picker. Sectors are assigned one at a time, so a student sent back for
   sector 5 has to be able to open sector 5 without replaying four sectors. */
#sectorPick{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
#sectorPick .field{margin-bottom:10px}
#sectorList{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sector-chip{
  display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;
  background:var(--deep);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-2);font-family:inherit;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;
}
.sector-chip:hover{border-color:var(--ink-3);color:var(--ink);background:var(--panel-2)}
.sector-chip .sc-n{font-size:.625rem;font-weight:700;letter-spacing:.12em;color:var(--ink-3)}
.sector-chip .sc-name{font-size:.875rem;font-weight:600;color:var(--ink)}
.sector-chip .sc-prog{font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sector-chip.started .sc-prog{color:var(--amber-2)}
.sector-chip.done{border-color:var(--good)}
.sector-chip.done .sc-prog{color:var(--good)}
@media (max-width:460px){ #sectorList{grid-template-columns:1fr} }

/* --------------------------------------------------------------- briefing */
#screen-brief{align-items:center;justify-content:center}
.brief-art{
  width:100%;max-width:900px;height:170px;border-radius:var(--r-lg);
  background-size:cover;background-position:center;border:1px solid var(--line);
}
.brief-card{
  display:flex;gap:22px;align-items:flex-start;max-width:900px;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
}
.portrait{width:96px;height:96px;border-radius:var(--r);flex:none;background:var(--panel-2)}
.brief-card h2{font-size:2rem;font-weight:700;margin-bottom:12px}
.brief-card p{color:var(--ink-2);line-height:1.65;margin:0 0 8px;font-size:1rem}
#briefBtn{align-self:center}

/* -------------------------------------------------------------- workbench */
#screen-bench{justify-content:flex-start;gap:12px;padding-block:52px 24px}
#hud{
  position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--steel-2),var(--steel) 55%,#232B3A);
  border:1px solid #1A2130;border-top:1px solid var(--steel-hi);
  border-radius:var(--r);padding:12px 18px;
  box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
}
/* Bolt heads, so the bar reads as a bulkhead rather than a toolbar. */
#hud::before,#hud::after{
  content:'';position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--steel-hi),#161C29);
  box-shadow:0 0 0 1px rgba(0,0,0,.5);transform:translateY(-50%);
}
#hud::before{left:7px} #hud::after{right:7px}
.hud-ship{width:44px;height:44px;flex:none;border-radius:7px;object-fit:cover}
.hud-sector{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.08em;font-size:1rem}
.hud-rock{font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--ink-3)}
.hud-ore{margin-left:auto;font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--ink-3)}
.hud-ore b{color:var(--amber);font-size:1.0625rem;font-family:'IBM Plex Mono',monospace}
#pips{display:flex;gap:5px}
.pip{width:11px;height:11px;border-radius:3px;background:var(--amber);transition:background .2s}
.pip.spent{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}
.hud-btn{
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:99px;padding:6px 12px;min-height:32px;
}
.hud-btn:hover{color:var(--ink)}
.hud-btn[aria-pressed="true"]{color:var(--amber);border-color:var(--amber)}

#tip{margin:0;color:var(--ink-2);font-size:.9375rem;padding:0 2px;min-height:1.4em}


/* Indicator lamp: dark when the module is idle, lit when it is running. */

/* The cutting bay: a bolted steel frame with a hazard strip along the top and a
   scarred steel table inside it. The rocks sit ON something now. */
/* Machined slots along the bezel, instead of warning tape. */
/* Bolts at the table's corners, and a faint work light over the middle. */
#board{position:relative;z-index:1;display:block;width:100%;height:100%}
#board{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}

/* Side rails, so it reads as a belt and not stripes. */
/* The belt runs whenever a crate is riding it. */
@keyframes belt{from{background-position:0 0}to{background-position:0 36px}}
/* Insets alone do not size a replaced element, so this needs real dimensions
   or the image renders at its intrinsic 512x384 and spills out of the bay. */

#answer{
  position:relative;border-radius:var(--r);padding:14px 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:76px;
  background:linear-gradient(180deg,var(--steel-2),var(--steel) 55%,#232B3A);
  border:1px solid #171E2C;border-top:1px solid var(--steel-hi);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
#answer.locked{background:linear-gradient(180deg,#242C3C,#1B2230);}
#answer.locked::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(90deg,transparent,rgba(232,163,61,.5),transparent);
}
#answerLock{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:.9375rem}
.lockword{
  font-size:.625rem;font-weight:700;letter-spacing:.14em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:99px;padding:4px 10px;
}
#answerForm{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#answerForm label{font-size:.6875rem;font-weight:700;letter-spacing:.12em;color:var(--ink-3)}
#oreInput{
  width:120px;height:48px;padding:0 14px;border-radius:var(--r);
  background:var(--deep);border:2px solid var(--amber);color:var(--ink);
  font-size:1.25rem;font-weight:700;text-align:center;font-family:'IBM Plex Mono',monospace;
}
#oreInput:focus{outline:0;box-shadow:0 0 0 3px rgba(232,163,61,.25)}
#reportBtn{
  min-height:48px;padding:0 24px;border-radius:var(--r);background:var(--amber);color:#1A1204;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.08em;font-size:1rem;
}
#verdict{font-size:.9375rem;line-height:1.5;flex:1;min-width:220px}
#verdict.good{color:var(--good);font-weight:600}
#verdict.bad{color:var(--amber-2)}
#verdict b{display:block;color:var(--ink);font-size:1.0625rem;margin-bottom:2px}

/* --------------------------------------------------------- shift summary */
#screen-shift{align-items:center;justify-content:center}
.shift-card{
  max-width:620px;width:100%;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px;text-align:center;
}
.shift-art{width:132px;height:auto;display:block;margin:0 auto 12px}
.rep-art{width:34px;height:34px;display:block;margin:0 auto 4px}
.shift-card h2{font-size:2.25rem;font-weight:700;margin-bottom:22px}
.shift-stats{display:flex;gap:14px;margin-bottom:22px}
.shift-stats div,.rep-stats div{
  flex:1;background:var(--deep);border-radius:var(--r);padding:16px 10px;
}
.shift-stats b,.rep-stats b{
  display:block;font-size:1.75rem;color:var(--amber);font-family:'IBM Plex Mono',monospace;line-height:1.1;
}
.shift-stats span,.rep-stats span{
  display:block;font-size:.625rem;font-weight:700;letter-spacing:.12em;color:var(--ink-3);margin-top:6px;
}
.ledger{background:var(--deep);border-radius:var(--r);padding:20px;text-align:left;border-left:3px solid var(--amber)}
.ledger h3{font-size:1.25rem;font-weight:700;color:var(--amber-2);margin-bottom:8px}
.ledger p{margin:0;color:var(--ink-2);line-height:1.65;font-size:.9375rem}

/* --------------------------------------------------------- mission report */
#screen-report{align-items:center;justify-content:center}
.report-card{
  max-width:720px;width:100%;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px;
}
.report-card header{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}
.report-card h2{font-size:2.25rem;font-weight:700}
#repDate{color:var(--ink-3);font-size:.8125rem;margin:4px 0 0}
.rep-stats{display:flex;gap:12px;margin-bottom:22px}
.rep-table{width:100%;border-collapse:collapse;margin-bottom:22px;font-size:.9375rem}
.rep-table th{
  text-align:left;font-size:.625rem;letter-spacing:.12em;color:var(--ink-3);
  font-weight:700;padding:0 10px 8px;border-bottom:1px solid var(--line);
}
.rep-table th:not(:first-child),.rep-table td:not(:first-child){text-align:right}
.rep-table td{padding:10px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.rep-table td:first-child{color:var(--ink);font-weight:600}
.rep-ledger ol{margin:10px 0 0;padding-left:20px}
.rep-ledger li{color:var(--ink-2);line-height:1.6;margin-bottom:10px;font-size:.9375rem}
.rep-ledger li b{color:var(--amber-2);display:block}
.report-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ------------------------------------------------------------- SVG board */
.grid-line{stroke:#22304D;stroke-width:.02;pointer-events:none}
.grid-line.major{stroke:#2D3E63}
.tick{stroke:#3A4A6E;stroke-width:.05;pointer-events:none}
.ghost{fill:none;stroke:#3A4A6E;stroke-width:.06;stroke-dasharray:.3 .25;pointer-events:none}
.edge-label{
  fill:var(--ink-2);font-weight:700;font-family:'IBM Plex Mono',monospace;
  text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:var(--deep);
  pointer-events:none;
}
.piece{stroke:#0B0906;stroke-width:.075;stroke-linejoin:round;cursor:grab;pointer-events:fill}
.piece.sel{stroke:#FFE2A8;stroke-width:.1}
.piece.dragging{cursor:grabbing}
.overlap{fill:var(--bad);opacity:.5;pointer-events:none}
/* pointer-events:fill and an explicit zero stroke, both deliberate. The CSS
   default stroke-width is 1 USER UNIT, which is about 40px at this zoom, and
   pointer-events:all hit-tests that ring even when the stroke is painted none.
   That gave every dot an invisible halo bigger than the gap to its neighbour,
   so taps landed on whichever dot was drawn last. Forgiveness for fat fingers
   is handled deliberately in nearestCutPoint instead. */
.snapdot{fill:var(--ink-2);pointer-events:fill;stroke-width:0;cursor:crosshair}
.snapdot.vertex{fill:var(--amber)}
.snapdot.hot{fill:#fff}
.cutline{stroke:var(--amber);stroke-linecap:round;pointer-events:none}
.cutline.bad{stroke:var(--bad);stroke-dasharray:.2 .2}
.crate-frame{fill:none;stroke:var(--good);stroke-linejoin:round;pointer-events:none}
/* The height of a slanted rock. Teal keeps it apart from a crate measurement
   in amber and a side length in white: it is a different kind of number. */
.height-mark{stroke:var(--teal);stroke-width:.05;stroke-dasharray:.34 .22;pointer-events:none}
.height-cap{stroke:var(--teal);stroke-width:.05;pointer-events:none}
.base-extend{
  stroke:var(--teal);stroke-width:.04;stroke-dasharray:.16 .22;
  opacity:.7;pointer-events:none;
}
.height-label{
  fill:var(--teal);font-weight:700;font-family:'IBM Plex Mono',monospace;
  text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:var(--deep);
  pointer-events:none;
}

.dim{stroke:var(--amber);stroke-width:.05;pointer-events:none}
.dim-label{
  fill:var(--amber);font-weight:700;font-family:'IBM Plex Mono',monospace;
  text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:var(--deep);
  pointer-events:none;
}
.count-cell{fill:none;stroke:var(--amber);stroke-width:.02;opacity:.6;pointer-events:none}

/* ---------------------------------------------------------------- rock */
.crack{stroke:rgba(10,8,6,.55);stroke-linecap:round}
.molten{stroke:#FFD08A;stroke-linecap:round;filter:drop-shadow(0 0 8px #F2882A)}

/* ------------------------------------------------------------- the rig */
.aim-halo{fill:rgba(255,190,90,.14)}
.aim-line{stroke:rgba(255,200,120,.6);stroke-dasharray:6 5;stroke-linecap:round}
.aim-ring{fill:none;stroke:#FFD98A;opacity:.9}
.bracket.live{stroke:var(--teal)}
.rail-beam{stroke:#39445C;stroke-linecap:round}
.rail-hi{stroke:#5A6A8A;stroke-linecap:round;opacity:.7}
.rail-tick{stroke:#2A344A;opacity:.6}
.carriage{fill:#48556F;stroke:#141A26;paint-order:stroke}
.carriage.cut{fill:#5A4A2E}
.carriage.move{fill:#2F4E4A}
.carriage-lamp{fill:#7E8BA5}
.carriage-lamp.cut{fill:var(--amber);filter:drop-shadow(0 0 4px var(--amber))}
.carriage-lamp.move{fill:var(--teal);filter:drop-shadow(0 0 4px var(--teal))}
.arm{stroke:#3E4960;stroke-linecap:round}
.arm-hi{stroke:#6A7A9C;opacity:.55;stroke-linecap:round}
.emitter{fill:#6B5528;stroke:#141A26;paint-order:stroke}
.emitter-lens{fill:#FFD98A;filter:drop-shadow(0 0 6px var(--amber))}
.beam-glow{stroke:rgba(255,150,40,.32);stroke-linecap:round}
.beam-core{stroke:#FFF6DC;stroke-linecap:round;filter:drop-shadow(0 0 9px #FFB03A)}
.beam-tip{fill:#FFFDF2;filter:drop-shadow(0 0 14px #FFC24A)}
.spark-glow{fill:rgba(255,220,148,.3)}
.spark{stroke:#FFD98A;stroke-linecap:round;opacity:.85}
.cable{stroke:#5C6880;stroke-linecap:round}
.claw-body{fill:#3E4A62;stroke:#141A26;paint-order:stroke}
.claw-arm{stroke:#7E8CA8;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .12s}
.claw-arm.tight{stroke:var(--teal)}
.bracket{stroke:var(--amber);fill:none;stroke-linecap:round;opacity:.9}
.turntable{fill:none;stroke:rgba(78,168,160,.55)}

/* ----------------------------------------------------------- responsive */
@media (max-width:980px){
  :root{--bay:200px}
}
@media (max-width:680px){
  :root{--rail:100%}
  #app{padding:0 12px}
  .brief-card{flex-direction:column;align-items:center;text-align:center}
  .shift-stats,.rep-stats{flex-wrap:wrap}
  #answer{flex-direction:column;align-items:stretch}
  #answerForm{justify-content:space-between}
  #oreInput{flex:1}
}

@media print{
  body{background:#fff;color:#000}
  .back-link,.report-actions,.screen:not(#screen-report){display:none!important}
  #screen-report{min-height:0;padding:0}
  .report-card{background:#fff;border:1px solid #999;color:#000;max-width:none}
  .report-card h2,.rep-table td:first-child{color:#000}
  .rep-stats div{background:#f3f3f3}
  .rep-stats b,.eyebrow,.rep-ledger li b{color:#000}
  .rep-table td,.rep-ledger li{color:#222}
}

/* ------------------------------------------------------- teacher's guide */
.tg-section{background:#F7F6F2;border-top:4px solid var(--amber);color:#0B0F1A;padding:56px 24px 64px}
.tg-inner{max-width:960px;margin:0 auto}
.tg-eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#0F766E;margin:0 0 8px;display:block}
.tg-heading{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin:0 0 10px;letter-spacing:-.02em;font-family:'Inter',sans-serif}
.tg-intro{font-size:1rem;color:#3F4A5C;max-width:680px;margin:0 0 32px;line-height:1.7}
.tg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:36px}
.tg-card{background:#fff;border:2px solid #E2E4E9;border-radius:var(--r-lg);padding:22px}
.tg-card h3{font-size:.9375rem;font-weight:700;margin:0 0 12px;font-family:'Inter',sans-serif}
.tg-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.tg-card li{font-size:.875rem;color:#3F4A5C;padding-left:18px;position:relative;line-height:1.55}
.tg-card li::before{content:'\\2192';position:absolute;left:0;color:#0F766E;font-size:.75rem;top:3px}
.tg-std{font-weight:700;color:#6D28D9}
.tg-faq{border-top:2px solid #E2E4E9;padding-top:24px;display:flex;flex-direction:column;gap:10px}
.tg-faq details{border:2px solid #E2E4E9;border-radius:var(--r);padding:14px 18px;background:#fff}
.tg-faq summary{font-weight:700;font-size:.9375rem;cursor:pointer;list-style:none;color:#0B0F1A}
.tg-faq summary::-webkit-details-marker{display:none}
.tg-faq summary::before{content:'+ ';color:#0F766E}
.tg-faq details[open] summary::before{content:'\\2212 '}
.tg-faq details p{margin:10px 0 0;font-size:.875rem;color:#3F4A5C;line-height:1.6}

/* ================================================================= the room
   The stage is a place, not a panel: one scene plate with the bench running
   through it, the rock on the bench, the tools lying beside it and the crate
   at the end. Nothing here is chrome. */
#stage{
  position:relative;width:100%;aspect-ratio:16/9;min-height:400px;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05);
}
#scene{
  position:absolute;inset:0;
  background:#0E1017 url('assets/lab-scene.jpg') center/cover no-repeat;
}
/* A warm pool of lamp light falling on the bench. */
#scene::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 40% at 50% 46%,rgba(255,206,140,.16),transparent 70%);
}

/* The working area of the bench, where the rock lies. */
/* Matched to the bench top in the scene plate, so the rock lies ON the bench
   rather than floating in the room. */
#table{position:absolute;left:15%;right:15%;top:29%;height:40%}
#board{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}

/* ------------------------------------------------------------- the tools */
#tools{position:absolute;inset:0;pointer-events:none}
.tool{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--r));
  width:11%;min-width:66px;padding:0;background:none;border:0;pointer-events:auto;
  cursor:pointer;transition:transform .16s cubic-bezier(.2,.9,.3,1.4),filter .16s;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));
}
.tool img{display:block;width:100%;height:auto}
.tool-tag{
  position:absolute;left:50%;top:-15px;transform:translateX(-50%) rotate(calc(var(--r) * -1));
  font-family:'Barlow Condensed',sans-serif;font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  color:var(--ink-3);white-space:nowrap;opacity:0;transition:opacity .16s;text-shadow:0 1px 3px #000;
}
.tool:hover{transform:translate(-50%,-56%) rotate(var(--r)) scale(1.07)}
.tool:hover .tool-tag{opacity:1}
/* Picked up: the tool lifts off the bench and is lit. */
.tool[aria-pressed="true"]{
  transform:translate(-50%,-72%) rotate(calc(var(--r) * .3)) scale(1.16);
  filter:drop-shadow(0 20px 16px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(255,190,90,.75));
}
.tool[aria-pressed="true"] .tool-tag{opacity:1;color:var(--amber-2)}
.tool[aria-pressed="true"]::after{
  content:'';position:absolute;left:50%;bottom:-24px;width:56%;height:12px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);
}
.tool:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.6) drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.tool.using{animation:toolUse .38s ease-out}
@keyframes toolUse{
  0%{transform:translate(-50%,-72%) rotate(calc(var(--r) * .3)) scale(1.16)}
  40%{transform:translate(-50%,-86%) rotate(calc(var(--r) * .3 - 12deg)) scale(1.24)}
  100%{transform:translate(-50%,-72%) rotate(calc(var(--r) * .3)) scale(1.16)}
}

/* ------------------------------------------------------------- the crate */
#crateSpot{position:absolute;left:50%;top:78%;width:17%;min-width:104px;transform:translate(-50%,-50%);pointer-events:none}
#crateBox{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 14px rgba(0,0,0,.6));
  transition:transform .3s,filter .3s}
#crateTag{
  position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  font-family:'Barlow Condensed',sans-serif;font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  color:var(--ink-3);white-space:nowrap;text-shadow:0 1px 3px #000;
}
#stage.ready #crateBox{filter:drop-shadow(0 12px 14px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(120,220,150,.7))}
#stage.ready #crateTag{color:var(--good)}
#stage.sealing #crateBox{animation:crateSeal .45s ease-out}
#stage.shipping #crateTag{opacity:0;transition:opacity .2s}
#stage.shipping #crateBox{animation:crateShip .85s ease-in forwards}
@keyframes crateSeal{
  0%{transform:scale(1)}
  40%{transform:scale(1.12,.88)}
  100%{transform:scale(1)}
}
@keyframes crateShip{
  0%{transform:translateY(0) scale(1);opacity:1}
  18%{transform:translateY(-6%) scale(1.02)}
  100%{transform:translateY(190%) scale(.92);opacity:1}
}

/* ------------------------------------------------------- the tool in hand */
/* Anchored on the working end, not the middle: the laser's nozzle and the
   glove's palm sit on the pointer, so the tool looks aimed rather than carried. */
#heldTool{
  position:fixed;z-index:60;width:var(--tw,104px);height:auto;pointer-events:none;
  transform-origin:var(--ax,20%) var(--ay,55%);
  transform:translate(calc(var(--ax,20%) * -1),calc(var(--ay,55%) * -1)) rotate(var(--tr,-8deg));
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.6));
  will-change:left,top;
}
#heldTool[hidden]{display:none!important}
#heldTool.firing{animation:toolRecoil .3s ease-out}
@keyframes toolRecoil{
  0%{transform:translate(calc(var(--ax) * -1),calc(var(--ay) * -1)) rotate(var(--tr)) scale(1)}
  30%{transform:translate(calc(var(--ax) * -1 + 5%),calc(var(--ay) * -1 - 5%))
      rotate(calc(var(--tr) - 14deg)) scale(1.1)}
  100%{transform:translate(calc(var(--ax) * -1),calc(var(--ay) * -1)) rotate(var(--tr)) scale(1)}
}
/* With a tool in hand the arrow would just be in the way. */
#stage.holding{cursor:none}
#stage.holding #board{cursor:none}
@media (pointer:coarse){ #heldTool{display:none!important} #stage.holding{cursor:auto} }

/* --------------------------------------------------------------- the coach */
#coach{
  position:fixed;z-index:80;pointer-events:none;
  transform:translate(-50%,-100%);
  transition:left .3s cubic-bezier(.2,.8,.3,1),top .3s cubic-bezier(.2,.8,.3,1);
  animation:coachBob 1.4s ease-in-out infinite;
}
#coach[hidden]{display:none!important}
.coach-bubble{
  position:relative;display:flex;align-items:center;gap:10px;margin-bottom:4px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
  background:linear-gradient(180deg,#FFE3AC,#F2C273);color:#2A1C06;
  border-radius:10px;padding:9px 12px;max-width:290px;
  font-size:.875rem;font-weight:600;line-height:1.4;
  box-shadow:0 8px 20px rgba(0,0,0,.55);
}
#coachSkip{
  pointer-events:auto;flex:none;border:0;border-radius:6px;cursor:pointer;
  background:rgba(42,28,6,.16);color:#2A1C06;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.07em;
  font-size:.6875rem;text-transform:uppercase;padding:5px 9px;
}
#coachSkip:hover{background:rgba(42,28,6,.3)}
#coach.bubble-left .coach-bubble{transform:translateX(-40%)}
#coach.bubble-right .coach-bubble{transform:translateX(40%)}
.coach-arrow{display:block;width:26px;height:32px;margin:0 auto;fill:#F2C273;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.6))}
@keyframes coachBob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media (prefers-reduced-motion:reduce){#coach{animation:none}}
.tut-ghost{fill:rgba(242,194,115,.1);stroke:#F2C273;stroke-dasharray:8 6}