/* font loaded via in — @import removed to prevent double download */
/* Defer non-critical background animations until after page load */
@media (prefers-reduced-motion: reduce) {
.gd-aurora-blob, #gd-bg-grid, .gd-scanline { animation: none !important; }
}
/* FIX: freeze background GPU animations while player is in the game iframe */
body.game-active .gd-aurora-blob,
body.game-active #gd-bg-grid,
body.game-active .gd-scanline,
body.game-active .gd-particles-css { animation: none !important; visibility: hidden; will-change: auto; }
body.game-active #gd-particles { display: none !important; }
/* Additional: freeze cursor glow + floating btns when game active */
body.game-active #gd-cursor-glow { display: none !important; }
body.game-active #mood-fab { display: none !important; }
/* ── Sidebars solid when BG image is active (base.html handles navbar/catbar) ── */
body.has-bg-image .side-col {
background:var(--bg-2) !important;
border-radius:var(--radius);
}
/* Soften decorative layers when BG image is present */
body.has-bg-image #gd-aurora { opacity:.2 !important; }
body.has-bg-image #gd-bg-grid { opacity:.1 !important; }
/* ═══════════════════════ TOKENS — game_detail only ═══════════════════════
NOTE: Core colors (--bg, --text, --accent etc) come from base.html :root.
Only game-detail-specific tokens are defined here.
═══════════════════════════════════════════════════════════════════════ */
:root{
--font-head:'Fredoka One',cursive;--font-brand:'Fredoka One',cursive;--font-body:'Nunito',sans-serif;
--r-lg:20px;--r-md:14px;--r-sm:10px;
--glow-1:rgba(255,85,0,0.12);--glow-2:rgba(68,136,255,0.08);
--grid-color:rgba(255,85,0,0.035);
}
/* Dark theme — aurora/grid only used in dark mode */
[data-theme="dark"]{
--glow-1:rgba(255,85,0,0.12);--glow-2:rgba(68,136,255,0.08);
--grid-color:rgba(255,85,0,0.035);
}
[data-theme="teal"]{--glow-1:rgba(45,212,191,0.15);--glow-2:rgba(45,212,191,0.08);--grid-color:rgba(45,212,191,0.04);}
[data-theme="purple"]{--glow-1:rgba(192,132,252,0.15);--glow-2:rgba(192,132,252,0.08);--grid-color:rgba(192,132,252,0.04);}
[data-theme="ocean"]{--glow-1:rgba(56,217,245,0.15);--glow-2:rgba(56,217,245,0.08);--grid-color:rgba(56,217,245,0.04);}
[data-theme="sunset"]{--glow-1:rgba(255,107,53,0.15);--glow-2:rgba(255,107,53,0.08);--grid-color:rgba(255,107,53,0.04);}
/* Light mode — game detail specific adjustments only */
[data-theme="light"] .gd-nav{background:rgba(240,242,250,.94)!important;}
[data-theme="light"] .game-stage{box-shadow:0 12px 40px rgba(80,80,200,.15)!important;}
[data-theme="light"] #gd-aurora{opacity:.4;}
[data-theme="light"] #gd-bg-grid{opacity:.3;}
[data-theme="light"] #gd-particles{opacity:.25;}
[data-theme="light"] .comment-input{background:#f5f7ff!important;color:#0a0a20!important;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh;transition:background 1s ease,color .35s;}
/* ═══════════ MULTI-LAYER BACKGROUND SYSTEM — STATIC (animations disabled to free GPU for game) ═══════════ */
#gd-bg-grid{position:fixed;inset:0;z-index:1;pointer-events:none;contain:strict;
background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);
background-size:44px 44px;
mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 30%,transparent 100%);
-webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 30%,transparent 100%);
opacity:.85;
}
#gd-aurora{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;contain:strict;}
/* When BG image active, soften decorative layers */
body.has-bg-image #gd-aurora { opacity:.3; }
body.has-bg-image #gd-bg-grid { opacity:.2; }
.gd-aurora-blob{position:absolute;border-radius:50%;filter:blur(90px);}
.gd-aurora-1{width:80vw;height:80vw;top:-35%;left:-25%;background:radial-gradient(circle,var(--glow-1) 0%,transparent 65%);animation:aurora-drift-1 18s ease-in-out infinite alternate;}
@keyframes aurora-drift-1{0%{transform:translate(0,0) scale(1);}50%{transform:translate(5vw,3vh) scale(1.08);}100%{transform:translate(-3vw,6vh) scale(.95);}}
.gd-aurora-2{width:60vw;height:60vw;bottom:-20%;right:-15%;background:radial-gradient(circle,var(--glow-2) 0%,transparent 65%);animation:aurora-drift-2 22s ease-in-out infinite alternate;}
@keyframes aurora-drift-2{0%{transform:translate(0,0) scale(1);}50%{transform:translate(-4vw,-4vh) scale(1.1);}100%{transform:translate(5vw,2vh) scale(.9);}}
.gd-aurora-3{display:none;/* removed entirely — third blob unnecessary */}
#gd-particles{display:none;/* canvas particle system removed — major GPU drain */}
.gd-scanline{display:none;/* scanline overlay removed — causes full-screen repaint every frame */}
[data-theme="light"] .gd-scanline{opacity:.15;}
[data-theme="light"] #gd-bg-grid{opacity:.4;}
#gd-cursor-glow{position:fixed;pointer-events:none;z-index:9999;width:280px;height:280px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--glow-1) 0%,transparent 70%);transition:opacity .3s;opacity:0;}
/* badge-glow animation removed for performance */
/* ═══════════ GAME SCREENSHOT STRIP ═══════════ */
.game-screenshots{
display:flex;gap:10px;margin-top:16px;overflow-x:auto;padding-bottom:8px;
scrollbar-width:thin;scrollbar-color:var(--surface-2) transparent;
}
.game-screenshots::-webkit-scrollbar{height:3px;}
.game-screenshots::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:3px;}
.gs-thumb{width:140px;height:88px;border-radius:11px;object-fit:cover;flex-shrink:0;border:2px solid var(--border);transition:border-color .2s,transform .2s,box-shadow .2s;cursor:pointer;}
.gs-thumb:hover{border-color:var(--accent);transform:scale(1.05);box-shadow:0 6px 18px var(--accent-glow);}
.gs-title{font-size:.7rem;font-weight:800;color:var(--text-3);margin-top:8px;margin-bottom:4px;text-transform:uppercase;letter-spacing:.08em;}
/* ═══════════ COMMENTS SYSTEM ═══════════ */
.comments-panel{
background:var(--bg-2);border:1px solid var(--border);
border-radius:var(--r-lg);padding:20px;margin-top:0;
}
.comments-title{font-family:var(--font-head);font-size:1.1rem;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.comment-form{display:flex;gap:9px;margin-bottom:18px;align-items:flex-start;}
.comment-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;}
.comment-input-wrap{flex:1;}
.comment-input{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:10px 14px;color:var(--text);font-family:var(--font-body);font-size:.84rem;font-weight:700;outline:none;resize:vertical;min-height:64px;transition:border-color .25s;}
.comment-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.comment-submit{padding:8px 18px;border-radius:50px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;font-weight:800;font-size:.79rem;cursor:pointer;margin-top:7px;transition:all .22s;font-family:var(--font-body);}
.comment-submit:hover{transform:translateY(-2px);box-shadow:0 5px 14px var(--accent-glow);}
.comment-item{display:flex;gap:9px;padding:12px 0;border-bottom:1px solid var(--border);animation:cmt-in .35s ease;}
@keyframes cmt-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.comment-item:last-child{border-bottom:none;}
.ci-avatar{width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.ci-body{flex:1;}
.ci-meta{font-size:.7rem;font-weight:800;color:var(--text-3);margin-bottom:3px;display:flex;gap:8px;align-items:center;}
.ci-name{color:var(--accent);}
.ci-text{color:var(--text-2);font-size:.82rem;font-weight:600;line-height:1.6;}
.ci-actions{display:flex;gap:10px;margin-top:5px;}
.ci-like-btn{background:none;border:none;cursor:pointer;font-size:.72rem;font-weight:800;color:var(--text-3);transition:color .2s;padding:0;}
.ci-like-btn:hover{color:var(--accent);}
/* ═══════════ PLAY COUNT LIVE BADGE ═══════════ */
.play-count-bar{
display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;
background:var(--surface);border-radius:var(--r-sm);border:1px solid var(--border);
}
.pcb-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;/* pulse animation removed */}
.pcb-text{font-size:.78rem;font-weight:800;color:var(--text-2);}
.pcb-count{color:var(--green);font-weight:900;}
/* ══════════════════════════════════════════════
AI COACH PANEL
══════════════════════════════════════════════ */
.ai-coach-panel{
margin-top:12px;padding:16px;border-radius:var(--r-md);
background:linear-gradient(135deg,#0a1a0a,#0d260d);
border:1.5px solid rgba(0,230,118,.3);
display:none;animation:panel-in .5s ease;
}
.ai-coach-panel.visible{display:block;}
@keyframes panel-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.acp-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.acp-icon{font-size:1.3rem;animation:pulse-icon 2s ease infinite;}
@keyframes pulse-icon{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.acp-title{font-family:var(--font-head);font-size:1rem;color:var(--green);}
.acp-badge{padding:2px 8px;border-radius:50px;background:rgba(0,230,118,.15);color:var(--green);font-size:.6rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(0,230,118,.3);}
.acp-tips{display:flex;flex-direction:column;gap:8px;}
.acp-tip{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;background:rgba(0,230,118,.05);border-radius:var(--r-sm);border-left:2px solid rgba(0,230,118,.4);}
.acp-tip-num{color:var(--green);font-weight:900;font-size:.7rem;flex-shrink:0;margin-top:1px;}
.acp-tip-text{color:var(--text-2);font-size:.8rem;font-weight:700;line-height:1.5;}
.acp-loading{color:var(--text-3);font-size:.8rem;font-weight:700;text-align:center;padding:10px;}
/* ══════════════════════════════════════════════
AI COMMENTARY TICKER
══════════════════════════════════════════════ */
.commentary-bar{display:none!important;/* removed — AI polling wastes CPU while game runs */}
/* ══════════════════════════════════════════════
DAILY CHALLENGE PANEL
══════════════════════════════════════════════ */
.challenge-panel{
margin-top:12px;padding:16px;border-radius:var(--r-md);
background:linear-gradient(135deg,#1a0e00,#2a1800);
border:1.5px solid rgba(255,193,7,.3);
}
.cp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cp-title{font-size:.66rem;font-weight:900;color:#ffc107;text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:6px;}
.cp-diff{padding:2px 8px;border-radius:50px;font-size:.58rem;font-weight:900;text-transform:uppercase;}
.cp-diff.easy{background:rgba(0,230,118,.2);color:var(--green);}
.cp-diff.medium{background:rgba(255,193,7,.2);color:#ffc107;}
.cp-diff.hard{background:rgba(255,34,0,.2);color:#ff2200;}
.cp-text{font-size:.84rem;font-weight:800;color:#fff;margin-bottom:8px;line-height:1.5;}
.cp-tip{font-size:.74rem;font-weight:700;color:rgba(255,193,7,.7);margin-bottom:12px;line-height:1.4;}
.cp-rewards{display:flex;gap:8px;margin-bottom:12px;}
.cp-reward{padding:5px 10px;border-radius:50px;background:rgba(255,193,7,.1);color:#ffc107;font-size:.72rem;font-weight:800;border:1px solid rgba(255,193,7,.3);}
.cp-complete-btn{width:100%;padding:10px;border-radius:var(--r-sm);background:linear-gradient(135deg,#ffc107,#ff8800);border:none;color:#000;font-weight:900;font-size:.82rem;cursor:pointer;font-family:var(--font-body);transition:all .22s;}
.cp-complete-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,193,7,.4);}
.cp-complete-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.cp-done{text-align:center;padding:10px;color:var(--green);font-weight:900;font-size:.84rem;}
/* ══════════════════════════════════════════════
SPEED RUN PANEL
══════════════════════════════════════════════ */
.speedrun-panel{
margin-top:12px;padding:16px;border-radius:var(--r-md);
background:linear-gradient(135deg,#00081a,#000d2a);
border:1.5px solid rgba(68,136,255,.3);
}
.sr-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.sr-title{font-size:.66rem;font-weight:900;color:#4488ff;text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:6px;}
.sr-timer-display{font-size:1.8rem;font-weight:900;color:#4488ff;font-variant-numeric:tabular-nums;letter-spacing:.04em;text-align:center;margin:10px 0;font-family:monospace;}
.sr-btns{display:flex;gap:8px;margin-bottom:12px;}
.sr-btn{flex:1;padding:9px 12px;border-radius:var(--r-sm);border:1.5px solid rgba(68,136,255,.4);background:rgba(68,136,255,.08);color:#4488ff;font-family:var(--font-body);font-weight:800;font-size:.78rem;cursor:pointer;transition:all .2s;}
.sr-btn:hover{border-color:#4488ff;background:rgba(68,136,255,.15);}
.sr-btn.primary{background:linear-gradient(135deg,#1a3a80,#2244aa);border-color:#4488ff;color:#fff;}
.sr-btn.primary:hover{box-shadow:0 4px 14px rgba(68,136,255,.4);}
.sr-leaderboard{margin-top:10px;}
.sr-lb-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(68,136,255,.1);}
.sr-lb-row:last-child{border-bottom:none;}
.sr-lb-rank{width:22px;font-size:.7rem;font-weight:900;color:var(--text-3);}
.sr-lb-rank.gold{color:#ffd700;}
.sr-lb-rank.silver{color:#c0c0c0;}
.sr-lb-rank.bronze{color:#cd7f32;}
.sr-lb-name{flex:1;font-size:.78rem;font-weight:800;color:var(--text-2);}
.sr-lb-time{font-size:.78rem;font-weight:900;color:#4488ff;font-variant-numeric:tabular-nums;font-family:monospace;}
.sr-lb-mine{color:var(--accent)!important;}
/* ══════════════════════════════════════════════
SCORE LEADERBOARD PANEL
══════════════════════════════════════════════ */
.score-lb-panel{
margin-top:12px;padding:16px;border-radius:var(--r-md);
background:linear-gradient(135deg,#0a0030,#12004a);
border:1.5px solid rgba(180,77,255,.3);
}
.slb-title{font-size:.66rem;font-weight:900;color:#b44dff;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.slb-submit{display:flex;gap:8px;margin-bottom:12px;}
.slb-score-input{flex:1;background:rgba(180,77,255,.08);border:1.5px solid rgba(180,77,255,.3);border-radius:var(--r-sm);padding:9px 12px;color:var(--text);font-family:var(--font-body);font-weight:800;font-size:.82rem;outline:none;transition:border-color .2s;}
.slb-score-input:focus{border-color:#b44dff;}
.slb-submit-btn{padding:9px 16px;border-radius:var(--r-sm);background:linear-gradient(135deg,#b44dff,#8822cc);border:none;color:#fff;font-weight:800;font-size:.78rem;cursor:pointer;font-family:var(--font-body);transition:all .2s;white-space:nowrap;}
.slb-submit-btn:hover{box-shadow:0 4px 14px rgba(180,77,255,.4);transform:translateY(-1px);}
.slb-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(180,77,255,.08);}
.slb-row:last-child{border-bottom:none;}
.slb-rank{width:22px;font-size:.7rem;font-weight:900;color:var(--text-3);}
.slb-name{flex:1;font-size:.77rem;font-weight:800;color:var(--text-2);}
.slb-score{font-size:.77rem;font-weight:900;color:#b44dff;}
.slb-mine .slb-name,.slb-mine .slb-score{color:var(--accent)!important;}
/* ══════════════════════════════════════════════
DAILY QUESTS PANEL (sidebar)
══════════════════════════════════════════════ */
.quests-panel{
background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);
padding:18px;
}
.qp-title{font-family:var(--font-head);font-size:1.05rem;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.quest-item{padding:11px 13px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);margin-bottom:8px;transition:border-color .2s;}
.quest-item.done{border-color:var(--green);opacity:.8;}
.qi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.qi-desc{font-size:.78rem;font-weight:800;color:var(--text-2);flex:1;}
.qi-reward{font-size:.68rem;font-weight:800;color:#ffc107;}
.qi-bar-wrap{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-bottom:6px;}
.qi-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s ease;}
.quest-item.done .qi-bar{background:linear-gradient(90deg,var(--green),#00ff9d);}
.qi-claim{width:100%;padding:6px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#fff;font-weight:800;font-size:.72rem;cursor:pointer;font-family:var(--font-body);}
.qi-claimed{text-align:center;font-size:.7rem;font-weight:800;color:var(--green);}
/* ══════════════════════════════════════════════
PLAYER PROGRESS BAR (sidebar)
══════════════════════════════════════════════ */
.player-progress-bar{
padding:14px;border-radius:var(--r-md);
background:linear-gradient(135deg,var(--surface),var(--surface-2));
border:1px solid var(--border);margin-bottom:10px;
}
.ppb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.ppb-name{font-size:.84rem;font-weight:900;color:var(--text);}
.ppb-coins{font-size:.8rem;font-weight:800;color:#ffc107;}
.ppb-level{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.ppb-lv{font-size:.66rem;font-weight:900;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;}
.ppb-title-badge{font-size:.66rem;font-weight:800;color:var(--text-3);}
.ppb-bar-wrap{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-bottom:4px;}
.ppb-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .6s ease;}
.ppb-pct{font-size:.62rem;font-weight:700;color:var(--text-3);}
.ppb-streak{display:flex;align-items:center;gap:4px;font-size:.7rem;font-weight:800;color:var(--text-2);margin-top:6px;}
/* ══════════════════════════════════════════════
TOURNAMENT PANEL (sidebar)
══════════════════════════════════════════════ */
.tournament-panel{
background:linear-gradient(135deg,#0a0a00,#1a1500);
border:1.5px solid rgba(255,193,7,.3);border-radius:var(--r-lg);padding:16px;
}
.tp-title{font-size:.66rem;font-weight:900;color:#ffd700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.tp-name{font-size:.84rem;font-weight:800;color:#fff;margin-bottom:6px;}
.tp-meta{font-size:.7rem;font-weight:700;color:rgba(255,215,0,.6);margin-bottom:12px;}
.tp-entry{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid rgba(255,193,7,.08);}
.tp-entry:last-child{border-bottom:none;}
.tp-rank{width:20px;font-size:.68rem;font-weight:900;color:rgba(255,215,0,.5);}
.tp-name-text{flex:1;font-size:.76rem;font-weight:800;color:var(--text-2);}
.tp-score{font-size:.76rem;font-weight:900;color:#ffd700;}
.tp-register-btn{width:100%;margin-top:10px;padding:10px;border-radius:var(--r-sm);background:linear-gradient(135deg,#ffd700,#ff8800);border:none;color:#000;font-weight:900;font-size:.8rem;cursor:pointer;font-family:var(--font-body);transition:all .2s;}
.tp-register-btn:hover{box-shadow:0 4px 14px rgba(255,193,7,.5);transform:translateY(-1px);}
/* ══════════════════════════════════════════════
DIFFICULTY SELECTOR MODAL
══════════════════════════════════════════════ */
#diff-modal{
position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,.88);backdrop-filter:blur(16px);
display:flex;align-items:center;justify-content:center;padding:20px;
}
#diff-modal.hidden{display:none;}
.diff-box{
background:var(--bg-2);border:1.5px solid var(--border);border-radius:28px;
padding:36px 30px;max-width:400px;width:100%;text-align:center;
box-shadow:0 32px 90px rgba(0,0,0,.7);animation:diff-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes diff-pop{from{transform:scale(.7);opacity:0;}to{transform:scale(1);opacity:1;}}
.diff-title{font-family:var(--font-head);font-size:1.7rem;color:var(--text);margin-bottom:6px;}
.diff-sub{color:var(--text-2);font-size:.84rem;font-weight:700;margin-bottom:22px;line-height:1.6;}
.diff-options{display:flex;gap:10px;margin-bottom:20px;flex-direction:column;}
.diff-opt{padding:14px 20px;border-radius:16px;border:2px solid var(--border);background:var(--surface);cursor:pointer;transition:all .22s;text-align:left;display:flex;align-items:center;gap:14px;font-family:var(--font-body);}
.diff-opt:hover{border-color:var(--accent);transform:translateX(4px);}
.diff-opt.selected{border-color:var(--accent);background:rgba(255,85,0,.1);}
.diff-opt-icon{font-size:1.6rem;flex-shrink:0;}
.diff-opt-info{}
.diff-opt-name{font-weight:900;font-size:.92rem;color:var(--text);}
.diff-opt-desc{font-size:.72rem;font-weight:700;color:var(--text-2);margin-top:2px;}
.diff-start-btn{width:100%;padding:14px;border-radius:50px;background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#fff;font-weight:900;font-size:.92rem;cursor:pointer;font-family:var(--font-body);box-shadow:0 6px 20px var(--accent-glow);transition:all .22s;}
.diff-start-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--accent-glow);}
/* ══════════════════════════════════════════════
CLAN PANEL (sidebar)
══════════════════════════════════════════════ */
.clan-panel{
background:linear-gradient(135deg,#0a001a,#18003a);
border:1.5px solid rgba(180,77,255,.3);border-radius:var(--r-lg);padding:16px;
}
.clan-title{font-size:.66rem;font-weight:900;color:#b44dff;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.clan-name{font-size:.92rem;font-weight:900;color:#fff;margin-bottom:3px;}
.clan-meta{font-size:.72rem;font-weight:700;color:rgba(180,77,255,.7);margin-bottom:10px;}
.clan-btn{width:100%;padding:9px;border-radius:var(--r-sm);background:rgba(180,77,255,.15);border:1.5px solid rgba(180,77,255,.4);color:#b44dff;font-weight:800;font-size:.78rem;cursor:pointer;font-family:var(--font-body);transition:all .2s;}
.clan-btn:hover{background:rgba(180,77,255,.25);border-color:#b44dff;}
/* ══════════════════════════════════════════════
MOOD PICKER FLOATING BTN
══════════════════════════════════════════════ */
#mood-fab{
position:fixed;bottom:90px;left:16px;z-index:800;
width:48px;height:48px;border-radius:50%;
background:linear-gradient(135deg,var(--accent),var(--accent-2));
border:none;cursor:pointer;font-size:1.3rem;
box-shadow:0 4px 18px var(--accent-glow);
transition:all .3s;
display:flex;align-items:center;justify-content:center;
}
#mood-fab:hover{transform:scale(1.12) rotate(5deg);box-shadow:0 8px 24px var(--accent-glow);}
.mood-modal{
position:fixed;inset:0;z-index:9989;background:rgba(0,0,0,.88);backdrop-filter:blur(16px);
display:flex;align-items:center;justify-content:center;padding:20px;
}
.mood-modal.hidden{display:none;}
.mood-box{
background:var(--bg-2);border:1.5px solid var(--border);border-radius:28px;
padding:32px 28px;max-width:440px;width:100%;
box-shadow:0 32px 90px rgba(0,0,0,.7);animation:diff-pop .5s cubic-bezier(.34,1.56,.64,1);
}
.mood-title{font-family:var(--font-head);font-size:1.5rem;color:var(--text);margin-bottom:6px;text-align:center;}
.mood-sub{color:var(--text-2);font-size:.82rem;font-weight:700;margin-bottom:18px;text-align:center;line-height:1.5;}
.mood-options{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px;}
.mood-opt{padding:10px 16px;border-radius:50px;border:1.5px solid var(--border);background:var(--surface);color:var(--text-2);font-weight:800;font-size:.8rem;cursor:pointer;transition:all .2s;font-family:var(--font-body);}
.mood-opt:hover,.mood-opt.sel{border-color:var(--accent);color:var(--accent);background:rgba(255,85,0,.1);}
.mood-picks{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.mood-pick{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;border:1px solid var(--border);background:var(--surface);text-decoration:none;transition:all .2s;}
.mood-pick:hover{border-color:var(--accent);transform:translateX(4px);}
.mood-pick-emoji{font-size:1.5rem;flex-shrink:0;}
.mood-pick-info{flex:1;}
.mood-pick-title{font-size:.84rem;font-weight:800;color:var(--text);}
.mood-pick-reason{font-size:.7rem;font-weight:700;color:var(--text-2);margin-top:2px;}
.mood-pick-play{font-size:.8rem;color:var(--accent);font-weight:900;}
.mood-loading{text-align:center;padding:20px;color:var(--text-3);font-weight:700;}
.mood-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--text-3);}
/* ══════════════════════════════════════════════
STREAK CHECKIN WIDGET
══════════════════════════════════════════════ */
.streak-widget{
display:flex;align-items:center;gap:10px;padding:12px 14px;
background:linear-gradient(135deg,#1a0800,#2a1200);
border:1.5px solid rgba(255,150,0,.3);border-radius:var(--r-md);margin-top:10px;
}
.sw-fire{font-size:1.4rem;}
@keyframes sw-bounce{from{transform:scale(1);}to{transform:scale(1);}}/* disabled */
.acp-icon{font-size:1.3rem;}
@keyframes pulse-icon{0%,100%{transform:scale(1);}50%{transform:scale(1);}}/* disabled */
.sw-info{flex:1;}
.sw-streak{font-size:.9rem;font-weight:900;color:#ff9500;}
.sw-sub{font-size:.7rem;font-weight:700;color:var(--text-3);margin-top:1px;}
.sw-btn{padding:7px 14px;border-radius:50px;background:linear-gradient(135deg,#ff9500,#ff5500);border:none;color:#fff;font-weight:800;font-size:.72rem;cursor:pointer;font-family:var(--font-body);white-space:nowrap;}
.sw-btn:disabled{opacity:.5;cursor:not-allowed;}
/* ═══════════════════════ SPLASH ═══════════════════════ */
#azrs-splash{
position:fixed;inset:0;z-index:99999;
display:flex;flex-direction:column;align-items:center;justify-content:center;
background:#000;
transition:opacity .5s ease, visibility .5s ease;
}
#azrs-splash.done{opacity:0;visibility:hidden;pointer-events:none;}
.splash-bg-glow{
position:absolute;inset:0;
background:radial-gradient(ellipse 80% 60% at 50% 60%,#2a0800 0%,#000 70%);
}
.splash-sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.sp{
position:absolute;border-radius:50%;
width:var(--sz,3px);height:var(--sz,3px);
background:var(--accent);
animation:sp-fly var(--d,2s) var(--dl,0s) ease-out infinite;
opacity:0;
}
@keyframes sp-fly{
0%{transform:translate(0,100vh) scale(0);opacity:0;}
10%{opacity:.9;}
80%{opacity:.5;}
100%{transform:translate(var(--dx,10px),-120px) scale(1.8);opacity:0;}
}
.splash-inner{position:relative;z-index:2;text-align:center;user-select:none;}
.splash-letters{display:flex;justify-content:center;align-items:center;gap:2px;margin-bottom:4px;}
.sl{
font-family:var(--font-brand);
font-size:clamp(3.5rem,20vw,8rem);
color:#fff;display:inline-block;
opacity:0;transform:translateY(-40px) scale(.7) rotate(-6deg);
animation:sl-land .25s cubic-bezier(.34,1.56,.64,1) forwards;
text-shadow:0 0 40px currentColor;
line-height:1;
}
.sl-a{color:#ff4400;animation-delay:.05s;}
.sl-z{color:#ff6600;animation-delay:.1s;}
.sl-r{color:#ff8800;animation-delay:.15s;}
.sl-s{color:#ffaa00;animation-delay:.2s;}
@keyframes sl-land{to{opacity:1;transform:translateY(0) scale(1) rotate(0);}}
.splash-word{
font-family:var(--font-head);
font-size:clamp(1rem,5vw,1.6rem);
letter-spacing:.3em;text-transform:uppercase;
color:rgba(255,255,255,.6);
opacity:0;animation:s-up .25s ease forwards .3s;
}
.splash-tag{
font-family:var(--font-body);font-weight:900;
font-size:clamp(.65rem,2.5vw,.85rem);
color:var(--accent);letter-spacing:.08em;
margin-top:5px;
opacity:0;animation:s-up .25s ease forwards .38s;
}
@keyframes s-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.splash-prog-wrap{
width:min(240px,65vw);height:4px;
background:rgba(255,255,255,.1);border-radius:4px;
margin:22px auto 0;overflow:hidden;
opacity:0;animation:s-up .2s ease forwards .45s;
}
.splash-prog{
height:100%;border-radius:4px;
background:linear-gradient(90deg,var(--accent),var(--accent-2));
width:0;animation:prog-go .5s ease forwards .48s;
}
@keyframes prog-go{to{width:100%;}}
.splash-loading{
font-family:var(--font-body);font-weight:800;
font-size:clamp(.68rem,2vw,.8rem);
color:rgba(255,255,255,.35);margin-top:10px;
max-width:min(280px,80vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
opacity:0;animation:s-up .2s ease forwards .5s;
}
/* ═══════════════════════ NAV ═══════════════════════ */
.gd-nav{
position:sticky;top:0;z-index:900;height:var(--nav-h);
background:rgba(8,8,15,.92);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
border-bottom:1px solid rgba(255,85,0,.12);
display:flex;align-items:center;padding:0 14px;gap:10px;
box-shadow:0 2px 20px rgba(0,0,0,.4);
}
.gd-nav::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,85,0,.3),transparent);}
[data-theme="light"] .gd-nav{background:rgba(240,242,250,.94);}
.nav-logo{font-family:var(--font-head);font-size:1.55rem;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;}
.nav-logo .ba{color:var(--accent);}
.nav-logo .bz{color:var(--accent-2);}
.nav-bread{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:800;color:var(--text-3);flex:1;min-width:0;overflow:hidden;}
.nav-bread a{color:var(--text-3);text-decoration:none;transition:color .2s;white-space:nowrap;}
.nav-bread a:hover{color:var(--accent);}
.nav-bread .sep{opacity:.4;flex-shrink:0;}
.nav-bread .cur{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:7px;flex-shrink:0;}
.nav-btn{width:36px;height:36px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:all .22s;color:var(--text);text-decoration:none;}
.nav-btn:hover{border-color:var(--accent);transform:scale(1.1);}
/* ═══════════════════════ LAYOUT ═══════════════════════ */
.gd-wrap{
max-width:1680px;margin:0 auto;
padding:0 10px 80px;
display:grid;
grid-template-columns:minmax(0,1fr) 270px; /* minmax(0) prevents iframe overflow */
gap:12px;
transition:grid-template-columns 0.28s cubic-bezier(0.4,0,0.2,1);
align-items:start;
}
/* Sidebar collapsed state */
.gd-wrap.sidebar-collapsed{
grid-template-columns:1fr 0px;
}
.gd-wrap.sidebar-collapsed .gd-sidebar{
width:0;overflow:hidden;padding:0;border:none;opacity:0;pointer-events:none;
}
/* ═══════════════════════ GAME STAGE ═══════════════════════ */
.game-stage{
background:#000;
overflow:hidden;
position:relative;
width:100%;
/* Taller default so game is visible without scrolling */
height:clamp(460px,62vh,780px);
min-height:460px;
will-change:auto;
contain:layout style;
}
/* Full screen — fill entire viewport */
.game-stage-wrap:-webkit-full-screen .game-stage,
.game-stage-wrap:fullscreen .game-stage,
:-webkit-full-screen .game-stage,
:fullscreen .game-stage{
height:100vh !important;
min-height:100vh !important;
border-radius:0 !important;
}
:-webkit-full-screen { width:100vw !important; height:100vh !important; }
:fullscreen { width:100vw !important; height:100vh !important; }
.game-stage iframe{
position:absolute;inset:0;
width:100%;height:100%;
border:none;display:block;
/* Prevent iframe from creating scrollbars or overflowing its container */
overflow:hidden;
/* Ensure touch events pass through correctly on mobile */
touch-action:manipulation;
}
/* ── PORTRAIT MODE: for games taller than they are wide ── */
.game-stage-wrap.portrait-mode .game-stage{
/* Taller stage, narrowed to match a 9:16 ratio */
max-width:420px;
margin:0 auto;
height:clamp(500px,72vh,820px) !important;
}
@media(max-width:768px){
.game-stage-wrap.portrait-mode .game-stage{
max-width:100%;
height:78vh !important;
}
}
.fs-hint{
position:absolute;top:10px;right:10px;
background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
border-radius:8px;padding:5px 11px;
font-size:.67rem;font-weight:800;color:rgba(255,255,255,.65);
pointer-events:none;opacity:0;transition:opacity .3s;
border:1px solid rgba(255,255,255,.1);
}
.game-stage:hover .fs-hint{opacity:1;}
.live-badge{
position:absolute;top:10px;left:10px;
background:rgba(0,0,0,.72);backdrop-filter:blur(8px);
border:1px solid var(--accent);border-radius:20px;
padding:4px 10px;font-size:.67rem;font-weight:900;
color:var(--accent);display:flex;align-items:center;gap:5px;
opacity:0;transition:opacity .3s;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.cat-bg-badge{
display:inline-flex;align-items:center;gap:6px;
padding:4px 12px;border-radius:50px;font-size:.64rem;font-weight:800;
border:1px solid var(--accent);background:var(--surface);color:var(--accent);
margin-bottom:10px;letter-spacing:.06em;text-transform:uppercase;
}
.sw-fire{font-size:1.4rem;}
.acp-icon{font-size:1.3rem;}
.game-stage:hover .live-badge,
.live-badge.visible{opacity:1;}
/* ═══════════════════════ MOBILE FS BAR ═══════════════════════ */
.mob-fs-bar{display:none!important;}
/* ═══════════════════════ GAME TOOLBAR ═══════════════════════ */
.game-toolbar{
display:flex;align-items:center;justify-content:center;gap:8px;
padding:6px 14px;
background:#0c0c18;
border:1px solid rgba(255,85,0,.15);
border-top:none;
border-radius:0 0 var(--r-lg) var(--r-lg);
}
[data-theme="light"] .game-toolbar{
background:#f0f2fa;
border-color:rgba(80,80,200,.12);
}
.gtb-btn{
flex-shrink:0;
width:34px;height:34px;border-radius:8px;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.05);
color:rgba(255,255,255,.8);
cursor:pointer;display:flex;align-items:center;justify-content:center;
font-size:.85rem;transition:all .15s;
position:relative;
}
[data-theme="light"] .gtb-btn{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.04);color:rgba(0,0,0,.6);}
.gtb-btn:hover{border-color:var(--accent);background:rgba(255,85,0,.14);color:#fff;transform:scale(1.06);}
.gtb-btn.active{background:rgba(255,85,0,.2);border-color:var(--accent);color:var(--accent);}
.gtb-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.gtb-btn .gtb-tip{
position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
background:#1a1a35;color:#fff;font-size:.6rem;font-weight:800;
padding:3px 8px;border-radius:5px;white-space:nowrap;pointer-events:none;
opacity:0;transition:opacity .12s;border:1px solid var(--border);
font-family:var(--font-body);
}
.gtb-btn:hover .gtb-tip{opacity:1;}
.gtb-fs-btn{
padding:0 14px;width:auto;height:34px;
background:linear-gradient(135deg,var(--accent),var(--accent-2));
border-color:transparent;color:#fff;font-weight:900;font-size:.76rem;
font-family:var(--font-body);gap:5px;border-radius:8px;
display:flex;align-items:center;
}
.gtb-fs-btn svg{width:14px;height:14px;margin-right:4px;}
.gtb-fs-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px var(--accent-glow);}
@media(max-width:600px){
.game-toolbar{padding:7px 10px;gap:6px;}
.gtb-btn{width:36px;height:36px;}
.gtb-fs-btn{padding:0 10px;font-size:.72rem;}
}
.game-stage-wrap:fullscreen .game-toolbar,
.game-stage-wrap:-webkit-full-screen .game-toolbar{display:none;}
.game-stage-wrap{
grid-column:1;
display:flex;flex-direction:column;
border-radius:var(--r-lg);
overflow:hidden;
box-shadow:0 16px 50px rgba(0,0,0,.7),0 0 0 1px var(--border);
border:1.5px solid rgba(255,85,0,.18);
transition:box-shadow .25s,border-color .25s;
}
.game-stage-wrap:hover{
box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 0 1px rgba(255,85,0,.25);
border-color:rgba(255,85,0,.3);
}
[data-theme="light"] .game-stage-wrap{box-shadow:0 8px 30px rgba(0,0,0,.12),0 0 0 1px var(--border);}
.game-stage-wrap:fullscreen{border-radius:0;width:100vw;height:100vh;display:flex;flex-direction:column;}
.game-stage-wrap:-webkit-full-screen{border-radius:0;width:100vw;height:100vh;display:flex;flex-direction:column;}
.game-stage-wrap:fullscreen .game-stage,
.game-stage-wrap:-webkit-full-screen .game-stage{
height:0 !important;
max-height:none !important;
flex:1;
}
.game-stage-wrap:fullscreen .game-toolbar,
.game-stage-wrap:-webkit-full-screen .game-toolbar{display:none !important;}
/* CSS-fallback fullscreen (when browser denies native fullscreen) */
.game-stage-wrap.css-fullscreen{
position:fixed !important;
inset:0 !important;
z-index:99999 !important;
border-radius:0 !important;
width:100vw !important;
/* 100dvh = true viewport excluding mobile browser chrome; fallback to 100vh */
height:100dvh !important;
height:100vh !important; /* fallback for browsers without dvh support */
display:flex !important;
flex-direction:column !important;
}
.game-stage-wrap.css-fullscreen .game-stage{
height:0 !important;
min-height:0 !important;
flex:1 !important;
}
.game-stage-wrap.css-fullscreen .game-toolbar{display:none !important;}
/* ═══════════════════════ GAME INFO ═══════════════════════ */
.game-info{
grid-column:1;
background:var(--bg-2);border-radius:var(--r-lg);
border:1px solid var(--border);padding:22px;
}
.game-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.game-meta h1{font-family:var(--font-head);font-size:1.95rem;color:var(--accent);line-height:1.1;}
.gqa{display:flex;gap:7px;flex-shrink:0;}
.icon-btn{
width:40px;height:40px;border-radius:50%;
background:var(--surface);border:1.5px solid var(--border);
display:flex;align-items:center;justify-content:center;
font-size:1.1rem;cursor:pointer;transition:all .22s;color:var(--text);
position:relative;
}
.icon-btn:hover{border-color:var(--accent);transform:scale(1.1);}
.icon-btn.liked{background:rgba(255,85,0,.15);border-color:var(--accent);}
.icon-btn.faved{background:rgba(255,200,0,.12);border-color:#ffc700;}
.icon-btn .tip{
position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
background:var(--surface-2);color:var(--text);font-size:.67rem;font-weight:800;
padding:4px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;
opacity:0;transition:opacity .15s;border:1px solid var(--border);
}
.icon-btn:hover .tip{opacity:1;}
/* Tags */
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;}
.tag{
padding:5px 13px;background:var(--surface);border-radius:50px;
font-size:.72rem;font-weight:800;color:var(--text-2);border:1px solid var(--border);
transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;
}
a.tag:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,85,0,.08);}
.tag.af{background:rgba(0,230,118,.1);border-color:var(--green);color:var(--green);}
.tag.mobile-tag{background:rgba(68,136,255,.1);border-color:var(--blue);color:var(--blue);}
/* Rating */
.rating-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.stars{display:flex;gap:2px;}
.star{font-size:1.25rem;cursor:pointer;transition:transform .15s;line-height:1;user-select:none;}
.star:hover{transform:scale(1.2);}
.rating-info{font-size:.78rem;font-weight:800;color:var(--text-3);}
.rating-avg{font-size:.9rem;font-weight:900;color:var(--accent);}
/* Desc + Controls */
.game-desc{color:var(--text-2);font-size:.88rem;line-height:1.7;font-weight:600;margin-bottom:14px;}
.controls-box{background:var(--surface);border-radius:var(--r-md);padding:14px;border:1px solid var(--border);}
.ctrl-label{font-size:.7rem;font-weight:900;color:var(--text-3);margin-bottom:7px;letter-spacing:.06em;text-transform:uppercase;}
.ctrl-text{color:var(--text-2);font-size:.84rem;line-height:1.75;font-weight:600;white-space:pre-line;}
/* Action bar */
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.abtn{
padding:10px 16px;border-radius:var(--r-sm);cursor:pointer;
font-family:var(--font-body);font-weight:800;font-size:.82rem;
display:flex;align-items:center;gap:6px;white-space:nowrap;
border:1.5px solid var(--border);background:var(--surface);color:var(--text-2);
text-decoration:none;transition:all .22s;
}
.abtn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 4px 14px var(--accent-glow);}
.abtn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;box-shadow:0 6px 18px var(--accent-glow);}
.abtn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--accent-glow);}
.abtn.embed-btn{background:linear-gradient(135deg,#003060,#0058a8);border-color:#0058a8;color:#fff;}
.abtn.embed-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,88,168,.45);}
/* Category pills */
.cat-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.cp{padding:5px 13px;background:var(--surface);border:1px solid var(--border);border-radius:50px;font-size:.7rem;font-weight:800;color:var(--text-2);text-decoration:none;transition:all .2s;}
.cp:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,85,0,.08);}
/* ═══════════════════════ SIDEBAR ═══════════════════════ */
.gd-sidebar{
grid-column:2;grid-row:1 / span 10;
position:sticky;top:calc(var(--nav-h) + 8px);
max-height:calc(100vh - var(--nav-h) - 16px);
overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--surface-2) transparent;
display:flex;flex-direction:column;gap:14px;
}
.gd-sidebar::-webkit-scrollbar{width:3px;}
.gd-sidebar::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:3px;}
.sbox{background:var(--bg-2);border-radius:var(--r-lg);border:1px solid var(--border);padding:16px;}
.sbox-title{font-family:var(--font-head);font-size:1rem;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:7px;}
.stat-row{display:flex;gap:7px;flex-wrap:wrap;}
.stat-box{flex:1;min-width:62px;background:var(--surface);border-radius:var(--r-sm);padding:10px;text-align:center;}
.stat-n{font-family:var(--font-head);font-size:1.3rem;color:var(--accent);}
.stat-l{font-size:.6rem;font-weight:800;color:var(--text-3);}
.mcard{display:flex;align-items:center;gap:9px;text-decoration:none;padding:7px 8px;border-radius:9px;transition:background .2s;color:var(--text);}
.mcard:hover{background:var(--surface-2);}
.mcard img,.mcard .mico{width:42px;height:42px;border-radius:8px;object-fit:cover;flex-shrink:0;}
.mcard .mico{display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:var(--surface);}
.minfo{flex:1;min-width:0;}
.mname{font-weight:800;font-size:.78rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mcat{font-size:.64rem;color:var(--text-3);font-weight:700;}
.mplay{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.62rem;flex-shrink:0;opacity:0;transition:opacity .2s;}
.mcard:hover .mplay{opacity:1;}
/* ═══════════════════════ RELATED GRID ═══════════════════════ */
.rel-sec{grid-column:1;}
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sec-title{font-family:var(--font-head);font-size:1.4rem;color:var(--text);}
.see-all{font-size:.76rem;font-weight:800;color:var(--accent);text-decoration:none;padding:5px 12px;border-radius:50px;border:1.5px solid rgba(255,85,0,.3);transition:all .2s;}
.see-all:hover{background:rgba(255,85,0,.1);}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;}
.rc{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1;background:var(--surface);text-decoration:none;display:block;border:2px solid transparent;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .25s,box-shadow .25s;}
.rc:hover{transform:translateY(-5px) scale(1.03);border-color:var(--accent);box-shadow:0 14px 34px var(--accent-glow);}
.rc img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .3s;}
.rc:hover img{filter:brightness(.38) saturate(1.4);}
.rc-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,transparent 55%);opacity:0;transition:opacity .28s;display:flex;align-items:flex-end;padding:8px;}
.rc:hover .rc-ov{opacity:1;}
.rc-name{font-weight:800;font-size:.72rem;color:#fff;line-height:1.2;}
.rc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.88rem;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.rc:hover .rc-play{transform:translate(-50%,-50%) scale(1);}
.rc-badge{position:absolute;top:6px;left:6px;padding:2px 7px;border-radius:6px;font-size:.5rem;font-weight:900;text-transform:uppercase;z-index:5;}
.rc-ef{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.1rem;}
.badge-hot{background:#ff1744;color:#fff;}.badge-new{background:var(--green);color:#000;}.badge-top{background:#ffd600;color:#000;}
/* ═══════════════════════ TILT OVERLAY ═══════════════════════ */
#tilt-overlay{display:none;position:fixed;inset:0;z-index:9997;background:rgba(0,0,0,.96);flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:28px;}
#tilt-overlay.show{display:flex;}
.tilt-ico{font-size:3.4rem;animation:tr 1.4s ease-in-out infinite alternate;}
@keyframes tr{from{transform:rotate(-26deg);}to{transform:rotate(26deg);}}
.tilt-t{font-family:var(--font-head);font-size:1.65rem;color:var(--text);}
.tilt-s{color:var(--text-2);font-size:.86rem;font-weight:700;line-height:1.6;max-width:260px;}
.tilt-skip{margin-top:6px;padding:9px 22px;border-radius:50px;background:var(--surface);border:1.5px solid var(--border);color:var(--text-2);font-weight:800;font-size:.8rem;cursor:pointer;font-family:var(--font-body);}
/* ═══════════════════════ TOAST ═══════════════════════ */
.toast{position:fixed;bottom:82px;left:50%;z-index:9996;transform:translateX(-50%) translateY(70px);background:var(--surface-2);color:var(--text);padding:10px 22px;border-radius:50px;font-weight:800;font-size:.82rem;border:1px solid var(--border);box-shadow:0 8px 30px rgba(0,0,0,.4);transition:transform .3s ease;pointer-events:none;}
.toast.show{transform:translateX(-50%) translateY(0);}
/* ═══════════════════════ MOBILE BOTTOM SHEET + TAB BAR ═══════════════════════ */
#gd-mob-sheet {
display:none;
position:fixed;bottom:0;left:0;right:0;z-index:801;
flex-direction:column;
}
#gd-mob-sheet.active { display:flex; }
/* Slide-up content area */
#gd-mob-panel-content {
background:rgba(10,10,22,0.99);
backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
border-top:1.5px solid rgba(255,85,0,0.25);
border-radius:20px 20px 0 0;
max-height:0;overflow:hidden;
transition:max-height 0.32s cubic-bezier(0.4,0,0.2,1);
box-shadow:0 -8px 40px rgba(0,0,0,0.7);
}
#gd-mob-panel-content.open { max-height:65vh; overflow-y:auto; }
/* Drag handle pill */
.mob-panel-handle {
width:36px;height:4px;border-radius:2px;
background:rgba(255,255,255,0.18);
margin:12px auto 0;
}
/* Tab bar */
#gd-mob-tabbar {
display:flex;align-items:stretch;
background:rgba(8,8,18,0.98);
backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
border-top:1px solid rgba(255,85,0,0.2);
padding:7px 8px max(env(safe-area-inset-bottom,8px),8px);
gap:5px;
}
.gd-mtab {
flex:1;
padding:8px 2px 7px;
border-radius:11px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08);
color:rgba(255,255,255,0.45);
font-family:var(--font-body);
font-weight:800;font-size:0.58rem;
cursor:pointer;
display:flex;flex-direction:column;align-items:center;gap:3px;
transition:all 0.16s ease;
-webkit-tap-highlight-color:transparent;
letter-spacing:0.01em;
}
.gd-mtab .mt-icon { font-size:1.2rem;line-height:1; }
.gd-mtab:active { transform:scale(0.93); }
.gd-mtab.active {
background:linear-gradient(160deg,var(--accent),var(--accent-2));
border-color:transparent;
color:#fff;
box-shadow:0 3px 12px var(--accent-glow);
}
.gd-mtab.primary {
background:linear-gradient(160deg,var(--accent),var(--accent-2));
border-color:transparent;
color:#fff;
box-shadow:0 3px 12px var(--accent-glow);
}
/* Panel inner content */
.mob-panel-inner { padding:14px 16px 20px; }
.mob-panel-title {
font-family:var(--font-head);font-size:1.05rem;color:var(--text);
margin-bottom:14px;
display:flex;align-items:center;justify-content:space-between;
}
.mob-panel-close {
width:30px;height:30px;border-radius:50%;
border:1px solid rgba(255,255,255,0.1);
background:rgba(255,255,255,0.07);
color:rgba(255,255,255,0.5);font-size:0.85rem;
display:flex;align-items:center;justify-content:center;cursor:pointer;
transition:all 0.15s;
}
.mob-panel-close:active { background:rgba(255,85,0,0.2);color:#fff; }
/* Inventory grid (PUBG style) */
.inv-grid {
display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;
}
.inv-slot {
aspect-ratio:1;border-radius:10px;
background:var(--surface);border:1.5px solid var(--border);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;font-size:1.4rem;cursor:pointer;transition:all 0.15s;
position:relative;-webkit-tap-highlight-color:transparent;
}
.inv-slot:active,.inv-slot:hover { border-color:var(--accent);background:rgba(255,107,53,0.1); }
.inv-slot.equipped { border-color:var(--accent);background:rgba(255,107,53,0.15); }
.inv-slot .slot-label { font-size:0.52rem;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em; }
.inv-slot .slot-count {
position:absolute;bottom:4px;right:5px;
font-size:0.55rem;font-weight:900;color:var(--accent);
}
/* Stat bars */
.stat-bar-row { display:flex;align-items:center;gap:10px;margin-bottom:9px; }
.stat-bar-label { font-size:0.72rem;font-weight:800;color:var(--text-2);width:60px;flex-shrink:0; }
.stat-bar-track { flex:1;height:7px;border-radius:4px;background:var(--surface);overflow:hidden; }
.stat-bar-fill { height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 0.4s ease; }
.stat-bar-val { font-size:0.7rem;font-weight:900;color:var(--accent);width:32px;text-align:right;flex-shrink:0; }
/* Controls list */
.ctrl-row { display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border); }
.ctrl-row:last-child { border-bottom:none; }
.ctrl-key {
min-width:36px;padding:4px 8px;border-radius:6px;
background:var(--surface-2);border:1px solid var(--border-2);
font-family:monospace;font-size:0.75rem;font-weight:900;color:var(--text);
text-align:center;
}
.ctrl-desc { font-size:0.78rem;font-weight:700;color:var(--text-2); }
/* Map mini */
.mini-map {
width:100%;aspect-ratio:16/9;border-radius:10px;
background:linear-gradient(135deg,var(--surface),var(--surface-2));
border:1px solid var(--border);display:flex;align-items:center;
justify-content:center;font-size:2rem;color:var(--text-3);
margin-bottom:12px;overflow:hidden;position:relative;
}
.mbi{font-size:1.1rem;line-height:1;}
/* ═══════════════════════ EMBED MODAL ═══════════════════════ */
.embed-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:16px;}
.embed-overlay.open{display:flex;}
.embed-box{background:var(--bg-2);border-radius:var(--r-lg);border:1.5px solid var(--border);padding:24px;max-width:640px;width:100%;box-shadow:0 24px 80px rgba(0,0,0,.6);position:relative;max-height:90vh;overflow-y:auto;}
.embed-close{position:absolute;top:14px;right:15px;background:none;border:none;color:var(--text-3);font-size:1.3rem;cursor:pointer;transition:color .2s;line-height:1;}
.embed-close:hover{color:var(--accent);}
.embed-box h2{font-family:var(--font-head);font-size:1.45rem;color:var(--text);margin-bottom:6px;}
.embed-box p{color:var(--text-2);font-size:.84rem;font-weight:600;line-height:1.6;margin-bottom:14px;}
.embed-code{background:var(--surface);border-radius:var(--r-sm);border:1px solid var(--border);padding:13px;font-family:monospace;font-size:.74rem;color:#88bbff;word-break:break-all;line-height:1.6;margin-bottom:12px;white-space:pre-wrap;}
.embed-copy{width:100%;padding:12px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#fff;font-weight:800;font-size:.88rem;cursor:pointer;font-family:var(--font-body);transition:all .22s;}
.embed-copy:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--accent-glow);}
.embed-sizes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.sz-btn{padding:6px 12px;border-radius:50px;border:1.5px solid var(--border);background:var(--surface);color:var(--text-2);font-weight:800;font-size:.74rem;cursor:pointer;transition:all .2s;font-family:var(--font-body);}
.sz-btn:hover,.sz-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(255,85,0,.08);}
.embed-prev{width:100%;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border);margin-bottom:12px;background:#000;}
.embed-prev iframe{width:100%;height:100%;border:none;}
.embed-note{font-size:.7rem;color:var(--text-3);font-weight:700;line-height:1.5;}
/* ═══════════════════════ FLOAT THEME BTN ═══════════════════════ */
.float-theme{position:fixed;bottom:28px;right:28px;z-index:800;width:42px;height:42px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.95rem;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.4);transition:all .3s;color:var(--text);}
.float-theme:hover{border-color:var(--accent);transform:scale(1.1) rotate(15deg);}
/* ── Mobile search button — hidden on desktop ── */
.gd-mob-search-btn{display:none;}
@media(max-width:768px){
.gd-mob-search-btn{display:flex;}
}
/* ── Nav inline search: hide on small screens ── */
#navSearchInline{display:flex;}
@media(max-width:900px){
#navSearchInline{display:none !important;}
}
/* ── Search dropdown shared styles ── */
#navSearchDrop, #drawerSearchDrop {
scrollbar-width:thin;
scrollbar-color:rgba(255,85,0,.2) transparent;
}
#navSearchDrop::-webkit-scrollbar,
#drawerSearchDrop::-webkit-scrollbar{width:3px;}
#navSearchDrop::-webkit-scrollbar-thumb,
#drawerSearchDrop::-webkit-scrollbar-thumb{background:rgba(255,85,0,.2);border-radius:3px;}
/* ── Game stage: premium focus glow on mobile ── */
@media(max-width:768px){
.game-stage-wrap{
box-shadow:0 0 0 2px rgba(255,85,0,.25), 0 16px 50px rgba(0,0,0,.65) !important;
}
.game-stage:active{
filter:brightness(1.03);
}
}
/* Fullscreen native — handled by .game-stage-wrap */
/* ═══════════════════════ TABLET / iPAD ═══════════════════════ */
/* Tablet: 769px–1050px — balanced 2-col, game big left, info right */
@media(min-width:769px) and (max-width:1050px){
.gd-wrap{
grid-template-columns:1fr 260px;
gap:14px;
padding:0 12px 80px;
}
/* Game stage: tall on tablet — game should feel premium */
.game-stage{
height:clamp(420px,65vh,800px);
min-height:420px;
border-radius:var(--r-lg);
}
/* Sidebar stays sticky on right */
.gd-sidebar{
grid-column:2;
position:sticky;
top:calc(var(--nav-h) + 8px);
max-height:calc(100vh - var(--nav-h) - 16px);
overflow-y:auto;
flex-direction:column;
flex-wrap:nowrap;
gap:12px;
}
.gd-sidebar .sbox{min-width:unset;flex:unset;width:100%;}
/* Hide heavy sidebar panels on tablet — keep essential ones */
.gd-sidebar .clan-panel,
.gd-sidebar .tournament-panel,
.gd-sidebar .ai-coach-panel,
.gd-sidebar .score-lb-panel,
.gd-sidebar .speedrun-panel,
.gd-sidebar .live-chat-panel,
.gd-sidebar .watch-panel,
.gd-sidebar .gd-reaction-strip{ display:none !important; }
/* Tablet actions */
.actions{flex-direction:row;flex-wrap:wrap;gap:8px;}
.abtn{padding:11px 14px;font-size:.84rem;}
/* Touch-friendly buttons */
button,.abtn,.icon-btn,.nav-btn{min-height:44px;}
/* Nav search — hide inline on tablet, keep hamburger */
#navSearchInline{display:none;}
/* rel grid 3-col on tablet */
.rel-grid{grid-template-columns:repeat(3,1fr);}
/* Landscape iPad: maximize game */
@media(orientation:landscape){
.game-stage{height:72vh;}
}
}
/* ═══════════════════════════════════════════════════════
MOBILE — Game First. Everything else below.
═══════════════════════════════════════════════════════ */
@media(max-width:768px){
/* ── Kill visual noise on GPU-limited phones ── */
#gd-bg-grid,
#gd-aurora,
#gd-cursor-glow,
.gd-particles-css { display:none !important; }
/* ── Hide all sidebar-only panels ── */
.quests-panel,
.tournament-panel,
.clan-panel,
.score-lb-panel,
.speedrun-panel,
.ai-coach-panel,
.gd-coins-bar,
.gd-vip-badge,
.gd-radio-strip,
.gd-ghost-race,
.gd-time-warp,
.gd-emotion-bar,
.gd-tip-jar,
.gd-dna-compact,
.gd-time-capsule,
.gd-creator-bar,
.player-progress-bar,
.streak-widget,
.challenge-panel,
.cat-bg-badge,
.cat-pills,
.live-chat-panel,
.watch-panel,
.gd-reaction-strip,
.play-count-bar { display:none !important; }
/* ── Single-column layout, no grid ── */
.gd-wrap{
display:block;
padding:0;
/* Below-game content scrolls naturally */
}
/* ── Sidebar: hide by default, show only key boxes ── */
.gd-sidebar { display:none; }
/* ── Game iframe: fills almost all viewport — game is the hero on mobile ── */
.game-stage{
height:calc(100dvh - 50px - 52px - 48px); /* viewport minus nav minus toolbar minus tab bar */
height:calc(100vh - 50px - 52px - 48px); /* dvh fallback */
min-height:360px;
max-height:88vw; /* portrait cap: don't exceed 88% of width */
border-radius:0;
border:none;
width:100vw;
box-shadow:none;
border-bottom:2px solid rgba(255,85,0,.2);
}
.game-stage iframe{
width:100%;
height:100%;
}
.game-stage-wrap{
border-radius:0;
border:none;
box-shadow:none;
margin:0;
/* Remove any inherited overflow that clips the iframe */
overflow:visible;
}
/* But the stage itself still clips the iframe */
.game-stage-wrap .game-stage{
overflow:hidden;
}
/* ── Toolbar compact ── */
.game-toolbar{border-radius:0;padding:6px 10px;gap:6px;justify-content:center;}
.gtb-fs-btn{padding:0 12px;font-size:.72rem;height:36px;}
.gtb-btn{width:36px;height:36px;}
/* ── Nav ── */
:root{--nav-h:50px;}
.nav-bread{display:none;}
.gd-nav{padding:0 12px;gap:8px;}
/* ── Game info card — scrollable below game ── */
.game-info{
border-radius:0;
border-left:none;border-right:none;border-top:none;
padding:16px 14px;
margin-top:0;
border-bottom:1px solid rgba(255,255,255,.06);
/* Don't hide it — it's accessible by scrolling down */
display:block !important;
}
.game-title-row{gap:10px;margin-bottom:12px;align-items:center;}
.game-meta h1{font-size:22px;line-height:1.2;font-weight:700;}
.gqa .icon-btn{width:40px;height:40px;font-size:1.1rem;}
/* ── Tags: single horizontal scroll row ── */
.tags{
flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
gap:7px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
margin-bottom:14px;
}
.tags::-webkit-scrollbar{display:none;}
.tag{flex-shrink:0;padding:6px 12px;font-size:.72rem;}
/* ── Rating ── */
.rating-row{margin-bottom:14px;gap:8px;}
.star{font-size:1.25rem;}
/* ── Description ── */
.game-desc{font-size:15px !important;line-height:1.7 !important;}
/* ── Controls box ── */
.controls-box{padding:14px;}
.ctrl-text{font-size:14px;}
/* ── Hide desktop action bar — tab bar handles it ── */
.actions{display:none;}
/* ── Screenshots ── */
.game-screenshots{-webkit-overflow-scrolling:touch;}
.gs-thumb{width:130px;height:82px;border-radius:10px;}
/* ── Related games ── */
.rel-sec{padding:16px;}
.rel-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
.sec-title{font-size:1.2rem;}
/* ── Comments section ── */
.comments-panel{border-radius:0;border-left:none;border-right:none;margin:0;padding:16px 14px;}
/* ── Embed modal slides from bottom ── */
.embed-box{border-radius:20px 20px 0 0;position:fixed;bottom:0;left:0;right:0;max-height:85vh;}
.embed-overlay{align-items:flex-end;padding:0;}
/* ── Mobile bottom sheet ── */
#gd-mob-sheet{display:flex;}
body{
padding-bottom:calc(60px + max(env(safe-area-inset-bottom,0px),0px));
/* Prevent horizontal scroll from iframe expanding layout */
overflow-x:hidden;
}
/* ── Landscape on mobile: maximize game, hide info below ── */
@media(orientation:landscape){
.game-stage{
height:calc(100dvh - 50px - 44px);
height:calc(100vh - 50px - 44px);
min-height:200px;
max-height:none;
}
/* In landscape, toolbar is more compact */
.game-toolbar{padding:4px 10px;}
.gtb-btn{width:32px;height:32px;}
}
/* ── Float theme btn + toast above tab bar ── */
.float-theme{bottom:80px;right:12px;width:38px;height:38px;}
.toast{bottom:86px;}
/* ── Tab bar ── */
#gd-mob-tabbar{
padding:7px 8px max(env(safe-area-inset-bottom,8px),8px);
gap:5px;
}
.gd-mtab{padding:7px 3px 6px;font-size:.58rem;border-radius:11px;}
.gd-mtab .mt-icon{font-size:1.15rem;}
/* ── Button touch targets ── */
button, .abtn, .icon-btn{
min-height:44px;
}
}
@media(max-width:420px){
/* On very small phones, game fills even more vertical space */
.game-stage{
height:calc(100dvh - 48px - 48px - 46px);
height:calc(100vh - 48px - 48px - 46px);
min-height:300px;
}
.rel-grid{grid-template-columns:repeat(2,1fr);}
.game-meta h1{font-size:20px;}
}
@media(max-width:360px){
.game-stage{
height:calc(100dvh - 46px - 46px - 44px);
height:calc(100vh - 46px - 46px - 44px);
min-height:260px;
}
.rel-grid{grid-template-columns:repeat(2,1fr);}
}
/* ═══════ LIVE CHAT PANEL ═══════ */
.live-chat-panel {
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--r-lg); overflow: hidden; margin-top: 0;
}
.lcp-header {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px; border-bottom: 1px solid var(--border);
background: var(--surface);
}
.lcp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: lcp-blink 1.4s steps(2,start) infinite; }
@keyframes lcp-blink { 0%,100%{opacity:1;}50%{opacity:0;} }
.lcp-title { font-family: var(--font-head); font-size: 1rem; color: var(--text); flex: 1; }
.lcp-viewer-count { font-size: .7rem; font-weight: 800; color: var(--text-3); }
.lcp-messages {
height: 240px; overflow-y: auto; padding: 12px 16px;
display: flex; flex-direction: column; gap: 8px;
scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent;
}
.lcp-messages::-webkit-scrollbar { width: 3px; }
.lcp-messages::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }
.lcp-msg { display: flex; gap: 8px; align-items: flex-start; animation: msg-in .3s ease; }
@keyframes msg-in { from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);} }
.lcp-avatar { font-size: 1rem; flex-shrink: 0; width: 26px; text-align: center; }
.lcp-body { flex: 1; min-width: 0; }
.lcp-meta { font-size: .65rem; font-weight: 800; color: var(--text-3); margin-bottom: 2px; display: flex; gap: 6px; align-items: center; }
.lcp-name { color: var(--accent); }
.lcp-badge { padding: 1px 5px; border-radius: 4px; background: rgba(255,85,0,.15); color: var(--accent); font-size: .58rem; }
.lcp-text { font-size: .81rem; font-weight: 700; color: var(--text-2); line-height: 1.5; word-break: break-word; }
.lcp-input-area { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
.lcp-input {
flex: 1; background: var(--surface); border: 1.5px solid var(--border);
border-radius: 50px; padding: 8px 16px; color: var(--text);
font-family: var(--font-body); font-size: .82rem; font-weight: 700;
outline: none; transition: border-color .25s;
}
.lcp-input:focus { border-color: var(--accent); }
.lcp-input::placeholder { color: var(--text-3); }
.lcp-send-btn {
width: 36px; height: 36px; border-radius: 50%; border: none;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff; font-size: 1rem; cursor: pointer; flex-shrink: 0;
transition: all .2s; display: flex; align-items: center; justify-content: center;
}
.lcp-send-btn:hover { transform: scale(1.1); box-shadow: 0 4px 14px var(--accent-glow); }
/* ═══════ WATCH MODE PANEL ═══════ */
.watch-panel {
background: linear-gradient(135deg, #000a1a, #001530);
border: 1.5px solid rgba(68,136,255,.35);
border-radius: var(--r-md); padding: 14px 16px; margin-top: 0;
}
.wp-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wp-title { font-size: .66rem; font-weight: 900; color: #4488ff; text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; gap: 6px; flex: 1; }
.wp-viewers { font-size: .72rem; font-weight: 800; color: rgba(68,136,255,.7); }
.wp-desc { font-size: .78rem; font-weight: 700; color: var(--text-2); margin-bottom: 12px; line-height: 1.5; }
.wp-btn {
display: block; width: 100%; padding: 10px; border-radius: var(--r-sm);
background: linear-gradient(135deg, rgba(68,136,255,.2), rgba(68,136,255,.1));
border: 1.5px solid rgba(68,136,255,.4); color: #4488ff;
font-weight: 800; font-size: .8rem; cursor: pointer; font-family: var(--font-body);
transition: all .22s; text-align: center; margin-bottom: 8px;
}
.wp-btn:hover { background: rgba(68,136,255,.3); border-color: #4488ff; }
.wp-link-box {
background: var(--surface); border-radius: var(--r-sm); padding: 10px 12px;
border: 1px solid var(--border); display: none; margin-top: 8px;
}
.wp-link-box.visible { display: block; }
.wp-link-label { font-size: .65rem; font-weight: 900; color: var(--text-3); text-transform: uppercase; margin-bottom: 4px; letter-spacing: .08em; }
.wp-link-input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; color: var(--accent); font-size: .75rem; font-weight: 800; outline: none; cursor: text; }
.wp-copy-btn { margin-top: 8px; display: block; width: 100%; padding: 8px; border-radius: var(--r-sm); background: rgba(68,136,255,.15); border: 1px solid rgba(68,136,255,.3); color: #4488ff; font-weight: 800; font-size: .75rem; cursor: pointer; font-family: var(--font-body); transition: all .2s; }
.wp-copy-btn:hover { background: rgba(68,136,255,.25); }
/* ═══════ LIVE REACTIONS (per-game) ═══════ */
.gd-reaction-strip {
display: flex; align-items: center; gap: 8px; margin-top: 0;
background: var(--surface); border-radius: var(--r-md); padding: 10px 14px;
border: 1px solid var(--border); flex-wrap: wrap;
}
.gd-rxn-label { font-size: .65rem; font-weight: 900; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.gd-rxn-btn { font-size: 1.2rem; background: none; border: none; cursor: pointer; padding: 4px 7px; border-radius: 8px; transition: all .18s; position: relative; }
.gd-rxn-btn:hover { transform: scale(1.3); background: var(--surface-2); }
.gd-rxn-count { position: absolute; top: -4px; right: -5px; background: var(--accent); color: #fff; font-size: .5rem; font-weight: 900; border-radius: 50%; width: 14px; height: 14px; display: none; align-items: center; justify-content: center; }
.gd-rxn-count.v { display: flex; }
/* ── Floating particles (CSS-only, lightweight) ── */
.gd-particles-css{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.gd-p{position:absolute;border-radius:50%;animation:gd-float var(--dur,8s) var(--del,0s) ease-in-out infinite alternate;opacity:0;background:var(--accent);}
@keyframes gd-float{0%{transform:translate(var(--x0,0),var(--y0,100vh)) scale(0);opacity:0;}20%{opacity:.4;}80%{opacity:.2;}100%{transform:translate(var(--x1,10px),var(--y1,-100px)) scale(1.5);opacity:0;}}
/* ═══════ GOTD BADGE on game cards ═══════ */
.gotd-star-badge {
position: absolute; top: 8px; left: 8px; z-index: 10;
background: linear-gradient(135deg, #ff8800, #ffc107);
color: #000; font-weight: 900; font-size: .58rem; border-radius: 6px;
padding: 2px 7px; letter-spacing: .05em; text-transform: uppercase;
box-shadow: 0 2px 8px rgba(255,136,0,.6);
}
/* ═══════ FLOAT LAYER ═══════ */
#gd-float-layer {
position: fixed; bottom: 100px; right: 24px; width: 60px;
z-index: 995; pointer-events: none;
}
.gd-float-rxn {
font-size: 1.5rem; text-align: center;
animation: gd-float-up 3s ease-out forwards;
}
@keyframes gd-float-up {
0% { transform: translateY(0) scale(1); opacity: 1; }
80% { transform: translateY(-130px) scale(1.2); opacity: .8; }
100% { transform: translateY(-180px) scale(.8); opacity: 0; }
}
/* ═══════════════════════════════════════════════════════
NEW FEATURES CSS — game_detail.html
═══════════════════════════════════════════════════════ */
/* AZRS COINS */
.gd-coins-bar {
display: flex; align-items: center; gap: 8px;
background: linear-gradient(135deg, rgba(255,193,7,.12), rgba(255,136,0,.07));
border: 1.5px solid rgba(255,193,7,.3); border-radius: 12px;
padding: 9px 14px; margin-top: 10px;
}
.gd-coins-label { font-weight: 900; font-size: .78rem; color: #ffc107; flex: 1; }
.gd-coins-balance { font-family: var(--font-head); font-size: 1rem; color: #ffd54f; }
.gd-coins-shop { padding: 5px 12px; border-radius: 50px; border: 1px solid rgba(255,193,7,.4); background: rgba(255,193,7,.12); color: #ffc107; font-weight: 800; font-size: .72rem; cursor: pointer; font-family: var(--font-body); transition: all .2s; }
.gd-coins-shop:hover { background: rgba(255,193,7,.25); }
/* VIP BADGE */
.gd-vip-badge {
display: none; align-items: center; gap: 7px;
background: linear-gradient(135deg, rgba(180,77,255,.2), rgba(123,31,162,.15));
border: 1.5px solid rgba(180,77,255,.45); border-radius: 10px;
padding: 7px 14px; margin-top: 8px; font-size: .8rem; font-weight: 800; color: #e040fb;
}
.gd-vip-badge.visible { display: flex; }
/* AZRS RADIO */
.gd-radio-strip {
display: flex; align-items: center; gap: 9px;
background: rgba(68,136,255,.08); border: 1.5px solid rgba(68,136,255,.25);
border-radius: 12px; padding: 9px 13px; margin-top: 10px;
}
.gd-radio-strip .r-title { flex: 1; font-weight: 800; font-size: .78rem; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-radio-strip .r-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-size: .74rem; display: flex; align-items: center; justify-content: center; transition: all .18s; }
.gd-radio-strip .r-btn:hover, .gd-radio-strip .r-btn.playing { border-color: var(--accent); background: rgba(255,85,0,.15); }
.gd-radio-strip .r-vol { width: 52px; accent-color: var(--accent); }
/* GAME DNA (compact) */
.gd-dna-compact {
background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px;
padding: 14px; margin-top: 10px;
}
.gd-dna-title { font-family: var(--font-head); font-size: .95rem; color: var(--text); margin-bottom: 10px; }
.gd-dna-mini-bars { display: flex; flex-direction: column; gap: 6px; }
.gd-dna-mini-row { display: flex; align-items: center; gap: 8px; }
.gd-dna-mini-label { font-size: .66rem; font-weight: 800; color: var(--text-3); width: 58px; flex-shrink: 0; }
.gd-dna-mini-track { flex: 1; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.gd-dna-mini-fill { height: 100%; border-radius: 3px; transition: width 1.3s cubic-bezier(.34,1.56,.64,1); }
.gd-dna-mini-pct { font-size: .62rem; font-weight: 900; color: var(--text-2); width: 28px; text-align: right; flex-shrink: 0; }
/* TIME CAPSULE compact */
.gd-time-capsule {
background: linear-gradient(135deg, rgba(0,20,40,.9), rgba(0,40,80,.5));
border: 1.5px solid rgba(68,136,255,.3); border-radius: 12px;
padding: 13px 14px; margin-top: 10px;
}
.gd-tc-title { font-weight: 900; font-size: .84rem; color: #4488ff; margin-bottom: 6px; }
.gd-tc-input {
width: 100%; background: rgba(0,0,0,.3); border: 1px solid rgba(68,136,255,.3);
border-radius: 8px; padding: 8px 10px; color: var(--text); font-family: var(--font-body);
font-size: .8rem; font-weight: 700; outline: none; resize: none; min-height: 50px;
box-sizing: border-box; transition: border-color .25s; margin-bottom: 7px;
}
.gd-tc-input:focus { border-color: #4488ff; }
.gd-tc-btn { width: 100%; padding: 8px; border-radius: 8px; border: none; background: linear-gradient(135deg,#1565c0,#1976d2); color: #fff; font-weight: 800; font-size: .78rem; cursor: pointer; font-family: var(--font-body); transition: all .2s; }
.gd-tc-btn:hover { transform: translateY(-1px); }
.gd-tc-locked { font-size: .78rem; color: var(--text-3); font-weight: 700; line-height: 1.6; }
.gd-tc-locked strong { color: #4488ff; }
/* TIP JAR compact */
.gd-tip-jar {
background: rgba(255,215,0,.07); border: 1.5px solid rgba(255,215,0,.25);
border-radius: 12px; padding: 11px 14px; margin-top: 10px;
}
.gd-tj-title { font-weight: 900; font-size: .8rem; color: var(--text); margin-bottom: 8px; }
.gd-tj-amounts { display: flex; gap: 5px; flex-wrap: wrap; }
.gd-tj-btn { padding: 5px 11px; border-radius: 50px; border: 1px solid rgba(255,215,0,.3); background: rgba(255,215,0,.1); color: #ffd54f; font-weight: 800; font-size: .68rem; cursor: pointer; font-family: var(--font-body); transition: all .18s; }
.gd-tj-btn:hover { background: rgba(255,215,0,.2); transform: scale(1.05); }
/* EMOTION DETECTOR compact */
.gd-emotion-bar {
display: flex; align-items: center; gap: 9px;
background: rgba(0,200,150,.07); border: 1.5px solid rgba(0,200,150,.25);
border-radius: 12px; padding: 9px 13px; margin-top: 10px;
}
.gd-ed-face { font-size: 1.3rem; transition: all .3s; }
.gd-ed-info { flex: 1; }
.gd-ed-label { font-weight: 900; font-size: .76rem; color: var(--text); }
.gd-ed-status { font-size: .64rem; color: var(--text-3); font-weight: 700; }
.gd-ed-btn { padding: 5px 11px; border-radius: 50px; border: 1px solid rgba(0,200,150,.4); background: rgba(0,200,150,.1); color: #00c896; font-weight: 800; font-size: .68rem; cursor: pointer; font-family: var(--font-body); transition: all .2s; }
/* GHOST RACE compact */
.gd-ghost-race {
display: flex; align-items: center; gap: 9px;
background: rgba(255,85,0,.07); border: 1.5px solid rgba(255,85,0,.25);
border-radius: 12px; padding: 9px 13px; margin-top: 10px;
}
.gd-gr-info { flex: 1; }
.gd-gr-title { font-weight: 900; font-size: .78rem; color: var(--text); }
.gd-gr-sub { font-size: .64rem; color: var(--text-3); font-weight: 700; }
.gd-gr-btn { padding: 6px 13px; border-radius: 50px; border: 1px solid rgba(255,85,0,.4); background: rgba(255,85,0,.12); color: var(--accent); font-weight: 800; font-size: .7rem; cursor: pointer; font-family: var(--font-body); transition: all .2s; }
.gd-gr-btn:hover { background: rgba(255,85,0,.22); }
/* TIME WARP compact */
.gd-time-warp {
display: flex; align-items: center; gap: 9px;
background: rgba(140,80,255,.08); border: 1.5px solid rgba(140,80,255,.28);
border-radius: 12px; padding: 9px 13px; margin-top: 10px;
}
.gd-tw-info { flex: 1; }
.gd-tw-title { font-weight: 900; font-size: .78rem; color: var(--text); }
.gd-tw-sub { font-size: .64rem; color: var(--text-3); font-weight: 700; }
.gd-tw-btn { padding: 6px 13px; border-radius: 50px; border: 1px solid rgba(140,80,255,.4); background: rgba(140,80,255,.1); color: #b44dff; font-weight: 800; font-size: .7rem; cursor: pointer; font-family: var(--font-body); transition: all .2s; }
/* CREATOR PROGRAM compact */
.gd-creator-bar {
display: flex; align-items: center; gap: 9px;
background: rgba(0,200,80,.07); border: 1.5px solid rgba(0,200,80,.25);
border-radius: 12px; padding: 9px 13px; margin-top: 10px;
}
.gd-cp-info { flex: 1; }
.gd-cp-title { font-weight: 900; font-size: .78rem; color: var(--text); }
.gd-cp-sub { font-size: .64rem; color: var(--text-3); font-weight: 700; }
.gd-cp-btn { padding: 6px 13px; border-radius: 50px; border: none; background: linear-gradient(135deg,#00c853,#00e676); color: #000; font-weight: 900; font-size: .68rem; cursor: pointer; font-family: var(--font-body); transition: all .2s; }
.gd-cp-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,200,80,.4); }
/* NEW FEATURE MODALS */
.gd-modal {
position: fixed; inset: 0; z-index: 9989; background: rgba(0,0,0,.88);
backdrop-filter: blur(14px); display: none; align-items: center; justify-content: center; padding: 20px;
}
.gd-modal.visible { display: flex; }
.gd-modal-box {
background: var(--bg-2); border: 1.5px solid var(--border); border-radius: 24px;
padding: 26px 22px; max-width: 540px; width: 100%; max-height: 88vh;
overflow-y: auto; animation: gd-modal-pop .42s cubic-bezier(.34,1.56,.64,1);
box-shadow: 0 32px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,85,0,.1);
}
/* Shop modal specifically gets a bit more room */
#gdShopModal .gd-modal-box { max-width: 560px; }
@keyframes gd-modal-pop { from{transform:scale(.65);opacity:0;}to{transform:scale(1);opacity:1;} }
.gd-modal-box h3 { font-family: var(--font-head); font-size: 1.3rem; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.gd-modal-close { background: none; border: 1.5px solid var(--border); border-radius: 50%; width:28px;height:28px;display:flex;align-items:center;justify-content:center; cursor: pointer; color: var(--text-3); font-size: .85rem; transition: all .2s; }
.gd-modal-close:hover { color: var(--accent); border-color: var(--accent); background: rgba(255,85,0,.1); }
/* ═══════════════════════ MOBILE FULL-SCREEN GAME EXPERIENCE ═══════════════ */
@media(max-width:768px){
/* Remove all margin/padding around game on mobile */
.game-stage-wrap{
border-radius:0 !important;
border-left:none !important;
border-right:none !important;
margin-left:-16px !important;
margin-right:-16px !important;
width:100vw !important;
max-width:100vw !important;
box-shadow:none !important;
}
/* Game iframe fills full width */
.game-stage{
width:100vw !important;
max-width:100vw !important;
}
/* Game takes natural 16:9 height in portrait */
#gameFrame{
width:100% !important;
min-height:56vw !important; /* 16:9 ratio */
max-height:75vw !important;
border:none !important;
}
/* In landscape: go full screen */
@media(orientation:landscape){
.game-stage-wrap{
position:fixed !important;
inset:0 !important;
z-index:9000 !important;
margin:0 !important;
width:100vw !important;
height:100dvh !important;
border-radius:0 !important;
}
.game-stage{
height:100dvh !important;
width:100vw !important;
}
#gameFrame{
width:100vw !important;
height:100dvh !important;
max-height:100dvh !important;
}
/* Hide everything except game in landscape */
.gd-wrap > *:not(.game-stage-wrap),
.game-toolbar-external,
#gd-sidebar,
.gd-right,
header, nav, footer{ display:none !important; }
/* Show floating toolbar controls */
.game-toolbar{ display:flex !important; position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:9001 !important; background:rgba(0,0,0,.75) !important; backdrop-filter:blur(8px) !important; border-radius:0 !important; }
}
/* Floating controls - larger tap targets */
.gtb-btn{
width:44px !important;
height:44px !important;
font-size:1.1rem !important;
}
.game-toolbar{
padding:8px 12px !important;
gap:8px !important;
}
/* Rotate hint overlay */
#rotateHint{
display:none;
position:fixed;inset:0;z-index:9999;
background:rgba(0,0,0,.92);
flex-direction:column;align-items:center;justify-content:center;gap:16px;
color:#fff;text-align:center;padding:24px;
}
#rotateHint.show{ display:flex; }
#rotateHint .rh-icon{ font-size:4rem;animation:rotate-hint 1.5s ease-in-out infinite; }
@keyframes rotate-hint{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}
#rotateHint h3{ font-size:1.2rem;font-weight:900;margin:0; }
#rotateHint p{ font-size:.85rem;color:rgba(255,255,255,.7);margin:0; }
#rotateHint button{
margin-top:8px;padding:10px 24px;border-radius:50px;
background:var(--accent,#ff5500);color:#fff;border:none;
font-weight:800;font-size:.9rem;cursor:pointer;
}
/* BG theme dock - hidden on mobile */
#detailBgDock{ display:none !important; }
.float-theme{ display:none !important; }
/* Reduce sidebar padding on mobile */
.gd-wrap{ padding:0 !important; gap:0 !important; }
}
/* ── GAME WALKTHROUGH SECTION ── */
.gd-walkthrough-section{
margin:20px 0;
border-radius:14px;
background:var(--surface);
border:1.5px solid rgba(255,255,255,.08);
overflow:hidden;
}
.gd-walkthrough-header{
display:flex;align-items:center;gap:10px;
padding:14px 16px;
background:linear-gradient(135deg,rgba(var(--accent-rgb,100,60,220),.15),transparent);
cursor:pointer;
}
.gd-walkthrough-icon{font-size:1.4rem;}
.gd-walkthrough-title{font-weight:900;font-size:1rem;color:var(--text-1);}
.gd-walkthrough-sub{font-size:.75rem;color:var(--text-3);flex:1;}
.gd-walkthrough-toggle{
padding:7px 16px;border-radius:50px;
background:var(--accent);color:#fff;
border:none;font-weight:800;font-size:.8rem;
cursor:pointer;white-space:nowrap;
transition:opacity .2s;
}
.gd-walkthrough-toggle:hover{opacity:.85;}
.gd-walkthrough-player{
padding:0 12px 12px;
animation:wt-fadein .3s ease;
}
@keyframes wt-fadein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
[data-theme="light"] .gd-walkthrough-section{background:#fff;border-color:rgba(0,0,0,.08);}
@media(max-width:600px){
.gd-walkthrough-header{flex-wrap:wrap;gap:8px;}
.gd-walkthrough-sub{display:none;}
.gd-walkthrough-player iframe{height:280px!important;}
}