:root{--bg: #1a1a2e;--surface: #16213e;--card-bg: #0f3460;--accent: #e94560;--gold: #f5a623;--green: #4ecb71;--blue: #4fc3f7;--text: #f0f4ff;--muted: #8892b0;--line-color: #4fc3f7}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;overscroll-behavior:none}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1px 1px at 80% 10%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1px 1px at 60% 70%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 10% 80%,rgba(255,255,255,.2) 0%,transparent 100%),radial-gradient(1px 1px at 90% 60%,rgba(255,255,255,.25) 0%,transparent 100%),radial-gradient(1px 1px at 40% 90%,rgba(255,255,255,.2) 0%,transparent 100%),radial-gradient(1px 1px at 70% 40%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1px 1px at 30% 55%,rgba(255,255,255,.2) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 50% 20%,rgba(255,255,255,.35) 0%,transparent 100%);pointer-events:none;z-index:0}#app{width:100%;max-width:min(1400px,94vw);padding:clamp(16px,2vw,30px);position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}header{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;flex-wrap:wrap;gap:8px}.logo{font-family:Boogaloo,cursive;font-size:clamp(26px,7vw,38px);color:var(--accent);letter-spacing:2px;text-shadow:0 0 20px rgba(233,69,96,.5);line-height:1}.logo span{color:var(--gold)}.stats{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.stat-pill{background:#ffffff12;border:1px solid rgba(255,255,255,.12);border-radius:50px;padding:clamp(5px,.55vw,10px) clamp(12px,1.15vw,18px);font-size:clamp(13px,.95vw,17px);font-weight:700;display:flex;align-items:center;gap:5px;white-space:nowrap}.incoming-area{background:#ffffff0a;border:2px dashed rgba(79,195,247,.3);border-radius:20px;padding:14px 16px;margin-bottom:14px;text-align:center;transition:border-color .2s}.incoming-label{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}#drag-card{background:linear-gradient(135deg,#1e3a5f,#0f3460);border:2px solid rgba(79,195,247,.5);border-radius:16px;padding:clamp(6px,.5vw,10px) clamp(10px,.8vw,14px);display:inline-flex;align-items:center;gap:12px;box-shadow:0 8px 32px #0006;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;min-width:clamp(150px,19vw,250px);max-width:clamp(260px,33vw,420px);position:relative;z-index:2;transition:opacity .15s,transform .15s}#drag-card:active{cursor:grabbing}#drag-card.lifted{opacity:.3;transform:scale(.95)}#drag-card.has-image{gap:6px;flex-direction:column;align-items:center}#drag-card.has-image .card-name{text-align:center}.drag-card-img-wrapper{flex-shrink:0;width:clamp(120px,16vw,220px);height:clamp(80px,10vw,140px);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px}.card-name{font-size:clamp(14px,3.5vw,17px);font-weight:800;color:var(--text);text-align:left;line-height:1.2}#ghost{position:fixed;pointer-events:none;z-index:9999;background:linear-gradient(135deg,#1e3a5f,#0f3460);border:2px solid var(--blue);border-radius:12px;padding:7px 11px;display:none;align-items:center;gap:8px;box-shadow:0 10px 32px #0009,0 0 0 2px #4fc3f740;min-width:90px;transform:rotate(3deg) scale(.78);transform-origin:top left}#ghost .card-name{font-size:12px}.line-section{flex:1;display:flex;flex-direction:column}.line-label{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;text-align:center}.number-line-wrapper{width:100%;overflow-x:auto;overflow-y:visible;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.number-line{display:flex;align-items:center;padding:clamp(20px,2vw,34px) 0;min-width:100%;position:relative}.line-spacer{flex:1;min-width:20px}.number-line:before{content:"";position:absolute;top:50%;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--line-color) 10%,var(--line-color) 90%,transparent);transform:translateY(-50%);z-index:0;opacity:.4}.drop-zone{width:clamp(36px,3vw,52px);min-height:clamp(100px,12vw,150px);flex-shrink:0;position:relative;z-index:3;display:flex;align-items:center;justify-content:center;transition:width .15s ease}.drop-zone:after{content:"";width:6px;height:50px;background:#4fc3f72e;border-radius:3px;transition:all .13s ease}.drop-zone.drag-over{width:clamp(96px,7vw,128px)}.drop-zone.drag-over:after{width:clamp(88px,6.5vw,120px);height:clamp(86px,8vw,120px);background:#4fc3f721;border-radius:16px;border:2px dashed rgba(79,195,247,.8);box-shadow:0 0 22px #4fc3f747}.placed-card{background:linear-gradient(135deg,#1a3a5c,#122840);border:2px solid rgba(79,195,247,.45);border-radius:13px;padding:clamp(5px,.5vw,8px) clamp(6px,.6vw,10px);display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;z-index:2;box-shadow:0 4px 14px #0006;min-width:clamp(78px,8vw,126px);max-width:clamp(106px,10vw,156px);flex-shrink:0}.placed-card .card-name{font-size:clamp(10px,.85vw,14px);font-weight:700;text-align:center;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:clamp(88px,8.5vw,136px)}.placed-card .card-value{font-size:clamp(9px,.75vw,13px);font-weight:800;color:var(--gold);opacity:.85;letter-spacing:.5px;white-space:nowrap}.placed-card.wrong-placed{border-color:var(--accent);box-shadow:0 4px 20px #e9456066;animation:placed-pop .45s ease forwards}.placed-card.just-placed{border-color:var(--green);box-shadow:0 4px 20px #4ecb7166;animation:placed-pop .45s ease forwards}@keyframes placed-pop{0%{transform:scale(.7) translateY(-14px);opacity:0}60%{transform:scale(1.1) translateY(2px)}to{transform:scale(1) translateY(0);opacity:1}}.instruction-bar{background:#f5a6231a;border:1px solid rgba(245,166,35,.3);border-radius:12px;padding:11px 16px;margin-top:12px;text-align:center;font-size:clamp(13px,3vw,15px);font-weight:700;color:var(--gold);min-height:46px;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,color .3s}.instruction-bar.success{background:#4ecb711f;border-color:#4ecb7166;color:var(--green)}.instruction-bar.error{background:#e945601f;border-color:#e9456066;color:var(--accent)}.screen{display:none;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:18px;text-align:center;padding:20px 0}.screen.active{display:flex}.screen-title{font-family:Boogaloo,cursive;font-size:clamp(36px,10vw,62px);line-height:1;color:var(--accent);text-shadow:0 0 30px rgba(233,69,96,.5)}.screen-subtitle{font-size:clamp(14px,3.5vw,17px);color:var(--muted);max-width:380px;line-height:1.6}.screen-start-spacer{height:calc(clamp(36px,10vw,62px) + clamp(14px,3.5vw,17px)*3.2 + 18px)}.big-btn{background:linear-gradient(135deg,var(--accent),#c73652);color:#fff;font-family:Boogaloo,cursive;font-size:clamp(20px,5vw,26px);letter-spacing:2px;border:none;border-radius:50px;padding:13px 38px;cursor:pointer;box-shadow:0 6px 24px #e9456066;transition:transform .15s,box-shadow .15s}.big-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px #e9456080}.big-btn:active{transform:translateY(0)}.game-view{display:flex;flex-direction:column;flex:1;width:100%}.confetti-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:999;overflow:hidden}.confetti-piece{position:absolute;top:-20px;animation:confetti-fall linear forwards;border-radius:2px}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0) translate(0);opacity:1}80%{opacity:1}to{transform:translateY(100vh) rotate(720deg) translate(var(--drift));opacity:0}}#deck-selector{display:flex;flex-direction:column;gap:10px}.daily-deck-wrapper{display:flex;flex-direction:column;align-items:center;gap:4px}.daily-label{font-family:Boogaloo,cursive;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--gold);text-transform:uppercase}#deck-selector button.daily-deck{width:60%;padding:14px 24px;border-color:var(--gold)}#deck-selector button.daily-deck.selected{background:#ffd6001f;border-color:var(--gold)}#deck-selector button.daily-deck .deck-name{font-size:18px}#deck-selector button.daily-deck .deck-unit{font-size:11px}.deck-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px}#deck-selector button{background:#ffffff12;border:2px solid rgba(255,255,255,.15);border-radius:14px;padding:10px 18px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:border-color .15s,background .15s;width:100%}#deck-selector button.selected{background:#4fc3f71f;border-color:var(--blue)}#deck-selector button .deck-name{font-family:Boogaloo,cursive;font-size:15px;color:var(--text);letter-spacing:1px}#deck-selector button .deck-unit{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:1px;text-transform:uppercase}.deck-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}.page-arrow{background:none;border:none;color:var(--text);font-size:28px;line-height:1;cursor:pointer;padding:0 4px;opacity:.6;transition:opacity .15s}.page-arrow:disabled{opacity:.15;cursor:default}.page-arrow:not(:disabled):hover{opacity:1}.page-dots{display:flex;gap:7px;align-items:center}.page-dot{width:8px;height:8px;border-radius:50%;border:none;background:#ffffff40;cursor:pointer;padding:0;transition:background .15s,transform .15s}.page-dot.active{background:var(--gold);transform:scale(1.3)}.bottom-sheet{width:100%;background:var(--surface);border-top:1px solid rgba(255,255,255,.12);border-radius:24px 24px 0 0;padding:16px 32px 36px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;box-shadow:0 -12px 48px #00000080;animation:sheet-slide-up .35s cubic-bezier(.32,.72,0,1) forwards}@keyframes sheet-slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.bottom-sheet-handle{width:40px;height:4px;border-radius:2px;background:#fff3;flex-shrink:0}.end-stats{display:flex;flex-direction:row;align-items:center;gap:16px;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 28px}.all-time-stats{display:flex;flex-direction:row;align-items:center;gap:24px}.end-stat-value{font-size:1.6rem;font-weight:800;color:var(--text);line-height:1}.end-stat-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}.all-time-section{display:flex;flex-direction:column;align-items:center;gap:8px}.section-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.end-stat-group{display:flex;flex-direction:column;align-items:center;gap:2px}.next-daily{display:flex;flex-direction:column;align-items:center;gap:4px}.next-daily-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.next-daily-time{font-size:1.8rem;font-weight:800;letter-spacing:.05em;font-variant-numeric:tabular-nums;color:var(--text)}.end-stat-divider{width:1px;height:36px;background:#ffffff26;flex-shrink:0}.bottom-sheet-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}@media(max-width:480px){.placed-card{min-width:68px}.placed-card .card-name{font-size:9px;max-width:68px}}