/* Little Puddle — Shared Game UI * Base styles + color variants for all game pages. * * Usage: add a variant class on to theme the game: * — char-trace * — number-find * — letter-trace, pattern-puzzle * — radicals * — word-world, memory-match * — letter-trace * — (legacy) * * All structural styles use CSS variables so every variant * shares the exact same layout, spacing, and component shapes. */ /* ===== Color Variants ===== */ .lp-green{ --lp: #2e7d32; --lp-dark: #1b5e20; --lp-light: #e8f5e9; --lp-mid: #c8e6c9; --lp-btn: #66bb6a; --lp-btn2: #43a047; --lp-text: #689f38; --lp-shadow: rgba(46,125,50,0.15); background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 50%,#a5d6a7 100%); } .lp-gold{ --lp: #b8860b; --lp-dark: #8b6508; --lp-light: #fff8e1; --lp-mid: #ffe082; --lp-btn: #ffd54f; --lp-btn2: #ffb300; --lp-text: #c49000; --lp-shadow: rgba(184,134,11,0.15); background:linear-gradient(135deg,#fff8e1 0%,#ffe082 50%,#ffd54f 100%); } .lp-purple{ --lp: #5e35b1; --lp-dark: #4527a0; --lp-light: #ede7f6; --lp-mid: #d1c4e9; --lp-btn: #b39ddb; --lp-btn2: #7e57c2; --lp-text: #7e57c2; --lp-shadow: rgba(94,53,177,0.15); background:linear-gradient(135deg,#ede7f6 0%,#d1c4e9 50%,#b39ddb 100%); } .lp-blue{ --lp: #1565c0; --lp-dark: #0d47a1; --lp-light: #e3f2fd; --lp-mid: #90caf9; --lp-btn: #42a5f5; --lp-btn2: #1e88e5; --lp-text: #42a5f5; --lp-shadow: rgba(21,101,192,0.15); background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 50%,#90caf9 100%); } .lp-pink{ --lp: #880e4f; --lp-dark: #560027; --lp-light: #fce4ec; --lp-mid: #f8bbd0; --lp-btn: #f48fb1; --lp-btn2: #e91e63; --lp-text: #ad1457; --lp-shadow: rgba(136,14,79,0.15); background:linear-gradient(135deg,#fce4ec 0%,#f8bbd0 50%,#f48fb1 100%); } .lp-orange{ --lp: #e65100; --lp-dark: #bf360c; --lp-light: #fff3e0; --lp-mid: #ffe0b2; --lp-btn: #ffb74d; --lp-btn2: #ff9800; --lp-text: #ff9800; --lp-shadow: rgba(230,81,0,0.15); background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 50%,#ffcc80 100%); } .lp-teal{ --lp: #00796b; --lp-dark: #004d40; --lp-light: #e0f2f1; --lp-mid: #b2dfdb; --lp-btn: #4db6ac; --lp-btn2: #26a69a; --lp-text: #26a69a; --lp-shadow: rgba(0,121,107,0.15); background:linear-gradient(135deg,#e0f2f1 0%,#b2dfdb 50%,#80cbc4 100%); } /* ===== Reset ===== */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation} /* ===== Typography ===== */ body{font-family:'Nunito',-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;padding:0 16px} /* ===== Game Container ===== */ .game-container{position:relative;width:100%;max-width:720px;min-height:max(360px, 50vh);background:#fffef8;border-radius:24px;box-shadow:0 8px 32px var(--lp-shadow, rgba(0,0,0,0.12));overflow:visible;padding:24px 20px;display:flex;flex-direction:column;gap:14px} /* ===== Header ===== */ .header{display:flex;justify-content:space-between;align-items:center;gap:8px} /* ===== Audio Toggle (fixed top-right) ===== */ .audio-toggle{position:fixed;top:12px;right:16px;z-index:200;background:rgba(255,255,255,0.85);border:2px solid var(--lp-mid, #c8e6c9);border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,0.1)} .audio-toggle.off{opacity:.4} .audio-toggle img{width:24px;height:24px} /* ===== Sound Button (inline play) ===== */ .sound-btn{display:inline-block;background:none;border:none;cursor:pointer;vertical-align:middle;margin-left:8px;transition:transform .2s;padding:4px} .sound-btn:active{transform:scale(1.3)} .sound-btn img{width:24px;height:24px} /* ===== Pill Tabs / Toggles ===== */ .pill-tabs{display:flex;gap:8px;flex-wrap:wrap} .pill-tab{background:transparent;border:2px solid #ddd;padding:8px 16px;border-radius:20px;font-size:14px;cursor:pointer;color:#999;font-weight:600;transition:all .2s;min-height:36px;display:inline-flex;align-items:center;justify-content:center} .pill-tab.active{border-color:#888;color:#444} .pill-tab img{width:24px;height:24px;vertical-align:middle} /* ===== Badges ===== */ .badge{font-size:13px;padding:4px 12px;border-radius:20px;font-weight:600;background:var(--lp-light);color:var(--lp)} .badge-easy{background:#c8e6c9;color:#2e7d32} .badge-medium{background:#fff9c4;color:#f57f17} .badge-hard{background:#ffccbc;color:#d84315} .badge-expert{background:#e1bee7;color:#7b1fa2} /* ===== Score / Stats ===== */ .score{font-size:16px;color:var(--lp, #2e7d32);font-weight:600} /* ===== Prompt Area ===== */ .prompt{text-align:center;color:var(--lp, #1565c0);font-size:16px;font-weight:600;padding:4px 0} /* ===== Feedback ===== */ .feedback{text-align:center;font-size:26px;min-height:34px} /* ===== Particles ===== */ .particle{position:absolute;pointer-events:none;font-size:22px;animation:lp-fly 1s ease-out forwards} @keyframes lp-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}} /* ===== Start Screen ===== */ #start-screen{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;z-index:100;overflow:auto;padding:20px;padding-top:60px;background-color:var(--lp-light, #f5f5f5)} #start-screen>*{position:relative;z-index:1} #start-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.12) 100%);backdrop-filter:saturate(1.2);-webkit-backdrop-filter:saturate(1.2);border:1px solid rgba(255,255,255,0.2);box-shadow:inset 0 0 60px rgba(255,255,255,0.15)} #start-screen .start-character{width:80px;height:80px;margin-bottom:-48px;z-index:2} #start-screen .start-card{background:rgba(255,255,255,0.9);border-radius:24px;padding:40px;padding-top:64px;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:400px;box-shadow:0 4px 24px rgba(0,0,0,0.06)} #start-screen h1{font-family:'Paytone One',sans-serif;font-size:28px;color:var(--lp, #2e7d32)} #start-screen .subtitle{font-size:16px;color:var(--lp-text, #4caf50)} /* ===== Start / Action Button ===== */ .btn{background:linear-gradient(135deg, var(--lp-btn, #66bb6a), var(--lp-btn2, #43a047));color:white;border:none;padding:18px 44px;font-size:22px;border-radius:16px;cursor:pointer;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,0.15);transition:transform .2s} .btn:active{transform:scale(1.05)} /* ===== Start Screen Options ===== */ .start-label{font-size:14px;color:var(--lp-text, #689f38);font-weight:600;margin-top:8px} .start-options{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .start-opt{background:var(--lp-light, #e8f5e9);border:2px solid var(--lp-mid, #c8e6c9);padding:8px 16px;border-radius:12px;font-size:15px;cursor:pointer;color:var(--lp, #388e3c);font-weight:600;transition:all .2s} .start-opt.active{background:var(--lp-btn2, #4caf50);border-color:var(--lp, #388e3c);color:white} /* ===== Home Logo ===== */ .home-logo{position:fixed;top:12px;left:16px;z-index:200;text-decoration:none;font-family:'Paytone One',sans-serif;font-size:14px;color:var(--lp, #2e7d32);background:rgba(255,255,255,0.85);padding:6px 14px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform .2s,box-shadow .2s;cursor:pointer} .home-logo:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.15)} .home-logo:active{transform:scale(0.95)} .home-logo img{width:28px;height:28px;vertical-align:middle;margin-right:4px} /* ===== Nav Row (prev/next/clear) ===== */ .nav-row{display:flex;justify-content:space-between;align-items:center} .nav-btn{background:linear-gradient(135deg, var(--lp-btn, #66bb6a), var(--lp-btn2, #43a047));color:white;border:none;padding:12px 28px;font-size:18px;border-radius:14px;cursor:pointer;font-weight:600;box-shadow:0 3px 12px rgba(0,0,0,0.15);transition:transform .2s} .nav-btn:active{transform:scale(1.05)} .nav-btn:disabled{opacity:.4;pointer-events:none} /* ===== Choice Cards (generic) ===== */ .choice-card{background:var(--lp-light, #f1f8e9);border:3px solid var(--lp-mid, #c8e6c9);border-radius:16px;padding:14px 8px;text-align:center;cursor:pointer;transition:all .15s;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center} .choice-card:active{transform:scale(.95)} .choice-card.correct{background:#4caf50;border-color:#2e7d32;color:white;transform:scale(1.05)} .choice-card.wrong{background:#ffcdd2;border-color:#ef5350;transform:scale(.95)} .choice-card.disabled{pointer-events:none;opacity:.5} /* ===== Complete / Win Screen ===== */ .overlay-screen{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:10;overflow:auto;padding:20px;border-radius:inherit} /* ===== Responsive ===== */ @media(max-width:480px){ .game-container{border-radius:16px;padding:16px 14px;min-height:max(360px, 50vh)} #start-screen h1{font-size:24px} .btn{padding:14px 36px;font-size:20px} .pill-tab{font-size:14px;padding:7px 14px;min-height:34px} .nav-btn{padding:10px 20px;font-size:16px} }