:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:#1a1a1f;--color-game-bg:#2e2e36;--color-surface:#4a4a52;--color-primary:#c8922e;--color-primary-dark:#8a5e1b;--color-primary-light:#e0a83a;--color-accent:#d7263d;--color-accent-dark:#8f1a27;--color-neutral:#f2f2f2;--color-neutral-dark:#6b6b75;--color-outline:#111;--font-display:"Lilita One", cursive;--font-body:system-ui, -apple-system, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button:focus:not(:focus-visible){outline:none}html,body{background:var(--color-bg);height:100%;color:var(--color-neutral);font-family:var(--font-body);overflow:hidden}body{flex-direction:column;display:flex}.page{flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}.phone-container{background:var(--color-game-bg);flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.screen{flex-direction:column;display:flex;position:absolute;inset:0}.menu-screen{z-index:10;justify-content:center;align-items:center;gap:40px}.menu-bg{background:radial-gradient(ellipse at 50% 40%, #c8922e14 0%, transparent 60%), var(--color-game-bg);z-index:-1;position:absolute;inset:0}.menu-title{font-family:var(--font-display);color:var(--color-primary);text-transform:uppercase;letter-spacing:3px;text-shadow:3px 3px 0 var(--color-outline), 0 0 20px #c8922e40;font-size:52px}.menu-buttons{flex-direction:column;gap:14px;width:240px;display:flex}.btn-golden{font-family:var(--font-display);color:var(--color-outline);background:linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);border:3px solid var(--color-outline);cursor:pointer;touch-action:manipulation;text-transform:uppercase;border-radius:10px;padding:16px 28px;font-size:20px;transition:transform 80ms,box-shadow 80ms,filter 80ms;position:relative;overflow:hidden;transform:translateY(0);box-shadow:0 5px #6b4a14,0 6px 10px #00000059}.btn-golden:after{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:60%;height:100%;animation:3s ease-in-out infinite btn-shine;position:absolute;top:0;left:-100%}@keyframes btn-shine{0%,to{left:-100%}50%{left:140%}}.btn-golden:hover{filter:brightness(1.1);box-shadow:0 6px #6b4a14,0 7px 12px #0006}.btn-golden.pressed{filter:brightness(.88);transform:translateY(4px);box-shadow:0 1px #6b4a14,0 2px 4px #00000040}.btn-secondary{font-family:var(--font-display);color:var(--color-neutral);background:linear-gradient(180deg, #555560 0%, var(--color-surface) 100%);border:2px solid var(--color-outline);cursor:pointer;touch-action:manipulation;text-transform:uppercase;border-radius:10px;padding:14px 24px;font-size:18px;transition:transform 80ms,box-shadow 80ms,filter 80ms;transform:translateY(0);box-shadow:0 4px #33333b,0 5px 8px #0000004d}.btn-secondary:hover{filter:brightness(1.12);box-shadow:0 5px #33333b,0 6px 10px #00000059}.btn-secondary.pressed{filter:brightness(.82);transform:translateY(3px);box-shadow:0 1px #33333b,0 2px 3px #0003}.btn-secondary:disabled{opacity:.35;cursor:default;transform:none;box-shadow:0 2px #33333b}.social-links{gap:18px;display:flex}.social-link{border:2px solid var(--color-neutral-dark);width:38px;height:38px;color:var(--color-neutral-dark);background:#ffffff0f;border-radius:50%;justify-content:center;align-items:center;text-decoration:none;transition:color .15s,border-color .15s,background .15s;display:flex}.social-link:hover{color:var(--color-neutral);border-color:var(--color-neutral);background:#ffffff1a}.game-screen{z-index:5;background:var(--color-game-bg);justify-content:flex-start;align-items:center}.game-content{flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;display:flex}.nav-strip{flex-shrink:0;justify-content:space-between;align-items:center;width:100%;height:60px;padding:0 12px;display:flex}.nav-icon-btn{border:2px solid var(--color-neutral-dark);width:40px;height:40px;color:var(--color-neutral-dark);cursor:pointer;touch-action:manipulation;background:#ffffff0f;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:color .15s,border-color .15s,background .15s;display:flex}.nav-icon-btn:hover{color:var(--color-neutral);border-color:var(--color-neutral);background:#ffffff1a}.nav-icon-btn:active{color:var(--color-primary);border-color:var(--color-primary)}.score-strip{background:linear-gradient(#c99435 0%,#a07228 50%,#7a5520 100%);border:5px solid #161513;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;gap:10px;width:100%;height:58px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffdc8266,inset 0 -2px 4px #00000040,0 3px 8px #0006}.score-strip:before{content:"";pointer-events:none;background:linear-gradient(90deg,#ffe69621 0% 38%,#ffe69600 48%,#0000 52%,#00000014 62% 100%);width:100%;height:100%;position:absolute;top:0;left:0}.score-name{font-family:var(--font-display);-webkit-text-stroke:3px #111;paint-order:stroke fill;text-shadow:0 1px 2px #0009;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:20px;overflow:hidden}.score-name-p1{color:var(--color-primary-light);text-align:center;margin-left:8px}.score-name-p2{color:var(--color-accent);text-align:center;margin-right:30px}.score-dots{align-items:center;gap:6px;margin:0 4px;display:flex}.timer{font-family:var(--font-display);color:#fff5d6;text-shadow:0 1px 2px #00000080;opacity:.7;font-size:20px;position:absolute;right:14px}.timer.warning{color:var(--color-accent);opacity:1;animation:.6s ease-in-out infinite alternate timer-pulse}@keyframes timer-pulse{0%{opacity:.7}to{opacity:1}}.arena-zone{aspect-ratio:1;background:var(--color-game-bg);flex-shrink:0;width:100%;position:relative}.controls-zone{flex-direction:column;flex-shrink:0;justify-content:flex-start;align-items:center;gap:6px;width:100%;padding:10px 0 6px;display:flex}.player-label{font-family:var(--font-display);text-transform:uppercase;opacity:.7;min-height:18px;margin-top:12px;font-size:14px}.submit-btn{background:linear-gradient(180deg, #f0c050 0%, var(--color-primary) 40%, var(--color-primary-dark) 100%);border-bottom-width:4px;width:75%;padding:32px 0;font-size:32px;animation:2.5s ease-in-out infinite alternate submit-glow}.submit-btn:after{display:none}@keyframes submit-glow{0%{box-shadow:0 7px #6b4a14,0 8px 12px #0006,inset 0 2px #ffffff40,0 0 10px #c8922e4d}to{box-shadow:0 7px #6b4a14,0 8px 12px #0006,inset 0 2px #ffffff40,0 0 22px #c8922e99,0 0 44px #c8922e26}}.submit-btn.pressed{border-bottom-width:3px;animation:none}.match-overlay{z-index:20;background:#000000b3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.match-card{background:var(--color-game-bg);border:2px solid var(--color-primary);border-radius:16px;flex-direction:column;align-items:center;gap:18px;padding:36px 44px;display:flex;box-shadow:0 8px 32px #00000080}.match-winner{font-family:var(--font-display);text-transform:uppercase;text-shadow:2px 2px 0 var(--color-outline);font-size:30px}.match-score{font-family:var(--font-display);color:var(--color-neutral);font-size:44px}.match-buttons{flex-direction:column;gap:10px;width:220px;margin-top:8px;display:flex}.btn-outline{font-family:var(--font-display);color:var(--color-primary);border:2px solid var(--color-primary);cursor:pointer;touch-action:manipulation;text-transform:uppercase;background:0 0;border-radius:10px;padding:14px 24px;font-size:18px;transition:background .15s,color .15s}.btn-outline:hover{background:#c8922e1f}.btn-outline.pressed{color:var(--color-primary-light);background:#c8922e33}.tutorial-card{background:var(--color-game-bg);border:2px solid var(--color-primary);border-radius:16px;flex-direction:column;align-items:center;width:85%;max-width:360px;padding:28px 24px 20px;display:flex;position:relative;box-shadow:0 8px 32px #00000080}.tutorial-close{color:var(--color-neutral-dark);cursor:pointer;background:0 0;border:none;padding:4px;font-size:28px;line-height:1;position:absolute;top:8px;right:12px}.tutorial-close:hover{color:var(--color-neutral)}.tutorial-slide{text-align:center;flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.tutorial-img-wrap{aspect-ratio:1;background:var(--color-surface);border-radius:12px;justify-content:center;align-items:center;width:100%;max-width:260px;display:flex;overflow:hidden}.tutorial-img-wrap img{object-fit:cover;width:100%;height:100%}.tutorial-headline{font-family:var(--font-display);color:var(--color-primary);text-transform:uppercase;font-size:26px}.tutorial-text{font-family:var(--font-display);color:var(--color-neutral);opacity:.85;text-transform:none;max-width:280px;font-size:17px;line-height:1.4}.tutorial-nav{align-items:center;gap:16px;margin-top:18px;display:flex}.tutorial-arrow{color:var(--color-neutral);cursor:pointer;opacity:.6;background:0 0;border:none;padding:4px 10px;font-size:32px;transition:opacity .15s}.tutorial-arrow:hover{opacity:1}.tutorial-arrow:disabled{opacity:.15;cursor:default}.tutorial-dots{gap:8px;display:flex}.tutorial-dot{background:var(--color-neutral-dark);cursor:pointer;border:none;border-radius:50%;width:10px;height:10px;padding:0;transition:background .15s}.tutorial-dot.active{background:var(--color-primary)}.landscape-blocker{z-index:9999;background:var(--color-bg);justify-content:center;align-items:center;display:none;position:fixed;inset:0}.landscape-blocker-msg{text-align:center;color:var(--color-neutral);font-family:var(--font-display);padding:24px;font-size:20px}.landscape-icon{margin-bottom:16px;font-size:48px}@media (orientation:landscape) and (height<=500px){.landscape-blocker{display:flex}}@media (width<=767px){.score-name{font-size:17px}.score-name-p1{margin-left:24px}.score-name-p2{margin-right:44px}.score-dots{margin:0 1px}}@media (width>=768px){.phone-container{aspect-ratio:9/16;border-radius:8px;width:auto;height:100%;max-height:100%;box-shadow:0 0 40px #00000080}}
