:root{font-family:-apple-system,BlinkMacSystemFont,"Avenir Next",Inter,system-ui,sans-serif;color:#f6f5eb;background:#142921;font-synthesis:none;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}html,body{height:100%;margin:0;overscroll-behavior:none}body{min-width:320px}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button:focus-visible,a:focus-visible{outline:3px solid #ffca6c;outline-offset:3px}
button:disabled{opacity:.45;cursor:not-allowed}
.app{width:100%;height:100%;max-width:1600px;margin:0 auto}
.stage{position:relative;isolation:isolate;width:100%;height:100dvh;min-height:450px;overflow:hidden;background:#a2cfc2}
#world3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.top-shade,.bottom-shade{position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.top-shade{top:0;height:210px;background:linear-gradient(180deg,#142b25a6 0%,#132d243f 42%,transparent 100%)}
.bottom-shade{bottom:0;height:250px;background:linear-gradient(0deg,#142b25a0,transparent)}
.topbar{position:absolute;top:max(13px,env(safe-area-inset-top));left:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.identity{display:flex;align-items:center;gap:9px;min-width:0;text-shadow:0 2px 9px #172b2388}
.identity-icon{width:44px;height:44px;border-radius:14px;background:#f6f2eae6;color:#294e3c;font:700 30px Georgia,serif;display:grid;place-items:center;box-shadow:0 4px 24px #0b24193d}
.identity strong{display:block;letter-spacing:-.025em;font-size:18px;font-weight:850;line-height:1.1}
.identity span{display:block;letter-spacing:.1em;font-size:8px;opacity:.85;font-weight:850;margin-top:3px}
.top-actions{display:flex;align-items:center;gap:7px;pointer-events:auto}
.icon-button{display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border:1px solid #f0f2e955;border-radius:15px;background:#18392fa6;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#fffaf0;font-size:25px;font-weight:750;box-shadow:0 5px 20px #122c2044}
.icon-button:active,.icon-button[aria-expanded="true"]{background:#e8f2e4;color:#244b39}
.task-card{position:absolute;z-index:3;top:clamp(72px,11vh,110px);left:clamp(12px,2vw,26px);max-width:min(485px,calc(100vw - 24px));padding:13px 15px 13px;border:1px solid #f9f5e5a1;border-radius:19px;background:#faf9edeb;color:#284838;box-shadow:0 8px 29px #1d382527;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);pointer-events:none}
.task-eyebrow{display:flex;align-items:center;gap:7px;color:#42785c;font-weight:900;font-size:10px;letter-spacing:.07em;margin-bottom:5px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#70ab70;flex:none}
#save-indicator{color:#66836c;font-weight:600;letter-spacing:0;margin-left:auto}
#nextstep{display:block;font-size:clamp(15px,2vw,19px);font-weight:850;line-height:1.25;letter-spacing:-.01em}
.feedback{font-size:12px;line-height:1.35;color:#577061;font-weight:650;margin:6px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.feedback.problem{color:#9d4634;display:block;-webkit-line-clamp:unset;overflow:visible}
.scene-tip{position:absolute;z-index:2;top:48%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:800;white-space:nowrap;background:#f8f9e4d9;color:#3b5a4c;padding:9px 14px;border-radius:30px;pointer-events:none;box-shadow:0 5px 25px #14312325;transition:opacity .35s}
.scene-tip.discovered{opacity:0}
.play-controls{position:absolute;z-index:4;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(660px,calc(100% - 22px));pointer-events:auto}
.context-card{padding:10px;border-radius:20px;background:#18382ee8;box-shadow:0 13px 38px #11291b77;border:1px solid #dfe8d240;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
.context-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 4px 8px}
.context-heading strong{font-size:14px;font-weight:850;letter-spacing:-.01em}
.context-heading span{font-size:11px;font-weight:700;color:#d0e0d0;text-align:right}
.context-actions{display:grid;grid-template-columns:minmax(48px,.62fr) minmax(0,1.9fr) minmax(48px,.62fr);gap:7px}
.context-actions button{height:54px;min-width:0;border-radius:13px;border:1px solid #f7f8ed49;background:#f5f4e8e6;color:#244738;font-weight:850;font-size:15px;box-shadow:0 2px 8px #10251d3f}
.context-actions .edge-key{background:#d8e4dbdd;color:#274f3e;font-size:17px}
.context-actions .main-key{background:#e9bc69;color:#3e392b;border-color:#ffe1a18a;font-weight:900}
#build-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
#crane-actions{grid-template-columns:minmax(48px,.65fr) minmax(0,1fr) minmax(0,1fr) minmax(48px,.65fr)}
#site-actions:has([data-act="pour"]:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr))}
#site-actions:has([data-act="pour"]:not([hidden])) [data-act="pour"]{grid-column:1/-1}
.context-actions button:active{transform:translateY(1px);filter:brightness(.9)}
.build-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding-top:8px}
.build-tools button{min-height:44px;border-radius:11px;border:1px solid #7189797c;background:#2f5347;color:#f8f5e8;font-size:13px;font-weight:750}
.build-tools button.selected{background:#e6ebde;color:#224d38;border-color:#eff8e6}
.mode-nav{margin:8px auto 0;width:min(390px,100%);padding:5px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;background:#1a392fce;box-shadow:0 10px 25px #0f2a203d;border:1px solid #e7f0e94d;border-radius:18px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.mode-nav button{min-height:48px;min-width:0;border:0;border-radius:13px;background:transparent;color:#dcece0;font-size:14px;font-weight:850;white-space:nowrap}
.mode-nav button span{font-size:16px;margin-right:5px}
.mode-nav button.active{background:#f6f3e8;color:#2d5942;box-shadow:0 2px 8px #112f2233}
.overlay-scrim{position:absolute;z-index:5;inset:0;background:#10251b58;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.scene-sheet{position:absolute;z-index:6;top:auto;right:clamp(10px,2vw,28px);bottom:max(12px,env(safe-area-inset-bottom));width:min(400px,calc(100% - 20px));max-height:min(76dvh,640px);overflow:auto;overscroll-behavior:contain;background:#f9f8ee;color:#294d3c;border-radius:24px;padding:12px 17px 20px;box-shadow:0 22px 70px #102a1ebd;border:1px solid #fff}
.sheet-handle{width:40px;height:4px;border-radius:10px;background:#bdcbbf;margin:0 auto 13px}
.sheet-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.sheet-title strong{font-size:20px;font-weight:900}
.scene-sheet .close{background:#e4eadd;color:#355844;border:0;box-shadow:none;width:45px;height:45px}
.sheet-section{display:grid;gap:9px}
.sheet-section p{font-size:14px;line-height:1.45;color:#5a7364;margin:4px 0}
.sheet-section button{width:100%;min-height:52px;text-align:left;padding:12px 15px;border:1px solid #d7decf;border-radius:13px;background:#eff3e8;color:#294d3b;font-size:15px;font-weight:800}
.sheet-options{display:grid;gap:8px}
.sheet-section .sheet-wide{background:#dce8d7}
.classic-link{display:block;text-align:center;margin-top:8px;padding:11px;font-size:12px;color:#456d5c}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:650px){
 .topbar{top:calc(env(safe-area-inset-top) + 8px);left:10px;right:10px;gap:6px}
 .identity{gap:7px}
 .identity-icon{width:40px;height:40px;font-size:27px;border-radius:12px}
 .identity strong{font-size:16px}
 .identity span{font-size:8px}
 .top-actions{gap:5px}
 .icon-button{height:44px;width:44px;border-radius:13px;font-size:23px}
 .task-card{top:calc(env(safe-area-inset-top) + 64px);left:9px;right:9px;width:auto;max-width:unset;padding:9px 12px 10px;border-radius:15px}
 .task-eyebrow{font-size:9px;margin-bottom:3px}
 #nextstep{font-size:15px}
 .feedback{font-size:11px;margin-top:4px}
 .scene-tip{top:49%;font-size:10px;padding:7px 10px}
 .play-controls{bottom:calc(env(safe-area-inset-bottom) + 8px);width:calc(100% - 16px)}
 .context-card{padding:8px;border-radius:17px}
 .context-heading{margin-bottom:6px}
 .context-heading strong{font-size:13px}
 .context-heading span{font-size:10px;max-width:60%}
 .context-actions{gap:5px}
 .context-actions button{height:49px;min-height:49px;border-radius:11px;font-size:13px;padding:5px 4px}
 .context-actions .edge-key{font-size:15px}
 .build-tools{padding-top:6px;gap:4px}
 .build-tools button{min-height:44px;font-size:12px}
 .mode-nav{margin-top:6px;padding:4px;border-radius:15px}
 .mode-nav button{min-height:46px;font-size:13px;border-radius:11px}
 .mode-nav button span{font-size:16px;margin-right:3px}
 .scene-sheet{right:8px;bottom:calc(env(safe-area-inset-bottom) + 8px);max-height:77dvh}
}
@media(max-height:540px) and (min-width:651px){
 .task-card{top:74px;max-width:330px}
 .feedback{max-width:300px}
 .play-controls{left:auto;right:10px;bottom:10px;transform:none;width:min(425px,53vw)}
 .context-card{padding:7px}
 .mode-nav{margin-top:5px}
}
@media(prefers-reduced-motion:reduce){.scene-tip{transition:none}}

.job-progress{height:5px;margin:8px 0 1px;border-radius:9px;overflow:hidden;background:#cbd9c6}
.job-progress span{display:block;height:100%;width:0;background:#c99b43;border-radius:9px;transition:width .16s ease}


/* CW-UX-032: a child gets a single spotlight on the next REAL control.
   Never cover the construction site with an instruction modal. */
@keyframes construction-next-pulse{
  0%,100%{box-shadow:0 0 0 3px #fff9d9,0 0 0 6px #e4a64a,0 0 18px 4px #efc564a0}
  50%{box-shadow:0 0 0 4px #fff9d9,0 0 0 10px #ffc75a,0 0 27px 9px #ffd77b9a}
}
button.guided-next{
  position:relative;
  z-index:5;
  outline:3px solid #fff8dc;
  outline-offset:3px;
  animation:construction-next-pulse 1.15s ease-in-out infinite;
  opacity:1!important;
}
@media(prefers-reduced-motion:reduce){
  button.guided-next{animation:none;box-shadow:0 0 0 5px #e4a64a}
}

/* A pulsing ring sits at the actual next pickable 3D target, not over the page. */
.world-guide{
  position:absolute;z-index:3;transform:translate(-50%,-50%);
  height:54px;width:54px;border:3px solid #fffce0;border-radius:50%;
  background:#f2b84636;box-shadow:0 0 0 5px #e5aa46,0 0 25px 12px #ffda79a0;
  pointer-events:none;animation:construction-world-spot 1.25s ease-in-out infinite;
}
.world-guide span{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);
  white-space:nowrap;max-width:210px;padding:7px 10px;
  background:#fdf9e7;color:#315440;border:1px solid #f6e5a4;
  box-shadow:0 4px 16px #16332850;border-radius:14px;
  font-size:12px;font-weight:850;
}
@keyframes construction-world-spot{
  0%,100%{box-shadow:0 0 0 4px #e5aa46,0 0 16px 5px #ffda7995}
  50%{box-shadow:0 0 0 9px #e5aa46,0 0 28px 12px #ffda79c9}
}
@media(prefers-reduced-motion:reduce){.world-guide{animation:none}}