: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}.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)}.source-link{font-size:13px;color:var(--muted);text-decoration:none;border:1px solid rgba(255,255,255,.12);border-radius:50px;padding:6px 16px;transition:color .15s,border-color .15s}.source-link:hover{color:var(--text);border-color:#ffffff4d}.score-display{font-family:Boogaloo,cursive;font-size:clamp(42px,12vw,68px);color:var(--gold);text-shadow:0 0 20px rgba(245,166,35,.4);line-height:1}.score-label{font-size:13px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-top:-6px}.game-view{display:flex;flex-direction:column;flex:1;width:100%}.heart.lost{filter:grayscale(1);opacity:.3}.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: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}.endgame-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.modal-open-btn{background:#ffffff1a;box-shadow:none;font-size:18px;padding:10px 28px}.modal-open-btn:hover{box-shadow:none;background:#ffffff2e}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-box{background:var(--surface);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:40px 48px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;position:relative;box-shadow:0 24px 80px #0009;min-width:280px}.modal-close{position:absolute;top:14px;right:16px;background:#ffffff14;border:none;border-radius:50%;width:32px;height:32px;color:var(--muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.modal-close:hover{background:#ffffff29;color:var(--text)}@media(max-width:480px){.placed-card{min-width:68px}.placed-card .card-name{font-size:9px;max-width:68px}}