:root{--seed-bg: #0F1117;--seed-fg: #F0F2F5;--seed-primary: #8957E5;--seed-primary-end: #4A9EFF;--seed-accent: #FFD700;--seed-surface: #1A1D26;--seed-radius: 16px;--seed-danger: #FF4757;--bg: var(--seed-bg);--fg: var(--seed-fg);--surface: var(--seed-surface);--surface-elevated: color-mix(in srgb, var(--seed-surface) 80%, white 5%);--primary: var(--seed-primary);--primary-gradient: linear-gradient(135deg, var(--seed-primary), var(--seed-primary-end));--accent: var(--seed-accent);--accent-glow: color-mix(in srgb, var(--seed-accent) 40%, transparent);--danger: var(--seed-danger);--danger-glow: color-mix(in srgb, var(--seed-danger) 35%, transparent);--muted: color-mix(in srgb, var(--seed-fg) 55%, transparent);--border: rgba(255, 255, 255, .08);--border-glow: rgba(255, 255, 255, .15);--radius: var(--seed-radius);--radius-sm: calc(var(--seed-radius) * .5);--radius-lg: calc(var(--seed-radius) * 1.5);--glass-bg: rgba(26, 29, 38, .72);--glass-border: rgba(255, 255, 255, .1);--glass-blur: 20px;--font-display: "SF Pro Display", -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;--font-body: "SF Pro Text", -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px}*{margin:0;padding:0;box-sizing:border-box}html,body,main,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-body);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border)}.neon-glow{box-shadow:0 0 8px color-mix(in srgb,var(--seed-primary) 30%,transparent),0 0 24px color-mix(in srgb,var(--seed-primary) 15%,transparent),0 4px 16px #0006}.neon-text{text-shadow:0 0 8px color-mix(in srgb,var(--seed-primary) 50%,transparent),0 0 24px color-mix(in srgb,var(--seed-primary) 25%,transparent)}.gold-glow{box-shadow:0 0 12px var(--accent-glow),0 0 32px var(--accent-glow),0 4px 20px #00000080}.gold-text{text-shadow:0 0 12px var(--accent-glow),0 0 32px var(--accent-glow)}@keyframes pulse-ring{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:.4}to{transform:scale(1);opacity:.8}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes particle-rise{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-80px) scale(0);opacity:0}}@keyframes particle-burst{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--px, 20px),var(--py, -40px)) scale(0);opacity:0}}@keyframes crown-drop{0%{transform:translateY(-100px) rotate(-15deg);opacity:0}60%{transform:translateY(10px) rotate(3deg);opacity:1}80%{transform:translateY(-5px) rotate(-1deg)}to{transform:translateY(0) rotate(0);opacity:1}}@keyframes alarm-flash{0%,to{opacity:1}50%{opacity:.3}}@keyframes countdown-pop{0%{transform:scale(2.5);opacity:0}30%{transform:scale(1);opacity:1}80%{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes gold-rain{0%{transform:translateY(-20px);opacity:1}to{transform:translateY(100vh);opacity:.3}}.card-perspective{perspective:1200px;transform-style:preserve-3d}.safe-top{padding-top:env(safe-area-inset-top,12px)}.safe-bottom{padding-bottom:env(safe-area-inset-bottom,12px)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.display-text{font-family:var(--font-display);letter-spacing:-.02em;font-weight:600}.caps-label{text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:500;color:var(--muted)}.app-container{height:100%;width:100%;max-width:430px;margin:0 auto;position:relative;overflow:hidden;background:var(--bg)}.game-screen{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);padding-top:calc(env(safe-area-inset-top,12px) + var(--space-sm));z-index:10}.game-title{font-size:18px;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.round-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;color:var(--muted)}.top-bar-right{display:flex;align-items:center;gap:var(--space-sm)}.cards-remaining{display:flex;align-items:baseline;gap:2px}.cards-num{font-size:18px;font-weight:600;font-family:var(--font-display);color:var(--fg)}.cards-label{font-size:12px;color:var(--muted)}.settings-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--muted);border-radius:50%;cursor:pointer;transition:color .2s}.settings-btn:hover{color:var(--fg)}.current-player{display:flex;justify-content:center;padding:var(--space-md) 0 var(--space-sm)}.player-identity{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.player-avatar-ring{position:relative;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary-gradient);padding:3px}.player-avatar-ring:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;background:var(--primary-gradient);opacity:.3;animation:pulse-ring 2s ease-in-out infinite}.player-avatar{width:100%;height:100%;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:36px}.player-name{font-size:28px;color:var(--fg);margin-top:var(--space-xs)}.player-hint{color:var(--muted)}.card-zone{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-md);min-height:0}.card-flip-wrapper{position:relative;width:200px;height:290px}.card-perspective,.card-inner{width:100%;height:100%;will-change:transform}.card-face{border-radius:var(--radius);overflow:hidden}.card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--border-glow);background:linear-gradient(145deg,color-mix(in srgb,var(--seed-surface) 90%,var(--seed-primary) 10%),var(--seed-surface))}.card-back-pattern{position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);display:flex;align-items:center;justify-content:center}.card-back-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.card-back-crown{font-size:48px;display:block}.card-back-text{color:var(--muted)}.draw-hint{position:absolute;bottom:24px;font-size:15px;font-weight:500;color:var(--fg);letter-spacing:.02em}.card-front{display:flex;align-items:center;justify-content:center;background:var(--surface-elevated);border:1px solid var(--border-glow)}.card-front-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.card-rank{font-size:64px;font-weight:700;font-family:var(--font-display);letter-spacing:-.02em;line-height:1}.card-red .card-rank,.card-red .card-suit-large{color:var(--danger)}.card-black .card-rank,.card-black .card-suit-large{color:var(--fg)}.card-suit-large{font-size:48px;line-height:1}.card-name{font-size:14px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:var(--space-sm)}.particles-container{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5;contain:layout style paint}.result-action{padding:0 var(--space-md) var(--space-md);display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.result-card{width:100%;padding:var(--space-md) var(--space-lg);border-radius:var(--radius);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.result-suit{font-size:24px}.result-title{font-size:22px;color:var(--fg)}.result-desc{font-size:15px;color:var(--muted);line-height:1.5}.complete-btn{width:100%;max-width:280px;padding:16px 32px;border:none;border-radius:var(--radius);background:var(--primary-gradient);color:#fff;font-size:17px;font-weight:600;font-family:var(--font-body);cursor:pointer;letter-spacing:.02em;box-shadow:0 4px 16px color-mix(in srgb,var(--seed-primary) 30%,transparent),0 2px 8px #0000004d}.bottom-status{padding:var(--space-sm) var(--space-md);padding-bottom:calc(env(safe-area-inset-bottom,12px) + var(--space-sm))}.status-row{display:flex;justify-content:space-between;margin-bottom:var(--space-sm)}.king-counter,.rules-toggle{display:flex;align-items:center;gap:var(--space-sm);padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--fg);font-size:14px;cursor:pointer;font-family:var(--font-body)}.king-count strong{color:var(--accent);font-size:16px}.rules-count{color:var(--muted)}.player-bar{overflow-x:auto;padding:var(--space-xs) 0}.player-bar-inner{display:flex;gap:var(--space-md);justify-content:center;padding:var(--space-xs) 0}.player-chip{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;min-width:48px}.player-chip-avatar{width:40px;height:40px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid var(--border);transition:border-color .3s}.player-chip-active .player-chip-avatar{border-color:var(--seed-primary)}.glow-ring{box-shadow:0 0 8px color-mix(in srgb,var(--seed-primary) 40%,transparent)}.player-chip-name{font-size:11px;color:var(--muted);white-space:nowrap;max-width:48px;overflow:hidden;text-overflow:ellipsis}.player-chip-active .player-chip-name{color:var(--fg);font-weight:500}.player-chip-indicator{position:absolute;bottom:-4px;width:16px;height:3px;border-radius:2px;background:var(--primary-gradient)}.king-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;will-change:opacity}.king-normal-overlay{background:#000000f2}.king-final-overlay{background:color-mix(in srgb,var(--seed-danger) 15%,#0a0a0a)}.final-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,var(--danger-glow) 0%,transparent 70%)}.king-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);z-index:1;text-align:center;padding:var(--space-xl)}.king-crown{font-size:80px;display:block}.king-title{font-size:42px;color:var(--accent)}.king-crown-section,.king-count-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.king-cup-status{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-xl);border-radius:var(--radius)}.cup-label{font-size:16px;color:var(--muted)}.cup-plus{font-size:24px;font-weight:700;color:var(--accent)}.king-progress{font-size:18px;color:var(--fg)}.king-progress strong{color:var(--accent);font-size:22px}.king-complete-btn{margin-top:var(--space-md)}.gold-burst{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow),transparent)}.gold-rain-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;contain:layout style paint}.final-alarm{display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.final-skull{font-size:72px}.final-title{font-size:36px;color:var(--danger);letter-spacing:.06em;text-transform:uppercase;animation:alarm-flash .8s ease-in-out infinite}.countdown-number{font-size:120px;font-weight:700;font-family:var(--font-display);color:var(--danger);letter-spacing:-.03em}.final-drink{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.drink-cup{font-size:72px}.drink-title{font-size:24px;color:var(--muted)}.drink-subtitle{font-size:36px;color:var(--danger)}.rule-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--seed-primary) 12%,rgba(0,0,0,.92));will-change:opacity}.confetti-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;contain:layout style paint}.rule-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);padding:var(--space-xl);width:100%;max-width:340px;z-index:1}.rule-emoji{font-size:56px;display:block}.rule-title{font-size:28px;color:var(--fg)}.rule-input-wrapper{width:100%;border-radius:var(--radius);overflow:hidden}.rule-input{width:100%;padding:16px 20px;border:none;background:transparent;color:var(--fg);font-size:16px;font-family:var(--font-body);outline:none}.rule-input::placeholder{color:var(--muted)}.rule-actions{display:flex;gap:var(--space-md);width:100%}.rule-random-btn{flex:1;padding:14px;border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--fg);font-size:15px;font-weight:500;cursor:pointer;font-family:var(--font-body)}.rule-confirm-btn{flex:1;padding:14px;border:none;border-radius:var(--radius);background:var(--primary-gradient);color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font-body)}.rule-confirm-btn:disabled{opacity:.4;cursor:not-allowed}.drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:90}.rules-drawer{position:fixed;bottom:0;left:0;right:0;z-index:95;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-md) var(--space-lg);padding-bottom:calc(env(safe-area-inset-bottom,12px) + var(--space-lg));max-height:60vh;overflow-y:auto;max-width:430px;margin:0 auto}.drawer-handle{display:flex;justify-content:center;padding:var(--space-sm) 0 var(--space-md);cursor:pointer}.handle-bar{width:36px;height:4px;border-radius:2px;background:var(--border-glow)}.drawer-title{font-size:20px;color:var(--fg);margin-bottom:var(--space-md)}.drawer-rules-list{display:flex;flex-direction:column;gap:var(--space-sm)}.drawer-empty{color:var(--muted);font-size:14px;text-align:center;padding:var(--space-xl) 0}.rule-tag{display:flex;align-items:center;gap:var(--space-sm);padding:12px var(--space-md);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--seed-surface) 60%,transparent);border:1px solid var(--border)}.rule-tag-disabled{opacity:.5}.rule-tag-number{width:22px;height:22px;border-radius:50%;background:var(--primary-gradient);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.rule-tag-text{flex:1;font-size:14px;color:var(--fg);line-height:1.4}.rule-tag-actions{display:flex;gap:var(--space-sm);flex-shrink:0}.rule-tag-toggle,.rule-tag-delete{width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s}.rule-tag-toggle:hover{color:var(--seed-primary-end)}.rule-tag-delete:hover{color:var(--danger)}.home-screen,.lobby-screen{position:relative;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.home-bg-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 15%,color-mix(in srgb,var(--seed-primary) 18%,transparent) 0%,transparent 45%),radial-gradient(circle at 80% 85%,color-mix(in srgb,var(--seed-primary-end) 14%,transparent) 0%,transparent 45%);pointer-events:none}.home-content,.lobby-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-xl);padding:var(--space-xl);width:100%;max-width:340px}.home-logo{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.home-crown{font-size:64px;display:block}.home-title{font-size:40px;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.home-subtitle{font-size:14px;color:var(--muted);letter-spacing:.02em}.home-name-input,.home-code-input{width:100%;border-radius:var(--radius);overflow:hidden}.home-name-input input,.home-code-input input{width:100%;padding:16px 20px;border:none;background:transparent;color:var(--fg);font-size:16px;font-family:var(--font-body);outline:none;text-align:center}.home-code-input input{letter-spacing:.3em;font-weight:600;text-transform:uppercase}.home-name-input input::placeholder,.home-code-input input::placeholder{color:var(--muted);letter-spacing:normal;font-weight:400}.home-actions{display:flex;flex-direction:column;gap:var(--space-md);width:100%}.home-btn-primary{width:100%;padding:16px 32px;border:none;border-radius:var(--radius);background:var(--primary-gradient);color:#fff;font-size:17px;font-weight:600;font-family:var(--font-body);cursor:pointer;letter-spacing:.02em;box-shadow:0 4px 20px color-mix(in srgb,var(--seed-primary) 35%,transparent),0 2px 8px #0000004d}.home-btn-primary:disabled{opacity:.4;cursor:not-allowed}.home-btn-secondary{width:100%;padding:14px 32px;border:1px solid var(--glass-border);border-radius:var(--radius);background:var(--glass-bg);color:var(--fg);font-size:15px;font-weight:500;font-family:var(--font-body);cursor:pointer;-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}.home-hint{margin-top:var(--space-md)}.lobby-room-code{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-xl) var(--space-lg);border-radius:var(--radius);width:100%}.lobby-code-label{font-size:14px;letter-spacing:.1em}.lobby-code-digits{display:flex;gap:var(--space-sm)}.lobby-code-digit{width:56px;height:72px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:var(--radius-sm);text-shadow:0 0 12px var(--accent-glow)}.lobby-copy-btn{display:flex;align-items:center;gap:6px;padding:12px 28px;border:1px solid var(--accent);border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all .25s}.lobby-copy-btn:hover{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}.lobby-copy-btn:active{transform:scale(.97)}.lobby-copy-btn.copied{background:color-mix(in srgb,var(--seed-primary) 20%,transparent);border-color:var(--seed-primary);color:var(--seed-primary)}.lobby-code-hint{font-size:12px;color:var(--muted);text-align:center;line-height:1.5}.lobby-players{width:100%}.lobby-players-title{font-size:16px;color:var(--fg);margin-bottom:var(--space-md);display:flex;align-items:baseline;gap:var(--space-sm)}.lobby-players-count{font-size:13px;color:var(--muted)}.lobby-players-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}.lobby-player{display:flex;flex-direction:column;align-items:center;gap:6px}.lobby-player-avatar{position:relative;width:52px;height:52px;border-radius:50%;background:var(--surface);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:26px}.lobby-player-host{border-color:var(--seed-accent);box-shadow:0 0 10px var(--accent-glow)}.lobby-host-badge{position:absolute;top:-8px;right:-4px;font-size:14px}.lobby-player-name{font-size:12px;color:var(--fg);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-player-avatar-empty{width:52px;height:52px;border-radius:50%;border:2px dashed var(--border-glow);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:20px}.lobby-player-name-empty{font-size:11px;color:var(--muted)}.lobby-slot{display:flex;flex-direction:column;align-items:center;gap:6px}.lobby-slot-avatar{width:52px;height:52px;border-radius:50%;border:2px dashed var(--border-glow);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:20px}.lobby-slot-name{font-size:11px;color:var(--muted)}.lobby-actions{display:flex;flex-direction:column;gap:var(--space-md);width:100%}.lobby-waiting{width:100%;padding:16px;border-radius:var(--radius);text-align:center;color:var(--muted);font-size:14px}.toast{position:fixed;bottom:calc(env(safe-area-inset-bottom,12px) + 90px);left:50%;transform:translate(-50%);z-index:200;padding:12px 24px;border-radius:var(--radius);background:color-mix(in srgb,var(--seed-danger) 85%,black);color:#fff;font-size:14px;font-weight:500;box-shadow:0 4px 20px #0006;animation:toast-in .3s ease-out;max-width:80%;text-align:center}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(min-width:768px){body{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--seed-primary) 8%,transparent) 0%,transparent 60%),radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--seed-primary-end) 6%,transparent) 0%,transparent 60%),#080a0f}.app-container{max-width:480px;border-radius:20px;box-shadow:0 0 0 1px #ffffff0f,0 8px 40px #00000080,0 2px 8px #0000004d}.rules-drawer{max-width:480px}.home-content,.lobby-content{max-width:380px}}