*,*:before,*:after{box-sizing:border-box}:root{font-family:Outfit,Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;font-weight:400;--primary-color: #6366f1;--primary-color-rgb: 99, 102, 241;--primary-dark: #4f46e5;--primary-light: #818cf8;--secondary-color: #10b981;--secondary-color-rgb: 16, 185, 129;--accent-color: #f59e0b;--accent-color-rgb: 245, 158, 11;--danger-color: #ef4444;--bg-color: #f8fafc;--bg-color-rgb: 248, 250, 252;--surface-color: #ffffff;--surface-color-rgb: 255, 255, 255;--text-color: #0f172a;--text-color-rgb: 15, 23, 42;--text-secondary: #64748b;--grid-border: #e2e8f0;--grid-border-rgb: 226, 232, 240;--tile-bg: #ffffff;--tile-border: #cbd5e1;--tile-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .5);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--font-sm: .875rem;--font-md: 1rem;--font-lg: 1.25rem;--font-xl: 1.5rem;--font-xxl: 2rem;--font-display: 3rem;--weight-regular: 400;--weight-medium: 500;--weight-bold: 700;--weight-black: 900;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px;color-scheme:light dark;color:var(--text-color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: dark){:root{--bg-color: #0f172a;--bg-color-rgb: 15, 23, 42;--surface-color: #1e293b;--surface-color-rgb: 30, 41, 59;--text-color: #f8fafc;--text-secondary: #94a3b8;--grid-border: #334155;--grid-border-rgb: 51, 65, 85;--tile-bg: #1e293b;--tile-border: #475569;--glass-bg: rgba(15, 23, 42, .7);--glass-border: rgba(255, 255, 255, .1)}}body{margin:0;display:flex;place-items:center;justify-content:center;min-width:320px;min-height:100vh;background:radial-gradient(circle at top left,rgba(var(--primary-color-rgb),.15),transparent 40%),radial-gradient(circle at bottom right,rgba(var(--secondary-color-rgb),.15),transparent 40%),var(--bg-color)}@media (max-width: 480px){body{min-height:100dvh;overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}}#root{width:100%;height:100%;display:flex;justify-content:center;align-items:center}h1{font-size:3rem;line-height:1.1;margin:0;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;letter-spacing:-.05em;text-align:center}button{border-radius:12px;border:none;padding:.8em 1.5em;font-size:1em;font-weight:600;font-family:inherit;background-color:var(--primary-color);color:#fff;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px rgba(var(--primary-color-rgb),.3),0 2px 4px -1px rgba(var(--primary-color-rgb),.1);position:relative;overflow:hidden}button:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(var(--primary-color-rgb),.4),0 4px 6px -2px rgba(var(--primary-color-rgb),.2)}button:active{transform:translateY(0)}button:focus,button:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@media (max-width: 768px){html{font-size:14px}h1{font-size:2.5rem;margin-bottom:1rem}button{padding:.7em 1.2em}}@media (max-width: 480px){html{font-size:13px}h1{font-size:3rem;margin-bottom:0rem}}.intro-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0f172a99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;padding:var(--spacing-md)}.intro-card{width:100%;max-width:420px;max-height:90vh;overflow-y:auto;background:var(--surface-color);padding:2.5rem;display:flex;flex-direction:column;gap:var(--spacing-xl);animation:popIn .4s cubic-bezier(.34,1.56,.64,1);border:1px solid var(--glass-border);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-sizing:border-box;border-radius:var(--radius-lg)}.intro-header{text-align:center}.game-title{font-size:var(--font-display);margin:0 0 var(--spacing-sm);background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:var(--weight-black);letter-spacing:-.05em}.tagline{font-size:var(--font-lg);color:var(--text-secondary);font-weight:var(--weight-medium);letter-spacing:.1em;text-transform:uppercase;margin:0}.intro-body{display:flex;flex-direction:column;gap:var(--spacing-lg)}.info-group h3{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-lg);color:var(--text-color);margin:0 0 var(--spacing-sm)}.icon-accent{color:var(--primary-color)}.info-group p{margin:0;color:var(--text-secondary);line-height:1.6}.controls-preview{display:flex;flex-direction:column;gap:var(--spacing-sm);background:var(--bg-color);padding:var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--grid-border)}.control-row{display:flex;align-items:center;justify-content:space-between}.control-row span{font-size:var(--font-sm);color:var(--text-secondary);font-weight:var(--weight-medium)}.key-group{display:flex;gap:.4rem}kbd{background:var(--surface-color);border:1px solid var(--grid-border);border-bottom-width:3px;border-radius:var(--radius-sm);padding:.3rem .6rem;font-family:inherit;font-size:var(--font-sm);color:var(--text-color);min-width:24px;text-align:center;display:flex;align-items:center;justify-content:center}kbd.wide{padding:.3rem 1.2rem;font-size:.8rem;font-weight:var(--weight-bold);text-transform:uppercase}.intro-footer{display:flex;justify-content:center}.start-button{width:100%;padding:var(--spacing-md);font-size:var(--font-lg);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s;box-shadow:0 4px 6px -1px rgba(var(--primary-color-rgb),.3)}.start-button:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(var(--primary-color-rgb),.4)}@media (max-width: 480px){.intro-card{width:90%;padding:var(--spacing-lg);gap:var(--spacing-md)}.game-title{font-size:2.2rem;word-break:break-word}.tagline{font-size:.8rem}.intro-overlay{padding:var(--spacing-sm)}}.App{width:100%;max-width:500px;margin:0 auto;padding:var(--spacing-xl);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;box-sizing:border-box}.header{display:flex;gap:var(--spacing-sm);flex-direction:column;align-items:center;justify-content:center}.game-wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);position:relative;padding-top:var(--spacing-md);padding-bottom:var(--spacing-md)}@media (max-width: 480px){.App{padding:0;height:100dvh;min-height:100dvh;overflow:hidden}.game-wrapper{padding:var(--spacing-md);border-radius:var(--radius-md);justify-content:center;overflow:hidden;gap:var(--spacing-md)}}.loading-state{display:flex;align-items:center;justify-content:center;height:100%;width:100%;font-size:1.2rem;color:var(--text-primary);font-weight:500;animation:pulse 1.5s infinite ease-in-out}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}