/* The attached shell has one travel path for scroll, Pro and interruption. */
:root { --ease:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --shell-ease:cubic-bezier(.4,0,.2,1); }
.hud {pointer-events:none;}
.hud-top,.command-panel {pointer-events:auto;}
.hud-top,.hud.compact .hud-top {height:68px;}
.hud-reveal {height:72px;margin-top:-5px;overflow:clip;pointer-events:none;}
.hud .hud-composer {display:flex;margin:0 auto;pointer-events:auto;opacity:1;transform:translateY(0);transition:transform 480ms var(--shell-ease);}
.hud[data-retracted="true"] .hud-composer {transform:translateY(-100%);pointer-events:none;}
.hud-tabs {transition:opacity 180ms ease,transform 400ms var(--shell-ease),visibility 0s;}
.hud.pro-previewing .hud-tabs,.hud.compact .hud-tabs {opacity:0;visibility:hidden;transform:translateY(-14px);pointer-events:none;transition:opacity 180ms ease,transform 400ms var(--shell-ease),visibility 0s 400ms;}
.preview-channels {position:absolute;left:175px;top:12px;display:flex;align-items:center;gap:3px;height:44px;opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;transition:opacity 220ms ease,transform 400ms var(--shell-ease),visibility 0s 400ms;}
.preview-channels::before {content:'Pro';font-size:12px;color:#aebdd2;margin-right:7px;}
.preview-channels button {min-height:44px;padding:0 13px;border-radius:18px;font-size:14px;color:#b8c4d7;}
.preview-channels button[aria-pressed="true"] {background:#b3c5e61a;color:#edf3fc;}
.hud.pro-previewing:not(.compact) .preview-channels {opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:180ms,100ms,0s;}
.hud-underlight {position:absolute;z-index:-1;left:8%;right:8%;top:34px;height:80px;border-radius:50%;background:radial-gradient(ellipse,#81a9ff65,#aec2ff18 40%,transparent 72%);filter:blur(13px);opacity:0;pointer-events:none;transition:opacity 350ms ease;}
.hud.pro-previewing:not(.compact) .hud-underlight {opacity:1;transition-delay:300ms;animation:pro-breath 5.5s ease-in-out infinite alternate;}
@keyframes pro-breath {to{transform:translateY(6px) scaleX(1.04);opacity:.5;}}
.hud-script {position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 48px 0 19px;pointer-events:none;opacity:0;border-radius:28px;}
.hud-script-label {font-size:9px;letter-spacing:1px;color:#b9c6dd;margin-bottom:4px;}
.hud-script-text {font-size:14px;letter-spacing:-.12px;color:#f7f9ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hud-script-send {position:absolute;right:16px;font-size:23px;color:#b0c6f6;}
.hud.story-playing .hud-script {opacity:1;}
.hud.story-playing #command,.hud.story-playing #command-target,.hud.story-playing #command-form>button {opacity:0;}
/* Small, usable instruments: content earns its space, chrome stays quiet. */
.space {top:235px;bottom:180px;width:min(1040px,calc(100% - 112px));z-index:2;pointer-events:none;}
.space>.overlay {pointer-events:auto;}
.overlay,.overlay[data-size="compact"] {width:248px;}
.overlay[data-size="compact"] {width:232px;}
.overlay[data-type="game"] {width:480px;}
.overlay[data-type="game"][data-size="compact"] {width:440px;}
.overlay[data-type="note"] {width:272px;}
.overlay-shell {isolation:isolate;border-radius:16px;background:linear-gradient(135deg,rgba(var(--tint-rgb),.68),rgba(255,255,255,.4));border:1px solid #ffffffb8;box-shadow:0 14px 26px -19px #1d302d75,0 1px 3px #20302512,inset 0 1px 0 #ffffffb3;backdrop-filter:blur(8px) saturate(1.05);-webkit-backdrop-filter:blur(8px) saturate(1.05);}
.overlay-shell::after {content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(130deg,#fff2,transparent 50%,#b4d1fb12);transition:opacity 450ms var(--ease);}
.overlay[data-story-target] .overlay-shell {border-color:#eaf2ff;box-shadow:0 14px 26px -18px #193b5750,inset 0 0 0 1px #8da8c940;}
.overlay.story-blue .overlay-shell {--tint-rgb:182,206,232;--accent:#4c7aaf;}
.overlay-header,.overlay[data-type="game"] .overlay-header {min-height:44px;padding:0 5px;gap:0;}
.overlay-header .overlay-title,.overlay[data-type="counter"] .overlay-header .overlay-title,.overlay[data-type="timer"] .overlay-header .overlay-title {display:block;font-size:14px;font-weight:500;margin:0 0 0 1px;letter-spacing:-.15px;}
.overlay-header .drag-handle,.overlay-header .icon-button {width:44px;height:44px;}
.overlay-header .drag-handle img {width:13px;height:16px;opacity:.5;}
.overlay-header .icon-button img {width:14px;height:14px;opacity:.55;}
.overlay-header .icon-button:hover {background:#ffffff6b;}
.overlay-body,.overlay[data-size="compact"] .overlay-body {padding:4px 16px 16px;position:relative;}
.overlay[data-type="counter"] .overlay-body,.overlay[data-type="timer"] .overlay-body {min-height:84px;}
.counter-value,.overlay[data-size="compact"] .counter-value {font-size:38px;line-height:1.15;margin:3px 100px 0 0;text-align:left;letter-spacing:-1.4px;}
.timer-value,.overlay[data-size="compact"] .timer-value {font-size:32px;line-height:1.3;margin:0 96px 5px 0;text-align:left;letter-spacing:-1px;}
.counter-actions,.timer-actions {position:absolute;right:12px;top:6px;gap:2px;}
.round-control {width:44px;height:44px;border-radius:12px;background:#ffffff68;border:1px solid #ffffff65;box-shadow:0 1px 2px #20332408,inset 0 1px 0 #ffffff66;}
.round-control img {width:19px;height:19px;}
.timer-track {height:3px;width:calc(100% - 100px);margin:6px 0 0;box-shadow:none;background:#394f5320;}
.overlay[data-type="timer"] .overlay-body {min-height:89px;}
.game-wrap {padding:0 13px 12px;}
.game-scorebar {justify-content:flex-start;font-size:12px;gap:13px;padding:9px 1px 4px;}
.game-lives {margin-left:auto;}
.game-canvas {background:linear-gradient(145deg,#edf5fb28,#f7faf912);border-radius:8px;}
.game-status {font-size:14px;max-width:65%;}
.game-bottom {gap:8px;}
.game-key-hint {font-size:10px;letter-spacing:0;color:#4d5c53;}
.game-controls .pill {min-height:44px;border-radius:12px;padding:0 16px;background:#ffffffe0;box-shadow:0 1px 3px #24352e13;}
.creation-dock {padding:5px 9px;border-radius:20px;gap:12px;box-shadow:0 9px 20px -14px #24352e60,inset 0 1px 0 #ffffffa0;}
.creation-dock .pill {border-radius:14px;background:#ffffff80;box-shadow:none;min-height:44px;}
.creation-dock .text-button {font-size:14px;}

/* A quiet invitation above the workspace; no headline competes with the tools. */
.story-deck {position:absolute;z-index:1;top:206px;left:50%;transform:translateX(-50%);width:340px;text-align:center;pointer-events:none;}
.story-kicker {display:flex;justify-content:center;align-items:center;gap:7px;font-size:11px;letter-spacing:.1px;color:#45524c;}
.story-indicator {width:4px;height:4px;border-radius:50%;background:#688395;}
.story-silent {display:none;}
.story-deck.playing .story-silent {display:block;padding-left:7px;border-left:1px solid #63705c40;}
.story-caption {font-size:17px;font-weight:500;letter-spacing:-.4px;line-height:1.3;margin:8px 0 5px;color:#29392f;text-shadow:0 1px 10px #ffffffb0;}
.story-controls {display:flex;align-items:center;gap:12px;justify-content:center;pointer-events:auto;}
.story-controls button {display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 2px;border-radius:9px;font-size:14px;background:transparent;}
.story-controls button:hover {text-decoration:underline;text-underline-offset:4px;}
.story-controls img {width:13px;height:13px;}
.pro-switch {position:relative;width:22px;height:13px;border-radius:9px;background:#99a29b60;}
.pro-switch::after {content:'';position:absolute;left:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #18281c30;transition:transform 200ms var(--ease);}
[aria-pressed="true"] .pro-switch {background:#6c8ebb;}
[aria-pressed="true"] .pro-switch::after {transform:translateX(9px);}
.story-progress {display:block;width:88px;height:2px;margin:1px auto 0;overflow:hidden;background:#374e4815;opacity:0;}
.story-deck.playing .story-progress {opacity:1;}
.story-progress i {display:block;width:100%;height:100%;background:#627f97;transform:scaleX(0);transform-origin:left;}
.botanical {inset:-12px;animation:botanical-breathe 25s ease-in-out infinite alternate;transform-origin:52% 70%;}
@keyframes botanical-breathe {to{transform:scale(1.012) translateY(-3px);}}
html[data-motion="paused"] .botanical,html[data-hero-visible="false"] .botanical,html[data-motion="paused"] .hud-underlight,.hud[data-story-suspended="true"] .hud-underlight {animation-play-state:paused;}
@media(min-width:900px) and (max-height:800px) {
  .playground {min-height:720px;}
  .space {top:200px;bottom:150px;}
  .story-deck {top:182px;}
  .story-caption {font-size:16px;}
  .overlay[data-type="game"] {width:460px;}
  .overlay,.overlay[data-size="compact"] {width:236px;}
}
@media(min-width:900px) and (max-width:1199px) {
  .playground {min-height:800px;}
  .space {top:225px;bottom:160px;width:calc(100% - 100px);}
  .overlay,.overlay[data-size="compact"] {width:228px;}
  .overlay[data-type="game"] {width:460px;}
  .story-deck {top:183px;}
}
@media(max-width:899px) {
  .hud-top,.hud.compact .hud-top {height:66px;}
  .hud-reveal {height:69px;}
  .hud .get-wrap,.hud.compact .get-wrap {align-self:flex-start;padding-top:9px;}
  .hud .get-wrap>span,.hud.compact .get-wrap>span {display:block;}
  .playground {padding:200px 24px 165px;}
  .space {position:relative;top:auto;bottom:auto;width:min(480px,100%);gap:14px;}
  .space>.overlay,.space>.overlay[data-size="compact"] {width:100%;}
  .overlay-header .drag-handle,.overlay-header .icon-button {width:44px;}
  .overlay-body,.overlay[data-size="compact"] .overlay-body {padding:4px 18px 13px;}
  .overlay[data-type="counter"] .overlay-body {min-height:70px;}
  .overlay[data-type="timer"] .overlay-body {min-height:76px;}
  .counter-actions,.timer-actions {right:15px;top:4px;}
  .mobile-reorder {border-top:1px solid #45534612;padding:0 9px;min-height:44px;}
  .mobile-reorder>span {font-size:11px;color:#526153;}
  .mobile-reorder button {min-height:44px;font-size:11px;}
  .story-deck,.hud.story-playing+main .story-deck {position:relative;top:auto;left:auto;transform:none;width:100%;margin:0 auto 20px;padding:46px 0 0;}
  .story-kicker {font-size:10px;flex-wrap:wrap;}
  .story-caption {font-size:18px;margin:7px 0 3px;}
  .story-progress {margin-top:0;}
  .hud-script {padding-left:15px;padding-right:30px;}
  .hud-script-label {font-size:8px;letter-spacing:.5px;}
  .hud-script-send {right:12px;font-size:20px;}
  .game-status {font-size:14px;max-width:52%;}
  .creation-dock {gap:8px;}
}
@media(max-width:650px) {
  .hud-tabs,.hud.compact .hud-tabs {display:flex;height:44px;top:142px;padding:0 3px;transform:translateX(-50%);transition:opacity 200ms ease,transform 480ms var(--shell-ease),visibility 0s;}
  .hud-tabs button {min-height:44px;font-size:13px;}
  .hud.pro-previewing .hud-tabs,.hud.compact .hud-tabs {transform:translate(-50%,-100px);opacity:0;visibility:hidden;transition:opacity 220ms ease,transform 480ms var(--shell-ease),visibility 0s 480ms;}
  .preview-channels {left:auto;right:11px;top:11px;gap:0;}
  .preview-channels::before {display:none;}
  .preview-channels button {padding:0 9px;min-width:52px;}
  .hud .get-wrap {transition:opacity 200ms ease,transform 400ms var(--shell-ease),visibility 0s;}
  .hud.pro-previewing:not(.compact) .get-wrap {opacity:0;visibility:hidden;transform:translateY(-14px);transition:opacity 200ms ease,transform 400ms var(--shell-ease),visibility 0s 200ms;}
  .hud.compact .page-links {display:none;}
}
@media(max-width:359px) {
  .playground {padding-inline:18px;}
  .hud.compact .brand .emble-orb {display:block;}
  .game-wrap {padding-inline:11px;}
  .game-status {max-width:47%;}
  .story-deck {padding-top:46px;}
}
@media(prefers-reduced-motion:reduce) {
  .hud .hud-composer,.hud-tabs,.preview-channels,.hud .get-wrap {transition:none!important;}
  .botanical,.hud-underlight {animation:none!important;}
  .story-progress {display:none;}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .overlay-shell {background:rgb(var(--tint-rgb));backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#809284;}
}
@media(min-width:1200px) and (max-height:800px) {
  .story-deck {left:calc(50% - 374px);top:380px;width:240px;}
  .story-kicker {flex-wrap:wrap;}
  .story-controls {gap:10px;}
  .story-controls button {font-size:13px;}
}

.overlay.long-value .counter-value {margin-right:0;}
.overlay.long-value .counter-actions {position:static;justify-content:flex-end;margin-top:10px;}

@media(max-width:650px) {
  .hud.compact .page-links {display:flex;gap:0;margin-left:auto;}
  .hud.compact .return-link {font-size:0;min-width:44px;min-height:44px;text-align:center;padding:10px 0;}
  .hud.compact .return-link::before {content:'↑';font-size:20px;}
  .hud.compact .get-wrap {margin-left:0;}
}
/* The shelf follows the stack on phones, so long tools can never cover it. */
@media(max-width:899px) {
  .playground {padding-bottom:24px;}
  .creation-area {position:relative;left:auto;bottom:auto;transform:none;width:max-content;max-width:100%;margin:20px auto 0;}
  .playground-footer {position:relative;left:auto;right:auto;bottom:auto;max-width:480px;margin:20px auto 0;gap:12px;}
}
@media(min-width:900px) and (max-width:1199px) {
  .playground {min-height:900px;}
}