@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--bg-card:#141414;--bg-card-2:#1c1c1c;--bg-card-3:#242424;--yellow:#ffd600;--yellow-dim:#ffd60017;--yellow-border:#ffd60042;--yellow-glow:0 0 20px #ffd6004d;--white:#fff;--gray:#555;--gray-2:#333;--red:#ff3b3b;--green:#22c55e;--blue:#60a5fa;--purple:#a78bfa;--text:#fff;--text-2:#888;--text-3:#444;--border:#ffffff12;--border-2:#ffffff1f;--border-y:#ffd60042;--radius:16px;--radius-sm:10px;--radius-lg:22px;--radius-xl:28px;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px)}html{overscroll-behavior:none;height:100%}body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overscroll-behavior:none;min-height:100dvh;font-family:Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden}#root{min-height:100dvh}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--gray-2);border-radius:2px}.btn{border-radius:var(--radius-sm);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;letter-spacing:-.01em;border:none;justify-content:center;align-items:center;gap:7px;min-height:44px;padding:15px 24px;font-family:inherit;font-size:16px;font-weight:700;line-height:1;text-decoration:none;transition:transform .12s cubic-bezier(.34,1.56,.64,1),opacity .15s,box-shadow .15s;display:inline-flex}.btn:active{transform:scale(.94)!important}.btn:disabled{opacity:.32;pointer-events:none}.btn-primary{background:var(--yellow);color:#000;box-shadow:0 4px 18px #ffd60047}.btn-primary:hover{box-shadow:0 4px 28px #ffd60073}.btn-secondary{background:var(--bg-card-2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--border-2)}.btn-ghost{color:var(--text-2);border:1px solid var(--border);background:0 0}.btn-ghost:hover{color:var(--text);border-color:var(--border-2)}.btn-danger{background:var(--red);color:#fff}.btn-white{color:#000;background:#fff}.btn-lg{border-radius:var(--radius);min-height:54px;padding:17px 32px;font-size:17px}.btn-sm{min-height:36px;padding:9px 14px;font-size:13px}.btn-full{width:100%}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.card-yellow{background:var(--yellow-dim);border:1px solid var(--border-y);border-radius:var(--radius);padding:18px}.input{background:var(--bg-card-2);border:1.5px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);appearance:none;outline:none;padding:14px 16px;font-family:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px #ffd6001a}.input::placeholder{color:var(--text-3)}.score-input-wrap{align-items:center;gap:10px;display:flex}.score-btn{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;font-size:26px;font-weight:700;transition:transform .12s cubic-bezier(.34,1.56,.64,1);display:flex}.score-btn:active{transform:scale(.8)}.score-btn-minus{color:var(--red);background:#ff3b3b1a;border:1.5px solid #ff3b3b38}.score-btn-plus{background:var(--yellow-dim);color:var(--yellow);border:1.5px solid var(--border-y)}.score-btn:disabled{opacity:.25;pointer-events:none}.score-display{text-align:center;letter-spacing:-.03em;background:var(--bg-card-2);border:1.5px solid var(--border);border-radius:var(--radius-sm);min-width:64px;color:var(--text-3);flex:1;padding:10px 8px;font-size:38px;font-weight:900;transition:color .18s,border-color .18s}.score-display.active{color:var(--yellow);border-color:var(--border-y)}.modal-overlay{z-index:200;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000e6;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal-sheet{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:480px;max-height:92dvh;padding:28px;padding-bottom:calc(28px + var(--safe-bottom));animation:.3s cubic-bezier(.16,1,.3,1) slideUp;overflow-y:auto}.modal-center{z-index:300;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000eb;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-box{background:var(--bg-card);border:1px solid var(--border-y);border-radius:var(--radius-xl);width:100%;max-width:380px;padding:28px;animation:.38s cubic-bezier(.34,1.56,.64,1) popIn}.screen{flex-direction:column;max-width:480px;min-height:100dvh;margin:0 auto;display:flex}.screen-content{-webkit-overflow-scrolling:touch;flex:1;padding:16px 20px;overflow-y:auto}.pill{letter-spacing:.04em;text-transform:uppercase;border-radius:20px;align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-flex}.pill-yellow{background:var(--yellow-dim);color:var(--yellow);border:1px solid var(--border-y)}.pill-white{color:var(--text-2);border:1px solid var(--border);background:#ffffff0f}.pill-purple{color:var(--purple);background:#a78bfa1a;border:1px solid #a78bfa40}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}@keyframes popIn{0%{opacity:0;transform:scale(.65)}80%{transform:scale(1.03)}to{opacity:1;transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}60%{transform:scale(1.12)}80%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes countUp{0%{opacity:0;transform:translateY(8px)scale(.88)}to{opacity:1;transform:none}}@keyframes floatUp{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-90px)scale(1.5)}}@keyframes glowRing{0%,to{box-shadow:0 0 #ffd60066}50%{box-shadow:0 0 0 6px #ffd60000}}@keyframes cardFlipAway{0%{transform:rotate(var(--card-rot,0deg)) translateY(0) scale(1);opacity:1}40%{transform:rotate(calc(var(--card-rot,0deg) - 8deg)) translateY(-12px) scale(1.02);opacity:1}to{opacity:0;transform:rotate(-18deg)translateY(-130%)scale(.88)}}@keyframes cardReveal{0%{transform:rotate(var(--card-rot,0deg)) scale(.97) translateY(4px)}to{transform:rotate(0)scale(1)translateY(0)}}.animate-in{animation:.35s both fadeIn}.animate-slide{animation:.38s cubic-bezier(.16,1,.3,1) both slideUp}.animate-pop{animation:.38s cubic-bezier(.34,1.56,.64,1) both popIn}.animate-bounce-in{animation:.5s cubic-bezier(.34,1.56,.64,1) both bounceIn}.divider{border:none;border-top:1px solid var(--border);margin:16px 0}.gradient-text{background:linear-gradient(135deg, var(--yellow), #fff);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}