:root{--bg-primary:#0f0f14;--bg-secondary:#1a1a24;--bg-card:#1e1e2a;--bg-card-hover:#252536;--text-primary:#e8e6f0;--text-secondary:#8b87a0;--text-muted:#5c586e;--border:#2a2a3a;--transition-fast:.15s ease;--transition-normal:.3s ease;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:16px/1.5 var(--sans);color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased}*,:before,:after{box-sizing:border-box}body{min-height:100svh;margin:0}#root{max-width:960px;padding:0 var(--space-md);margin:0 auto}.header{padding:var(--space-lg) 0;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.header h1{letter-spacing:-.02em;color:var(--text-primary);margin:0;font-size:1.5rem;font-weight:700}.header-tagline{color:var(--text-secondary);margin:0;font-size:.875rem}.header-actions{gap:var(--space-sm);display:flex}.btn{padding:var(--space-sm) var(--space-md);font:inherit;cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);border:none;border-radius:8px;font-size:.8125rem;font-weight:500}.btn-ghost{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-card-hover);color:var(--text-primary)}.btn-danger:hover{color:#f87171;background:#3b1a1a;border-color:#5c2626}.draw-all-btn{justify-content:center;align-items:center;gap:var(--space-md);width:100%;padding:var(--space-md) var(--space-lg);background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);font:inherit;cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-normal), box-shadow var(--transition-normal);-webkit-tap-highlight-color:transparent;border-radius:12px;font-size:1rem;font-weight:600;display:flex}.draw-all-btn:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--text-muted);box-shadow:0 0 24px #c084fc1a}.draw-all-btn:active:not(:disabled){transform:scale(.99)}.draw-all-btn:disabled{cursor:default;opacity:.6}.draw-all-btn.is-drawing{animation:1s ease-in-out infinite btn-pulse}.draw-all-emojis{gap:var(--space-xs);font-size:1.125rem;display:flex}@keyframes btn-pulse{0%,to{opacity:.6}50%{opacity:1}}.slip-result{text-align:center;color:var(--hat-color);padding:var(--space-sm) 0;justify-content:center;align-items:center;min-height:2.8em;font-size:.9375rem;line-height:1.4;display:flex}.slip-result.visible{animation:.3s ease-out slip-reveal}.slip-result.shuffling{opacity:.5;color:var(--text-secondary)}@keyframes slip-reveal{0%{opacity:0;transform:translateY(6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.hat-card{background:var(--bg-card);border:1px solid var(--border);padding:var(--space-lg);cursor:pointer;transition:transform var(--transition-fast), border-color var(--transition-normal), box-shadow var(--transition-normal);align-items:center;gap:var(--space-xs);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;min-height:140px;font:inherit;color:inherit;border-radius:16px;flex-direction:column;width:100%;display:flex}.hat-card:hover:not(:disabled){border-color:var(--hat-color);box-shadow:0 0 20px color-mix(in srgb, var(--hat-color) 20%, transparent)}.hat-card:active:not(:disabled){transform:scale(.97)}.hat-card.is-drawing{border-color:var(--hat-color);animation:.1s ease-in-out infinite alternate hat-shake}.hat-card.has-result{border-color:color-mix(in srgb, var(--hat-color) 40%, transparent)}.hat-emoji{font-size:2rem;line-height:1}.hat-name{text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);font-size:.8125rem;font-weight:600}.hat-prompt{color:var(--text-muted);margin-top:auto;font-size:.8125rem}@keyframes hat-shake{0%{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}.hat-grid{gap:var(--space-md);padding:var(--space-md) 0;grid-template-columns:1fr;display:grid}@media (width>=640px){.hat-grid{grid-template-columns:repeat(2,1fr)}.hat-grid>:first-child{grid-column:1/-1}}@media (width>=960px){.hat-grid{grid-template-columns:repeat(5,1fr)}.hat-grid>:first-child{grid-column:auto}}.current-draw{background:var(--bg-secondary);border:1px solid var(--border);padding:var(--space-lg);margin:var(--space-md) 0;border-radius:12px}.current-draw-title{margin:0 0 var(--space-md);text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);font-size:.8125rem;font-weight:600}.current-draw-list{gap:var(--space-sm);flex-direction:column;display:flex}.current-draw-item{align-items:baseline;gap:var(--space-md);font-size:.9375rem;line-height:1.5;display:flex}.current-draw-hat{color:var(--text-muted);flex-shrink:0;min-width:10em;font-size:.8125rem;font-weight:500}.current-draw-item.filled .current-draw-slip{color:var(--hat-color)}.current-draw-slip{color:var(--text-muted)}.session-log{margin:var(--space-xl) 0 var(--space-2xl)}.session-log-toggle{width:100%;padding:var(--space-md);background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px;justify-content:space-between;align-items:center;font-size:.875rem;font-weight:500;display:flex}.session-log-toggle:hover{background:var(--bg-card-hover);color:var(--text-primary)}.toggle-arrow{transition:transform var(--transition-fast)}.toggle-arrow.open{transform:rotate(180deg)}.session-log-entries{gap:var(--space-sm);margin-top:var(--space-sm);flex-direction:column;display:flex}.log-entry{background:var(--bg-card);border:1px solid var(--border);padding:var(--space-md);border-radius:10px}.log-entry-header{margin-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.log-entry-type{color:var(--text-primary);font-size:.8125rem;font-weight:600}.log-entry-time{color:var(--text-muted);font-size:.75rem}.log-entry-draws{flex-direction:column;gap:2px;display:flex}.log-draw{align-items:baseline;gap:var(--space-sm);font-size:.8125rem;line-height:1.5;display:flex}.log-draw-emoji{flex-shrink:0}.log-draw-slip{color:var(--hat-color)}.app{padding-bottom:var(--space-2xl)}