/* Shared chrome for era worlds (world-host.mjs). Era looks live in the world's own scene. */
#scene[data-world] > canvas{visibility:hidden}
body[data-world-active=true] .look-hint{display:none}
.world-offer{position:absolute;right:18px;bottom:18px;z-index:4;padding:11px 16px;border:1px solid var(--room-accent,#efbc83);border-radius:999px;background:#0b0806e6;color:#f7ead4;font-weight:600;font-size:14px;line-height:1.2;font-family:inherit;cursor:pointer;box-shadow:0 8px 28px #0008}
.world-offer:hover,.world-offer:focus-visible{background:#1c130b;outline:2px solid var(--room-accent,#efbc83);outline-offset:2px}
.world-offer[hidden],.world-layer[hidden],.world-replay[hidden]{display:none}
.world-layer{position:absolute;inset:0;z-index:5;background:#0b0806;--world-accent:#efbc83}
.world-canvas-host,.world-canvas-host canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.world-hud{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;pointer-events:none}
.world-hud button{pointer-events:auto;min-height:36px;padding:7px 12px;border:1px solid color-mix(in srgb,var(--world-accent) 55%,transparent);border-radius:999px;background:#0b0806d9;color:#f7ead4;font-weight:500;font-size:13px;line-height:1.2;font-family:inherit;cursor:pointer}
.world-hud button:hover,.world-hud button:focus-visible{border-color:var(--world-accent);outline:2px solid var(--world-accent);outline-offset:2px}
.world-hud button[aria-pressed=true]{background:color-mix(in srgb,var(--world-accent) 30%,#0b0806);border-color:var(--world-accent)}
.world-vantages{display:flex;gap:6px}
.world-tools{display:flex;gap:6px;margin-left:auto}
.world-caption{position:absolute;left:12px;bottom:12px;max-width:min(290px,29%);padding:8px 11px;border-radius:10px;background:#0b0806d9}
.world-status{margin:0;color:#f3e6cf;font-size:13px;line-height:1.4}
.world-limit{margin:5px 0 0;color:#c9b49a;font-size:12px;line-height:1.35}
.world-limit-full{display:none}
.world-slate-line{display:none;margin:0;color:#f3e6cf;font-size:12px}
.world-threshold{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;background:#060403;color:#f7ead4;opacity:0;pointer-events:none;transition:opacity .45s ease}
.world-layer[data-phase=entering] .world-threshold{opacity:1}
.world-threshold-date{font:600 12px/1 ui-monospace,monospace;letter-spacing:.3em;color:var(--world-accent)}
.world-threshold-title{font:400 clamp(22px,3vw,34px)/1.15 Georgia,serif}
.world-threshold-note{font-size:13px;color:#c9b49a;font-style:italic}
.world-hud button[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.world-primary{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;padding:14px 28px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffd89a,var(--world-accent));color:#1a0f06;font-weight:800;font-size:17px;line-height:1.1;font-family:inherit;cursor:pointer;box-shadow:0 0 0 1px #fff3,0 10px 40px color-mix(in srgb,var(--world-accent) 55%,transparent);animation:world-primary-pulse 2.2s ease-in-out infinite}
.world-primary:hover,.world-primary:focus-visible{outline:3px solid #fff;outline-offset:3px}
.world-primary[hidden]{display:none}
@keyframes world-primary-pulse{50%{box-shadow:0 0 0 1px #fff3,0 10px 60px color-mix(in srgb,var(--world-accent) 85%,transparent)}}
body[data-low-motion=true] .world-primary{animation:none}
@media (prefers-reduced-motion:reduce){.world-primary{animation:none}}
.world-hint{position:absolute;left:50%;top:62px;transform:translateX(-50%);max-width:calc(100% - 24px);margin:0;padding:7px 12px;border-radius:999px;background:#0b0806e6;border:1px solid var(--world-accent);color:#f7ead4;font-size:13px;text-align:center}
.world-hint:empty{display:none}
.world-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.world-label-short{display:none}
body[data-low-motion=true] .world-threshold{transition:none}
@media (prefers-reduced-motion:reduce){.world-threshold{transition:none}}
@media (max-width:1000px){
  .world-offer{right:10px;bottom:10px;padding:9px 13px;font-size:13px}
  .world-hud{top:8px;left:8px;right:8px;gap:5px}
  .world-hud button{min-height:36px;min-width:36px;padding:5px 9px;font-size:13px}
  .world-label-full{display:none}
  .world-label-short{display:inline}
  .world-hud{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .world-tools{margin-left:0}
  .world-caption{top:auto;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 8px}
  /* the lesson panel right below the strip carries the full result; the strip keeps the scene */
  .world-status{display:none}
  .world-slate-line{display:block}
  .world-limit{font-size:12px;margin-top:0}
  .world-primary{bottom:48px;padding:12px 22px;font-size:15px}
  .world-limit-full{display:none}
}
/* Tall portrait phones: the world stays in view as a bounded strip while the lesson scrolls beneath it.
   Landscape, short screens and high zoom keep the normal flow (WCAG 1.4.10), and scroll padding
   keeps a focused control or result clear of the strip (WCAG 2.4.11). */
@media (max-width:700px) and (orientation:portrait) and (min-height:600px){
  /* road90-shell pins the phone scene with !important; a world is the one case that stays in view. */
  body[data-view=museum][data-world-active=true][data-inspecting=true] #scene{position:sticky!important;top:0!important;z-index:3;height:var(--world-pin)!important;min-height:0!important;max-height:none!important}
  /* A class on <html> instead of :has(), so older browsers keep focused controls clear of the strip too. */
  html[data-world-pinned=true]{scroll-padding-top:calc(var(--world-pin) + 12px);scroll-padding-bottom:80px}
}
:root{--world-pin:clamp(240px,40svh,340px)}
@media (max-height:699px){:root{--world-pin:clamp(200px,34svh,300px)}}
/* Full screen: the theatre is the whole page and the lesson arrives as step cards. */
.world-layer[data-mode=immersive]{position:fixed;inset:0;z-index:1000}
html[data-world-immersive=true],html[data-world-immersive=true] body{overflow:hidden}
.world-toggles{display:flex;gap:6px}
.world-sound-ask{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:min(420px,calc(100% - 32px));padding:20px 22px;border-radius:18px;background:#0b0806f2;border:1px solid var(--world-accent);color:#f7ead4;text-align:center;box-shadow:0 20px 60px #000c}
.world-sound-ask[hidden]{display:none}
.world-sound-ask p{margin:0 0 14px;font-size:15px;line-height:1.45}
.world-sound-ask-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.world-sound-ask button{min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid var(--world-accent);background:#1c130b;color:#f7ead4;font:inherit;font-weight:700;cursor:pointer}
.world-sound-ask button:first-child{background:linear-gradient(180deg,#ffd89a,var(--world-accent));color:#1a0f06;border:0}
.world-sound-ask button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:700px){.world-layer[data-mode=immersive] .world-hud{flex-wrap:wrap}}
.world-layer[data-mode=immersive] .world-status,.world-layer[data-mode=immersive] .world-slate-line{display:none}
.world-layer[data-mode=immersive] .world-caption{left:50%;right:auto;bottom:10px;transform:translateX(-50%);max-width:min(420px,40%);background:transparent;padding:0;text-align:center}
@media (max-width:700px){.world-layer[data-mode=immersive] .world-caption{display:none}}