@import"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg-base: #0d0d12;--color-bg-surface: #13131a;--color-bg-cell-empty: #1c1c27;--color-border-grid: #222230;--color-accent-gold: #c9a84c;--color-text-primary: #f0ede8;--color-text-secondary: #6b6880;--color-overlay: rgba(13, 13, 18, .85);--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.25rem;--text-xl: 1.75rem;--text-2xl: 2.5rem;--text-emoji: clamp(1.75rem, 5vw, 2.75rem)}body{background:var(--color-bg-base);color:var(--color-text-primary);font-family:DM Sans,sans-serif;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:1.5rem 1rem}#root{width:100%;max-width:480px}.app{display:flex;flex-direction:column;gap:1rem}.header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;animation:fadeUp .3s ease-out both}.header__title{font-family:Playfair Display,serif;font-size:var(--text-2xl);color:var(--color-accent-gold);line-height:1.1}.header__right{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}@media(max-width:400px){.header{flex-direction:column;align-items:flex-start}.header__right{align-items:flex-start}}.score-panel{display:flex;gap:1.25rem;animation:fadeUp .3s ease-out 60ms both}.score-block{display:flex;flex-direction:column;align-items:flex-end}.score-block__label{font-size:var(--text-sm);color:var(--color-accent-gold);letter-spacing:.1em;text-transform:uppercase}.score-block__value{font-family:Playfair Display,serif;font-size:var(--text-xl);color:var(--color-text-primary);line-height:1}.controls{display:flex;gap:.5rem;animation:fadeUp .3s ease-out .12s both}.btn{font-family:DM Sans,sans-serif;font-weight:500;font-size:var(--text-sm);color:var(--color-accent-gold);background:transparent;border:1.5px solid var(--color-accent-gold);border-radius:8px;padding:6px 14px;cursor:pointer;transition:background .15s}.btn:hover{background:#c9a84c1a}.btn--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.board-wrap{position:relative;animation:fadeUp .3s ease-out .2s both}.board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:12px;background:var(--color-bg-surface);border-radius:16px;box-shadow:0 8px 48px #0009;position:relative;overflow:hidden}.board:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");opacity:.04;pointer-events:none;border-radius:16px}.cell{aspect-ratio:1;background:var(--color-bg-cell-empty);border-radius:10px;display:flex;align-items:center;justify-content:center;position:relative}.tile{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px #ffffff14,0 2px 8px #0006;transition:box-shadow .15s,transform .15s;-webkit-user-select:none;user-select:none}.tile:hover{transform:scale(1.03)}.tile__emoji{font-size:var(--text-emoji);line-height:1}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;z-index:10;animation:overlayIn .3s ease-out both}.overlay__emoji{font-size:4rem;line-height:1}.overlay__heading{font-family:Playfair Display,serif;font-size:var(--text-xl);color:var(--color-accent-gold)}.overlay__sub{font-size:var(--text-sm);color:var(--color-text-secondary);text-align:center}.overlay__quip{display:flex;align-items:center;gap:.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.5rem .625rem .5rem .75rem;max-width:280px}.overlay__quip-text{flex:1;font-size:var(--text-xs);color:var(--color-text-secondary);line-height:1.4}.overlay__copy-btn{flex-shrink:0;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:2px;display:flex;align-items:center;border-radius:4px;transition:color .15s}.overlay__copy-btn:hover{color:var(--color-text-primary)}.overlay__actions{display:flex;gap:.75rem;margin-top:.5rem}.htp-content{padding:1.75rem;display:flex;flex-direction:column;gap:1.25rem;width:100%}.htp-heading{font-family:Playfair Display,serif;font-size:var(--text-xl);color:var(--color-accent-gold)}.htp-rules{list-style:none;display:flex;flex-direction:column;gap:.875rem}.htp-rule{display:flex;align-items:flex-start;gap:.75rem;font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.45}.htp-rule__icon{font-size:var(--text-base);min-width:1.75rem;text-align:center;margin-top:1px}.htp-close{align-self:flex-end}.footer{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 0 1rem}.footer__link{font-family:DM Sans,sans-serif;font-size:var(--text-xs);color:var(--color-text-secondary);text-decoration:none;background:none;border:none;cursor:pointer;padding:0;opacity:.5;transition:opacity .2s}.footer__link:hover{opacity:1}.footer__sep{font-size:var(--text-xs);color:var(--color-text-secondary);opacity:.3}@media(prefers-reduced-motion:no-preference){@keyframes tileSpawn{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1)}}.tile--new{animation:tileSpawn .18s ease-out both}@keyframes tileMerge{0%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.94)}to{transform:scale(1)}}@keyframes tileMergeGlow{0%{box-shadow:0 0 0 0 var(--tile-glow)}40%{box-shadow:0 0 20px 8px var(--tile-glow)}to{box-shadow:0 0 4px 1px var(--tile-glow)}}.tile--merged{animation:tileMerge .2s ease-in-out both,tileMergeGlow .2s ease-in-out both}@keyframes scoreNudge{0%{transform:translateY(0)}40%{transform:translateY(-5px)}to{transform:translateY(0)}}.score-block__value.score--nudge{animation:scoreNudge .2s ease-out}@keyframes overlayIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
