/* ============================================================================ Think Lab — STANDARD EXPERIENCE LAYER (one file, every game) Include LAST in so it wins over per-game styles: Owns: gold theme, no-scrollbar, the bottom drawer, the standard button row, the expressive-shape hero frame. [2026-06-29] ============================================================================ */ /* 1. No visible scrollbars anywhere */ * { scrollbar-width: none; } *::-webkit-scrollbar { display: none; } /* 2. ONE LLOS gold scheme — kill any division (logic-blue / pattern / etc.) accent */ :root { --primary: #EA7A27; --primary-dark: #C2611C; --primary-soft: #FDE7D2; --logic: #EA7A27; --logic-dark: #C2611C; --logic-soft: #FDE7D2; --accent: #EA7A27; --accent-dark: #C2611C; --accent-soft: #FDE7D2; --combinatorics: #EA7A27; --combinatorics-soft: #FDE7D2; --bg-warm: #FDE7D2; } /* 3. THE DRAWER — always a bottom-anchored, padded, centered card (never a center modal, never flush). Covers every "shown" class the games use. */ .bottom-sheet, .tl-drawer { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 0 !important; margin: 0 !important; width: 100% !important; max-width: 460px !important; transform: translateX(-50%) translateY(112%); transition: transform .42s cubic-bezier(.2,.8,.2,1) !important; background: var(--card,#fff); border-radius: 24px 24px 0 0 !important; padding: 20px 20px 22px !important; box-shadow: 0 -12px 40px rgba(0,0,0,.18) !important; overflow-y: auto; max-height: 82dvh !important; z-index: 4000 !important; display: flex !important; flex-direction: column; align-items: center; text-align: center; opacity: 1 !important; pointer-events: none; } .bottom-sheet.active, .bottom-sheet.show, .bottom-sheet.visible, .bottom-sheet.on, .bottom-sheet.is-open, .tl-drawer.show { transform: translateX(-50%) translateY(0) !important; pointer-events: all; } /* inner content padding container (when a game uses one) shouldn't double-pad */ .bottom-sheet .sheet-content, .bottom-sheet .bs-container { padding: 0 !important; width: 100%; } /* 4. THE STANDARD BUTTON ROW — balanced Listen (secondary) + Next (primary), full-width pair */ .tl-actions { display: flex; gap: 10px; width: 100%; max-width: 360px; margin-top: 6px; } .tl-actions .tl-btn { font-family: var(--font-display,'Playfair Display',serif); font-weight: 800; font-size: 1rem; border-radius: 14px; padding: 12px 16px; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .1s; } .tl-actions .tl-btn:active { transform: translateY(2px); } .tl-btn.tl-next { flex: 1; background: var(--primary); color: #fff; } .tl-btn.tl-listen { flex: 0 0 auto; background: #fff; color: var(--primary-dark); border: 2px solid var(--primary-soft); } .tl-btn.tl-show { flex: 0 0 auto; background: #fff; color: var(--primary-dark); border: 2px solid var(--primary-soft); } /* 5. Expressive-shape hero frame (welcome) */ .w-shape { width: 96px; height: 96px; border-radius: 24px; background: #fff; border: 1px solid #ece8e1; box-shadow: 0 6px 18px rgba(120,72,20,.10); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 6px; } /* 5b. STANDARDIZE the buttons inside ANY game's drawer (retrofit, no markup change needed). Listen (the read-aloud, onclick references speak) = outlined secondary; everything else = solid primary. Both live in one balanced row. !important beats the games' ad-hoc inline button styles. */ .bottom-sheet .sheet-actions, .bottom-sheet .tl-actions { display: flex !important; gap: 10px !important; width: 100% !important; max-width: 360px !important; margin-top: 6px !important; } .bottom-sheet .btn-primary, .bottom-sheet .btn-primary-modal, .bottom-sheet .tl-next { flex: 1 !important; background: var(--primary) !important; color: #fff !important; border: none !important; border-radius: 14px !important; padding: 12px 16px !important; font-weight: 800 !important; font-size: 1rem !important; font-family: var(--font-display,'Playfair Display',serif) !important; box-shadow: none !important; } .bottom-sheet button[onclick*="speak"], .bottom-sheet button[onclick*="Listen"], .bottom-sheet button[onclick*="Speak"], .bottom-sheet .tl-listen, .bottom-sheet .btn-listen { flex: 0 0 auto !important; background: #fff !important; color: var(--primary-dark) !important; border: 2px solid var(--primary-soft) !important; } /* 5c. The 5-4-3-2-1 settle counter (built by TL.show). The WRAP owns placement (right of a "Try again" button, else below the options); the COIN owns the per-second pop. Keeping them separate so the pop's scale never fights the wrap's positioning transform. */ .tl-cd-wrap { position: fixed; z-index: 4500; pointer-events: none; } .tl-countdown { width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--primary-dark, #C2611C); border: 3px solid var(--primary, #EA7A27); display: flex; align-items: center; justify-content: center; font-family: var(--font-display, 'Playfair Display', serif); font-weight: 800; font-size: 1.6rem; box-shadow: 0 6px 20px rgba(120, 72, 20, .20); } @keyframes tlCdPop { 0% { transform: scale(.6); opacity: .25; } 50% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* inline variant — sits inside a button row, right of "Try again" */ .tl-countdown.tl-cd-inline { width: 40px; height: 40px; font-size: 1.2rem; border-width: 2px; flex: 0 0 auto; } /* 6. The on-demand "Show me" quiet link sometimes placed in the control area */ .tl-quiet-row { display: flex; gap: 18px; justify-content: center; margin-top: 6px; } .tl-quiet { background: none; border: none; color: var(--primary-dark); font-weight: 700; font-size: .86rem; cursor: pointer; padding: 4px 6px; display: inline-flex; align-items: center; gap: 5px; }