@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap";:root{--bg-deep: #1a0f07;--bg-wood: #3d2814;--bg-wood-light: #5c3d1e;--bg-felt: #0d5c3b;--bg-felt-light: #0f7a4f;--bg-surface: #2a1a0a;--bg-card: #f5f0e6;--accent-primary: #e8a838;--accent-secondary: #c73e1d;--accent-tertiary: #ffd700;--accent-cream: #fff8e7;--tile-red: #c73e1d;--tile-blue: #1a5f9c;--tile-yellow: #d4a012;--tile-black: #1a1a1a;--success: #2e8b57;--danger: #c73e1d;--warning: #e8a838;--text-primary: #fff8e7;--text-secondary: #d4c4a8;--text-tertiary: #8b7355;--text-dark: #2a1a0a;--border-wood: #5c3d1e;--border-light: rgba(255, 248, 231, .2);--shadow-soft: 0 4px 12px rgba(0, 0, 0, .3);--shadow-strong: 0 8px 24px rgba(0, 0, 0, .5);--font-display: "Fredoka", sans-serif;--font-body: "Nunito", sans-serif;--radius-lg: 20px;--radius-md: 12px;--radius-sm: 6px}.tile-container{position:relative;transform:translateY(0) translateZ(0);-webkit-transform:translateY(0) translateZ(0);transition:transform .15s ease-out;-webkit-transition:-webkit-transform .15s ease-out;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;contain:layout style paint;content-visibility:auto}.joker-card{contain:layout style paint;will-change:transform;content-visibility:auto}.game-element{transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform,opacity}.tile-selected{transform:translateY(-16px) translateZ(0)!important;-webkit-transform:translateY(-16px) translateZ(0)!important}.tile-deselected{transform:translateY(0) translateZ(0)!important;-webkit-transform:translateY(0) translateZ(0)!important}html{background:linear-gradient(135deg,#1a0f07,#2a1a0a,#3d2814);min-height:100%;height:100%}body{margin:0;padding:0;background:linear-gradient(135deg,#1a0f07,#2a1a0a,#3d2814);color:var(--text-primary);font-family:var(--font-body);min-height:100vh;min-height:100dvh;min-height:100%;min-height:-webkit-fill-available;overflow-x:hidden;overflow-y:auto}#root{min-height:100vh;min-height:100dvh;min-height:-webkit-fill-available;display:flex;flex-direction:column}.glass-panel{background:linear-gradient(145deg,#3d2814,#2a1a0a);border:3px solid #5c3d1e;border-radius:var(--radius-lg);box-shadow:inset 0 1px #fff8e71a,0 8px 24px #0006}.app-root{display:flex;flex-direction:column;height:100vh;height:100dvh;height:-webkit-fill-available;overflow:hidden;position:relative}.app-root:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q 25 15, 50 20 T 100 20' stroke='rgba(92,61,30,0.15)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 40 Q 30 35, 60 40 T 100 40' stroke='rgba(92,61,30,0.12)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 60 Q 20 55, 45 60 T 100 60' stroke='rgba(92,61,30,0.15)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 80 Q 35 75, 70 80 T 100 80' stroke='rgba(92,61,30,0.1)' fill='none' stroke-width='1'/%3E%3C/svg%3E");z-index:-1;pointer-events:none;opacity:.5}.pt-safe{padding-top:40px!important}@supports (padding-top: env(safe-area-inset-top)){.pt-safe{padding-top:max(40px,env(safe-area-inset-top,40px))!important}}.top-safe{top:48px!important}@supports (top: env(safe-area-inset-top)){.top-safe{top:calc(max(40px,env(safe-area-inset-top,40px)) + 8px)!important}}.pb-safe{padding-bottom:20px!important}@supports (padding-bottom: env(safe-area-inset-bottom)){.pb-safe{padding-bottom:max(20px,env(safe-area-inset-bottom,20px))!important}}.app-header{height:70px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#3d2814,#2a1a0a);border-bottom:3px solid #5c3d1e;box-shadow:0 4px 12px #0006;z-index:100}.brand{display:flex;align-items:center;gap:12px}.brand-mark{font-size:36px;font-family:var(--font-display);color:var(--accent-tertiary);text-shadow:2px 2px 4px rgba(0,0,0,.5);font-weight:700}.brand-title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text-primary);text-shadow:1px 1px 2px rgba(0,0,0,.5)}.brand-subtitle{font-size:11px;color:var(--accent-primary);font-weight:600;letter-spacing:.5px}.header-status{display:flex;gap:8px}.status-pill{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;background:#0000004d;border:2px solid var(--border-wood);color:var(--text-secondary)}.status-pill--live{background:#2e8b574d;color:#7cfc00;border-color:#2e8b57}.status-pill:hover{background:#e8a83833;border-color:var(--accent-primary);cursor:pointer}.app-body{flex:1;position:relative;overflow:hidden;padding:20px;display:flex;justify-content:center;align-items:center}.menu-shell{width:100%;max-width:1100px;display:grid;grid-template-columns:1fr 320px;gap:40px;height:auto;align-content:center}.menu-hero{display:flex;flex-direction:column;justify-content:center;gap:28px;animation:slideIn .6s cubic-bezier(.16,1,.3,1)}@keyframes slideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes glow{0%,to{box-shadow:0 0 20px #e8a8384d}50%{box-shadow:0 0 40px #e8a83880}}.menu-kicker{font-family:var(--font-display);color:var(--accent-primary);font-weight:600;font-size:16px}.menu-title{font-family:var(--font-display);font-size:56px;line-height:1.1;font-weight:700;margin:0;color:var(--accent-tertiary);text-shadow:3px 3px 0 #b8860b,5px 5px 10px rgba(0,0,0,.5)}.menu-subtitle{font-size:17px;color:var(--text-secondary);line-height:1.7;max-width:480px;margin:0}.menu-actions{display:flex;gap:16px;flex-wrap:wrap}.action-button{position:relative;background:linear-gradient(145deg,#4a3018,#2a1a0a);color:var(--text-primary);border:3px solid #5c3d1e;border-radius:var(--radius-md);padding:16px 32px;font-family:var(--font-display);font-weight:600;font-size:16px;cursor:pointer;transition:all .2s ease;box-shadow:0 6px #1a0f07,0 6px 16px #0006}.action-button:hover{transform:translateY(-2px);box-shadow:0 8px #1a0f07,0 12px 24px #00000080}.action-button:active{transform:translateY(4px);box-shadow:0 2px #1a0f07,0 2px 8px #0006}.action-button--primary{background:linear-gradient(145deg,#e8a838,#c78c20);border-color:#b8860b;color:#1a0f07;animation:glow 2s ease-in-out infinite;box-shadow:0 6px #8b6914,0 6px 20px #e8a83866}.action-button--primary:hover{background:linear-gradient(145deg,#f0b848,#d49828)}.action-button--primary:active{box-shadow:0 2px #8b6914}.menu-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.menu-stat-card{background:linear-gradient(145deg,#3d2814,#2a1a0a);padding:14px;border-radius:var(--radius-md);text-align:center;border:2px solid #5c3d1e}.menu-stat-value{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--accent-tertiary);display:block}.menu-stat-label{font-size:11px;color:var(--text-tertiary);font-weight:600}.game-container{display:grid;grid-template-rows:auto 1fr auto;width:100%;max-width:1300px;height:100%;gap:12px}.game-hud-bar{display:flex;gap:20px;padding:10px 20px;border-radius:var(--radius-md);background:linear-gradient(145deg,#3d2814,#2a1a0a);border:2px solid #5c3d1e;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000004d}.hud-stat{display:flex;align-items:center;gap:12px}.hud-icon{font-size:20px}.hud-content{display:flex;flex-direction:column}.hud-label{font-size:10px;font-weight:600;color:var(--text-tertiary)}.hud-value{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--accent-tertiary)}.game-stage-wrapper{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:8px solid #5c3d1e;box-shadow:inset 0 0 30px #0000004d,0 12px 40px #00000080;background:linear-gradient(145deg,#0d5c3b,#0a4a30,#084528)}.control-deck{display:flex;gap:12px;padding:14px 20px;background:linear-gradient(145deg,#3d2814,#2a1a0a);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:3px solid #5c3d1e;border-bottom:none;justify-content:center;align-items:center;box-shadow:0 -4px 16px #0000004d}.control-btn{height:56px;min-width:100px;border-radius:var(--radius-md);border:2px solid transparent;font-family:var(--font-display);font-weight:600;font-size:13px;color:#fff;cursor:pointer;transition:all .15s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.control-btn:hover{transform:translateY(-3px);filter:brightness(1.1)}.control-btn:active{transform:translateY(2px)}.btn-tone-primary{background:linear-gradient(145deg,#1a5f9c,#134a7a);border-color:#0d3a5c;box-shadow:0 4px #0d3a5c}.btn-tone-danger{background:linear-gradient(145deg,#c73e1d,#9c3015);border-color:#7a2610;box-shadow:0 4px #7a2610}.btn-tone-secondary{background:linear-gradient(145deg,#5c3d1e,#3d2814);border-color:#2a1a0a;box-shadow:0 4px #2a1a0a}.btn-tone-success{background:linear-gradient(145deg,#2e8b57,#236b43);border-color:#1a5233;box-shadow:0 4px #1a5233}.game-canvas{width:100%;height:100%}@keyframes setPlaceSlide{0%{transform:translateY(-30px) scale(1.1);opacity:0}50%{transform:translateY(5px) scale(1.02)}to{transform:translateY(0) scale(1);opacity:1}}.animate-set-place{animation:setPlaceSlide .4s cubic-bezier(.34,1.56,.64,1)}@keyframes scorePop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.animate-score-pop{animation:scorePop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes comboShake{0%,to{transform:translate(0) rotate(0)}20%{transform:translate(-3px) rotate(-2deg)}40%{transform:translate(3px) rotate(2deg)}60%{transform:translate(-3px) rotate(-2deg)}80%{transform:translate(3px) rotate(2deg)}}.animate-combo-shake{animation:comboShake .4s ease-in-out}@keyframes floatUp{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-40px) scale(1.3);opacity:0}}.animate-float-up{animation:floatUp .8s ease-out forwards}@keyframes tileEnter{0%{transform:translate(-100px) rotate(-20deg);opacity:0}to{transform:translate(0) rotate(0);opacity:1}}.animate-tile-enter{animation:tileEnter .3s cubic-bezier(.34,1.56,.64,1)}@keyframes confettiBurst{0%{transform:scale(0) rotate(0);opacity:1}50%{transform:scale(1.5) rotate(180deg);opacity:.8}to{transform:scale(2) rotate(360deg);opacity:0}}.animate-confetti{animation:confettiBurst .6s ease-out forwards}@keyframes pulseGlow{0%,to{box-shadow:0 0 5px #ffd70080}50%{box-shadow:0 0 20px #ffd700cc,0 0 40px #ffd70066}}.animate-pulse-glow{animation:pulseGlow 1s ease-in-out infinite}@keyframes celebrate{0%{transform:scale(.8) rotate(-5deg);opacity:0}50%{transform:scale(1.1) rotate(3deg)}to{transform:scale(1) rotate(0);opacity:1}}.animate-celebrate{animation:celebrate .5s cubic-bezier(.34,1.56,.64,1)}@keyframes countdownPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.animate-countdown{animation:countdownPulse 1s ease-in-out infinite}@keyframes bounceIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.animate-bounce-in{animation:bounceIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes countdownNumber{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.2);opacity:1}to{transform:scale(.8);opacity:.7}}.animate-countdown-number{animation:countdownNumber .8s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.animate-slide-up{animation:slideUp .3s ease-out forwards}@keyframes countdownStart{0%{transform:scale(0) rotate(-10deg);opacity:0}50%{transform:scale(1.3) rotate(5deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.animate-countdown-start{animation:countdownStart .6s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}.animate-float{animation:float var(--duration, 3s) ease-in-out infinite;animation-delay:var(--delay, 0s)}@keyframes damage-float{0%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}50%{opacity:1;transform:translate(-50%) translateY(-20px) scale(1.2)}to{opacity:0;transform:translate(-50%) translateY(-40px) scale(.8)}}.animate-damage-float{animation:damage-float 1.5s ease-out forwards}@keyframes flash-damage{0%,to{opacity:0}20%,40%,60%{opacity:.5}30%,50%{opacity:0}}.animate-flash-damage{animation:flash-damage .8s ease-out forwards}@keyframes shake-damage-anim{0%,to{transform:translate(0) rotate(0)}10%{transform:translate(-8px) rotate(-2deg)}20%{transform:translate(8px) rotate(2deg)}30%{transform:translate(-6px) rotate(-1deg)}40%{transform:translate(6px) rotate(1deg)}50%{transform:translate(-4px) rotate(0)}60%{transform:translate(4px) rotate(0)}70%{transform:translate(-2px) rotate(0)}80%{transform:translate(2px) rotate(0)}}.animate-shake-damage{animation:shake-damage-anim .6s ease-in-out}@keyframes shake-damage{0%,to{transform:translate(0)}10%{transform:translate(-10px)}20%{transform:translate(10px)}30%{transform:translate(-8px)}40%{transform:translate(8px)}50%{transform:translate(-5px)}60%{transform:translate(5px)}70%{transform:translate(-3px)}80%{transform:translate(3px)}90%{transform:translate(-1px)}}.shake-damage{animation:shake-damage .5s ease-in-out}@keyframes hp-flash{0%,to{filter:brightness(1)}50%{filter:brightness(1.5) saturate(1.5)}}.hp-damage-flash{animation:hp-flash .3s ease-in-out 2}@keyframes damage-vignette{0%{box-shadow:inset 0 0 100px 50px #c8000080}to{box-shadow:inset 0 0 #c8000000}}.shake-damage:after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;animation:damage-vignette .5s ease-out forwards;z-index:9999}@keyframes pulse-subtle{0%,to{box-shadow:0 8px #047857,0 12px 20px #0006}50%{box-shadow:0 8px #047857,0 12px 30px #10b98180}}.animate-pulse-subtle{animation:pulse-subtle 2s ease-in-out infinite}@keyframes confetti{0%{transform:translateY(-10vh) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:0}}.animate-confetti{animation:confetti 4s ease-in-out forwards}.bg-gradient-radial{background:radial-gradient(circle at center,var(--tw-gradient-from),var(--tw-gradient-via),var(--tw-gradient-to))}@media screen and (max-width: 375px){.app-header{height:50px;padding:0 12px}.brand-mark{font-size:24px}.brand-title{font-size:16px}.brand-subtitle{font-size:9px}.control-deck{padding:8px 10px;gap:8px}.control-btn{height:44px;min-width:70px;font-size:11px}.game-hud-bar{padding:6px 10px;gap:8px}.hud-value{font-size:14px}.game-stage-wrapper{border-width:4px}}@media screen and (min-width: 376px) and (max-width: 480px){.app-header{height:56px;padding:0 14px}.brand-mark{font-size:28px}.brand-title{font-size:18px}.control-deck{padding:10px 14px;gap:10px}.control-btn{height:48px;min-width:80px;font-size:12px}.game-stage-wrapper{border-width:5px}}@media screen and (max-width: 768px){.menu-shell{grid-template-columns:1fr;gap:24px}.menu-title{font-size:40px}}@media screen and (max-height: 500px) and (orientation: landscape){.app-header{height:40px;padding:0 12px}.brand-mark{font-size:22px}.brand-title{font-size:14px}.brand-subtitle{display:none}.game-hud-bar{padding:4px 10px;gap:8px}.hud-value{font-size:12px}.hud-label{font-size:8px}.control-deck{padding:6px 10px;gap:6px}.control-btn{height:40px;min-width:60px;font-size:10px}.game-stage-wrapper{border-width:3px;border-radius:12px}}@media screen and (max-height: 400px){.app-header{height:36px}.control-deck{padding:4px 8px}.control-btn{height:36px;font-size:9px}}.safe-bottom{padding-bottom:env(safe-area-inset-bottom,16px)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.aurora-bg,.star-field,.dust-particle,.light-ray,.floating-particle{animation:none!important;opacity:.3!important}}.low-end-mode .aurora-bg,.low-end-mode .star-field,.low-end-mode .dust-particle,.low-end-mode .light-ray,.low-end-mode .floating-particle{display:none!important}.low-end-mode *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.1s!important}.low-end-mode .shimmer-effect,.low-end-mode .animate-pulse-glow,.low-end-mode .animate-confetti,.low-end-mode .animate-bounce,.low-end-mode .animate-ping,.low-end-mode .animate-pulse,.low-end-mode .animate-spin,.low-end-mode [class*="animate-[shimmer"],.low-end-mode [class*=animate-tooltip-bounce],.low-end-mode .attention-idle,.low-end-mode .attention-shake,.low-end-mode .attention-urgent{animation:none!important}@supports (padding-bottom: env(safe-area-inset-bottom)){.mobile-safe-area{padding-bottom:calc(env(safe-area-inset-bottom) + 60px)}}@media screen and (max-width: 768px){.mobile-safe-area{padding-bottom:70px}}