*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#F5F0E1;--bg2:#EDE8D6;--bg3:#E5DFC9;
  --card:#EFEAD8;--card2:#E8E2CE;
  --border:#C4B99A;--border2:#D4C9A8;
  --text:#2C2C2C;--text2:#555;--muted:#888;
  --green:#4CAF50;--green2:#43A047;
  --gold:#C49B3C;--gold2:#A07D30;
  --red:#D06850;--red2:#B05540;
  --orange:#FF9800;--orange2:#F57C00;
  --accent:#4CAF50;--purple:#7C4DFF;--purple2:#651FFF;
  --success:#4CAF50;--error:#FF5252;
  --r:14px;--rs:10px;--rp:50px;
}
body{font-family:'Cairo','Tajawal',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}

/* ===== Background Grid Dots ===== */
.bg-dots{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-dots-inner{position:absolute;top:-80px;left:-80px;right:-80px;bottom:-80px;background-image:radial-gradient(circle,rgba(0,0,0,.07) 1px,transparent 1px);background-size:20px 20px;animation:gridScroll 8s linear infinite}

/* ===== Screens ===== */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:1;overflow:hidden;background:transparent}
.screen.active{opacity:1;visibility:visible;z-index:10}

/* ===== Badges ===== */
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--rp);padding:8px 16px;font-size:17px;font-weight:700}
.badge.sm{padding:6px 14px;font-size:16px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--r);font-family:inherit;font-size:17px;font-weight:800;cursor:pointer;transition:transform .12s;text-decoration:none;color:#fff;height:56px}
.btn:hover{animation:btnWiggle .4s ease}
.btn:active{transform:scale(.93)}
.btn-large{padding:0 22px}
.btn-full{width:100%}
.btn small{font-size:11px;opacity:.7;font-weight:500;margin-right:4px}
.btn-green{background:var(--green);box-shadow:0 3px 8px rgba(76,175,80,.35)}
.btn-gold{background:var(--gold);box-shadow:0 3px 8px rgba(196,155,60,.35)}
.btn-red{background:var(--red);box-shadow:0 3px 8px rgba(208,104,80,.35)}
.btn-orange{background:var(--orange);box-shadow:0 3px 8px rgba(255,152,0,.35)}
.btn-purple{background:var(--purple);box-shadow:0 3px 8px rgba(124,77,255,.35)}
.btn-outline{background:transparent;border:2px solid var(--border);color:var(--text)}
.btn-ghost{background:transparent;color:var(--muted);padding:12px;font-size:14px;font-weight:600;height:auto}
.btn-emoji{font-size:22px}
.icon-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:var(--card);font-size:20px;cursor:pointer;transition:transform .12s;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{animation:btnWiggle .4s ease}
.icon-btn:active{transform:scale(.9)}

/* ===== Menu ===== */
#menu-screen{justify-content:space-between;padding:20px;z-index:10}
.menu-header{display:flex;align-items:center;gap:8px;flex-direction:row-reverse}
.menu-header .report-btn{margin-right:auto}
.report-btn{background:var(--red);border-color:var(--red2);color:#fff;font-size:16px}
.menu-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.menu-logo{text-align:center}
.logo-emoji{font-size:80px;animation:bounce 2s ease-in-out infinite;position:relative}
.logo-emoji::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:50px;height:10px;background:radial-gradient(ellipse,rgba(0,0,0,.1) 0%,transparent 70%);border-radius:50%}
.menu-logo h1{font-size:34px;font-weight:900;color:var(--red)}
.menu-logo p{color:var(--muted);font-size:16px;margin-top:2px;font-weight:600}
.menu-buttons{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px}
.btn-row{display:flex;gap:12px}
.btn-row .btn{flex:1}
.menu-nav{display:flex;gap:14px;justify-content:center}
.nav-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 20px;border-radius:var(--r);border:1px solid var(--border);background:var(--card);cursor:pointer;transition:transform .12s,box-shadow .2s;font-family:inherit;min-width:90px}
.nav-card:active{transform:scale(.93)}
.nav-card:hover{box-shadow:0 3px 12px rgba(0,0,0,.08);animation:btnWiggle .4s ease}
.nav-icon{font-size:28px;line-height:1}
.nav-label{font-size:12px;font-weight:700;color:var(--text2)}
.menu-footer{text-align:center}
.version-text{color:var(--muted);font-size:11px}

/* ===== Game Screen - same cream theme ===== */
#game-screen{z-index:10}
.game-header{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;flex-shrink:0;flex-direction:row-reverse;position:relative}
.game-header #game-progress{position:absolute;left:50%;transform:translateX(-50%)}
.game-stats{display:flex;gap:8px}
.close-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:18px;cursor:pointer}
.close-btn:hover{animation:btnWiggle .4s ease}
.close-btn:active{transform:scale(.9)}
.game-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:6px 10px 0;overflow:hidden;min-height:0}
.video-title{font-size:14px;font-weight:700;text-align:center;margin-bottom:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;color:var(--text)}

/* ===== VIDEO CONTAINER - bigger ===== */
.video-container{
  width:min(70vh, 95vw);height:min(70vh, 95vw);
  min-width:280px;min-height:280px;
  border-radius:20px;overflow:hidden;background:#000;position:relative;
  box-shadow:0 6px 30px rgba(0,0,0,.25), 0 0 20px rgba(255,140,66,.15);
  border:2px solid var(--border);
  flex-shrink:0;
}
.video-inner{position:absolute;top:-80px;left:-20px;right:-20px;bottom:-80px}
.video-inner iframe{width:100%!important;height:100%!important;border:none}
.video-overlay{position:absolute;inset:0;z-index:10;cursor:default}
.video-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.85);color:rgba(255,255,255,.45);font-size:14px;z-index:15;transition:opacity .3s}
.video-loading.hidden{opacity:0;pointer-events:none}
.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--orange);border-radius:50%;animation:spin .7s linear infinite}

/* ===== Orange Progress Bar ===== */
.progress-bar{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(255,255,255,.15);z-index:12;border-radius:0 0 4px 4px}
.progress-fill{height:100%;width:0%;background:var(--orange);transition:width .4s;border-radius:0 0 4px 4px}

/* Power-ups */
.powerups-bar{display:flex;gap:8px;align-items:center;justify-content:center;padding:2px 0;flex-shrink:0;min-height:24px;flex-wrap:wrap}
.pu-btn{background:var(--card);border:1px solid var(--border);border-radius:var(--rp);padding:4px 12px;font-size:12px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit}
.pu-btn:hover{animation:btnWiggle .4s ease}
.pu-btn:active{transform:scale(.95)}
.pu-info{font-size:12px;font-weight:600;color:var(--gold)}
.vote-countdown{font-size:14px;color:var(--error);font-weight:700;text-align:center;padding:4px 0;animation:pulse 1s ease-in-out infinite}

/* ===== Vote Area ===== */
.vote-area{flex-shrink:0;padding:16px 16px 10px;max-width:500px;width:100%;margin:0 auto}

/* ===== Vote Buttons - small pills ===== */
.vote-buttons{display:flex;justify-content:space-between;gap:14px}
.btn-vote{flex:1;padding:12px 18px;border-radius:var(--r);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-family:inherit;font-weight:800;font-size:16px;transition:transform .12s,box-shadow .2s}
.btn-vote:hover:not(:disabled){animation:btnWiggle .4s ease}
.btn-vote:active{transform:scale(.93)}
.btn-didnt-laugh{background:var(--success);box-shadow:0 3px 10px rgba(76,175,80,.35)}
.btn-laughed{background:var(--error);box-shadow:0 3px 10px rgba(255,82,82,.35)}
.vote-icon{font-size:22px;line-height:1}
.vote-label{font-size:16px;font-weight:800}
.btn-vote:disabled{opacity:.3;pointer-events:none;box-shadow:none}
.btn-vote.flash-success{animation:flash-green .4s}
.btn-vote.flash-fail{animation:flash-red .4s}

/* ===== Vote Results ===== */
.vote-results{animation:fadeInUp .35s ease-out}
.vr-row{display:flex;align-items:center;gap:8px;padding:5px 0}
.vr-emoji{font-size:20px;flex-shrink:0;width:26px;text-align:center}
.vr-bar-wrap{flex:1;height:32px;background:rgba(0,0,0,.06);border-radius:8px;position:relative;overflow:hidden}
.vr-bar{height:100%;border-radius:8px;min-width:4px;transition:width .8s cubic-bezier(.22,.61,.36,1)}
.vr-bar-green{background:linear-gradient(90deg,#4CAF50,#66BB6A)}
.vr-bar-red{background:linear-gradient(90deg,#FF5252,#FF7070)}
.vr-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:12px;font-weight:700;color:var(--text)}
.vr-pct{font-size:13px;font-weight:800}
.vr-count{font-size:12px;font-weight:700;color:var(--muted);flex-shrink:0;min-width:28px;text-align:center}

/* ===== Result ===== */
#result-screen{justify-content:center;align-items:center;padding:20px;z-index:10}
.result-content{text-align:center;max-width:420px;width:100%}
.result-emoji{font-size:72px;animation:bounce 2s ease-in-out infinite}
.result-title{font-size:26px;font-weight:900;margin-top:8px}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 12px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:14px 8px;display:flex;flex-direction:column;gap:3px}
.stat-card.highlight{border-color:rgba(196,155,60,.5);background:rgba(196,155,60,.15)}
.stat-value{font-size:28px;font-weight:900}
.stat-label{font-size:12px;color:var(--muted)}
.xp-result{margin:12px 0 16px}
.xp-gained{font-size:18px;font-weight:800;color:var(--purple);margin-bottom:6px}
.xp-bar-wrap{width:100%;height:8px;background:rgba(0,0,0,.08);border-radius:4px;overflow:hidden}
.xp-bar-wrap.lg{height:10px;margin-top:4px}
.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--purple),#b388ff);border-radius:4px;transition:width .6s}
.xp-level,.xp-text{font-size:12px;color:var(--muted);margin-top:4px}
.result-buttons{display:flex;flex-direction:column;gap:8px}

/* ===== Shared header ===== */
.screen-header{display:flex;align-items:center;gap:10px;padding:14px 18px;flex-shrink:0}
.screen-header h2{font-size:20px;font-weight:800;flex:1}
.back-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.back-btn:hover{animation:btnWiggle .4s ease}
.back-btn:active{transform:scale(.9)}

/* ===== Levels Screen ===== */
#levels-screen{z-index:10}
.levels-map{flex:1;overflow-y:auto;padding:10px 20px 40px;-webkit-overflow-scrolling:touch}

.lp-container{display:flex;flex-direction:column;align-items:center;gap:0;max-width:320px;margin:0 auto;position:relative}

/* Level row: pair of cards + horizontal connector */
.lp-row{display:flex;align-items:center;gap:0;width:100%;padding:8px 0;position:relative}
.lp-row.lp-right{justify-content:flex-end;padding-left:20%}
.lp-row.lp-left{justify-content:flex-start;padding-right:20%}

/* Connector between cards in same row - SOLID line */
.lp-hline{width:30px;border-top:2.5px solid var(--border);flex-shrink:0}

/* Vertical bridge between rows - SOLID line */
.lp-bridge{height:30px;display:flex;justify-content:center;width:100%;position:relative}
.lp-bridge::after{content:'';position:absolute;top:0;bottom:0;border-left:2.5px solid var(--border)}
.lp-bridge.br-right::after{right:28%}
.lp-bridge.br-left::after{left:28%}

/* Level card */
.level-card{width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;position:relative;cursor:pointer;border:2px solid var(--border);background:var(--card);color:var(--text);transition:transform .12s;box-shadow:0 3px 8px rgba(0,0,0,.08);flex-shrink:0}
.level-card:hover:not(.lv-locked){animation:btnWiggle .4s ease}
.level-card:active{transform:scale(.93)}
.level-card.lv-current{background:#E8C55A;border-color:#C4A030;color:#fff;box-shadow:0 4px 16px rgba(232,197,90,.4);animation:lvPulse 2s ease-in-out infinite}
.level-card.lv-completed{background:#A8AF7C;border-color:#8A9066;color:#fff}
.level-card.lv-locked{background:#C4B8AA;border-color:#A89E90;color:rgba(255,255,255,.6);cursor:default;opacity:.7}
.level-card .lock-icon{position:absolute;top:-4px;right:-4px;font-size:14px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.level-card .lv-stars{position:absolute;bottom:-6px;font-size:10px;white-space:nowrap}
@keyframes lvPulse{0%,100%{box-shadow:0 4px 16px rgba(232,197,90,.4)}50%{box-shadow:0 4px 24px rgba(232,197,90,.7)}}

/* ===== Leaderboard & other screens ===== */
#leaderboard-screen,#shop-screen,#profile-screen,#settings-screen{z-index:10}
.lb-tabs{display:flex;gap:8px;padding:0 18px 10px;flex-shrink:0}
.lb-tab{flex:1;padding:9px;border-radius:var(--rs);border:1px solid var(--border);background:transparent;color:var(--muted);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
.lb-tab.active{background:var(--gold);color:#fff;border-color:var(--gold)}
.lb-list{flex:1;overflow-y:auto;padding:0 18px 18px;-webkit-overflow-scrolling:touch}
.lb-row{display:flex;align-items:center;padding:11px 12px;border-radius:var(--rs);margin-bottom:5px;background:var(--card);border:1px solid var(--border)}
.lb-row.lb-top{border-color:rgba(196,155,60,.4);background:rgba(196,155,60,.12)}
.lb-rank{width:34px;font-size:17px;font-weight:800;text-align:center;flex-shrink:0}
.lb-name{flex:1;font-weight:600;margin:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{font-size:17px;font-weight:800;color:var(--gold);flex-shrink:0}
.lb-loading,.lb-empty{text-align:center;padding:36px;color:var(--muted);font-size:14px}

/* ===== Shop ===== */
.shop-list{flex:1;overflow-y:auto;padding:0 18px 18px;display:flex;flex-direction:column;gap:8px}
.shop-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px}
.shop-emoji{font-size:32px;flex-shrink:0}
.shop-info{flex:1;min-width:0}
.shop-name{font-size:15px;font-weight:800}
.shop-desc{font-size:12px;color:var(--muted);margin-top:2px}
.shop-owned{font-size:12px;color:var(--success);margin-top:2px}
.shop-buy{border:none;border-radius:var(--rs);padding:8px 14px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;color:#fff;background:var(--gold)}
.shop-buy:active{transform:scale(.95)}
.shop-buy:disabled{opacity:.4;pointer-events:none}
.shop-buy.owned{background:var(--success)}

/* ===== Profile ===== */
.profile-content{flex:1;overflow-y:auto;padding:0 18px 24px;text-align:center}
.profile-avatar{font-size:64px;margin:8px 0}
.profile-name{font-size:22px;font-weight:800}
.profile-level{font-size:14px;color:var(--gold);font-weight:700;margin-top:2px}
.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.p-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:12px 4px}
.p-stat-val{display:block;font-size:22px;font-weight:900}
.p-stat-lbl{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.section-title{font-size:16px;font-weight:800;text-align:right;margin:16px 0 8px}
.achievements-grid,.items-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ach-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:12px 6px;text-align:center}
.ach-card.locked{opacity:.35}
.ach-card.unlocked{border-color:rgba(196,155,60,.4);background:rgba(196,155,60,.12)}
.ach-emoji{font-size:28px}
.ach-name{font-size:11px;font-weight:700;margin-top:4px}
.item-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:10px 6px;text-align:center}
.item-emoji{font-size:24px}
.item-count{font-size:12px;font-weight:700;color:var(--gold)}

/* ===== Settings ===== */
.settings-content{flex:1;overflow-y:auto;padding:0 18px 24px}
.setting-group{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.setting-group h3{font-size:14px;font-weight:800;color:var(--muted);margin-bottom:10px}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:15px;font-weight:600}
.setting-row+.setting-row{border-top:1px solid var(--border2)}
.setting-val{color:var(--muted);font-size:12px;direction:ltr;max-width:150px;overflow:hidden;text-overflow:ellipsis}

/* Toggle switch */
.toggle-switch{position:relative;width:52px;height:28px;flex-shrink:0;cursor:pointer}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;border-radius:28px;background:rgba(0,0,0,.12);transition:background .25s}
.toggle-slider::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s}
.toggle-switch input:checked+.toggle-slider{background:var(--green)}
.toggle-switch input:checked+.toggle-slider::after{transform:translateX(24px)}

/* Volume slider */
.vol-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;border-radius:3px;background:rgba(0,0,0,.1);outline:none;cursor:pointer}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--green);box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer}
.vol-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--green);border:none;cursor:pointer}

.privacy-text{text-align:right;font-size:13px;line-height:1.7;color:var(--muted)}
.privacy-text p{margin-bottom:8px}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:18px;z-index:100;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.modal.active{opacity:1;visibility:visible}
.modal-content{background:var(--bg);border-radius:var(--r);padding:24px 20px;max-width:380px;width:100%;text-align:center;display:flex;flex-direction:column;gap:10px;border:1px solid var(--border);max-height:85vh;overflow-y:auto}
.modal-content h3{font-size:20px;font-weight:800}
.modal-content p{color:var(--muted);font-size:13px}
.modal-emoji{font-size:56px}
.daily-reward{font-size:32px;font-weight:900;color:var(--gold);padding:8px 0}
.daily-streak-info{font-size:14px;color:var(--muted);font-weight:600}

/* ===== Toast ===== */
#toast-container{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:rgba(44,44,44,.92);color:#fff;padding:9px 20px;border-radius:12px;font-size:13px;font-weight:600;white-space:nowrap;opacity:0;transform:translateY(-14px);transition:all .3s;pointer-events:auto}
.toast.show{opacity:1;transform:translateY(0)}

/* ===== Animations ===== */
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes flash-green{50%{box-shadow:0 0 30px rgba(76,175,80,.6)}}
@keyframes flash-red{50%{box-shadow:0 0 30px rgba(255,82,82,.6)}}
@keyframes gridScroll{0%{transform:translate(0,0)}100%{transform:translate(20px,-20px)}}
@keyframes btnWiggle{0%{transform:rotate(0)}20%{transform:rotate(-3deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}100%{transform:rotate(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes popIn{0%{opacity:0;transform:translateY(40px) scale(.6) rotate(-4deg)}50%{opacity:1;transform:translateY(-6px) scale(1.06) rotate(1deg)}70%{transform:translateY(2px) scale(.98) rotate(0)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes idlePulse{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.015) translateY(-2px)}}
@keyframes idleGlow{0%,100%{box-shadow:0 3px 8px rgba(76,175,80,.35)}50%{box-shadow:0 5px 18px rgba(76,175,80,.55)}}
@keyframes idleGlowGold{0%,100%{box-shadow:0 3px 8px rgba(196,155,60,.35)}50%{box-shadow:0 5px 18px rgba(196,155,60,.55)}}
@keyframes idleGlowRed{0%,100%{box-shadow:0 3px 8px rgba(208,104,80,.35)}50%{box-shadow:0 5px 18px rgba(208,104,80,.55)}}
.screen.active .menu-logo{animation:scaleIn .4s ease-out}
.menu-buttons .btn:hover{animation:btnWiggle .4s ease}
.screen.active .result-content{animation:fadeInUp .4s ease-out}

/* ===== Responsive ===== */
@media(max-width:380px){.menu-logo h1{font-size:28px}.logo-emoji{font-size:60px}.btn{height:50px;font-size:15px}.video-container{width:min(65vh,95vw);height:min(65vh,95vw);min-width:240px;min-height:240px}.vote-icon{font-size:20px}.vote-label{font-size:13px}.profile-stats{grid-template-columns:repeat(2,1fr)}.level-card{width:52px;height:52px;font-size:17px}.nav-card{padding:10px 14px;min-width:75px}.nav-icon{font-size:22px}.nav-label{font-size:10px}}
@media(max-height:650px){.logo-emoji{font-size:50px}.menu-logo h1{font-size:26px}.menu-buttons{gap:8px}.btn{height:48px}.video-container{width:min(62vh,95vw);height:min(62vh,95vw)}.vote-area{padding:2px 12px}.btn-vote{padding:10px 16px;font-size:15px}.vote-icon{font-size:18px}.vote-label{font-size:14px}.result-emoji{font-size:56px}.video-title{font-size:13px}.vr-bar-wrap{height:26px}.vr-emoji{font-size:16px}}
@media(min-width:768px){.menu-buttons{max-width:440px}.video-container{width:min(65vh,500px);height:min(65vh,500px)}.lp-container{max-width:360px}}