:root{--color-bg-primary:#fff8f0;--color-bg-secondary:#fdf2e9;--color-text-primary:#2d2a26;--color-text-secondary:#5c554d;--color-rose:#c4727f;--color-lavender:#8b7ec8;--color-coral:#d4836b;--color-sage:#7a9b7e;--color-gold:#c5993e;--color-mauve:#a67b8a;--color-flames-f:var(--color-rose);--color-flames-l:var(--color-lavender);--color-flames-a:var(--color-coral);--color-flames-m:var(--color-sage);--color-flames-e:var(--color-gold);--color-flames-s:var(--color-mauve);--font-serif:"Playfair Display", Georgia, serif;--font-sans:"Inter", system-ui, sans-serif;--text-hero:clamp(2.5rem, 6vw, 4.5rem);--text-large:clamp(1.5rem, 3.5vw, 2.5rem);--text-body:clamp(1rem, 2vw, 1.25rem);--text-small:clamp(.875rem, 1.5vw, 1rem);--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:2rem;--space-xl:4rem;--duration-fast:.2s;--duration-normal:.4s;--duration-slow:.8s;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--max-width:40rem}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--color-bg-primary);height:100%;color:var(--color-text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}#app{min-height:100dvh;max-width:var(--max-width);padding:var(--space-lg);opacity:0;transition:opacity var(--duration-normal) var(--ease-out);flex-direction:column;align-items:center;margin:0 auto;display:flex}#app.step-visible{opacity:1}.app-title{font-family:var(--font-serif);font-size:var(--text-large);letter-spacing:.15em;text-align:center;margin-bottom:var(--space-lg);flex-shrink:0}.app-title-dot{color:var(--color-text-secondary);opacity:.4}.step-container{flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;display:flex}.name-input-wrapper{align-items:center;gap:var(--space-md);flex-direction:column;width:100%;display:flex}.name-input-prompt{font-family:var(--font-serif);font-size:var(--text-large);color:var(--color-text-primary);text-align:center}.name-input-field{font-family:var(--font-serif);font-size:var(--text-hero);color:var(--color-text-primary);text-align:center;width:100%;caret-color:var(--color-rose);background:0 0;border:none;outline:none}.name-input-hint-row{align-items:center;gap:var(--space-sm);opacity:0;transition:opacity var(--duration-slow) var(--ease-out);display:flex}.name-input-hint-row.visible{opacity:1}.name-input-hint{font-family:var(--font-sans);font-size:var(--text-small);color:var(--color-text-secondary)}.name-input-next{font-family:var(--font-sans);font-size:var(--text-small);color:#fff;background:var(--color-rose);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out);border:none;border-radius:100px;padding:.4em 1.2em;font-weight:500}.name-input-next:hover{transform:scale(1.05)}.name-input-next:active{transform:scale(.97)}.crossing-wrapper{align-items:center;gap:var(--space-md);flex-direction:column;display:flex}.crossing-name{gap:var(--space-xs);flex-wrap:wrap;justify-content:center;display:flex}.crossing-name .letter{font-family:var(--font-serif);font-size:var(--text-large);text-transform:uppercase;transition:all var(--duration-normal) var(--ease-out);padding:.1em .15em;display:inline-block}.crossing-name .letter.crossed{text-decoration:line-through;-webkit-text-decoration-color:var(--color-rose);text-decoration-color:var(--color-rose);opacity:.35;text-decoration-thickness:2px;transform:translateY(2px)}.crossing-heart{font-size:var(--text-large);color:var(--color-rose);animation:1.2s ease-in-out infinite heartbeat}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.crossing-count{font-family:var(--font-serif);font-size:var(--text-hero);color:var(--color-rose);opacity:0;transition:all var(--duration-slow) var(--ease-out);margin-top:var(--space-md);font-weight:700;transform:scale(.5)}.crossing-count.visible{opacity:1;transform:scale(1)}.flames-wrapper{align-items:center;gap:var(--space-lg);flex-direction:column;display:flex}.flames-row{gap:var(--space-sm);display:flex;position:relative}.flames-letter{font-family:var(--font-serif);font-size:var(--text-hero);transition:all var(--duration-normal) var(--ease-out);padding:.1em .2em;font-weight:700;display:inline-block}.flames-letter.eliminated{opacity:.35;text-decoration:line-through;text-decoration-thickness:2px}.flames-letter.winner{text-shadow:0 0 20px,0 0 40px;transform:scale(1.3)}.flames-pointer{font-size:var(--text-large);opacity:0;transition:transform var(--duration-fast) var(--ease-out);align-self:flex-start}.flames-pointer.visible{opacity:1}.flames-legend{gap:var(--space-xs);margin-top:var(--space-md);flex-direction:column;display:flex}.flames-legend-item{font-family:var(--font-sans);font-size:var(--text-small);gap:var(--space-sm);transition:opacity var(--duration-normal) var(--ease-out);display:flex}.flames-legend-item.eliminated{opacity:.35;text-decoration:line-through}.flames-legend-letter{font-family:var(--font-serif);font-weight:700}.result-wrapper{align-items:center;gap:var(--space-lg);flex-direction:column;display:flex}.result-card{background:linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-primary));padding:var(--space-xl) var(--space-lg);text-align:center;align-items:center;gap:var(--space-md);opacity:0;transition:all var(--duration-slow) cubic-bezier(.34, 1.56, .64, 1);border:1px solid #c4727f40;border-radius:1.5rem;flex-direction:column;width:100%;max-width:24rem;display:flex;transform:scale(.8);box-shadow:0 8px 32px #c4727f1f}.result-card.visible{opacity:1;transform:scale(1)}.result-emoji{font-size:clamp(3rem,8vw,5rem)}.result-letter{font-family:var(--font-serif);font-size:var(--text-hero);font-weight:700}.result-text{font-family:var(--font-sans);font-size:var(--text-body);color:var(--color-text-secondary);opacity:0;transition:all var(--duration-normal) var(--ease-out);transform:translateY(8px)}.result-text.visible{opacity:1;transform:translateY(0)}.result-text strong{color:var(--color-text-primary)}.result-actions{gap:var(--space-md);opacity:0;transition:opacity var(--duration-normal) var(--ease-out);display:flex}.result-actions.visible{opacity:1}.result-action-btn{font-family:var(--font-sans);font-size:var(--text-small);background:var(--color-bg-secondary);color:var(--color-text-primary);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);border:1px solid #c4727f40;border-radius:100px;padding:.6em 1.5em;font-weight:500}.result-action-btn:hover{background:var(--color-bg-primary);transform:scale(1.05)}.result-action-btn:active{transform:scale(.97)}.result-play-again{font-family:var(--font-sans);font-size:var(--text-body);background:var(--color-rose);color:#fff;cursor:pointer;opacity:0;transition:opacity var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-out);border:none;border-radius:100px;padding:.75em 2em;font-weight:500}.result-play-again.visible{opacity:1}.result-play-again:hover{transform:scale(1.05)}.result-play-again:active{transform:scale(.97)}