@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap');

:root{--blue:#0088cc;--blue-d:#006ba3;--bg:#f0f3f7;--txt:#212121;--blue-t:#2196f3;--red-t:#e53935;--green:#2ecc71;--shadow:0 8px 24px rgba(0,0,0,0.12)}
*{margin:0;padding:0;box-sizing:border-box;touch-action:manipulation}

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--txt);
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-top: 60px;
    padding-bottom: 50px;
}

button{cursor:pointer;border:none;font-family:inherit;outline:none;-webkit-tap-highlight-color:transparent}
img, video, svg, canvas { max-width: 100%; }

/* Header & Footer */
.app-header,.app-footer{position:fixed;left:0;width:100%;height:60px;display:flex;align-items:center;padding:0 25px;z-index:100;background:rgba(240,243,247,0.95);backdrop-filter:blur(12px)}
.app-header{top:0;justify-content:space-between;box-shadow:0 1px 0 rgba(0,0,0,0.05)}
.app-footer{bottom:0;justify-content:center;height:50px;font-size:12px}
.h-group{display:flex;align-items:center;gap:8px}
.game-title{font-size:clamp(18px,4vw,26px);font-weight:900;color:var(--blue-d);text-transform:uppercase;text-align:center;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;letter-spacing:-0.5px}
.c-btn{height:36px;border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);color:var(--blue-d);font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 12px;transition:all .2s cubic-bezier(.25,.8,.25,1);white-space:nowrap;font-size:13px}
.c-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.12)}.c-btn:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.f-center{display:flex;gap:12px;position:absolute;left:50%;transform:translateX(-50%)}
.f-right{margin-left:auto;font-weight:700;color:#555;display:flex;align-items:center;gap:4px}
.f-right span{color:var(--blue);font-weight:900;text-transform:uppercase}
.s-btn{width:36px;height:36px;border-radius:50%;font-size:16px;background:#fff;color:#555;box-shadow:0 2px 5px rgba(0,0,0,0.1);display:grid;place-items:center;transition:all .3s}
.s-btn:hover{transform:scale(1.15) rotate(5deg);color:var(--blue)}.s-btn:active{transform:scale(0.9)}

/* Landing Page */
.landing-page{position:fixed;inset:0;z-index:900;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px 60px 20px;overflow-y:auto}
.lp-header{text-align:center;margin-bottom:40px;animation:fadeIn .6s ease}
.lp-logo{font-size:36px;font-weight:900;color:var(--blue-d);margin-bottom:8px;text-shadow:0 4px 10px rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:-1.5px}
.games-grid{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;width:100%;max-width:900px;padding:0 10px;z-index:10}
.game-card{background:#fff;border-radius:24px;box-shadow:var(--shadow);width:300px;overflow:hidden;transition:all .4s;cursor:pointer;position:relative;display:flex;flex-direction:column;animation:slideUp .5s ease;border:4px solid #fff}
.game-card:hover{transform:translateY(-12px);box-shadow:0 20px 40px rgba(0,0,0,0.15);border-color:#fbc02d}
.gc-img-box{height:160px;width:100%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gc-img-epl{background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%)}
.gc-img-tow{background:linear-gradient(135deg,#FF8008 0%,#FFC837 100%)}
.gc-icon{font-size:60px;color:#fff;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3));animation:floatIcon 3s ease-in-out infinite}
@keyframes floatIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.gc-content{padding:20px;text-align:center;display:flex;flex-direction:column;gap:8px;flex:1}
.gc-title{font-size:18px;font-weight:900;color:#333;text-transform:uppercase;letter-spacing:-0.5px}
.gc-desc{font-size:13px;color:#666;line-height:1.4;flex:1;margin-bottom:15px}
.gc-btn{width:100%;padding:12px;border-radius:12px;font-weight:800;font-size:14px;color:#222;background:#fbc02d;transition:all .2s;box-shadow:0 4px 12px rgba(251,192,45,0.3)}
.game-card:hover .gc-btn{transform:scale(1.02);box-shadow:0 6px 16px rgba(251,192,45,0.4)}

/* Modal */
.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:#fff;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}
@keyframes modalPop{from{transform:scale(0.9) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.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:#fff;border-top:1px solid #f5f5f5}
.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{opacity:1;color:var(--blue);transform:scale(1)}
.step.done{opacity:1;color:var(--green);transform:scale(1)}
.step-dot{width:28px;height:28px;background:#eee;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:#fff;border-radius:16px;text-align:center;border:2px solid #eee;transition:all .3s;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:90px}
.sub-card:hover{border-color:#ccc;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;position:relative;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:#f5f5f5;border-radius:12px;font-weight:700;transition:all .2s;font-size:14px;color:#555}
.lvl-btn:hover{background:#eee}.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:#f8f9fa;border-radius:16px;text-align:center;border:2px solid transparent;transition:all .3s}
.t-box:focus-within{background:#fff;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 #eee;border-radius:8px;text-align:center;margin-top:10px;font-weight:700;font-size:14px;outline:none;transition:.2s}
.t-box input:focus{border-color:#bbb;background:#fff}
.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:#eef2f5;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:#fff;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:#888;background:transparent;transition:color .3s;cursor:pointer}
.ai-tab.active{color:var(--blue-d)}

/* GAME BOARD - FLUID CSS GRID LAYOUT */
.board {
    display: grid;
    width: 100%;
    min-height: calc(100vh - 110px);
    /* 3 equal columns for desktop/landscape */
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr; 
    grid-template-areas: "left arena right";
    gap: 15px;
    padding: 15px;
    margin: 0;
    align-content: stretch;
    transition: transform 0.3s ease-out;
    transform-origin: top center;
}

#pL { grid-area: left; }
.arena { grid-area: arena; }
#pR { grid-area: right; }

/* Panels fill their grid area */
.panel, .arena {
    background:#fff;
    border-radius:20px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    height:100%;
    width: 100%;
    position:relative;
    min-width: 0; /* Prevent flex overflow */
    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}
.p-blue .p-head{background:linear-gradient(90deg,var(--blue-t),var(--blue-d))}.p-red .p-head{background:linear-gradient(90deg,var(--red-t),#c62828)}
.panel-body{flex:1;display:flex;flex-direction:column;padding:15px;overflow:hidden;position:relative}
.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:10px;border-radius:12px}
.p-blue .prob-box{background:#e3f2fd;color:var(--blue-d)}.p-red .prob-box{background:#ffebee;color:#c62828}
.prob-box.math{font-size:40px;font-weight:900;letter-spacing:2px}
.math-mode{display:flex;flex-direction:column;flex:1}.mcq-mode{display:flex;flex-direction:column;flex:1;gap:10px}
.inp{margin:8px;padding:12px;border:3px solid #eee;border-radius:12px;text-align:center;font-size:24px;font-weight:800;width:calc(100% - 16px);outline:none;transition:.2s;background:rgba(0,0,0,0.05)}
.inp:focus{border-color:#ccc}.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:#fafafa;flex:0 0 auto;border-radius:12px}
.k-btn{padding:12px 0;background:#fff;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;-webkit-user-select:none;color:#333;border:1px solid #eee}
.k-btn:active{transform:scale(0.95);background:#f0f0f0}
.mcq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.mcq-btn{background:#fff;border:2px solid #eee;border-radius:14px;font-weight:700;font-size:15px;color:#444;cursor:pointer;transition:all .2s;padding:5px;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)}
.mcq-btn:hover{border-color:#ccc;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:#fff;border-bottom:1px solid #f0f0f0;height:80px;z-index:2}
.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:13px;color:#888;font-weight:700;margin-bottom:4px;text-transform:uppercase}
.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:#eef2f5;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:flex-start;overflow:hidden;padding:20px 10px 10px 10px;gap:15px}
.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:20px;color:#aaa;text-transform:uppercase;margin-bottom:0;line-height:1;font-family:'Inter',sans-serif;font-weight:800}
.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%;max-width:100%;height:140px;background:#1a1a1a;border:4px solid #333;border-radius:12px;position:relative;box-shadow:0 4px 15px rgba(0,0,0,0.2);display:flex;align-items:flex-end;padding:10px 10px 10px 30px;overflow:hidden}
.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}
.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 cubic-bezier(.34,1.56,.64,1) forwards;opacity:0}
.cnt-txt.go{color:#fff;text-shadow:0 0 50px var(--green);animation:goFlash 1s ease-out forwards}
@keyframes cntPop{0%{opacity:0;transform:scale(0.5)}10%{opacity:1}50%{transform:scale(1.2)}100%{opacity:0;transform:scale(1.4)}}
@keyframes goFlash{0%{opacity:0;transform:scale(0.2)}10%{opacity:1}20%{opacity:1;transform:scale(1.3)}40%{transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.win-ovl{position:absolute;inset:0;background:rgba(255,255,255,0.9);backdrop-filter:blur(5px);z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;color:#212121;border-radius:20px}
.win-box{text-align:center;animation:winEnt .6s cubic-bezier(.17,.84,.44,1) both;width:min(400px,90%)}
@keyframes winEnt{from{opacity:0;transform:scale(0.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.trophy{font-size:80px;margin-bottom:15px;background:linear-gradient(45deg,#FFD700,#FFA500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(255,215,0,0.5));animation:flt 3s ease-in-out infinite}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.confetti{position:absolute;width:10px;height:10px;animation:fall 3s linear forwards;border-radius:50%}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}
.out-overlay{position:absolute;inset:0;background:rgba(255,255,255,0.85);display:none;align-items:center;justify-content:center;flex-direction:column;z-index:5;font-weight:900;font-size:40px;color:var(--red-t);text-transform:uppercase;backdrop-filter:blur(4px)}
.out-overlay.show{display:flex;animation:fadeIn .3s}
.stats-ovl{position:absolute;inset:0;background:#f5f7fa;z-index:20;display:none;flex-direction:column;padding:15px;overflow:hidden;border-radius:20px}
.stats-head{text-align:center;font-size:22px;font-weight:900;color:var(--blue-d);margin-bottom:10px;text-transform:uppercase;flex-shrink:0}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:800px;margin:auto;overflow-y:auto;align-content:center;padding:5px}
.stat-card{background:#fff;padding:12px;border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:5px}
.stat-card.blue{border-top:6px solid var(--blue-t)}.stat-card.red{border-top:6px solid var(--red-t)}
.sc-head{font-weight:800;font-size:16px;text-align:center;margin-bottom:5px;display:flex;align-items:center;justify-content:center;gap:6px}
.st-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #eee;font-size:12px;font-weight:600;color:#666}.st-row:last-child{border:none}
.st-val{font-weight:800;color:#333;font-size:14px}.st-green{color:var(--green)}.st-red{color:var(--red-t)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.lang-pop{position:absolute;top:100%;right:0;background:#fff;padding:5px;border-radius:10px;box-shadow:var(--shadow);display:none;margin-top:5px;min-width:120px;animation:fadeIn .2s}
.lang-pop.show{display:block}
.l-opt{display:flex;align-items:center;gap:10px;padding:10px;width:100%;border-radius:8px;font-weight:600;font-size:14px}
.l-opt:hover{background:#f0f3f7}
.win-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:100%}
.win-btns button{flex:1;min-width:150px;max-width:220px;height:50px;border-radius:12px;font-weight:800;font-size:16px;box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:.2s}
.win-btns button:active{transform:scale(0.98)}
.ops-row{display:flex;justify-content:center;gap:10px;margin-bottom:15px}
.op-btn{width:50px;height:50px;border-radius:12px;background:#f5f5f5;color:#555;font-size:20px;display:grid;place-items:center;transition:all .2s;box-shadow:0 2px 5px rgba(0,0,0,0.05)}
.op-btn:hover{background:#eee;transform:translateY(-2px)}
.op-btn.active{background:var(--blue);color:#fff;box-shadow:0 4px 10px rgba(0,136,204,0.3)}
.creator-credit{position:absolute;bottom:15%;text-align:center;color:rgba(255,255,255,0.7);font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;animation:slideUpFade .5s ease-out}
@keyframes slideUpFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}


/* --- RESPONSIVE CSS GRID OVERRIDES --- */

/* Mobile Portrait: Stacked Layout */
@media (max-width: 768px) and (orientation: portrait) {
    body {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        display: block;
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .board {
        height: auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "arena arena"
            "left right";
        gap: 15px;
        padding: 10px;
    }
    .panel { min-height: 400px; }
    .arena { margin-bottom: 5px; min-height: auto; }
    
    /* Internal element scaling for mobile */
    .prob-box { font-size: 26px; padding: 10px; }
    .prob-box.math { font-size: 34px; }
    .keys { gap: 8px; }
    .k-btn { padding: 12px 0; font-size: 18px; }
}

/* Mobile Landscape: Horizontal Layout (condensed) */
@media (max-width: 900px) and (orientation: landscape) {
    body {
        padding-top: 45px;
        padding-bottom: 35px;
        height: 100vh;
        overflow: hidden;
    }
    .board {
        gap: 10px;
        padding: 5px;
    }
    
    /* Condense internal elements */
    .panel-body { padding: 5px; justify-content: center; }
    .p-head { padding: 5px 10px; font-size: 12px; }
    .prob-box { min-height: 40px; margin-bottom: 5px; font-size: 16px; padding: 5px; }
    .prob-box.math { font-size: 24px; }
    .keys { gap: 4px; padding: 4px; }
    .k-btn { padding: 5px 0; font-size: 14px; }
    .inp { margin: 4px; padding: 4px; font-size: 14px; }
    
    .arena { overflow-y: auto; }
    .top-score { height: 50px; padding: 5px 10px; }
    .ts-score { font-size: 20px; }
    .scoreboard-tv { margin: 0 auto; transform: scale(0.9); transform-origin: top center; }
    .graph-con { display: none; }
}
.gc-img-epl {
    background: url("media/epl-poster.jpg") center/cover no-repeat;
}

.gc-img-tow {
    background: url("media/tow-poster.jpg") center/cover no-repeat;
}

/* icon hide kar do */
.gc-img-box .gc-icon {
    display: none;
}