[hidden] { display: none !important; }
#bubbles.has-freeplay-theme { overflow: hidden; }
#playground:has(.has-freeplay-theme) { isolation: isolate; }
.theme-section { border-top: 1px solid #bbd9ee18; padding: 0 0 22px; margin-bottom: 16px; border-bottom: 1px solid #bbd9ee18; }
.theme-section h3 { font-size: 14px; font-weight: 500; }
.theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0 12px; }
.theme-option { display: flex; align-items: center; min-height: 44px; padding: 10px; text-align: left; border: 1px solid #a7d8d324; border-radius: 12px; background: #ffffff04; color: #d7e9ef; cursor: pointer; }
.theme-option[aria-pressed="true"] { border-color: #a7e7dd; background: #a7e7dd15; }
.theme-option:focus-visible, .theme-chip:focus-visible, .theme-toggle:focus-visible { outline: 2px solid #baf8e9; outline-offset: -3px; }
#theme-status:empty { display: none; }
#bubbles canvas { pointer-events: auto; touch-action: none; }
#free-screen .control { min-width: 44px; min-height: 44px; }

/* Kept outside the play surface: scrolling/selecting cannot hit objects behind it. */
.free-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; min-width: 0; }
.free-footer-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; }
.theme-dock { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; width: 100%; max-width: 780px; min-width: 0; margin-inline: auto; }
.theme-carousel { display: flex; gap: 5px; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; min-width: 0; flex: 1; padding: 2px 1px; scrollbar-width: thin; scrollbar-color: #8edcd345 transparent; }
.theme-chip, .theme-toggle { min-height: 44px; border: 1px solid #c7e5f01c; background: #b8dbf006; color: #a5bdcc; border-radius: 14px; font-size: 11px; letter-spacing: .1px; cursor: pointer; white-space: nowrap; flex-shrink: 0; -webkit-user-select: none; user-select: none; }
.theme-chip { padding: 0 13px; touch-action: pan-x; }
.theme-chip[aria-pressed="true"] { border-color: #a7e7dd65; background: #a7e7dd12; color: #d2eee9; }
.theme-chip:hover, .theme-toggle:hover { background: #b8dbf014; color: #e9f6fa; }
.theme-toggle { min-width: 50px; padding: 0 10px; touch-action: manipulation; background: transparent; border-color: transparent; color: #91acba; }
.theme-toggle::after { content: '⌄'; padding-left: 5px; }
.theme-dock[data-collapsed="true"] { grid-column: 2; grid-row: 1; width: auto; margin: 0; }
.theme-dock[data-collapsed="true"] .theme-toggle::after { content: '⌃'; }
.free-footer:has(.theme-dock[data-collapsed="true"]) .free-footer-meta { grid-column: 1; grid-row: 1; }
@media (max-width: 420px) {
 .free-footer:has(.theme-dock[data-collapsed="true"]) .footnote { max-width: 155px; line-height: 1.5; }
 .theme-chip { padding-inline: 11px; }
}
@media (max-height: 450px) {
 #free-screen { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
 .free-footer { gap: 0 10px; }
 .free-footer-meta { font-size: 10px; }
 .theme-carousel { padding-block: 0; }
}
/* Sand retains the established shell, with a warm tactile tray inside it. */
.scene-zen .intro { z-index: 2; pointer-events: none; }
.scene-zen .intro h1 { color: #65573d; font-size: clamp(32px, 4vw, 52px); }
.scene-zen .intro .instruction { color: #695a40; text-wrap: balance; }
.scene-zen .intro .eyebrow { color: #77664a; }
body.has-popped .scene-zen .intro { opacity: 0; }