/* --- RESPONSIVE --- */
@media (max-width: 1280px) {
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) and (orientation: landscape) {
}

@media (max-width: 768px) and (orientation: portrait) {
    .game-title { 
        display: block; 
        position: static; 
        transform: none; 
        font-size: 15px; 
        flex: 1; 
        text-align: center; 
        margin: 0 8px; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
    }
    .app-header { padding: 0 8px; height: 60px; }
    .c-btn span { display: none; }
    .c-btn { padding: 8px; border-radius: 8px; }
    .p-btn { width: 28px; height: 28px; font-size: 14px; }
    .h-group { gap: 4px; }
    .control-pill { padding: 2px 4px; gap: 2px; }
    .control-pill #zVal { display: none; }
    .control-pill .divider { margin: 0 1px; height: 16px; }
    .landing-page { padding-top: 15px; }
    .app-footer { padding: 0 10px; height: 65px; }
    .footer-controls { gap: 4px; }
    .f-btn { width: 36px; height: 36px; font-size: 14px; }
}

@media (orientation: landscape) {
    .dl-modal-box {
        flex-direction: row;
        width: min(1000px, 96%);
        height: min(500px, 85vh);
        max-height: calc(100vh - 80px);
        align-items: stretch;
    }
    
    .dl-poster-con {
        width: 45%;
        height: 100%;
        aspect-ratio: auto;
        border-bottom: none;
        border-right: 4px solid var(--blue);
        flex-shrink: 0;
    }
    
    .dl-poster-con img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .dl-info-con {
        width: 55%;
        height: 100%;
        padding: 25px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .dl-title {
        font-size: 22px;
    }

    .dl-desc {
        font-size: 13px;
        margin-bottom: 20px;
    }
}

@keyframes modalPop {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:1000;padding:60px 0 50px 0}

.modal-box{background:var(--bg-card);border-radius:24px;width:min(600px,94%);box-shadow:0 20px 60px rgba(0,0,0,0.25);animation:modalPop .4s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;max-height:85svh;padding:0;overflow:hidden}
.modal-head{padding:25px 25px 0 25px;flex-shrink:0}
.modal-body{flex:1;overflow-y:auto;padding:15px 25px;-webkit-overflow-scrolling:touch}
.modal-foot{padding:15px 25px 25px 25px;flex-shrink:0;background:var(--bg-card);border-top:1px solid var(--border)}
.stepper{display:flex;justify-content:center;gap:15px;margin-bottom:20px;flex-shrink:0}
.step{opacity:.4;display:flex;flex-direction:column;align-items:center;font-size:11px;font-weight:700;transition:all .3s;transform:scale(0.9)}
.step.active,.step.done{opacity:1;transform:scale(1)}
.step.active{color:var(--blue)}.step.done{color:var(--green)}
.step-dot{width:28px;height:28px;background:var(--border);border-radius:50%;display:grid;place-items:center;margin-bottom:4px;font-size:14px;transition:all .3s}
.step.active .step-dot{background:var(--blue);color:#fff;box-shadow:0 4px 10px rgba(0,136,204,0.3)}
.step-sec{display:none;animation:fadeIn .3s}.step-sec.active{display:block}
.grid-sub{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:25px}
.sub-card{padding:15px 4px;background:var(--bg-card);border-radius:16px;text-align:center;border:2px solid var(--border);transition:all .3s;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:90px}
.sub-card:hover{border-color:var(--border-d);transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,0.08)}
.sub-card.active{border-color:var(--blue);background:#e3f2fd;color:var(--blue-d);box-shadow:0 8px 20px rgba(0,136,204,0.25);transform:translateY(-2px)}
.sub-card.disabled{opacity:0.5;pointer-events:none;filter:grayscale(1)}
.sub-card i{font-size:24px;margin-bottom:8px;opacity:0.6;transition:.3s}.sub-card.active i{opacity:1;color:var(--blue);transform:scale(1.1)}
.sub-name{font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:0.5px}
.lvl-row{display:flex;gap:10px;justify-content:center;margin-bottom:20px}
.lvl-btn{flex:1;padding:12px;background:var(--bg-sec);border-radius:12px;font-weight:700;transition:all .2s;font-size:14px;color:var(--txt-sec)}
.lvl-btn:hover{background:var(--border)}.lvl-btn.active{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(0,136,204,0.3);transform:translateY(-1px)}
.team-row{display:flex;gap:15px;align-items:stretch;justify-content:center}
.t-box{flex:1;padding:15px;background:var(--bg-sec);border-radius:16px;text-align:center;border:2px solid transparent;transition:all .3s}
.t-box:focus-within{background:var(--bg-card);box-shadow:0 8px 20px rgba(0,0,0,0.08)}
.t-box.blue{border-color:rgba(33,150,243,0.3)}.t-box.red{border-color:rgba(229,57,53,0.3)}
.t-box input{width:100%;padding:10px;border:2px solid var(--border);border-radius:8px;text-align:center;margin-top:10px;font-weight:700;font-size:14px;outline:none;transition:.2s;background:var(--bg-card);color:var(--txt)}
.t-box input:focus{border-color:var(--border-d);background:var(--bg-card)}
.nav-row{display:flex;justify-content:center;gap:12px;margin-top:auto}
.btn-main{background:var(--blue);color:#fff;padding:14px 35px;border-radius:14px;font-weight:800;box-shadow:0 8px 20px rgba(0,136,204,0.3);font-size:16px;transition:all .2s}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(0,136,204,0.4)}.btn-main:active{transform:translateY(0)}
.btn-main:disabled{opacity:0.5;cursor:not-allowed}
.ai-tabs-con{position:relative;display:flex;background:var(--bg-ter);border-radius:12px;padding:4px;margin-top:10px;width:100%;box-shadow:inset 0 2px 5px rgba(0,0,0,0.05)}
.ai-bg{position:absolute;top:4px;left:4px;bottom:4px;width:calc(33.33% - 5.33px);background:var(--bg-card);border-radius:9px;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform .3s;z-index:1}
.ai-tab{flex:1;position:relative;z-index:2;padding:10px;font-weight:700;font-size:13px;text-align:center;color:var(--txt-ter);background:transparent;transition:color .3s;cursor:pointer}
.ai-tab.active{color:var(--blue-d)}
.math-options{margin-top:15px;border-top:1px solid var(--border);padding-top:15px;animation:fadeIn .3s}
.ops-row{display:flex;gap:10px;justify-content:center}
.op-btn{width:45px;height:45px;border-radius:12px;background:var(--bg-card);border:2px solid var(--border);font-size:20px;color:var(--txt-ter);display:grid;place-items:center;transition:all .2s}
.op-btn:hover{background:var(--bg-sec);border-color:var(--border-d)}.op-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 10px rgba(0,136,204,0.3);transform:translateY(-2px)}

/* --- GAME BOARD --- */
.board{display:grid;width:100%;min-height:calc(100vh - 110px);grid-template-columns:1fr 1fr 1fr;grid-template-areas:"left arena right";gap:15px;padding:15px;margin:0;transition:transform .3s ease-out;transform-origin:top center}
.in-game .board { min-height: calc(100vh - 72px); }
#pL{grid-area:left}.arena{grid-area:arena}#pR{grid-area:right}
.panel,.arena{background:var(--bg-card);border-radius:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;height:100%;width:100%;position:relative;min-width:0;min-height:0}
.p-head{padding:12px 15px;color:#fff;font-weight:800;display:flex;justify-content:space-between;align-items:center;font-size:15px;letter-spacing:0.5px;flex-shrink:0}
.p-head > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; text-align: left; }
.p-head > span:last-child { flex-shrink: 0; }
.p-blue .p-head{background:linear-gradient(90deg,#007aff,#005bb5) !important}.p-red .p-head{background:linear-gradient(90deg,#ff3b30,#c62828) !important}
.panel-body{flex:1;display:flex;flex-direction:column;padding:15px;overflow:hidden;position:relative;align-items:center;justify-content:space-between}
.prob-box{flex:0 0 auto;min-height:90px;max-height:40%;margin-bottom:15px;font-size:20px;display:flex;align-items:center;justify-content:center;text-align:center;overflow-y:auto;line-height:1.3;padding:15px;border-radius:20px;width:100%;box-shadow:0 4px 15px rgba(0,0,0,0.03);border:1px solid rgba(0,0,0,0.02)}
.p-blue .prob-box{background:#e8f2ff !important;color:#005bb5 !important}
.p-red .prob-box{background:#ffebee !important;color:#c62828 !important}
.prob-box.math{font-size:40px;font-weight:900;letter-spacing:2px}
.math-mode{display:flex;flex-direction:column;flex:1;width:100%}.mcq-mode{display:flex;flex-direction:column;flex:1;gap:10px;width:100%;overflow:hidden}
.inp{margin:8px;padding:12px;border:3px solid var(--border);border-radius:12px;text-align:center;font-size:24px;font-weight:800;width:calc(100% - 16px);outline:none;transition:.2s;background:var(--inp-bg);color:var(--txt)}
.inp:focus{border-color:var(--border-d)}.inp.ok{background:#d4edda;border-color:var(--green);color:var(--green)}.inp.err{background:#f8d7da;border-color:var(--red-t);color:var(--red-t);animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;background:var(--bg-sec);flex:0 0 auto;border-radius:12px}
.k-btn{padding:12px 0;background:var(--bg-card);border-radius:10px;font-weight:800;font-size:20px;box-shadow:0 2px 5px rgba(0,0,0,0.05);transition:all .1s;user-select:none;color:var(--txt);border:1px solid var(--border)}
.k-btn:active{transform:scale(0.95);background:var(--border)}

.mcq-grid{display:flex;flex-direction:column;gap:8px;align-items:stretch;width:100%;flex:1;overflow-y:hidden;justify-content:space-evenly}
.mcq-btn{background:var(--bg-card);border:2px solid var(--border);border-radius:12px;font-weight:700;font-size:15px;color:var(--txt-sec);cursor:pointer;transition:all .2s;padding:0 10px;user-select:none;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;word-break:break-word;box-shadow:0 2px 5px rgba(0,0,0,0.05);width:100%;flex:1;min-height:0}
.mcq-btn:hover{border-color:var(--border-d);transform:translateY(-2px)}.mcq-btn:active{transform:scale(0.98)}
.mcq-btn.ok{background:#d4edda;border-color:var(--green);color:var(--green)}.mcq-btn.err{background:#f8d7da;border-color:var(--red-t);color:var(--red-t);animation:shake .4s}

.top-score{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:var(--bg-card);border-bottom:1px solid var(--border);height:80px;z-index:2;transition:height 0.3s ease}
.in-game .top-score { height: 60px; padding: 5px 20px; }
.ts-group{display:flex;flex-direction:column;justify-content:center;min-width:80px}
.ts-left{align-items:flex-start}.ts-right{align-items:flex-end;text-align:right}
.ts-name{font-size:11px;color:var(--txt-ter);font-weight:700;margin-bottom:4px;text-transform:uppercase;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis}
.ts-score{font-size:32px;font-weight:900;line-height:1}.ts-score.blue{color:var(--blue-t)}.ts-score.red{color:var(--red-t)}
.ts-mid{font-size:24px;font-weight:800;color:var(--blue-d);background:var(--bg-ter);padding:8px 25px;border-radius:30px;display:flex;align-items:center;gap:10px}
.field{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:20px 10px 10px 10px;gap:5px}

.scoreboard-tv{width:100%;max-width:100%;background:#1a1a1a;border-radius:12px;padding:0;box-shadow:0 10px 40px rgba(0,0,0,0.4);border:4px solid #333;color:#fff;font-family:'Teko',sans-serif;position:relative;overflow:hidden;margin:0 auto;flex-shrink:0}
.scoreboard-tv::after{content:" ";display:block;position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,0.25) 50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06));z-index:2;background-size:100% 2px,3px 100%;pointer-events:none}
.tv-inner{background:#000;padding:15px;display:flex;flex-direction:column;position:relative;z-index:1}
.tv-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #444;padding-bottom:8px;margin-bottom:10px}
.tv-match-info{font-size:20px;color:#bbb;text-transform:uppercase;letter-spacing:1px;font-weight:500}
.tv-target-box{background:#d32f2f;padding:2px 10px;border-radius:4px;font-weight:700;font-size:18px}
.tv-main{display:flex;justify-content:space-between;align-items:center}
.tv-team{text-align:center;flex:1;display:flex;flex-direction:column;align-items:center}
.tv-name{font-size:15px;color:#aaa;text-transform:uppercase;margin-bottom:0;line-height:1.2;font-family:'Inter',sans-serif;font-weight:800;white-space:normal;overflow:hidden;max-width:140px;margin-left:auto;margin-right:auto;display:flex;justify-content:center;align-items:center;min-height:36px}
.tv-score-box{display:flex;align-items:baseline;justify-content:center;line-height:0.8;margin-top:5px}
.tv-score-big{font-size:64px;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(255,255,255,0.3)}
.tv-wickets{font-size:32px;color:#ff5252;margin-left:5px;font-weight:600}
.tv-label{font-size:12px;color:#555;margin-top:2px;font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.tv-vs{font-size:20px;font-weight:900;color:#1a1a1a;background:#fbc02d;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin:0 10px;box-shadow:0 0 10px rgba(251,192,45,0.4);font-family:'Inter',sans-serif;transform:translateY(5px)}
.graph-con{width:100%;height:200px;background:transparent;border:none;border-top:1px solid #333;border-radius:0;position:relative;box-shadow:none;display:flex;align-items:flex-end;padding:15px 0 5px 25px;overflow:hidden;margin-top:5px}
.graph-svg{width:100%;height:100%;overflow:visible}
.g-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.g-line.blue{stroke:var(--blue-t);filter:drop-shadow(0 0 4px rgba(33,150,243,0.5))}.g-line.red{stroke:var(--red-t);filter:drop-shadow(0 0 4px rgba(229,57,53,0.5))}
.g-area{opacity:0.15;stroke:none}.g-area.blue{fill:var(--blue-t)}.g-area.red{fill:var(--red-t)}
.g-grid{stroke:#333;stroke-width:1;stroke-dasharray:4}.g-target{stroke:#d32f2f;stroke-width:2;stroke-dasharray:5,5;opacity:0.8}
.g-lbl{font-size:10px;fill:#666;font-family:'Inter',sans-serif;font-weight:600;user-select:none}
.diff-sel{position:absolute;inset:0;background:rgba(255,255,255,0.95);display:none;flex-direction:column;gap:10px;padding:20px;align-items:center;justify-content:center;z-index:10;animation:fadeIn .3s}
.diff-sel.show{display:flex}
.d-btn{width:100%;padding:15px;border-radius:12px;font-weight:900;font-size:16px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.2);transition:all .2s;position:relative;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,0.1)}
.d-btn:hover{transform:scale(1.02)}.d-btn:active{transform:scale(0.98)}
.db-e{background:#2ecc71}.db-n{background:#f39c12}.db-h{background:#e74c3c}
.db-desc{font-size:10px;font-weight:400;display:block;margin-top:2px;opacity:0.9}

.out-overlay{position:absolute;inset:0;background:rgba(229,57,53,0.95);z-index:100;display:none;align-items:center;justify-content:center;color:#fff;font-size:40px;font-weight:900;text-transform:uppercase;letter-spacing:2px;transform:rotate(-10deg);animation:stamp .3s cubic-bezier(.34,1.56,.64,1);text-shadow:0 4px 10px rgba(0,0,0,0.2)}
.out-overlay.show{display:flex}
@keyframes stamp{from{transform:scale(2) rotate(0deg);opacity:0}to{transform:scale(1) rotate(-10deg);opacity:1}}
.rope-con{width:80%;max-width:600px;transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none}
.rope-con video{width:100%;height:auto;display:block}
.cnt-ovl{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(15px);z-index:2000;display:none;align-items:center;justify-content:center;flex-direction:column}
.cnt-txt{font-size:clamp(80px,25vw,180px);font-weight:900;color:#fff;text-shadow:0 10px 40px rgba(0,0,0,0.5);animation:cntPop .8s forwards;opacity:0}
.cnt-txt.go{color:#fff;font-size:clamp(100px,30vw,220px)}
@keyframes cntPop{0%{transform:scale(0.5);opacity:0}50%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:0}}
.creator-credit{position:absolute;bottom:50px;text-align:center;color:rgba(255,255,255,0.6);font-size:14px;letter-spacing:1px;font-weight:700}
.win-ovl{position:fixed;inset:0;background:rgba(255,255,255,0.95);z-index:1500;display:none;align-items:center;justify-content:center;animation:fadeIn .5s}
.win-box{background:var(--bg-card);padding:40px;border-radius:30px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.2);animation:slideUp .5s;max-width:90%;width:400px;position:relative;z-index:2}
.trophy{font-size:80px;color:#fbc02d;margin-bottom:20px;filter:drop-shadow(0 10px 20px rgba(251,192,45,0.4));animation:bounce 2s infinite}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}
.win-btns{display:flex;flex-direction:column;gap:12px;width:100%}
.win-btns button{width:100%;padding:14px;border-radius:12px;font-weight:800;font-size:16px;transition:all .2s}
.win-btns button:hover{transform:scale(1.02);filter:brightness(1.1)}
.stats-ovl{position:fixed;inset:0;background:var(--bg-card);z-index:1600;display:none;flex-direction:column;padding:20px}
.stats-head{font-size:24px;font-weight:900;text-align:center;margin:40px 0 20px 0;color:var(--blue-d);text-transform:uppercase}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;width:100%;max-width:800px;margin:0 auto;overflow-y:auto;flex:1}
.stat-card{background:var(--bg-sec);border-radius:16px;padding:20px;box-shadow:var(--shadow);border-top:5px solid var(--border-d)}
.stat-card.blue{border-color:var(--blue-t)}.stat-card.red{border-color:var(--red-t)}
.sc-head{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;margin-bottom:15px;color:var(--txt)}
.st-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px;font-weight:600;color:var(--txt-sec)}
.st-val{font-weight:800;color:var(--txt)}.st-green{color:var(--green)}.st-red{color:var(--red-t)}
.confetti{position:absolute;width:10px;height:10px;background:#f00;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(100vh) rotate(720deg)}}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Scoreboard Animations */
@keyframes scorePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: #ffd700; text-shadow: 0 0 15px rgba(255, 215, 0, 0.8); }
    100% { transform: scale(1); }
}
@keyframes wicketShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-5deg); color: #ff5252; }
    75% { transform: translateX(5px) rotate(5deg); color: #ff1744; }
}
.tv-score-big.pop { animation: scorePop 0.4s ease-out; }
.tv-wickets.shake { animation: wicketShake 0.5s ease-in-out; }

@keyframes bgFlashGreen {
    0% { background-color: rgba(46, 204, 113, 0); }
    30% { background-color: rgba(46, 204, 113, 0.3); }
    100% { background-color: rgba(46, 204, 113, 0); }
}
@keyframes bgFlashRed {
    0% { background-color: rgba(231, 76, 60, 0); }
    30% { background-color: rgba(231, 76, 60, 0.3); }
    100% { background-color: rgba(231, 76, 60, 0); }
}
.tv-team.flash-green { animation: bgFlashGreen 0.6s ease-out; border-radius: 8px; }
.tv-team.flash-red { animation: bgFlashRed 0.6s ease-out; border-radius: 8px; }

@keyframes pulseDot {
    0% { r: 3; opacity: 1; stroke-width: 0; }
    50% { r: 6; opacity: 0.6; stroke-width: 3px; stroke-opacity: 0.5; }
    100% { r: 3; opacity: 1; stroke-width: 0; }
}
.g-dot { animation: pulseDot 1.5s infinite; stroke: #fff; }

@keyframes correctFlash {
    0%, 100% { background-color: var(--bg-card); transform: scale(1); }
    50% { background-color: #d4edda; border-color: var(--green); transform: scale(1.05); box-shadow: 0 0 10px rgba(46, 204, 113, 0.5); }
}
.mcq-btn.correct-flash { animation: correctFlash 0.6s ease-in-out; color: var(--green); font-weight: 800; }

/* --- BOXING --- */
.boxing-board{display:grid;width:100%;height:calc(100vh - 110px);gap:15px;padding:15px;grid-template-columns:280px 1fr 280px;grid-template-rows:1fr;grid-template-areas:"p1 center p2";max-width:1400px;margin:0 auto;transition:transform .3s ease-out;transform-origin:top center}
.in-game .boxing-board { height: calc(100vh - 72px); }
.box-panel.p-blue{grid-area:p1}.box-panel.p-red{grid-area:p2}.box-center-light{grid-area:center}
.box-panel{background:var(--bg-card);border-radius:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;position:relative;border:1px solid var(--border);min-height:0}
.box-center-light{background:linear-gradient(145deg,var(--bg-card),var(--bg));border-radius:24px;box-shadow:5px 5px 15px rgba(0,0,0,0.05),-5px -5px 15px rgba(255,255,255,0.1),inset 0 0 0 2px rgba(255,255,255,0.1);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:40px 20px 20px 20px;position:relative;gap:15px;min-height:0;transition:padding 0.3s ease}
.in-game .box-center-light { padding: 15px 20px; gap: 10px; }
.box-hp-con{height:12px;background:var(--border);width:100%;border-bottom:1px solid var(--border-d)}
.hp-fill{height:100%;transition:width 0.3s}.hp-fill.blue{background:var(--blue-t)}.hp-fill.red{background:var(--red-t)}
.box-opts-area{flex:1;display:flex;flex-direction:column;padding:15px;gap:10px;overflow-y:auto}
.box-vid-light{flex:1;width:calc(100% + 40px);margin:0 -20px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:0;border-top:8px solid var(--bg-card);border-bottom:8px solid var(--bg-card);background:var(--header-bg);backdrop-filter:blur(12px);box-shadow:0 4px 20px rgba(0,0,0,0.08);min-height:250px}
.box-vid-light video{max-width:100%;max-height:100%;width:auto;height:auto;display:block;margin:0 auto}
.box-q-light{width:100%;background:var(--bg-card);padding:15px 20px;border-radius:12px;text-align:center;font-weight:700;font-size:clamp(18px,2.5vw,24px);min-height:80px;display:flex;align-items:center;justify-content:center;line-height:1.3;color:var(--txt);border-left:5px solid var(--blue);border-right:5px solid var(--red-t);box-shadow:0 4px 15px rgba(0,0,0,0.05);flex-shrink:0}
.box-timer-con{width:100%;height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:5px;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);flex-shrink:0}
.timer-fill{height:100%;background:linear-gradient(90deg,#fbc02d,#f57f17);width:0%;border-radius:6px;transition:width 1s linear;box-shadow:0 0 8px rgba(251,192,45,0.4)}
.box-timer-txt{position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:#fbc02d;font-family:'Teko',sans-serif;font-size:24px;letter-spacing:1px;background:#333;padding:0 15px;border-radius:12px;line-height:24px;box-shadow:0 2px 5px rgba(0,0,0,0.2);z-index:5}
.box-rnd-counter{background:var(--bg-ter);padding:5px 15px;border-radius:20px;font-size:13px;color:var(--txt-sec);font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-top:5px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.05);flex-shrink:0}
.shake{animation:shake 0.5s}

/* --- MEMORY --- */
.memory-board{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;max-width:600px;margin:0 auto;height:calc(100vh - 120px);padding:10px;transition:transform .3s ease-out;transform-origin:top center}
.in-game .memory-board { height: calc(100vh - 82px); }
.mem-header{display:flex;justify-content:space-between;width:100%;margin-bottom:15px;background:var(--bg-card);padding:10px 20px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.05);flex-shrink:0;transition:all 0.3s ease}
.in-game .mem-header { padding: 5px 20px; margin-bottom: 8px; }
.mem-stat{display:flex;flex-direction:column;align-items:center}
.mem-label{font-size:10px;font-weight:700;color:var(--txt-ter);text-transform:uppercase}
.mem-val{font-size:20px;font-weight:900;color:var(--txt)}
.mem-lives{color:#e53935;font-size:18px;display:flex;gap:4px;margin-top:2px}
.mem-msg{font-size:18px;font-weight:700;margin-bottom:5px;color:var(--txt-sec);text-align:center;height:24px;flex-shrink:0}
.mem-grid-con{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;padding:10px}
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:min(90vw,calc(100vh - 320px));height:min(90vw,calc(100vh - 320px));margin:auto;transition:all 0.3s}
.mem-box{background:linear-gradient(145deg,var(--bg-card),var(--border));border-radius:12px;box-shadow:5px 5px 10px rgba(0,0,0,0.1),-5px -5px 10px rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-family:'Teko',sans-serif;font-size:32px;font-weight:600;color:var(--txt-sec);user-select:none;transition:all 0.2s;border:2px solid transparent}
.mem-box:active{box-shadow:inset 4px 4px 8px rgba(0,0,0,0.1),inset -4px -4px 8px rgba(255,255,255,0.1);transform:scale(0.96)}
.mem-box.active{background:linear-gradient(145deg,#29b6f6,#0288d1);color:white;box-shadow:inset 2px 2px 5px rgba(0,0,0,0.2);border-color:rgba(255,255,255,0.4);transform:scale(1.05);z-index:2}
.mem-box.clicked{background:#66bb6a;box-shadow:inset 3px 3px 6px rgba(0,0,0,0.1);color:white}
.mem-box.err{background:#ef5350;color:white;animation:shake 0.4s}
.mem-footer{height:60px;display:flex;align-items:center;justify-content:center;width:100%;margin-top:10px;flex-shrink:0}
.mem-res-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;width:100%;margin-top:20px;background:var(--bg-sec);padding:15px;border-radius:16px}
.mem-res-item{display:flex;flex-direction:column;align-items:center}
.mem-res-item span{font-size:11px;color:var(--txt-ter);font-weight:600;text-transform:uppercase}
.mem-res-item strong{font-size:18px;color:var(--txt);font-weight:800}

@media(max-width:900px){.boxing-board{grid-template-columns:200px 1fr 200px}}
@media(max-width:768px) and (orientation:portrait){
    .board{grid-template-columns:1fr 1fr;grid-template-areas:"arena arena" "left right";grid-template-rows:42% 58%;padding:5px;padding-bottom:0;gap:5px;height:calc(100vh - 110px)}
    .arena{margin-bottom:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}
    .field{padding:5px;gap:5px;display:flex;flex-direction:column;justify-content:center;align-items:center}
    
    /* Compact Scoreboard for Portrait */
    .scoreboard-tv{width:100%;transform:none;margin:0;flex:1;max-height:100%;display:flex;flex-direction:column}
    .tv-inner{padding:5px;flex:0 0 auto;display:flex;flex-direction:column;justify-content:center}
    .tv-header{margin-bottom:2px;padding-bottom:2px}
    .tv-score-big{font-size:42px}
    .tv-wickets{font-size:24px}
    .tv-match-info{font-size:14px}
    .tv-name{font-size:12px;min-height:16px;margin-bottom:0}
    .tv-vs{width:26px;height:26px;font-size:12px;margin:0 6px}
    .tv-score-box{margin-top:0}

    .graph-con{width:100%;height:auto;flex:1;max-height:none;min-height:0;margin:0;border-top:1px solid #333}
    
    .ts-mid{font-size:14px;padding:2px 8px;gap:4px;height:28px}
    .top-score{padding:2px 8px;height:40px}
    .ts-score{font-size:20px}
    .ts-name{font-size:10px;margin-bottom:0}
    
    .panel-body{padding:5px;display:flex;flex-direction:column}
    .prob-box{font-size:16px;min-height:40px;margin-bottom:5px;padding:5px;flex-shrink:0}
    .prob-box.math{font-size:20px}
    .inp{font-size:16px;padding:6px;margin:2px;flex-shrink:0}
    .math-mode{display:flex;flex-direction:column;flex:1;min-height:0}
    .keys{gap:4px;padding:4px;flex:1;display:grid;grid-template-rows:repeat(4, 1fr);min-height:0}
    .k-btn{font-size:20px;padding:0;height:100%;width:100%}
    .mcq-btn{font-size:12px;padding:0 2px;min-height:32px}
    
    .boxing-board{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"center center" "p1 p2";gap:8px;padding:5px;height:calc(100vh - 110px)}
    .box-center-light{padding:10px;gap:5px;justify-content:center}
    .box-vid-light{min-height:0;flex:1;width:100%;margin:0;border-width:2px}
    .box-q-light{min-height:40px;font-size:15px;padding:5px 10px;border-left-width:3px;border-right-width:3px}
    .box-panel{border-radius:16px}
    .p-head{padding:8px 10px;font-size:13px;justify-content:center}
    .box-opts-area{padding:5px;gap:6px}
    .box-timer-txt{font-size:18px;padding:0 10px;top:-22px}
}

@media(max-width:1280px) and (orientation:landscape){
    .board{grid-template-columns:1fr 1.3fr 1fr;grid-template-areas:"left arena right";grid-template-rows:1fr;gap:8px;padding:5px;height:calc(100vh - 65px)}
    .boxing-board{grid-template-columns:1fr 1.3fr 1fr;grid-template-rows:1fr;grid-template-areas:"p1 center p2";gap:8px;padding:5px;height:calc(100vh - 65px)}
    
    /* Side Panels & Numpad */
    .panel-body, .box-opts-area{padding:5px;display:flex;flex-direction:column}
    .prob-box{min-height:50px;font-size:18px;margin-bottom:5px;flex-shrink:0}
    .prob-box.math{font-size:22px}
    .inp{padding:5px;font-size:16px;margin:2px;flex-shrink:0}
    .math-mode{flex:1;display:flex;flex-direction:column;min-height:0}
    .keys{gap:4px;padding:2px;flex:1;display:grid;grid-template-rows:repeat(4, 1fr);min-height:0}
    .k-btn{font-size:18px;padding:0;height:100%;width:100%}
    .mcq-grid{flex:1;overflow-y:auto}
    
    /* Center Arena */
    .arena{overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0}
    .field{width:100%;height:100%;padding:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;overflow:hidden}
    
    /* Scoreboard & Graph */
    .scoreboard-tv{width:98%;transform:none;margin:0;flex:1;max-height:100%;display:flex;flex-direction:column}
    .tv-inner{padding:5px;flex:0 0 auto;display:flex;flex-direction:column;justify-content:space-around}
    .tv-header{margin-bottom:4px;padding-bottom:4px}
    .tv-score-big{font-size:56px}
    .tv-wickets{font-size:28px}
    .tv-match-info{font-size:12px}
    .tv-name{font-size:10px;min-height:16px;margin-bottom:0}
    .tv-vs{width:22px;height:22px;font-size:10px;margin:0 4px}
    .tv-score-box{margin-top:0}
    
    .graph-con{width:100%;height:auto;flex:1;max-height:none;min-height:0;margin:0;border-top:1px solid #333}
    .rope-con{width:90%;max-width:350px}
    
    /* Top Score Bar */
    .top-score{padding:2px 8px;height:35px;min-height:35px;width:100%}
    .ts-mid{font-size:12px;padding:2px 8px;gap:4px;height:24px}
    .ts-score{font-size:18px}
    .ts-name{font-size:9px}

    /* Boxing Specific */
    .box-center-light{padding:5px;gap:4px;justify-content:center}
    .box-vid-light{min-height:0;flex:1;width:100%;margin:0;border-width:2px}
    .box-q-light{min-height:36px;font-size:14px;padding:4px 8px;border-left-width:3px;border-right-width:3px}
    .box-timer-con{margin-bottom:2px}
    .box-timer-txt{font-size:14px;top:-18px;padding:0 6px}
}

@media(orientation:landscape) {
    body { padding-top: 50px; }
    .app-header { height: 50px; padding: 0 15px; }
    .landing-page{padding:10px 20px 80px 20px; min-height:calc(100vh - 50px); background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:flex-start}
    .body-heading { margin-top: 0; margin-bottom: 10px; padding: 6px 20px; font-size: 22px; }
    .c-btn { padding: 6px 12px; font-size: 12px; }
    .p-btn { width: 28px; height: 28px; }
    .game-title { font-size: 20px; }
    .control-pill { padding: 2px 6px; }
    .divider { height: 16px; }
    
    .games-grid{
        display:grid;
        width:100%;
        max-width: 1400px;
        align-items:stretch;
        justify-content:center;
    }
    
    .game-card{
        flex-direction: var(--flex-dir, row);
        min-height: var(--card-height, 180px);
        height: auto;
        margin:0;
    }
    
    .gc-img-box {
        width: var(--poster-width, 45%);
        height: var(--poster-height, 100%);
        flex-shrink: 0;
    }
    
    .gc-img {
        height: 100%;
        object-fit: cover;
    }
    
    .gc-content{
        width: auto;
        flex: 1;
        padding: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: var(--title-align, left);
    }
    
    .gc-title{font-size:15px; margin-bottom:5px; justify-content: flex-start; min-height: auto;}
    .gc-feature-tiles { justify-content: flex-start; margin-bottom: 8px; gap: 4px; }
    .feat-tile { padding: 3px 8px; font-size: 10px; }
    .gc-meta-row { margin-bottom: 10px; gap: 8px; }
    .gc-meta-tile { padding: 6px; font-size: 11px; }
    .gc-btn{padding:10px; font-size:12px; margin-top: auto;}

    .memory-board{padding:10px 20px;flex-direction:row;align-items:center;justify-content:center;gap:20px}
    .mem-header{flex-direction:column;width:150px;height:auto;gap:10px;padding:15px;margin-bottom:0;justify-content:center;background:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.8)}
    .mem-stat{flex-direction:row;justify-content:space-between;width:100%;border-bottom:1px solid rgba(0,0,0,0.1);padding-bottom:4px;margin-bottom:4px}
    .mem-label{font-size:10px}.mem-val{font-size:16px}
    .mem-grid-con{height:100%;flex:1;align-items:center;justify-content:center}
    .mem-grid{width:min(75vh,45vw);height:min(75vh,45vw);max-width:500px;max-height:500px}
    .mem-msg{display:none}
    .mem-footer{width:150px;flex-direction:column;height:auto;margin-top:0;gap:10px}
    #memReadyBtn{width:100% !important;font-size:14px;padding:10px;white-space:normal;line-height:1.1}
}

/* === FORCE FULL ACCENT SYSTEM OVERRIDE === */
.btn-orange,.btn-cyan,.btn-red{
background:var(--accent) !important;
box-shadow:0 8px 20px rgba(var(--accent-rgb),0.3) !important;
}

.p-blue .db-e, .p-blue .db-n, .p-blue .db-h {
background:var(--blue) !important;
box-shadow:0 8px 20px rgba(0,122,255,0.3) !important;
}

.p-red .db-e, .p-red .db-n, .p-red .db-h {
background:var(--red) !important;
box-shadow:0 8px 20px rgba(255,59,48,0.3) !important;
}

.new-tag{
background:var(--accent) !important;
}

.gc-btn,
.btn-main,
.dl-btn-main{
background:var(--accent) !important;
}

/* Force Blue/Red colors in-game instead of global accent */
body.in-game {
    --blue: #007aff !important;
    --blue-d: #005bb5 !important;
    --blue-t: #007aff !important;
    --red: #ff3b30 !important;
    --red-t: #ff3b30 !important;
    --green: #34c759 !important;
}