*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;font-variant-numeric:lining-nums tabular-nums}
body,html,input,select,textarea,button{font-feature-settings:'lnum' 1}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="url"],input[type="search"],textarea,select{border:none;outline:none;border-radius:15px;padding:1em;background-color:#e8e0cc;box-shadow:inset 2px 5px 10px var(--ds-shade-15);transition:300ms ease-in-out;font-family:inherit;font-size:inherit;color:var(--text)}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="number"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="search"]:focus,textarea:focus,select:focus{background-color:var(--ds-cream-yellow);transform:scale(1.02);box-shadow:6px 6px 40px var(--ds-gold-15),-6px -6px 40px var(--ds-tint-8)}
:root{
/* ═══ Design System v1.0 ═══ */
/* Colors — Brand */
--color-gold:var(--ds-gold);--color-gold-light:var(--ds-gold-soft);--color-gold-dark:var(--ds-gold-dark);
/* Colors — Backgrounds */
--color-bg:var(--ds-cream);--color-bg-card:var(--ds-cream-yellow);--color-bg-surface:var(--ds-cream-bg-deep);
/* Colors — Text */
--color-text:var(--ds-text);--color-text-body:var(--ds-text-soft);--color-text-muted:var(--ds-text-tan-light);
/* Colors — Status */
--color-success:var(--ds-green-mid);--color-error:var(--ds-red);--color-warning:var(--ds-orange-bright);
/* Colors — Challenge */
--color-laugh:var(--ds-red-vivid);--color-blink:var(--ds-blue);--color-joke:var(--ds-orange-warm);
/* Spacing */
--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:20px;--space-2xl:24px;--space-3xl:32px;--space-4xl:48px;
/* Radius */
--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:999px;
/* Shadows */
--shadow-sm:0 2px 8px var(--ds-shade-6);--shadow-md:0 4px 16px var(--ds-shade-1);--shadow-lg:0 8px 24px var(--ds-shade-15);--shadow-gold:0 4px 14px var(--ds-gold-25);
/* Legacy aliases (backward compat) */
--bg:var(--ds-cream);--bg2:var(--ds-cream-yellow);--bg3:var(--ds-cream-bg-deep);
--card:var(--ds-cream-yellow);--card2:var(--ds-cream-bg-deep);
--border:var(--ds-border-warm);--border2:#D4C9A8;
--text:var(--ds-text);--text2:var(--ds-text-soft);--muted:var(--ds-text-tan-light);
--green:var(--ds-green-mid);--green2:var(--ds-green-mid);
--gold:var(--ds-gold);--gold2:var(--ds-gold-dark);
--red:var(--ds-red);--red2:var(--ds-red-dark);
--orange:var(--ds-orange-bright);--orange2:#E6A94A;
--accent:var(--ds-green-mid);--purple:var(--ds-red);--purple2:var(--ds-red-dark);
--success:var(--ds-green-mid);--error:var(--ds-red);
--r:16px;--rs:12px;--rp:999px;
--primary:var(--ds-gold);--primary-light:var(--ds-gold-soft);--danger:var(--ds-red);--warning:var(--ds-orange-bright);
}
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}
.grecaptcha-badge{visibility:hidden!important}
/* ===== Screens ===== */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:none;z-index:var(--ds-z-base);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--ds-cream);background-image:url("assets/bg.webp");background-position:center center;background-size:100% 100vh;background-repeat:no-repeat;background-attachment:fixed}
.screen.active{opacity:1;visibility:visible;z-index:var(--ds-z-overlay)}
.screen::before{content:'';position:fixed;inset:0;background:rgba(252,243,212,0.35);pointer-events:none;z-index:0}
.screen>*{position:relative;z-index:var(--ds-z-base)}
/* ===== Badges ===== */
.badge{display:inline-flex;align-items:center;gap:var(--ds-gap-xs);background:var(--card);border:var(--ds-bw) solid var(--border);border-radius:var(--ds-pill-radius);padding:var(--ds-pill-pad);font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-bold)}
.badge.sm{padding:var(--ds-pill-pad);font-size:var(--ds-font-body)}
/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-gap-sm);border:none;border-radius:var(--ds-card-radius);font-family:inherit;font-size:var(--ds-btn-primary-font);font-weight:var(--ds-fw-heavy);cursor:pointer;transition:transform .08s,box-shadow .08s;text-decoration:none;color:#fffbf0;height:var(--ds-btn-primary-h);position:relative}
.btn:hover{animation:btnWiggle .4s ease}
.btn:active{transform:translateY(3px);box-shadow:none!important;border-bottom-width:1px!important}
.btn-large{padding:0 22px}
.btn-full{width:100%}
.btn small{font-size:var(--ds-font-label);opacity:var(--ds-op-7);font-weight:500;margin-right:4px}
.btn-green{background:var(--green);border-bottom:5px solid var(--ds-green-light);box-shadow:0 4px 12px rgba(93,207,114,.35)}
.btn-gold{background:var(--gold);border-bottom:5px solid #8D6E27;box-shadow:0 4px 12px var(--ds-gold-4)}
.btn-red{background:var(--red);border-bottom:5px solid var(--ds-orange-rust);box-shadow:0 4px 12px rgba(245,135,95,.35)}
.btn-orange{background:var(--orange);border-bottom:5px solid #d99a38;box-shadow:0 4px 12px rgba(255,190,92,.35)}
.btn-purple{background:var(--purple);border-bottom:5px solid var(--ds-orange-rust);box-shadow:0 4px 12px rgba(245,135,95,.35)}
.btn-outline{background:transparent;border:var(--ds-bw-thick) solid var(--border);color:var(--text)}
.btn-ghost{background:transparent;color:var(--muted);padding:var(--ds-gap-md);font-size:var(--ds-font-body);font-weight:var(--ds-fw-semibold);height:auto}
.btn-emoji{font-size:var(--ds-font-card-title)}
.btn-icon{width:22px;height:22px;flex-shrink:0}
.icon-btn{width:clamp(44px,4.5vw,48px);height:clamp(44px,4.5vw,48px);border-radius:50%;border:var(--ds-bw-mid) solid rgba(196,185,154,0.2);background:rgba(222,210,185,0.55);font-size:clamp(15px,2vw,20px);cursor:pointer;box-shadow:0 2px 6px var(--ds-shade-5);transition:transform .12s;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{background:rgba(222,210,185,0.75);animation:none}
.icon-btn svg{width:clamp(16px,2vw,20px);height:clamp(16px,2vw,20px)}
.icon-btn:active{transform:scale(.9)}
/* Settings Button */
.settings-btn,.notif-btn{
position:relative;
width:var(--ds-btn-icon);height:var(--ds-btn-icon);
border-radius:clamp(11px,0.9vw,14px);
border:var(--ds-bw-thick) solid var(--ds-gold-bronze);
background:var(--ds-gold);
color:var(--ds-white);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 12px rgba(150,108,19,0.25);
transition:all 0.25s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.settings-btn svg,.notif-btn svg{
width:var(--ds-btn-icon-svg);height:var(--ds-btn-icon-svg);
stroke:#fff;
transition:transform 0.4s ease;
pointer-events:none;
}
.settings-btn:hover,.notif-btn:hover{
background:#b8912f;
box-shadow:0 6px 18px rgba(150,108,19,0.35);
}
.settings-btn:hover svg{
transform:rotate(90deg);
}
.settings-btn:active,.notif-btn:active{transform:scale(0.9);background:var(--ds-gold)}
/* Bell icon hover animation */
.notif-btn svg{transition:transform .5s ease}
.notif-btn:hover svg{transform:rotate(360deg) scale(1.1)}
/* ===== Menu ===== */
#menu-screen{--text:var(--ds-text-soft);--text2:#6b5a3e;--muted:var(--ds-text-tan);justify-content:flex-start;padding:clamp(10px,2vw,20px) clamp(10px,3vw,16px);z-index:var(--ds-z-overlay);overflow-y:auto;overflow-x:hidden}
/* Pull-to-refresh hint on scrollable screens */
.screen{overscroll-behavior-y:contain}
.menu-header{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-gap-sm);flex-wrap:wrap;width:100%;padding:0}
.menu-header-right{display:flex;align-items:center;gap:var(--ds-gap-sm)}
.menu-header-left{display:flex;align-items:center;gap:var(--ds-gap-sm)}
.btn-danger{background:var(--ds-red);color:var(--ds-white);border-color:var(--ds-red-deep);border-bottom:5px solid var(--ds-red-deep)}
.btn-danger:active{border-bottom-width:2px;transform:translateY(2px)}
.report-btn{background:var(--red);border-color:var(--red2);color:var(--ds-white);font-size:var(--ds-font-body)}
#menu-screen .notif-btn{animation:none !important}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--ds-red);color:var(--ds-white);font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:var(--ds-bw-thick) solid #fff;animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.notif-list{display:flex;flex-direction:column;gap:var(--ds-gap-sm)}
.notif-item{background:var(--card2);border:var(--ds-bw) solid var(--border);border-radius:var(--ds-card-radius);padding:var(--ds-gap-md);position:relative}
.notif-item.unread{background:var(--bg);border-color:var(--gold)}
.notif-item.unread::before{content:'';position:absolute;top:8px;right:8px;width:8px;height:8px;background:var(--gold);border-radius:50%}
.notif-msg{font-size:var(--ds-font-body);line-height:var(--ds-lh-loose);color:var(--text);padding-right:16px}
.notif-time{font-size:var(--ds-font-label);color:var(--text2);margin-top:6px;direction:ltr;text-align:right}
.notif-empty{text-align:center;padding:var(--ds-gap-xl) var(--ds-gap-md);color:var(--text2);font-size:var(--ds-font-body)}
.menu-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(8px,1.5vh,16px);padding:clamp(4px,1vh,12px) 0 0;min-height:0}
.menu-logo{text-align:center;margin:0 0 clamp(6px,1.4vh,16px) 0;padding:0;position:relative;flex-shrink:1;display:flex;justify-content:center;overflow:visible;z-index:5;pointer-events:none}
.logo-img{width:clamp(280px,36vw,560px);max-height:clamp(200px,30vh,340px);object-fit:contain;height:auto;animation:bounce 2s ease-in-out infinite;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* nav-card hover: handled above */
/* Quick-access icons (Leaderboard + Shop) — bigger + premium */
.menu-quick-row{display:flex;justify-content:center;gap:clamp(20px,4vw,36px);margin:clamp(12px,2vh,20px) auto 0;flex-shrink:0}
.menu-quick-btn{position:relative;width:clamp(42px,4.2vw,56px);height:clamp(42px,4.2vw,56px);border-radius:50%;border:var(--ds-bw-heavy) solid var(--ds-gold-5);background:linear-gradient(145deg,var(--ds-cream-yellow) 0%,#efe0b8 100%);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 rgba(139,105,20,.25),0 10px 24px rgba(139,105,20,.18),inset 0 1px 0 var(--ds-tint-7);transition:transform .15s cubic-bezier(.3,.7,.4,1),box-shadow .15s,filter .15s}
.menu-quick-btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(139,105,20,.28),0 14px 32px rgba(139,105,20,.22),inset 0 1px 0 var(--ds-tint-7);filter:brightness(1.04)}
.menu-quick-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(139,105,20,.22),0 4px 12px rgba(139,105,20,.12),inset 0 1px 0 var(--ds-tint-7)}
.menu-quick-icon{font-size:clamp(22px,2.2vw,30px);color:var(--ds-gold-dark);filter:drop-shadow(0 2px 4px var(--ds-shade-15));position:relative;z-index:var(--ds-z-content)}
.menu-quick-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 28%,var(--ds-tint-75) 0%,var(--ds-tint-15) 40%,transparent 65%);pointer-events:none;z-index:var(--ds-z-base)}
@media(max-width:520px){
.menu-quick-row{gap:var(--ds-gap-lg);margin-top:16px}
.menu-quick-btn{width:62px;height:62px}
.menu-quick-icon{font-size:30px}
}
/* Menu info strip — streak + rank + daily */
.menu-info-strip{display:flex;justify-content:center;gap:clamp(10px,2vw,20px);margin:clamp(6px,1.5vh,12px) auto;flex-wrap:wrap}
.menu-info-chip{display:inline-flex;align-items:center;gap:8px;padding:0 16px;min-width:96px;height:34px;justify-content:center;border-radius:999px;background:linear-gradient(180deg,#fffaea 0%,#fff2d4 100%);border:1.5px solid rgba(196,155,60,0.45);font-size:var(--ds-font-body);font-weight:800;color:#75552a;font-family:Cairo,sans-serif;box-shadow:0 2px 6px rgba(139,105,20,0.12),0 1px 0 rgba(255,255,255,0.9) inset,0 -2px 4px rgba(196,155,60,0.08) inset;line-height:1;font-variant-numeric:tabular-nums;transition:transform .15s ease,box-shadow .15s ease;box-sizing:border-box}
.menu-info-chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(139,105,20,0.18),0 1px 0 rgba(255,255,255,0.9) inset}
.menu-info-chip-icon{font-size:clamp(15px,1.2vw,19px);line-height:1;filter:drop-shadow(0 1px 1px rgba(139,105,20,0.15))}
.menu-footer{text-align:center;margin-top:auto;flex-shrink:0;padding:clamp(10px,2vh,18px) 0 clamp(6px,1vh,10px);width:100%}
.version-text{color:var(--muted);font-size:var(--ds-font-label)}
/* Leaderboard button in header */
.leaderboard-btn{display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-sm);margin:clamp(8px,1.5vw,14px) auto 0;padding:clamp(8px,1vw,12px) clamp(20px,3vw,36px);background:linear-gradient(135deg,var(--ds-gold-soft),var(--ds-gold));border:var(--ds-bw-thick) solid var(--ds-gold-bronze);border-radius:var(--ds-pill-radius);color:var(--ds-white);font-family:inherit;font-size:clamp(14px,1.5vw,18px);font-weight:var(--ds-fw-heavy);cursor:pointer;transition:all var(--ds-tr-mid);box-shadow:0 3px 8px rgba(150,108,19,0.25);text-shadow:0 1px 2px var(--ds-shade-2)}
.leaderboard-btn svg{stroke:#fff;width:18px;height:18px}
.leaderboard-btn:hover{filter:brightness(1.1)}
.leaderboard-btn:active{transform:scale(0.95)}
/* ===== Challenges Screen ===== */
#challenges-screen{z-index:var(--ds-z-overlay);flex-direction:column}
.challenges-content{flex:1;overflow-y:auto;padding:clamp(16px,3vw,30px) clamp(20px,4vw,60px) clamp(40px,5vw,80px);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--ds-gold-3) transparent}
.challenges-content::-webkit-scrollbar{width:6px}
.challenges-content::-webkit-scrollbar-thumb{background:var(--ds-gold-3);border-radius:3px}
#challenges-screen .ch-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,280px));gap:clamp(16px,2.5vw,24px);max-width:900px;margin:0 auto;width:100%;justify-content:center;padding:0}
#challenges-screen .ch-card{--bg-color:rgba(245,234,195,0.95);position:relative;font-family:'Cairo',sans-serif;width:100%;padding:clamp(16px,2vw,24px);border-radius:var(--ds-card-radius-lg);display:flex;flex-direction:column;gap:var(--ds-gap-sm);align-items:center;text-align:center;background-color:var(--bg-color);transition:transform .2s,box-shadow .2s;cursor:pointer;box-shadow:0 4px 16px var(--ds-shade-1);border:var(--ds-bw-thick) solid var(--ds-gold-25);height:auto;overflow:visible}
#challenges-screen .ch-card:hover{box-shadow:0 6px 20px var(--ds-shade-15);transform:translateY(-3px)}
#challenges-screen .ch-card:active{transform:scale(.97)}
#challenges-screen .ch-icon{font-size:clamp(40px,5vw,56px);width:clamp(64px,7vw,84px);height:clamp(56px,6vw,74px);display:flex;align-items:center;justify-content:center}
#challenges-screen .ch-title{font-size:clamp(16px,1.8vw,20px);font-weight:var(--ds-fw-black);color:var(--ds-text-rich)}
#challenges-screen .ch-desc{font-size:clamp(12px,1.3vw,15px);color:var(--ds-gold-dark);line-height:var(--ds-lh-normal);font-weight:var(--ds-fw-semibold)}
#challenges-screen .ch-reward{font-size:clamp(13px,1.4vw,16px);font-weight:var(--ds-fw-heavy);color:var(--ds-text-rich);margin-top:4px}
/* iOS input zoom prevention — font must be >=16px */
input,select,textarea{font-size:var(--ds-font-body) !important}
@media(max-width:899px){
#challenges-screen .ch-list{grid-template-columns:repeat(2,1fr);gap:var(--ds-gap-lg) 10px}
#challenges-screen .ch-card{width:100%;padding:14px 10px}
}
/* ===== Game Screen - same cream theme ===== */
#game-screen{z-index:var(--ds-z-overlay)}
.game-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ds-pad-screen-y) var(--ds-pad-screen-x);flex-shrink:0;position:relative;flex-direction:row-reverse}
/* game-progress moved to vid-top-bar */
.game-stats{display:flex;gap:var(--ds-gap-sm)}
/* replaced by .red-close */
.game-content{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:var(--ds-gap-xs) clamp(8px,0.6vw,16px);overflow:hidden;min-height:0;gap:0;width:100%}
.game-content-stack{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.play-stage{display:flex;align-items:center;justify-content:center;width:100%;flex:1;min-height:0}
/* ===== PREMIUM HERO STAGE — Video + Right Rail =====
Right rail stacks: stats card on top, helpers below.
Cards have premium gradient backgrounds with subtle pattern.
============================================================ */
.game-content{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:0;overflow:hidden;min-height:0;width:100%}
.game-content-stack{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px 24px}
.play-stage{display:flex;align-items:center;justify-content:center;width:100%;flex:1;min-height:0}
.game-stage-card{display:flex;align-items:center;background:transparent;border:none;border-radius:0;box-shadow:none;overflow:visible;direction:rtl;position:relative;gap:var(--ds-gap-lg);max-height:none}
/* ============================================================
STAGE — HERO
============================================================ */
.gsc-stage{flex-shrink:0;align-items:stretch;justify-content:flex-start;background:var(--ds-black);padding:0;position:relative;border:var(--ds-bw-mid) solid var(--ds-gold-55);border-radius:var(--ds-card-radius-lg);box-shadow:0 24px 64px rgba(0,0,0,0.45),0 8px 24px rgba(139,105,20,0.2);overflow:hidden;display:flex;flex-direction:column;height:min(88vh,1000px);aspect-ratio:9/16}
.gsc-stage-title{display:none}
.video-card-stage{position:relative;background:var(--ds-black);overflow:hidden;flex-shrink:0;border:none;border-radius:0;box-shadow:none;flex:1;min-height:0;width:100%;height:100%}
/* ============================================================
RIGHT RAIL — stats (top) + helpers (bottom)
============================================================ */
.gsc-rail{display:flex;flex-direction:column;gap:var(--ds-gap-md);align-self:stretch;height:min(88vh,1000px)}
/* Premium card background with layered gradient + subtle pattern */
.gsc-side,.gsc-helpers{
flex-shrink:0;
background:
linear-gradient(180deg, var(--ds-cream-warm) 0%, var(--ds-cream-vanilla) 40%, #ffefb8 100%),
radial-gradient(ellipse 80% 60% at 50% 0%, var(--ds-tint-6) 0%, transparent 70%);
border:var(--ds-bw-mid) solid #d6b860;
border-radius:var(--ds-card-radius-lg);
box-shadow:
0 12px 36px rgba(139,105,20,0.18),
0 4px 12px rgba(139,105,20,0.1),
inset 0 1px 0 var(--ds-tint-85),
inset 0 -2px 0 var(--ds-gold-15);
position:relative;
overflow:hidden;
}
.gsc-side::before,.gsc-helpers::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 10%, rgba(255,217,122,0.25) 0%, transparent 40%),
radial-gradient(circle at 80% 90%, var(--ds-gold-15) 0%, transparent 50%);
pointer-events:none;
z-index:0;
}
.gsc-side > *,.gsc-helpers > *{position:relative;z-index:var(--ds-z-base)}
.gsc-side{padding:14px 14px;display:flex;flex-direction:column;gap:var(--ds-gap-sm);flex:1;min-height:0;overflow-y:auto}
.gsc-helpers{padding:14px 14px;display:flex;flex-direction:column;gap:var(--ds-gap-sm);flex-shrink:0}
.gsc-col-head{display:flex;align-items:center;gap:var(--ds-gap-xs);font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-black);color:#5a4720;justify-content:center;border-bottom:1.5px dashed var(--ds-gold-4);padding-bottom:8px;margin-bottom:6px}
.gsc-helpers-empty{font-size:12px;color:var(--ds-text-tan-mid);text-align:center;padding:14px 8px;font-weight:var(--ds-fw-bold);line-height:var(--ds-lh-loose);display:none}
.gsc-helpers .pu-row{padding:9px 12px;font-size:var(--ds-font-body-sm);border-radius:var(--ds-card-radius)}
.gsc-helpers .pu-row-icon{font-size:var(--ds-font-card-title);width:24px}
.gsc-helpers .pu-row-label{font-size:var(--ds-font-body-sm)}
.gsc-helpers .pu-row-badge{min-width:26px;height:24px;font-size:var(--ds-font-body-sm)}
/* Stats children — slightly raised cards on the textured bg */
.gsc-hud{display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#fff,#fffaef);border:var(--ds-bw-mid) solid #e5d8b8;border-radius:var(--ds-card-radius);box-shadow:0 3px 8px rgba(139,105,20,0.1),inset 0 1px 0 var(--ds-tint-7);padding:var(--ds-card-pad-sm);gap:var(--ds-gap-xs)}
.gsc-hud-label{font-size:var(--ds-font-label);font-weight:var(--ds-fw-heavy);color:var(--ds-text-tan-mid);letter-spacing:var(--ds-ls-wide);text-transform:uppercase}
.gsc-counter{display:flex;align-items:center;justify-content:center}
.gsc-counter .vid-count-badge{position:static;background:transparent;color:var(--ds-text-dark);border:none;padding:0;box-shadow:none;font-weight:var(--ds-fw-black);letter-spacing:var(--ds-ls-wide);font-variant-numeric:tabular-nums;font-size:var(--ds-font-page-title)}
.gsc-step-track{width:100%;height:5px;background:#f0e5c8;border-radius:var(--ds-pill-radius);overflow:hidden;box-shadow:inset 0 1px 2px var(--ds-shade-6)}
.gsc-step-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--ds-green-bright),#a8e063);border-radius:var(--ds-pill-radius);transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 4px rgba(93,207,114,0.4)}
.gsc-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-gap-xs)}
.gsc-stat{background:linear-gradient(180deg,#fff,#fffaef);border:var(--ds-bw-mid) solid #e5d8b8;border-radius:var(--ds-card-radius);text-align:center;box-shadow:0 2px 6px rgba(139,105,20,0.08),inset 0 1px 0 var(--ds-tint-7);display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px}
.gsc-stat-icon{line-height:1;font-size:var(--ds-font-body)}
.gsc-stat-val{font-weight:var(--ds-fw-black);color:var(--ds-text-dark);font-variant-numeric:tabular-nums;line-height:var(--ds-lh-tight);font-size:var(--ds-font-card-title);margin-top:2px}
.gsc-stat-lbl{font-weight:var(--ds-fw-bold);color:var(--ds-text-tan-mid);font-size:var(--ds-font-label);margin-top:1px}
/* ============================================================
TIER 1 default: 1280px+
============================================================ */
.gsc-rail{width:230px}
/* TIER 2: 1600px+ */
@media (min-width:1600px){
.gsc-rail{width:255px;gap:var(--ds-gap-md)}
.gsc-side,.gsc-helpers{padding:16px}
.gsc-col-head{font-size:14px;padding-bottom:10px;margin-bottom:8px}
.gsc-helpers .pu-row{padding:var(--ds-card-pad-sm);font-size:14px}
.gsc-helpers .pu-row-icon{font-size:20px;width:26px}
.gsc-helpers .pu-row-label{font-size:14px}
.gsc-helpers .pu-row-badge{min-width:28px;height:26px;font-size:14px}
.gsc-counter .vid-count-badge{font-size:28px}
.gsc-stat{padding:10px 6px}
.gsc-stat-icon{font-size:18px}
.gsc-stat-val{font-size:19px}
.gsc-stat-lbl{font-size:11px}
}
/* TIER 3: 1920px+ */
@media (min-width:1920px){
.gsc-rail{width:280px;gap:var(--ds-gap-md)}
.gsc-side,.gsc-helpers{padding:18px}
.gsc-col-head{font-size:15px;padding-bottom:12px;margin-bottom:10px}
.gsc-helpers .pu-row{padding:var(--ds-card-pad-sm);font-size:15px}
.gsc-helpers .pu-row-icon{font-size:22px;width:28px}
.gsc-helpers .pu-row-label{font-size:15px}
.gsc-helpers .pu-row-badge{min-width:30px;height:28px;font-size:15px}
.gsc-counter .vid-count-badge{font-size:32px}
.gsc-stat{padding:12px 8px}
.gsc-stat-icon{font-size:20px}
.gsc-stat-val{font-size:21px}
.gsc-stat-lbl{font-size:12px}
}
.powerups-card{background:linear-gradient(180deg,var(--ds-cream-warm) 0%,var(--ds-cream-soft) 60%,var(--ds-gold-cream) 100%);border:var(--ds-bw-mid) solid var(--ds-gold-45);border-radius:var(--ds-card-radius-lg);box-shadow:var(--ds-shadow-md),var(--ds-shadow-inset);padding:var(--ds-card-pad-md);display:flex;flex-direction:column;gap:var(--ds-gap-sm);position:relative;overflow:hidden}
.powerups-card::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:radial-gradient(ellipse at top,var(--ds-tint-55) 0%,transparent 65%);pointer-events:none}
.powerups-card > *{position:relative;z-index:var(--ds-z-base)}
.powerups-card-head{display:flex;align-items:center;gap:var(--ds-gap-xs);font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:var(--ds-text);padding-bottom:var(--ds-gap-sm);border-bottom:1.5px dashed var(--ds-gold-4);justify-content:center}
.powerups-list{display:flex;flex-direction:column;gap:var(--ds-gap-sm)}
.pu-row{display:flex;align-items:center;gap:var(--ds-gap-sm);padding:var(--ds-card-pad-sm);background:linear-gradient(180deg,#fff,var(--ds-cream-light));border:var(--ds-bw-thick) solid var(--ds-gold-35);border-radius:var(--ds-card-radius);font-family:inherit;color:var(--ds-text);box-shadow:0 2px 0 rgba(139,105,20,0.18),var(--ds-shadow-sm);cursor:default;transition:transform,box-shadow,filter var(--ds-tr);text-align:start}
.pu-row.pu-row-skip{background:linear-gradient(180deg,var(--ds-cream-light),var(--ds-gold-bright));border-color:var(--ds-gold);cursor:pointer}
.pu-row.pu-row-skip:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 3px 0 var(--ds-gold-dark),var(--ds-shadow-md)}
.pu-row.pu-row-skip:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ds-gold-dark)}
.pu-row.pu-row-double{background:linear-gradient(180deg,#f0e6ff,#cbb0ff);border-color:#8854d0;color:#2e1260}
.pu-row.pu-row-life{background:linear-gradient(180deg,#ffe8e8,#ffbdbd);border-color:#e05050;color:#6a1a1a}
.pu-row.pu-empty{filter:grayscale(.65) brightness(.96);opacity:.65}
.pu-row-icon{font-size:clamp(20px,1.6vw,28px);line-height:1;flex-shrink:0;width:clamp(28px,2.4vw,40px);text-align:center}
.pu-row-label{flex:1;font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);line-height:var(--ds-lh-snug);white-space:nowrap}
.pu-row-badge{flex-shrink:0;min-width:clamp(28px,2.4vw,38px);height:clamp(24px,2vw,32px);padding:0 var(--ds-gap-xs);background:var(--ds-tint-85);border:var(--ds-bw-mid) solid currentColor;border-radius:var(--ds-pill-radius);font-size:var(--ds-font-body);font-weight:var(--ds-fw-black);display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
@media(max-width:900px){
.game-main-row{grid-template-columns:1fr}
.game-main-row > .video-container,.game-main-row > .game-sidebar{grid-column:1;justify-self:center}
.game-sidebar{max-width:480px}
.powerups-list{flex-direction:row;justify-content:center;flex-wrap:wrap}
.pu-row{flex:0 1 auto}
}
/* video-title moved to vid-top-bar */
/* ===== VIDEO CONTAINER - bigger ===== */
.video-container{
width:min(56vh, 92vw);height:min(80vh, 140vw);
max-width:clamp(360px,38vw,560px);max-height:80vh;
min-width:260px;min-height:340px;
border-radius:var(--ds-card-radius-lg);overflow:hidden;background:var(--ds-black);position:relative;
box-shadow:0 6px 30px var(--ds-shade-25), 0 0 20px rgba(255,140,66,.15);
border:var(--ds-card-border-w) solid var(--border);
flex-shrink:0;
}
.video-inner{position:absolute;inset:-4%;width:108%;height:108%;z-index:var(--ds-z-base)}
.video-inner iframe{width:100%!important;height:100%!important;border:none}
.video-overlay{position:absolute;inset:0;z-index:var(--ds-z-overlay);cursor:default}
/* ::before gradient replaced by vid-top-bar */
.video-container::after{content:'';position:absolute;bottom:0;left:0;right:0;height:70px;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);z-index:11;pointer-events:none}
.video-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-gap-sm);background:var(--ds-shade-5x);color:rgba(255,255,255,.45);font-size:var(--ds-font-body);font-family:'Cairo','Tajawal',system-ui,sans-serif;font-weight:var(--ds-fw-semibold);z-index:15;transition:opacity .3s}
.video-loading.hidden{opacity:0;pointer-events:none}
.spinner{width:var(--ds-avatar-sm);height:var(--ds-avatar-sm);border:var(--ds-bw-heavy) solid var(--ds-tint-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:6px;background:var(--ds-tint-15);z-index:12;border-radius:0 0 4px 4px;box-shadow:0 0 8px rgba(255,190,92,.3)}
.progress-fill{height:100%;width:0%;background:var(--orange);transition:width .4s;border-radius:0 0 4px 4px}
/* Power-ups */
/* Powerups bar — visible, clear, premium. Players need to see at a glance
what helpers they own and tap them easily. */
.powerups-bar{display:inline-flex;gap:var(--ds-gap-md);align-items:center;justify-content:center;padding:var(--ds-gap-sm) var(--ds-gap-md);flex-shrink:0;min-height:var(--ds-btn-icon);flex-wrap:nowrap;background:linear-gradient(180deg,rgba(255,251,234,0.85),rgba(255,244,208,0.85));border:var(--ds-bw-mid) solid var(--ds-gold-35);border-radius:var(--ds-pill-radius);box-shadow:var(--ds-shadow-md),var(--ds-shadow-inset);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin:var(--ds-gap-sm) auto 0;align-self:center}
.pu-btn,.pu-info{
display:inline-flex;
align-items:center;
gap:var(--ds-gap-sm);
padding:clamp(8px,0.8vw,12px) clamp(14px,1.2vw,22px);
font-size:var(--ds-font-body);
font-weight:var(--ds-fw-black);
border-radius:var(--ds-pill-radius);
font-family:inherit;
line-height:1;
border:var(--ds-bw-thick) solid;
box-shadow:0 3px 0 var(--ds-shade-15),0 5px 14px var(--ds-shade-15);
transition:transform,box-shadow,filter var(--ds-tr);
min-width:clamp(64px,5vw,84px);
justify-content:center;
}
.pu-btn:hover{filter:brightness(1.06)}
/* Skip = clickable button (gold/orange) */
.pu-btn{
background:linear-gradient(180deg,var(--ds-cream-light),var(--ds-gold-bright));
border-color:var(--ds-gold);
color:var(--ds-text-dark);
cursor:pointer;
}
.pu-btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ds-shade-18),0 7px 18px var(--ds-gold-35)}
.pu-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ds-shade-15),0 3px 8px var(--ds-shade-1)}
/* Info (extra life, double xp) = non-clickable display (teal/blue) */
.pu-info{
background:linear-gradient(180deg,#E8F4FF,#B3DAFF);
border-color:#4A90D9;
color:#15365C;
}
#pu-life{
background:linear-gradient(180deg,#FFE8E8,#FFBDBD);
border-color:#E05050;
color:#6A1A1A;
}
#pu-double{
background:linear-gradient(180deg,#F0E6FF,#CBB0FF);
border-color:#8854D0;
color:#2E1260;
}
/* Emoji/icon gets a slightly bigger render */
.pu-btn::first-letter,.pu-info::first-letter{font-size:clamp(18px,1.6vw,24px)}
.vote-countdown{font-size:var(--ds-font-body);color:var(--error);font-weight:var(--ds-fw-bold);text-align:center;padding:var(--ds-gap-xs) 0;animation:pulse 1s ease-in-out infinite}
/* ===== Vote Area ===== */
.vote-area{position:absolute;bottom:30px;left:10px;right:10px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;pointer-events:none}
/* ===== Vote Buttons - Circles ===== */
.vote-buttons{display:flex;justify-content:center;align-items:center;gap:clamp(32px,3vw,56px);padding:var(--ds-card-pad-md);pointer-events:auto;background:var(--ds-shade-4);border-radius:var(--ds-pill-radius)}
.btn-vote-circle{width:clamp(64px,5.4vw,86px);height:clamp(64px,5.4vw,86px);border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ds-white);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;position:relative;overflow:hidden;pointer-events:auto;box-shadow:0 4px 15px var(--ds-shade-4)}
.btn-vote-circle::before{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.25) 0%,transparent 50%);pointer-events:none}
.btn-vote-circle::after{content:'';position:absolute;inset:3px;border-radius:50%;border:var(--ds-bw-thick) solid var(--ds-tint-15);pointer-events:none}
.btn-vote-circle:hover:not(:disabled){transform:scale(1.12)}
.btn-vote-circle:active:not(:disabled){transform:scale(.85);transition:transform .06s ease-out}
.btn-didnt-laugh{background:linear-gradient(145deg,#6ed87f,#4ab85f);box-shadow:0 6px 20px rgba(93,207,114,.4),0 2px 6px var(--ds-shade-1);border-bottom:var(--ds-bw-massive) solid var(--ds-green-light)}
.btn-laughed-circle{background:linear-gradient(145deg,#ff7676,#e84545);box-shadow:0 6px 20px rgba(255,82,82,.4),0 2px 6px var(--ds-shade-1);border-bottom:var(--ds-bw-massive) solid #c93535}
.vote-icon{font-size:clamp(38px,3.4vw,58px);line-height:1;filter:drop-shadow(0 2px 3px var(--ds-shade-15))}
.btn-vote-circle:disabled{opacity:var(--ds-op-5);pointer-events:none;box-shadow:none;border-bottom-color:transparent;animation:idlePulse 2.5s ease-in-out infinite}
.btn-vote-circle.flash-success{animation:flash-green .4s}
.btn-vote-circle.flash-fail{animation:flash-red .4s}
/* ===== Vote Results - Circular ===== */
.vote-results{animation:fadeInUp .4s ease-out;display:flex;justify-content:center;align-items:center;pointer-events:auto;background:var(--ds-shade-4);border-radius:var(--ds-pill-radius);padding:var(--ds-card-pad-md)}
.vr-circle-row{display:flex;justify-content:center;align-items:center;gap:var(--ds-gap-xl);pointer-events:none}
.vr-circle-col{display:flex;flex-direction:column;align-items:center;gap:var(--ds-gap-xs);animation:vr-pop .5s cubic-bezier(.34,1.56,.64,1) both;pointer-events:auto}
.vr-circle-col:nth-child(2){animation-delay:.15s}
.vr-circle{position:relative;width:clamp(72px,6vw,96px);height:clamp(72px,6vw,96px);filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
.vr-ring{width:100%;height:100%;transform:rotate(-90deg)}
.vr-ring-bg{fill:none;stroke:var(--ds-tint-15);stroke-width:8}
.vr-ring-fill{fill:none;stroke-width:8;stroke-linecap:round;stroke-dasharray:276.46;stroke-dashoffset:276.46;transition:stroke-dashoffset 1.2s cubic-bezier(.22,.61,.36,1)}
.vr-ring-green{stroke:var(--ds-green-bright)}
.vr-ring-red{stroke:#ff6b6b}
.vr-circle-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.vr-circle-emoji{font-size:var(--ds-font-number-md);line-height:1}
.vr-circle-pct{font-size:var(--ds-font-number-lg);font-weight:var(--ds-fw-black);color:var(--ds-white);letter-spacing:-0.5px}
.vr-circle-label{font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);color:var(--ds-tint-9)}
.vr-circle-count{font-size:var(--ds-font-label);font-weight:var(--ds-fw-semibold);color:var(--ds-tint-6)}
@keyframes vr-pop{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}
/* ===== Result ===== */
.stat-value{font-size:clamp(22px,5vw,32px);font-weight:var(--ds-fw-black);color:var(--text)}
.stat-label{font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-bold);color:var(--text2)}
.xp-gained{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:var(--green);margin-bottom:6px}
.xp-bar-wrap{width:100%;height:10px;background:var(--ds-shade-1);border-radius:5px;overflow:hidden}
.xp-bar-wrap.lg{height:12px;margin-top:4px}
.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--green),#8bc34a);border-radius:5px;transition:width .6s}
.xp-level,.xp-text{font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-bold);color:var(--text2);margin-top:4px}
/* ===== Shared header ===== */
.screen-header{display:flex;align-items:center;gap:var(--ds-gap-sm);padding:var(--ds-pad-screen-y) var(--ds-pad-screen-x);flex-shrink:0}
.screen-header h2{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-heavy);flex:1}
.back-btn{width:var(--ds-btn-icon);height:var(--ds-btn-icon);border-radius:50%;border:var(--ds-bw-mid) solid rgba(196,185,154,0.2);background:rgba(222,210,185,0.55);color:var(--text);font-size:var(--ds-font-card-title);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:var(--ds-z-overlay)}
.levels-header{display:flex;align-items:center;padding:var(--ds-pad-screen-y) var(--ds-pad-screen-x);flex-shrink:0;border-bottom:var(--ds-bw-thick) solid var(--border)}
.levels-header h2{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);flex:1;text-align:center;margin:0}
.levels-header-space{width:38px}
.levels-map{flex:1;overflow-y:auto;padding:10px 20px 40px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--ds-gold-3) transparent}
.levels-map::-webkit-scrollbar{width:6px}
.levels-map::-webkit-scrollbar-track{background:transparent}
.levels-map::-webkit-scrollbar-thumb{background:var(--ds-gold-3);border-radius:3px}
.levels-map::-webkit-scrollbar-thumb:hover{background:var(--ds-gold-5)}
.lp-container{display:flex;flex-direction:column;align-items:center;gap:0;max-width:380px;margin:0 auto;position:relative}
/* Level row: pair of cards + horizontal connector */
.lp-row{display:flex;align-items:center;gap:0;width:100%;padding:0;position:relative}
.lp-row.lp-right{justify-content:flex-end;padding-left:15%}
.lp-row.lp-left{justify-content:flex-start;padding-right:15%}
/* Connector between cards in same row */
.lp-hline{width:40px;border-top:var(--ds-bw-heavy) solid var(--border);flex-shrink:0}
/* Vertical bridge between rows */
.lp-bridge{height:50px;display:flex;justify-content:center;width:100%;position:relative}
.lp-bridge::after{content:'';position:absolute;top:0;bottom:0;border-left:var(--ds-bw-heavy) solid var(--border)}
.lp-bridge.br-right::after{right:28%}
.lp-bridge.br-left::after{left:28%}
/* 3D Level Button */
.lvl-btn{position:relative;width:var(--ds-avatar-lg);height:var(--ds-avatar-lg);border:none;background:transparent;padding:0;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;font-family:inherit}
.lvl-btn .lvl-shadow{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:var(--ds-shade-2);transform:translateY(3px);filter:blur(5px)}
.lvl-btn .lvl-edge{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:linear-gradient(to bottom,var(--edge-light) 0%,var(--edge-dark) 100%)}
.lvl-btn .lvl-front{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;width:100%;height:100%;border-radius:50%;background:var(--bg-color);color:var(--ds-white);font-size:var(--ds-font-page-title);font-weight:var(--ds-fw-black);transform:translateY(-4px);transition:transform .08s;text-shadow:0 1px 2px var(--ds-shade-2)}
.lvl-btn:active:not(.lv-locked) .lvl-front{transform:translateY(-2px)}
.lvl-btn:active:not(.lv-locked) .lvl-shadow{transform:translateY(1px)}
.lvl-btn.lv-current .lvl-front{animation:lvlGlow 2s ease-in-out infinite}
@keyframes lvlGlow{0%,100%{box-shadow:0 0 10px var(--bg-color),0 0 20px var(--ds-tint-15)}50%{box-shadow:0 0 20px var(--bg-color),0 0 40px var(--bg-color)}}
.lvl-btn.lv-locked{cursor:default;filter:saturate(.3) brightness(.85)}
.lvl-btn .lv-stars{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:var(--ds-font-label);line-height:1;letter-spacing:var(--ds-ls-wide);white-space:nowrap}
.lvl-btn .lvl-front{gap:2px;flex-direction:row}
.lvl-btn .lock-svg{opacity:var(--ds-op-8);margin-left:2px;flex-shrink:0}
.lvl-btn .level-num{line-height:1;font-size:var(--ds-font-card-title)}
/* Milestone Node */
.lvl-btn.lv-milestone{width:var(--ds-avatar-lg);height:var(--ds-avatar-lg)}.lvl-btn.lv-milestone .lvl-front{font-size:var(--ds-font-card-title);box-shadow:0 0 0 2px var(--ds-yellow-pure),0 0 10px rgba(255,215,0,.35)}.lvl-btn.lv-milestone.lv-current .lvl-front{animation:msGlow 2s ease-in-out infinite}@keyframes msGlow{0%,100%{box-shadow:0 0 0 3px var(--ds-yellow-pure),0 0 12px rgba(255,215,0,.4)}50%{box-shadow:0 0 0 4px var(--ds-yellow-pure),0 0 24px rgba(255,215,0,.6),0 0 40px rgba(255,215,0,.3)}}
/* ===== Leaderboard & other screens ===== */
#leaderboard-screen,#shop-screen,#profile-screen,#settings-screen{z-index:var(--ds-z-overlay)}
.lb-tabs{display:flex;gap:var(--ds-gap-sm);padding:0 var(--ds-pad-screen-x) var(--ds-gap-sm);flex-shrink:0}
.lb-tab{flex:1;padding:var(--ds-gap-sm);border-radius:var(--rs);border:var(--ds-bw) solid var(--border);background:transparent;color:var(--muted);font-family:inherit;font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-bold);cursor:pointer;transition:all var(--ds-tr-mid)}
.lb-tab.active{background:var(--gold);color:var(--ds-white);border-color:var(--gold)}
.lb-list{flex:1;overflow-y:auto;padding:0 0 18px;-webkit-overflow-scrolling:touch}
.lb-row{display:grid;grid-template-columns:36px 36px 1fr 45px 45px;align-items:center;padding:var(--ds-gap-sm) var(--ds-gap-xs);gap:var(--ds-gap-xs);border-radius:var(--rs);margin-bottom:6px;background:var(--card);border:var(--ds-bw) solid var(--border)}
.lb-row.lb-top{border-color:var(--ds-gold-35);background:var(--ds-gold-15);padding:12px}
.lb-row.lb-top .lb-rank{font-size:var(--ds-font-card-title)}
.lb-row.lb-own{border-left:var(--ds-bw-heavy) solid var(--gold);background:var(--ds-gold-15)}
.lb-rank{font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);text-align:center}
.lb-avatar{width:var(--ds-avatar-sm);height:var(--ds-avatar-sm);border-radius:50%;background:var(--bg3);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lb-av-fb{font-size:var(--ds-font-card-title);display:flex;align-items:center;justify-content:center}
.lb-info{min-width:0;line-height:var(--ds-lh-snug)}
.lb-name{display:block;font-weight:var(--ds-fw-bold);font-size:var(--ds-font-body-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-uname{display:block;font-size:var(--ds-font-label);color:var(--muted);font-weight:400;direction:ltr;unicode-bidi:embed}
.lb-loading{text-align:center;padding:var(--ds-gap-xl);color:var(--muted);font-size:var(--ds-font-body)}
.lb-empty{text-align:center;padding:var(--ds-gap-xl) var(--ds-gap-md);color:var(--muted);font-size:var(--ds-font-body);line-height:var(--ds-lh-loose)}
/* ===== Shop ===== */
.shop-list{padding:0 var(--ds-pad-screen-x) var(--ds-pad-screen-y);display:flex;flex-direction:column;gap:0;padding-bottom:30px}
.shop-section{margin-bottom:18px}
.shop-acc-btn{width:100%;border:none;background:linear-gradient(135deg,#fef9e7,#fdf2d0);border-radius:var(--ds-card-radius);padding:var(--ds-card-pad-md);display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:inherit;margin-bottom:10px;border:var(--ds-bw-mid) solid rgba(212,162,78,.25);transition:all var(--ds-tr-mid)}
.shop-acc-btn:active{transform:scale(.97)}
.shop-acc-title{font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);color:var(--ds-text-muted)}
.shop-acc-arrow{font-size:var(--ds-font-body);color:var(--gold);transition:transform .25s}
.shop-section-open .shop-acc-arrow{transform:rotate(180deg)}
.shop-acc-body{overflow:hidden}
.shop-card{display:flex;align-items:center;gap:var(--ds-gap-md);background:var(--card);border:var(--ds-bw) solid var(--border);border-radius:var(--ds-card-radius);padding:var(--ds-card-pad-md);margin-bottom:8px;transition:transform,box-shadow var(--ds-tr)}
.shop-card:active{transform:scale(.98)}
.shop-card.shop-perm{border-color:var(--gold);background:linear-gradient(135deg,var(--card) 80%,rgba(212,162,78,.08))}
.shop-card.shop-card-owned{opacity:var(--ds-op-55);filter:grayscale(.3)}
.shop-emoji{font-size:clamp(26px,2.2vw,38px);flex-shrink:0;width:var(--ds-avatar-md);height:var(--ds-avatar-md);display:flex;align-items:center;justify-content:center;background:var(--ds-shade-5);border-radius:var(--ds-card-radius)}
.shop-info{flex:1;min-width:0}
.shop-name{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-heavy);line-height:var(--ds-lh-snug);color:var(--ds-text)}
.shop-desc{font-size:var(--ds-font-body-sm);color:var(--ds-text-muted);margin-top:3px;line-height:var(--ds-lh-normal)}
.shop-count{display:inline-block;font-size:var(--ds-font-label);color:var(--ds-white);background:var(--green);padding:2px var(--ds-gap-sm);border-radius:var(--ds-pill-radius);margin-top:5px;font-weight:var(--ds-fw-bold)}.shop-count-low{background:var(--ds-red) !important}
.shop-badge-owned{display:inline-block;font-size:var(--ds-font-label);color:var(--ds-white);background:var(--success);padding:2px var(--ds-gap-sm);border-radius:var(--ds-pill-radius);margin-top:5px;font-weight:var(--ds-fw-bold)}
.shop-buy{border:none;border-radius:var(--ds-card-radius);padding:var(--ds-card-pad-sm);font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-heavy);cursor:pointer;font-family:inherit;color:var(--ds-white);background:linear-gradient(135deg,var(--ds-gold),#e8b84a);flex-shrink:0;box-shadow:0 2px 8px rgba(212,162,78,.3);transition:transform,box-shadow var(--ds-tr)}
.shop-buy:hover{box-shadow:0 4px 12px rgba(212,162,78,.4)}
.shop-buy:active{transform:scale(.92)}
.shop-buy:disabled{pointer-events:none}
.shop-buy.shop-buy-cant{opacity:var(--ds-op-3);box-shadow:none}
.shop-buy.shop-buy-owned{background:linear-gradient(135deg,var(--success),var(--ds-green-fresh));box-shadow:0 2px 8px var(--ds-green-suc-3);opacity:var(--ds-op-8)}
/* ===== Profile ===== */
/* Social Accounts */
.social-reward-banner{background:linear-gradient(135deg,rgba(255,215,0,.15),rgba(255,165,0,.1));border:var(--ds-bw) solid rgba(255,215,0,.3);border-radius:var(--ds-card-radius);padding:var(--ds-card-pad-sm);font-size:var(--ds-font-body-sm);color:var(--gold);text-align:center;margin-bottom:12px;display:flex;align-items:center;gap:var(--ds-gap-sm);justify-content:center}
.ach-emoji{font-size:var(--ds-font-number-md)}
.ach-name{font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);margin-top:4px}
.item-emoji{font-size:var(--ds-font-card-title)}
.item-count{font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);color:var(--gold)}
/* ===== Settings ===== */
.settings-content{flex:1;overflow-y:auto;padding:0 18px 24px}
.setting-group{background:var(--card);border:var(--ds-bw) solid var(--border);border-radius:var(--r);padding:var(--ds-card-pad-md);margin-bottom:12px}
.setting-group h3{font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);color:var(--muted);margin-bottom:10px}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:var(--ds-gap-sm) 0;font-size:var(--ds-font-body);font-weight:var(--ds-fw-semibold)}
.setting-row+.setting-row{border-top:var(--ds-bw) solid var(--border2)}
.setting-val{color:var(--muted);font-size:var(--ds-font-label);direction:ltr;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.setting-val-link{color:var(--gold);cursor:pointer;font-weight:var(--ds-fw-bold)}
.setting-val-link:hover{text-decoration:underline}
.setting-actions{display:flex;flex-direction:column;gap:var(--ds-gap-sm)}
/* 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:var(--ds-card-radius-lg);background:var(--ds-shade-15);transition:background .25s}
.toggle-slider::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ds-white);box-shadow:0 1px 3px var(--ds-shade-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{--vol-color:var(--green);width:100%;height:6px;-webkit-appearance:none;appearance:none;border-radius:3px;background:var(--ds-shade-1);outline:none;cursor:pointer}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--vol-color);box-shadow:0 1px 4px var(--ds-shade-2);cursor:pointer}
.vol-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--vol-color);border:none;cursor:pointer}
.privacy-text{text-align:right;font-size:var(--ds-font-body-sm);line-height:1.7;color:var(--muted)}
.privacy-text p{margin-bottom:8px}
/* ===== Modal ===== */
.modal{position:fixed;inset:0;background:var(--ds-shade-5x);display:flex;align-items:center;justify-content:center;padding:10px;z-index:500;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.modal.active{opacity:1;visibility:visible}
.modal-content{background:var(--bg);border-radius:var(--ds-card-radius-lg);padding:var(--ds-card-pad-lg);max-width:clamp(360px,38vw,520px);width:100%;text-align:center;display:flex;flex-direction:column;gap:var(--ds-gap-sm);border:none;max-height:92vh;overflow-y:auto;overflow-x:hidden;position:relative}
.modal-frame{position:relative;max-width:clamp(360px,38vw,520px);width:100%;overflow:visible}
/* Profile: inline tab content hidden, uses modals now */
/* .modal-close-btn now inherits from the unified block above.
Only position overrides needed here. */
.modal-close-btn{position:absolute;top:12px;left:12px;z-index:5}
.modal-close-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.modal-scroll{max-height:88vh;overflow-y:auto;overflow-x:hidden}
.modal-coins-badge{display:inline-flex;align-items:center;gap:var(--ds-gap-xs);background:linear-gradient(135deg,#fef9e7,#fdf2d0);border:var(--ds-card-border-w) solid var(--gold);border-radius:var(--ds-pill-radius);padding:var(--ds-pill-pad);font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);align-self:center;box-shadow:var(--ds-shadow-sm)}
.modal-content h3{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-heavy)}
.modal-content p{color:var(--muted);font-size:var(--ds-font-body-sm)}
.modal-emoji{font-size:clamp(44px,3.6vw,64px)}
.daily-reward{font-size:clamp(26px,2.4vw,38px);font-weight:var(--ds-fw-black);color:var(--gold);padding:var(--ds-gap-sm) 0}
.daily-streak-info{font-size:var(--ds-font-body);color:var(--muted);font-weight:var(--ds-fw-semibold)}
/* Login & Username Modals */
.login-modal-content{gap:var(--ds-gap-md)}
.login-modal-content p{margin-bottom:4px}
.modal-center{align-items:center;gap:var(--ds-gap-md)}
.modal-center-lg{align-items:center;gap:var(--ds-gap-md)}
.modal-spaced{gap:var(--ds-gap-md)}
.btn-google{background:var(--ds-white);color:#333;border:var(--ds-bw-thick) solid var(--border);border-bottom:var(--ds-bw-massive) solid #ddd;box-shadow:0 2px 8px var(--ds-shade-1)}
.btn-google:hover{background:#f8f8f8}
.btn-google .btn-icon{width:clamp(18px,1.5vw,24px);height:clamp(18px,1.5vw,24px)}
.username-input{width:100%;padding:var(--ds-card-pad-sm);border:var(--ds-bw-thick) solid var(--border);border-radius:var(--ds-card-radius);background:var(--card);color:var(--text);font-family:inherit;font-size:var(--ds-font-body);font-weight:var(--ds-fw-semibold);text-align:center;outline:none;transition:border-color var(--ds-tr-mid)}
.username-input:focus{border-color:var(--green)}
.username-input::placeholder{color:var(--muted);font-weight:400}
/* ===== Toast ===== */
/* Game Notification */
.game-notif{
position:fixed;
top:var(--ds-gap-md);
left:50%;transform:translateX(-50%);
z-index:9998;
display:flex;
align-items:center;
gap:var(--ds-gap-sm);
padding:var(--ds-card-pad-sm);
background:linear-gradient(135deg,var(--ds-cream-tan),#ede3c8);
border:var(--ds-bw-thick) solid var(--gold);
border-radius:var(--ds-card-radius);
box-shadow:var(--ds-shadow-md);
max-width:90vw;
pointer-events:auto;
transition:all .35s cubic-bezier(.4,0,.2,1);
}
.gn-icon{font-size:var(--ds-font-card-title);flex-shrink:0}
.gn-text{
font-size:var(--ds-font-body);
font-weight:var(--ds-fw-bold);
color:#4a3728;
line-height:var(--ds-lh-normal);
text-align:center;
}
.gn-show{visibility:visible;
opacity:1;
transform:translateX(-50%) translateY(0);
}
.gn-hide{visibility:hidden;
opacity:0;
transform:translateX(-50%) translateY(-20px);
pointer-events:none;
justify-content:center;
}
/* Keep old container for backwards compat */
#toast-container{position:fixed;top:var(--ds-gap-md);left:50%;transform:translateX(-50%);z-index:999;display:none}
/* ===== Animations ===== */
@keyframes bounce{0%,100%{transform:translateY(0) translateZ(0)}50%{transform:translateY(-4px) translateZ(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:var(--ds-op-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 dotsFloat{0%{transform:translate(0,0)}25%{transform:translate(-8px,6px)}50%{transform:translate(4px,-10px)}75%{transform:translate(-6px,-4px)}100%{transform:translate(8px,8px)}}
@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 var(--ds-green-suc-35)}50%{box-shadow:0 5px 18px var(--ds-green-suc-55)}}
@keyframes idleGlowGold{0%,100%{box-shadow:0 3px 8px var(--ds-gold-35)}50%{box-shadow:0 5px 18px var(--ds-gold-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)}}
/* scaleIn removed - instant return to home */
.screen.active .result-content{animation:fadeInUp .4s ease-out}
/* ===== Challenge Hub ===== */
#challenge-screen{z-index:var(--ds-z-overlay)}
.ch-list{flex:1;overflow-y:auto;padding:var(--ds-gap-md);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ds-gap-sm);-webkit-overflow-scrolling:touch;justify-content:center;align-content:center}
.ch-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-gap-xs);background:var(--card);border:var(--ds-bw-bold) solid var(--border);border-radius:var(--r);padding:var(--ds-card-pad-sm);cursor:pointer;transition:transform .12s,box-shadow .2s;position:relative;overflow:hidden;text-align:center;height:140px}
.ch-card:hover{animation:none}
.ch-card:active{transform:scale(.97)}
.ch-card.ch-daily{border-color:#e6a94a}
.ch-card.ch-lucky{border-color:#b07ce8}
.ch-card.ch-speed{border-color:var(--ds-green-bright)}
.ch-card.ch-survival{border-color:var(--ds-orange)}
.ch-icon{font-size:var(--ds-font-number-md);flex-shrink:0;width:var(--ds-avatar-sm);height:var(--ds-avatar-sm);display:flex;align-items:center;justify-content:center;border-radius:var(--ds-card-radius);background:var(--ds-shade-5)}
.ch-info{min-width:0}
.ch-title{font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-black);color:var(--text)}
.ch-desc{font-size:var(--ds-font-label);color:var(--muted);margin-top:1px;line-height:var(--ds-lh-snug)}
.ch-reward{font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);color:var(--gold);margin-top:2px}
.ch-status{font-size:var(--ds-font-card-title);flex-shrink:0;position:absolute;top:6px;left:6px}
.ch-card.ch-completed{opacity:var(--ds-op-55);pointer-events:none}
.ch-card.ch-completed::after{content:'✓';position:absolute;top:6px;left:6px;width:24px;height:24px;background:var(--green);color:var(--ds-white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--ds-font-body);font-weight:var(--ds-fw-black)}
/* Spin Wheel */
.spin-modal-content{padding:24px 20px 20px}
.spin-wheel-wrap{position:relative;width:240px;height:240px;margin:16px auto}
.spin-pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:var(--ds-font-page-title);z-index:5;filter:drop-shadow(0 2px 4px var(--ds-shade-2));color:var(--gold)}
.spin-wheel{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;border:var(--ds-bw-massive) solid var(--border);box-shadow:0 4px 20px var(--ds-shade-15);transition:transform 3s cubic-bezier(.17,.67,.12,.99)}
.spin-section{position:absolute;width:50%;height:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:clamp(26px,2.2vw,38px);font-weight:var(--ds-fw-heavy)}
.spin-section span{font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold)}
.spin-s1{top:0;left:0;background:#f0e4ff}
.spin-s2{top:0;right:0;background:#e4f0ff}
.spin-s3{bottom:0;right:0;background:#e4ffe8}
.spin-s4{bottom:0;left:0;background:#fff4e4}
.spin-wheel.spinning{animation:none}
/* Speed Timer */
.speed-timer{position:absolute;left:50%;transform:translateX(-50%);background:#ff4444;color:var(--ds-white);padding:var(--ds-gap-xs) var(--ds-gap-md);border-radius:var(--ds-pill-radius);font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);z-index:5;animation:pulse 1s ease-in-out infinite}
.speed-timer.warning{background:#ff0000;animation:pulse .5s ease-in-out infinite}
/* Challenge Modifier Badge */
.ch-modifier-badge{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--ds-shade-5x);color:var(--ds-white);padding:3px var(--ds-gap-sm);border-radius:var(--ds-card-radius);font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);white-space:nowrap;margin-top:2px;z-index:5}
/* Video modifier: flipped */
.mod-flipped .video-inner{transform:scaleX(-1)}
/* ===== LTR Support ===== */
[dir="ltr"] body{text-align:left}
[dir="ltr"] .modal-content{text-align:center}
[dir="ltr"] .setting-row{flex-direction:row}
[dir="ltr"] .profile-info{text-align:left}
[dir="ltr"] .social-input-row{flex-direction:row}
[dir="ltr"] .social-at{order:0}
[dir="ltr"] .ch-info{text-align:left}
[dir="ltr"] .result-content{text-align:center}
[dir="ltr"] .menu-content{text-align:center}
/* ===== Responsive ===== */
/* ===== Profile Redesign ===== */
/* ===== Profile V2 - Professional ===== */
.profile-header-card{background:linear-gradient(160deg,var(--ds-gold-15) 0%,var(--ds-gold-15) 50%,var(--ds-gold-15) 100%);border-radius:var(--ds-card-radius-lg);padding:32px 24px 20px;margin:-8px -8px 8px;position:relative;overflow:visible;border:var(--ds-bw-mid) solid var(--ds-gold-15)}
.profile-header-card::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:radial-gradient(circle,var(--ds-gold-15) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.profile-header-card::after{content:'';position:absolute;bottom:-20px;left:-20px;width:70px;height:70px;background:radial-gradient(circle,var(--ds-gold-15) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.profile-photo-wrap{position:relative;z-index:var(--ds-z-base);width:var(--ds-avatar-xl);height:var(--ds-avatar-xl);margin:0 auto;cursor:pointer;border-radius:50%}
.profile-photo-img{width:var(--ds-avatar-xl);height:var(--ds-avatar-xl);border-radius:50%;object-fit:cover;border:var(--ds-bw-heavy) solid var(--gold);box-shadow:0 4px 15px var(--ds-gold-25)}
.profile-photo-avatar{display:flex;align-items:center;justify-content:center;width:var(--ds-avatar-xl);height:var(--ds-avatar-xl);border-radius:50%;background:linear-gradient(135deg,#fff,var(--ds-cream-tan));border:var(--ds-bw-heavy) solid var(--gold);font-size:48px;box-shadow:0 4px 15px var(--ds-gold-25)}
.profile-photo-edit{position:absolute;bottom:0;right:0;z-index:10;background:linear-gradient(135deg,var(--gold),#d4a832);color:var(--ds-white);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--ds-font-body);border:var(--ds-bw-thick) solid var(--bg);box-shadow:0 2px 8px var(--ds-shade-3);transition:transform .2s}
.profile-name-wrap{position:relative;z-index:var(--ds-z-base);display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-sm);cursor:pointer;margin:14px 0 2px;width:100%}
.profile-name{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-heavy);color:var(--text)}
.profile-name-edit{font-size:var(--ds-font-body);opacity:var(--ds-op-5);transition:all var(--ds-tr-mid)}
.profile-name-wrap:hover .profile-name-edit{opacity:1;transform:scale(1.15)}
.profile-username{color:var(--muted);font-size:var(--ds-font-body-sm);margin-top:2px;direction:ltr;unicode-bidi:embed;text-align:center;position:relative;z-index:var(--ds-z-base)}
.profile-level{position:relative;z-index:var(--ds-z-base);font-size:var(--ds-font-body);color:var(--gold);font-weight:var(--ds-fw-bold);margin-top:10px;text-align:center}
.profile-xp-section{position:relative;z-index:var(--ds-z-base);padding:0 12px;margin-top:6px}
.profile-xp-section .xp-bar-wrap{background:var(--ds-shade-6);border-radius:6px;height:10px}
.profile-xp-section .xp-bar-fill{background:linear-gradient(90deg,var(--gold),#e8c547);border-radius:6px}
.profile-xp-section .xp-text{color:var(--muted);font-size:var(--ds-font-label);font-weight:var(--ds-fw-semibold)}
.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ds-gap-sm);margin:0 0 12px}
.p-stat{background:linear-gradient(160deg,var(--ds-gold-15),var(--ds-gold-15));border:var(--ds-bw-mid) solid var(--ds-gold-15);border-radius:var(--ds-card-radius);padding:10px 4px;text-align:center;transition:transform .15s}
.p-stat:active{transform:scale(.96)}
.p-stat-val{display:block;font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:var(--text)}
.p-stat-lbl{display:block;font-size:var(--ds-font-label);color:var(--muted);margin-top:3px;font-weight:var(--ds-fw-bold);letter-spacing:var(--ds-ls-mid)}
.section-title{font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);text-align:center;margin:20px 0 12px;color:var(--text);position:relative;display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-md)}
.section-title::before,.section-title::after{content:'';flex:1;max-width:60px;height:1.5px;background:linear-gradient(90deg,transparent,var(--border))}
.section-title::after{background:linear-gradient(90deg,var(--border),transparent)}
/* ═══ Profile Editable Field Bars ═══ */
.profile-field-bar{z-index:var(--ds-z-content);
display:flex;
align-items:center;
width:100%;
max-width:320px;
margin:18px auto 4px;
padding:var(--ds-card-pad-sm);
background:var(--ds-cream-fdf);
border-radius:var(--ds-card-radius);
border:var(--ds-bw) solid rgba(210,200,175,0.35);
box-shadow:inset 0 1px 4px var(--ds-shade-5),inset 0 1px 1px rgba(0,0,0,0.02);
cursor:pointer;
transition:all var(--ds-tr);
position:relative;
min-height:44px;
overflow:visible;
}
.profile-field-bar:hover{
background:var(--ds-cream-shell);
box-shadow:inset 0 2px 5px var(--ds-shade-6),inset 0 1px 1px rgba(0,0,0,0.03);
}
.profile-field-bar:active{transform:scale(.98)}
.pf-edit{position:absolute;left:12px !important;right:auto !important;top:50%;transform:translateY(-50%);
font-size:var(--ds-font-body-sm);
opacity:0.45;
flex-shrink:0;
transition:opacity .2s;
}
.profile-field-bar:hover .pf-edit{position:absolute;left:12px !important;right:auto !important;top:50%;transform:translateY(-50%);opacity:0.8}
.pf-label{
position:absolute;
top:-9px;
right:18px;
left:auto;
padding:0 8px;
background:var(--ds-cream-fdf);
font-size:11px;
font-weight:var(--ds-fw-bold);
color:var(--muted);
white-space:nowrap;
line-height:1;
z-index:4;
border-radius:4px;
}
.pf-value{
font-size:var(--ds-font-body);
font-weight:var(--ds-fw-heavy);
color:var(--text);
text-align:center;
position:absolute;
left:50%;
transform:translateX(-50%);
pointer-events:none;
white-space:nowrap;
max-width:calc(100% - 90px);
overflow:hidden;
text-overflow:ellipsis;
}
/* ═══ Profile Level Row (reference style) ═══ */
display:flex;
flex-direction:column;
align-items:center;
gap:var(--ds-gap-xs);
width:100%;
max-width:340px;
margin:10px auto 4px;
position:relative;
z-index:var(--ds-z-base);
}
.plr-bar-row{width:100%;
display:flex;
align-items:center;
gap:var(--ds-gap-xs);
width:100%;
}
.plr-star{
font-size:var(--ds-font-page-title);
flex-shrink:0;
filter:drop-shadow(0 2px 4px var(--ds-gold-4));
}
.plr-level{
font-size:var(--ds-font-body-sm);
font-weight:var(--ds-fw-heavy);
color:var(--gold);
text-align:center;
}
.plr-bar-wrap{
flex:1;
height:22px;
background:#f0e8d0;
border-radius:var(--ds-card-radius);
overflow:hidden;
position:relative;
border:var(--ds-bw-mid) solid var(--ds-gold-2);
box-shadow:inset 0 1px 3px var(--ds-shade-6);
}
.plr-bar-fill{
height:100%;
background:linear-gradient(90deg,var(--ds-gold),#e2c14a);
border-radius:var(--ds-card-radius);
transition:width .6s ease;
min-width:4px;
}
.plr-bar-text{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:var(--ds-font-label);
font-weight:var(--ds-fw-bold);
color:var(--ds-text-soft);
direction:ltr;
pointer-events:none;
text-shadow:0 1px 2px var(--ds-shade-1);
}
.profile-actions-section{display:flex;flex-direction:column;gap:var(--ds-gap-sm);margin:0 0 4px;order:3}
/* ═══ Profile Account Actions ═══ */
.profile-compact-actions{
display:flex;
gap:var(--ds-gap-sm);
margin:2px 0 10px;
}
.pca-btn{
display:flex;
flex:1;
align-items:center;
justify-content:center;
gap:var(--ds-gap-sm);
height:56px;
border-radius:var(--ds-card-radius);
border:none;
cursor:pointer;
font-family:inherit;
font-size:var(--ds-font-body);
font-weight:var(--ds-fw-heavy);
transition:all var(--ds-tr-fast);
-webkit-tap-highlight-color:transparent;
}
.pca-btn:active{transform:scale(.93)}
.pca-icon{font-size:var(--ds-font-card-title);line-height:1;display:flex;align-items:center;justify-content:center}
.pca-label{font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);line-height:1}
.pca-logout{
background:var(--card);
border:var(--ds-bw-mid) solid var(--border);
color:var(--text2);
}
.pca-logout:hover{background:var(--card2)}
.pca-delete{
background:rgba(220,53,53,0.08);
border:var(--ds-bw-mid) solid rgba(200,50,50,0.2);
color:var(--ds-red-deep);
}
.pca-delete:hover{background:rgba(220,53,53,0.16)}
.pca-delete .pca-icon svg{stroke:var(--ds-red-deep)}
.pca-logout .pca-icon svg{stroke:var(--text2)}
.profile-actions-section .btn-outline,.profile-actions-section .btn-danger{display:none}
.social-section{margin:0}
.social-complete-banner{display:flex;align-items:center;gap:var(--ds-gap-md);padding:var(--ds-card-pad-md);background:linear-gradient(135deg,var(--ds-cream-rich) 0%,var(--ds-gold-bright) 55%,var(--ds-orange-bright) 100%);border:var(--ds-bw-thick) solid var(--ds-gold);border-radius:var(--ds-card-radius);box-shadow:var(--ds-shadow-md),var(--ds-shadow-inset);margin-bottom:var(--ds-gap-md);position:relative;overflow:hidden;font-family:Cairo,sans-serif}
.social-complete-banner::before{content:"";position:absolute;top:-30%;left:-20%;right:-20%;height:70%;background:radial-gradient(ellipse at center,var(--ds-tint-55) 0%,transparent 65%);pointer-events:none}
.social-complete-banner > *{position:relative;z-index:var(--ds-z-base)}
.scb-icon{font-size:clamp(32px,2.6vw,42px);line-height:1;filter:drop-shadow(0 3px 4px rgba(139,105,20,0.3));animation:scbBounce 2s ease-in-out infinite}
@keyframes scbBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.scb-text{flex:1;min-width:0}
.scb-title{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:var(--ds-text-dark);line-height:var(--ds-lh-tight)5;letter-spacing:var(--ds-ls-tight)}
.scb-sub{font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-bold);color:rgba(58,40,16,0.75);margin-top:2px}
.scb-reward{display:inline-flex;align-items:center;gap:var(--ds-gap-xs);padding:var(--ds-pill-pad);background:linear-gradient(180deg,#fff,var(--ds-gold-pale));border:var(--ds-bw-thick) solid var(--ds-gold-dark);border-radius:var(--ds-pill-radius);box-shadow:0 3px 0 #6e520f,var(--ds-shadow-sm);font-variant-numeric:tabular-nums;flex-shrink:0}
.scb-coin{width:clamp(20px,1.6vw,26px);height:clamp(20px,1.6vw,26px);flex-shrink:0;filter:drop-shadow(0 1px 2px var(--ds-shade-15))}
.scb-amount{font-size:clamp(15px,1.3vw,19px);font-weight:var(--ds-fw-black);color:var(--ds-text-dark);letter-spacing:var(--ds-ls-mid)}
.social-accounts-list{display:flex;flex-direction:column;gap:var(--ds-gap-xs)}
.social-input-row{display:flex;align-items:center;gap:var(--ds-gap-md);direction:ltr;background:none;border:none;border-radius:0;padding:8px 0;border-bottom:var(--ds-bw-mid) solid rgba(196,185,154,0.3);transition:border-color var(--ds-tr-mid)}
.social-input-row:last-child{border-bottom:none}
.social-input-row:focus-within{border-color:var(--gold)}
.social-icon{font-size:var(--ds-font-number-md);width:36px;text-align:center;flex-shrink:0}
.social-input{flex:1;background:transparent;border:none;color:var(--text);font-size:var(--ds-font-body);font-family:inherit;outline:none;padding:4px 0}
.social-input::placeholder{color:var(--muted);font-size:var(--ds-font-label)}
.social-at{font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);color:var(--muted);flex-shrink:0}
.social-save-btn{margin-top:10px;background:linear-gradient(135deg,var(--ds-green-success),var(--ds-green-deep))!important;color:#fff!important;border:none!important;border-radius:var(--ds-card-radius)!important;font-weight:var(--ds-fw-bold);box-shadow:0 3px 12px rgba(46,125,50,.2);height:50px!important;font-size:var(--ds-font-body)!important}
.achievements-grid,.items-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ds-gap-sm)}
.ach-card{background:var(--card);border:var(--ds-bw-mid) solid var(--border);border-radius:var(--ds-card-radius);padding:var(--ds-gap-md) var(--ds-gap-xs);text-align:center;transition:transform .15s}
.ach-card:active{transform:scale(.95)}
.ach-card.locked{opacity:.25;filter:grayscale(1)}
.ach-card.unlocked{border-color:var(--ds-gold-35);background:linear-gradient(145deg,var(--ds-gold-15),var(--ds-gold-15))}
.ach-emoji{font-size:var(--ds-font-number-md);margin-bottom:6px}
.ach-name{font-size:var(--ds-font-label);font-weight:var(--ds-fw-semibold);color:var(--text2)}
.item-card{background:var(--card);border:var(--ds-bw-mid) solid var(--border);border-radius:var(--ds-card-radius);padding:var(--ds-gap-md) var(--ds-gap-xs);text-align:center;transition:transform .15s}
.item-card:active{transform:scale(.95)}
.item-emoji{font-size:var(--ds-font-number-md)}
.item-count{font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-bold);color:var(--gold);margin-top:4px}
/* Profile Tab Icons */
@keyframes profTabIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* Leaderboard Column Header */
/* Leaderboard Grid */
.lb-col-header{display:grid;grid-template-columns:36px 36px 1fr 45px 45px;align-items:center;padding:8px 8px;gap:var(--ds-gap-xs);font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);color:var(--muted);border-bottom:var(--ds-bw-mid) solid var(--border);margin-bottom:4px}
.lb-col-header span{text-align:center}
.lb-col-name{text-align:center!important}
.lb-val{text-align:center;font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);color:var(--text)}
@media(min-width:900px){
.video-container{width:min(50vh,420px);height:min(75vh,640px)}
.lp-container{max-width:400px}
}
@media(max-width:320px){.btn-vote-circle{width:58px;height:58px}.vote-icon{font-size:28px}.vr-circle{width:var(--ds-avatar-lg);height:var(--ds-avatar-lg)}.vr-circle-emoji{font-size:17px}.vr-circle-pct{font-size:14px}.video-container{min-width:200px}.modal-content{padding:18px 14px}.stat-value{font-size:22px}.result-char-img{width:80px}.lvl-btn{width:46px;height:46px}.lvl-btn .level-num{font-size:15px}.lvl-btn.lv-milestone{width:var(--ds-avatar-md);height:var(--ds-avatar-md)}.lvl-btn .lv-stars{font-size:8px}}
@media(max-height:560px){.video-container{min-height:auto}.game-header{padding:var(--ds-pill-pad)}.video-title{font-size:12px;margin-bottom:2px}.powerups-bar{padding:4px 0 2px;min-height:36px;gap:var(--ds-gap-xs)}.pu-btn,.pu-info{font-size:13px;padding:7px 12px}.result-char-img{width:80px}.result-title{font-size:24px}.result-stats{gap:var(--ds-gap-xs)}.stat-card{padding:10px 6px}}
/* Email Auth */
.auth-input{width:100%;padding:var(--ds-card-pad-sm);border-radius:var(--ds-card-radius);border:var(--ds-bw-thick) solid var(--border);background:var(--card);color:var(--text);font-size:var(--ds-font-body);margin-bottom:10px;font-family:inherit;direction:ltr;text-align:left;box-sizing:border-box}
.auth-input:focus{border-color:var(--primary);outline:none}
.auth-link{color:var(--primary);font-size:var(--ds-font-body-sm);cursor:pointer;text-decoration:underline;background:none;border:none;font-family:inherit}
.auth-divider{display:flex;align-items:center;gap:var(--ds-gap-md);margin:var(--ds-gap-md) 0;color:var(--text2);font-size:var(--ds-font-body-sm)}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
/* ===== Coin Store ===== */
.coinstore-grid{display:flex;flex-direction:column;gap:var(--ds-gap-md);margin-top:16px}
.coinstore-card{background:var(--card);border:var(--ds-bw-thick) solid var(--border);border-radius:var(--r);padding:16px;display:flex;align-items:center;gap:var(--ds-gap-md);cursor:pointer;transition:transform .1s,border-color .2s;position:relative;overflow:hidden}
.coinstore-card:active{transform:scale(.97)}
.coinstore-card.popular{border-color:var(--gold);box-shadow:0 0 12px var(--ds-gold-25)}
.coinstore-card-icon{font-size:clamp(28px,2.4vw,42px);flex-shrink:0}
.coinstore-card-info{flex:1;text-align:right}
.coinstore-card-coins{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-heavy);color:var(--text)}
.coinstore-card-bonus{font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);color:var(--green);margin-top:2px}
.coinstore-card-price{background:var(--green);color:var(--ds-white);border-radius:var(--ds-pill-radius);padding:var(--ds-pill-pad);font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);flex-shrink:0;border:none;cursor:pointer;border-bottom:var(--ds-bw-heavy) solid var(--ds-green-light)}
.coinstore-card-price:active{transform:translateY(2px);border-bottom-width:1px}
.coinstore-popular-tag{position:absolute;top:0;left:0;background:var(--gold);color:var(--ds-white);font-size:var(--ds-font-label);font-weight:var(--ds-fw-heavy);padding:2px var(--ds-gap-sm);border-radius:0 0 8px 0}
.coinstore-balance{text-align:center;padding:var(--ds-gap-md);background:var(--card2);border-radius:var(--ds-card-radius);font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);margin-bottom:4px}
.coinstore-balance span{font-size:var(--ds-font-card-title);color:var(--gold)}
.coinstore-note{text-align:center;font-size:var(--ds-font-label);color:var(--muted);margin-top:12px}
/* ===== goSell LightBox Overlay ===== */
#root:not(:empty){position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.65);z-index:var(--ds-z-top);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#root>div{border:none!important;outline:none!important;background:transparent!important}
#root iframe{border:none!important;border-radius:0!important;box-shadow:none!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;position:fixed!important;top:0!important;left:0!important}
/* RTL: flip back button arrow */
[dir="rtl"] .back-btn{transform:scaleX(-1)}
[dir="rtl"] .back-btn:active{transform:scaleX(-1) scale(.9)}
/* ===== Footer ===== */
.site-footer{
background:linear-gradient(180deg, var(--bg) 0%, #3d2f1e 5%, #2c2115 100%);
color:var(--ds-text-light);
padding:0;
margin-top:auto;
margin-left:-16px;
margin-right:-16px;
margin-bottom:-20px;
border-top:var(--ds-bw-heavy) solid var(--orange);
position:relative;
flex-shrink:0;
width:calc(100% + 32px)}
.site-footer::before{
content:'';display:block;height:8px;
background:repeating-linear-gradient(90deg,var(--orange) 0,var(--orange) 20px,transparent 20px,transparent 28px);
opacity:var(--ds-op-4);
}
.footer-content{
max-width:900px;margin:0 auto;padding:30px 20px 16px;
}
.footer-top{
display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--ds-gap-lg);
}
.footer-brand{
display:flex;align-items:center;gap:var(--ds-gap-md);
}
.footer-logo-img{
width:60px;height:auto;border-radius:var(--ds-card-radius);
}
.footer-brand-name{
font-size:var(--ds-font-card-title);font-weight:bold;color:#f5e6c8;
}
.footer-links{
display:flex;flex-wrap:wrap;gap:var(--ds-gap-md) 20px;align-items:center;
}
.footer-links a{
color:var(--ds-text-light);text-decoration:none;font-size:var(--ds-font-body-sm);
transition:color .2s;
}
.footer-links a:hover{color:var(--orange)}
.footer-social{
display:flex;gap:var(--ds-gap-md);align-items:center;
}
.footer-social-icon{
width:var(--ds-avatar-sm);height:var(--ds-avatar-sm);border-radius:50%;
background:var(--ds-tint-1);
display:flex;align-items:center;justify-content:center;
color:var(--ds-text-light);transition:all var(--ds-tr-mid);text-decoration:none;
}
.footer-social-icon:hover{
background:var(--orange);color:var(--ds-white);transform:scale(1.1);
}
.footer-bottom{
margin-top:24px;text-align:center;
}
.footer-scroll-top{
display:inline-flex;align-items:center;gap:var(--ds-gap-xs);
color:var(--ds-text-light);text-decoration:none;font-size:var(--ds-font-body-sm);
padding:var(--ds-pill-pad);border-radius:var(--ds-card-radius-lg);
background:var(--ds-tint-08);
transition:all var(--ds-tr-mid);margin-bottom:12px;
}
.footer-scroll-top:hover{background:var(--ds-tint-15);color:var(--orange)}
.footer-divider{
height:1px;background:rgba(255,255,255,.12);margin:12px 0;
}
.footer-copyright{
font-size:var(--ds-font-label);color:rgba(212,197,169,.6);margin:0;
}
@media(max-width:600px){
.footer-top{flex-direction:column;align-items:center;text-align:center}
.footer-links{justify-content:center}
.footer-social{justify-content:center}
}
.legal-modal-content{max-width:600px;width:92%;max-height:85vh;display:flex;flex-direction:column;border-radius:var(--ds-card-radius-lg);overflow:visible;position:relative}
.legal-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ds-card-pad-md);border-bottom:var(--ds-bw-thick) solid var(--border);flex-shrink:0;background:var(--bg);border-radius:var(--ds-card-radius-lg) 20px 0 0}
.legal-modal-header h3{margin:0;font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-heavy);color:var(--brown)}
.legal-modal-content>.modal-close-btn-float{position:absolute;top:-14px;left:-14px;z-index:var(--ds-z-overlay);width:var(--ds-btn-icon);height:var(--ds-btn-icon);border-radius:50%;border:none;background:var(--ds-red);cursor:pointer;font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);display:flex;align-items:center;justify-content:center;color:var(--ds-white);transition:transform,box-shadow,filter var(--ds-tr-fast);box-shadow:0 3px 0 var(--ds-red-dark),0 4px 10px var(--ds-shade-15)}
.modal-close-btn-float:hover{filter:brightness(1.1);transform:translateY(-1px)}
.legal-modal-body{padding:var(--ds-card-pad-md);overflow-y:auto;font-size:var(--ds-font-body);line-height:1.8;color:#4a3728;max-height:65vh;background:var(--bg);border-radius:0 0 20px 20px}
.legal-modal-body h4{font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);color:var(--brown);margin:18px 0 8px;padding-bottom:6px;border-bottom:var(--ds-bw) solid var(--border)}
.legal-modal-body h4:first-child{margin-top:0}
.legal-modal-body p{margin:0 0 12px}
.legal-modal-body ul{margin:0 0 12px;padding:0 20px}
.legal-modal-body li{margin:4px 0}
.faq-q{font-weight:var(--ds-fw-bold);color:var(--brown);margin:14px 0 4px;font-size:var(--ds-font-body)}
.faq-q:first-child{margin-top:0}
.faq-a{margin:0 0 14px;padding:0 12px;color:#5a4733}
.support-card{background:var(--bg);border-radius:var(--ds-card-radius);padding:14px;margin:8px 0;display:flex;align-items:center;gap:var(--ds-gap-md);border:var(--ds-bw) solid var(--border);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;text-decoration:none}
.support-icon{font-size:var(--ds-font-card-title);flex-shrink:0}
.support-info{flex:1}
.support-label{font-weight:var(--ds-fw-bold);font-size:var(--ds-font-body-sm);color:var(--brown);display:block;margin-bottom:2px}
.support-value{font-size:var(--ds-font-body-sm);color:#6b5540}
.legal-modal-body a{color:var(--orange);text-decoration:none}
.legal-modal-body a:hover{text-decoration:underline}
.coin-store-btn{background:var(--green);color:var(--ds-white);border:none;border-radius:50%;width:24px;height:24px;font-size:var(--ds-font-body);font-weight:bold;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-inline-end:6px;transition:transform .2s;line-height:1;position:relative;z-index:5}
.coin-store-btn:hover{transform:scale(1.15)}
.coin-store-btn:active{transform:scale(0.9)}
.support-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--ds-shade-15);border-color:var(--orange)}
.support-card:active{transform:scale(0.97)}
[dir="ltr"] .legal-modal-content>.modal-close-btn-float{left:auto;right:-14px}
[dir="ltr"] .coinstore-card-info{text-align:left}
[dir="ltr"] .coinstore-popular-tag{left:auto;right:0;border-radius:0 0 0 8px}
/* === Email Auth Styles === */
.auth-separator{display:flex;align-items:center;gap:var(--ds-gap-md);width:100%;margin:var(--ds-gap-sm) 0;color:var(--muted);font-size:var(--ds-font-body-sm)}
.auth-separator::before,.auth-separator::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-input{width:100%;padding:var(--ds-card-pad-sm);border:var(--ds-bw-thick) solid var(--border);border-radius:var(--ds-card-radius);background:var(--card-bg,#fff);color:var(--text);font-size:var(--ds-font-body);outline:none;transition:border-color var(--ds-tr-mid);box-sizing:border-box;font-family:inherit}
.auth-input:focus{border-color:var(--ds-purple-blue)}
.auth-input::placeholder{color:var(--muted)}
.btn-link{background:none;border:none;color:var(--ds-purple-blue);font-size:var(--ds-font-body);cursor:pointer;text-decoration:underline;padding:var(--ds-gap-xs);font-family:inherit}
#email-auth-section{display:flex;flex-direction:column;gap:var(--ds-gap-sm);width:100%}
.btn-blue{background:#4A90D9;border-bottom:5px solid #3572A5;box-shadow:0 4px 12px rgba(74,144,217,.35);color:var(--ds-white)}
#language-picker-modal .modal-content{text-align:center;align-items:center}
.btn-email{background:linear-gradient(135deg,var(--ds-purple-blue),#a29bfe);border-bottom:5px solid #5a4bd6;box-shadow:0 4px 12px rgba(108,92,231,.35);color:var(--ds-white)}
/* === Username Setup (WS4b) === */
.username-input-wrap{display:flex;align-items:center;gap:0;width:100%;border:var(--ds-bw-thick) solid var(--border);border-radius:var(--ds-card-radius);overflow:hidden;background:var(--card-bg,#fff);transition:border-color var(--ds-tr-mid)}
.username-input-wrap:focus-within{border-color:var(--ds-purple-blue)}
.username-at{padding:var(--ds-gap-sm) 0 var(--ds-gap-sm) var(--ds-gap-md);font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-heavy);color:var(--muted);user-select:none}
[dir="rtl"] .username-at{padding:var(--ds-card-pad-sm) 10px 0}
.username-input-wrap .username-input{border:none;background:transparent;padding:var(--ds-card-pad-sm) 10px 4px;flex:1;min-width:0}
.username-input-wrap .username-input:focus{outline:none;box-shadow:none}
.username-status{min-height:1.3em;font-size:var(--ds-font-body-sm);text-align:start;width:100%;padding:0 var(--ds-gap-xs)}
.us-err{color:var(--ds-red-vivid)}
.us-ok{color:#2ecc71;font-weight:var(--ds-fw-bold)}
.us-wait{color:var(--ds-orange-warm)}
/* Splash loading overlay */
/* ════ App splash (initial load) ════ */
#app-splash{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg)}
#app-splash.hide{display:none}
/* ════ Per-screen loading overlay — shown on every page transition ════ */
.screen-loader{position:absolute;inset:0;z-index:var(--ds-z-modal);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ds-cream);background-image:url("assets/bg.webp");background-position:center center;background-size:100% 100vh;background-repeat:no-repeat;background-attachment:fixed;transition:opacity .25s ease}
.screen-loader.fade-out{opacity:0;pointer-events:none}
.screen-loader .splash-spinner{width:var(--ds-avatar-md);height:var(--ds-avatar-md);margin:0}
.screen-loader .splash-spinner div{left:22px;height:14px;width:4px;transform-origin:2px 24px}
.screen-loader-text{color:var(--ds-gold-tan);font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);margin-top:12px;font-family:'Cairo','Tajawal',system-ui,sans-serif}
.splash-logo{width:120px;height:auto;margin-bottom:24px}
@keyframes dotBounce{to{opacity:1;transform:translateY(-6px)}}
/* Result stars (Phase A) */
.result-stars{font-size:clamp(28px,2.6vw,42px);letter-spacing:6px;margin:var(--ds-gap-sm) 0 var(--ds-gap-xs);text-align:center}
/* Splash spinner */
.splash-spinner{width:var(--ds-avatar-lg);height:var(--ds-avatar-lg);position:relative;margin:20px auto 0}
.splash-spinner div{position:absolute;left:30px;top:0;width:5px;height:18px;border-radius:3px;background:var(--primary,var(--ds-gold-tan));transform-origin:2.5px 32px;animation:splashSpin 1.2s linear infinite}
.splash-spinner div:nth-child(1){transform:rotate(0deg);animation-delay:-1.1s}
.splash-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1.0s}
.splash-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-0.9s}
.splash-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-0.8s}
.splash-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-0.7s}
.splash-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-0.6s}
.splash-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-0.5s}
.splash-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-0.4s}
.splash-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-0.3s}
.splash-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-0.2s}
.splash-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-0.1s}
.splash-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}
@keyframes splashSpin{0%{opacity:1}100%{opacity:0.15}}
.splash-text{color:var(--primary,var(--ds-gold-tan));font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);margin-top:12px;font-family:'Cairo','Tajawal',system-ui,sans-serif;letter-spacing:0.5px}
/* Custom scrollbar */
.modal-scroll::-webkit-scrollbar{width:6px}
.modal-scroll::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.modal-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.modal-scroll::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.modal-scroll{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.result-overlay{position:fixed;inset:0;z-index:var(--ds-z-toast);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:var(--ds-gap-md);animation:resFadeIn .3s ease}
@keyframes resFadeIn{from{opacity:0}to{opacity:1}}
.result-modal{position:relative;background:var(--bg);border:var(--ds-card-border-w) solid var(--border);border-radius:var(--ds-card-radius-lg);max-width:clamp(320px,32vw,460px);width:100%;padding:var(--ds-card-pad-lg);box-shadow:var(--ds-shadow-lg),0 20px 60px var(--ds-shade-15);animation:resModalPop .4s cubic-bezier(.17,.67,.35,1.3);overflow:visible}
@keyframes resModalPop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.result-close-btn{position:absolute;top:var(--ds-gap-sm);right:var(--ds-gap-sm);z-index:5;width:var(--ds-btn-icon);height:var(--ds-btn-icon);border:none;border-radius:50%;background:var(--card);color:var(--text);font-size:var(--ds-btn-close-icon);font-weight:var(--ds-fw-black);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--ds-shadow-sm);border:var(--ds-card-border-w) solid var(--border)}
.result-char-wrap{display:flex;flex-direction:column;align-items:center;margin:-8px 0 -10px}
.result-char-img{width:clamp(140px,12vw,200px);height:auto;filter:drop-shadow(0 6px 16px var(--ds-shade-15))}
@keyframes resCharBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.result-xp-strip{display:flex;align-items:center;gap:var(--ds-gap-xs);background:var(--card);border-radius:var(--ds-pill-radius);padding:var(--ds-gap-xs) var(--ds-gap-sm);margin-bottom:var(--ds-gap-sm)}
.result-xp-level{font-size:var(--ds-font-label);font-weight:var(--ds-fw-heavy);color:var(--gold);white-space:nowrap}
.result-xp-bar{flex:1;height:10px;background:var(--bg3);border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 3px var(--ds-shade-1)}
.result-xp-fill{height:100%;background:linear-gradient(90deg,var(--ds-green-bright),#a8e063,var(--ds-gold));border-radius:5px;transition:width .8s cubic-bezier(.4,0,.2,1);box-shadow:0 0 6px rgba(93,207,114,.4)}
.result-xp-gained{font-size:var(--ds-font-label);font-weight:var(--ds-fw-heavy);color:var(--green);white-space:nowrap}
.result-title{font-size:clamp(36px,3.4vw,56px);font-weight:var(--ds-fw-black);text-align:center;margin:-20px 0 2px;color:var(--text)}
.result-cards{display:flex;gap:var(--ds-gap-sm);margin-bottom:var(--ds-gap-sm);max-width:clamp(240px,22vw,340px);margin-left:auto;margin-right:auto}
.result-card{flex:1;background:var(--card);border:var(--ds-card-border-w) solid var(--border);border-radius:var(--ds-card-radius);padding:var(--ds-gap-sm) var(--ds-gap-xs);text-align:center}
.result-card-gold{border-color:var(--ds-gold-4);background:var(--ds-gold-15)}
.result-card-icon{font-size:var(--ds-font-number-md);line-height:1}
.result-card-value{font-size:var(--ds-font-number-lg);font-weight:var(--ds-fw-black);color:var(--text);line-height:1}
.result-card-label{font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);color:var(--muted);margin-top:2px}
.result-btns{display:flex;flex-direction:column;gap:var(--ds-gap-xs)}
.result-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:201}
.confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;top:-10px;animation:confettiFall linear forwards}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}80%{opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
@media(max-height:620px){.result-char-img{width:130px}.result-title{font-size:22px}.result-card{padding:8px 4px}.result-card-value{font-size:16px}.result-modal{padding:var(--ds-card-pad-sm) 16px}.result-xp-strip{padding:5px 8px}}
@media(max-height:520px){.result-char-wrap{margin:-4px 0 4px}.result-char-img{width:100px}.result-cards{margin-bottom:8px}.result-subtitle{margin-bottom:8px}}
.result-char-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.result-char-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:url('assets/glow_fx.webp') center/contain no-repeat;opacity:var(--ds-op-7);pointer-events:none;z-index:0}
.result-char-img{position:relative;z-index:var(--ds-z-base);animation:none!important}
.result-card-coin-icon{width:clamp(22px,1.8vw,30px);height:clamp(22px,1.8vw,30px);vertical-align:middle}
.result-card-row{display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-xs);margin-bottom:var(--ds-gap-xs)}
/* Badge under character */
.result-char-badge{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;border-radius:0;padding:0;font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);color:var(--text2);position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap;letter-spacing:var(--ds-ls-mid);text-shadow:none}
.result-char-badge:empty{display:none}
/* Lose state — dimmed streak card */
.result-card-dimmed{opacity:var(--ds-op-55);filter:grayscale(.6);border-color:var(--bg3)!important;background:var(--bg3)!important}
.result-card-dimmed .result-card-icon{filter:grayscale(1) brightness(.7)}
.result-title-lose{color:var(--red) !important}
.result-xp-lose .result-xp-fill{background:linear-gradient(90deg,var(--ds-orange),#d97550,var(--ds-red-deep))!important;box-shadow:0 0 6px rgba(245,135,95,.4)!important}
.result-xp-lose .result-xp-gained{color:var(--red)!important}
.result-title-win{color:var(--green)!important}
.result-card-fire{border-color:rgba(245,135,95,.4)!important;background:rgba(245,135,95,.08)!important}
/* Vote timer bar */
.vote-timer-bar{position:absolute;top:0;left:0;right:0;height:4px;z-index:20;background:rgba(255,255,255,.2)}
.vote-timer-fill{height:100%;background:var(--gold);border-radius:0 2px 2px 0;transition:width .1s linear}
.vote-timer-fill.urgent{background:var(--red)}
/* Post-vote transition countdown */
.vote-transition{position:absolute;inset:0;z-index:18;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:resFadeIn .2s ease}
.vote-transition-count{font-size:52px;font-weight:var(--ds-fw-black);color:var(--ds-white);text-shadow:0 2px 12px var(--ds-shade-5x);animation:countPop .8s ease}
@keyframes countPop{0%{transform:scale(1.4);opacity:var(--ds-op-5)}100%{transform:scale(1);opacity:1}}
.vote-transition-label{font-size:15px;font-weight:var(--ds-fw-bold);color:var(--ds-tint-85);margin-top:6px;font-family:'Cairo','Tajawal',system-ui,sans-serif;letter-spacing:var(--ds-ls-mid)}
.menu-legal-links{display:flex;justify-content:center;gap:clamp(6px,1.5vw,16px);margin-bottom:4px;flex-wrap:wrap;align-items:center}
.menu-legal-link{font-size:clamp(11px,1.5vw,15px);color:var(--ds-text-soft);text-decoration:none;font-weight:var(--ds-fw-heavy);opacity:1;transition:all var(--ds-tr-mid);padding:3px 2px;border-radius:0;background:none;border:none;border-bottom:var(--ds-bw) solid transparent}
.menu-legal-link:hover,.menu-legal-link:active{opacity:1;background:rgba(0,0,0,0.07)}
.coin-icon-sm{width:18px;height:18px;vertical-align:middle;margin-right:2px}
/* Standard mobile phones */
@media(max-height:750px) and (max-width:500px){
/* menu-screen padding: base clamp */
/* gap: unified */
/* logo: unified clamp */
.btn{height:46px;font-size:15px;border-radius:var(--ds-card-radius)}
.btn-large{padding:0 16px}
.badge{padding:5px 10px;font-size:14px}
.coin-icon-sm{width:15px;height:15px}
/* menu-nav: base clamp */
/* nav-card: base clamp */
/* footer: base */
/* link: base clamp */
.version-text{font-size:clamp(8px,1vw,10px);color:var(--ds-text-tan);font-weight:var(--ds-fw-semibold)}
}
/* Small mobile phones */
@media(max-height:650px) and (max-width:500px){
/* menu-screen padding: base clamp */
/* gap: unified */
/* logo: unified clamp */
.btn{height:40px;font-size:14px;border-radius:var(--ds-card-radius);border-bottom-width:3px}
.btn-icon{width:18px;height:18px}
.badge{padding:4px 8px;font-size:12px}
.coin-icon-sm{width:13px;height:13px}
/* menu-nav: base clamp */
/* nav-card: base clamp */
/* links: base clamp */
/* link: base clamp */
/* version: base clamp */
}
/* Very small / short screens (e.g. iPhone SE, landscape) */
/* ══════════════════════════════════════════════════════════════
UNIFIED MOBILE DESIGN SYSTEM
Applied via max-height media queries (mobile phones only)
Desktop remains completely unchanged.
══════════════════════════════════════════════════════════════ */
/* ── TIER 1: Standard phones (< 780px height) ── */
@media(max-height:780px) and (max-width:500px){
/* Home screen */
/* menu-screen padding: base clamp */
/* gap: unified */
/* logo: unified clamp */
/* menu-nav: base clamp */
/* footer: base */
/* link: base clamp */
.version-text{font-size:clamp(8px,1vw,10px);color:var(--ds-text-tan);font-weight:var(--ds-fw-semibold)}
/* Global components */
.btn{height:48px;font-size:15px;border-radius:var(--ds-card-radius)}
.btn-large{padding:0 16px}
.btn-icon{width:18px;height:18px}
/* icon-btn: base clamp */
.badge{padding:var(--ds-pill-pad);font-size:14px}
.coin-icon-sm{width:15px;height:15px}
/* Header controls */
/* Modals — unified compact */
.modal-content{padding:18px 16px;gap:var(--ds-gap-sm);max-height:88vh}
.modal-content h3{font-size:17px}
.modal-content p{font-size:12px}
.modal-close-btn{width:32px;height:32px;font-size:17px;top:10px;left:10px}
.modal-coins-badge{font-size:14px;padding:var(--ds-pill-pad)}
/* Nav cards (shop/settings on home) */
/* nav-card: base clamp */
/* Levels screen */
.lvl-btn{width:50px;height:50px}
.lvl-btn .level-num{font-size:16px}
.lvl-btn.lv-milestone{width:var(--ds-avatar-md);height:var(--ds-avatar-md)}
/* Leaderboard */
.lb-row{padding:var(--ds-card-pad-sm);gap:var(--ds-gap-sm)}
.lb-rank{font-size:14px;min-width:28px}
.lb-avatar{width:32px;height:32px}
.lb-name{font-size:13px}
.lb-score{font-size:12px}
/* Challenges */
.ch-card{padding:12px}
.ch-icon{font-size:28px}
.ch-title{font-size:14px}
.ch-desc{font-size:11px}
.ch-reward{font-size:11px}
/* Store */
.shop-item{padding:var(--ds-card-pad-sm)}
.shop-item-icon{font-size:28px}
.shop-item-name{font-size:13px}
.shop-item-price{font-size:12px}
/* Profile */
.profile-header{padding:16px 12px}
.profile-avatar-wrap{width:72px;height:72px}
.profile-name{font-size:18px}
.profile-username{font-size:12px}
.profile-stats{gap:var(--ds-gap-xs)}
.profile-stat-card{padding:10px 6px}
.profile-stat-value{font-size:18px}
.profile-stat-label{font-size:10px}
/* Settings */
.settings-section{padding:12px}
.settings-label{font-size:13px}
/* Report */
.report-option{padding:var(--ds-card-pad-sm);font-size:13px}
/* Live room selection */
.live-rooms{gap:var(--ds-gap-sm)}
.live-room-card{padding:14px 10px}
.live-room-entry{font-size:22px}
.live-room-reward{font-size:11px}
/* Camera check */
.live-camera-video{max-height:35vh}
.live-check-steps{gap:var(--ds-gap-sm)}
/* Result overlay */
.result-modal{padding:var(--ds-card-pad-md) 18px;max-width:340px}
.result-char-img{width:130px}
.result-title{font-size:36px;margin:-14px 0 2px}
.result-card{padding:8px 4px}
.result-card-value{font-size:16px}
.result-card-icon{font-size:24px}
/* Live 1v1 */
.live-battle-header{padding:var(--ds-card-pad-sm) 6px}
.live-player-frame{width:var(--ds-avatar-md);height:var(--ds-avatar-md)}
.live-vs{font-size:17px}
.live-match-strip{padding:var(--ds-pill-pad)}
.live-strip-round{font-size:11px}
.live-strip-timer{font-size:14px}
}
/* ── TIER 2: Small phones (< 650px height) ── */
@media(max-height:650px) and (max-width:500px){
/* Home */
/* menu-screen padding: base clamp */
/* gap: unified */
/* logo: unified clamp */
/* menu-nav: base clamp */
/* Global */
.btn{height:42px;font-size:14px;border-radius:var(--ds-card-radius);border-bottom-width:3px}
.badge{padding:4px 8px;font-size:12px}
.coin-icon-sm{width:13px;height:13px}
/* Header */
/* Modals */
.modal-content{padding:14px 12px;gap:var(--ds-gap-xs)}
.modal-content h3{font-size:15px}
.modal-close-btn{width:28px;height:28px;font-size:14px;top:8px;left:8px}
/* Nav cards */
/* nav-card: base clamp */
/* Legal */
/* links: base clamp */
/* link: base clamp */
/* version: base clamp */
/* Levels */
.lvl-btn{width:var(--ds-avatar-md);height:var(--ds-avatar-md)}
.lvl-btn .level-num{font-size:14px}
/* Leaderboard */
.lb-row{padding:6px 8px;gap:var(--ds-gap-xs)}
.lb-avatar{width:28px;height:28px}
.lb-name{font-size:12px}
/* Challenges */
.ch-card{padding:10px}
.ch-icon{font-size:24px}
.ch-title{font-size:13px}
/* Store */
.shop-item{padding:var(--ds-card-pad-sm)}
.shop-item-icon{font-size:24px}
/* Profile */
.profile-avatar-wrap{width:var(--ds-avatar-lg);height:var(--ds-avatar-lg)}
.profile-name{font-size:16px}
.profile-stat-card{padding:8px 4px}
/* Result */
.result-modal{padding:var(--ds-card-pad-sm) 14px;max-width:310px}
.result-char-img{width:100px}
.result-title{font-size:30px;margin:-10px 0 2px}
.result-cards{max-width:220px}
/* Live 1v1 */
.live-player-frame{width:var(--ds-avatar-md);height:var(--ds-avatar-md)}
.live-vs{font-size:14px}
.live-video-area{margin:4px;border-radius:var(--ds-card-radius)}
}
/* ── TIER 3: Very small / landscape (< 550px height) ── */
@media(max-height:550px) and (max-width:500px){
/* gap: unified */
/* logo: unified clamp */
.btn{height:36px;font-size:13px}
/* menu-nav: base clamp */
/* nav-card: base clamp */
.menu-header{gap:var(--ds-gap-xs)}
.modal-content{padding:10px 10px;max-height:95vh}
.result-modal{padding:var(--ds-card-pad-sm) 12px}
.result-char-img{width:70px}
.result-title{font-size:24px}
}
/* ══════════════════════════════════════════════════════════════
WIDTH-BASED MOBILE BREAKPOINTS
Catches narrow phones regardless of height
══════════════════════════════════════════════════════════════ */
/* Standard phone width (< 430px) */
@media(max-width:430px){
/* menu-screen padding: base clamp */
/* gap: unified */
/* logo: unified clamp */
.btn{height:48px;font-size:15px}
.badge{padding:5px 10px;font-size:14px}
.coin-icon-sm{width:15px;height:15px}
/* icon-btn: base clamp */
.modal-content{padding:16px 14px;max-width:calc(100vw - 24px)}
.modal-frame{max-width:calc(100vw - 24px)}
/* nav-card: base clamp */
.live-room-card{padding:14px 8px}
.live-rooms{gap:var(--ds-gap-sm)}
.result-modal{max-width:calc(100vw - 32px)}
}
/* Narrow phone width (< 360px — iPhone SE, small Android) */
@media(max-width:360px){
/* menu-screen padding: base clamp */
/* gap: unified */
/* logo: unified clamp */
.btn{height:44px;font-size:14px;border-radius:var(--ds-card-radius);gap:var(--ds-gap-xs)}
.badge{padding:4px 8px;font-size:12px}
/* icon-btn: base clamp */
.modal-content{padding:14px 12px;gap:var(--ds-gap-xs)}
.modal-content h3{font-size:16px}
/* nav-card: base clamp */
/* link: base clamp */
.lb-row{padding:6px 8px}
.lb-avatar{width:28px;height:28px}
.ch-card{padding:10px}
.shop-item{padding:var(--ds-card-pad-sm)}
.profile-avatar-wrap{width:var(--ds-avatar-lg);height:var(--ds-avatar-lg)}
.result-modal{padding:12px 12px 16px}
.result-char-img{width:110px}
.result-title{font-size:32px}
.live-player-frame{width:var(--ds-avatar-md);height:var(--ds-avatar-md)}
.live-vs{font-size:15px}
}
/* Combined: narrow AND short (true small phone) */
@media(max-width:380px) and (max-height:700px){
/* gap: unified */
/* logo: unified clamp */
.btn{height:42px}
.result-modal{padding:10px 10px 14px}
.result-char-img{width:90px}
.result-title{font-size:28px}
}
/* ══════════════════════════════════════════════════════════════
PHASE 1: Mobile polish — Profile, Settings, Store, Report
Desktop UNTOUCHED. All inside max-width queries.
══════════════════════════════════════════════════════════════ */
@media(max-width:430px){
/* ── PROFILE ── */
.profile-header-card{padding:20px 16px 14px;border-radius:var(--ds-card-radius-lg);margin:-4px -4px 6px}
.profile-avatar-wrap{width:64px!important;height:64px!important}
.profile-name{font-size:18px}
.profile-name-wrap{margin:8px 0 2px;gap:var(--ds-gap-xs)}
.profile-username{font-size:11px}
.profile-stats{gap:var(--ds-gap-xs);margin:0 0 8px}
.profile-stats .profile-stat-card{padding:8px 4px}
.profile-stats .profile-stat-value{font-size:16px}
.profile-stats .profile-stat-label{font-size:9px}
.profile-actions-section{gap:var(--ds-gap-sm);margin:0 0 6px}
.profile-actions-section .btn{height:48px;font-size:14px;border-radius:var(--ds-card-radius)}
.profile-xp-section{padding:10px 0}
/* ── SETTINGS ── */
.settings-content{padding:0 12px 16px}
.settings-section{margin-bottom:10px}
.settings-row{padding:8px 0;gap:var(--ds-gap-sm)}
.settings-label{font-size:12px}
.settings-value{font-size:12px}
.settings-slider{height:4px}
.settings-toggle{width:44px;height:24px}
.settings-footer{padding:10px 0;gap:var(--ds-gap-xs)}
.settings-footer .btn{height:40px;font-size:13px}
/* ── STORE ── */
.shop-section{margin-bottom:12px}
.shop-acc-header{padding:var(--ds-card-pad-sm);font-size:14px}
.shop-item{padding:var(--ds-card-pad-sm);gap:var(--ds-gap-sm);border-radius:var(--ds-card-radius)}
.shop-item-icon{font-size:26px;width:38px;height:38px;min-width:38px}
.shop-item-info{gap:2px}
.shop-item-name{font-size:12px}
.shop-item-desc{font-size:10px}
.shop-item-price{font-size:11px;padding:4px 10px}
.shop-item-owned{font-size:10px}
/* ── REPORT ── */
.report-options{gap:var(--ds-gap-xs)}
.report-option{padding:var(--ds-card-pad-sm);font-size:12px;border-radius:var(--ds-card-radius)}
.report-option-icon{font-size:18px}
}
@media(max-width:360px){
/* ── PROFILE ── */
.profile-header-card{padding:16px 12px 12px;border-radius:var(--ds-card-radius)}
.profile-avatar-wrap{width:56px!important;height:56px!important}
.profile-name{font-size:16px}
.profile-stats .profile-stat-value{font-size:14px}
.profile-stats .profile-stat-label{font-size:8px}
.profile-actions-section .btn{height:38px;font-size:12px}
/* ── SETTINGS ── */
.settings-content{padding:0 10px 12px}
.settings-label{font-size:11px}
.settings-footer .btn{height:36px;font-size:12px}
/* ── STORE ── */
.shop-acc-header{padding:var(--ds-card-pad-sm);font-size:13px}
.shop-item{padding:6px 8px}
.shop-item-icon{font-size:22px;width:34px;height:34px;min-width:34px}
.shop-item-name{font-size:11px}
.shop-item-price{font-size:10px;padding:3px 8px}
/* ── REPORT ── */
.report-option{padding:var(--ds-card-pad-sm);font-size:11px}
}
/* Profile: fixed shell + internal tab scroll (mobile only) */
@media(max-width:430px){
max-height:90vh;
display:flex;
flex-direction:column;
overflow:hidden!important;
}
.profile-header-card,
.profile-stats,
.profile-actions-section,
flex-shrink:0;
}
flex:1;
order:2;
overflow-y:auto;
overflow-x:hidden;
min-height:0;
-webkit-overflow-scrolling:touch;
padding-bottom:12px;
}
}
/* Desktop: tab scroll area is not height-constrained */
@media(min-width:431px){
/* no height constraint — modal-scroll handles outer scroll */
}
}
/* ===== Profile Full Screen Page ===== */
#profile-screen{z-index:var(--ds-z-overlay);flex-direction:column;overflow:hidden}
.profile-screen-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ds-pad-screen-y) var(--ds-pad-screen-x);flex-shrink:0;position:relative;z-index:var(--ds-z-content);border-bottom:var(--ds-bw-thick) solid var(--ds-gold-2)}
.profile-screen-header .back-btn{flex-shrink:0;width:var(--ds-btn-close);height:var(--ds-btn-close);border-radius:clamp(12px,0.9vw,16px);border:none;background:var(--ds-red);color:var(--ds-white);font-size:var(--ds-btn-close-icon);cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:var(--ds-fw-black);box-shadow:0 3px 0 var(--ds-red-dark),0 4px 10px var(--ds-shade-15);transition:transform,box-shadow,filter var(--ds-tr-fast)}
.profile-screen-header .back-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ds-red-dark)}
.profile-screen-title{margin:0;font-size:var(--ds-font-page-title);font-weight:var(--ds-fw-heavy);font-family:'Cairo',sans-serif;background:linear-gradient(180deg,var(--ds-gold-soft) 0%,var(--ds-gold) 40%,var(--ds-gold-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 3px 2px var(--ds-shade-4));letter-spacing:var(--ds-ls-wide)}
.profile-page{flex:1;overflow-y:auto;overflow-x:hidden;padding:clamp(10px,2vw,20px) clamp(20px,4vw,60px) clamp(40px,5vw,80px);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--ds-gold-3) transparent}
.profile-page::-webkit-scrollbar{width:6px}
.profile-page::-webkit-scrollbar-track{background:transparent}
.profile-page::-webkit-scrollbar-thumb{background:var(--ds-gold-3);border-radius:3px}
.profile-page::-webkit-scrollbar-thumb:hover{background:var(--ds-gold-5)}
.profile-page-body{display:flex;flex-direction:column;gap:clamp(14px,2vw,20px);width:100%;max-width:800px;margin:0 auto}
.profile-page-body .profile-header-card{margin:0;border-radius:var(--ds-card-radius-lg);padding:clamp(20px,3vw,28px) clamp(16px,2.5vw,24px) clamp(14px,2vw,20px)}
.profile-page-body .profile-stats{margin:0}
.profile-page-body .profile-actions-section{margin:0;gap:var(--ds-gap-sm)}
.profile-page-body .profile-actions-section .btn{height:50px;font-size:var(--ds-font-body);border-radius:var(--ds-card-radius)}
/* Profile Segmented Tabs (reuses .shop-tab) */
.profile-seg-tabs{display:flex;gap:var(--ds-gap-xs);padding:var(--ds-gap-sm) 0;justify-content:center;position:relative}
.profile-seg-tabs::after{content:'';position:absolute;bottom:0;left:5%;right:5%;height:2px;background:linear-gradient(90deg,transparent,var(--ds-gold-dark),transparent)}
.profile-seg-tabs .shop-tab{min-width:auto;flex:1;padding:var(--ds-card-pad-sm);font-size:var(--ds-font-body)}
.profile-panel{display:none}
.profile-panel.active{display:block}
/* Username edit row */
.pp-username-row{display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-xs);cursor:pointer;padding:4px 8px;border-radius:var(--ds-card-radius);transition:background .15s}
.pp-username-row:active{background:var(--ds-shade-5)}
.pp-username-edit{font-size:var(--ds-font-label);opacity:var(--ds-op-5);transition:opacity .2s}
.pp-username-row:hover .pp-username-edit{opacity:1}
[dir="rtl"] .vol-slider{direction:ltr}
/* container constraint removed — unified fluid layout */
/* ═══ Unified Player Badge (all screens) ═══ */
#menu-screen[data-logged-in=1] .desk-player-badge{display:flex !important}
.desk-player-badge{
display:none;
align-items:center;
gap:clamp(8px,0.7vw,12px);
padding:0 clamp(18px,1.3vw,24px) 0 clamp(4px,0.3vw,6px);min-height:clamp(50px,4.4vw,74px);
background:linear-gradient(180deg,var(--ds-cream-warm) 0%,#f8edc8 100%);
border:var(--ds-bw-mid) solid var(--ds-gold-45);
border-radius:var(--ds-pill-radius);
box-shadow:
0 6px 18px rgba(139,109,56,0.18),
0 1px 0 var(--ds-tint-9) inset,
0 -2px 6px var(--ds-gold-15) inset;
cursor:pointer;
transition:transform var(--ds-tr),box-shadow .2s ease,border-color .2s ease;
position:relative;
margin:clamp(4px,0.6vw,8px) clamp(6px,0.8vw,12px);
}
.desk-player-badge:hover{
transform:translateY(-1px);
border-color:rgba(196,155,60,0.7);
box-shadow:
0 10px 24px rgba(139,109,56,0.24),
0 1px 0 rgba(255,255,255,1) inset,
0 -2px 6px var(--ds-gold-2) inset;
}
.desk-player-badge:active{transform:translateY(0) scale(0.98)}
.dpb-avatar-wrap{
width:clamp(52px,4.4vw,68px);height:clamp(52px,4.4vw,68px);
margin-block:clamp(-6px,-0.6vw,-10px);
margin-inline-start:clamp(-10px,-1vw,-16px);
border-radius:50%;
border:var(--ds-bw-thick) solid #fff;
box-shadow:
0 0 0 2px var(--ds-gold),
0 4px 10px var(--ds-gold-35);
overflow:hidden;flex-shrink:0;
background:linear-gradient(135deg,#fff,var(--ds-cream-tan));
z-index:var(--ds-z-content);
}
.dpb-avatar-img{
width:100%;height:100%;object-fit:cover;border-radius:50%;display:none;
}
.dpb-avatar-emoji{
width:100%;height:100%;display:flex;align-items:center;justify-content:center;
font-size:clamp(20px,1.8vw,30px);
}
.dpb-info{
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
gap:2px;min-width:0;
padding-inline:clamp(6px,0.6vw,12px);
}
.dpb-name{
font-size:var(--ds-font-card-title);
font-weight:var(--ds-fw-black);color:#75552a;
white-space:nowrap;
line-height:var(--ds-lh-tight);letter-spacing:.1px;
text-align:start;
width:auto;
}
.dpb-coins-row{
display:inline-flex;align-items:center;justify-content:flex-start;
gap:var(--ds-gap-xs);
padding:0;
margin-top:1px;
background:transparent;
border:none;
align-self:flex-start;
}
.dpb-coin-icon{
width:clamp(18px,1.5vw,24px);height:clamp(18px,1.5vw,24px);
flex-shrink:0;
filter:drop-shadow(0 1px 1px var(--ds-shade-15));
}
.dpb-coins-row span{
font-size:var(--ds-font-body);
font-weight:var(--ds-fw-black);color:var(--ds-text-muted);
direction:ltr;line-height:1;
font-variant-numeric:tabular-nums;
}
/* ═══ Game Menu Cards (gmc) ═══ */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;row-gap:clamp(22px,2.4vw,34px);column-gap:clamp(14px,2vw,24px);width:min(95vw,720px);margin:0 auto}
.gmc{position:relative;background:transparent;padding:0;border:none;cursor:pointer;display:block;touch-action:manipulation;outline-offset:4px;font-family:inherit}
.gmc-shadow{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--ds-card-radius);background:var(--ds-shade-25);transform:translateY(4px);transition:transform .15s cubic-bezier(.3,.7,.4,1);z-index:var(--ds-z-base)}
.gmc-edge{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--ds-card-radius);z-index:var(--ds-z-content)}
.gmc-body{position:relative;display:flex;flex-direction:row-reverse;align-items:center;border-radius:clamp(14px,1.2vw,18px);height:clamp(62px,5.2vw,82px);transform:translateY(-6px);transition:transform .1s cubic-bezier(.3,.7,.4,1),background .15s;border:var(--ds-bw) solid rgba(255,255,255,0.25);z-index:3;overflow:visible}
.gmc-body::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;border-radius:var(--ds-card-radius);background:linear-gradient(90deg,transparent,var(--ds-tint-15),transparent);transition:.5s;z-index:4;pointer-events:none}
.gmc:hover .gmc-body::after{left:100%}
.gmc-text{flex:1 1 100%;display:flex;align-items:center;justify-content:center;width:100%;font-size:clamp(20px,2.2vw,28px);font-weight:var(--ds-fw-black);letter-spacing:var(--ds-ls-wide);color:var(--ds-white);text-shadow:0 3px 0 var(--ds-shade-2),0 -1px 0 var(--ds-tint-3),0 6px 12px var(--ds-shade-15);padding:0 clamp(8px,1vw,14px);z-index:3;position:relative;-webkit-text-stroke:0.5px var(--ds-shade-1)}
/* Base art layer (shared properties). Per-card overrides below. */
.gmc-art{position:absolute;top:0;height:100%;display:flex;align-items:flex-end;justify-content:center;overflow:visible;pointer-events:none;inset-inline-end:0}
.gmc-art img{object-fit:contain;object-position:bottom center;filter:drop-shadow(0 2px 4px var(--ds-shade-2));position:relative;bottom:0}
/* ══ Green card (تحديات المراحل) — character on the RIGHT ══
Tune these numbers to adjust position/size: */
.gmc-body-green .gmc-art{
width: 42%; /* ← عرض منطقة الشخصية من الكرت */
inset-inline-end: auto;
inset-inline-start: -7%; /* ← سالب = يطلع يمين أكثر (0 = ملاصق للحافة) */
bottom: 0; /* ← ارتفاع عن الأسفل */
}
.gmc-body-green .gmc-art img{
width: 100%; /* ← حجم الصورة داخل المنطقة */
height: clamp(110px, 11vw, 150px); /* ← ارتفاع الشخصية */
transform: translateX(0); /* ← موجب = تحريك يسار، سالب = تحريك يمين (RTL) */
}
/* ══ Purple card (تحديات مباشرة) — character on the LEFT ══
Tune these numbers to adjust position/size: */
.gmc-body-purple .gmc-art{
width: 42%;
inset-inline-end: -8%; /* ← سالب = يطلع يسار أكثر */
inset-inline-start: auto;
bottom: 0;
}
.gmc-body-purple .gmc-art img{
width: 100%;
height: clamp(110px, 11vw, 150px);
transform: translateX(0);
}
.gmc:hover .gmc-body{transform:translateY(-4px)}
.gmc:hover .gmc-shadow{transform:translateY(3px)}
.gmc:active .gmc-body{transform:translateY(-1px);transition:transform 34ms}
.gmc:active .gmc-shadow{transform:translateY(1px);transition:transform 34ms}
.gmc-edge-green{background:linear-gradient(to left,var(--ds-green-forest) 0%,var(--ds-green-light) 8%,var(--ds-green-light) 92%,var(--ds-green-forest) 100%)}
.gmc-body-green{background:linear-gradient(135deg,var(--ds-green-bright),var(--ds-green-mid))}
.gmc:active .gmc-body-green{background:linear-gradient(135deg,#6eda82,var(--ds-green-bright))}
.gmc-edge-purple{background:linear-gradient(to left,var(--ds-purple-dark-vivid) 0%,#7d3c98 8%,#7d3c98 92%,var(--ds-purple-dark-vivid) 100%)}
.gmc-body-purple{background:linear-gradient(135deg,var(--ds-purple-violet),#8e44ad);flex-direction:row}
.gmc:active .gmc-body-purple{background:linear-gradient(135deg,#a96bc4,var(--ds-purple-violet))}
.gmc-edge-orange{background:linear-gradient(to left,#b85a3a 0%,var(--ds-orange-rust) 8%,var(--ds-orange-rust) 92%,#b85a3a 100%)}
.gmc-body-orange{background:linear-gradient(135deg,var(--ds-orange),#e07550)}
.gmc:active .gmc-body-orange{background:linear-gradient(135deg,#f79b78,var(--ds-orange))}
.gmc-edge-blue{background:linear-gradient(to left,#1d4e89 0%,#2e6bb0 8%,#2e6bb0 92%,#1d4e89 100%)}
.gmc-body-blue{background:linear-gradient(135deg,#3c8dd9,#2563a6);flex-direction:row}
.gmc:active .gmc-body-blue{background:linear-gradient(135deg,#5aa3e8,#3c8dd9)}
.gmc-badge{position:absolute;top:-8px;left:-8px;background:#16a34a;color:#fff;font-size:12px;font-weight:900;min-width:24px;height:24px;line-height:22px;text-align:center;border-radius:12px;padding:0 7px;box-shadow:0 3px 10px rgba(22,163,74,.55),0 0 0 2.5px #fff;pointer-events:none;z-index:10}
.gmc-edge-gold{background:linear-gradient(to left,#a88520 0%,#c9a020 8%,#c9a020 92%,#a88520 100%)}
.gmc-body-gold{background:linear-gradient(135deg,#f0c040,#d4a830)}
.gmc:active .gmc-body-gold{background:linear-gradient(135deg,#f5cc5a,#f0c040)}
/* ═══ DEVICE CLASS: PHONES (max-width:767px) ═══ */
/* Values converge to desktop at 767px boundary — no jump */
@media(max-width:899px){
.screen{background-image:url("assets/bgMobile.webp")}
#menu-screen{
display:grid;
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto minmax(0,auto) minmax(0,1fr) auto;
align-content:start;
row-gap:clamp(6px,1.4vh,10px);
min-height:100dvh;
overflow-y:auto;
overflow-x:hidden;
padding:8px clamp(12px,3vw,16px) 10px;
}
#menu-screen .menu-header{flex-shrink:0;margin:0}
#menu-screen .menu-content{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:0;
gap:clamp(8px,2vh,14px);
width:100%;
flex:1;
min-height:0;
}
.gmc-shadow,.gmc-edge{border-radius:var(--ds-card-radius)}
.dpb-info{min-width:90px}
#menu-screen .menu-legal-links{gap:var(--ds-gap-sm) 14px;row-gap:var(--ds-gap-xs)}
#menu-screen .menu-legal-link{font-size:clamp(11px,2.5vw,13px);line-height:var(--ds-lh-snug)}
#menu-screen .version-text{font-size:clamp(8px, 1.8vw, 10px)}
#menu-screen .icon-btn{width:clamp(30px, 6.52vw, 50px);height:clamp(30px, 6.52vw, 50px)}
#menu-screen .icon-btn svg{width:clamp(13px, 2.61vw, 20px);height:clamp(13px, 2.61vw, 20px)}
}
/* ═══ DEVICE CLASS: SMALL PHONES (max-width:360px) ═══ */
@media(max-width:360px){
#menu-screen{padding:6px 10px 8px;row-gap:var(--ds-gap-xs)}
#menu-screen .menu-content{gap:var(--ds-gap-xs)}
display:flex;
flex-direction:column;
}
#achievements-modal .modal-content h3,
#items-modal .modal-content h3{
flex-shrink:0;
margin-bottom:12px;
}
#achievements-modal .achievements-grid,
#items-modal .items-grid{
flex:1;
overflow-y:auto;
min-height:0;
max-height:60vh;
-webkit-overflow-scrolling:touch;
padding-bottom:8px;
}
/* Modal profile name: cream inset bar */
.modal-content .profile-name-wrap{
background:var(--ds-cream-fdf);
border:var(--ds-bw) solid rgba(210,200,175,0.35);
border-radius:var(--ds-card-radius);
padding:var(--ds-card-pad-sm);
box-shadow:inset 0 1px 4px var(--ds-shade-5);
max-width:320px;
width:100%;
margin:4px auto;
justify-content:center;
}
.modal-content .profile-name-wrap:hover{
background:var(--ds-cream-shell);
}
.modal-content .profile-username{
background:var(--ds-cream-fdf);
border:var(--ds-bw) solid rgba(210,200,175,0.35);
border-radius:var(--ds-card-radius);
padding:var(--ds-card-pad-sm);
box-shadow:inset 0 1px 4px var(--ds-shade-5);
max-width:320px;
width:100%;
margin:4px auto;
cursor:pointer;
}
.modal-content .profile-username:hover{
background:var(--ds-cream-shell);
}
/* Refine modal name/username bars */
.modal-content .profile-name-wrap{
padding:7px 14px !important;
position:relative;
background:#f5edd5 !important;
}
.modal-content .profile-name-wrap .profile-name-edit{
position:absolute;
left:12px !important;right:auto !important;
top:50%;
transform:translateY(-50%);
}
.modal-content .profile-username{
padding:7px 14px !important;
background:#f5edd5 !important;
}
/* Username pencil icon in modal */
.modal-content .profile-username::after{cursor:pointer;
content:'✏️';
font-size:var(--ds-font-body-sm);
position:absolute;
left:12px !important;right:auto !important;
top:50%;
transform:translateY(-50%);
opacity:1;
}
.modal-content .profile-username:hover::after{opacity:0.8}
.username-locked::after{display:none !important}
.username-locked{cursor:pointer !important}
/* Cooldown modal above profile modal */
#username-cooldown-modal{z-index:var(--ds-z-toast)}
#username-cooldown-modal .modal-close-btn{display:none}
/* ═══ DEVICE CLASS: DESKTOP (768px+) ═══ */
/* Locked desktop baseline: 768-1200px, no tablet jump identical, gentle scaling above 1200 */
@media(min-width:900px){
/* Page container — overflow hidden prevents scrollbar-width oscillation */
#menu-screen{
padding:8px clamp(20px, 1.7vw, 40px) 8px;
justify-content:flex-start;
overflow:hidden;
}
#menu-screen .menu-content{justify-content:center;padding:0}
.gmc-shadow,.gmc-edge{border-radius:clamp(16px,1.2vw,22px)}
#menu-screen .desk-player-badge:active{transform:scale(0.98)}
#menu-screen
/* Menu info strip — streak + rank + daily */
#menu-screen .menu-legal-links{gap:clamp(18px,1.4vw,26px)}
#menu-screen .menu-legal-link{font-size:clamp(18px,1vw,15px)}
#menu-screen .version-text{font-size:var(--ds-font-label)}
}
/* ═══ DEVICE CLASS: LARGE SCREENS (1400px+) ═══ */
/* ═══ DEVICE CLASS: 4K SCREENS (2200px+) ═══ */
/* Large screens (1400px+) */
@media(min-width:1400px){
.gmc-shadow,.gmc-edge{border-radius:var(--ds-card-radius-lg)}
.settings-btn svg,.notif-btn svg{width:32px;height:32px}
#menu-screen .menu-legal-link{font-size:18px}
}
/* 4K screens (2200px+) */
@media(min-width:2200px){
/* Logo — bigger, less negative margin */
.menu-logo{padding:0 !important;overflow:visible !important}
/* Header layout */
#menu-screen{padding:24px 80px !important}
.menu-header{padding:12px 0 !important}
/* Settings + Notifications — proportional */
.settings-btn,.notif-btn{width:52px !important;height:52px !important}
.settings-btn svg,.notif-btn svg{width:40px !important;height:40px !important}
.menu-header-right{gap:var(--ds-gap-md) !important}
/* Profile badge uses base clamp() — no forced oversize */
/* Quick icons row */
.menu-quick-row{margin:clamp(20px,3vh,36px) auto 0 !important;gap:var(--ds-gap-xl) !important}
/* Footer */
#menu-screen .menu-legal-link{font-size:20px !important}
#menu-screen .version-text{font-size:16px !important}
/* Menu info strip — streak + rank + daily */
}
/* iPad Pro portrait strict (touch + portrait + width 810-1024 + tall height) */
@media(min-width:810px) and (max-width:1024px) and (min-height:1100px) and (orientation:portrait) and (pointer:coarse){
width:clamp(90%, 38vw, 120%);
opacity:0.65;
}
}
/* ═══ PHASE 2: Profile Modal — Desktop PC only (1024px+) ═══ */
@media(min-width:1024px){
/* Wider modal on desktop */
max-width:560px;
padding:28px 28px 24px;
gap:var(--ds-gap-md);
}
/* Avatar */
width:88px;
height:88px;
}
font-size:52px;
}
/* Name / Username */
font-size:var(--ds-font-page-title);
}
margin:16px 0 4px;
gap:var(--ds-gap-sm);
}
font-size:var(--ds-font-body);
}
/* Header card */
padding:28px 24px 20px;
border-radius:var(--ds-card-radius-lg);
}
/* Stats grid */
gap:var(--ds-gap-sm);
margin:0 0 14px;
}
padding:12px 6px;
border-radius:var(--ds-card-radius);
}
font-size:var(--ds-font-card-title);
}
font-size:var(--ds-font-label);
}
/* Action buttons */
gap:var(--ds-gap-sm);
}
height:50px;
font-size:var(--ds-font-body);
border-radius:var(--ds-card-radius);
}
/* Tabs */
width:110px;
height:96px;
border-radius:var(--ds-card-radius-lg);
}
font-size:32px;
}
font-size:var(--ds-font-label);
}
/* Name/username edit bars in modal */
max-width:400px;
padding:10px 16px;
border-radius:var(--ds-card-radius);
}
/* Profile full-screen page */
.profile-page-body{
max-width:560px;
}
.profile-page-body .profile-header-card{
padding:28px 22px 18px;
border-radius:var(--ds-card-radius-lg);
}
width:110px;
height:96px;
border-radius:var(--ds-card-radius-lg);
}
font-size:32px;
}
}
/* ═══ PHASE 3: Settings Modal — Desktop PC only (1024px+) ═══ */
@media(min-width:1024px){
/* Wider modal */
#settings-modal .modal-content{
max-width:520px;
padding:28px 24px;
gap:var(--ds-gap-md);
}
/* Setting groups */
#settings-modal .setting-group{
padding:18px 20px;
border-radius:var(--ds-card-radius);
margin-bottom:14px;
}
#settings-modal .setting-group h3{
font-size:var(--ds-font-body);
margin-bottom:12px;
}
/* Setting rows */
#settings-modal .setting-row{
padding:12px 0;
font-size:var(--ds-font-card-title);
}
#settings-modal .setting-val{
font-size:var(--ds-font-body);
max-width:200px;
}
/* Toggle switch */
#settings-modal .toggle-switch{
width:58px;
height:32px;
}
#settings-modal .toggle-slider{
border-radius:var(--ds-card-radius-lg);
}
#settings-modal .toggle-slider::after{
width:26px;
height:26px;
top:3px;
left:3px;
}
#settings-modal .toggle-switch input:checked+.toggle-slider::after{
transform:translateX(26px);
}
/* Volume slider */
#settings-modal .vol-slider{
height:8px;
border-radius:4px;
}
#settings-modal .vol-slider::-webkit-slider-thumb{
width:26px;
height:26px;
}
#settings-modal .vol-slider::-moz-range-thumb{
width:26px;
height:26px;
}
/* Language select */
#settings-modal select{
font-size:var(--ds-font-body);
padding:8px 14px;
border-radius:var(--ds-card-radius);
}
/* Title */
#settings-modal .modal-content h3{
font-size:var(--ds-font-card-title);
}
}
/* ═══ PHASE 4: Levels Page — Desktop PC only (1024px+) ═══ */
@media(min-width:1024px){
/* Header */
#levels-screen .levels-header{
padding:16px 24px;
}
#levels-screen .levels-header h2{
font-size:var(--ds-font-page-title);
}
#levels-screen .back-btn{
width:44px;
height:44px;
font-size:var(--ds-font-card-title);
}
#levels-screen .levels-header-space{
width:44px;
}
/* Map area */
#levels-screen .levels-map{
padding:16px 30px 40px;
}
/* Wider container */
#levels-screen .lp-container{
max-width:520px;
}
/* Level buttons */
#levels-screen .lvl-btn{
width:76px;
height:76px;
}
#levels-screen .lvl-btn .level-num{
font-size:var(--ds-font-page-title);
}
#levels-screen .lvl-btn .lvl-front{
font-size:var(--ds-font-page-title);
}
#levels-screen .lvl-btn .lv-stars{
font-size:var(--ds-font-body-sm);
bottom:-16px;
letter-spacing:2px;
}
/* Milestone buttons */
#levels-screen .lvl-btn.lv-milestone{
width:84px;
height:84px;
}
#levels-screen .lvl-btn.lv-milestone .lvl-front{
font-size:var(--ds-font-page-title);
}
/* Connector */
#levels-screen .lp-hline{
width:50px;
}
/* Bridge — tighter vertical gap */
#levels-screen .lp-bridge{
height:38px;
}
}
/* ═══ PHASE 5A: Challenges Modal — Desktop PC only (1024px+) ═══ */
@media(min-width:1024px){
/* Wider modal */
#challenges-modal .modal-content{
max-width:560px;
padding:28px 24px;
}
#challenges-modal .modal-content h3{
font-size:var(--ds-font-card-title);
}
/* Grid */
#challenges-modal .ch-list{
gap:var(--ds-gap-md);
padding:20px;
}
/* Cards */
#challenges-modal .ch-card{
height:160px;
padding:16px 14px;
border-radius:var(--ds-card-radius);
gap:var(--ds-gap-sm);
}
/* Icon */
#challenges-modal .ch-icon{
font-size:32px;
width:50px;
height:50px;
border-radius:var(--ds-card-radius);
}
/* Text */
#challenges-modal .ch-title{
font-size:var(--ds-font-body);
}
#challenges-modal .ch-desc{
font-size:var(--ds-font-body-sm);
margin-top:2px;
}
#challenges-modal .ch-reward{
font-size:var(--ds-font-body-sm);
margin-top:3px;
}
/* Status / completed badge */
#challenges-modal .ch-status{
font-size:var(--ds-font-card-title);
}
#challenges-modal .ch-card.ch-completed::after{
width:26px;
height:26px;
font-size:var(--ds-font-body);
}
}
/* ═══ PHASE 5B: Live Challenge — Desktop PC only (1024px+) ═══ */
@media(min-width:1024px){
/* Video player — raise phone caps */
#game-screen .video-container{
width:min(55vh, 520px);
height:min(78vh, 720px);
max-width:480px;
max-height:720px;
min-width:320px;
min-height:420px;
border-radius:var(--ds-card-radius-lg);
}
/* Title */
#game-screen .video-title{
font-size:var(--ds-font-body);
margin-bottom:4px;
}
/* Header */
#game-screen .game-header{
padding:12px 24px;
}
#game-screen .close-btn{
width:46px;
height:46px;
font-size:var(--ds-font-card-title);
}
/* Badges in header */
#game-screen .badge{
font-size:var(--ds-font-card-title);
padding:var(--ds-pill-pad);
}
#game-screen .badge.sm{
padding:7px 14px;
font-size:var(--ds-font-body);
}
/* Powerups — even bigger on tall mobile so they read at a glance */
#game-screen .powerups-bar{
padding:10px 0 6px;
gap:var(--ds-gap-md);
min-height:52px;
}
#game-screen .pu-btn,
#game-screen .pu-info{
font-size:var(--ds-font-card-title);
padding:11px 20px;
border-radius:var(--ds-card-radius-lg);
}
/* Speed timer */
#game-screen .speed-timer{
font-size:var(--ds-font-card-title);
padding:5px 16px;
}
/* Modifier badge */
#game-screen .ch-modifier-badge{
font-size:var(--ds-font-body);
padding:4px 14px;
}
}
/* ═══ PHASE 5C: Leaderboard Modal — Desktop PC only (1024px+) ═══ */
@media(min-width:1024px){
/* Wider modal */
#leaderboard-modal .modal-content{
max-width:580px;
padding:28px 24px;
}
#leaderboard-modal .modal-content h3{
font-size:var(--ds-font-card-title);
}
/* Column header — widen grid + readability */
#leaderboard-modal .lb-col-header{
grid-template-columns:40px 42px 1fr 55px 55px;
gap:var(--ds-gap-sm);
padding:var(--ds-card-pad-sm);
font-size:var(--ds-font-label);
}
/* Rows — widen grid + comfortable spacing */
#leaderboard-modal .lb-row{
grid-template-columns:40px 42px 1fr 55px 55px;
gap:var(--ds-gap-sm);
padding:12px 12px;
margin-bottom:8px;
}
#leaderboard-modal .lb-row.lb-top{
padding:14px 12px;
}
/* Avatar */
#leaderboard-modal .lb-avatar{
width:42px;
height:42px;
}
/* Name */
#leaderboard-modal .lb-name{
font-size:var(--ds-font-body);
}
#leaderboard-modal .lb-uname{
font-size:var(--ds-font-label);
}
/* Stat values */
#leaderboard-modal .lb-val{
font-size:var(--ds-font-body);
}
}
/* ═══ PHASE 6: Store Modal — Desktop PC only (1024px+) ═══ */
@media(min-width:1024px){
/* Wider modal */
#shop-modal .modal-content{
max-width:580px;
padding:28px 24px;
}
#shop-modal .modal-content h3{
font-size:var(--ds-font-card-title);
}
/* Shop list spacing */
#shop-modal .shop-list{
padding:0 14px 24px;
}
/* Accordion button */
#shop-modal .shop-acc-btn{
padding:var(--ds-card-pad-md);
border-radius:var(--ds-card-radius);
}
#shop-modal .shop-acc-title{
font-size:var(--ds-font-body);
}
/* Product cards */
#shop-modal .shop-card{
padding:var(--ds-card-pad-md);
margin-bottom:10px;
gap:var(--ds-gap-md);
}
/* Emoji/icon box */
#shop-modal .shop-emoji{
font-size:38px;
width:56px;
height:56px;
border-radius:var(--ds-card-radius);
}
/* Product info */
#shop-modal .shop-name{
font-size:var(--ds-font-card-title);
}
#shop-modal .shop-desc{
font-size:var(--ds-font-body-sm);
margin-top:4px;
}
/* Buy button */
#shop-modal .shop-buy{
font-size:var(--ds-font-body);
padding:10px 18px;
border-radius:var(--ds-card-radius);
}
/* Count/owned badges */
#shop-modal .shop-count,
#shop-modal .shop-badge-owned{
font-size:var(--ds-font-label);
}
/* Section spacing */
#shop-modal .shop-section{
margin-bottom:20px;
}
}
/* ═══ PHASE 7: Final QA Fixes — Desktop PC only (1024px+) ═══ */
@media(min-width:1024px){
/* Result modal */
.result-modal{
max-width:420px;
padding:22px 24px 26px;
}
.result-card-label{
font-size:var(--ds-font-label);
}
.result-xp-level{
font-size:var(--ds-font-label);
}
.result-xp-gained{
font-size:var(--ds-font-label);
}
/* Coin store */
.coinstore-note{
font-size:var(--ds-font-body-sm);
}
.coinstore-popular-tag{
font-size:var(--ds-font-label);
}
.coin-store-btn{
width:28px;
height:28px;
font-size:var(--ds-font-card-title);
}
.coinstore-card-bonus{
font-size:var(--ds-font-body-sm);
}
/* Notifications */
#notifications-modal .notif-time{
font-size:var(--ds-font-label);
}
#notifications-modal .notif-msg{
font-size:var(--ds-font-body);
}
#notifications-modal .notif-empty{
font-size:var(--ds-font-body);
}
}
/* ===== SHOP - Premium Design ===== */
#shop-modal{z-index:200!important}
#shop-modal .modal-frame{max-width:540px!important;border-radius:var(--ds-card-radius-lg)!important}
#shop-modal .modal-close-btn{top:-15px!important;background:linear-gradient(135deg,#ff6b6b 0%,#ee5a6f 100%);box-shadow:0 4px 12px rgba(255,107,107,.3)!important}
#shop-modal .modal-close-btn:hover{background:linear-gradient(135deg,#ff5252 0%,#e63946 100%);transform:scale(1.15)!important}
#shop-modal .modal-content{background:linear-gradient(to bottom,var(--ds-cream) 0%,#f5eac3 100%);border:var(--ds-bw-thick) solid var(--border);border-radius:var(--ds-card-radius-lg);padding:0!important}
#shop-modal h3{font-size:var(--ds-font-page-title);font-weight:var(--ds-fw-black);color:var(--text);padding:18px 20px;margin:0;text-align:center;border-bottom:var(--ds-bw-thick) solid var(--border)}
.modal-coins-badge{display:flex;align-items:center;gap:var(--ds-gap-sm);background:linear-gradient(135deg,var(--card) 0%,var(--card2) 100%);border:var(--ds-bw-mid) solid var(--border);border-radius:var(--ds-pill-radius);padding:10px 18px;font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-heavy);color:var(--gold);margin:14px auto;box-shadow:0 2px 8px var(--ds-shade-1)}
.shop-section{background:transparent;border:none;margin:8px 14px;border-radius:var(--ds-card-radius);overflow:hidden;box-shadow:0 1px 4px var(--ds-shade-5)}
.shop-section.shop-section-open .shop-acc-body{display:block!important}
.shop-section.shop-section-open .shop-acc-arrow{transform:rotate(180deg)}
.shop-acc-btn{width:100%;padding:var(--ds-card-pad-md);border:var(--ds-bw-mid) solid var(--border);background:linear-gradient(135deg,var(--card) 0%,var(--card2) 100%);border-radius:var(--ds-card-radius);font-family:inherit;font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all var(--ds-tr-mid);text-align:right}
.shop-acc-btn:hover{background:linear-gradient(135deg,var(--card2) 0%,var(--bg3) 100%);border-color:var(--gold);box-shadow:0 3px 10px var(--ds-gold-2)}
.shop-acc-btn:active{transform:scale(.98)}
.shop-acc-title{font-weight:var(--ds-fw-heavy);font-size:var(--ds-font-body)}
.shop-acc-arrow{font-size:var(--ds-font-body);color:var(--gold);transition:transform .3s}
.shop-acc-body{padding:12px 8px;display:none;background:var(--bg2);border-radius:0 0 14px 14px;margin-top:2px}
.shop-card{display:grid;grid-template-columns:70px 1fr 70px;gap:var(--ds-gap-md);align-items:center;background:linear-gradient(135deg,var(--ds-cream-bg-mid) 0%,#E8E2CE 100%);border:var(--ds-bw-mid) solid var(--border);border-radius:var(--ds-card-radius);padding:14px;margin:8px 0;transition:all var(--ds-tr-mid);cursor:pointer}
.shop-card:hover{border-color:var(--gold);box-shadow:0 4px 14px var(--ds-gold-2);transform:translateY(-2px)}
.shop-card:active{transform:translateY(0) scale(.97)}
.shop-card.shop-card-owned{background:linear-gradient(135deg,rgba(93,207,114,.08) 0%,rgba(74,184,96,.05) 100%);border-color:var(--green2)}
.shop-emoji{font-size:clamp(38px,3.2vw,56px);line-height:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5eac3 0%,#ede1b3 100%);border-radius:var(--ds-card-radius);height:60px;flex-shrink:0;box-shadow:inset 0 2px 6px var(--ds-shade-5)}
.shop-info{display:flex;flex-direction:column;gap:var(--ds-gap-xs);min-width:0;position:relative}
.shop-name{font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);color:var(--text);line-height:var(--ds-lh-snug)}
.shop-desc{font-size:var(--ds-font-label);color:var(--muted);line-height:var(--ds-lh-snug)}
.shop-count{display:inline-block;font-size:var(--ds-font-label);color:var(--success);font-weight:var(--ds-fw-bold);margin-top:2px}
.shop-count-low{color:var(--red)}
.shop-badge-owned{display:inline-block;font-size:var(--ds-font-label);color:var(--green);font-weight:var(--ds-fw-heavy);margin-top:4px;padding:2px 6px;background:rgba(93,207,114,.15);border-radius:6px;width:fit-content}
.shop-buy{border:none;border-radius:var(--ds-card-radius);padding:10px 8px;font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-heavy);cursor:pointer;font-family:inherit;color:var(--ds-white);transition:all var(--ds-tr-mid);background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%);border-bottom:var(--ds-bw-heavy) solid var(--gold2);box-shadow:0 3px 8px var(--ds-gold-3);height:fit-content;flex-shrink:0}
.shop-buy:hover{box-shadow:0 4px 12px var(--ds-gold-4)}
.shop-buy:active{transform:translateY(2px);border-bottom-width:1px}
.shop-buy-cant{opacity:var(--ds-op-5);pointer-events:none}
.shop-buy-owned{background:linear-gradient(135deg,var(--green) 0%,var(--green2) 100%);border-color:var(--green2);box-shadow:0 3px 8px rgba(93,207,114,.3);cursor:default}
.shop-buy-owned:active{transform:none}
@media(max-width:520px){
#shop-modal .modal-frame{max-width:95vw!important}
.shop-card{grid-template-columns:60px 1fr 60px;gap:var(--ds-gap-sm);padding:12px}
.shop-emoji{height:50px;font-size:40px}
.shop-name{font-size:14px}
.shop-desc{font-size:11px}
.shop-buy{padding:8px 6px;font-size:12px}
}
/* ===== SHOP SCREEN - FULL PAGE ===== */
#shop-screen{z-index:var(--ds-z-overlay);flex-direction:column}
.shop-screen-header{display:flex;align-items:center;gap:var(--ds-gap-sm);padding:15px 30px 10px;flex-shrink:0;border-bottom:none;background:none;justify-content:space-between;position:relative}
/* Shop back-btn inherits from unified .red-close via HTML class swap.
Legacy selector kept for backward compat with any remaining .back-btn usage */
.shop-screen-header .back-btn{flex-shrink:0;width:var(--ds-btn-close);height:var(--ds-btn-close);border-radius:clamp(12px,0.9vw,16px);border:none;background:var(--ds-red);color:var(--ds-white);font-size:var(--ds-btn-close-icon);cursor:pointer;transition:transform,box-shadow,filter var(--ds-tr-fast);display:flex;align-items:center;justify-content:center;font-weight:var(--ds-fw-black);box-shadow:0 3px 0 var(--ds-red-dark),0 4px 10px var(--ds-shade-15)}
.shop-screen-header .back-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.shop-screen-header .back-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ds-red-burgundy),0 2px 6px var(--ds-shade-2);border-bottom-width:1px}
/* Unified with .profile-screen-title — absolute-centered over the header
so it's always visually centered regardless of left/right element sizes */
.shop-screen-title{position:absolute;left:50%;transform:translateX(-50%);margin:0;font-size:var(--ds-font-page-title);font-weight:var(--ds-fw-heavy);font-family:'Cairo',sans-serif;background:linear-gradient(180deg,var(--ds-gold-soft) 0%,var(--ds-gold) 40%,var(--ds-gold-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 3px 2px var(--ds-shade-4));letter-spacing:var(--ds-ls-wide);white-space:nowrap;pointer-events:none;z-index:var(--ds-z-base)}
/* ════ Live "Choose Challenge" — reuses .shop-screen-header. Title is now
in normal flow (matching .profile-screen-title), so subtitle just needs
a small top margin. ════ */
/* 1. Subtitle — flush under header, no big gap */
.lsc-subtitle{display:none}
/* 2. Grid — smaller cards */
.lsc-subtitle{display:none}
.lsc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ds-gap-md);padding:48px clamp(14px,3vw,40px) 0;max-width:820px;margin:0 auto 20px;width:100%}
@media(max-width:680px){.lsc-grid{grid-template-columns:1fr;max-width:320px;gap:var(--ds-gap-sm)}}
/* 3. Card — compact */
.lsc-card{padding:14px 10px 12px;font-family:'Cairo',sans-serif;border-radius:var(--ds-card-radius);text-align:center;display:flex;flex-direction:column;align-items:center}
.lsc-card__icon-wrap{margin-bottom:6px}
.lsc-card__icon{font-size:30px}
.lsc-card__title{font-size:15px;font-weight:var(--ds-fw-black);color:var(--ds-text);margin-bottom:2px}
.lsc-card__desc{font-size:11px;color:var(--ds-text-tan-light);font-weight:var(--ds-fw-semibold);margin-bottom:8px;line-height:var(--ds-lh-normal)}
.lsc-card__meta{display:flex;gap:var(--ds-gap-xs);flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.lsc-pill{padding:4px 8px;border-radius:var(--ds-pill-radius);font-size:10px;font-weight:var(--ds-fw-heavy)}
.lsc-card__btn{margin-top:4px;padding:7px 24px;font-size:13px}
.lsc-disabled{opacity:var(--ds-op-55);cursor:not-allowed}
/* 4. Rules — tight spacing, no gaps between items */
.lsc-rules{max-width:680px;margin:0 auto;padding:0 clamp(14px,3vw,40px);font-family:'Cairo',sans-serif}
.lsc-rules-heading{font-size:18px;font-weight:var(--ds-fw-black);color:var(--text,var(--ds-text));text-align:center;margin-bottom:4px}
.lsc-rules-items{display:flex;flex-direction:column;gap:0;margin-bottom:0}
.lsc-rule{padding:5px 0;font-size:12px;line-height:var(--ds-lh-normal)}
.lsc-rule-icon{margin-inline-end:6px}
.lsc-rules-footer{text-align:center;font-size:11px;margin-top:6px}
.lsc-rules-footer a{color:var(--ds-gold);text-decoration:none;font-weight:var(--ds-fw-heavy)}
.lsc-rules-agree{text-align:center;font-size:10px;color:var(--ds-text-tan-light);margin-top:4px}
/* ════ Unified coin pill — used everywhere player coins are displayed ════ */
.coin-pill{display:inline-flex;align-items:center;justify-content:center;background:url('assets/cardcoins.webp') center/100% 100% no-repeat;border:none;border-radius:0;font-weight:var(--ds-fw-black);color:var(--ds-text-rich);box-shadow:none;flex-shrink:0;direction:ltr;font-family:'Cairo',sans-serif;text-align:center;line-height:1;cursor:default;-webkit-tap-highlight-color:transparent}
.coin-pill[role=button]{cursor:pointer;transition:transform .12s ease,filter .12s ease}
.coin-pill[role=button]:hover{filter:brightness(1.05)}
.coin-pill[role=button]:active{transform:scale(.96)}
/* Size variants — extra left padding leaves room for the embedded coin icon */
.coin-pill-sm{padding:7px 18px 7px 36px;font-size:15px;min-width:90px;height:32px}
.coin-pill-md{padding:9px 24px 9px 46px;font-size:19px;min-width:130px;height:40px}
.coin-pill-lg{padding:12px 36px 12px 62px;font-size:27px;min-width:200px;height:55px}
/* Legacy alias — keeps the shop-screen markup working */
.shop-screen-coins{display:inline-flex;align-items:center;justify-content:center;background:url('assets/cardcoins.webp') center/100% 100% no-repeat;border:none;border-radius:0;padding:12px 36px 12px 62px;font-size:27px;font-weight:var(--ds-fw-black);color:var(--ds-text-rich);box-shadow:none;flex-shrink:0;direction:ltr;min-width:200px;height:55px}
.shop-screen-tabs{display:flex;gap:var(--ds-gap-xs);padding:16px 40px 3px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0;border-bottom:none;background:none;justify-content:center;position:relative}
.shop-screen-tabs::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,var(--ds-gold-dark),transparent)}
.shop-screen-tabs::-webkit-scrollbar{display:none}
.shop-tab{flex:0 1 auto;min-width:280px;padding:24px 48px;border-radius:var(--ds-card-radius-lg) 24px 4px 4px;border:var(--ds-bw-thick) solid #d4c4a0;border-bottom:var(--ds-bw-thick) solid transparent;background:linear-gradient(180deg,#f0e8d4,#e6dcc4);font-size:20px;font-weight:var(--ds-fw-heavy);color:var(--ds-text-tan-light);cursor:pointer;transition:all var(--ds-tr-slow);white-space:nowrap;box-shadow:inset 0 -2px 4px var(--ds-shade-6);text-align:center;font-family:'Cairo',sans-serif;position:relative}
.shop-tab:hover{color:#5a4a30;background:linear-gradient(180deg,#f5eed8,#ece4cc)}
.shop-tab.active{background:linear-gradient(180deg,var(--ds-gold-soft),var(--ds-gold));color:var(--ds-text-rich);border-color:#b8893a;box-shadow:0 4px 0 var(--ds-gold-dark),0 6px 16px var(--ds-gold-35);font-weight:var(--ds-fw-black);text-shadow:0 1px 2px var(--ds-shade-2);border-bottom-color:transparent}
.shop-screen-content{flex:1;overflow-y:auto;padding:45px 60px 190px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--ds-gold-3) transparent}
.shop-screen-content::-webkit-scrollbar{width:8px}
.shop-screen-content::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.shop-screen-content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--ds-gold-3),var(--ds-gold-4));border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.shop-screen-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--ds-gold-5),var(--ds-gold-6));background-clip:padding-box}
/* ===== Leaderboard full-page screen — Phase 3 ===== */
#leaderboard-screen{display:flex;flex-direction:column;overflow:hidden}
/* Body container — desktop-first premium. Controlled overflow on the
inner rank-list region only; the hero/champion/HOF/own-rank stay
visually anchored. */
.leaderboard-screen-content{flex:1;min-height:0;overflow:hidden;padding:clamp(4px,0.35vw,8px) clamp(14px,1.2vw,24px) clamp(10px,0.85vw,16px);max-width:1520px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:clamp(5px,0.4vw,8px)}
.leaderboard-screen-content::-webkit-scrollbar{width:6px}
.leaderboard-screen-content::-webkit-scrollbar-track{background:transparent}
.leaderboard-screen-content::-webkit-scrollbar-thumb{background:var(--ds-gold-35);border-radius:3px}
/* ── Phase 3 — Challenge tab bar (top of leaderboard screen) ── */
.lb-tab-bar{display:flex;justify-content:center;gap:var(--ds-gap-sm);padding:14px clamp(14px,3vw,40px) 6px;flex-shrink:0;max-width:920px;margin:0 auto;width:100%}
.lb-tab-pill{flex:0 1 180px;display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-sm);padding:11px 18px;border-radius:var(--ds-card-radius);border:var(--ds-bw-thick) solid var(--ds-gold-45);background:linear-gradient(180deg,var(--ds-cream-light),#f5e6b8);color:var(--ds-text-warm);font-family:'Cairo',sans-serif;font-size:14px;font-weight:var(--ds-fw-heavy);cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s,background .2s;box-shadow:0 4px 0 rgba(139,105,20,0.25),0 6px 14px var(--ds-shade-6)}
.lb-tab-pill:hover{transform:translateY(-1px);border-color:var(--ds-gold)}
.lb-tab-pill.active{background:linear-gradient(180deg,var(--ds-gold-warm-light),var(--ds-orange-bright));border-color:var(--ds-gold-dark);color:var(--ds-text-dark);box-shadow:0 5px 0 #6e520f,0 8px 18px var(--ds-gold-4);transform:translateY(-1px)}
.lb-tab-icon{font-size:20px;line-height:1}
.lb-tab-label{font-weight:var(--ds-fw-black)}
/* Combined hero card — prize on top, countdown below */
.lb-hero-card{position:relative;background:linear-gradient(135deg,var(--ds-cream-rich) 0%,var(--ds-gold-bright) 55%,var(--ds-orange-bright) 100%);border:var(--ds-bw-heavy) solid var(--ds-gold);border-radius:var(--ds-card-radius-lg);box-shadow:0 10px 28px var(--ds-gold-4),inset 0 2px 0 var(--ds-tint-7);overflow:hidden;animation:lbPrizeIn .55s ease-out;flex-shrink:0}
.lb-hero-glow{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.45) 50%,transparent 70%);transform:translateX(-100%);animation:lbShimmer 3.5s ease-in-out infinite;pointer-events:none}
.lb-hero-top{display:flex;align-items:center;gap:var(--ds-gap-md);padding:var(--ds-card-pad-md);position:relative;z-index:var(--ds-z-base)}
.lb-hero-trophy{font-size:38px;flex-shrink:0;animation:lbBounce 2s ease-in-out infinite;filter:drop-shadow(0 4px 6px var(--ds-shade-2))}
.lb-hero-title-block{flex:1;min-width:0}
.lb-hero-title{font-size:18px;font-weight:var(--ds-fw-black);color:var(--ds-text-rich);text-shadow:0 1px 2px var(--ds-tint-5);line-height:var(--ds-lh-tight);margin-bottom:3px}
.lb-hero-sub{font-size:12px;font-weight:var(--ds-fw-bold);color:var(--ds-text-warm);line-height:var(--ds-lh-snug)}
.lb-hero-coins{display:flex;align-items:center;gap:var(--ds-gap-xs);background:linear-gradient(180deg,#fff,var(--ds-gold-pale));padding:8px 14px;border-radius:var(--ds-card-radius);border:var(--ds-bw-thick) solid var(--ds-gold);box-shadow:0 4px 0 var(--ds-gold-dark),0 6px 14px var(--ds-shade-15);flex-shrink:0}
.lb-hero-coin-num{font-size:20px;font-weight:var(--ds-fw-black);color:var(--ds-text-rich)}
.lb-hero-coin-ico{font-size:16px}
.lb-hero-divider{height:2px;background:linear-gradient(90deg,transparent,rgba(74,53,24,0.25),transparent);position:relative;z-index:var(--ds-z-base)}
.lb-hero-bottom{display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-md);padding:10px 18px 12px;position:relative;z-index:var(--ds-z-base)}
.lb-hero-clock-label{font-size:12px;font-weight:var(--ds-fw-heavy);color:var(--ds-text-warm);letter-spacing:var(--ds-ls-mid)}
.lb-hero-clock{font-size:20px;font-weight:var(--ds-fw-black);color:var(--ds-text-rich);font-feature-settings:'tnum';text-shadow:0 1px 2px var(--ds-tint-6);animation:lbPulse 2s ease-in-out infinite}
/* ── Phase C V2 — Hero head + 3 prize tiers ───────────────────────────── */
.lb-hero-head{display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-md);padding:var(--ds-card-pad-md) 8px;position:relative;z-index:var(--ds-z-base)}
.lb-hero-head .lb-hero-trophy{font-size:36px;animation:lbBounce 2s ease-in-out infinite;filter:drop-shadow(0 4px 6px var(--ds-shade-2))}
.lb-hero-head .lb-hero-title{font-size:18px;font-weight:var(--ds-fw-black);color:var(--ds-text-dark);text-shadow:0 1px 2px var(--ds-tint-6);line-height:var(--ds-lh-tight);text-align:center}
.lb-prize-tiers{display:flex;justify-content:center;align-items:flex-end;gap:var(--ds-gap-md);padding:6px 18px 14px;position:relative;z-index:var(--ds-z-base)}
.lb-prize-tier{display:flex;flex-direction:column;align-items:center;gap:var(--ds-gap-xs);padding:var(--ds-card-pad-sm) 10px;border-radius:var(--ds-card-radius);border:var(--ds-bw-thick) solid var(--ds-shade-15);background:linear-gradient(180deg,#fff,var(--ds-gold-pale));box-shadow:0 5px 0 var(--ds-gold-dark),0 7px 16px var(--ds-shade-18);min-width:88px;transition:transform .2s}
.lb-prize-tier:hover{transform:translateY(-2px)}
.lb-prize-tier .lb-prize-medal{font-size:26px;line-height:1;filter:drop-shadow(0 2px 3px var(--ds-shade-25))}
.lb-prize-tier .lb-prize-amount{font-size:18px;font-weight:var(--ds-fw-black);color:var(--ds-text-dark);font-feature-settings:'tnum';margin-top:2px}
.lb-prize-tier .lb-prize-label{font-size:14px;line-height:1}
.lb-prize-gold{transform:translateY(-6px);background:linear-gradient(180deg,var(--ds-cream-pale),var(--ds-gold-bright));border-color:var(--ds-gold);box-shadow:0 6px 0 var(--ds-gold-dark),0 10px 22px var(--ds-gold-4)}
.lb-prize-gold .lb-prize-amount{font-size:22px}
.lb-prize-silver{background:linear-gradient(180deg,#fafafa,#d6d6d6);border-color:#9c9c9c;box-shadow:0 5px 0 #6a6a6a,0 8px 18px var(--ds-shade-2)}
.lb-prize-silver .lb-prize-amount{color:#3a3a3a}
.lb-prize-bronze{background:linear-gradient(180deg,#ffe6c4,#e2a06f);border-color:#a06236;box-shadow:0 5px 0 #6a3d1f,0 8px 18px rgba(160,98,54,0.32)}
.lb-prize-bronze .lb-prize-amount{color:#4a230f}
/* Last month winner card */
.lb-winner-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--ds-gap-sm);padding:24px 20px 20px;background:linear-gradient(180deg,var(--ds-cream-yolk) 0%,var(--ds-gold-warm-light) 50%,#f5c659 100%);border:var(--ds-bw-heavy) solid var(--ds-gold-rich-dark);border-radius:var(--ds-card-radius-lg);margin-bottom:18px;box-shadow:0 10px 28px var(--ds-gold-4),inset 0 2px 0 var(--ds-tint-6);animation:lbPrizeIn .7s ease-out .2s backwards}
.lb-winner-crown{position:absolute;top:-22px;font-size:42px;animation:lbCrownFloat 3s ease-in-out infinite;filter:drop-shadow(0 6px 8px var(--ds-shade-25))}
.lb-winner-label{font-size:13px;font-weight:var(--ds-fw-heavy);color:var(--ds-text-warm);text-transform:uppercase;letter-spacing:var(--ds-ls-wide);margin-top:8px}
.lb-winner-avatar{width:var(--ds-avatar-xl);height:var(--ds-avatar-xl);border-radius:50%;background:var(--ds-white);border:var(--ds-bw-massive) solid var(--ds-orange-bright);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:38px;box-shadow:0 6px 18px var(--ds-gold-35)}
.lb-winner-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.lb-winner-name{font-size:22px;font-weight:var(--ds-fw-black);color:var(--ds-text-rich);text-shadow:0 1px 2px var(--ds-tint-5)}
.lb-winner-stats{display:flex;gap:var(--ds-gap-md);font-size:14px;font-weight:var(--ds-fw-heavy);color:var(--ds-text-warm)}
.lb-winner-prize{margin-top:4px;padding:8px 18px;background:linear-gradient(180deg,#fff,var(--ds-gold-warm-light));border:var(--ds-bw-thick) solid var(--ds-gold);border-radius:var(--ds-card-radius);font-size:16px;font-weight:var(--ds-fw-black);color:var(--ds-text-rich);box-shadow:0 4px 0 var(--ds-gold-dark)}
/* Section title */
.lb-section-title{font-size:14px;font-weight:var(--ds-fw-black);color:var(--ds-text-rich);margin:6px 8px 4px;text-align:center;flex-shrink:0}
/* Column header */
.leaderboard-screen-content .lb-col-header{display:grid;grid-template-columns:clamp(50px,4vw,68px) clamp(52px,4.4vw,72px) minmax(0,1fr) clamp(100px,9vw,140px);gap:clamp(12px,1.2vw,18px);align-items:center;padding:clamp(8px,0.9vw,12px) clamp(18px,1.6vw,26px);margin-bottom:6px;font-size:clamp(13px,1.05vw,16px);font-weight:var(--ds-fw-heavy);color:var(--ds-text-tan-light);border-bottom:var(--ds-bw-thick) solid var(--ds-gold-3);flex-shrink:0}
/* Rows */
.leaderboard-screen-content .lb-list{display:flex;flex-direction:column;gap:var(--ds-gap-sm);flex-shrink:0}
.leaderboard-screen-content .lb-row{display:grid;grid-template-columns:clamp(50px,4vw,68px) clamp(62px,5vw,82px) minmax(0,1fr) clamp(100px,9vw,140px);gap:clamp(18px,1.8vw,32px);align-items:center;padding:clamp(14px,1.3vw,20px) clamp(18px,1.6vw,26px);background:rgba(255,245,217,0.92);border:var(--ds-bw-thick) solid var(--ds-gold-4);border-radius:clamp(14px,1.2vw,18px);box-shadow:0 4px 12px var(--ds-shade-6);font-weight:var(--ds-fw-bold);color:var(--ds-text-coffee);transition:transform,box-shadow var(--ds-tr);animation:lbRowIn .4s ease-out backwards;min-height:clamp(68px,5.8vw,88px)}
.leaderboard-screen-content .lb-row:nth-child(1){animation-delay:.05s}
.leaderboard-screen-content .lb-row:nth-child(2){animation-delay:.1s}
.leaderboard-screen-content .lb-row:nth-child(3){animation-delay:.15s}
.leaderboard-screen-content .lb-row:nth-child(4){animation-delay:.2s}
.leaderboard-screen-content .lb-row:nth-child(5){animation-delay:.25s}
.leaderboard-screen-content .lb-row:hover{transform:translateY(-2px);box-shadow:0 6px 18px var(--ds-shade-1)}
.leaderboard-screen-content .lb-row.lb-top{background:linear-gradient(180deg,var(--ds-cream-light),var(--ds-gold-cream));border-color:var(--ds-gold-rich-dark);box-shadow:0 6px 18px var(--ds-gold-25)}
.leaderboard-screen-content .lb-row.lb-own{background:linear-gradient(180deg,#ffeacc,#ffd47a);border-color:var(--ds-red);box-shadow:0 0 0 3px var(--ds-red-app-3),0 8px 22px rgba(233,75,90,0.25)}
.leaderboard-screen-content .lb-rank{font-size:clamp(20px,1.9vw,28px);font-weight:var(--ds-fw-black);text-align:center}
.leaderboard-screen-content .lb-avatar{width:clamp(46px,3.8vw,62px);height:clamp(46px,3.8vw,62px);border-radius:50%;background:var(--ds-gold-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:clamp(22px,1.9vw,30px)}
.leaderboard-screen-content .lb-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.leaderboard-screen-content .lb-info{min-width:0;display:flex;align-items:center;justify-content:center}
.leaderboard-screen-content .lb-name{font-size:clamp(16px,1.4vw,21px);font-weight:var(--ds-fw-heavy);color:var(--ds-text-coffee);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;width:100%}
.leaderboard-screen-content .lb-val{font-size:clamp(17px,1.5vw,22px);font-weight:var(--ds-fw-black);color:#5a4a20;text-align:center}
.leaderboard-screen-content .lb-empty,.leaderboard-screen-content .lb-loading{padding:60px 20px;text-align:center;font-size:16px;color:var(--ds-text-tan-light);font-weight:var(--ds-fw-bold)}
/* ── Phase 3 — 4-column row grid (rank · avatar · name · metric) ── */
.leaderboard-screen-content .lb-row{
/* phase 3: fluid 4-column grid (rank · avatar · name · metric) */
grid-template-columns:clamp(50px,4vw,68px) clamp(62px,5vw,82px) minmax(0,1fr) clamp(100px,9vw,140px);
gap:clamp(18px,1.8vw,32px);
padding:clamp(14px,1.3vw,20px) clamp(18px,1.6vw,26px);
}
.leaderboard-screen-content .lb-row .lb-name{text-align:center}
/* ── Champion card (the #1 entry, separated from the list) ── */
.lb-champion-card{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
gap:clamp(6px,0.6vw,10px);
padding:clamp(20px,1.8vw,30px) clamp(16px,1.5vw,26px) clamp(16px,1.4vw,24px);
margin-top:6px;
background:linear-gradient(180deg,var(--ds-cream-yolk) 0%,var(--ds-gold-warm-light) 50%,#f5c659 100%);
border:var(--ds-bw-heavy) solid var(--ds-gold-rich-dark);
border-radius:clamp(20px,1.8vw,26px);
box-shadow:0 10px 32px var(--ds-gold-4),inset 0 2px 0 var(--ds-tint-6);
animation:lbPrizeIn .55s ease-out .1s backwards;
flex-shrink:0;
}
.lb-champion-crown{
position:absolute;
top:-22px;
font-size:42px;
animation:lbCrownFloat 3s ease-in-out infinite;
filter:drop-shadow(0 6px 8px var(--ds-shade-25));
}
.lb-champion-label{
font-size:var(--ds-font-label);
font-weight:var(--ds-fw-black);
color:var(--ds-text-warm);
text-transform:uppercase;
letter-spacing:1.2px;
margin-top:10px;
}
.lb-champion-avatar{
width:clamp(74px,6.5vw,96px);
height:clamp(74px,6.5vw,96px);
border-radius:50%;
background:var(--ds-white);
border:var(--ds-bw-massive) solid var(--ds-orange-bright);
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
font-size:clamp(34px,3vw,46px);
box-shadow:0 8px 22px var(--ds-gold-4);
}
.lb-champion-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.lb-champ-av-fb{font-size:clamp(34px,2.8vw,50px)}
.lb-champion-name{
font-size:clamp(18px,1.6vw,26px);
font-weight:var(--ds-fw-black);
color:var(--ds-text-dark);
text-shadow:0 1px 2px var(--ds-tint-5);
margin-top:2px;
}
.lb-champion-stats{
display:flex;
gap:var(--ds-gap-md);
align-items:center;
font-weight:var(--ds-fw-heavy);
margin-top:4px;
}
.lb-champion-metric{
font-size:clamp(14px,1.25vw,18px);
color:var(--ds-text-dark);
background:var(--ds-tint-5);
padding:clamp(3px,0.35vw,5px) clamp(11px,1vw,16px);
border-radius:var(--ds-card-radius);
border:var(--ds-bw-mid) solid rgba(196,155,60,0.6);
}
.lb-champion-streak{font-size:var(--ds-font-body-sm);color:var(--ds-text-warm)}
/* ── Empty champion state ── */
.lb-empty-champion{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--ds-gap-sm);
padding:32px 24px;
background:rgba(255,247,205,0.5);
border:2px dashed var(--ds-gold-45);
border-radius:var(--ds-card-radius-lg);
margin-top:6px;
flex-shrink:0;
}
.lb-empty-icon{font-size:clamp(34px,2.8vw,50px)}
.lb-empty-title{font-size:var(--ds-font-body);font-weight:var(--ds-fw-black);color:var(--ds-text-rich)}
.lb-empty-sub{font-size:var(--ds-font-body-sm);color:#7a5e20;text-align:center}
/* ── Rank list wrapper (scrollable region inside body) ── */
.lb-rank-list-wrap{flex-shrink:0}
/* ── Last winner strip (compact) ── */
.lb-last-winner-strip{
display:flex;
align-items:center;
gap:clamp(10px,1vw,16px);
padding:clamp(10px,1vw,14px) clamp(14px,1.3vw,20px);
background:linear-gradient(180deg,rgba(255,247,205,0.92),rgba(255,228,150,0.95));
border:var(--ds-bw-thick) solid var(--ds-gold-55);
border-radius:clamp(14px,1.2vw,18px);
flex-shrink:0;
box-shadow:0 4px 12px var(--ds-gold-15);
}
.lb-lw-avatar{
width:clamp(38px,3vw,50px);
height:clamp(38px,3vw,50px);
border-radius:50%;
background:var(--ds-white);
border:var(--ds-bw-bold) solid var(--ds-gold);
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
font-size:clamp(18px,1.5vw,24px);
flex-shrink:0;
}
.lb-lw-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.lb-lw-info{flex:1;min-width:0}
.lb-lw-label{font-size:clamp(10px,0.85vw,12px);font-weight:var(--ds-fw-heavy);color:#7a5e20;letter-spacing:0.4px}
.lb-lw-name{font-size:clamp(13px,1.05vw,16px);font-weight:var(--ds-fw-black);color:var(--ds-text-dark);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-lw-prize{
background:linear-gradient(180deg,#fff,var(--ds-gold-pale));
border:var(--ds-bw-thick) solid var(--ds-gold);
border-radius:var(--ds-card-radius);
padding:clamp(5px,0.5vw,8px) clamp(10px,1vw,14px);
font-size:clamp(13px,1.05vw,16px);
font-weight:var(--ds-fw-black);
color:var(--ds-text-dark);
box-shadow:0 3px 0 var(--ds-gold-dark);
flex-shrink:0;
}
/* ── Hall of Fame button ── */
/* ── Hall of Fame screen ── */
/* ── Own rank pinned: empty state ── */
.lb-own-pin-empty{
text-align:center;
padding:14px;
background:linear-gradient(180deg,#eafde6,#d3f5d8);
border:2px dashed var(--ds-green);
border-radius:var(--ds-card-radius);
font-size:var(--ds-font-body-sm);
font-weight:var(--ds-fw-heavy);
color:var(--ds-green-deep-dark);
}
/* Own rank — ALWAYS pinned at the bottom of the leaderboard screen.
GREEN strip so the user instantly knows it's their row. */
.lb-own-pinned{display:none!important}
.lb-own-pin-label{text-align:center;font-size:clamp(11px,0.9vw,13px);font-weight:var(--ds-fw-black);color:#2d8f3e;margin-bottom:clamp(8px,0.7vw,12px);text-transform:uppercase;letter-spacing:1.2px;text-shadow:0 1px 0 var(--ds-tint-8);display:inline-flex;align-items:center;gap:var(--ds-gap-xs)}
.lb-own-pin-label-wrap{display:flex;justify-content:center;margin-bottom:clamp(8px,0.7vw,12px)}
.lb-own-pin-row-wrap .lb-row{
background:linear-gradient(180deg,#d6f5d8,#9ee5a4) !important;
border:var(--ds-bw-thick) solid var(--ds-green) !important;
box-shadow:0 0 0 3px rgba(60,170,80,0.22),0 8px 22px rgba(60,170,80,0.28) !important;
animation:lbOwnGreenPulse 2.5s ease-in-out infinite !important;
}
.lb-own-pin-row-wrap .lb-name{color:var(--ds-green-deep-dark) !important}
.lb-own-pin-row-wrap .lb-val{color:var(--ds-green-deep-dark) !important}
.lb-own-pin-row-wrap .lb-rank{color:var(--ds-green-deep-dark) !important}
@keyframes lbOwnGreenPulse{0%,100%{box-shadow:0 0 0 3px rgba(60,170,80,0.22),0 8px 22px rgba(60,170,80,0.28)}50%{box-shadow:0 0 0 5px rgba(60,170,80,0.36),0 10px 28px rgba(60,170,80,0.38)}}
/* While the body's lb-row has its own gold "lb-own" highlight when the
user is in top 5 — override THAT to green too so the cue is consistent. */
.leaderboard-screen-content .lb-row.lb-own{background:linear-gradient(180deg,#d6f5d8,#9ee5a4) !important;border-color:var(--ds-green) !important;box-shadow:0 0 0 3px rgba(60,170,80,0.22),0 8px 22px rgba(60,170,80,0.28) !important}
.leaderboard-screen-content .lb-row.lb-own .lb-name,
.leaderboard-screen-content .lb-row.lb-own .lb-val,
.leaderboard-screen-content .lb-row.lb-own .lb-rank{color:var(--ds-green-deep-dark) !important}
/* ── Animations ── */
@keyframes lbPrizeIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes lbRowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes lbShimmer{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}
@keyframes lbBounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-6deg)}}
@keyframes lbPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:0.92}}
@keyframes lbCrownFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes lbOwnPulse{0%,100%{box-shadow:0 0 0 3px var(--ds-red-app-3),0 8px 22px rgba(233,75,90,0.25)}50%{box-shadow:0 0 0 5px rgba(233,75,90,0.32),0 10px 28px rgba(233,75,90,0.35)}}
@media (max-width:560px){
.leaderboard-screen-content{padding:var(--ds-card-pad-sm) 16px;gap:var(--ds-gap-sm)}
.lb-tab-bar{padding:var(--ds-card-pad-sm) 4px;gap:var(--ds-gap-xs)}
.lb-tab-pill{padding:9px 12px;font-size:12px;flex:1 1 0}
.lb-tab-icon{font-size:16px}
.lb-hero-top{padding:var(--ds-card-pad-sm);gap:var(--ds-gap-sm)}
.lb-hero-trophy{font-size:32px}
.lb-hero-title{font-size:16px}
.lb-hero-sub{font-size:11px}
.lb-hero-coin-num{font-size:18px}
.lb-hero-clock{font-size:18px}
.lb-champion-card{padding:22px 14px 16px}
.lb-champion-avatar{width:72px;height:72px;font-size:34px}
.lb-champion-name{font-size:20px}
.lb-champion-metric{font-size:15px;padding:3px 11px}
/* mobile row uses base clamp() — no !important override needed */
.leaderboard-screen-content .lb-rank{font-size:16px}
.leaderboard-screen-content .lb-avatar{width:34px;height:34px;font-size:18px}
.leaderboard-screen-content .lb-name{font-size:13px}
.leaderboard-screen-content .lb-val{font-size:13px}
.lb-last-winner-strip{padding:var(--ds-card-pad-sm);gap:var(--ds-gap-sm)}
.lb-lw-avatar{width:var(--ds-avatar-sm);height:var(--ds-avatar-sm);font-size:18px}
.lb-lw-name{font-size:13px}
.lb-lw-prize{padding:5px 10px;font-size:12px}
/* Phase C V2 — prize tiers + hero head responsive */
.lb-hero-head{padding:var(--ds-card-pad-sm) 6px;gap:var(--ds-gap-sm)}
.lb-hero-head .lb-hero-trophy{font-size:30px}
.lb-hero-head .lb-hero-title{font-size:15px}
.lb-prize-tiers{padding:var(--ds-pill-pad) 12px;gap:var(--ds-gap-sm)}
.lb-prize-tier{min-width:70px;padding:10px 10px 8px}
.lb-prize-tier .lb-prize-medal{font-size:22px}
.lb-prize-tier .lb-prize-amount{font-size:15px}
.lb-prize-gold .lb-prize-amount{font-size:18px}
.lb-prize-tier .lb-prize-label{font-size:12px}
}
.shop-screen-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,280px));gap:40px 42px;max-width:100%;justify-content:center}
.card{--main-color:var(--ds-text-rich);--sub-color:var(--ds-gold-dark);--bg-color:rgba(245,234,195,0.95);--accent-color:var(--ds-gold);position:relative;font-family:'Cairo',sans-serif;width:110%;padding:20px;border-radius:var(--ds-card-radius-lg);display:flex;flex-direction:column;gap:var(--ds-gap-xs);background-color:var(--bg-color);transition:all 0.2s;cursor:default;box-shadow:0 8px 24px var(--ds-shade-15),0 4px 8px var(--ds-shade-1)}
.card::before{content:'';width:99%;height:99%;background:var(--ds-gold-4);position:absolute;z-index:-1;top:1px;left:1px;border-radius:var(--ds-card-radius-lg);transition:all 0.3s}
.card__content{display:flex;flex-direction:column;gap:1.5em;position:relative;z-index:var(--ds-z-content);align-items:center;text-align:center;width:100%}
.card__image{width:84px;height:74px;display:flex;align-items:center;justify-content:center}
.card__image img{width:100%;height:100%;object-fit:contain}
.card__text{display:flex;flex-direction:column;gap:0.25em;align-items:center}
.card__title{color:var(--main-color);font-size:1.1em;margin:0;font-weight:var(--ds-fw-black)}
.card__description{color:var(--sub-color);font-size:0.85em;margin:6px 0 0;font-weight:var(--ds-fw-semibold)}
.card__footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;width:100%;direction:rtl}
.card__price{color:var(--main-color);font-weight:var(--ds-fw-heavy);font-size:1.5em}
.card__button{position:relative;border:none;background:var(--ds-gold);color:var(--ds-text-dark);padding:0.4em 1.5em;font-weight:bold;text-transform:uppercase;transition:0.2s;border-radius:var(--ds-card-radius);opacity:0.9;letter-spacing:var(--ds-ls-wide);box-shadow:var(--ds-gold-dark) 0px 7px 2px,#000 0px 8px 5px;cursor:pointer;font-family:inherit;font-size:var(--ds-font-card-title);display:flex;align-items:center;justify-content:center}
.card__button:hover{opacity:1}
.card__button:active{top:4px;box-shadow:var(--ds-gold-dark) 0px 3px 2px,#000 0px 3px 5px}
.card__button:disabled{background:var(--ds-gray-dark);box-shadow:#646464 0px 7px 2px,#000 0px 8px 5px;cursor:default;opacity:0.9;pointer-events:none}
.card:hover{box-shadow:0px 0px 20px -5px var(--ds-shade-3)}
.card:hover::before{transform:rotate(6deg);box-shadow:0px 0px 20px -5px var(--ds-shade-2)}
.shop-item-count{position:absolute;top:9px;right:9px;left:auto;background:linear-gradient(135deg,#d4a840,#b8922e);color:var(--ds-text-rich);font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-bold);padding:3px 9px;border-radius:var(--ds-card-radius);box-shadow:0 2px 0 #7a5a10,0 3px 8px var(--ds-shade-25);z-index:var(--ds-z-content);font-family:'Cairo',sans-serif;text-shadow:0 1px 1px var(--ds-shade-2);cursor:pointer}
.shop-item-count:hover{transform:scale(1.1)}
.shop-item-count .count-tooltip{position:absolute;top:-35px;opacity:0;background-color:var(--ds-text-rich);background-image:linear-gradient(147deg,#c5b279 0%,var(--ds-text-rich) 74%);color:white;padding:0px 10px;border-radius:2px;font-size:var(--ds-font-body-sm);white-space:nowrap;pointer-events:none;transition:0.2s;font-weight:var(--ds-fw-bold)}
.shop-item-count .count-tooltip::before{position:absolute;content:"";width:8px;height:8px;background-color:var(--ds-text-rich);transform:rotate(45deg);bottom:-4px;left:50%;margin-left:-4px}
.shop-item-count:hover .count-tooltip{top:-42px;opacity:1}
.shop-card-footer{display:flex;align-items:center;justify-content:space-between;direction:rtl;margin-top:auto}
.shop-item-icon{width:var(--ds-avatar-md);height:var(--ds-avatar-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;overflow:visible}
.shop-item-image{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.shop-item-name{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:#3e2a14;line-height:var(--ds-lh-snug)}
.shop-item-desc{font-size:var(--ds-font-body);color:#5a4020;line-height:var(--ds-lh-normal);text-align:center;font-weight:var(--ds-fw-semibold)}
.shop-item-price{display:flex;align-items:center;gap:var(--ds-gap-xs);font-size:var(--ds-font-body);font-weight:var(--ds-fw-black);color:var(--ds-gold-dark);direction:ltr}
.shop-item-count{position:absolute;top:6px;right:6px;left:auto;background:linear-gradient(135deg,#d4a840,#b8922e);color:var(--ds-white);font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-black);padding:3px 9px;border-radius:var(--ds-card-radius);box-shadow:0 2px 0 #7a5a10,0 3px 8px var(--ds-shade-25);z-index:var(--ds-z-content);font-family:'Cairo',sans-serif;text-shadow:0 1px 1px var(--ds-shade-2)}
.shop-item-btn{width:auto;min-width:80px;padding:var(--ds-pill-pad);font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-heavy);cursor:pointer;font-family:inherit;color:var(--ds-white);transition:all var(--ds-tr);background:url('assets/btn_gold.webp') center/100% 100% no-repeat;border:none;border-radius:0;box-shadow:none;margin-top:0;text-shadow:0 1px 2px rgba(80,50,10,.4);border-bottom:none;position:relative;overflow:hidden}
.shop-item-btn::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,var(--ds-tint-3),transparent);animation:btnShimmer 3s ease-in-out infinite}
@keyframes btnShimmer{0%,100%{left:-100%}50%{left:150%}}
.shop-item-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.shop-item-btn:active{transform:translateY(2px);filter:brightness(.94)}
.shop-item-btn:disabled{filter:grayscale(.4) brightness(.85);opacity:var(--ds-op-7);pointer-events:none;cursor:default}
.shop-item-btn.green{background:url('assets/btn_gold.webp') center/100% 100% no-repeat}
.shop-item-btn.owned{background:url('assets/btn_green_new.webp') center/100% 100% no-repeat;filter:none}
/* Live challenge pricing patch */
.live-challenge-pricing{gap:var(--ds-gap-md);padding:4px 4px 0}
.live-type-card-priced{align-items:flex-start}
.live-type-card-locked{opacity:var(--ds-op-55)}
.live-type-meta{display:flex;flex-wrap:wrap;gap:var(--ds-gap-sm);margin-top:10px}
.live-type-entry-pill,.live-type-reward-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--ds-pill-pad);border-radius:var(--ds-pill-radius);font-size:var(--ds-font-label);font-weight:var(--ds-fw-heavy);line-height:var(--ds-lh-snug)}
.live-type-entry-pill{background:rgba(124,58,237,.12);color:#6d28d9}
.live-type-reward-pill{background:rgba(196,155,60,.14);color:#a16207}
.live-type-lock-msg{margin-top:8px;font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);color:#a94442}
@media(max-width:520px){
.shop-screen-header{padding:var(--ds-card-pad-sm) 4px;gap:var(--ds-gap-xs)}
.shop-screen-header .back-btn{width:34px;height:34px;font-size:16px;border-radius:var(--ds-card-radius);box-shadow:0 3px 0 var(--ds-red-burgundy),0 4px 10px var(--ds-shade-2);border-bottom:var(--ds-bw-thick) solid var(--ds-red-burgundy)}
.shop-screen-coins{font-size:16px;padding:var(--ds-pill-pad) 8px 40px;min-width:130px;height:38px}
.coin-pill-lg{font-size:16px;padding:var(--ds-pill-pad) 8px 40px;min-width:130px;height:38px}
.coin-pill-md{font-size:14px;padding:var(--ds-pill-pad) 6px 32px;min-width:90px;height:30px}
.coin-pill-sm{font-size:12px;padding:var(--ds-pill-pad) 5px 28px;min-width:75px;height:26px}
.shop-screen-tabs{padding:10px 10px 3px;gap:var(--ds-gap-xs)}
.shop-screen-tabs::after{left:5%;right:5%}
.shop-tab{min-width:auto;flex:1;padding:var(--ds-card-pad-sm);font-size:13px;border-radius:var(--ds-card-radius) 14px 4px 4px}
.shop-tab.active{box-shadow:0 3px 0 var(--ds-gold-dark),0 4px 10px var(--ds-gold-3)}
.shop-screen-content{padding:20px 10px 40px}
.shop-screen-grid{grid-template-columns:repeat(2,1fr);gap:var(--ds-gap-lg) 10px}
.card{width:100%;padding:14px;border-radius:var(--ds-card-radius-lg);gap:var(--ds-gap-xs)}
.card::before{border-radius:var(--ds-card-radius-lg)}
.card__content{gap:0.8em;padding:0.8em}
.card__image{width:56px;height:50px}
.card__title{font-size:0.95em}
.card__description{font-size:0.7em;margin:3px 0 0}
.card__footer{padding-top:4px}
.card__price{font-size:1.1em}
.card__button{font-size:13px;padding:0.3em 1em;border-radius:6px;box-shadow:var(--ds-gold-dark) 0px 5px 2px,#000 0px 6px 4px}
.shop-item-count{font-size:14px;top:6px;right:6px;padding:2px 7px}
.live-type-meta{gap:var(--ds-gap-xs)}
.live-type-entry-pill,.live-type-reward-pill{font-size:11px;padding:5px 10px}
}
@media(min-width:521px) and (max-width:1280px){
.shop-screen-header{padding:10px 20px 6px}
.shop-screen-coins{font-size:20px;padding:10px 24px 10px 50px;min-width:160px;height:44px}
.coin-pill-lg{font-size:20px;padding:10px 24px 10px 50px;min-width:160px;height:44px}
.coin-pill-md{font-size:16px;padding:7px 18px 7px 38px;min-width:105px;height:34px}
.coin-pill-sm{font-size:13px;padding:var(--ds-pill-pad) 6px 30px;min-width:82px;height:28px}
.shop-screen-tabs{padding:12px 20px 3px;gap:var(--ds-gap-xs)}
.shop-tab{min-width:auto;flex:1;padding:14px 20px;font-size:16px}
.shop-screen-content{padding:30px 20px 60px}
.shop-screen-grid{grid-template-columns:repeat(3,1fr);gap:30px 20px}
.card{width:100%;padding:16px;border-radius:var(--ds-card-radius-lg)}
.card__image{width:70px;height:60px}
.card__button{font-size:15px;padding:0.35em 1.2em}
.card__price{font-size:1.2em}
}
to{opacity:1;transform:scale(1)}}
/* Video top overlay bar */
undefined
/* Responsive: desktop centering */
/* desktop: natural width, no forced narrow frame */
/* Responsive: tablet */
/* tablet: natural sizing */
/* Responsive: phone */
@media(max-width:480px){
.video-container{max-width:96vw!important;border-radius:var(--ds-card-radius);}
.game-header{padding:var(--ds-card-pad-sm);}
}
/* Smile percentage on camera card */
.cam-card-smile-top{
padding:8px 0;
text-align:center;
background:rgba(76,175,80,.6);
border-radius:var(--ds-card-radius) 16px 0 0;
transition:background .2s;
min-height:26px;
display:flex;align-items:center;justify-content:center;
}
/* Unified red close button — used across all screens */
/* ════ Unified close button — same style as camera-check "lsr-close-x" ════
Used everywhere: shop header, live-select header, modals, profile.
44×44 rounded-12 red with 3D pressed shadow. */
.red-close,.lsr-close-x,.mmq-close,.lsc-header-back,.modal-close-btn{
width:clamp(44px,3vw,64px);height:clamp(44px,3vw,64px);border-radius:clamp(12px,0.9vw,16px);border:none;
background:var(--ds-red);color:var(--ds-white);
font-size:clamp(20px,1.5vw,28px);font-weight:var(--ds-fw-black);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 0 var(--ds-red-dark),0 4px 10px var(--ds-shade-15);
transition:transform,box-shadow,filter var(--ds-tr-fast);
line-height:1;
flex-shrink:0;
}
.red-close:hover,.lsr-close-x:hover,.mmq-close:hover,.lsc-header-back:hover,.modal-close-btn:hover{
filter:brightness(1.1);transform:translateY(-1px);
box-shadow:0 4px 0 var(--ds-red-dark),0 6px 14px var(--ds-shade-2);
}
.red-close:active,.lsr-close-x:active,.mmq-close:active,.lsc-header-back:active,.modal-close-btn:active{
transform:translateY(2px);
box-shadow:0 1px 0 var(--ds-red-dark),0 2px 6px var(--ds-shade-15);
}
/* === Video Title Badge (centered above video) === */
.vid-title-badge{
display:block;
text-align:center;
margin:0 auto 6px;
max-width:85%;
}
.vid-title-badge span{
display:inline-block;
background:rgba(0,0,0,.55);
color:var(--ds-white);
font-size:var(--ds-font-body);
font-weight:var(--ds-fw-bold);
padding:6px 20px;
border-radius:var(--ds-card-radius);
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* === Video Counter Badge (top-right inside video) === */
.vid-count-badge{
position:absolute;
top:14px;
right:14px;
z-index:var(--ds-z-modal);
background:linear-gradient(180deg,var(--ds-cream-light),var(--ds-gold-bright));
padding:8px 18px;
border-radius:var(--ds-pill-radius);
font-size:var(--ds-font-body);
font-weight:var(--ds-fw-black);
color:var(--ds-text-dark);
letter-spacing:var(--ds-ls-wide);
border:var(--ds-bw-mid) solid var(--ds-gold);
box-shadow:0 4px 14px rgba(0,0,0,0.35),0 2px 0 var(--ds-gold-dark),inset 0 1px 0 var(--ds-tint-7);
pointer-events:none;
font-variant-numeric:tabular-nums;
}
/* ═══════════════════════════════════════════════════════════════
MENU LAYOUT — ISOLATED BREAKPOINTS (each one is self-contained)
═══════════════════════════════════════════════════════════════ */
/* ── Small Phone (≤360px) ── */
@media(max-width:360px){
.menu-grid{grid-template-columns:1fr !important;width:min(90vw,300px) !important;row-gap:70px !important}
.gmc-body{height:70px !important;border-radius:var(--ds-card-radius) !important}
.gmc-text{font-size:16px !important}
.gmc-art img{width:80% !important;height:120px !important}
.menu-quick-btn{width:50px !important;height:50px !important}
.menu-quick-icon{font-size:26px !important}
}
/* ── Phone (361px – 599px) ── */
@media(min-width:361px) and (max-width:599px){
.menu-logo{margin-top:0 !important}
.menu-grid{grid-template-columns:1fr !important;width:min(85vw,300px) !important;row-gap:50px !important}
.gmc-body{height:60px !important;border-radius:var(--ds-card-radius) !important}
.gmc-text{font-size:16px !important}
.gmc-art img{width:80% !important;height:120px !important}
.menu-quick-btn{width:55px !important;height:55px !important}
.menu-quick-icon{font-size:28px !important}
.menu-quick-row{gap:var(--ds-gap-lg) !important;margin-top:26px !important}
}
/* ── Tablet Portrait (600px – 899px) — stack grid vertically ── */
@media(min-width:600px) and (max-width:899px){
.menu-grid{grid-template-columns:1fr;width:min(72vw,360px);row-gap:clamp(40px,6vw,70px)}
/* .gmc-body, .gmc-text, .gmc-art img, .menu-quick-btn all use base clamps */
}
/* ── Desktop (900px – 1399px) — 2 cols, let clamp() handle sizing ── */
@media(min-width:900px) and (max-width:1399px){
.menu-grid{grid-template-columns:1fr 1fr;width:min(82vw,820px);row-gap:clamp(34px,3.6vw,52px);column-gap:clamp(16px,1.8vw,24px)}
/* heights/fonts inherited from base clamp rules */
}
/* ── Large Desktop (1400px – 2199px) — 2 cols, airy but clamp-bounded ── */
@media(min-width:1400px) and (max-width:2199px){
.menu-grid{grid-template-columns:1fr 1fr;width:min(62vw,880px);row-gap:clamp(38px,3.2vw,56px);column-gap:clamp(18px,1.6vw,26px)}
/* heights/fonts inherited from base clamp rules */
}
/* ── 4K (2200px+) — scale up but smoothly ── */
@media(min-width:2200px){
.menu-grid{grid-template-columns:1fr 1fr;width:min(55vw,1200px);row-gap:clamp(60px,3vw,80px);column-gap:clamp(28px,1.8vw,40px)}
.gmc-body{height:clamp(130px,7vw,160px)}
.gmc-text{font-size:clamp(30px,2vw,38px)}
.gmc-art img{height:clamp(220px,16vw,280px)}
.menu-quick-btn{width:clamp(90px,5.5vw,110px);height:clamp(90px,5.5vw,110px)}
.menu-quick-icon{font-size:clamp(44px,2.6vw,56px)}
/* Logo — larger on 4K */
.logo-img{width:clamp(500px,28vw,760px);max-height:clamp(300px,22vh,440px)}
/* Settings + notification buttons */
.settings-btn,.notif-btn{width:clamp(64px,3vw,82px);height:clamp(64px,3vw,82px);border-radius:clamp(14px,0.7vw,18px)}
.settings-btn svg,.notif-btn svg{width:clamp(32px,1.6vw,42px);height:clamp(32px,1.6vw,42px)}
/* Profile badge — properly big */
.desk-player-badge{min-height:clamp(80px,3.4vw,100px)}
.dpb-avatar-wrap{width:clamp(58px,2.8vw,74px);height:clamp(58px,2.8vw,74px);margin-block:clamp(-6px,-0.3vw,-10px);margin-inline-start:clamp(-10px,-0.5vw,-16px)}
.dpb-avatar-emoji{font-size:clamp(28px,1.4vw,40px)}
.dpb-name{font-size:clamp(14px,0.85vw,20px)}
.dpb-coins-row span{font-size:clamp(13px,0.75vw,18px)}
.dpb-coin-icon{width:clamp(16px,0.85vw,22px);height:clamp(16px,0.85vw,22px)}
.dpb-coins-row{padding:clamp(4px,0.2vw,6px) clamp(12px,0.6vw,18px) clamp(4px,0.2vw,6px) clamp(8px,0.4vw,12px)}
/* Info chips — 🔥 3 🏆 10 */
.menu-info-chip{padding:clamp(10px,0.5vw,14px) clamp(18px,0.9vw,26px);font-size:clamp(18px,0.95vw,24px);gap:var(--ds-gap-sm)}
.menu-info-chip-icon{font-size:clamp(19px,1vw,26px)}
}
/* ═══ Weekly Gifts — Pro Horizontal Scroll ═══ */
/* Progress */
/* Scroll strip */
/* Day card */
/* Claimed */
/* Current — glow */
/* Future */
/* Day 7 jackpot */
/* Dots indicator */
/* Mobile: slightly smaller cards */
@media(max-width:600px){
}
/* ═══ Weekly Gifts — Final Pro Design ═══ */
.gifts-wrap{width:100%;padding:var(--ds-gap-lg) 0 var(--ds-gap-sm)}
.gifts-header{text-align:center;margin-bottom:var(--ds-gap-md);padding:0 var(--ds-pad-screen-x)}
.gifts-header-icon{font-size:clamp(42px,3.6vw,60px);margin-bottom:2px;filter:drop-shadow(0 6px 14px var(--ds-gold-35));animation:giftFloat 3s ease-in-out infinite}
@keyframes giftFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.gifts-header-title{font-size:var(--ds-font-page-title);font-weight:var(--ds-fw-black);background:linear-gradient(180deg,var(--ds-gold) 0%,var(--ds-gold-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.5px}
.gifts-header-sub{font-size:var(--ds-font-body-sm);color:var(--color-text-muted);margin-top:2px}
/* Progress */
.gifts-progress{display:flex;align-items:center;gap:var(--ds-gap-md);margin:0 auto var(--ds-gap-sm);padding:0 var(--ds-pad-screen-x);max-width:clamp(380px,40vw,560px)}
.gifts-progress-bar{flex:1;height:8px;background:var(--ds-gold-15);border-radius:var(--ds-pill-radius);overflow:hidden}
.gifts-progress-fill{height:100%;background:linear-gradient(90deg,var(--ds-gold),var(--ds-gold-soft));border-radius:var(--ds-pill-radius);transition:width .8s cubic-bezier(.4,0,.2,1);position:relative}
.gifts-progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--ds-tint-4));border-radius:var(--ds-pill-radius)}
.gifts-progress-text{font-size:var(--ds-font-body);font-weight:var(--ds-fw-black);color:var(--color-gold-dark);white-space:nowrap}
/* Scroll strip */
.gifts-scroll{display:flex;gap:0;overflow:visible;-webkit-overflow-scrolling:touch;padding:var(--ds-gap-md) var(--ds-pad-screen-x) var(--ds-gap-sm);scrollbar-width:none;justify-content:center;flex-wrap:nowrap}
.gifts-scroll::-webkit-scrollbar{display:none}
/* Card base */
.gifts-card{flex:0 1 clamp(80px,7.2vw,116px);min-width:0;display:flex;flex-direction:column;align-items:center;padding:clamp(10px,0.9vw,16px) clamp(6px,0.5vw,10px);margin:0 var(--ds-gap-xs);border-radius:var(--ds-card-radius);background:linear-gradient(180deg,var(--ds-cream-yellow),var(--ds-cream-bg-deep));border:var(--ds-bw-thick) solid var(--ds-gold-15);box-shadow:var(--ds-shadow-sm);transition:all var(--ds-tr-slow);position:relative}
.gifts-card-num{font-size:var(--ds-font-label);font-weight:var(--ds-fw-heavy);color:var(--color-text-muted);letter-spacing:.8px;margin-bottom:var(--ds-gap-xs);text-transform:uppercase}
.gifts-card-icon{width:var(--ds-avatar-md);height:var(--ds-avatar-md);display:flex;align-items:center;justify-content:center;font-size:clamp(24px,2vw,34px);background:var(--ds-gold-15);border-radius:var(--ds-card-radius);margin-bottom:var(--ds-gap-sm);transition:all var(--ds-tr-slow)}
.gifts-card-amount{font-size:var(--ds-font-number-lg);font-weight:var(--ds-fw-black);color:var(--color-text);line-height:var(--ds-lh-tight)}
.gifts-card-label{font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);color:var(--color-text-muted);margin-top:1px}
/* ── Claimed ── */
.gifts-card-claimed{background:linear-gradient(180deg,#eefbf0,#d8f5dc);border-color:rgba(74,184,96,.3)}
.gifts-card-claimed .gifts-card-icon{background:rgba(74,184,96,.12)}
.gifts-card-claimed .gifts-card-amount{color:var(--color-success)}
.gifts-card-check{position:absolute;top:-7px;right:-7px;width:24px;height:24px;background:linear-gradient(135deg,var(--ds-green-bright),var(--ds-green-light));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-black);color:var(--ds-white);box-shadow:0 2px 8px rgba(74,184,96,.45);border:var(--ds-bw-bold) solid #fff}
/* ── Current day — golden glow ── */
.gifts-card-current{background:linear-gradient(180deg,#fff9e0 0%,#ffe57a 50%,#ffcc33 100%);border-color:var(--ds-gold);box-shadow:0 0 0 3px var(--ds-gold-2),0 8px 28px var(--ds-gold-35);transform:scale(1.1);z-index:var(--ds-z-content)}
.gifts-card-current .gifts-card-num{color:var(--ds-gold-dark);font-weight:var(--ds-fw-black)}
.gifts-card-current .gifts-card-icon{background:var(--ds-tint-5);font-size:clamp(28px,2.4vw,42px);animation:giftBounce 2s ease infinite}
.gifts-card-current .gifts-card-amount{color:var(--ds-gold-dark);font-size:var(--ds-font-number-md)}
@keyframes giftBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.08)}}
.gifts-claim-btn{margin-top:var(--ds-gap-sm);padding:var(--ds-card-pad-sm);border:none;border-radius:var(--ds-card-radius);background:linear-gradient(180deg,var(--ds-green-bright),var(--ds-green-light));color:var(--ds-white);font-size:var(--ds-font-body);font-weight:var(--ds-fw-black);cursor:pointer;box-shadow:0 3px 0 var(--ds-green-forest),0 4px 14px rgba(74,184,96,.3);font-family:'Cairo',sans-serif;transition:all var(--ds-tr);letter-spacing:var(--ds-ls-mid)}
.gifts-claim-btn:hover{filter:brightness(1.1);box-shadow:0 4px 0 var(--ds-green-forest),0 6px 18px rgba(74,184,96,.4);transform:translateY(-1px)}
.gifts-claim-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ds-green-forest)}
/* ── Future ── */
.gifts-card-future{opacity:.35}
.gifts-card-future .gifts-card-icon{filter:grayscale(.7);opacity:var(--ds-op-6)}
/* ── Day 7 special ── */
.gifts-card-jackpot{border-color:var(--ds-gold-3);background:linear-gradient(180deg,var(--ds-cream-yellow),var(--ds-cream-bg-deep),#e8dbb8)}
.gifts-card-jackpot .gifts-card-icon{font-size:clamp(30px,2.4vw,44px);background:var(--ds-gold-15)}
/* Dots */
.gifts-dots{display:none}
.gifts-dot{width:7px;height:7px;border-radius:50%;background:var(--ds-gold-15);transition:all var(--ds-tr-slow)}
.gifts-dot-done{background:var(--color-success);box-shadow:0 0 4px rgba(74,184,96,.3)}
.gifts-dot-active{background:var(--color-gold);box-shadow:0 0 8px var(--ds-gold-5);transform:scale(1.5)}
/* ── Responsive ── */
@media(max-width:600px){
.gifts-card{flex:0 0 96px;padding:14px 6px 12px;margin:0 5px;border-radius:var(--ds-card-radius)}
.gifts-card-icon{width:var(--ds-avatar-md);height:var(--ds-avatar-md);font-size:28px;border-radius:var(--ds-card-radius)}
.gifts-card-amount{font-size:18px}
.gifts-card-current{transform:scale(1.08)}
.gifts-card-current .gifts-card-amount{font-size:24px}
.gifts-card-current .gifts-card-icon{font-size:32px}
.gifts-scroll{padding:var(--ds-card-pad-sm) 6px;justify-content:flex-start}
.gifts-claim-btn{padding:6px 16px;font-size:12px}
}
/* ═══ Leaderboard — Compact Strip + Trophy Icon ═══ */
.lb-compact-strip{display:flex;align-items:center;gap:clamp(10px,1vw,16px);padding:clamp(10px,1vw,14px) clamp(14px,1.4vw,22px);background:linear-gradient(135deg,var(--ds-cream-rich),#ffe88a);border:var(--ds-bw-mid) solid var(--ds-gold-5);border-radius:clamp(14px,1.2vw,18px);flex-shrink:0;flex-wrap:wrap}
.lb-mini-prize{display:inline-flex;align-items:center;gap:clamp(4px,0.4vw,7px);font-size:clamp(13px,1.1vw,17px);font-weight:var(--ds-fw-black);color:var(--ds-text-dark);font-feature-settings:'tnum'}
.lb-mini-prize span{font-size:clamp(15px,1.3vw,20px);line-height:1}
.lb-mini-coin{width:clamp(14px,1.2vw,18px);height:clamp(14px,1.2vw,18px);flex-shrink:0}
.lb-countdown-area{margin-inline-start:auto;text-align:end}
.lb-countdown-label{font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);color:var(--ds-text-warm)}
.lb-countdown-val{font-size:var(--ds-font-label);font-weight:var(--ds-fw-black);color:var(--ds-text-dark);font-feature-settings:'tnum'}
/* Ranking criteria info */
.lb-rank-info{display:none}
/* ═══ Hall of Fame — Clean Layout ═══ */
/* ═══ Friends Screen ═══ */
.friends-content{
flex:1 1 auto;
overflow:hidden;
padding:20px 32px 22px;
max-width:1320px;
margin:0 auto;
width:100%;
min-height:0;
display:flex;
flex-direction:column;
}
.friends-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:22px;
align-items:stretch;
flex:1 1 auto;
min-height:0;
}
.friends-sidebar{
display:flex;
flex-direction:column;
gap:var(--ds-gap-md);
align-self:start;
min-height:0;
}
.friends-main{
display:flex;
flex-direction:column;
gap:var(--ds-gap-md);
min-width:0;
min-height:0;
}
@media (max-width:1020px){
.friends-layout{grid-template-columns:1fr;gap:var(--ds-gap-md)}
.friends-sidebar{position:static;flex-direction:row;flex-wrap:wrap}
.friends-sidebar .friends-search{flex:2 1 320px}
.friends-sidebar .friend-code-card-v{flex:1 1 280px}
}
@media (max-width:640px){
.friends-content{padding:16px 14px 22px}
.friends-sidebar{flex-direction:column}
}
.friends-search{display:flex;gap:var(--ds-gap-sm);margin:0;max-width:100%;width:100%}
.friends-search input{flex:1;padding:var(--ds-card-pad-md);border-radius:var(--ds-card-radius);border:var(--ds-bw-mid) solid var(--ds-gold-35);background:var(--ds-tint-7);font-size:var(--ds-font-body);font-family:Cairo,sans-serif;color:var(--color-text);box-shadow:inset 0 2px 4px var(--ds-shade-5);transition:border-color .15s,box-shadow .15s}
.friends-search input:focus{outline:none;border-color:var(--ds-gold);box-shadow:inset 0 2px 4px var(--ds-shade-5),0 0 0 3px var(--ds-gold-2)}
.friends-search button{padding:var(--ds-card-pad-md);border:none;border-radius:var(--ds-card-radius);background:linear-gradient(180deg,var(--ds-gold-warm),var(--ds-gold));color:var(--ds-white);font-weight:var(--ds-fw-black);font-size:var(--ds-font-card-title);cursor:pointer;font-family:Cairo;box-shadow:0 4px 12px var(--ds-gold-3);transition:transform .12s,box-shadow .15s}
.friends-search button:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--ds-gold-4)}
.friends-search button:active{transform:translateY(0)}
.friends-section-title{
font-size:var(--ds-font-body);font-weight:var(--ds-fw-black);color:var(--ds-text);
margin:20px 0 4px;display:flex;align-items:center;gap:var(--ds-gap-sm);
padding-bottom:8px;border-bottom:2px dashed var(--ds-gold-3)
}
.friends-section-title::before{
content:"";width:4px;height:18px;border-radius:2px;
background:linear-gradient(180deg,var(--ds-gold-warm),var(--ds-gold))
}
.friends-section-title span{background:var(--ds-gold-2);padding:3px var(--ds-gap-sm);border-radius:var(--ds-card-radius);font-size:var(--ds-font-label);font-weight:var(--ds-fw-heavy);color:var(--ds-gold-dark);margin-right:auto}
[dir="ltr"] .friends-section-title span{margin-right:0;margin-left:auto}
.friend-row{
display:grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items:center;
gap: var(--ds-gap-md);
padding: var(--ds-card-pad-md);
min-height: 84px;
background:linear-gradient(135deg,rgba(255,250,225,0.95),rgba(255,232,172,0.88));
border-radius:var(--ds-card-radius);
border:var(--ds-bw-thick) solid rgba(196,155,60,.42);
margin-bottom:0;
transition:transform .15s,border-color .15s,box-shadow .15s,background .18s;
box-shadow:0 8px 22px rgba(196,155,60,.16), inset 0 1px 0 var(--ds-tint-6);
position:relative;
overflow:hidden;
}
.friend-row::before{
content:"";
position:absolute;
top:0;right:0;
width:140px;height:140px;
background:radial-gradient(circle,var(--ds-gold-2) 0%,transparent 65%);
pointer-events:none;
transform:translate(40%,-40%);
}
.friend-row > *{position:relative;z-index:var(--ds-z-base)}
.friend-row:hover{
transform:translateY(-2px);
border-color:var(--ds-gold);
box-shadow:0 12px 28px var(--ds-gold-25),inset 0 1px 0 var(--ds-tint-7);
}
.friend-row:hover{
border-color:var(--ds-gold-55);
background:var(--ds-tint-9);
transform:translateY(-2px);
box-shadow:0 8px 22px var(--ds-shade-1)
}
.friend-avatar,.friend-avatar-fb{width:var(--ds-avatar-lg);height:var(--ds-avatar-lg);border-radius:50%;border:var(--ds-bw-heavy) solid var(--ds-gold);flex-shrink:0;box-shadow:0 7px 16px rgba(196,155,60,.32)}
.friend-avatar{object-fit:cover}
.friend-avatar-fb{background:linear-gradient(135deg,#ffe29a,var(--ds-gold-soft));display:flex;align-items:center;justify-content:center;font-size:var(--ds-font-number-md)}
.friend-info{min-width:0;display:flex;flex-direction:column;gap:var(--ds-gap-xs);overflow:hidden}
.friend-name{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:var(--ds-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--ds-lh-snug);letter-spacing:var(--ds-ls-tight)}
.friend-meta{font-size:var(--ds-font-body-sm);color:var(--ds-text-muted);font-weight:var(--ds-fw-semibold);display:flex;align-items:center;gap:var(--ds-gap-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-presence{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.friend-presence-online{background:var(--ds-green-mid)}
.friend-presence-offline{background:var(--ds-gray-dark)}
.friend-actions{display:flex;gap:var(--ds-gap-xs);flex-shrink:0;align-items:center}
.friend-btn{padding:var(--ds-card-pad-sm);border:none;border-radius:var(--ds-card-radius);font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-heavy);cursor:pointer;font-family:Cairo;transition:transform,box-shadow var(--ds-tr-fast),filter .15s;white-space:nowrap;line-height:var(--ds-lh-tight)}
.friend-btn:hover{filter:brightness(1.05)}
.friend-btn:active{transform:scale(.96)}
.friend-btn-challenge{background:linear-gradient(180deg,var(--ds-purple-violet),#8e44ad);color:var(--ds-white);box-shadow:0 2px 0 var(--ds-purple-dark-vivid)}
.friend-btn-accept{background:linear-gradient(180deg,var(--ds-green-bright),var(--ds-green-mid));color:var(--ds-white);box-shadow:0 2px 0 var(--ds-green-forest)}
.friend-btn-reject{background:var(--ds-red);color:var(--ds-white)}
.friend-btn-add{background:var(--ds-gold);color:var(--ds-white)}
.friend-btn-remove{background:rgba(233,75,90,.1);color:var(--ds-red);border:var(--ds-bw) solid var(--ds-red-app-3)}
.friend-btn-block{background:var(--ds-shade-5);color:#999;font-size:var(--ds-font-label)}
.friend-code-card{
display:flex;align-items:center;justify-content:space-between;gap:var(--ds-gap-lg);
padding:22px 30px;
background:linear-gradient(135deg,rgba(255,250,225,0.95),rgba(255,232,172,0.88));
border-radius:var(--ds-card-radius-lg);
border:var(--ds-bw-thick) solid var(--ds-gold-4);
box-shadow:0 10px 32px var(--ds-gold-2),inset 0 1px 0 var(--ds-tint-6);
position:relative;overflow:hidden
}
.friend-code-card-v{
flex-direction:column;
align-items:stretch;
gap:var(--ds-gap-md);
padding:22px 22px 20px;
text-align:center;
}
.friend-code-card-v .friend-code-label{
font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-heavy);color:var(--ds-gold-dark);letter-spacing:var(--ds-ls-tight);margin-bottom:0;
}
.friend-code-card-v .friend-code-val{
font-size:var(--ds-font-page-title);font-weight:var(--ds-fw-black);color:var(--ds-gold);letter-spacing:5px;
text-shadow:0 2px 4px var(--ds-gold-15);line-height:1;padding:10px 0;
background:var(--ds-tint-5);border-radius:var(--ds-card-radius);
border:1.5px dashed var(--ds-gold-4);
}
.friend-code-card-v .friend-code-hint{
font-size:var(--ds-font-label);font-weight:var(--ds-fw-semibold);color:var(--ds-text-deep);margin-top:-4px;
}
.friend-code-card-v .friend-code-actions{
display:flex;gap:var(--ds-gap-sm);margin-top:4px;
}
.friend-code-card-v .friend-code-actions .friend-btn{
flex:1;padding:var(--ds-card-pad-sm);font-size:var(--ds-font-body-sm);border-radius:var(--ds-card-radius);
}
.friend-code-card::before{
content:"";position:absolute;top:-60px;right:-60px;width:200px;height:200px;
background:radial-gradient(circle,var(--ds-gold-2) 0%,transparent 70%);
pointer-events:none;z-index:0
}
.friend-code-card > *{position:relative;z-index:var(--ds-z-base)}
.friend-code-left{flex:1;min-width:0;text-align:right}
[dir="ltr"] .friend-code-left{text-align:left}
.friend-code-label{font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-bold);color:var(--ds-gold-dark);margin-bottom:6px;letter-spacing:var(--ds-ls-tight)}
.friend-code-val{font-size:clamp(26px,2.2vw,38px);font-weight:var(--ds-fw-black);color:var(--ds-gold);letter-spacing:6px;text-shadow:0 2px 4px var(--ds-gold-15);line-height:var(--ds-lh-tight)}
.friend-code-actions{display:flex;gap:var(--ds-gap-sm);flex-shrink:0}
.friend-code-card .friend-btn{padding:var(--ds-card-pad-sm);font-size:var(--ds-font-body);border-radius:var(--ds-card-radius);min-width:110px;margin-top:0 !important}
@media(max-width:640px){
.friend-code-card{flex-direction:column;padding:22px 24px;text-align:center;gap:var(--ds-gap-md)}
.friend-code-left{text-align:center}
.friend-code-val{font-size:28px;letter-spacing:5px}
.friend-code-actions{width:100%;justify-content:center}
.friend-code-card .friend-btn{flex:1;max-width:160px}
}
.friend-empty{text-align:center;padding:32px;color:var(--color-text-muted);font-size:var(--ds-font-body)}
/* ═══ Public Profile Screen ═══ */
.public-profile-content{flex:1;overflow-y:auto;padding:0;width:100%}
.pp-card{text-align:center;padding:24px 16px;background:var(--color-bg-card);border-radius:var(--ds-card-radius-lg);border:var(--ds-bw-thick) solid var(--ds-gold-3);margin-bottom:16px}
.pp-avatar{width:var(--ds-avatar-xl);height:var(--ds-avatar-xl);border-radius:50%;border:var(--ds-bw-heavy) solid var(--ds-gold);object-fit:cover;margin-bottom:8px}
.pp-name{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:var(--ds-text)}
.pp-username{font-size:var(--ds-font-body-sm);color:var(--ds-text-muted);margin:2px 0}
.pp-level{display:inline-block;padding:3px var(--ds-gap-sm);background:linear-gradient(180deg,var(--ds-cream-pale),var(--ds-gold-bright));border:var(--ds-bw) solid var(--ds-gold);border-radius:var(--ds-pill-radius);font-size:var(--ds-font-label);font-weight:var(--ds-fw-black);color:var(--ds-text-dark);margin:8px 0}
.pp-stats{display:flex;justify-content:center;gap:var(--ds-gap-md);margin:16px 0;flex-wrap:wrap}
.pp-stat{text-align:center}
.pp-stat-val{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:var(--color-text)}
.pp-stat-label{font-size:var(--ds-font-label);color:var(--color-text-muted)}
.pp-actions{display:flex;gap:var(--ds-gap-sm);justify-content:center;margin-top:16px;flex-wrap:wrap}
.pp-match-row{display:flex;align-items:center;gap:var(--ds-gap-sm);padding:var(--ds-card-pad-sm);background:var(--color-bg-card);border-radius:var(--ds-card-radius);border:var(--ds-bw) solid var(--ds-gold-15);margin-bottom:6px;font-size:var(--ds-font-body-sm)}
/* ================================================================
Friend Challenge UI
================================================================ */
.fc-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: var(--ds-shade-5x);
z-index: 99999;
display: flex; align-items: center; justify-content: center;
animation: fcFadeIn 0.25s ease;
}
@keyframes fcFadeIn { from { opacity: 0; } to { opacity: 1; } }
.fc-modal {
background: linear-gradient(145deg, var(--ds-dark-blue) 0%, var(--ds-dark-blue) 50%, #0f3460 100%);
border: 2px solid var(--ds-gold-medium);
border-radius: 20px;
padding: 28px 24px;
width: 340px; max-width: 92vw;
text-align: center;
position: relative;
box-shadow: 0 0 40px rgba(226,176,74,0.3), 0 8px 32px var(--ds-shade-5x);
}
.fc-close {
position: absolute; top: 10px; right: 14px;
background: none; border: none; color: #aaa; font-size: 28px; cursor: pointer;
line-height: 1;
}
.fc-close:hover { color:var(--ds-white); }
.fc-title {
font-size: 22px; font-weight: 700; color: var(--ds-gold-medium);
margin-bottom: 18px;
}
.fc-section-label {
font-size: 13px; color: #aaa; text-transform: uppercase;
letter-spacing: 1px; margin: 14px 0 8px;
}
.fc-type-row, .fc-tier-row {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.fc-type-btn, .fc-tier-btn {
padding: 12px 20px; border-radius: 12px;
border: 2px solid #333; background: #111827; color: #ccc;
font-size: 16px; font-weight: 600; cursor: pointer;
transition: all 0.2s;
}
.fc-type-btn:hover, .fc-tier-btn:hover {
border-color: var(--ds-gold-medium); color:var(--ds-white);
}
.fc-type-active, .fc-tier-active {
border-color: var(--ds-gold-medium) !important;
background: linear-gradient(135deg, var(--ds-gold-medium)22, var(--ds-gold-medium)11) !important;
color: var(--ds-gold-medium) !important;
box-shadow: 0 0 12px rgba(226,176,74,0.3);
}
.fc-send-btn {
margin-top: 22px; width: 100%; padding: 14px;
border: none; border-radius: 14px;
background: linear-gradient(135deg, var(--ds-gold-medium), #d4940a);
color: var(--ds-dark-blue); font-size: 18px; font-weight: 700;
cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 4px 15px rgba(226,176,74,0.4);
}
.fc-send-btn:hover { transform: scale(1.03); box-shadow: 0 6px 20px rgba(226,176,74,0.5); }
.fc-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Waiting state */
.fc-waiting-icon {
font-size: 48px; margin-bottom: 12px;
animation: fcPulse 1.5s ease-in-out infinite;
}
@keyframes fcPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.fc-timer-bar {
width: 100%; height: 6px; background: #222;
border-radius: 3px; margin: 16px 0 8px; overflow: hidden;
}
.fc-timer-fill {
height: 100%; background: linear-gradient(90deg, var(--ds-gold-medium), #ff6b35);
border-radius: 3px; transition: width 1s linear;
}
.fc-timer-text {
font-size: 14px; color: #888; margin-bottom: 12px;
}
.fc-cancel-btn {
padding: 12px 24px; border: 2px solid var(--ds-red-strong); border-radius: 12px;
background: transparent; color: var(--ds-red-strong); font-size: 15px; font-weight: 600;
cursor: pointer; transition: all 0.2s;
}
.fc-cancel-btn:hover { background: var(--ds-red-strong)22; }
/* Incoming challenge overlay */
.fc-overlay-incoming {
background: radial-gradient(ellipse at center, rgba(226,176,74,0.15) 0%, rgba(0,0,0,0.92) 70%);
}
.fc-incoming-card {
text-align: center; padding: 32px 24px;
position: relative; max-width: 360px; width: 92vw;
}
.fc-incoming-pulse {
width: 120px; height: 120px; border-radius: 50%;
border: 3px solid var(--ds-gold-medium); margin: 0 auto 0;
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
animation: fcRingPulse 2s ease-in-out infinite;
}
@keyframes fcRingPulse {
0% { transform: translateX(-50%) scale(1); opacity: 0.7; }
50% { transform: translateX(-50%) scale(1.2); opacity: 0.3; }
100% { transform: translateX(-50%) scale(1); opacity: 0.7; }
}
.fc-incoming-photo {
width: 100px; height: 100px; border-radius: 50%;
border: 3px solid var(--ds-gold-medium); object-fit: cover;
position: relative; z-index: 1; margin-bottom: 16px;
}
.fc-incoming-photo-fallback {
width: 100px; height: 100px; border-radius: 50%;
border: 3px solid var(--ds-gold-medium);
background: var(--ds-dark-blue); display: flex; align-items: center; justify-content: center;
font-size: 42px; margin: 0 auto 16px; position: relative; z-index: 1;
}
.fc-incoming-name {
font-size: 24px; font-weight: 700; color:var(--ds-white); margin-bottom: 4px;
}
.fc-incoming-label {
font-size: 16px; color: var(--ds-gold-medium); font-weight: 600; margin-bottom: 20px;
}
.fc-incoming-info {
display: flex; gap: 16px; justify-content: center; margin-bottom: 20px;
}
.fc-incoming-type, .fc-incoming-tier {
padding: 8px 16px; border-radius: 10px;
background: rgba(226,176,74,0.12); border: 1px solid var(--ds-gold-medium)44;
color: var(--ds-gold-medium); font-size: 16px; font-weight: 600;
}
.fc-incoming-btns {
display: flex; gap: 14px; justify-content: center; margin-top: 20px;
}
.fc-accept-btn {
flex: 1; padding: 16px; border: none; border-radius: 14px;
background: linear-gradient(135deg, #22c55e, #16a34a);
color:var(--ds-white); font-size: 18px; font-weight: 700; cursor: pointer;
box-shadow: 0 4px 15px rgba(34,197,94,0.4);
transition: transform 0.15s;
}
.fc-accept-btn:hover { transform: scale(1.03); }
.fc-decline-btn {
flex: 1; padding: 16px; border: none; border-radius: 14px;
background: linear-gradient(135deg, var(--ds-red-strong), #dc2626);
color:var(--ds-white); font-size: 18px; font-weight: 700; cursor: pointer;
box-shadow: 0 4px 15px rgba(239,68,68,0.3);
transition: transform 0.15s;
}
.fc-decline-btn:hover { transform: scale(1.03); }
/* RTL adjustments */
[dir="rtl"] .fc-close { right: auto; left: 14px; }
/* Friend Challenge Economy UI */
.fc-economy {
margin: 16px 0; padding: 14px;
background: var(--ds-shade-3); border-radius: 14px;
border: 1px solid rgba(226,176,74,0.2);
}
.fc-eco-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fc-eco-row:last-child { border-bottom: none; }
.fc-eco-label {
font-size: 14px; color: #aaa; font-weight: 500;
}
.fc-eco-val {
font-size: 16px; color:var(--ds-white); font-weight: 700;
}
.fc-coins-val {
color: var(--ds-gold-medium); font-size: 18px;
}
.fc-remaining-val {
color: #22c55e; font-size: 18px;
animation: fcCountPulse 0.6s ease;
}
@keyframes fcCountPulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); color: var(--ds-gold-medium); }
100% { transform: scale(1); }
}
.fc-no-matches {
margin: 18px 0 12px; padding: 12px;
background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
border-radius: 10px; color: var(--ds-red-strong);
font-size: 15px; font-weight: 600; text-align: center;
}
.fc-insufficient {
margin-top: 8px; color: var(--ds-red-strong);
font-size: 13px; font-weight: 500; text-align: center;
}
.fc-refill-btns {
display: flex; flex-direction: column; gap: 10px;
margin-top: 16px;
}
.fc-refill-btn {
width: 100%; padding: 14px;
border: none; border-radius: 14px;
font-size: 16px; font-weight: 700;
cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.fc-refill-ad {
background: linear-gradient(135deg, var(--ds-purple-vivid), #6d28d9);
color:var(--ds-white);
box-shadow: 0 4px 15px rgba(124,58,237,0.4);
}
.fc-refill-ad:hover { transform: scale(1.02); }
.fc-refill-pack {
background: linear-gradient(135deg, var(--ds-gold-medium), #d4940a);
color: var(--ds-dark-blue);
box-shadow: 0 4px 15px rgba(226,176,74,0.4);
}
.fc-refill-pack:hover { transform: scale(1.02); }
.fc-refill-disabled {
opacity: 0.4; cursor: not-allowed;
}
.fc-refill-disabled:hover { transform: none; }
.fc-send-btn-disabled {
opacity: 0.5; cursor: not-allowed;
}
/* ================================================================
Friend Challenge Screens — Full Page System
================================================================ */
/* Select Screen */
.fcs-page{min-height:100vh;min-height:100dvh;padding:0;display:flex;flex-direction:column;background:url("assets/bg.webp") center/cover no-repeat var(--ds-cream)}
.fcs-header{display:flex;align-items:center;justify-content:center;padding:var(--ds-pad-screen-y) var(--ds-pad-screen-x);position:sticky;top:0;z-index:var(--ds-z-overlay);background:rgba(252,243,212,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:var(--ds-bw) solid var(--ds-gold-15)}
.fcs-header-title{margin:0;font-size:var(--ds-font-page-title);font-weight:var(--ds-fw-heavy);font-family:"Cairo",sans-serif;background:linear-gradient(180deg,var(--ds-gold-soft) 0%,var(--ds-gold) 40%,var(--ds-gold-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 3px 2px var(--ds-shade-4));letter-spacing:var(--ds-ls-wide);text-align:center;flex:1}
/* Friend info hero */
.fcs-friend-hero{display:flex;flex-direction:column;align-items:center;gap:var(--ds-gap-xs);padding:var(--ds-gap-md) var(--ds-pad-screen-x) var(--ds-gap-xs)}
.fcs-friend-photo{width:var(--ds-avatar-xl);height:var(--ds-avatar-xl);border-radius:50%;border:var(--ds-bw-heavy) solid var(--ds-gold-rich);object-fit:cover;background:var(--ds-cream-bg)}
.fcs-friend-photo-fallback{width:var(--ds-avatar-xl);height:var(--ds-avatar-xl);border-radius:50%;border:var(--ds-bw-heavy) solid var(--ds-gold-rich);background:var(--ds-cream-bg);display:flex;align-items:center;justify-content:center;font-size:clamp(28px,2.4vw,40px)}
.fcs-friend-name{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:var(--ds-text)}
.fcs-friend-subtitle{font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);color:var(--ds-gold-dark)}
/* Economy bar */
.fcs-economy{display:flex;justify-content:center;gap:var(--ds-gap-md);padding:0 var(--ds-pad-screen-x) var(--ds-gap-xs);flex-wrap:wrap}
.fcs-eco-pill{display:flex;align-items:center;gap:var(--ds-gap-xs);padding:var(--ds-pill-pad);border-radius:var(--ds-pill-radius);font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);background:linear-gradient(135deg,#f5e6c4,#e8d5a8);color:var(--ds-text-soft);border:var(--ds-bw-mid) solid var(--ds-gold-3)}
/* Type cards grid */
.fcs-grid{display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));gap:var(--ds-gap-lg);padding:var(--ds-gap-lg) var(--ds-pad-screen-x);max-width:var(--ds-content-max);margin:0 auto;justify-content:center;width:100%}
.fcs-card{position:relative;padding:var(--ds-card-pad-lg);border-radius:var(--ds-card-radius-lg);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ds-gap-md);background:linear-gradient(180deg,var(--ds-cream-pure),var(--ds-cream-vanilla));box-shadow:var(--ds-shadow-lg);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;cursor:pointer;border:var(--ds-bw-bold) solid transparent;overflow:hidden;font-family:"Cairo",sans-serif;min-height:clamp(260px,22vw,320px);justify-content:space-between}
.fcs-card::before{content:"";position:absolute;inset:0;border-radius:var(--ds-card-radius-lg);background:linear-gradient(180deg,var(--ds-tint-3) 0%,transparent 40%);pointer-events:none;z-index:var(--ds-z-base)}
.fcs-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px var(--ds-shade-18),0 6px 14px rgba(0,0,0,0.10)}
.fcs-card:active{transform:translateY(0)}
.fcs-card.fcs-disabled{opacity:var(--ds-op-5);pointer-events:none;filter:grayscale(.3)}
.fcs-card[data-type="laugh"]{border-color:var(--ds-red-vivid)}
.fcs-card[data-type="blink"]{border-color:var(--ds-blue)}
.fcs-card[data-type="joke"]{border-color:var(--ds-orange-warm)}
.fcs-card[data-type="laugh"] .fcs-card__icon-wrap{background:var(--ds-red-viv-1)}
.fcs-card[data-type="blink"] .fcs-card__icon-wrap{background:var(--ds-blue-1)}
.fcs-card[data-type="joke"] .fcs-card__icon-wrap{background:rgba(243,156,18,.12)}
.fcs-card__icon-wrap{width:clamp(72px,6vw,100px);height:clamp(72px,6vw,100px);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:var(--ds-z-content);box-shadow:inset 0 2px 8px var(--ds-shade-6)}
.fcs-card__icon{font-size:clamp(38px,3.4vw,56px);line-height:1;filter:drop-shadow(0 3px 6px var(--ds-shade-15))}
.fcs-card__title{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:var(--ds-text);position:relative;z-index:var(--ds-z-content);letter-spacing:var(--ds-ls-tight)}
.fcs-card__desc{font-size:var(--ds-font-body);font-weight:var(--ds-fw-semibold);color:var(--ds-gold-dark);line-height:var(--ds-lh-normal)5;position:relative;z-index:var(--ds-z-content);padding:0 var(--ds-gap-xs);min-height:44px}
.fcs-card__btn{position:relative;z-index:var(--ds-z-content);border:none;background:var(--ds-gold);color:var(--ds-text-dark);padding:0.4em 1.5em;font-weight:bold;border-radius:var(--ds-card-radius);font-size:var(--ds-font-body);letter-spacing:var(--ds-ls-wide);cursor:pointer;box-shadow:var(--ds-gold-dark) 0px 7px 2px,#000 0px 8px 5px;opacity:0.9;transition:all var(--ds-tr);font-family:inherit;margin-top:6px}
.fcs-card__btn:hover{filter:brightness(1.05)}
.fcs-card__btn:active{top:3px;box-shadow:var(--ds-gold-dark) 0px 2px 0px}
/* Readiness page */
.fcr-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;background:url("assets/bg.webp") center/cover no-repeat var(--ds-cream);padding:60px 0 24px}
.fcr-header{display:flex;align-items:center;justify-content:space-between;padding:15px 30px 10px;width:100%;position:relative;z-index:var(--ds-z-overlay);flex-shrink:0}
.fcr-header-title{margin:0;font-size:var(--ds-font-page-title);font-weight:var(--ds-fw-heavy);font-family:"Cairo",sans-serif;background:linear-gradient(180deg,var(--ds-gold-soft) 0%,var(--ds-gold) 40%,var(--ds-gold-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 3px 2px var(--ds-shade-4));letter-spacing:var(--ds-ls-wide);text-align:center;flex:1}
.fcr-badge{display:flex;align-items:center;gap:var(--ds-gap-xs);padding:var(--ds-pill-pad);border-radius:var(--ds-pill-radius);font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-heavy);position:fixed!important;top:16px!important;right:16px!important;left:auto!important;z-index:50!important}
.fcr-badge-laugh{background:var(--ds-red-viv-1);color:var(--ds-red-vivid)}
.fcr-badge-blink{background:var(--ds-blue-1);color:var(--ds-blue)}
.fcr-camera-wrap{width:min(clamp(320px,28vw,440px),85vw);aspect-ratio:3/4;border-radius:var(--ds-card-radius-lg);overflow:hidden;border:var(--ds-bw-heavy) solid var(--border,var(--ds-border-warm));background:var(--ds-near-black);margin:var(--ds-gap-lg) auto var(--ds-gap-md);position:relative}
.fcr-camera-video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
.fcr-camera-oval{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.fcr-camera-oval svg{width:60%;height:70%;opacity:var(--ds-op-8)}
.fcr-camera-oval ellipse{fill:none;stroke:rgba(100,220,255,0.85);stroke-width:3;stroke-dasharray:0}
.fcr-status{display:flex;justify-content:center;gap:var(--ds-gap-lg);margin:var(--ds-gap-sm) 0}
.fcr-dot{display:flex;align-items:center;gap:var(--ds-gap-xs);font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-bold);color:var(--muted,#888)}
.fcr-dot-icon{width:14px;height:14px;border-radius:50%;background:var(--ds-gray-light);transition:all var(--ds-tr-slow)}
.fcr-dot-icon.ok{background:var(--ds-green-success);box-shadow:0 0 8px var(--ds-green-suc-4)}
.fcr-verified{display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-sm);font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);color:var(--ds-green-success);margin:var(--ds-gap-sm) 0}
.fcr-notice{text-align:center;padding:0 var(--ds-pad-screen-x);font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-semibold);color:var(--muted,var(--ds-text-tan));line-height:var(--ds-lh-loose);max-width:clamp(320px,32vw,460px);margin:var(--ds-gap-sm) auto}
.fcr-buttons{display:flex;gap:var(--ds-gap-md);justify-content:center;margin-top:var(--ds-gap-md);flex-wrap:wrap}
.fcr-btn-ready{border:none;background:linear-gradient(135deg,var(--ds-green-bright),var(--ds-green-mid));color:var(--ds-white);padding:var(--ds-card-pad-md);font-size:var(--ds-btn-primary-font);font-weight:var(--ds-fw-black);border-radius:var(--ds-card-radius);cursor:pointer;box-shadow:0 4px 0 var(--ds-green-pine-dark),0 6px 16px var(--ds-shade-15);transition:all var(--ds-tr);font-family:inherit}
.fcr-btn-ready:hover{filter:brightness(1.05)}
.fcr-btn-ready:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ds-green-pine-dark)}
.fcr-btn-ready:disabled{background:var(--ds-gray);box-shadow:0 4px 0 #888;pointer-events:none;opacity:var(--ds-op-7)}
.fcr-btn-back{border:var(--ds-bw-thick) solid var(--ds-gold-3);background:transparent;color:var(--ds-text-soft);padding:var(--ds-card-pad-md);font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);border-radius:var(--ds-card-radius);cursor:pointer;transition:all var(--ds-tr);font-family:inherit}
.fcr-btn-back:hover{background:var(--ds-gold-15)}
/* Waiting screen */
.fcw-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url("assets/bg.webp") center/cover no-repeat var(--ds-cream);padding:40px 20px}
.fcw-card{background:linear-gradient(180deg,var(--ds-cream-pure),var(--ds-cream-vanilla));border:var(--ds-bw-mid) solid var(--ds-gold-5);border-radius:var(--ds-card-radius-lg);padding:var(--ds-card-pad-lg);max-width:clamp(360px,38vw,500px);width:100%;text-align:center;box-shadow:var(--ds-shadow-lg);display:flex;flex-direction:column;align-items:center;gap:var(--ds-gap-md)}
.fcw-icon{font-size:clamp(44px,3.6vw,64px);animation:fcwPulse 1.5s ease-in-out infinite}
@keyframes fcwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.fcw-title{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:var(--ds-text)}
.fcw-subtitle{font-size:var(--ds-font-body);font-weight:var(--ds-fw-semibold);color:var(--ds-gold-dark)}
.fcw-opponent{display:flex;align-items:center;gap:var(--ds-gap-md);padding:var(--ds-card-pad-sm);background:rgba(229,201,125,.12);border-radius:var(--ds-card-radius)}
.fcw-opponent-photo{width:var(--ds-avatar-md);height:var(--ds-avatar-md);border-radius:50%;border:var(--ds-bw-thick) solid var(--ds-gold-rich);object-fit:cover;background:var(--ds-cream-bg)}
.fcw-opponent-name{font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);color:var(--ds-text)}
.fcw-timer-bar{width:100%;height:8px;background:var(--ds-gold-15);border-radius:var(--ds-pill-radius);overflow:hidden}
.fcw-timer-fill{height:100%;background:linear-gradient(90deg,var(--ds-gold),var(--ds-gold-rich));border-radius:var(--ds-pill-radius);transition:width 1s linear}
.fcw-timer-text{font-size:var(--ds-font-number-lg);font-weight:var(--ds-fw-black);color:var(--ds-gold);font-variant-numeric:tabular-nums}
.fcw-cancel-btn{border:var(--ds-bw-thick) solid var(--ds-red-app-3);background:transparent;color:var(--ds-red);padding:var(--ds-card-pad-sm);font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);border-radius:var(--ds-card-radius);cursor:pointer;transition:all var(--ds-tr);font-family:inherit}
.fcw-cancel-btn:hover{background:var(--ds-gold-15)}
/* Incoming screen */
.fci-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url("assets/bg.webp") center/cover no-repeat var(--ds-cream);padding:40px 20px}
.fci-card{background:linear-gradient(180deg,var(--ds-cream-pure),var(--ds-cream-vanilla));border:var(--ds-bw-mid) solid var(--ds-gold-5);border-radius:var(--ds-card-radius-lg);padding:var(--ds-card-pad-lg);max-width:clamp(360px,38vw,500px);width:100%;text-align:center;box-shadow:var(--ds-shadow-lg);display:flex;flex-direction:column;align-items:center;gap:var(--ds-gap-md);position:relative;overflow:hidden}
.fci-pulse{position:absolute;inset:-50px;border-radius:50%;background:radial-gradient(circle,var(--ds-gold-15) 0%,transparent 70%);animation:fciPulse 2s ease-in-out infinite;pointer-events:none}
@keyframes fciPulse{0%,100%{transform:scale(0.8);opacity:0}50%{transform:scale(1.2);opacity:1}}
.fci-photo{width:var(--ds-avatar-xl);height:var(--ds-avatar-xl);border-radius:50%;border:var(--ds-bw-massive) solid var(--ds-gold-rich);object-fit:cover;background:var(--ds-cream-bg);position:relative;z-index:var(--ds-z-content);box-shadow:0 8px 24px var(--ds-gold-2)}
.fci-photo-fallback{width:var(--ds-avatar-xl);height:var(--ds-avatar-xl);border-radius:50%;border:var(--ds-bw-massive) solid var(--ds-gold-rich);background:var(--ds-cream-bg);display:flex;align-items:center;justify-content:center;font-size:clamp(32px,2.6vw,44px);position:relative;z-index:var(--ds-z-content)}
.fci-name{font-size:var(--ds-font-card-title);font-weight:var(--ds-fw-black);color:var(--ds-text);position:relative;z-index:var(--ds-z-content)}
.fci-label{font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);color:var(--ds-red-vivid);position:relative;z-index:var(--ds-z-content)}
.fci-info{display:flex;gap:var(--ds-gap-md);justify-content:center;flex-wrap:wrap;position:relative;z-index:var(--ds-z-content)}
.fci-info-pill{padding:var(--ds-pill-pad);border-radius:var(--ds-pill-radius);font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);background:rgba(229,201,125,.15);color:var(--ds-text-soft);border:var(--ds-bw) solid rgba(229,201,125,.2)}
.fci-timer-bar{width:100%;height:8px;background:var(--ds-gold-15);border-radius:var(--ds-pill-radius);overflow:hidden;position:relative;z-index:var(--ds-z-content)}
.fci-timer-fill{height:100%;background:linear-gradient(90deg,var(--ds-red),var(--ds-orange-warm));border-radius:var(--ds-pill-radius);transition:width 1s linear}
.fci-timer-text{font-size:var(--ds-font-number-lg);font-weight:var(--ds-fw-black);color:var(--ds-gold);font-variant-numeric:tabular-nums;position:relative;z-index:var(--ds-z-content)}
/* Camera section inside incoming screen */
.fci-camera-section{width:100%;position:relative;z-index:var(--ds-z-content)}
.fci-camera-wrap{width:min(240px,70vw);aspect-ratio:3/4;border-radius:var(--ds-card-radius-lg);overflow:hidden;border:var(--ds-bw-heavy) solid var(--border,var(--ds-border-warm));background:var(--ds-near-black);margin:8px auto;position:relative}
.fci-camera-video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
.fci-camera-oval{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.fci-camera-oval svg{width:60%;height:70%;opacity:var(--ds-op-8)}
.fci-camera-oval ellipse{fill:none;stroke:rgba(100,220,255,0.85);stroke-width:3}
.fci-cam-status{display:flex;justify-content:center;gap:var(--ds-gap-md);margin:6px 0;position:relative;z-index:var(--ds-z-content)}
.fci-cam-dot{display:flex;align-items:center;gap:var(--ds-gap-xs);font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);color:var(--muted,#888)}
.fci-cam-dot-icon{width:12px;height:12px;border-radius:50%;background:var(--ds-gray-light);transition:all var(--ds-tr-slow)}
.fci-cam-dot-icon.ok{background:var(--ds-green-success);box-shadow:0 0 8px var(--ds-green-suc-4)}
.fci-btns{display:flex;gap:var(--ds-gap-md);justify-content:center;flex-wrap:wrap;position:relative;z-index:var(--ds-z-content)}
.fci-accept-btn{border:none;background:linear-gradient(135deg,var(--ds-green-bright),var(--ds-green-mid));color:var(--ds-white);padding:var(--ds-card-pad-md);font-size:var(--ds-btn-primary-font);font-weight:var(--ds-fw-black);border-radius:var(--ds-card-radius);cursor:pointer;box-shadow:0 4px 0 var(--ds-green-pine-dark),0 6px 16px var(--ds-shade-15);transition:all var(--ds-tr);font-family:inherit}
.fci-accept-btn:hover{filter:brightness(1.05)}
.fci-accept-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ds-green-pine-dark)}
.fci-accept-btn:disabled{background:var(--ds-gray);box-shadow:0 4px 0 #888;pointer-events:none;opacity:var(--ds-op-7)}
.fci-decline-btn{border:var(--ds-bw-thick) solid var(--ds-red-app-3);background:transparent;color:var(--ds-red);padding:var(--ds-card-pad-md);font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);border-radius:var(--ds-card-radius);cursor:pointer;transition:all var(--ds-tr);font-family:inherit}
.fci-decline-btn:hover{background:var(--ds-gold-15)}
/* Close button for FC screens */
.fcs-page .red-close,.fcr-page .red-close,.fcw-page .red-close,.fci-page .red-close{position:fixed;top:16px;left:16px;right:auto;z-index:50}
/* Safe area for notch phones */
.fcs-page,.fcr-page,.fcw-page,.fci-page{padding-bottom:env(safe-area-inset-bottom,20px)}
/* Responsive */
/* Tablet: 2 columns (840px and below) */
@media(max-width:840px){
.fcs-grid{grid-template-columns:repeat(2,minmax(220px,1fr));gap:var(--ds-gap-lg);padding:24px 24px 36px;max-width:720px}
.fcs-card{min-height:260px;padding:28px 18px 22px}
.fcs-card__icon-wrap{width:var(--ds-avatar-xl);height:var(--ds-avatar-xl)}
.fcs-card__icon{font-size:42px}
.fcs-card__title{font-size:1.18em}
}
/* Mobile: 1 column (560px and below) */
@media(max-width:560px){
.fcs-grid{grid-template-columns:1fr;gap:var(--ds-gap-md);padding:16px 16px 28px;max-width:400px}
.fcs-card{min-height:auto;padding:22px 16px 18px;gap:var(--ds-gap-sm)}
.fcs-card__icon-wrap{width:var(--ds-avatar-lg);height:var(--ds-avatar-lg)}
.fcs-card__icon{font-size:34px}
.fcs-card__title{font-size:1.08em}
.fcs-card__desc{font-size:0.85em;min-height:auto}
.fcr-camera-wrap{width:min(300px,90vw)}
.fci-camera-wrap{width:min(200px,65vw)}
.fcr-header{padding:var(--ds-card-pad-sm) 8px}
}
@media(max-width:520px){
.fcs-page .red-close,.fcr-page .red-close,.fcw-page .red-close,.fci-page .red-close{width:var(--ds-avatar-sm);height:var(--ds-avatar-sm);font-size:16px;border-radius:var(--ds-card-radius);top:12px;left:12px}
.fcr-badge{padding:var(--ds-pill-pad)!important;font-size:11px!important;top:12px!important;right:12px!important}
.fcr-page{padding-top:48px}
.fcr-header{padding:var(--ds-pill-pad) 6px}
}
/* ═══ Friend Challenge Invite Banner ═══ */
.fc-banner{position:fixed;top:-120px;left:50%;transform:translateX(-50%);width:92%;max-width:480px;padding:var(--ds-card-pad-sm);background:linear-gradient(135deg,var(--ds-dark-blue),var(--ds-dark-blue));border:var(--ds-bw-thick) solid var(--ds-gold-medium);border-radius:var(--ds-card-radius);z-index:var(--ds-z-top);display:flex;align-items:center;gap:var(--ds-gap-md);box-shadow:0 8px 32px var(--ds-shade-5x),0 0 0 1px rgba(226,176,74,0.2);transition:top 0.4s cubic-bezier(0.34,1.56,0.64,1);direction:rtl;font-family:Cairo,sans-serif}
.fc-banner.show{top:16px}
.fc-banner.hide{top:-120px;transition:top 0.3s ease-in}
.fc-banner-photo{width:42px;height:42px;border-radius:50%;object-fit:cover;border:var(--ds-bw-thick) solid var(--ds-gold-medium);flex-shrink:0}
.fc-banner-photo-fb{width:var(--ds-avatar-sm);height:var(--ds-avatar-sm);border-radius:50%;background:#2a2a4a;display:flex;align-items:center;justify-content:center;font-size:var(--ds-font-card-title);flex-shrink:0;border:var(--ds-bw-thick) solid var(--ds-gold-medium)}
.fc-banner-info{flex:1;min-width:0;color:var(--ds-white)}
.fc-banner-info strong{display:block;font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-banner-info span{font-size:var(--ds-font-label);color:#b0a8c0;display:block;margin-top:1px}
.fc-banner-actions{display:flex;gap:var(--ds-gap-xs);flex-shrink:0}
.fc-banner-accept{background:linear-gradient(135deg,var(--ds-green-mid),#3a9d4e);color:var(--ds-white);border:none;border-radius:var(--ds-card-radius);padding:var(--ds-pill-pad);font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-bold);cursor:pointer;font-family:Cairo,sans-serif;transition:transform 0.15s,box-shadow 0.15s}
.fc-banner-accept:active{transform:scale(0.95)}
.fc-banner-decline{background:var(--ds-tint-1);color:var(--ds-red);border:var(--ds-bw) solid var(--ds-red-app-3);border-radius:var(--ds-card-radius);padding:var(--ds-pill-pad);font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-bold);cursor:pointer;font-family:Cairo,sans-serif;transition:transform 0.15s}
.fc-banner-decline:active{transform:scale(0.95)}
.fc-banner-timer{position:absolute;bottom:-1px;left:8px;right:8px;height:3px;border-radius:2px;background:var(--ds-tint-1);overflow:hidden}
.fc-banner-timer-fill{height:100%;background:linear-gradient(90deg,var(--ds-gold-medium),var(--ds-gold-soft));border-radius:2px;transition:width 1s linear}
/* Challenge invite card in friends list */
.fc-invite-section{margin:0 0 12px}
.fc-invite-section-title{font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);color:var(--color-gold-dark);margin-bottom:8px;display:flex;align-items:center;gap:var(--ds-gap-xs)}
.fc-invite-card{background:linear-gradient(135deg,var(--ds-dark-blue),var(--ds-dark-blue));border:var(--ds-bw-thick) solid var(--ds-gold-medium);border-radius:var(--ds-card-radius);padding:var(--ds-card-pad-sm);display:flex;align-items:center;gap:var(--ds-gap-md);margin-bottom:8px;box-shadow:0 4px 16px var(--ds-shade-15)}
.fc-invite-card-photo{width:var(--ds-avatar-sm);height:var(--ds-avatar-sm);border-radius:50%;object-fit:cover;border:var(--ds-bw-thick) solid var(--ds-gold-medium);flex-shrink:0}
.fc-invite-card-photo-fb{width:var(--ds-avatar-sm);height:var(--ds-avatar-sm);border-radius:50%;background:#2a2a4a;display:flex;align-items:center;justify-content:center;font-size:var(--ds-font-card-title);flex-shrink:0;border:var(--ds-bw-thick) solid var(--ds-gold-medium)}
.fc-invite-card-info{flex:1;min-width:0;color:var(--ds-white)}
.fc-invite-card-info strong{font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-bold)}
.fc-invite-card-info span{font-size:var(--ds-font-label);color:#b0a8c0;display:block;margin-top:2px}
.fc-invite-card-actions{display:flex;gap:var(--ds-gap-xs);flex-shrink:0}
.fc-invite-card-accept{background:linear-gradient(135deg,var(--ds-green-mid),#3a9d4e);color:var(--ds-white);border:none;border-radius:var(--ds-card-radius);padding:var(--ds-pill-pad);font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);cursor:pointer;font-family:Cairo,sans-serif}
.fc-invite-card-decline{background:var(--ds-tint-1);color:var(--ds-red);border:var(--ds-bw) solid var(--ds-red-app-3);border-radius:var(--ds-card-radius);padding:var(--ds-pill-pad);font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);cursor:pointer;font-family:Cairo,sans-serif}
.fc-invite-card-timer{font-size:var(--ds-font-label);color:var(--ds-gold-medium);flex-shrink:0;font-weight:var(--ds-fw-semibold)}
/* ============================================
Friends page - responsive
============================================ */
@media(max-width:780px){
.friends-content{padding:20px 18px 32px;gap:var(--ds-gap-md)}
.friend-code-val{font-size:26px;letter-spacing:4px}
}
@media(max-width:560px){
.friends-content{padding:16px 14px 28px;grid-template-columns:1fr;gap:var(--ds-gap-sm)}
.friend-row{padding:var(--ds-card-pad-sm);gap:var(--ds-gap-sm);min-height:64px}
.friend-avatar,.friend-avatar-fb{width:48px!important;height:48px!important;font-size:22px!important}
.friends-section-title{font-size:14px;margin:14px 0 2px}
}
/* ============================================
Friends - Tabs + Pagination (2026-04-13)
============================================ */
/* --- Tabs bar --- */
.friends-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 10px 0 8px;
padding: 10px;
background: var(--ds-tint-55);
border: 1.5px solid var(--ds-gold-25);
border-radius: 18px;
box-shadow: 0 4px 16px var(--ds-shade-5), inset 0 1px 0 var(--ds-tint-6);
}
.friends-tab {
flex: 1 1 auto;
min-width: 130px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
background: transparent;
border: none;
border-radius: 12px;
cursor: pointer;
font-family: Cairo, sans-serif;
font-size: 14px;
font-weight: 800;
color: var(--ds-text-deep);
transition: background .18s, color .18s, transform .12s, box-shadow .18s;
white-space: nowrap;
}
.friends-tab:hover:not(.friends-tab-active) {
background: var(--ds-gold-15);
color: var(--ds-text-mid);
}
.friends-tab-active {
background: linear-gradient(180deg, var(--ds-gold-warm), var(--ds-gold));
color:var(--ds-white);
box-shadow: 0 5px 16px rgba(196,155,60,0.38), inset 0 1px 0 rgba(255,255,255,0.35);
transform: translateY(-1px);
}
.friends-tab-icon { font-size: 16px; line-height: 1; }
.friends-tab-label { font-weight: 900; }
.friends-tab-count {
background: var(--ds-tint-4);
color: inherit;
padding: 2px 9px;
border-radius: 10px;
font-size: 11px;
font-weight: 900;
min-width: 22px;
text-align: center;
}
.friends-tab-active .friends-tab-count {
background: rgba(255,255,255,0.28);
color:var(--ds-white);
}
.friends-tab-empty { opacity: 1; } /* all tabs equal color regardless of count */
/* --- Tab panel (paged grid) --- */
.friends-panel {
background: var(--ds-tint-5);
border: 1.5px solid var(--ds-gold-25);
border-radius: 20px;
padding: 16px 20px;
box-shadow: 0 6px 22px var(--ds-shade-6), inset 0 1px 0 var(--ds-tint-6);
display: flex;
flex-direction: column;
gap: 12px;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.friends-toolbar { flex-shrink: 0; }
.friends-subtabs { flex-shrink: 0; }
.friends-grid-paged { flex: 1 1 auto; min-height: 0; }
.friends-pagination { flex-shrink: 0; margin-top: auto; }
.friends-grid-paged {
/* Responsive 2-col on desktop, 1-col below 640px, always content-sized rows */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
grid-auto-rows: max-content;
gap: clamp(10px, 1vw, 14px);
align-content: start;
min-height: 0;
}
@media (max-width: 640px) {
.friends-grid-paged {
grid-template-columns: 1fr;
}
.friend-row {
padding: 12px 14px;
min-height: 72px;
}
}
/* Empty state inside panel */
.friend-empty-panel {
grid-column: 1 / -1;
text-align: center;
padding: 50px 20px;
color: var(--ds-gold-dark);
font-size: 15px;
font-weight: 700;
}
/* --- Pagination --- */
.friends-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 4px;
padding-top: 14px;
border-top: 1px dashed var(--ds-gold-3);
}
.friends-page-btn {
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1.5px solid var(--ds-gold-3);
border-radius: 11px;
background: var(--ds-tint-7);
color: #6b4e12;
font-family: Cairo, sans-serif;
font-size: 14px;
font-weight: 900;
cursor: pointer;
transition:all var(--ds-tr);
box-shadow: 0 2px 6px var(--ds-shade-5);
}
.friends-page-btn:hover:not(:disabled):not(.friends-page-btn-active) {
border-color: var(--ds-gold);
background: rgba(255,240,200,0.85);
transform: translateY(-1px);
}
.friends-page-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.friends-page-btn-active {
background: linear-gradient(180deg, var(--ds-gold-warm), var(--ds-gold));
border-color: var(--ds-gold-deep-bronze);
color:var(--ds-white);
box-shadow: 0 4px 12px var(--ds-gold-4);
cursor: default;
}
.friends-page-nav {
font-size: 20px;
line-height: 1;
padding: 0 14px;
}
.friends-page-ellipsis {
color: var(--ds-gold-dark);
font-size: 16px;
font-weight: 900;
padding: 0 4px;
user-select: none;
}
/* Mobile: stack tabs, adapt panel */
@media (max-width: 780px) {
.friends-content { padding: 18px 16px 28px; }
.friends-panel { padding: 16px; min-height: 380px; }
.friends-grid-paged { grid-template-columns: 1fr; gap: 10px; }
.friends-tab { min-width: 110px; padding: 10px 12px; font-size: 13px; }
.friends-tab-label { display: none; } /* icon + count only on mobile */
.friends-tab-active .friends-tab-label,
.friends-tab:only-child .friends-tab-label { display: inline; }
.friends-page-btn { min-width: 36px; height: 36px; font-size: 13px; padding: 0 10px; }
}
@media (max-width: 560px) {
.friends-tab { min-width: 72px; padding: 9px 10px; gap: 5px; }
.friends-tab-icon { font-size: 15px; }
.friends-tab-count { padding: 1px 7px; font-size: 10px; }
}
/* Friends - inline global search header (inside panel) */
.friends-search-header{
display:flex;align-items:center;justify-content:space-between;gap:var(--ds-gap-md);
padding:var(--ds-card-pad-md);
background:linear-gradient(135deg,rgba(196,155,60,0.14),var(--ds-gold-15));
border:var(--ds-bw-mid) solid var(--ds-gold-35);
border-radius:var(--ds-card-radius);
margin-bottom:6px;
flex-wrap:wrap
}
.friends-search-header-text{display:flex;align-items:center;gap:var(--ds-gap-sm);flex:1;min-width:0}
.friends-search-header-icon{font-size:var(--ds-font-card-title);flex-shrink:0}
.friends-search-header-label{font-size:var(--ds-font-body);font-weight:var(--ds-fw-heavy);color:var(--ds-text-mid)}
.friends-search-header-query{
font-size:var(--ds-font-body);font-weight:var(--ds-fw-black);color:var(--ds-gold);
background:var(--ds-tint-7);
padding:var(--ds-pill-pad);border-radius:var(--ds-card-radius);
border:var(--ds-bw-mid) solid var(--ds-gold-3);
font-family:ui-monospace,Consolas,monospace;
letter-spacing:var(--ds-ls-wide);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px
}
.friends-search-exit{
padding:9px 16px;border:var(--ds-bw-mid) solid rgba(233,75,90,0.4);
border-radius:var(--ds-card-radius);background:rgba(233,75,90,0.08);
color:var(--ds-red-deep);font-family:Cairo,sans-serif;font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-black);
cursor:pointer;transition:all var(--ds-tr);flex-shrink:0
}
.friends-search-exit:hover{background:rgba(233,75,90,0.16);transform:translateY(-1px)}
@media(max-width:560px){
.friends-search-header{padding:var(--ds-card-pad-sm);gap:var(--ds-gap-sm)}
.friends-search-header-label{font-size:13px}
.friends-search-header-query{font-size:13px;padding:3px 10px}
.friends-search-exit{padding:var(--ds-card-pad-sm);font-size:12px}
}
/* ============================================
Friends - Sub-tabs inside Friends main tab
============================================ */
.friends-subtabs {
display: flex;
gap: 8px;
padding: 6px;
background: var(--ds-gold-15);
border: 1px solid var(--ds-gold-25);
border-radius: 14px;
flex-wrap: wrap;
}
.friends-subtab {
flex: 1 1 auto;
min-width: 130px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 14px;
background: transparent;
border: none;
border-radius: 10px;
cursor: pointer;
font-family: Cairo, sans-serif;
font-size: 13px;
font-weight: 800;
color: var(--ds-text-deep);
transition: background .16s, color .16s, box-shadow .18s;
white-space: nowrap;
}
.friends-subtab:hover:not(.friends-subtab-active) {
background: var(--ds-tint-5);
color: var(--ds-text-mid);
}
.friends-subtab-active {
background: #fff;
color: var(--ds-gold);
box-shadow: 0 3px 10px var(--ds-gold-25), inset 0 0 0 1.5px var(--ds-gold-5);
}
.friends-subtab-icon { font-size: 14px; line-height: 1; }
.friends-subtab-count {
background: var(--ds-gold-2);
color: #6b4e12;
padding: 1px 8px;
border-radius: 9px;
font-size: 10px;
font-weight: 900;
min-width: 20px;
text-align: center;
}
.friends-subtab-active .friends-subtab-count {
background: var(--ds-gold-25);
color: var(--ds-gold);
}
@media (max-width: 560px) {
.friends-subtab { min-width: 90px; padding: 8px 10px; font-size: 12px; }
.friends-subtab-label { display: none; }
.friends-subtab-active .friends-subtab-label { display: inline; }
}
/* ============================================
Friend Card (vertical player card)
============================================ */
.friend-card-v {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 20px 16px 16px;
background: linear-gradient(180deg, var(--ds-tint-85) 0%, rgba(255,250,230,0.85) 100%);
border: 1.5px solid var(--ds-gold-25);
border-radius: 18px;
box-shadow: 0 6px 18px var(--ds-shade-6), inset 0 1px 0 var(--ds-tint-7);
transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s;
position: relative;
overflow: hidden;
}
.friend-card-v::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 64px;
background: linear-gradient(180deg, var(--ds-gold-15) 0%, transparent 100%);
pointer-events: none;
}
.friend-card-v:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px var(--ds-shade-1);
border-color: var(--ds-gold-55);
}
/* Per-tab top accent color */
.friend-card-online::before { background: linear-gradient(180deg, rgba(76,175,80,0.18) 0%, transparent 100%); }
.friend-card-offline::before { background: linear-gradient(180deg, rgba(120,120,120,0.14) 0%, transparent 100%); }
.friend-card-reqs::before { background: linear-gradient(180deg, rgba(255,193,7,0.22) 0%, transparent 100%); }
.friend-card-invites::before { background: linear-gradient(180deg, rgba(156,39,176,0.22) 0%, transparent 100%); }
.friend-card-blocked::before { background: linear-gradient(180deg, rgba(233,75,90,0.18) 0%, transparent 100%); }
.friend-card-top {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
position: relative;
z-index: 1;
}
.friend-card-avatar-wrap {
position: relative;
margin-bottom: 4px;
}
.friend-card-avatar {
width: 76px;
height: 76px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 6px 16px rgba(196,155,60,0.32);
background: #fff;
}
.friend-card-avatar-fb {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ffe29a, var(--ds-gold-soft));
font-size: 34px;
}
.friend-card-presence {
position: absolute;
bottom: 3px;
right: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 2px 6px var(--ds-shade-15);
}
[dir="rtl"] .friend-card-presence { right: auto; left: 3px; }
.friend-card-presence-online { background: var(--ds-green-success); }
.friend-card-presence-offline { background: #9e9e9e; }
.friend-card-name {
font-size: 15px;
font-weight: 900;
color: var(--ds-text);
text-align: center;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 4px;
margin-top: 4px;
}
.friend-card-sub {
font-size: 12px;
font-weight: 600;
color: var(--ds-gold-dark);
text-align: center;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 4px;
}
.friend-card-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 800;
border: 1.5px solid transparent;
}
.friend-card-badge-invite { background: rgba(156,39,176,0.1); color: #7b1fa2; border-color: rgba(156,39,176,0.3); }
.friend-card-badge-req { background: rgba(255,193,7,0.14); color: #a67c00; border-color: rgba(255,193,7,0.35); }
.friend-card-badge-blocked { background: rgba(233,75,90,0.1); color: var(--ds-red-deep); border-color: var(--ds-red-app-3); }
.friend-card-actions {
display: flex;
gap: 8px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--ds-gold-25);
position: relative;
z-index: 1;
}
.friend-card-actions .friend-btn {
flex: 1;
padding: 10px 8px;
font-size: 12px;
font-weight: 800;
border-radius: 10px;
white-space: nowrap;
}
.friend-btn-disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
@media (max-width: 560px) {
.friend-card-v { padding: 18px 14px 14px; }
.friend-card-avatar { width: 68px; height: 68px; }
.friend-card-name { font-size: 14px; }
.friend-card-sub { font-size: 11px; }
.friend-card-actions .friend-btn { padding: 9px 6px; font-size: 11px; }
}
/* ============================================
Friends - Sidebar Stats Card
============================================ */
.friends-stats-card{
background:var(--ds-tint-75);
border:var(--ds-bw-mid) solid var(--ds-gold-3);
border-radius:var(--ds-card-radius-lg);
padding:18px 20px;
box-shadow:0 6px 20px var(--ds-shade-5),inset 0 1px 0 var(--ds-tint-6);
display:flex;flex-direction:column;gap:var(--ds-gap-sm);
}
.friends-stats-title{
font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-black);color:var(--ds-text-mid);
padding-bottom:10px;margin-bottom:4px;
border-bottom:1px dashed var(--ds-gold-3);
letter-spacing:var(--ds-ls-tight);
}
.friends-stat-row{
display:flex;align-items:center;gap:var(--ds-gap-sm);
padding:6px 4px;
font-family:Cairo,sans-serif;
}
.friends-stat-icon{font-size:var(--ds-font-body);flex-shrink:0;width:22px;text-align:center}
.friends-stat-label{flex:1;font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-bold);color:var(--ds-text-rich)}
.friends-stat-val{font-size:var(--ds-font-body);font-weight:var(--ds-fw-black);min-width:32px;text-align:center}
/* ============================================
Responsive: stack sidebar on tablet/mobile
============================================ */
@media (max-width: 1020px){
.friends-layout{grid-template-columns:1fr;gap:var(--ds-gap-md)}
.friends-sidebar{
position:static;
flex-direction:row;
flex-wrap:wrap;
}
.friend-code-card-v,.friends-stats-card{flex:1 1 260px}
.friend-code-card-v{flex-direction:row;text-align:right;gap:var(--ds-gap-md);align-items:center;padding:var(--ds-card-pad-md)}
.friend-code-card-v .friend-code-val{font-size:var(--ds-font-page-title);padding:var(--ds-pill-pad)}
.friend-code-card-v .friend-code-hint{display:none}
.friend-code-card-v .friend-code-actions{flex-shrink:0;margin-top:0}
}
@media (max-width: 640px){
.friends-content{padding:16px 14px 20px}
.friends-sidebar{flex-direction:column}
.friend-code-card-v{flex-direction:column;text-align:center}
.friend-code-card-v .friend-code-hint{display:block}
}
/* ============================================
Friend Row - per-tab tinted gradients
============================================ */
/* ONLINE — gold (keeps default) */
.friend-row-online {
background: linear-gradient(135deg, rgba(255,250,225,0.95), rgba(255,232,172,0.88));
border-color: rgba(196,155,60,0.42);
box-shadow: 0 8px 22px rgba(196,155,60,0.16), inset 0 1px 0 var(--ds-tint-6);
}
.friend-row-online::before {
background: radial-gradient(circle, var(--ds-green-suc-22) 0%, transparent 65%);
}
.friend-row-online:hover {
border-color: var(--ds-green-success);
box-shadow: 0 12px 28px var(--ds-green-suc-22), inset 0 1px 0 var(--ds-tint-7);
}
/* OFFLINE — gray/silver */
.friend-row-offline {
background: linear-gradient(135deg, rgba(250,250,252,0.95), rgba(230,230,238,0.88));
border-color: rgba(120,125,135,0.4);
box-shadow: 0 8px 22px rgba(100,105,120,0.14), inset 0 1px 0 var(--ds-tint-65);
}
.friend-row-offline::before {
background: radial-gradient(circle, rgba(140,145,160,0.22) 0%, transparent 65%);
}
.friend-row-offline:hover {
border-color: #8b92a3;
box-shadow: 0 12px 28px rgba(100,105,120,0.22), inset 0 1px 0 var(--ds-tint-75);
}
/* REQUESTS — green */
.friend-row-reqs {
background: linear-gradient(135deg, rgba(240,255,240,0.95), rgba(208,245,215,0.88));
border-color: rgba(76,175,80,0.42);
box-shadow: 0 8px 22px rgba(76,175,80,0.18), inset 0 1px 0 var(--ds-tint-6);
}
.friend-row-reqs::before {
background: radial-gradient(circle, var(--ds-green-suc-22) 0%, transparent 65%);
}
.friend-row-reqs:hover {
border-color: var(--ds-green-success);
box-shadow: 0 12px 28px rgba(76,175,80,0.26), inset 0 1px 0 var(--ds-tint-7);
}
/* INVITES — purple */
.friend-row-invites {
background: linear-gradient(135deg, rgba(250,245,255,0.95), rgba(232,220,250,0.88));
border-color: rgba(156,39,176,0.4);
box-shadow: 0 8px 22px rgba(156,39,176,0.16), inset 0 1px 0 var(--ds-tint-6);
}
.friend-row-invites::before {
background: radial-gradient(circle, rgba(156,39,176,0.22) 0%, transparent 65%);
}
.friend-row-invites:hover {
border-color: #9c27b0;
box-shadow: 0 12px 28px rgba(156,39,176,0.24), inset 0 1px 0 var(--ds-tint-7);
}
/* BLOCKED — red */
.friend-row-blocked {
background: linear-gradient(135deg, rgba(255,242,242,0.95), rgba(255,212,215,0.88));
border-color: rgba(233,75,90,0.42);
box-shadow: 0 8px 22px rgba(233,75,90,0.16), inset 0 1px 0 var(--ds-tint-6);
}
.friend-row-blocked::before {
background: radial-gradient(circle, rgba(233,75,90,0.22) 0%, transparent 65%);
}
.friend-row-blocked:hover {
border-color: var(--ds-red);
box-shadow: 0 12px 28px rgba(233,75,90,0.24), inset 0 1px 0 var(--ds-tint-7);
}
/* ============================================
Friends - Bulk Toolbar (polished)
============================================ */
.friends-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 11px 16px;
background: var(--ds-tint-7);
border: 1.5px solid var(--ds-gold-3);
border-radius: 14px;
box-shadow: 0 3px 12px var(--ds-shade-5), inset 0 1px 0 var(--ds-tint-6);
flex-wrap: wrap;
transition: background .2s, border-color .2s, box-shadow .2s;
}
.friends-toolbar-sel {
background: linear-gradient(135deg, var(--ds-gold-25), var(--ds-gold-15));
border-color: var(--ds-gold);
box-shadow: 0 0 0 3px var(--ds-gold-15), 0 3px 12px var(--ds-gold-15);
}
.friends-toolbar-left, .friends-toolbar-right {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.friends-toolbar-count {
font-size: 12.5px;
font-weight: 900;
color: var(--ds-text-mid);
padding: 6px 14px;
background: var(--ds-gold-2);
border: 1px solid var(--ds-gold-3);
border-radius: 10px;
}
.friends-toolbar-sel .friends-toolbar-count {
background: var(--ds-tint-75);
color: var(--ds-text-mid);
border-color: var(--ds-gold-4);
}
.friends-toolbar-btn {
padding: 9px 16px;
border: 1.5px solid transparent;
border-radius: 11px;
font-family: Cairo, sans-serif;
font-size: 13px;
font-weight: 900;
cursor: pointer;
transition: transform .12s, box-shadow .15s, background .15s, filter .15s;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
.friends-toolbar-btn-ghost {
background: var(--ds-tint-92);
color: var(--ds-text-mid);
border-color: var(--ds-gold-4);
box-shadow: 0 2px 6px var(--ds-shade-5);
}
.friends-toolbar-btn-ghost:hover {
background: #fff;
border-color: var(--ds-gold);
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--ds-gold-2);
}
.friends-toolbar-btn-accept {
background: linear-gradient(180deg, var(--ds-green-bright), var(--ds-green-mid));
color:var(--ds-white);
box-shadow: 0 3px 0 var(--ds-green-forest), 0 5px 14px rgba(76,175,80,0.32);
}
.friends-toolbar-btn-accept:hover {
transform: translateY(-1px);
box-shadow: 0 4px 0 var(--ds-green-forest), 0 7px 18px rgba(76,175,80,0.42);
filter: brightness(1.04);
}
.friends-toolbar-btn-accept:active {
transform: translateY(2px);
box-shadow: 0 1px 0 var(--ds-green-forest), 0 2px 8px var(--ds-green-suc-3);
}
.friends-toolbar-btn-danger {
background: linear-gradient(180deg, #ff5c6c, var(--ds-red));
color:var(--ds-white);
box-shadow: 0 3px 0 var(--ds-red-blood), 0 5px 14px rgba(233,75,90,0.32);
}
.friends-toolbar-btn-danger:hover {
transform: translateY(-1px);
box-shadow: 0 4px 0 var(--ds-red-blood), 0 7px 18px rgba(233,75,90,0.42);
filter: brightness(1.05);
}
.friends-toolbar-btn-danger:active {
transform: translateY(2px);
box-shadow: 0 1px 0 var(--ds-red-blood), 0 2px 8px var(--ds-red-app-3);
}
/* ============================================
Friend Row - Select mode checkbox
============================================ */
.friend-row-selectable {
cursor: pointer;
user-select: none;
}
.friend-row-check {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding-right: 4px;
}
.friend-row-check-box {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--ds-tint-9);
border: 2.5px solid var(--ds-gold-5);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 900;
color: transparent;
transition:all var(--ds-tr);
box-shadow: inset 0 1px 2px var(--ds-shade-1);
}
.friend-row-selectable:hover .friend-row-check-box:not(.friend-row-check-box-on) {
border-color: var(--ds-gold);
background: #fff;
transform: scale(1.05);
}
.friend-row-check-box-on {
background: linear-gradient(180deg, var(--ds-gold-warm), var(--ds-gold));
border-color: var(--ds-gold-deep-bronze);
color:var(--ds-white);
box-shadow: 0 4px 12px var(--ds-gold-45), inset 0 1px 0 var(--ds-tint-4);
transform: scale(1.05);
}
.friend-row-selected {
border-color: var(--ds-gold) !important;
box-shadow: 0 0 0 3px var(--ds-gold-3), 0 8px 22px var(--ds-gold-25) !important;
}
/* ============================================
Confirm Modal (used by bulk actions)
============================================ */
.fc-confirm-overlay {
position: fixed;
inset: 0;
background: rgba(30,20,0,0.65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
animation: fc-fade-in .2s ease-out;
padding: 20px;
}
.fc-confirm-modal {
background: linear-gradient(180deg, #fffef7, #fff5db);
border: 2.5px solid var(--ds-gold-5);
border-radius: 24px;
padding: 32px 36px 28px;
max-width: 460px;
width: 100%;
text-align: center;
box-shadow: 0 24px 80px var(--ds-shade-4), 0 0 0 1px var(--ds-tint-3) inset;
animation: fc-pop-in .35s cubic-bezier(.34,1.56,.64,1);
font-family: Cairo, sans-serif;
}
.fc-confirm-icon {
font-size: 56px;
line-height: 1;
margin-bottom: 14px;
filter: drop-shadow(0 4px 8px var(--ds-shade-15));
}
.fc-confirm-title {
font-size: 22px;
font-weight: 900;
color: var(--ds-text);
margin-bottom: 10px;
letter-spacing: 0.2px;
}
.fc-confirm-body {
font-size: 14.5px;
font-weight: 600;
color: var(--ds-text-deep);
margin-bottom: 26px;
line-height: 1.55;
}
.fc-confirm-actions {
display: flex;
gap: 12px;
justify-content: center;
}
.fc-confirm-btn {
padding: 13px 26px;
border: none;
border-radius: 13px;
font-family: Cairo, sans-serif;
font-size: 14px;
font-weight: 900;
cursor: pointer;
transition:all var(--ds-tr);
min-width: 130px;
}
.fc-confirm-btn-danger {
background: linear-gradient(180deg, #ff5c6c, var(--ds-red));
color:var(--ds-white);
box-shadow: 0 4px 0 var(--ds-red-blood), 0 6px 16px var(--ds-red-app-3);
}
.fc-confirm-btn-danger:hover {
transform: translateY(-1px);
box-shadow: 0 5px 0 var(--ds-red-blood), 0 9px 20px rgba(233,75,90,0.4);
filter: brightness(1.05);
}
.fc-confirm-btn-danger:active {
transform: translateY(2px);
box-shadow: 0 2px 0 var(--ds-red-blood), 0 3px 10px var(--ds-red-app-3);
}
.fc-confirm-btn-ghost {
background: var(--ds-gold-15);
color: var(--ds-text-mid);
border: 1.5px solid var(--ds-gold-35);
}
.fc-confirm-btn-ghost:hover {
background: var(--ds-gold-2);
border-color: var(--ds-gold);
}
@keyframes fc-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fc-pop-in {
from { transform: scale(0.85) translateY(-20px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
@media (max-width: 640px) {
.friends-toolbar { padding: 10px 12px; gap: 10px; }
.friends-toolbar-btn { padding: 8px 12px; font-size: 12px; }
.friends-toolbar-count { font-size: 11.5px; padding: 5px 11px; }
.friend-row-check-box { width: 24px; height: 24px; font-size: 14px; }
.fc-confirm-modal { padding: 24px 22px 22px; }
.fc-confirm-icon { font-size: 44px; }
.fc-confirm-title { font-size: 18px; }
.fc-confirm-btn { padding: 11px 18px; min-width: 100px; font-size: 13px; }
}
/* Hide trophy icon — replaced by inline tabs */
#leaderboard-screen
/* Center the leaderboard title in its header */
#leaderboard-screen .profile-screen-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
#leaderboard-screen .profile-screen-title{grid-column:2;text-align:center;justify-self:center;margin:0;position:static;transform:none}
/* Force red-close to visual LEFT in leaderboard header (RTL) */
#leaderboard-screen .profile-screen-header .red-close{position:absolute;left:clamp(14px,1.4vw,28px);top:50%;transform:translateY(-50%);right:auto;z-index:3}
#leaderboard-screen .profile-screen-header .red-close:active{transform:translateY(calc(-50% + 2px))}
/* ════════════════════════════════════════════════════════════════
Settings Screen — full page (replaces legacy modal)
Uses design tokens for full responsive consistency
════════════════════════════════════════════════════════════════ */
#settings-screen{display:flex;flex-direction:column;overflow:hidden}
#settings-screen .profile-screen-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;position:relative}
#settings-screen .profile-screen-title{grid-column:2;text-align:center;justify-self:center;margin:0;position:static;transform:none}
#settings-screen .profile-screen-header .red-close{position:absolute;left:var(--ds-pad-screen-x);top:50%;transform:translateY(-50%);right:auto;z-index:3}
.settings-screen-content{flex:1;min-height:0;overflow-y:auto;padding:var(--ds-pad-screen-y) var(--ds-pad-screen-x) var(--ds-gap-lg);max-width:var(--ds-content-max);margin:0 auto;width:100%;display:flex;flex-direction:column;gap:var(--ds-gap-md)}
/* 2-column grid for the 4 setting cards */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-gap-md);align-items:start}
@media (max-width:900px){.settings-grid{grid-template-columns:1fr}}
.settings-card{background:linear-gradient(180deg,var(--ds-cream-warm) 0%,var(--ds-cream-soft) 100%);border:var(--ds-card-border-w) solid var(--ds-gold-4);border-radius:var(--ds-card-radius-lg);padding:var(--ds-card-pad-md);box-shadow:var(--ds-shadow-md),var(--ds-shadow-inset);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--ds-gap-xs)}
.settings-card::before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:radial-gradient(ellipse at top,var(--ds-tint-5) 0%,transparent 65%);pointer-events:none}
.settings-card > *{position:relative;z-index:var(--ds-z-base)}
.settings-card-head{margin:0 0 var(--ds-gap-sm);font-size:var(--ds-font-section-head);font-weight:var(--ds-fw-black);color:var(--ds-text);letter-spacing:var(--ds-ls-mid);padding-bottom:var(--ds-gap-xs);border-bottom:1.5px dashed var(--ds-gold-35);display:flex;align-items:center;gap:var(--ds-gap-xs)}
.settings-card-icon{font-size:1.15em;line-height:1}
#settings-screen .setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-gap-md);padding:clamp(4px,0.35vw,6px) 0;font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);color:var(--ds-text);line-height:var(--ds-lh-snug)}
#settings-screen .setting-row span{display:flex;align-items:center;gap:var(--ds-gap-xs)}
.setting-ico{font-size:1.1em;line-height:1}
#settings-screen .setting-val{font-variant-numeric:tabular-nums;color:var(--ds-text-muted);font-size:var(--ds-font-body-sm)}
.settings-select{padding:clamp(5px,0.45vw,8px) clamp(10px,0.85vw,14px);border-radius:clamp(8px,0.7vw,12px);border:var(--ds-bw-mid) solid var(--ds-gold-4);background:var(--ds-tint-85);color:var(--ds-text);font-family:Cairo,sans-serif;font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-heavy);cursor:pointer;min-width:clamp(110px,10vw,160px)}
.settings-select:hover{border-color:var(--ds-gold)}
#settings-screen .vol-slider{width:100%;margin-top:clamp(4px,0.35vw,6px)}
/* Test buttons: compact icon-above-label design */
.settings-test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,0.55vw,10px);margin-top:clamp(2px,0.2vw,4px)}
.settings-test-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(3px,0.25vw,5px);padding:clamp(10px,0.9vw,16px) clamp(6px,0.5vw,10px);border:none;border-radius:clamp(12px,1vw,16px);font-family:Cairo,sans-serif;font-weight:var(--ds-fw-black);color:var(--ds-white);cursor:pointer;transition:transform .12s,filter .12s,box-shadow .18s;box-shadow:0 4px 0 var(--ds-shade-18),0 6px 14px var(--ds-shade-15);line-height:1;min-height:clamp(64px,5.5vw,84px)}
.settings-test-btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 6px 0 var(--ds-shade-2),0 10px 20px var(--ds-shade-15)}
.settings-test-btn:active{transform:translateY(1px);box-shadow:0 2px 0 var(--ds-shade-2),0 4px 8px var(--ds-shade-1)}
.settings-test-emoji{font-size:clamp(22px,2vw,32px);line-height:1;filter:drop-shadow(0 2px 3px var(--ds-shade-2))}
.settings-test-label{font-size:var(--ds-font-body-sm);letter-spacing:var(--ds-ls-tight)}
.settings-test-blink{background:linear-gradient(180deg,#5dade2,var(--ds-blue));border:var(--ds-bw-mid) solid #2e86c1}
.settings-test-laugh{background:linear-gradient(180deg,#ec7063,var(--ds-red-vivid));border:var(--ds-bw-mid) solid var(--ds-red-deep)}
.settings-test-joke{background:linear-gradient(180deg,#f5b041,var(--ds-orange-warm));border:var(--ds-bw-mid) solid #d68910}
/* Report button — full width, separate from grid */
.settings-report-btn{display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-xs);width:100%;max-width:var(--ds-column-max);margin:var(--ds-gap-sm) auto 0;padding:var(--ds-card-pad-md);border:none;border-radius:var(--ds-card-radius);background:linear-gradient(180deg,var(--ds-red),#c23747);color:var(--ds-white);font-family:Cairo,sans-serif;font-size:var(--ds-font-body);font-weight:var(--ds-fw-black);cursor:pointer;box-shadow:0 4px 0 #8b2a35,var(--ds-shadow-md);transition:transform .12s,filter .12s}
.settings-report-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.settings-report-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #8b2a35}
.settings-footer{text-align:center;padding:var(--ds-gap-sm) 0 0;color:var(--ds-text-muted);font-size:var(--ds-font-label);font-weight:var(--ds-fw-bold);opacity:0.65}
/* Hide legacy modal since page replaces it */
#settings-modal{display:none!important}
/* Profile privacy tab */
.profile-privacy-block{display:flex;flex-direction:column;gap:var(--ds-gap-sm);padding:var(--ds-gap-sm) 0}
#pp-panel-privacy .setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-gap-md);padding:var(--ds-gap-xs) 0;font-size:var(--ds-font-body);font-weight:var(--ds-fw-bold);color:var(--ds-text)}
#pp-panel-privacy .setting-row span{display:flex;align-items:center;gap:var(--ds-gap-xs)}
/* ════════════════════════════════════════════════════════════════
Profile Page polish — privacy tab actions + general
════════════════════════════════════════════════════════════════ */
.pp-privacy-divider{height:1.5px;background:linear-gradient(90deg,transparent,var(--ds-gold-35),transparent);margin:var(--ds-gap-md) 0 var(--ds-gap-sm)}
/* Pro account actions — professional, modern pill buttons */
.pp-account-actions{display:flex;gap:14px;margin-top:18px}
.pp-acc-btn{flex:1;position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 18px;border-radius:16px;font-family:Cairo,Tajawal,sans-serif;font-size:14.5px;font-weight:800;letter-spacing:.2px;cursor:pointer;transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s ease,background .2s ease,color .2s ease,border-color .2s ease;border:1.5px solid;line-height:1;overflow:hidden;isolation:isolate;user-select:none;-webkit-tap-highlight-color:transparent}
.pp-acc-btn svg{flex-shrink:0;transition:transform .25s cubic-bezier(.2,.9,.3,1.2)}
.pp-acc-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.55),transparent 60%);opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:-1}
.pp-acc-btn:hover::before{opacity:1}
.pp-acc-btn:hover svg{transform:translateX(-3px)}
[dir="ltr"] .pp-acc-btn:hover svg{transform:translateX(3px)}
.pp-acc-btn:active{transform:translateY(1px) scale(.98)}
/* Logout — subtle neutral, professional secondary */
.pp-acc-logout{background:linear-gradient(180deg,#fefaf0,#f6ecd4);border-color:rgba(139,105,20,.22);color:#5a4a1f;box-shadow:0 2px 0 rgba(139,105,20,.12),0 6px 18px -6px rgba(139,105,20,.18),inset 0 1px 0 rgba(255,255,255,.7)}
.pp-acc-logout:hover{background:linear-gradient(180deg,#fff7e0,#f0e0a8);border-color:rgba(196,155,60,.55);color:#3b2f10;box-shadow:0 3px 0 rgba(139,105,20,.18),0 10px 24px -6px rgba(196,155,60,.3),inset 0 1px 0 rgba(255,255,255,.8);transform:translateY(-2px)}
.pp-acc-logout:active{transform:translateY(1px) scale(.98);box-shadow:0 1px 0 rgba(139,105,20,.15),inset 0 1px 3px rgba(0,0,0,.08)}
/* Delete — destructive, clear danger signal but refined */
.pp-acc-delete{background:linear-gradient(180deg,#fff5f6,#ffe3e6);border-color:rgba(233,75,90,.3);color:#b8344a;box-shadow:0 2px 0 rgba(184,58,71,.15),0 6px 18px -6px rgba(233,75,90,.2),inset 0 1px 0 rgba(255,255,255,.7)}
.pp-acc-delete:hover{background:linear-gradient(180deg,#ffe8ec,#ffcbd2);border-color:rgba(233,75,90,.7);color:#9d2439;box-shadow:0 3px 0 rgba(184,58,71,.22),0 10px 24px -6px rgba(233,75,90,.38),inset 0 1px 0 rgba(255,255,255,.8);transform:translateY(-2px)}
.pp-acc-delete:active{transform:translateY(1px) scale(.98);box-shadow:0 1px 0 rgba(184,58,71,.18),inset 0 1px 3px rgba(0,0,0,.08)}
/* Focus ring for keyboard users */
.pp-acc-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,155,60,.35),0 2px 0 rgba(139,105,20,.12),0 6px 18px -6px rgba(139,105,20,.18),inset 0 1px 0 rgba(255,255,255,.7)}
.pp-acc-delete:focus-visible{box-shadow:0 0 0 3px rgba(233,75,90,.3),0 2px 0 rgba(184,58,71,.15),0 6px 18px -6px rgba(233,75,90,.2),inset 0 1px 0 rgba(255,255,255,.7)}
/* Hide the legacy compact-actions (now moved into privacy tab) */
.profile-compact-actions{display:none!important}
/* ════════════════════════════════════════════════════════════════
Profile Page — professional polish (uses design tokens)
════════════════════════════════════════════════════════════════ */
#profile-screen{display:flex;flex-direction:column;overflow:hidden}
#profile-screen .profile-screen-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;position:relative}
#profile-screen .profile-screen-title{grid-column:2;text-align:center;justify-self:center;margin:0;position:static;transform:none}
#profile-screen .profile-screen-header .red-close{position:absolute;left:var(--ds-pad-screen-x);top:50%;transform:translateY(-50%);right:auto;z-index:3}
#profile-screen .profile-screen-header > div:first-child{display:none}
#profile-screen .profile-page{flex:1;min-height:0;overflow-y:auto;padding:var(--ds-pad-screen-y) var(--ds-pad-screen-x) var(--ds-gap-lg);max-width:clamp(900px,90vw,1400px);margin:0 auto;width:100%}
#profile-screen .profile-page-body{display:grid;grid-template-columns:clamp(280px,24vw,360px) minmax(0,1fr);gap:var(--ds-gap-lg);width:100%;max-width:none;margin:0;align-items:start}
#profile-screen .profile-right-col,#profile-screen .profile-left-col{display:flex;flex-direction:column;gap:var(--ds-gap-md);min-width:0}
@media (max-width:900px){#profile-screen .profile-page-body{grid-template-columns:1fr}}
/* Hero header card */
#profile-screen .profile-header-card{margin:0;padding:var(--ds-card-pad-lg);background:linear-gradient(180deg,var(--ds-cream-warm) 0%,var(--ds-cream-soft) 60%,var(--ds-gold-cream) 100%);border:var(--ds-card-border-w) solid var(--ds-gold-45);border-radius:var(--ds-card-radius-lg);box-shadow:var(--ds-shadow-lg),var(--ds-shadow-inset);position:relative;overflow:hidden}
#profile-screen .profile-header-card::before{content:;position:absolute;top:0;left:0;right:0;height:55%;background:radial-gradient(ellipse at top,var(--ds-tint-6) 0%,transparent 65%);pointer-events:none}
#profile-screen .profile-header-card > *{position:relative;z-index:var(--ds-z-base)}
/* Stats card */
#profile-screen .profile-stats{margin:0;padding:var(--ds-card-pad-md);background:linear-gradient(180deg,var(--ds-cream-warm) 0%,var(--ds-cream-soft) 100%);border:var(--ds-card-border-w) solid var(--ds-gold-4);border-radius:var(--ds-card-radius);box-shadow:var(--ds-shadow-md),var(--ds-shadow-inset);display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;overflow:hidden}
#profile-screen .profile-stats::before{content:;position:absolute;top:0;left:0;right:0;height:50%;background:radial-gradient(ellipse at top,var(--ds-tint-5) 0%,transparent 65%);pointer-events:none}
#profile-screen .profile-stats .p-stat{background:transparent;border:none;border-left:1.5px dashed var(--ds-gold-35);border-radius:0;padding:var(--ds-gap-sm) var(--ds-gap-xs);text-align:center;position:relative;z-index:var(--ds-z-base)}
#profile-screen .profile-stats .p-stat:first-child{border-left:none}
#profile-screen .profile-stats .p-stat-val{display:block;font-size:var(--ds-font-number-lg);font-weight:var(--ds-fw-black);color:var(--ds-text);font-variant-numeric:tabular-nums}
#profile-screen .profile-stats .p-stat-lbl{display:block;font-size:var(--ds-font-label);color:var(--ds-text-muted);margin-top:3px;font-weight:var(--ds-fw-bold);letter-spacing:var(--ds-ls-mid)}
/* Tab bar */
#profile-screen .profile-seg-tabs{display:flex;gap:var(--ds-gap-xs);padding:var(--ds-gap-xs);background:rgba(255,247,205,0.6);border:var(--ds-bw-mid) solid var(--ds-gold-3);border-radius:var(--ds-card-radius);box-shadow:var(--ds-shadow-sm),var(--ds-shadow-inset);margin:0;justify-content:stretch}
#profile-screen .profile-seg-tabs::after{display:none}
#profile-screen .profile-seg-tabs .shop-tab{flex:1;min-width:0;padding:var(--ds-card-pad-sm);font-size:var(--ds-font-body-sm);font-weight:var(--ds-fw-black);color:var(--ds-text-muted);background:transparent;border:var(--ds-bw-mid) solid transparent;border-radius:clamp(10px,0.85vw,14px);cursor:pointer;transition:all var(--ds-tr);font-family:Cairo,sans-serif;text-align:center}
#profile-screen .profile-seg-tabs .shop-tab:hover{color:var(--ds-text);background:var(--ds-tint-5)}
#profile-screen .profile-seg-tabs .shop-tab.active{background:linear-gradient(180deg,var(--ds-cream-light),#f0d68a);border-color:var(--ds-gold);color:var(--ds-text);box-shadow:0 3px 0 var(--ds-gold-dark),var(--ds-shadow-sm)}
/* Tab panels — each becomes a card */
#profile-screen .profile-tab-panels{margin-top:0;align-self:stretch;width:100%}
#profile-screen .profile-left-col > *{width:100%;box-sizing:border-box}
#profile-screen .profile-panel{display:none}
#profile-screen .profile-panel.active{display:block;padding:var(--ds-card-pad-md);background:linear-gradient(180deg,var(--ds-cream-warm) 0%,var(--ds-cream-soft) 100%);border:var(--ds-card-border-w) solid var(--ds-gold-4);border-radius:var(--ds-card-radius);box-shadow:var(--ds-shadow-md),var(--ds-shadow-inset);position:relative;overflow:hidden}
#profile-screen .profile-panel.active::before{content:;position:absolute;top:0;left:0;right:0;height:50%;background:radial-gradient(ellipse at top,var(--ds-tint-5) 0%,transparent 65%);pointer-events:none}
#profile-screen .profile-panel.active > *{position:relative;z-index:var(--ds-z-base)}
/* Account actions inside privacy tab — better spacing */
#profile-screen .pp-account-actions{display:flex;gap:var(--ds-gap-sm);margin-top:var(--ds-gap-sm)}
/* Profile field bars (name/username inputs) */
#profile-screen .profile-field-bar{padding:var(--ds-card-pad-sm);border-radius:clamp(10px,0.85vw,14px);font-size:var(--ds-font-body)}
/* Level chip */
#profile-screen #pp-level{font-size:var(--ds-font-body-sm);padding:clamp(4px,0.4vw,7px) clamp(12px,1vw,18px);border-radius:var(--ds-pill-radius)}
/* XP text */
#profile-screen .xp-text{font-size:var(--ds-font-label);color:var(--ds-text-muted)}
/* Game screen header floats over content */
#game-screen .game-header{position:absolute;top:0;right:0;left:0;z-index:var(--ds-z-modal);padding:14px 22px;background:transparent;pointer-events:none}
#game-screen .game-header > *{pointer-events:auto}
#game-screen .game-header .red-close{box-shadow:0 6px 18px var(--ds-shade-25)}
#game-screen .game-content{padding-top:0}
#game-screen .game-header .coin-pill,#game-screen .game-header .coin-pill-sm{padding:11px 28px 11px 52px !important;font-size:20px !important;min-width:140px !important;height:44px !important;filter:drop-shadow(0 4px 12px var(--ds-shade-3))}
#game-screen .game-header .badge.sm{font-size:18px;padding:9px 18px}
/* ===== A0001+ Result Screen Polish ===== */
@keyframes resCardSlideUp{0%{opacity:0;transform:translateY(30px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes resCharPop{0%{opacity:0;transform:scale(.4) rotate(-12deg)}55%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes resTitleSlide{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
@keyframes resStatPop{0%{opacity:0;transform:translateY(12px) scale(.92)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes resBtnFade{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes resGlowPulse{0%,100%{filter:drop-shadow(0 0 16px rgba(93,207,114,.45)) drop-shadow(0 6px 16px rgba(0,0,0,.15))}50%{filter:drop-shadow(0 0 28px rgba(93,207,114,.75)) drop-shadow(0 6px 16px rgba(0,0,0,.15))}}
@keyframes resGlowPulseLose{0%,100%{filter:drop-shadow(0 0 14px rgba(245,135,95,.35)) drop-shadow(0 6px 16px rgba(0,0,0,.15))}50%{filter:drop-shadow(0 0 24px rgba(245,135,95,.6)) drop-shadow(0 6px 16px rgba(0,0,0,.15))}}
@keyframes resBgWave{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* Stronger entrance for the modal */
.result-modal{animation:resCardSlideUp .55s cubic-bezier(.22,1,.36,1) both !important}
/* Background variants based on win/loss/draw */
.result-overlay{background:radial-gradient(ellipse at top,var(--ds-shade-4) 0%,var(--ds-shade-5x) 100%) !important}
.result-modal{background:linear-gradient(160deg,var(--ds-cream-warm) 0%,var(--ds-cream-soft) 50%,var(--ds-gold-cream) 100%) !important;background-size:200% 200% !important;animation:resCardSlideUp .55s cubic-bezier(.22,1,.36,1) both,resBgWave 8s ease infinite !important}
.result-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:radial-gradient(ellipse at top,var(--ds-tint-6) 0%,transparent 65%);pointer-events:none;border-radius:var(--ds-card-radius-lg) var(--ds-card-radius-lg) 0 0}
/* Hero character — staggered bounce + glow */
.result-char-wrap{animation:resCharPop .65s cubic-bezier(.34,1.56,.64,1) .1s both;position:relative;z-index:1}
.result-modal:has(.result-title-win) .result-char-img{animation:resGlowPulse 2.4s ease-in-out 1s infinite}
.result-modal:has(.result-title-lose) .result-char-img{animation:resGlowPulseLose 2.4s ease-in-out 1s infinite}
/* Title slide-in */
.result-title{animation:resTitleSlide .5s cubic-bezier(.22,1,.36,1) .25s both;position:relative;z-index:1}
.result-title-win{background:linear-gradient(180deg,#5dcf72,#3da84e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 18px rgba(93,207,114,.35)}
.result-title-lose{background:linear-gradient(180deg,#f5875f,#d97550);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 18px rgba(245,135,95,.35)}
/* Badge (انتصار / خسارة) */
.result-char-badge{animation:resTitleSlide .5s cubic-bezier(.22,1,.36,1) .35s both}
/* XP strip + cards staggered */
.result-xp-strip{animation:resStatPop .5s cubic-bezier(.22,1,.36,1) .42s both;position:relative;z-index:1;background:linear-gradient(180deg,var(--ds-white),var(--ds-cream-light)) !important;border:var(--ds-bw-mid) solid var(--ds-gold-3);box-shadow:var(--ds-shadow-sm),inset 0 1px 0 var(--ds-tint-6)}
.result-cards{position:relative;z-index:1}
.result-cards .result-card:nth-child(1){animation:resStatPop .5s cubic-bezier(.22,1,.36,1) .55s both}
.result-cards .result-card:nth-child(2){animation:resStatPop .5s cubic-bezier(.22,1,.36,1) .68s both}
.result-card{background:linear-gradient(180deg,var(--ds-white),var(--ds-cream-light)) !important;border:var(--ds-bw-mid) solid var(--ds-gold-3) !important;box-shadow:var(--ds-shadow-sm),inset 0 1px 0 var(--ds-tint-6)}
.result-card-fire{background:linear-gradient(180deg,#fff,#ffe7d6) !important;border-color:rgba(245,135,95,.55) !important;box-shadow:0 6px 18px rgba(245,135,95,.18),inset 0 1px 0 var(--ds-tint-6) !important}
.result-card-gold{background:linear-gradient(180deg,#fff,#fff0c0) !important;border-color:var(--ds-gold-5) !important;box-shadow:0 6px 18px var(--ds-gold-3),inset 0 1px 0 var(--ds-tint-6) !important}
/* Action buttons fade in last */
.result-btns{animation:resBtnFade .5s cubic-bezier(.22,1,.36,1) .82s both;position:relative;z-index:1}
/* Counter element ready for JS animation */
[data-count-target]{font-variant-numeric:tabular-nums}
/* Better confetti — bigger, brighter, more pieces */
.confetti-piece{position:absolute;top:-10px;border-radius:2px;animation:confettiFall linear forwards;will-change:transform,opacity}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(110vh) rotate(720deg)}}
/* ===== A0001+ Leaderboard Polish v2 ===== */
@keyframes lbpHoverGlow{0%,100%{box-shadow:0 4px 12px var(--ds-shade-6)}50%{box-shadow:0 6px 18px var(--ds-shade-15)}}
@keyframes lbpOwnPulse{0%,100%{box-shadow:0 4px 14px var(--ds-gold-3),0 0 0 0 var(--ds-gold-4)}50%{box-shadow:0 4px 14px var(--ds-gold-3),0 0 0 6px var(--ds-gold-15)}}
/* Hover lift on every leaderboard row */
.lbp-simple-row{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,border-color .25s ease;cursor:pointer}
.lbp-simple-row:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 10px 26px var(--ds-shade-15);border-color:var(--ds-gold-5);z-index:5;position:relative}
/* Podium card hover lift (correct class: .lbp-card) */
.lbp-card{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.lbp-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 36px var(--ds-shade-18)}
.lbp-card-gold:hover{box-shadow:0 18px 40px rgba(196,155,60,0.55),0 0 0 4px rgba(255,215,0,0.28),inset 0 2px 0 rgba(255,255,255,0.85)}
.lbp-card-silver:hover{box-shadow:0 14px 32px rgba(106,106,106,0.45),inset 0 2px 0 rgba(255,255,255,0.8)}
.lbp-card-bronze:hover{box-shadow:0 14px 32px rgba(106,61,31,0.5),inset 0 2px 0 rgba(255,255,255,0.8)}
/* Own row golden pulse */
.lbp-simple-own{animation:lbpFade .55s ease-out both,lbpOwnPulse 2.6s ease-in-out 1.5s infinite}
/* ===== A0001+ Celebration Enhancements ===== */
@keyframes resScreenFlash{0%{background:rgba(255,255,255,0)}15%{background:rgba(255,255,255,0.35)}100%{background:rgba(255,255,255,0)}}
@keyframes resCounterBump{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes resStar{0%{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) scale(0) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) scale(1.3) rotate(360deg)}}
@keyframes resConfettiPiece{0%{opacity:1;transform:translateY(-20px) rotate(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(115vh) rotate(var(--rot,720deg)) scale(0.7)}}
/* Screen flash overlay on win */
.result-overlay.res-flash::after{content:'';position:absolute;inset:0;pointer-events:none;background:rgba(255,255,255,0);animation:resScreenFlash 1s ease-out;z-index:3}
/* Counter "bump" pulse when animation completes */
.res-bump{animation:resCounterBump .4s cubic-bezier(.34,1.56,.64,1)}
/* Star burst for wins - JS generates them */
.res-star-burst{position:absolute;top:30%;left:50%;width:0;height:0;pointer-events:none;z-index:4}
.res-star-burst span{position:absolute;top:0;left:0;font-size:clamp(18px,1.8vw,26px);animation:resStar 1.4s cubic-bezier(.22,1,.36,1) forwards}
/* Improved confetti — larger, with more variety */
.result-confetti i{position:absolute;top:-20px;border-radius:2px;animation:resConfettiPiece linear forwards;will-change:transform,opacity}
.result-confetti i.star{border-radius:50%;transform-origin:center}
/* Header-placed info chips next to settings */
.menu-info-strip.menu-info-strip-hdr{margin:0;gap:clamp(6px,0.5vw,10px);justify-content:flex-end}
.menu-info-strip.menu-info-strip-hdr .menu-info-chip{padding:clamp(6px,0.45vw,11px) clamp(12px,0.8vw,18px);font-size:clamp(13px,0.85vw,18px)}
.menu-info-strip.menu-info-strip-hdr .menu-info-chip-icon{font-size:clamp(14px,0.9vw,19px)}
/* Slightly larger quick-row buttons */
.menu-quick-btn{width:clamp(50px,5vw,66px) !important;height:clamp(50px,5vw,66px) !important}
.menu-quick-icon{font-size:clamp(26px,2.6vw,34px) !important}
/* Stack header chips vertically */
.menu-info-strip.menu-info-strip-hdr{flex-direction:column;align-items:flex-end;gap:clamp(4px,0.35vw,8px)}
/* Push quick-row further down toward footer */
.menu-quick-row{margin-top:clamp(30px,5vh,70px) !important}
/* Slightly smaller menu logo */
.logo-img{width:clamp(240px,30vw,460px) !important;max-height:clamp(170px,24vh,280px) !important}
/* ========== Auth Screen (full page) ========== */
#auth-screen{background:transparent}
#auth-screen.active{display:flex !important;align-items:center;justify-content:center;min-height:100vh;padding:clamp(16px,2vw,32px)}
.auth-page{position:relative;width:100%;max-width:clamp(720px,72vw,1080px);display:flex;align-items:center;justify-content:center}
.auth-close{position:absolute;top:-14px;right:-14px;z-index:5}
.auth-card{
width:100%;
background:linear-gradient(180deg,#fffaea 0%,#fff5d6 100%);
border:var(--ds-bw-heavy) solid var(--ds-gold-55);
border-radius:var(--ds-card-radius-lg);
padding:clamp(24px,2.6vw,42px) clamp(22px,2.4vw,38px);
box-shadow:0 22px 56px rgba(139,105,20,.28),0 0 0 1px rgba(255,255,255,.5) inset,0 -18px 36px var(--ds-gold-15) inset;
display:flex;flex-direction:row;align-items:center;justify-content:space-between;
gap:clamp(20px,2.5vw,48px);
}
/* Char comes first in DOM. In RTL row, first item is at the visual right. */
.auth-char{
width:clamp(280px,28vw,440px);height:auto;flex-shrink:0;align-self:center;
filter:drop-shadow(0 22px 40px rgba(139,105,20,.32));
pointer-events:none;user-select:none;
}
.auth-form-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(10px,1vw,16px);text-align:right}
.auth-title{margin:0 0 clamp(6px,0.6vw,12px) 0;font-size:clamp(22px,1.9vw,34px);color:var(--ds-text);font-weight:var(--ds-fw-black);text-align:right;line-height:1.25}
.auth-sub{margin:0;color:var(--muted);font-size:clamp(13px,0.9vw,16px);text-align:right}
.auth-google-wrap{width:100%;display:flex;justify-content:center}
.auth-divider{display:flex;align-items:center;gap:10px;width:100%;color:var(--muted);font-size:13px;margin:clamp(4px,0.5vw,10px) 0}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--ds-gold-35)}
.auth-form{display:flex;flex-direction:column;gap:clamp(8px,0.8vw,12px);width:100%}
.auth-forgot{color:var(--accent);font-size:13px;display:block;text-align:right;text-decoration:none}
.auth-toggle-btn{margin-top:4px}
@media (max-width: 820px){
.auth-card{flex-direction:column;gap:clamp(12px,2vw,20px)}
.auth-char{width:clamp(180px,38vw,260px)}
}
/* Anchor character to the bottom edge of the auth card */
.auth-card{align-items:stretch;overflow:hidden}
.auth-char{align-self:flex-end;margin-bottom:calc(-1 * clamp(24px,2.6vw,42px))}
.auth-form-col{justify-content:center}
/* Inline forgot-password panel inside auth card */
.auth-forgot-panel{display:flex;flex-direction:column;gap:clamp(8px,0.8vw,12px);text-align:right;animation:fadeIn .25s ease}
.auth-back-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:rgba(255,250,225,0.85);border:2px solid var(--ds-gold-45);color:var(--ds-text);cursor:pointer;font-size:14px;font-weight:800;padding:8px 16px;border-radius:999px;font-family:Cairo,sans-serif;box-shadow:0 3px 0 rgba(139,105,20,.2),0 6px 14px rgba(139,105,20,.12);transition:transform .15s,box-shadow .15s,filter .15s}
.auth-back-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(139,105,20,.22),0 10px 18px rgba(139,105,20,.15);filter:brightness(1.04)}
.auth-back-btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(139,105,20,.18)}
.auth-back-arrow{font-size:16px;line-height:1}
.auth-forgot-emoji{font-size:38px;text-align:center;margin:4px 0}
.auth-forgot-title{margin:0;font-size:clamp(18px,1.4vw,24px);font-weight:var(--ds-fw-black);text-align:center;color:var(--ds-text)}
.auth-forgot-desc{margin:0 0 8px 0;color:var(--muted);font-size:13px;text-align:center}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ===== Friends Skeleton Loader ===== */
.friends-skeleton{padding:clamp(12px,1.5vw,24px);gap:clamp(12px,1.5vw,24px)}
.skel{position:relative;overflow:hidden;background:rgba(255,250,225,0.85);border:1.5px solid var(--ds-gold-25);border-radius:14px;box-shadow:0 4px 12px rgba(139,105,20,.06)}
.skel::after{content:;position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.7) 50%,transparent 100%);transform:translateX(-100%);animation:skelShimmer 1.4s ease-in-out infinite}
@keyframes skelShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skel-search{height:48px;margin-bottom:14px}
.skel-card{height:140px;margin-bottom:12px}
.skel-tabs{height:56px;margin-bottom:18px}
.skel-row{height:72px;margin-bottom:12px}
[dir=rtl] .skel::after,html[lang=ar] .skel::after{animation-direction:reverse}
/* ===== Friends Loader (centered, professional) ===== */
.fr-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:clamp(60px,10vh,120px) 16px;animation:frFadeIn .3s ease}
.fr-loader-spinner{position:relative;width:64px;height:64px}
.fr-loader-spinner div{position:absolute;top:0;left:0;width:64px;height:64px;border:5px solid transparent;border-top-color:var(--ds-gold-dark);border-radius:50%;animation:frSpin 1.2s cubic-bezier(.5,0,.5,1) infinite}
.fr-loader-spinner div:nth-child(2){border-top-color:var(--accent);animation-delay:-.4s;width:48px;height:48px;top:8px;left:8px}
.fr-loader-spinner div:nth-child(3){border-top-color:#e0b94f;animation-delay:-.8s;width:32px;height:32px;top:16px;left:16px}
.fr-loader-text{color:var(--ds-gold-dark);font-weight:800;font-family:Cairo,sans-serif;font-size:16px;letter-spacing:.3px;animation:frPulse 1.6s ease-in-out infinite}
@keyframes frSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes frPulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes frFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Remove old skeleton (kept for legacy) */
.friends-skeleton{display:none}
/* ===== Invites tab section headers + visual distinction ===== */
.fc-section-header{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:14px 0 8px 0;background:rgba(255,250,225,0.8);border:2px solid var(--ds-gold-35);border-radius:12px;font-family:Cairo,sans-serif;font-weight:900;color:var(--ds-text);box-shadow:0 3px 10px rgba(139,105,20,.08)}
.fc-section-header:first-child{margin-top:0}
.fc-section-icon{font-size:18px}
.fc-section-label{flex:1;font-size:14px}
.fc-section-count{background:var(--ds-gold-dark);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;min-width:24px;text-align:center}
.fc-section-sent{background:linear-gradient(135deg,rgba(232,212,255,0.8),rgba(255,250,225,0.8));border-color:#a87fdb}
.fc-section-sent .fc-section-count{background:#8854D0}
.fc-section-recv{background:linear-gradient(135deg,rgba(255,232,212,0.8),rgba(255,250,225,0.8));border-color:#e08545}
.fc-section-recv .fc-section-count{background:#c96328}
/* Outgoing row: purple-ish tint, incoming: warm tint */
.friend-row-outgoing{background:linear-gradient(135deg,rgba(232,212,255,0.45),rgba(255,250,225,0.55))!important;border-color:rgba(168,127,219,0.5)!important}
.friend-row-incoming{background:linear-gradient(135deg,rgba(255,232,212,0.45),rgba(255,250,225,0.55))!important;border-color:rgba(224,133,69,0.45)!important}
/* Toast types */
.game-notif.gn-success{background:linear-gradient(135deg,#d4f5dc,#a8e6b8)!important;border-color:#4ab860!important;color:#1f5c2e!important}
.game-notif.gn-success .gn-text{color:#1f5c2e}
.game-notif.gn-error{background:linear-gradient(135deg,#fde4e2,#f5b5b1)!important;border-color:#e94b5a!important;color:#7a1a23!important}
.game-notif.gn-error .gn-text{color:#7a1a23}
.game-notif.gn-warn{background:linear-gradient(135deg,#fff4d6,#ffe18a)!important;border-color:#e0a81c!important;color:#5a3e00!important}
.game-notif.gn-warn .gn-text{color:#5a3e00}
.game-notif.gn-info{background:linear-gradient(135deg,#e4eeff,#b5d0ff)!important;border-color:#4a7edb!important;color:#1a2e5c!important}
.game-notif.gn-info .gn-text{color:#1a2e5c}
/* Better keyboard focus visibility */
.auth-input:focus-visible,
input[type=email]:focus-visible,
input[type=password]:focus-visible,
input[type=text]:focus-visible{
outline:3px solid var(--accent,#8854D0);
outline-offset:2px;
border-color:var(--accent,#8854D0);
}
button:focus-visible,
.btn:focus-visible{
outline:3px solid var(--accent,#8854D0);
outline-offset:3px;
}
/* Subtle page transitions on screen activation */
.screen{transition:opacity .25s ease-out!important}
.screen.active{animation:screenFadeIn .3s ease-out}
@keyframes screenFadeIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}
}
/* Disable for users who prefer reduced motion */
@media (prefers-reduced-motion:reduce){
.screen.active{animation:none}
.screen{transition:none!important}
}
/* Inline auth validation hints */
.auth-hint{font-size:12px;font-weight:700;margin-top:-4px;min-height:16px;padding:0 4px;font-family:Cairo,sans-serif}
.auth-hint-ok{color:#2d8a4a}
.auth-hint-err{color:#c93535}
.auth-input-ok{border-color:#4ab860!important;box-shadow:0 0 0 3px rgba(74,184,96,0.1)!important}
.auth-input-err{border-color:#e94b5a!important;box-shadow:0 0 0 3px rgba(233,75,90,0.1)!important}
/* Enhanced press feedback for primary buttons */
.btn:active,.menu-quick-btn:active,.gmc:active{transform:scale(0.96)!important;transition:transform .05s!important}
/* Subtle scale-in on buttons on first render */
@keyframes btnPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
/* Smooth modal appearance */
.modal.active .modal-content{animation:modalPop .25s cubic-bezier(.34,1.56,.64,1)}
@keyframes modalPop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}
/* Unified empty state */
.friend-empty,.empty-state{padding:clamp(30px,5vh,60px) 20px;text-align:center;color:var(--muted);font-family:Cairo,sans-serif}
.friend-empty,.empty-state{animation:emptyFadeIn .3s ease-out}
@keyframes emptyFadeIn{from{opacity:0}to{opacity:1}}
/* Smooth scrolling everywhere */
html{scroll-behavior:smooth}
.screen{scroll-behavior:smooth}
/* Image fade-in on load */
img{transition:opacity .3s ease}
img[loading="lazy"]:not(.loaded){opacity:.0}
img[loading="lazy"].loaded{opacity:1}
/* Card hover lift */
.gmc{transition:transform .2s cubic-bezier(.25,.46,.45,.94),box-shadow .2s}
.gmc:hover{transform:translateY(-2px);filter:brightness(1.03)}
/* Tappable highlight removal (nicer on mobile/desktop touch) */
*{
-webkit-tap-highlight-color:transparent;
}
/* Smooth link underlines */
a{transition:color .15s}
/* Network status banner */
.net-banner{position:fixed;top:0;left:0;right:0;z-index:9999;padding:12px 16px;text-align:center;font-family:Cairo,sans-serif;font-weight:800;font-size:14px;transform:translateY(0);transition:transform .3s ease,opacity .3s}
.net-offline{background:linear-gradient(135deg,#e94b5a,#c93535);color:#fff;box-shadow:0 4px 12px rgba(201,53,53,.3)}
.net-online{background:linear-gradient(135deg,#4ab860,#2d8a4a);color:#fff;box-shadow:0 4px 12px rgba(74,184,96,.3)}
.net-hide{transform:translateY(-100%);opacity:0;pointer-events:none}
/* ===== Referral panel ===== */
.ref-panel-wrap{padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:clamp(12px,1.5vw,20px);font-family:Cairo,sans-serif}
.ref-head{text-align:center}
.ref-icon{font-size:48px;margin-bottom:6px}
.ref-title{font-size:clamp(18px,1.5vw,24px);font-weight:900;color:var(--ds-text);margin-bottom:4px}
.ref-sub{font-size:clamp(13px,0.9vw,15px);color:var(--muted)}
.ref-sub b{color:var(--ds-gold-dark)}
.ref-code-box{background:linear-gradient(135deg,#fffaea,#fff5d6);border:2px solid var(--ds-gold-45);border-radius:14px;padding:14px;text-align:center;box-shadow:0 4px 14px rgba(139,105,20,.12)}
.ref-code-label{font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:700}
.ref-code-val{font-size:clamp(20px,1.8vw,28px);font-weight:900;color:var(--ds-gold-dark);letter-spacing:3px;font-family:monospace;padding:6px 0;direction:ltr}
.ref-copy-btn{margin-top:10px;background:linear-gradient(135deg,#8854D0,#5d2e96);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-family:inherit;font-weight:800;cursor:pointer;font-size:14px;box-shadow:0 3px 10px rgba(93,46,150,.3);transition:transform .15s}
.ref-copy-btn:hover{transform:translateY(-2px)}
.ref-copy-btn:active{transform:translateY(1px)}
.ref-progress-wrap{background:rgba(255,250,225,0.6);border-radius:12px;padding:14px;border:1.5px solid var(--ds-gold-25)}
.ref-progress-label{font-size:14px;font-weight:800;margin-bottom:8px;color:var(--ds-text)}
.ref-progress-label b{color:var(--ds-gold-dark);font-size:16px}
.ref-progress-bar{height:14px;background:rgba(139,105,20,0.1);border-radius:999px;overflow:hidden}
.ref-progress-fill{height:100%;background:linear-gradient(90deg,#e0a81c,#c49b3c);border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.ref-status{text-align:center;font-size:14px;font-weight:700;padding:6px}
.ref-hint{font-size:12px;color:var(--muted);text-align:center;line-height:1.8;background:rgba(232,212,255,0.3);border-radius:10px;padding:10px}
.ref-divider{height:1px;background:linear-gradient(90deg,transparent,var(--ds-gold-35),transparent);margin:18px 0 14px}
.ref-in-social{padding:0!important;margin-top:4px}
/* Referral standalone card on top of social panel */
.ref-card{
background:linear-gradient(180deg,#fffaea 0%,#fff5d6 100%);
border:var(--ds-bw-heavy) solid var(--ds-gold-55);
border-radius:var(--ds-card-radius-lg);
padding:clamp(18px,2vw,28px);
margin-bottom:clamp(14px,1.6vw,22px);
box-shadow:0 16px 40px rgba(139,105,20,.22),0 0 0 1px rgba(255,255,255,.5) inset,0 -12px 28px var(--ds-gold-15) inset;
display:flex;flex-direction:column;gap:clamp(10px,1vw,16px);
}
.ref-divider{display:none}
/* ===== Referral card — professional polish ===== */
.ref-card{
position:relative;
overflow:hidden;
}
.ref-card::before{
content:'';
position:absolute;
top:-50%;left:-10%;right:-10%;
height:100%;
background:radial-gradient(ellipse at center,rgba(255,235,170,0.5) 0%,transparent 70%);
pointer-events:none;
}
.ref-card > *{position:relative;z-index:1}
.ref-head{text-align:center;padding:4px 0 8px}
.ref-icon{
font-size:clamp(40px,3.5vw,56px);
line-height:1;
filter:drop-shadow(0 4px 12px rgba(228,168,28,0.35));
animation:refPulse 3s ease-in-out infinite;
}
@keyframes refPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.06)}
}
.ref-title{
font-size:clamp(20px,1.7vw,28px);
font-weight:900;
color:var(--ds-text);
margin:8px 0 4px;
letter-spacing:-0.2px;
}
.ref-sub{
font-size:clamp(13px,0.95vw,15px);
color:var(--muted);
line-height:1.7;
}
.ref-sub b{
color:#c93d3d;
font-size:1.05em;
background:linear-gradient(180deg,transparent 60%,rgba(255,215,100,0.35) 60%);
padding:0 4px;
}
.ref-code-box{
background:rgba(255,255,255,0.65);
border:2px dashed var(--ds-gold-55);
border-radius:16px;
padding:clamp(14px,1.5vw,20px);
text-align:center;
backdrop-filter:blur(4px);
}
.ref-code-label{
font-size:12px;
font-weight:900;
color:var(--ds-gold-dark);
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:8px;
}
.ref-code-val{
font-size:clamp(22px,2vw,32px);
font-weight:900;
color:var(--ds-gold-dark);
letter-spacing:4px;
font-family:'Courier New',monospace;
padding:10px 0;
direction:ltr;
user-select:all;
cursor:text;
}
.ref-copy-btn{
background:linear-gradient(135deg,#8854D0 0%,#5d2e96 100%);
color:#fff;
border:none;
padding:12px 28px;
border-radius:12px;
font-family:Cairo,sans-serif;
font-weight:900;
cursor:pointer;
font-size:14px;
box-shadow:0 6px 18px rgba(93,46,150,0.35),0 0 0 2px rgba(255,255,255,0.2) inset;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
margin-top:12px;
}
.ref-copy-btn:hover{
transform:translateY(-2px) scale(1.03);
box-shadow:0 10px 24px rgba(93,46,150,0.45),0 0 0 2px rgba(255,255,255,0.3) inset;
filter:brightness(1.08);
}
.ref-copy-btn:active{transform:translateY(1px) scale(0.98)}
.ref-progress-wrap{
background:rgba(255,255,255,0.5);
border-radius:14px;
padding:14px 16px;
border:1.5px solid var(--ds-gold-25);
}
.ref-progress-label{
display:flex;
justify-content:space-between;
align-items:center;
font-size:14px;
font-weight:800;
margin-bottom:10px;
color:var(--ds-text);
}
.ref-progress-label b{
background:linear-gradient(135deg,#e0a81c,#c49b3c);
color:#fff;
padding:3px 12px;
border-radius:999px;
font-size:13px;
font-weight:900;
min-width:44px;
text-align:center;
box-shadow:0 2px 8px rgba(196,155,60,0.35);
}
.ref-progress-bar{
height:16px;
background:rgba(139,105,20,0.12);
border-radius:999px;
overflow:hidden;
position:relative;
box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);
}
.ref-progress-fill{
height:100%;
background:linear-gradient(90deg,#e0a81c,#ffcc33,#e0a81c);
background-size:200% 100%;
border-radius:999px;
transition:width .6s cubic-bezier(.4,0,.2,1);
animation:refShimmer 2s linear infinite;
position:relative;
}
@keyframes refShimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
.ref-progress-fill::after{
content:'';
position:absolute;
top:0;bottom:0;right:0;
width:20px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6));
}
.ref-status{
text-align:center;
font-size:14px;
font-weight:800;
padding:6px 0;
min-height:20px;
}
.ref-hint{
font-size:12px;
color:var(--muted);
text-align:center;
line-height:2;
background:rgba(232,212,255,0.35);
border-radius:12px;
padding:12px 14px;
border:1px dashed rgba(136,84,208,0.25);
}
/* ============================================
PROFILE PANEL — PREMIUM CARD SYSTEM (v2)
============================================ */
/* Reset old ref-card + social inline styles */
/* Panel container — web spacing */
#pp-panel-social{
display:flex;
flex-direction:column;
gap:clamp(16px,1.4vw,22px);
padding:clamp(8px,0.8vw,14px) 0;
}
/* ===== Card ===== */
.pp-card{
background:linear-gradient(180deg,#fffdf5 0%,#fff8e4 100%);
border:1.5px solid rgba(196,155,60,0.25);
border-radius:16px;
overflow:hidden;
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 8px 24px rgba(139,105,20,0.08),
0 2px 6px rgba(139,105,20,0.04);
display:flex;
flex-direction:column;
}
.pp-card-head{
display:flex;
align-items:center;
gap:14px;
padding:18px 22px 14px;
border-bottom:1px solid rgba(196,155,60,0.15);
background:rgba(255,252,232,0.5);
}
.pp-card-icon{
font-size:26px;
line-height:1;
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,rgba(255,235,170,0.6),rgba(255,215,100,0.3));
border-radius:12px;
border:1px solid rgba(196,155,60,0.3);
flex-shrink:0;
}
.pp-card-titles{flex:1;min-width:0}
.pp-card-title{
margin:0 0 3px 0;
font-size:16px;
font-weight:800;
color:#3b260b;
letter-spacing:-0.1px;
line-height:1.3;
}
.pp-card-sub{
margin:0;
font-size:13px;
font-weight:500;
color:#7a6340;
line-height:1.5;
}
.pp-card-sub b{color:#c93d3d;font-weight:800}
.pp-card-body{
padding:18px 22px;
display:flex;
flex-direction:column;
gap:16px;
}
.pp-card-foot{
padding:14px 22px 18px;
border-top:1px solid rgba(196,155,60,0.15);
background:rgba(255,252,232,0.4);
}
/* ===== Buttons ===== */
.pp-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 20px;
border-radius:10px;
border:none;
font-family:Cairo,sans-serif;
font-weight:800;
font-size:14px;
cursor:pointer;
height:42px;
transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .2s,filter .2s;
white-space:nowrap;
line-height:1;
}
.pp-btn-icon{font-size:15px;line-height:1}
.pp-btn-primary{
background:linear-gradient(135deg,#8854D0 0%,#6c3cba 100%);
color:#fff;
box-shadow:
0 4px 12px rgba(93,46,150,0.28),
0 1px 0 rgba(255,255,255,0.2) inset;
}
.pp-btn-primary:hover{
transform:translateY(-1px);
box-shadow:0 6px 16px rgba(93,46,150,0.35),0 1px 0 rgba(255,255,255,0.25) inset;
filter:brightness(1.05);
}
.pp-btn-primary:active{transform:translateY(0) scale(0.98)}
.pp-btn-block{width:100%;max-width:100%;display:flex}
/* ===== Referral card internals ===== */
.ref-code-row{
display:flex;
gap:12px;
align-items:stretch;
}
.ref-code-field{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
background:rgba(255,255,255,0.7);
border:1.5px dashed rgba(196,155,60,0.5);
border-radius:10px;
padding:10px 16px;
min-width:0;
}
.ref-code-label{
font-size:11px;
font-weight:700;
color:#8a6f3a;
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:2px;
}
.ref-code-val{
font-size:18px;
font-weight:900;
color:#6b4a0e;
letter-spacing:2px;
font-family:'SF Mono','Courier New',monospace;
direction:ltr;
user-select:all;
cursor:text;
line-height:1.3;
}
.ref-progress-block{
background:rgba(255,253,245,0.8);
border:1px solid rgba(196,155,60,0.2);
border-radius:12px;
padding:14px 16px;
display:flex;
flex-direction:column;
gap:10px;
}
.ref-progress-meta{
display:flex;
justify-content:space-between;
align-items:center;
}
.ref-progress-text-label{
font-size:12px;
font-weight:700;
color:#7a6340;
text-transform:uppercase;
letter-spacing:0.5px;
}
.ref-progress-badge{
background:linear-gradient(135deg,#e0a81c,#c49b3c);
color:#fff;
font-size:12px;
font-weight:900;
padding:4px 12px;
border-radius:999px;
min-width:44px;
text-align:center;
box-shadow:0 2px 6px rgba(196,155,60,0.3);
}
.ref-progress-bar{
height:10px;
background:rgba(139,105,20,0.1);
border-radius:999px;
overflow:hidden;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.08);
}
.ref-progress-fill{
height:100%;
background:linear-gradient(90deg,#e0a81c 0%,#ffcc33 50%,#e0a81c 100%);
background-size:200% 100%;
border-radius:999px;
transition:width .6s cubic-bezier(.4,0,.2,1);
animation:ppShimmer 2.5s linear infinite;
}
@keyframes ppShimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
.ref-status{
text-align:center;
font-size:12px;
font-weight:700;
color:#7a6340;
min-height:16px;
}
.ref-rules{
display:flex;
flex-direction:column;
gap:8px;
padding:12px 14px;
background:rgba(232,212,255,0.25);
border:1px solid rgba(136,84,208,0.15);
border-radius:10px;
}
.ref-rule{
display:flex;
align-items:flex-start;
gap:8px;
font-size:12px;
color:#5a4528;
line-height:1.6;
}
.ref-rule-ico{font-size:13px;line-height:1.5;flex-shrink:0}
.ref-rule b{color:#4a2d8b}
/* ===== Social fields ===== */
.pp-field{
display:flex;
flex-direction:column;
gap:6px;
}
.pp-field-label{
display:flex;
align-items:center;
gap:6px;
font-size:12px;
font-weight:800;
color:#5a4528;
padding:0 2px;
}
.pp-field-ico{
display:inline-flex;
align-items:center;
justify-content:center;
width:20px;height:20px;
font-size:14px;
line-height:1;
}
.pp-input-wrap{
position:relative;
display:flex;
align-items:center;
background:#fff;
border:1.5px solid rgba(196,155,60,0.25);
border-radius:10px;
height:42px;
padding:0 12px;
transition:border-color .2s,box-shadow .2s;
}
.pp-input-wrap:focus-within{
border-color:#8854D0;
box-shadow:0 0 0 3px rgba(136,84,208,0.12);
}
.pp-input-prefix{
color:#9a8560;
font-size:14px;
font-weight:700;
margin-left:6px;
user-select:none;
}
.pp-input{
flex:1;
border:none;
outline:none;
background:transparent;
font-size:14px;
font-family:Cairo,sans-serif;
color:#3b260b;
padding:0;
box-shadow:none !important;
direction:ltr;
text-align:left;
min-width:0;
}
.pp-input::placeholder{color:#b8a578;font-weight:500}
/* Side referral card (in right column below stats) */
.pp-ref-side-card{margin-top:clamp(10px,1vw,16px)}
.pp-ref-side-card .pp-card-head{padding:14px 16px 10px}
.pp-ref-side-card .pp-card-icon{width:36px;height:36px;font-size:20px;border-radius:10px}
.pp-ref-side-card .pp-card-title{font-size:14px}
.pp-ref-side-card .pp-card-sub{font-size:11px;line-height:1.5}
.pp-ref-side-card .pp-card-body{padding:14px 16px;gap:10px}
.pp-ref-side-card .ref-code-field{padding:8px 12px}
.pp-ref-side-card .ref-code-label{font-size:10px}
.pp-ref-side-card .ref-code-val{font-size:15px;letter-spacing:1.5px}
.pp-ref-side-card .pp-btn{height:38px;font-size:13px;padding:8px 16px}
.pp-ref-side-card .pp-btn-icon{font-size:13px}
.pp-ref-side-card .ref-progress-block{padding:10px 12px}
.pp-ref-side-card .ref-progress-text-label{font-size:11px}
.pp-ref-side-card .ref-progress-badge{font-size:11px;padding:2px 10px;min-width:40px}
.pp-ref-side-card .ref-progress-bar{height:8px}
.pp-ref-side-card .ref-status{font-size:11px}
.pp-ref-side-card .ref-rules{padding:10px 12px;gap:6px}
.pp-ref-side-card .ref-rule{font-size:11px;line-height:1.5}
.pp-ref-side-card .ref-rule-ico{font-size:12px}
/* Referral side card - more compact */
.pp-ref-side-card .pp-card-head{padding:10px 12px 8px;gap:10px}
.pp-ref-side-card .pp-card-icon{width:30px;height:30px;font-size:16px;border-radius:8px}
.pp-ref-side-card .pp-card-title{font-size:13px;margin-bottom:1px}
.pp-ref-side-card .pp-card-sub{font-size:10px;line-height:1.4}
.pp-ref-side-card .pp-card-body{padding:10px 12px;gap:8px}
.pp-ref-side-card .ref-code-field{padding:6px 10px}
.pp-ref-side-card .ref-code-label{font-size:9px;letter-spacing:0.5px}
.pp-ref-side-card .ref-code-val{font-size:13px;letter-spacing:1px}
.pp-ref-side-card .pp-btn{height:32px;font-size:12px;padding:6px 12px}
.pp-ref-side-card .pp-btn-icon{font-size:12px}
.pp-ref-side-card .ref-progress-block{padding:8px 10px;gap:6px}
.pp-ref-side-card .ref-progress-text-label{font-size:10px}
.pp-ref-side-card .ref-progress-badge{font-size:10px;padding:2px 8px;min-width:36px}
.pp-ref-side-card .ref-progress-bar{height:6px}
.pp-ref-side-card .ref-status{font-size:10px;min-height:14px}
.pp-ref-side-card .ref-rules{padding:8px 10px;gap:5px}
.pp-ref-side-card .ref-rule{font-size:10px;line-height:1.4}
.pp-ref-side-card .ref-rule-ico{font-size:11px}
/* ===== Referral side card — PREMIUM wavy design ===== */
.pp-ref-side-card{
position:relative;
background:
radial-gradient(ellipse 90% 60% at 20% 0%, rgba(255,235,170,0.55) 0%, transparent 55%),
radial-gradient(ellipse 80% 70% at 100% 100%, rgba(255,205,110,0.4) 0%, transparent 60%),
linear-gradient(165deg, #fffdf5 0%, #fff6dd 50%, #ffedc0 100%) !important;
border:1.5px solid rgba(196,155,60,0.4) !important;
border-radius:18px !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.95) inset,
0 -10px 20px rgba(255,215,100,0.15) inset,
0 12px 32px rgba(139,105,20,0.14),
0 4px 10px rgba(139,105,20,0.06) !important;
overflow:hidden !important;
}
.pp-ref-side-card::before{
content:'';
position:absolute;
top:-30%;left:-10%;right:-10%;height:60%;
background:radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%, transparent 70%);
pointer-events:none;
}
.pp-ref-side-card > *{position:relative;z-index:1}
.pp-ref-side-card .pp-card-head{
padding:14px 14px 10px !important;
gap:12px;
border-bottom:1px dashed rgba(196,155,60,0.3) !important;
background:transparent !important;
flex-direction:column;
text-align:center;
align-items:center;
}
.pp-ref-side-card .pp-card-icon{
width:44px !important;height:44px !important;
font-size:22px !important;
border-radius:50% !important;
background:linear-gradient(135deg, #ffd97a 0%, #e0a81c 100%) !important;
border:2px solid #fff !important;
box-shadow:0 4px 12px rgba(228,168,28,0.4), 0 0 0 2px rgba(228,168,28,0.25);
}
.pp-ref-side-card .pp-card-titles{text-align:center}
.pp-ref-side-card .pp-card-title{
font-size:15px !important;
font-weight:900 !important;
color:#3b260b !important;
letter-spacing:-0.3px;
margin-bottom:3px !important;
}
.pp-ref-side-card .pp-card-sub{
font-size:11px !important;
font-weight:700 !important;
color:#5a4528 !important;
line-height:1.5 !important;
}
.pp-ref-side-card .pp-card-sub b{color:#c93d3d;font-weight:900}
.pp-ref-side-card .pp-card-body{padding:12px 14px !important;gap:10px !important}
/* Code field - dashed box, centered */
.pp-ref-side-card .ref-code-field{
padding:10px 12px !important;
background:rgba(255,255,255,0.7) !important;
border:1.5px dashed rgba(196,155,60,0.6) !important;
border-radius:12px !important;
text-align:center;
display:flex !important;
flex-direction:column;
align-items:center;
}
.pp-ref-side-card .ref-code-label{
font-size:9px !important;
font-weight:900 !important;
color:#8a6f3a !important;
text-transform:uppercase;
letter-spacing:1.5px !important;
margin-bottom:3px !important;
}
.pp-ref-side-card .ref-code-val{
font-size:16px !important;
font-weight:900 !important;
color:#6b4a0e !important;
letter-spacing:3px !important;
font-family:'SF Mono','Courier New',monospace !important;
}
/* Copy button - match icon theme */
.pp-ref-side-card .pp-btn{
height:38px !important;
font-size:12px !important;
padding:8px 16px !important;
border-radius:10px !important;
background:linear-gradient(135deg, #8854D0 0%, #6c3cba 100%) !important;
box-shadow:0 4px 12px rgba(93,46,150,0.3), 0 1px 0 rgba(255,255,255,0.2) inset !important;
}
.pp-ref-side-card .pp-btn-icon{font-size:13px !important}
/* Progress block */
.pp-ref-side-card .ref-progress-block{
padding:10px 12px !important;
background:rgba(255,255,255,0.6) !important;
border:1px solid rgba(196,155,60,0.25) !important;
border-radius:12px !important;
gap:8px !important;
}
.pp-ref-side-card .ref-progress-text-label{
font-size:10px !important;
font-weight:800 !important;
color:#7a6340 !important;
text-transform:uppercase;
letter-spacing:0.5px;
}
.pp-ref-side-card .ref-progress-badge{
font-size:11px !important;
font-weight:900 !important;
padding:3px 10px !important;
min-width:38px !important;
background:linear-gradient(135deg, #e0a81c, #c49b3c) !important;
box-shadow:0 2px 6px rgba(196,155,60,0.35);
}
.pp-ref-side-card .ref-progress-bar{
height:8px !important;
background:rgba(139,105,20,0.12) !important;
}
.pp-ref-side-card .ref-status{font-size:10px !important;font-weight:700 !important}
/* Rules block */
.pp-ref-side-card .ref-rules{
padding:10px 12px !important;
background:rgba(136,84,208,0.08) !important;
border:1px dashed rgba(136,84,208,0.25) !important;
border-radius:10px !important;
gap:6px !important;
}
.pp-ref-side-card .ref-rule{
font-size:10px !important;
font-weight:600 !important;
color:#5a4528 !important;
line-height:1.55 !important;
gap:6px !important;
}
.pp-ref-side-card .ref-rule-ico{font-size:11px !important}
.pp-ref-side-card .ref-rule b{color:#4a2d8b !important;font-weight:900}
/* ===== Referral side card — matches friend-code-card style ===== */
.pp-ref-card{
margin-top:clamp(10px,1vw,16px);
padding:18px 16px 16px !important;
gap:10px !important;
}
.pp-ref-card .friend-code-label{font-size:13px !important}
.pp-ref-card .friend-code-val{
font-size:22px !important;
letter-spacing:3px !important;
padding:10px 0 !important;
font-family:'SF Mono','Courier New',monospace;
}
.pp-ref-card .friend-code-hint{font-size:11px !important;line-height:1.5}
.pp-ref-card .friend-code-hint b{color:#c93d3d;font-weight:900}
.pp-ref-card .friend-code-actions{gap:8px !important}
.pp-ref-card .friend-btn{
font-size:12px !important;
padding:8px 12px !important;
min-width:0 !important;
height:36px;
border-radius:10px !important;
}
.pp-ref-card .friend-btn-share{
background:linear-gradient(135deg,#8854D0 0%,#6c3cba 100%) !important;
color:#fff !important;
border:none !important;
box-shadow:0 3px 10px rgba(93,46,150,0.3) !important;
}
/* Progress block inside */
.pp-ref-progress{
background:rgba(255,255,255,0.55);
border:1px solid rgba(196,155,60,0.25);
border-radius:10px;
padding:8px 10px;
display:flex;
flex-direction:column;
gap:6px;
margin-top:4px;
}
.pp-ref-progress-top{
display:flex;
justify-content:space-between;
align-items:center;
}
.pp-ref-progress-label{
font-size:10px;
font-weight:800;
color:#7a6340;
text-transform:uppercase;
letter-spacing:0.5px;
}
.pp-ref-progress-badge{
background:linear-gradient(135deg,#e0a81c,#c49b3c);
color:#fff;
font-size:10px;
font-weight:900;
padding:2px 10px;
border-radius:999px;
min-width:38px;
text-align:center;
box-shadow:0 2px 6px rgba(196,155,60,0.3);
}
.pp-ref-progress-bar{
height:7px;
background:rgba(139,105,20,0.12);
border-radius:999px;
overflow:hidden;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.08);
}
.pp-ref-progress-fill{
height:100%;
background:linear-gradient(90deg,#e0a81c 0%,#ffcc33 50%,#e0a81c 100%);
background-size:200% 100%;
border-radius:999px;
transition:width .6s cubic-bezier(.4,0,.2,1);
animation:ppShimmer 2.5s linear infinite;
}
.pp-ref-progress-status{
font-size:10px;
font-weight:700;
color:#7a6340;
text-align:center;
min-height:14px;
}
/* Referral progress dots (5 circles) */
.pp-ref-dots{
display:flex;
gap:8px;
justify-content:center;
padding:6px 0;
}
.pp-ref-dot{
width:18px;
height:18px;
border-radius:50%;
background:rgba(139,105,20,0.12);
border:2px solid rgba(196,155,60,0.35);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.08);
transition:all .3s cubic-bezier(.34,1.56,.64,1);
position:relative;
}
.pp-ref-dot-done{
background:linear-gradient(135deg,#4ab860 0%,#2d8a4a 100%);
border-color:#2d8a4a;
box-shadow:0 2px 8px rgba(74,184,96,0.4),0 1px 0 rgba(255,255,255,0.3) inset;
transform:scale(1.05);
}
.pp-ref-dot-done::after{
content:'✓';
position:absolute;
inset:0;
color:#fff;
font-size:12px;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
}
/* Profile stats card - compact version */
.profile-stats{gap:6px !important;margin:0 0 8px !important}
.p-stat{padding:6px 3px !important;border-radius:10px !important}
.p-stat-val{font-size:15px !important;line-height:1.2 !important}
.p-stat-lbl{font-size:10px !important;margin-top:2px !important;letter-spacing:0 !important}
/* Profile stats - narrower card */
.profile-stats{
grid-template-columns:repeat(4,auto) !important;
justify-content:center !important;
gap:12px !important;
padding:10px 14px !important;
background:linear-gradient(160deg,rgba(255,250,225,0.9),rgba(255,232,172,0.85)) !important;
border:1.5px solid rgba(196,155,60,0.3) !important;
border-radius:14px !important;
max-width:fit-content !important;
margin:0 auto 10px !important;
}
.p-stat{
background:transparent !important;
border:none !important;
padding:4px 10px !important;
min-width:44px !important;
position:relative;
}
.p-stat:not(:last-child)::after{
content:'';
position:absolute;
top:20%;bottom:20%;left:-6px;
width:1px;
background:rgba(196,155,60,0.3);
}
[dir=ltr] .p-stat:not(:last-child)::after{left:auto;right:-6px}
.p-stat-val{font-size:16px !important}
.p-stat-lbl{font-size:10px !important}
/* Profile stats - force narrower width */
#pp-stats.profile-stats{
display:inline-flex !important;
width:auto !important;
padding:8px 12px !important;
gap:10px !important;
}
#pp-stats .p-stat{padding:2px 8px !important;min-width:38px !important}
#pp-stats .p-stat-val{font-size:14px !important}
#pp-stats .p-stat-lbl{font-size:9px !important;line-height:1.3}
/* Wrapper to center the inline card */
#pp-stats{margin-left:auto !important;margin-right:auto !important}
.profile-right-col > #pp-stats,.profile-aside > #pp-stats{align-self:center}
#pp-stats.profile-stats{padding:0 !important;background:transparent !important;border:none !important}
/* Restore stats card padding + even smaller numbers */
#pp-stats.profile-stats{padding:8px 12px !important;background:linear-gradient(160deg,rgba(255,250,225,0.9),rgba(255,232,172,0.85)) !important;border:1.5px solid rgba(196,155,60,0.3) !important}
#pp-stats .p-stat-val{font-size:12px !important}
#pp-stats .p-stat-lbl{font-size:8px !important}
#pp-stats .p-stat{padding:2px 6px !important;min-width:32px !important}
/* FINAL: force narrow profile stats */
#pp-stats.profile-stats{
max-width:260px !important;
width:260px !important;
padding:6px 10px !important;
gap:6px !important;
margin:0 auto 10px !important;
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
}
#pp-stats.profile-stats .p-stat{padding:2px 2px !important;min-width:0 !important}
#pp-stats.profile-stats .p-stat-val{font-size:12px !important;line-height:1.1 !important}
#pp-stats.profile-stats .p-stat-lbl{font-size:8px !important;line-height:1.2 !important;margin-top:1px !important}
#pp-stats.profile-stats .p-stat:not(:last-child)::after{display:none !important}
/* NUKE profile-stats to truly narrow */
#profile-screen #pp-stats.profile-stats,
#profile-screen .profile-stats#pp-stats{
display:inline-grid !important;
grid-template-columns:repeat(4,auto) !important;
gap:8px !important;
padding:6px 12px !important;
max-width:none !important;
width:auto !important;
margin:0 auto 10px !important;
background:linear-gradient(160deg,rgba(255,250,225,0.9),rgba(255,232,172,0.85)) !important;
border:1.5px solid rgba(196,155,60,0.3) !important;
border-radius:12px !important;
position:relative !important;
}
#profile-screen #pp-stats .p-stat{
padding:2px 4px !important;
min-width:0 !important;
border-left:1px dashed rgba(196,155,60,0.35) !important;
}
#profile-screen #pp-stats .p-stat:first-child{border-left:none !important}
#profile-screen #pp-stats .p-stat-val{font-size:12px !important;line-height:1.1 !important}
#profile-screen #pp-stats .p-stat-lbl{font-size:8px !important;line-height:1.2 !important;margin-top:1px !important}
/* ===== Country Picker Modal ===== */
.cpk-overlay{
position:fixed;inset:0;z-index:10000;
background:rgba(0,0,0,0.55);
display:flex;align-items:center;justify-content:center;
padding:20px;
animation:cpkFadeIn .2s ease;
}
@keyframes cpkFadeIn{from{opacity:0}to{opacity:1}}
.cpk-modal{
background:linear-gradient(180deg,#fffdf5 0%,#fff6dd 100%);
border:2px solid var(--ds-gold-55);
border-radius:20px;
width:100%;max-width:560px;
max-height:85vh;
display:flex;flex-direction:column;
box-shadow:0 24px 60px rgba(0,0,0,0.4);
position:relative;
padding:24px 20px 16px;
animation:cpkSlideUp .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cpkSlideUp{from{opacity:0;transform:translateY(20px) scale(0.95)}to{opacity:1;transform:none}}
.cpk-close{
position:absolute;top:12px;left:12px;
background:#e94b5a;color:#fff;
border:none;border-radius:10px;
width:34px;height:34px;
font-size:16px;font-weight:900;
cursor:pointer;
box-shadow:0 3px 10px rgba(233,75,90,0.3);
}
.cpk-title{
margin:0 0 4px;
text-align:center;
font-size:20px;
font-weight:900;
color:#3b260b;
font-family:Cairo,sans-serif;
}
.cpk-sub{
margin:0 0 14px;
text-align:center;
font-size:13px;
color:#7a6340;
font-weight:700;
}
.cpk-sub-locked{color:#c93d3d}
.cpk-search{
width:100%;
padding:10px 14px;
border:2px solid var(--ds-gold-35);
border-radius:12px;
font-family:Cairo,sans-serif;
font-size:14px;
background:#fff;
outline:none;
margin-bottom:14px;
box-shadow:none;
}
.cpk-search:focus{border-color:#8854D0;box-shadow:0 0 0 3px rgba(136,84,208,0.12)}
.cpk-grid{
overflow-y:auto;
flex:1;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:8px;
padding:4px;
}
.cpk-item{
display:flex;align-items:center;gap:8px;
padding:8px 10px;
background:#fff;
border:1.5px solid var(--ds-gold-25);
border-radius:10px;
cursor:pointer;
font-family:Cairo,sans-serif;
font-size:12px;
font-weight:700;
color:#3b260b;
transition:all .15s;
text-align:right;
}
.cpk-item:hover:not(:disabled){
border-color:#8854D0;
background:rgba(136,84,208,0.06);
transform:translateY(-1px);
}
.cpk-item:disabled{opacity:0.4;cursor:not-allowed}
.cpk-flag{width:24px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,0.15);flex-shrink:0}
.cpk-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Scrollbar polish */
.cpk-grid::-webkit-scrollbar{width:8px}
.cpk-grid::-webkit-scrollbar-track{background:rgba(139,105,20,0.08);border-radius:4px}
.cpk-grid::-webkit-scrollbar-thumb{background:rgba(196,155,60,0.5);border-radius:4px}
.cpk-grid::-webkit-scrollbar-thumb:hover{background:rgba(196,155,60,0.7)}
/* FINAL: trim stats card padding (override ds-card-pad-md) */
#profile-screen #pp-stats.profile-stats{
padding:6px 10px !important;
gap:6px !important;
}
#profile-screen #pp-stats.profile-stats .p-stat{
padding:3px 6px !important;
}
/* Country badge - visible click affordance */
.profile-country-chip{
position:relative;
transition:transform .15s,box-shadow .15s;
}
.profile-country-chip:hover{
transform:translateY(-1px) scale(1.03);
box-shadow:0 4px 12px rgba(139,105,20,0.2);
}
.profile-country-chip::after{
content:'✏️';
position:absolute;
top:-6px;left:-6px;
font-size:11px;
background:#fff;
width:18px;height:18px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
border:1.5px solid var(--ds-gold-55);
}
[dir=ltr] .profile-country-chip::after{left:auto;right:-6px}
/* ===== CLEAN profile-stats = original design ===== */
html body #profile-screen #pp-stats.profile-stats{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:var(--ds-gap-sm) !important;
padding:var(--ds-card-pad-md) !important;
margin:0 !important;
max-width:none !important;
width:auto !important;
background:linear-gradient(180deg,var(--ds-cream-warm) 0%,var(--ds-cream-soft) 100%) !important;
border:var(--ds-card-border-w) solid var(--ds-gold-4) !important;
border-radius:var(--ds-card-radius) !important;
box-shadow:var(--ds-shadow-md),var(--ds-shadow-inset) !important;
position:relative !important;
overflow:hidden !important;
}
html body #profile-screen #pp-stats.profile-stats .p-stat{
all:revert !important;
background:transparent !important;
border:none !important;
border-left:1.5px dashed var(--ds-gold-35) !important;
padding:var(--ds-gap-sm) var(--ds-gap-xs) !important;
text-align:center !important;
min-width:0 !important;
}
html body #profile-screen #pp-stats.profile-stats .p-stat:first-child{border-left:none !important}
html body #profile-screen #pp-stats.profile-stats .p-stat-val{
display:block !important;
font-size:var(--ds-font-number-lg) !important;
font-weight:var(--ds-fw-black) !important;
color:var(--ds-text) !important;
line-height:1.2 !important;
}
html body #profile-screen #pp-stats.profile-stats .p-stat-lbl{
display:block !important;
font-size:var(--ds-font-label) !important;
color:var(--ds-text-muted) !important;
margin-top:3px !important;
font-weight:var(--ds-fw-bold) !important;
}
/* FINAL: ensure original social tab design */
#pp-panel-social{padding:0 !important;gap:0 !important}
#pp-panel-social .social-accounts-list{display:flex !important;flex-direction:column !important;gap:var(--ds-gap-xs) !important}
#pp-panel-social .social-input-row{display:flex !important;align-items:center !important;gap:var(--ds-gap-md) !important;direction:ltr !important;background:none !important;border:none !important;border-bottom:var(--ds-bw-mid) solid rgba(196,185,154,0.3) !important;border-radius:0 !important;padding:8px 0 !important}
#pp-panel-social .social-input-row:last-child{border-bottom:none !important}
#pp-panel-social .social-input{flex:1 !important}
/* Thinner social input rows */
#pp-panel-social .social-input{
padding:8px 14px !important;
height:36px !important;
font-size:13px !important;
border-radius:8px !important;
}
#pp-panel-social .social-input-row{
padding:4px 0 !important;
gap:8px !important;
}
#pp-panel-social .social-icon,#pp-panel-social .social-at{font-size:13px !important}
/* Save accounts button - smaller, not full width */
#pp-panel-social > button.btn-gold.btn-full{
max-width:220px !important;
margin:14px auto 0 !important;
display:flex !important;
height:42px !important;
font-size:14px !important;
padding:8px 20px !important;
}
/* Keep social inputs inside card bounds */
#pp-panel-social{overflow:visible}
#pp-panel-social .social-accounts-list{width:100% !important;box-sizing:border-box}
#pp-panel-social .social-input-row{width:100% !important;box-sizing:border-box;max-width:100% !important}
#pp-panel-social .social-input{min-width:0 !important;box-sizing:border-box !important}
/* ===== Social inputs - professional redesign ===== */
#pp-panel-social .social-accounts-list{
max-width:460px !important;
margin:0 auto !important;
gap:10px !important;
padding:0 !important;
}
#pp-panel-social .social-input-row{
background:#fff !important;
border:1.5px solid rgba(196,155,60,0.3) !important;
border-radius:12px !important;
padding:0 !important;
gap:0 !important;
height:44px !important;
overflow:hidden !important;
transition:border-color .2s,box-shadow .2s,transform .15s !important;
direction:ltr !important;
}
#pp-panel-social .social-input-row:hover{
border-color:rgba(196,155,60,0.5) !important;
transform:translateY(-1px) !important;
}
#pp-panel-social .social-input-row:focus-within{
border-color:#8854D0 !important;
box-shadow:0 0 0 3px rgba(136,84,208,0.12),0 2px 8px rgba(136,84,208,0.08) !important;
}
#pp-panel-social .social-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:44px !important;
height:100% !important;
background:linear-gradient(135deg,#fff5d6,#ffe9a8) !important;
border-right:1.5px solid rgba(196,155,60,0.25) !important;
font-size:16px !important;
color:#3b260b !important;
flex-shrink:0 !important;
}
#pp-panel-social .social-at{
color:#b8a578 !important;
font-size:14px !important;
font-weight:700 !important;
padding:0 10px 0 4px !important;
flex-shrink:0 !important;
}
#pp-panel-social .social-input{
flex:1 !important;
min-width:0 !important;
height:100% !important;
padding:0 14px 0 4px !important;
background:transparent !important;
border:none !important;
font-size:14px !important;
font-family:Cairo,sans-serif !important;
color:#3b260b !important;
outline:none !important;
box-shadow:none !important;
}
#pp-panel-social .social-input::placeholder{color:#c4b08c !important;font-weight:500 !important}
/* Save button - polished */
#pp-panel-social > button.btn-gold.btn-full{
max-width:200px !important;
margin:16px auto 0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
height:40px !important;
font-size:13px !important;
font-weight:800 !important;
padding:8px 20px !important;
border-radius:10px !important;
}
/* ===== Social inputs v3 - ultra polished with attached label tag ===== */
#pp-panel-social .social-accounts-list{
max-width:440px !important;
margin:12px auto 0 !important;
gap:18px !important;
padding:8px 0 !important;
}
#pp-panel-social .social-input-row{
position:relative !important;
background:#fff !important;
border:1.5px solid rgba(196,155,60,0.35) !important;
border-radius:14px !important;
padding:0 14px 0 16px !important;
gap:10px !important;
height:46px !important;
overflow:visible !important;
transition:all .2s cubic-bezier(.3,.7,.4,1) !important;
box-shadow:0 2px 8px rgba(139,105,20,0.06) !important;
direction:ltr !important;
}
#pp-panel-social .social-input-row:hover{
border-color:rgba(196,155,60,0.6) !important;
transform:translateY(-2px) !important;
box-shadow:0 6px 16px rgba(139,105,20,0.12) !important;
}
#pp-panel-social .social-input-row:focus-within{
border-color:#8854D0 !important;
box-shadow:0 0 0 3px rgba(136,84,208,0.15),0 6px 16px rgba(136,84,208,0.18) !important;
transform:translateY(-2px) !important;
}
/* Attached label tag above each row */
#pp-panel-social .social-input-row::before{
content:attr(data-label);
position:absolute;
top:-9px;
right:14px;
background:linear-gradient(135deg,#fff5d6,#ffdf8a);
border:1.5px solid rgba(196,155,60,0.45);
border-radius:8px;
padding:2px 10px;
font-size:10px;
font-weight:900;
color:#6b4a0e;
font-family:Cairo,sans-serif;
box-shadow:0 2px 6px rgba(139,105,20,0.12);
pointer-events:none;
letter-spacing:0.3px;
z-index:2;
}
#pp-panel-social .social-icon{
background:none !important;
border:none !important;
width:auto !important;
height:auto !important;
font-size:18px !important;
display:flex !important;
align-items:center !important;
flex-shrink:0 !important;
color:#3b260b !important;
padding:0 !important;
}
#pp-panel-social .social-at{
color:#c4b08c !important;
font-size:14px !important;
font-weight:700 !important;
padding:0 !important;
flex-shrink:0 !important;
}
#pp-panel-social .social-input{
flex:1 !important;
min-width:0 !important;
padding:0 !important;
background:transparent !important;
border:none !important;
font-size:14px !important;
font-weight:700 !important;
font-family:Cairo,sans-serif !important;
color:#3b260b !important;
outline:none !important;
height:100% !important;
}
#pp-panel-social .social-input::placeholder{color:#d4c4a3 !important;font-weight:500 !important}
/* Ultra-thin profile-stats */
html body #profile-screen #pp-stats.profile-stats{
padding:10px 12px !important;
gap:4px !important;
}
html body #profile-screen #pp-stats.profile-stats .p-stat{
padding:4px 6px !important;
}
html body #profile-screen #pp-stats.profile-stats .p-stat-val{
font-size:18px !important;
line-height:1.1 !important;
}
html body #profile-screen #pp-stats.profile-stats .p-stat-lbl{
font-size:10px !important;
margin-top:2px !important;
}
/* Wavy gradient background for inputs */
#pp-panel-social .social-input-row{
background:
radial-gradient(ellipse at top left, rgba(255,245,210,0.6) 0%, transparent 55%),
radial-gradient(ellipse at bottom right, rgba(255,220,130,0.35) 0%, transparent 60%),
linear-gradient(135deg, #fffdf5 0%, #fff9e4 50%, #fff5d0 100%) !important;
}
/* Space before save button */
#pp-panel-social > button.btn-gold.btn-full{
margin:28px auto 16px !important;
}
/* ===== Photo Change Modal - Premium Design ===== */
.pcm-overlay{
position:fixed;inset:0;z-index:10000;
background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);
display:flex;align-items:center;justify-content:center;
padding:20px;
animation:pcmFadeIn .25s ease-out;
}
@keyframes pcmFadeIn{from{opacity:0}to{opacity:1}}
.pcm-card{
background:
radial-gradient(ellipse 90% 60% at 20% 0%, rgba(255,235,170,0.55) 0%, transparent 55%),
radial-gradient(ellipse 80% 70% at 100% 100%, rgba(255,205,110,0.4) 0%, transparent 60%),
linear-gradient(165deg, #fffdf5 0%, #fff6dd 50%, #ffedc0 100%);
border:2px solid rgba(196,155,60,0.55);
border-radius:20px;
width:100%;max-width:380px;
padding:28px 24px 24px;
text-align:center;
box-shadow:
0 1px 0 rgba(255,255,255,0.95) inset,
0 -12px 24px rgba(255,215,100,0.15) inset,
0 24px 60px rgba(139,105,20,0.25),
0 8px 20px rgba(0,0,0,0.2);
position:relative;
animation:pcmSlideUp .35s cubic-bezier(.34,1.56,.64,1);
font-family:Cairo,sans-serif;
}
@keyframes pcmSlideUp{from{opacity:0;transform:translateY(20px) scale(0.92)}to{opacity:1;transform:none}}
.pcm-close{
position:absolute;top:12px;left:12px;
background:#e94b5a;color:#fff;
border:none;border-radius:10px;
width:32px;height:32px;
font-size:14px;font-weight:900;
cursor:pointer;
box-shadow:0 3px 10px rgba(233,75,90,0.3);
transition:transform .15s;
}
.pcm-close:hover{transform:scale(1.08)}
.pcm-close:active{transform:scale(0.95)}
.pcm-icon-wrap{
display:flex;
justify-content:center;
margin-bottom:16px;
margin-top:4px;
}
.pcm-icon{
width:68px;height:68px;
border-radius:50%;
background:linear-gradient(135deg, #fff5d6 0%, #ffdf8a 100%);
border:3px solid #fff;
display:flex;align-items:center;justify-content:center;
font-size:32px;
box-shadow:
0 8px 20px rgba(228,168,28,0.4),
0 0 0 3px rgba(228,168,28,0.25);
}
.pcm-title{
margin:0 0 6px;
font-size:22px;
font-weight:900;
color:#3b260b;
letter-spacing:-0.3px;
}
.pcm-sub{
margin:0 0 12px;
font-size:14px;
color:#7a6340;
line-height:1.5;
font-weight:700;
}
.pcm-hint{
display:inline-block;
background:rgba(232,212,255,0.3);
border:1px dashed rgba(136,84,208,0.35);
border-radius:10px;
padding:8px 14px;
font-size:11px;
font-weight:800;
color:#4a2d8b;
margin-bottom:20px;
}
.pcm-actions{
display:flex;
flex-direction:column;
gap:10px;
}
.pcm-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 22px;
border-radius:12px;
border:none;
font-family:Cairo,sans-serif;
font-weight:900;
font-size:15px;
cursor:pointer;
height:48px;
transition:transform .15s cubic-bezier(.3,.7,.4,1),box-shadow .2s,filter .2s;
}
.pcm-btn-icon{font-size:17px;line-height:1}
.pcm-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.pcm-btn:active{transform:translateY(0) scale(0.98)}
.pcm-btn-primary{
background:linear-gradient(135deg, #4ab860 0%, #2d8a4a 100%);
color:#fff;
box-shadow:0 6px 16px rgba(74,184,96,0.35), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.pcm-btn-primary:hover{box-shadow:0 10px 22px rgba(74,184,96,0.45), 0 1px 0 rgba(255,255,255,0.3) inset}
.pcm-btn-danger{
background:linear-gradient(135deg, #fff5f5 0%, #ffe4e4 100%);
color:#c93535;
border:2px solid rgba(201,53,53,0.35);
box-shadow:0 4px 12px rgba(201,53,53,0.12);
}
.pcm-btn-danger:hover{
background:linear-gradient(135deg, #ffe4e4 0%, #ffcccc 100%);
box-shadow:0 6px 16px rgba(201,53,53,0.25);
}
/* ===== Age Gate Card - Premium ===== */
.age-gate-card{
background:
radial-gradient(ellipse 90% 60% at 20% 0%, rgba(255,235,170,0.55) 0%, transparent 55%),
radial-gradient(ellipse 80% 70% at 100% 100%, rgba(255,205,110,0.4) 0%, transparent 60%),
linear-gradient(165deg, #fffdf5 0%, #fff6dd 50%, #ffedc0 100%);
border-radius:18px;
padding:28px 24px 22px;
text-align:center;
font-family:Cairo,sans-serif;
max-width:380px;
margin:0 auto;
}
.age-gate-icon-wrap{display:flex;justify-content:center;margin-bottom:14px}
.age-gate-icon{
width:64px;height:64px;
border-radius:50%;
background:linear-gradient(135deg, #ff6b6b 0%, #c93535 100%);
color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:18px;
font-weight:900;
border:3px solid #fff;
box-shadow:0 8px 20px rgba(201,53,53,0.35),0 0 0 3px rgba(201,53,53,0.2);
letter-spacing:-0.5px;
}
.age-gate-title{
margin:0 0 8px;
font-size:22px;
font-weight:900;
color:#3b260b;
}
.age-gate-sub{
margin:0 0 20px;
font-size:14px;
color:#7a6340;
line-height:1.6;
font-weight:700;
}
.age-gate-actions{display:flex;justify-content:center}
.age-gate-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 28px;
border-radius:12px;
border:none;
font-family:Cairo,sans-serif;
font-weight:900;
font-size:15px;
cursor:pointer;
height:48px;
transition:transform .15s,box-shadow .2s,filter .2s;
min-width:200px;
}
.age-gate-btn-confirm{
background:linear-gradient(135deg, #4ab860 0%, #2d8a4a 100%);
color:#fff;
box-shadow:0 6px 16px rgba(74,184,96,0.35), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.age-gate-btn-confirm:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 10px 22px rgba(74,184,96,0.45)}
.age-gate-btn-confirm:active{transform:translateY(0) scale(0.98)}
/* ===== Username + DisplayName Modals - Premium ===== */
#username-modal.active .modal-content,
#displayname-modal.active .modal-content{
background:
radial-gradient(ellipse 90% 60% at 20% 0%, rgba(255,235,170,0.55) 0%, transparent 55%),
radial-gradient(ellipse 80% 70% at 100% 100%, rgba(255,205,110,0.4) 0%, transparent 60%),
linear-gradient(165deg, #fffdf5 0%, #fff6dd 50%, #ffedc0 100%) !important;
border:2px solid rgba(196,155,60,0.55) !important;
border-radius:20px !important;
padding:28px 24px 22px !important;
max-width:400px !important;
box-shadow:0 24px 60px rgba(139,105,20,0.25),0 1px 0 rgba(255,255,255,0.95) inset,0 -12px 24px rgba(255,215,100,0.15) inset !important;
font-family:Cairo,sans-serif !important;
gap:12px !important;
text-align:center !important;
}
#username-modal .modal-emoji,
#displayname-modal .modal-emoji{
font-size:36px !important;
width:64px;height:64px;
border-radius:50%;
background:linear-gradient(135deg, #fff5d6 0%, #ffdf8a 100%);
border:3px solid #fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 20px rgba(228,168,28,0.4),0 0 0 3px rgba(228,168,28,0.25);
margin:0 auto 8px;
}
#username-modal h3,
#displayname-modal h3{
margin:0 0 4px !important;
font-size:22px !important;
font-weight:900 !important;
color:#3b260b !important;
}
#username-modal h3 b,
#displayname-modal h3 b{color:#c49b3c}
#username-modal p,
#displayname-modal p{
margin:0 0 14px !important;
font-size:13px !important;
color:#7a6340 !important;
font-weight:700 !important;
}
#username-modal .username-input-wrap,
#displayname-modal .username-input-wrap{
background:#fff !important;
border:1.5px solid rgba(196,155,60,0.35) !important;
border-radius:12px !important;
padding:0 14px !important;
height:48px !important;
display:flex !important;
align-items:center !important;
transition:border-color .2s,box-shadow .2s !important;
}
#username-modal .username-input-wrap:focus-within,
#displayname-modal .username-input-wrap:focus-within{
border-color:#8854D0 !important;
box-shadow:0 0 0 3px rgba(136,84,208,0.12) !important;
}
#username-modal .username-at{
color:#b8a578 !important;
font-size:15px !important;
font-weight:700 !important;
padding-left:6px !important;
}
#username-modal .username-input,
#displayname-modal .username-input{
flex:1 !important;
min-width:0 !important;
background:transparent !important;
border:none !important;
font-size:12px !important;
font-weight:700 !important;
color:#3b260b !important;
outline:none !important;
text-align:center !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
overflow:hidden !important;
box-shadow:none !important;
letter-spacing:0 !important;
}
#username-modal .username-at{font-size:12px !important;}
#username-modal #username-submit-btn,
#displayname-modal #displayname-submit-btn{
background:linear-gradient(135deg, #4ab860 0%, #2d8a4a 100%) !important;
color:#fff !important;
border:none !important;
border-radius:12px !important;
height:48px !important;
font-size:15px !important;
font-weight:900 !important;
box-shadow:0 6px 16px rgba(74,184,96,0.35),0 1px 0 rgba(255,255,255,0.25) inset !important;
transition:transform .15s,filter .2s !important;
max-width:260px !important;
margin:6px auto 4px !important;
display:flex !important;
align-items:center;justify-content:center;
}
#username-modal #username-submit-btn:hover:not(:disabled),
#displayname-modal #displayname-submit-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
#username-modal #username-submit-btn:disabled{opacity:0.5}
#username-modal .btn-outline,
#displayname-modal .btn-ghost,
#username-modal .btn-ghost{
background:transparent !important;
border:none !important;
color:#8a6f3a !important;
font-size:12px !important;
padding:4px !important;
margin-top:2px !important;
text-decoration:underline !important;
}
/* Center leaderboard title */
#leaderboard-screen .profile-screen-header{position:relative}
#leaderboard-screen .profile-screen-title{
position:absolute;
left:50%;right:auto;
transform:translateX(-50%);
text-align:center;
margin:0;
}
/* === Corner X button for name modals === */
#username-modal .modal-content,
#displayname-modal .modal-content{position:relative !important}
.modal-x-corner{
position:absolute !important;
top:12px !important;
left:12px !important;
right:auto !important;
width:32px !important;
height:32px !important;
border-radius:10px !important;
border:none !important;
background:#e74c3c !important;
color:#fff !important;
font-size:15px !important;
font-weight:900 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
cursor:pointer !important;
box-shadow:0 3px 0 #b33a2a,0 4px 10px rgba(0,0,0,0.15) !important;
z-index:5 !important;
transition:transform .15s !important;
}
.modal-x-corner:active{transform:translateY(2px) !important;box-shadow:0 1px 0 #b33a2a !important}
/* === Leaderboard header: proper padding so title + X aren't cramped === */
#leaderboard-screen .profile-screen-header{
min-height:clamp(64px,5vw,84px) !important;
padding-top:clamp(14px,1.2vw,22px) !important;
padding-bottom:clamp(14px,1.2vw,22px) !important;
}
#leaderboard-screen .profile-screen-title{
font-size:clamp(18px,1.5vw,24px) !important;
line-height:1.2 !important;
}
/* === Bigger avatars in leaderboard rows + podium small cards === */
@media (min-width:900px){
.lbp-simple-avatar{width:clamp(44px,3.2vw,56px) !important;height:clamp(44px,3.2vw,56px) !important;font-size:clamp(18px,1.4vw,22px) !important}
.lbp-simple-rank{width:clamp(36px,2.6vw,44px) !important;height:clamp(36px,2.6vw,44px) !important;font-size:clamp(13px,1vw,15px) !important}
}
/* Hard-kill profile-complete banner (removed per UX) */
.social-complete-banner{display:none !important}
/* Age gate: hide outer modal X (card has its own) */
#live-modal:has(.age-gate-card) .modal-close-btn{display:none !important}
.age-gate-card{position:relative}
.age-gate-card-x{
position:absolute !important;
top:10px !important;
left:10px !important;
width:32px !important;
height:32px !important;
border-radius:10px !important;
border:none !important;
background:#e94b5a !important;
color:#fff !important;
font-size:15px !important;
font-weight:900 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
cursor:pointer !important;
box-shadow:0 3px 0 #b8354a,0 4px 10px rgba(0,0,0,0.2) !important;
z-index:5 !important;
}
.age-gate-card-x:active{transform:translateY(2px) !important;box-shadow:0 1px 0 #b8354a !important}
/* ==================== Notifications Screen (premium) ==================== */
#notifications-screen{display:none}
#notifications-screen.active{display:flex;flex-direction:column;height:100vh;height:100dvh}
.notifications-screen-content{flex:1;overflow-y:auto;padding:clamp(16px,2vw,28px) clamp(14px,2vw,24px) 48px}
.notif-card{
max-width:680px;width:100%;margin:0 auto;
background:
radial-gradient(ellipse 85% 55% at 15% 0%, rgba(255,235,170,0.55) 0%, transparent 55%),
radial-gradient(ellipse 75% 65% at 100% 100%, rgba(255,205,110,0.35) 0%, transparent 60%),
linear-gradient(165deg, #fffdf5 0%, #fff6dd 50%, #ffedc0 100%);
border:2px solid rgba(196,155,60,0.55);
border-radius:clamp(18px,1.5vw,24px);
padding:clamp(18px,2vw,26px);
box-shadow:
0 1px 0 rgba(255,255,255,0.95) inset,
0 -14px 26px rgba(255,215,100,0.12) inset,
0 18px 50px rgba(139,105,20,0.18),
0 6px 16px rgba(0,0,0,0.1);
position:relative;overflow:hidden
}
.notif-card::before{
content:"";position:absolute;top:-30%;left:-10%;right:-10%;height:50%;
background:radial-gradient(ellipse at center, rgba(255,255,255,0.35) 0%, transparent 65%);
pointer-events:none
}
.notif-card > *{position:relative;z-index:1}
.notif-actions-bar{display:flex;justify-content:flex-end;margin-bottom:14px}
.notif-clear-all-btn{
display:flex;align-items:center;gap:8px;
padding:11px 20px;
background:linear-gradient(135deg,#ff6b6b,#e94b5a);
color:#fff;border:none;border-radius:12px;
font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;
box-shadow:0 5px 14px rgba(233,75,90,.32),0 1px 0 rgba(255,255,255,.3) inset;
transition:transform .15s,filter .15s
}
.notif-clear-all-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.notif-clear-all-btn:active{transform:translateY(1px)}
.notif-card .notif-list{display:flex;flex-direction:column;gap:12px}
.notif-card .notif-item{
position:relative;
background:rgba(255,255,255,0.85);
border:1.5px solid rgba(196,155,60,0.35);
border-radius:14px;
padding:16px 48px 14px 18px;
box-shadow:0 3px 10px rgba(139,105,20,.08),0 1px 0 rgba(255,255,255,0.6) inset;
transition:box-shadow .2s,transform .15s,border-color .2s
}
html[dir="rtl"] .notif-card .notif-item{padding:16px 18px 14px 48px}
.notif-card .notif-item.unread{
border-color:rgba(74,184,96,0.6);
background:linear-gradient(135deg,rgba(245,255,240,0.95),rgba(234,255,240,0.95));
box-shadow:0 4px 14px rgba(74,184,96,.16),0 1px 0 rgba(255,255,255,.6) inset
}
.notif-card .notif-item.unread::after{
content:"";position:absolute;top:14px;width:8px;height:8px;border-radius:50%;
background:#3caa50;box-shadow:0 0 0 3px rgba(60,170,80,0.2)
}
html[dir="rtl"] .notif-card .notif-item.unread::after{right:16px}
html[dir="ltr"] .notif-card .notif-item.unread::after{left:16px}
.notif-card .notif-item:hover{box-shadow:0 6px 18px rgba(139,105,20,.14);transform:translateY(-1px)}
.notif-card .notif-msg{font-size:14px;line-height:1.75;color:#3b260b;font-weight:600;white-space:pre-wrap}
.notif-card .notif-time{font-size:11px;color:#8a7a5a;margin-top:8px;direction:ltr;text-align:left;font-weight:600}
html[dir="rtl"] .notif-card .notif-time{text-align:right}
.notif-del-btn{
position:absolute;top:12px;width:28px;height:28px;border-radius:9px;
border:none;background:rgba(233,75,90,0.12);color:#e94b5a;
font-size:14px;font-weight:900;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .15s,transform .15s
}
html[dir="rtl"] .notif-del-btn{left:12px}
html[dir="ltr"] .notif-del-btn{right:12px}
.notif-del-btn:hover{background:rgba(233,75,90,0.25);transform:scale(1.08)}
.notif-card .notif-empty{
padding:60px 24px;text-align:center;color:#8a7a5a;
font-size:15px;line-height:1.8;font-weight:600
}
/* Notification header bell with badge */
.notif-btn{position:relative}
.notif-badge{
position:absolute;top:-4px;right:-4px;
min-width:18px;height:18px;padding:0 5px;
background:linear-gradient(135deg,#ff6b6b,#e94b5a);
color:#fff;border-radius:9px;
font-size:10px;font-weight:900;
display:flex;align-items:center;justify-content:center;
border:2px solid #fff;
box-shadow:0 2px 6px rgba(233,75,90,.4);
line-height:1;pointer-events:none;
animation:notifBadgePulse 2s ease-in-out infinite
}
html[dir="rtl"] .notif-badge{right:auto;left:-4px}
@keyframes notifBadgePulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.1)}
}
/* ==================== Notification popup (premium) ==================== */
.notif-popup-overlay{
position:fixed;inset:0;z-index:10001;
background:rgba(0,0,0,0.58);backdrop-filter:blur(4px);
display:flex;align-items:center;justify-content:center;
padding:20px;
animation:nfpFade .25s ease-out
}
@keyframes nfpFade{from{opacity:0}to{opacity:1}}
.notif-popup-card{
background:
radial-gradient(ellipse 90% 60% at 20% 0%, rgba(255,235,170,0.55) 0%, transparent 55%),
radial-gradient(ellipse 80% 70% at 100% 100%, rgba(255,205,110,0.4) 0%, transparent 60%),
linear-gradient(165deg, #fffdf5 0%, #fff6dd 50%, #ffedc0 100%);
border:2px solid rgba(196,155,60,0.55);
border-radius:22px;
width:100%;max-width:400px;
padding:30px 26px 24px;
text-align:center;
box-shadow:
0 1px 0 rgba(255,255,255,0.95) inset,
0 -14px 28px rgba(255,215,100,0.16) inset,
0 22px 55px rgba(139,105,20,0.25),
0 8px 20px rgba(0,0,0,0.2);
position:relative;
animation:nfpSlide .36s cubic-bezier(.34,1.56,.64,1);
font-family:Cairo,sans-serif
}
@keyframes nfpSlide{from{opacity:0;transform:translateY(20px) scale(0.92)}to{opacity:1;transform:none}}
.notif-popup-icon-wrap{display:flex;justify-content:center;margin-bottom:18px}
.notif-popup-icon{
width:66px;height:66px;border-radius:50%;
background:linear-gradient(135deg,#ff8c42,#ff6b1a);
display:flex;align-items:center;justify-content:center;
font-size:30px;
box-shadow:0 8px 22px rgba(255,140,66,.38),0 1px 0 rgba(255,255,255,.4) inset
}
.notif-popup-title{
font-size:20px;font-weight:900;color:#3b260b;
margin:0 0 12px;line-height:1.3
}
.notif-popup-msg{
font-size:14px;line-height:1.75;color:#6b5440;
margin:0 0 22px;font-weight:600;white-space:pre-wrap;word-wrap:break-word
}
.notif-popup-btn{
width:100%;
padding:14px 22px;
background:linear-gradient(135deg,#ff6b6b,#e94b5a);
color:#fff;border:none;border-radius:14px;
font-family:inherit;font-weight:900;font-size:15px;cursor:pointer;
box-shadow:0 6px 16px rgba(233,75,90,.35),0 1px 0 rgba(255,255,255,.3) inset;
transition:transform .15s,filter .15s
}
.notif-popup-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.notif-popup-btn:active{transform:translateY(1px)}
.notif-popup-actions{display:flex;gap:10px}
.notif-popup-actions .notif-popup-btn{flex:1;padding:12px 18px;font-size:14px}
.notif-popup-cancel{
background:rgba(196,155,60,0.15) !important;
color:#6b5440 !important;
box-shadow:0 2px 8px rgba(139,105,20,.1) !important
}
.notif-popup-cancel:hover{filter:brightness(0.96)}
/* =============== Profile panel cards (account tab) =============== */
#pp-panel-social .pp-card{
background:
radial-gradient(ellipse 90% 55% at 15% 0%, rgba(255,235,170,0.5) 0%, transparent 55%),
radial-gradient(ellipse 80% 65% at 100% 100%, rgba(255,205,110,0.32) 0%, transparent 60%),
linear-gradient(165deg, #fffdf5 0%, #fff6dd 50%, #ffedc0 100%);
border:2px solid rgba(196,155,60,0.5);
border-radius:18px;
padding:0;
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 -12px 24px rgba(255,215,100,0.12) inset,
0 10px 28px rgba(139,105,20,0.14),
0 4px 10px rgba(0,0,0,0.06);
overflow:hidden;
position:relative
}
#pp-panel-social .pp-card::before{
content:"";position:absolute;top:-30%;left:-10%;right:-10%;height:45%;
background:radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%, transparent 65%);
pointer-events:none
}
#pp-panel-social .pp-card > *{position:relative;z-index:1}
#pp-panel-social .pp-card-header{
display:flex;align-items:center;gap:10px;
padding:14px 18px;
background:rgba(196,155,60,0.1);
border-bottom:1.5px solid rgba(196,155,60,0.3)
}
#pp-panel-social .pp-card-icon{
font-size:22px;line-height:1;
filter:drop-shadow(0 2px 4px rgba(139,105,20,0.2))
}
#pp-panel-social .pp-card-title{
margin:0;font-size:15px;font-weight:900;color:#3b260b;
letter-spacing:0.2px
}
#pp-panel-social .pp-card-body{
padding:16px 18px 18px
}
/* Shrink the save social accounts button inside the account card */
#pp-panel-social .pp-card-body button.btn-gold.btn-full{
max-width:200px !important;
margin:14px auto 0 !important;
display:flex !important;
align-items:center;justify-content:center;gap:8px;
height:40px !important;
font-size:13px !important;
font-weight:800 !important;
padding:8px 20px !important;
border-radius:10px !important;
}
/* ============================================================
Coin Packs — Buy real-money coins via Tap Payments
============================================================ */
.coin-packs-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px;color:var(--ds-text-muted)}
.coin-packs-intro{text-align:center;padding:20px 12px 14px}
.coin-packs-title{font-size:clamp(22px,3.2vw,30px);font-weight:900;color:var(--ds-text);margin-bottom:6px;letter-spacing:-.3px}
.coin-packs-sub{font-size:clamp(12px,1.6vw,14px);color:var(--ds-text-muted);font-weight:600}
.coin-packs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.4vw,16px);padding:clamp(6px,1.2vw,14px);max-width:1200px;margin:0 auto;align-items:stretch}
@media (max-width:900px){.coin-packs-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:540px){.coin-packs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.pass-benefits{grid-template-columns:1fr}}
/* Sub-tabs inside the coins category */
.shop-subtabs{display:flex;justify-content:center;gap:8px;margin:8px auto 16px;max-width:440px;padding:4px;background:rgba(255,251,232,.92);border:1.5px solid rgba(196,155,60,.25);border-radius:999px;box-shadow:0 4px 16px -6px rgba(139,105,20,.2)}
.shop-subtab{flex:1;padding:8px 14px;border:none;background:transparent;border-radius:999px;font-family:Cairo,sans-serif;font-size:12.5px;font-weight:900;color:rgba(58,45,21,.6);cursor:pointer;transition:all .2s ease;white-space:nowrap}
.shop-subtab.active{background:linear-gradient(180deg,#fff4a3,#f5c842);color:#3b2f10;box-shadow:0 2px 8px rgba(196,155,60,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.shop-subtab:hover:not(.active){background:rgba(196,155,60,.08);color:#3b2f10}
/* Mismar Pass card */
.pass-wrap{max-width:620px;margin:0 auto;padding:clamp(6px,1.2vw,12px)}
.pass-card{position:relative;background:linear-gradient(135deg,#fff4a3 0%,#f5c842 50%,#d4a017 100%);border:2.5px solid #b8860b;border-radius:20px;padding:18px 16px 14px;text-align:center;box-shadow:0 14px 40px -12px rgba(196,155,60,.55),0 0 0 2px rgba(255,215,0,.2),inset 0 1.5px 0 rgba(255,255,255,.55);overflow:hidden;isolation:isolate}
.pass-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.5),transparent 50%);pointer-events:none;z-index:-1}
.pass-card::after{content:"";position:absolute;top:-50%;right:-20%;width:60%;height:100%;background:radial-gradient(ellipse,rgba(255,255,255,.15),transparent 60%);pointer-events:none;z-index:-1}
.pass-crown{font-size:38px;line-height:1;filter:drop-shadow(0 4px 8px rgba(139,105,20,.35));margin-bottom:4px}
.pass-title{font-size:19px;font-weight:900;color:#3b2f10;letter-spacing:-.4px;margin-bottom:2px;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.pass-sub{font-size:11.5px;font-weight:700;color:rgba(59,47,16,.7);margin-bottom:12px}
.pass-benefits{background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.5);border-radius:12px;padding:10px 14px;margin-bottom:12px;text-align:right;backdrop-filter:blur(4px);display:grid;grid-template-columns:1fr 1fr;gap:3px 14px;column-gap:clamp(10px,2vw,22px)}
[dir="ltr"] .pass-benefits{text-align:left}
.pass-benefit{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:#3b2f10;padding:2.5px 0;line-height:1.3}
.pass-benefit-icon{flex-shrink:0;width:16px;height:16px;background:linear-gradient(135deg,#2ecc71,#16a34a);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;box-shadow:0 1px 3px rgba(22,163,74,.4)}
.pass-price-row{display:flex;gap:8px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}
.pass-price-opt{flex:1;min-width:120px;max-width:190px;background:rgba(255,255,255,.55);border:1.5px solid rgba(184,134,11,.3);border-radius:12px;padding:10px 10px;cursor:pointer;transition:all .25s cubic-bezier(.2,.9,.3,1.2);backdrop-filter:blur(4px);position:relative}
.pass-price-opt:hover{background:rgba(255,255,255,.7);border-color:#8b6914;transform:translateY(-2px)}
.pass-price-opt.best{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,244,163,.9));border-color:#8b6914;position:relative}
.pass-price-opt.best::before{content:"وفّر 18%";position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#e94b5a,#c73441);color:#fff;font-size:10px;font-weight:900;padding:3px 10px;border-radius:10px;box-shadow:0 2px 6px rgba(233,75,90,.4);white-space:nowrap}
.pass-opt-period{font-size:10.5px;font-weight:800;color:rgba(58,45,21,.65);margin-bottom:2px}
.pass-opt-price{font-size:17px;font-weight:900;color:#3b2f10;margin-bottom:1px;letter-spacing:-.3px}
.pass-opt-currency{font-size:9.5px;font-weight:700;opacity:.7}
.pass-opt-sub{font-size:9.5px;color:rgba(58,45,21,.6);font-weight:700}
.pass-cta{width:100%;padding:11px 18px;border:none;border-radius:12px;background:linear-gradient(180deg,#2ecc71,#16a34a);color:#fff;font-family:Cairo,sans-serif;font-size:13px;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #0f5e2c,0 6px 14px -4px rgba(22,163,74,.45);transition:all .2s}
.pass-cta:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 5px 0 #0f5e2c,0 12px 24px -4px rgba(22,163,74,.6)}
.pass-cta:active{transform:translateY(2px);box-shadow:0 2px 0 #0f5e2c}
.pass-footer-note{margin-top:9px;font-size:9.5px;font-weight:700;color:rgba(58,45,21,.55)}
.cpack{position:relative;background:linear-gradient(180deg,#fffbe8,#faecc4);border:2px solid rgba(196,155,60,.35);border-radius:22px;padding:22px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s ease,border-color .25s ease;box-shadow:0 6px 18px -8px rgba(139,105,20,.3),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden;isolation:isolate}
.cpack::before{content:;position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,215,0,.18),transparent 60%);pointer-events:none;z-index:-1}
.cpack:hover{transform:translateY(-4px) scale(1.02);border-color:#c49b3c;box-shadow:0 12px 32px -8px rgba(196,155,60,.45),inset 0 1px 0 rgba(255,255,255,.85)}
.cpack-featured-card{background:linear-gradient(180deg,#fff4a3,#f5c842);border-color:#b8860b;border-width:3px;transform:scale(1.04);box-shadow:0 10px 28px -8px rgba(196,155,60,.5),inset 0 1px 0 rgba(255,255,255,.85),0 0 0 3px rgba(255,215,0,.2)}
.cpack-featured-card:hover{transform:translateY(-4px) scale(1.06)}
.cpack-featured{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#e94b5a,#c73441);color:#fff;font-size:10px;font-weight:900;padding:5px 10px;border-radius:12px;letter-spacing:.3px;box-shadow:0 2px 8px rgba(233,75,90,.5);z-index:2}
.cpack-bonus{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,#4ade80,#16a34a);color:#fff;font-size:11px;font-weight:900;padding:5px 9px;border-radius:10px;box-shadow:0 2px 6px rgba(22,163,74,.4);z-index:2}
.cpack-emoji{font-size:clamp(38px,5vw,52px);margin-top:12px;line-height:1;filter:drop-shadow(0 4px 8px rgba(139,105,20,.25))}
.cpack-coins{font-size:clamp(22px,2.8vw,30px);font-weight:900;color:#3b2f10;margin-top:8px;letter-spacing:-.5px}
.cpack-label{font-size:11px;font-weight:700;color:rgba(58,45,21,.6);text-transform:uppercase;letter-spacing:1px}
.cpack-price{font-size:clamp(18px,2.3vw,24px);font-weight:900;color:#8b6914;margin-top:10px;margin-bottom:8px}
.cpack-currency{font-size:13px;font-weight:700;opacity:.75}
.cpack-buy{width:100%;padding:12px 16px;border:none;border-radius:14px;background:linear-gradient(180deg,#2ecc71,#16a34a);color:#fff;font-family:Cairo,sans-serif;font-size:14px;font-weight:900;cursor:pointer;transition:all .2s ease;box-shadow:0 3px 0 #0f5e2c,0 6px 16px -4px rgba(22,163,74,.4);letter-spacing:.2px}
.cpack-buy:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 4px 0 #0f5e2c,0 10px 20px -4px rgba(22,163,74,.5)}
.cpack-buy:active{transform:translateY(2px);box-shadow:0 1px 0 #0f5e2c}
.cpack-featured-card .cpack-buy{background:linear-gradient(180deg,#ff9500,#e67e00);box-shadow:0 3px 0 #8b4a00,0 6px 16px -4px rgba(255,149,0,.5)}
.cpack-featured-card .cpack-buy:hover{box-shadow:0 4px 0 #8b4a00,0 10px 24px -4px rgba(255,149,0,.6)}
.cpack-featured-card .cpack-buy:active{box-shadow:0 1px 0 #8b4a00}
.coin-packs-footer{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:18px 12px 8px;margin-top:8px;border-top:1px solid rgba(139,105,20,.12)}
.cpf-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(255,251,232,.8);border:1px solid rgba(196,155,60,.25);border-radius:999px;font-size:12px;font-weight:800;color:rgba(58,45,21,.7)}
@media (max-width:480px){.coin-packs-grid{grid-template-columns:repeat(2,1fr);gap:10px}.cpack{padding:18px 12px 12px}.cpack-featured-card{transform:none}.cpack-featured-card:hover{transform:translateY(-3px)}}
/* ============================================================
Coming Soon — Coin store activation pending Tap onboarding
============================================================ */
.cs-wrap{display:flex;justify-content:center;padding:clamp(6px,1.2vw,12px);align-items:flex-start}
.cs-card{position:relative;background:linear-gradient(180deg,#fff7e0 0%,#faecc4 50%,#f5d780 100%);border:2.5px solid #c49b3c;border-radius:20px;padding:18px 22px 16px;max-width:620px;width:100%;text-align:center;box-shadow:0 14px 40px -12px rgba(196,155,60,.5),0 0 0 2px rgba(255,215,0,.18),inset 0 1.5px 0 rgba(255,255,255,.65);overflow:hidden;isolation:isolate}
.cs-card::before{content:;position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(255,255,255,.5),transparent 60%);pointer-events:none;z-index:-1}
.cs-icon-wrap{position:relative;display:inline-block;margin-bottom:4px}
.cs-icon{position:relative;font-size:36px;line-height:1;filter:drop-shadow(0 4px 8px rgba(139,105,20,.4));z-index:2}
.cs-pulse{position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(196,155,60,.4);animation:csPulse 2s ease-out infinite;z-index:1}
.cs-pulse::before{content:;position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(196,155,60,.25);animation:csPulse 2s ease-out infinite;animation-delay:.5s}
.cs-title{font-size:21px;font-weight:900;color:#3b2f10;margin-bottom:2px;letter-spacing:-.4px;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.cs-sub{font-size:12px;font-weight:700;color:rgba(58,45,21,.7);margin-bottom:8px}
.cs-divider{width:40%;height:1px;background:linear-gradient(90deg,transparent,rgba(196,155,60,.5),transparent);margin:0 auto 6px}
.cs-msg{font-size:11.5px;font-weight:600;color:#3b2f10;line-height:1.55;margin:0 auto 4px;max-width:480px}
.cs-msg strong{font-weight:900;color:#8b6914}
.cs-thanks{font-weight:800;color:#8b6914;margin-top:7px;font-size:12px}
.cs-badges{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin:7px 0 5px}
.cs-badge{background:rgba(255,255,255,.6);border:1px solid rgba(196,155,60,.35);color:#5a4a1f;padding:5px 11px;border-radius:999px;font-size:10.5px;font-weight:900;backdrop-filter:blur(6px)}
.cs-tip{margin-top:10px;padding:10px 14px;background:rgba(255,255,255,.45);border:1px solid rgba(196,155,60,.25);border-radius:12px;backdrop-filter:blur(6px)}
.cs-tip-title{font-size:11px;font-weight:900;color:#5a4a1f;margin-bottom:5px;text-transform:none}
.cs-tip-list{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cs-way{font-size:10.5px;font-weight:800;color:#3b2f10;background:rgba(255,255,255,.5);border:1px solid rgba(196,155,60,.2);border-radius:8px;padding:6px 8px;text-align:center}
@media (max-width:480px){.cs-tip-list{grid-template-columns:1fr}}
/* Mismar Pass — active state */
.pass-card-active{background:linear-gradient(135deg,#d4f8e8 0%,#a7ecc4 50%,#16a34a 100%) !important;border-color:#0f5e2c !important}
.pass-active-info{background:rgba(255,255,255,.6);border:1.5px solid rgba(0,0,0,.08);border-radius:14px;padding:12px 14px;margin-bottom:14px;backdrop-filter:blur(4px)}
.pai-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;color:#0f5e2c;padding:5px 0;border-bottom:1px dashed rgba(0,0,0,.1)}
.pai-row:last-child{border-bottom:none}
.pai-row strong{color:#08401e;font-size:13px;font-weight:900}
.pass-cta-cancel{background:linear-gradient(180deg,#ff9500,#e67e00) !important;box-shadow:0 4px 0 #8b4a00,0 7px 18px -4px rgba(255,149,0,.5) !important}
.pass-cta-cancel:active{box-shadow:0 1px 0 #8b4a00 !important}
/* ============================================================
AX1 Daily Missions — beautiful screen
============================================================ */
.ms-loading{display:flex;justify-content:center;padding:60px 20px}
.ms-wrap{max-width:1180px;margin:0 auto;padding:clamp(10px,2vw,24px) clamp(12px,3vw,32px)}
.ms-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:18px 22px;margin-bottom:20px;background:linear-gradient(135deg,#fff7e0 0%,#faecc4 60%,#f5deaa 100%);border:2px solid rgba(196,155,60,.4);border-radius:20px;box-shadow:0 10px 28px -10px rgba(139,105,20,.28),inset 0 1px 0 rgba(255,255,255,.6)}
.ms-hero-left{display:flex;align-items:center;gap:14px;min-width:0}
.ms-hero-icon{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#f5c842,#c49b3c);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 6px 14px -4px rgba(196,155,60,.5),inset 0 1px 0 rgba(255,255,255,.5);flex-shrink:0}
.ms-hero-text{min-width:0}
.ms-hero-title{font-size:clamp(18px,2vw,24px);font-weight:900;color:#3b2f10;letter-spacing:-.4px;line-height:1.1}
.ms-hero-sub{font-size:clamp(11px,1.1vw,13px);font-weight:700;color:rgba(58,45,21,.6);margin-top:3px}
.ms-hero-stats{display:flex;gap:12px;flex-wrap:wrap}
.ms-stat{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.75);border:1.5px solid rgba(196,155,60,.35);border-radius:14px;padding:10px 16px;min-width:130px;backdrop-filter:blur(4px)}
.ms-stat-ico{font-size:22px;line-height:1}
.ms-stat-body{display:flex;flex-direction:column;line-height:1.1}
.ms-stat-num{font-size:17px;font-weight:900;color:#8b6914}
.ms-stat-lbl{font-size:10px;font-weight:800;color:rgba(58,45,21,.6);margin-top:2px}
.ms-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:20px}
.ms-card{display:flex;flex-direction:column;background:linear-gradient(180deg,#fffaec 0%,#f9eccd 100%);border:2px solid rgba(196,155,60,.32);border-radius:18px;padding:18px 20px;transition:all .25s ease;box-shadow:0 6px 16px -8px rgba(139,105,20,.22),inset 0 1px 0 rgba(255,255,255,.5)}
.ms-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(139,105,20,.24)}
.ms-card-pending{opacity:.96}
.ms-card-ready{border-color:#f5c842;background:linear-gradient(180deg,#fff7d6 0%,#fce6a4 100%);box-shadow:0 10px 22px -8px rgba(245,200,66,.55),0 0 0 1px rgba(245,200,66,.4),inset 0 1px 0 rgba(255,255,255,.65)}
.ms-card-claimed{opacity:.7;background:linear-gradient(180deg,#f6efd8,#ebdfb8);border-color:rgba(196,155,60,.22)}
.ms-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:12px}
.ms-card-label{font-size:14px;font-weight:900;color:#3b2f10;flex:1;line-height:1.35}
.ms-card-reward{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#fff4a3,#f5c842);color:#8b6914;padding:7px 13px;border-radius:999px;font-size:13px;font-weight:900;white-space:nowrap;border:1.5px solid rgba(184,134,11,.35);box-shadow:0 3px 8px -2px rgba(196,155,60,.4)}
.ms-card-progress{display:flex;align-items:center;gap:12px;margin-bottom:14px;margin-top:auto}
.ms-card-bar{flex:1;height:9px;background:rgba(196,155,60,.18);border-radius:999px;overflow:hidden}
.ms-card-fill{height:100%;background:linear-gradient(90deg,#f5c842,#c49b3c);border-radius:999px;transition:width .4s ease}
.ms-card-ready .ms-card-fill{background:linear-gradient(90deg,#2ecc71,#16a34a)}
.ms-card-pct{font-size:12px;font-weight:800;color:rgba(58,45,21,.7);min-width:54px;text-align:left;font-family:'Cairo',monospace}
.ms-card-btn{width:100%;padding:12px 16px;border:none;border-radius:12px;font-family:Cairo,sans-serif;font-size:13px;font-weight:900;cursor:pointer;transition:all .2s ease}
.ms-card-btn-claim{background:linear-gradient(180deg,#2ecc71,#16a34a);color:#fff;box-shadow:0 3px 0 #0f5e2c,0 8px 16px -4px rgba(22,163,74,.45)}
.ms-card-btn-claim:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 4px 0 #0f5e2c,0 10px 20px -4px rgba(22,163,74,.55)}
.ms-card-btn-claim:active{transform:translateY(2px);box-shadow:0 1px 0 #0f5e2c}
.ms-card-btn-pending{background:rgba(196,155,60,.12);color:rgba(58,45,21,.6);cursor:not-allowed;border:1.5px dashed rgba(196,155,60,.35)}
.ms-card-btn-claimed{background:rgba(22,163,74,.15);color:#0f5e2c;cursor:default;border:1.5px solid rgba(22,163,74,.3)}
.ms-footer{text-align:center;font-size:12px;font-weight:700;color:rgba(58,45,21,.55);padding:16px}
@media (max-width:640px){.ms-list{grid-template-columns:1fr}.ms-hero{padding:14px 16px}}
/* Settings About/Legal links */
.setting-row.setting-link{display:flex;align-items:center;justify-content:space-between;padding:11px 4px;text-decoration:none;color:var(--ds-text);border-bottom:1px dashed rgba(196,155,60,.25);transition:background .15s,padding-right .15s;border-radius:8px}
.setting-row.setting-link:last-child{border-bottom:none}
.setting-row.setting-link:hover{background:rgba(245,200,66,.12);padding-right:10px}
.setting-row.setting-link .setting-val{color:rgba(58,45,21,.5);font-size:18px;font-weight:900}
/* FC send button spinner */
.fc-btn-spinner{display:inline-block;width:14px;height:14px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:fcSpin .6s linear infinite;vertical-align:middle}
@keyframes fcSpin{to{transform:rotate(360deg)}}
.fc-waiting-icon{animation:fcPulse 1.5s ease-in-out infinite}
@keyframes fcPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.7}}
/* Weekly Bonus section in missions */
.ms-weekly{background:linear-gradient(135deg,#fff7e0,#faecc4);border:2px solid rgba(196,155,60,.45);border-radius:18px;padding:18px 20px;margin-bottom:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 20px -8px rgba(139,105,20,.25)}
.ms-weekly-head{text-align:center}
.ms-weekly-title{font-size:clamp(16px,1.8vw,20px);font-weight:900;color:#3b2f10}
.ms-weekly-sub{font-size:clamp(11px,1.1vw,13px);font-weight:700;color:rgba(58,45,21,.6);margin-top:4px}
.ms-weekly-progress{display:flex;align-items:center;gap:12px}
/* Daily Splash overlay */
.ds-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9998;opacity:0;transition:opacity .3s ease;backdrop-filter:blur(6px)}
.ds-overlay.ds-visible{opacity:1}
.ds-overlay.ds-closing{opacity:0}
.ds-card{background:linear-gradient(180deg,#fff8de,#faecc4);border:3px solid rgba(196,155,60,.5);border-radius:24px;padding:28px 24px;max-width:400px;width:90%;text-align:center;box-shadow:0 20px 60px -15px rgba(0,0,0,.4);transform:scale(.9);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.ds-visible .ds-card{transform:scale(1)}
.ds-closing .ds-card{transform:scale(.9)}
.ds-header{margin-bottom:18px}
.ds-flame{font-size:48px;margin-bottom:4px;animation:dsPulse 1.5s ease-in-out infinite}
@keyframes dsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.ds-streak-num{font-size:clamp(28px,6vw,40px);font-weight:900;color:#3b2f10;line-height:1}
.ds-streak-label{font-size:clamp(12px,2.5vw,14px);font-weight:700;color:rgba(58,45,21,.65);margin-top:4px}
.ds-reward{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#fff4a3,#f5c842);color:#8b6914;padding:10px 18px;border-radius:999px;font-weight:900;font-size:14px;margin-bottom:16px;border:1.5px solid rgba(184,134,11,.4);box-shadow:0 4px 10px -3px rgba(196,155,60,.4)}
.ds-reward-icon{font-size:20px}
.ds-missions{text-align:right;margin-bottom:16px;background:rgba(255,255,255,.5);border-radius:14px;padding:14px;border:1.5px solid rgba(196,155,60,.25)}
.ds-missions-title{font-size:14px;font-weight:900;color:#3b2f10;margin-bottom:10px;text-align:center}
.ds-mission-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed rgba(196,155,60,.2)}
.ds-mission-row:last-child{border-bottom:none}
.ds-mission-check{font-size:16px;flex-shrink:0}
.ds-mission-label{font-size:13px;font-weight:700;color:#3b2f10;flex:1}
.ds-weekly-hint{font-size:12px;font-weight:800;color:#8b6914;margin-bottom:14px;padding:8px 12px;background:rgba(245,200,66,.2);border-radius:10px}
.ds-cta{width:100%;padding:14px;border:none;border-radius:14px;background:linear-gradient(180deg,#2ecc71,#16a34a);color:#fff;font-family:Cairo,sans-serif;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 4px 0 #0f5e2c,0 8px 18px -4px rgba(22,163,74,.5);transition:all .15s}
.ds-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.ds-cta:active{transform:translateY(2px);box-shadow:0 1px 0 #0f5e2c}
/* Polished daily-splash card — matches login-success / language-picker
cream-gold identity (2026-04-27). The base .ds-card class still carries
the gradient + border; .ds-card-pro adds a slightly tighter pad, a
soft inner highlight, and the hero stage. */
.ds-card-pro{padding:24px 22px 22px;gap:0;border-radius:28px;border:1.6px solid rgba(196,155,60,.55);box-shadow:0 14px 38px -10px rgba(196,155,60,.45),0 12px 24px rgba(0,0,0,.22)}
.ds-card-pro::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 40%);mix-blend-mode:overlay}
.ds-card{position:relative}
.ds-header-pro{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px}
.ds-hero-stage{width:78px;height:78px;border-radius:22px;background:linear-gradient(135deg,#F2C12E 0%,#C49B3C 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(196,155,60,.5),inset 0 2px 0 rgba(255,255,255,.45);animation:dsHeroPop .42s cubic-bezier(.34,1.56,.64,1) both;margin-bottom:6px}
.ds-hero-emoji{font-size:40px;line-height:1;animation:dsPulse 1.6s ease-in-out infinite}
@keyframes dsHeroPop{0%{transform:scale(.55) rotate(-8deg);opacity:0}60%{transform:scale(1.08) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.ds-card-pro .ds-streak-num{margin-top:2px;font-size:clamp(22px,5vw,28px);letter-spacing:-.3px}
.ds-card-pro .ds-streak-label{font-size:13px;color:rgba(141,110,78,.86);font-weight:700}
/* Level Up celebration modal */
.lu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity .3s;backdrop-filter:blur(8px)}
.lu-overlay.lu-visible{opacity:1}
.lu-overlay.lu-closing{opacity:0}
.lu-card{background:linear-gradient(180deg,#fff8de 0%,#f5c842 100%);border:3px solid rgba(184,134,11,.5);border-radius:28px;padding:32px 28px;max-width:340px;width:85%;text-align:center;box-shadow:0 20px 60px -10px rgba(139,105,20,.5),0 0 80px -20px rgba(245,200,66,.4);transform:scale(.8);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.lu-visible .lu-card{transform:scale(1)}
.lu-closing .lu-card{transform:scale(.8)}
.lu-stars{font-size:56px;animation:luStar 1s ease-in-out infinite alternate}
@keyframes luStar{0%{transform:scale(1) rotate(-5deg)}100%{transform:scale(1.2) rotate(5deg)}}
.lu-title{font-size:clamp(24px,6vw,32px);font-weight:900;color:#3b2f10;margin:8px 0 4px;text-shadow:0 2px 8px rgba(245,200,66,.4)}
.lu-level{font-size:clamp(36px,8vw,48px);font-weight:900;color:#8b6914;line-height:1;margin-bottom:16px}
.lu-xp-bar{width:100%;height:8px;background:rgba(139,105,20,.2);border-radius:999px;overflow:hidden;margin-bottom:8px}
.lu-xp-fill{height:100%;width:0;background:linear-gradient(90deg,#2ecc71,#16a34a);border-radius:999px}
.lu-next{font-size:12px;font-weight:800;color:rgba(58,45,21,.6);margin-bottom:18px}
.lu-btn{width:100%;padding:14px;border:none;border-radius:14px;background:linear-gradient(180deg,#3b2f10,#1a150a);color:#f5c842;font-family:Cairo,sans-serif;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 4px 0 #0a0805,0 8px 18px -4px rgba(0,0,0,.4);transition:all .15s}
.lu-btn:hover{filter:brightness(1.15);transform:translateY(-1px)}
.lu-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #0a0805}
/* PWA install banner */
#pwa-banner{position:fixed;bottom:0;left:0;right:0;z-index:9990;transform:translateY(100%);transition:transform .35s cubic-bezier(.34,1.56,.64,1);padding:12px}
#pwa-banner.pwa-visible{transform:translateY(0)}
.pwa-inner{max-width:480px;margin:0 auto;background:linear-gradient(135deg,#1e293b,#0f172a);color:#e2e8f0;border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 -4px 24px rgba(0,0,0,.3);border:1px solid #334155}
.pwa-icon{flex-shrink:0}
.pwa-text{flex:1;min-width:0}
.pwa-title{font-size:14px;font-weight:900;color:#fff}
.pwa-sub{font-size:11px;color:#94a3b8;margin-top:2px}
.pwa-btn{padding:9px 18px;border:none;border-radius:10px;background:linear-gradient(180deg,#f5c842,#c49b3c);color:#3b2f10;font-weight:900;font-size:13px;cursor:pointer;white-space:nowrap;box-shadow:0 3px 0 #8b6914;transition:all .12s;font-family:Cairo,sans-serif}
.pwa-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8b6914}
.pwa-close{background:none;border:none;color:#64748b;font-size:20px;cursor:pointer;padding:4px 8px;line-height:1}
.pwa-close:hover{color:#fff}
/* Public profile achievements row */
.pp-achievements-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0}
.pp-ach-badge{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px;background:linear-gradient(135deg,#fff4a3,#f5c842);border:2px solid rgba(184,134,11,.3);border-radius:50%;cursor:default;box-shadow:0 3px 8px -2px rgba(196,155,60,.4)}
/* Seasonal Event Banner */
.event-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:14px;border:2px solid;margin:0 clamp(8px,2vw,16px) 12px}
.event-banner-left{display:flex;align-items:center;gap:10px;min-width:0}
.event-emoji{font-size:28px;flex-shrink:0;animation:evPulse 2s ease-in-out infinite}
@keyframes evPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.event-info{min-width:0}
.event-name{font-size:14px;font-weight:900;color:#3b2f10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-bonus{font-size:11px;font-weight:800;color:#8b6914;margin-top:2px}
.event-countdown{font-size:12px;font-weight:800;color:rgba(58,45,21,.7);white-space:nowrap;flex-shrink:0}
.ds-referral{font-size:12px;color:#8b6914;background:rgba(245,200,66,.15);padding:8px 14px;border-radius:10px;margin-bottom:14px;text-align:center}
/* Gift picker overlay */
/* Shop mode badges */
.shop-mode-badge{display:block;text-align:center;font-size:10px;font-weight:900;padding:5px 10px;border-radius:8px;margin:-8px -8px 8px -8px}
.shop-mode-stages{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
.shop-mode-live{background:#e3f2fd;color:#1565c0;border:1px solid #90caf9}
.shop-mode-all{background:#fff8e1;color:#8b6914;border:1px solid #f5c842}
/* Player title badges */
.player-title-badge{display:inline-flex;align-items:center;gap:3px;border-radius:8px;font-weight:800;font-family:Cairo,sans-serif;white-space:nowrap}
/* ═══ xpp-* Public Profile (desktop-grade) ═══ */
.xpp-root{max-width:1100px;margin:0 auto;padding:24px 20px 48px;box-sizing:border-box}
.xpp-hero{
position:relative;
background:linear-gradient(135deg,#fff6d4 0%,#ffe5a0 35%,#f0c96a 70%,#c49b3c 100%);
border:1.5px solid rgba(196,155,60,0.55);
border-radius:20px;padding:16px 22px;margin-bottom:20px;
box-shadow:0 8px 24px rgba(196,155,60,.22), 0 2px 6px rgba(0,0,0,.05);
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
overflow:hidden;
}
.xpp-hero::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(circle at 15% 20%, rgba(255,255,255,.25), transparent 40%),
radial-gradient(circle at 85% 80%, rgba(0,0,0,.08), transparent 50%);
}
.xpp-avatar-wrap{position:relative;z-index:1;display:inline-block;line-height:0;border-radius:50%}
.xpp-avatar{
width:104px;height:104px;border-radius:50%;
border:4px solid #fff;background:#fff;object-fit:cover;
box-shadow:0 6px 18px rgba(0,0,0,.18), 0 0 0 2px rgba(255,255,255,.35);
display:block;
}
.xpp-avatar-fallback{display:flex;align-items:center;justify-content:center;font-size:64px;color:#c49b3c}
.xpp-identity{min-width:0;position:relative;z-index:1}
.xpp-name{
font-size:26px;font-weight:900;color:#3a2810;
text-shadow:0 1px 2px rgba(255,255,255,0.35);
display:flex;align-items:center;gap:12px;
margin-bottom:4px;line-height:1.1;
overflow-wrap:anywhere;
}
.xpp-flag{width:34px;height:24px;border-radius:4px;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.xpp-username{font-size:15px;color:rgba(255,255,255,.88);margin-bottom:14px;font-weight:600}
.xpp-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.xpp-level-pill{
display:inline-flex;align-items:center;gap:6px;
padding:7px 14px;border-radius:999px;
background:rgba(255,255,255,.95);color:#3b2f10;
font-size:13px;font-weight:900;
box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.xpp-title-pill{display:inline-flex;align-items:center}
.xpp-actions-hero{display:flex;gap:10px;flex-wrap:wrap;align-items:center;position:relative;z-index:1}
.xpp-btn{
padding:11px 20px;border:none;border-radius:12px;
font-size:14px;font-weight:800;cursor:pointer;
font-family:inherit;white-space:nowrap;
transition:transform .15s ease, box-shadow .15s ease, background .15s;
display:inline-flex;align-items:center;gap:6px;
}
.xpp-btn:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.xpp-btn:active:not([disabled]){transform:translateY(0)}
.xpp-btn[disabled]{opacity:.65;cursor:not-allowed}
.xpp-btn-primary{background:#7c4dd4;color:#fff;box-shadow:0 4px 12px rgba(124,77,212,.35)}
.xpp-btn-primary:hover:not([disabled]){background:#6a3fbf}
.xpp-btn-secondary{background:#fff;color:#3b2f10}
.xpp-btn-ghost{background:rgba(255,255,255,0.95);color:#5a3a10;border:1.5px solid rgba(139,105,20,0.35);box-shadow:0 2px 6px rgba(139,105,20,0.12);backdrop-filter:none;-webkit-backdrop-filter:none;font-weight:800}
.xpp-btn-ghost:hover:not([disabled]){background:#fff;border-color:rgba(139,105,20,0.55)}
/* Stats strip */
.xpp-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:24px}
.xpp-stat-card{
background:#fff;border-radius:16px;padding:20px 12px;text-align:center;
border:1px solid rgba(196,155,60,.18);
box-shadow:0 2px 10px rgba(0,0,0,.04);
transition:transform .15s, box-shadow .15s;
}
.xpp-stat-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.xpp-stat-icon{font-size:24px;margin-bottom:6px;line-height:1}
.xpp-stat-val{font-size:28px;font-weight:900;color:#3b2f10;line-height:1.1}
.xpp-stat-label{font-size:12px;color:#6b5b2f;margin-top:4px;font-weight:600}
/* Two-column grid */
.xpp-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;margin-bottom:20px}
.xpp-panel{
background:#fff;border-radius:16px;padding:22px;
border:1px solid rgba(196,155,60,.18);
box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.xpp-panel-title{
font-size:15px;font-weight:900;color:#3b2f10;
margin-bottom:16px;display:flex;align-items:center;gap:8px;
padding-bottom:12px;border-bottom:1px solid rgba(196,155,60,.15);
}
.xpp-panel-count{
margin-inline-start:auto;font-size:12px;font-weight:800;color:#8b6f2d;
background:rgba(196,155,60,.12);padding:3px 10px;border-radius:999px;
}
.xpp-ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.xpp-ach{
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:12px 6px;border-radius:12px;
background:linear-gradient(180deg,#fff8db 0%,#f5e3a0 100%);
border:1px solid #f5c84255;text-align:center;
transition:transform .15s;
}
.xpp-ach:hover{transform:translateY(-2px)}
.xpp-ach-icon{font-size:28px;line-height:1}
.xpp-ach-label{font-size:10px;font-weight:800;color:#5b4518;line-height:1.25}
.xpp-match{
display:flex;align-items:center;gap:10px;
padding:11px 12px;border-radius:10px;
border:1px solid rgba(196,155,60,.12);
margin-bottom:6px;font-size:13px;
background:#fff;
}
.xpp-match-win{border-inline-start:4px solid #5dcf72}
.xpp-match-loss{border-inline-start:4px solid #e25454}
.xpp-match-draw{border-inline-start:4px solid #d6b65a}
.xpp-match-result{font-size:18px;width:22px;text-align:center;flex-shrink:0}
.xpp-match-type{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.xpp-match-name{flex:1;font-weight:700;color:#3b2f10;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xpp-match-time{font-size:11px;color:#8f7b3e;flex-shrink:0}
.xpp-kv{
display:flex;align-items:center;gap:10px;
padding:11px 12px;border-radius:10px;
border:1px solid rgba(196,155,60,.12);
margin-bottom:6px;background:#fff;
}
.xpp-kv-icon{font-size:18px;width:22px;text-align:center}
.xpp-kv-label{flex:1;font-size:13px;font-weight:700;color:#3b2f10}
.xpp-kv-val{font-size:15px;font-weight:900;color:#7c4dd4}
.xpp-empty{padding:28px 16px;text-align:center;color:#9a8a55;font-size:13px;font-weight:600}
.xpp-danger-row{display:flex;gap:10px;justify-content:center;margin-top:8px}
.xpp-btn-danger{
padding:9px 18px;border-radius:10px;border:1px solid #e0b0b0;
background:#fff;color:#c03030;font-size:13px;font-weight:800;
cursor:pointer;font-family:inherit;transition:background .15s;
}
.xpp-btn-danger:hover{background:#fff0f0}
/* Responsive: stack everything on tablet/mobile */
@media (max-width: 900px){
.xpp-root{padding:16px 12px 32px}
.xpp-hero{grid-template-columns:1fr;text-align:center;padding:16px 16px;gap:12px}
.xpp-avatar{width:92px;height:92px;margin:0 auto}
.xpp-name{justify-content:center;font-size:24px}
.xpp-meta{justify-content:center}
.xpp-actions-hero{justify-content:center}
.xpp-stats{grid-template-columns:repeat(3,1fr);gap:10px}
.xpp-stat-card{padding:14px 8px}
.xpp-stat-val{font-size:22px}
.xpp-grid{grid-template-columns:1fr}
}
@media (max-width: 520px){
.xpp-stats{grid-template-columns:repeat(2,1fr)}
.xpp-name{font-size:20px}
.xpp-avatar{width:84px;height:84px}
}
/* ═══ Subscription Packages (3-tier picker) ═══ */
.pkg-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
gap:16px;padding:16px;
max-width:1100px;margin:0 auto;
}
.pkg-card{
position:relative;
background:linear-gradient(180deg,#fff 0%,#fdf3e3 100%);
border:2px solid rgba(196,155,60,.25);
border-radius:18px;
padding:24px 20px 20px;
display:flex;flex-direction:column;
box-shadow:0 4px 14px rgba(0,0,0,.05);
transition:transform .15s, box-shadow .15s;
}
.pkg-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.pkg-card-best{
border-color:var(--pkg-accent, #c49b3c);
border-width:3px;
background:linear-gradient(180deg,#fffbea 0%,#fdf3e3 100%);
box-shadow:0 8px 28px rgba(196,155,60,.15);
}
.pkg-best-badge{
position:absolute;top:-14px;left:50%;transform:translateX(-50%);
background:var(--pkg-accent, #c49b3c);color:#fff;
padding:6px 16px;border-radius:999px;
font-size:12px;font-weight:900;
box-shadow:0 4px 10px rgba(0,0,0,.2);
white-space:nowrap;
}
.pkg-emoji{font-size:48px;text-align:center;margin-bottom:8px}
.pkg-name{
font-size:20px;font-weight:900;color:#3b2f10;
text-align:center;margin-bottom:4px;
}
.pkg-tagline{
font-size:12px;color:#8b6f2d;
text-align:center;margin-bottom:16px;line-height:1.5;
min-height:36px;
}
.pkg-price{
text-align:center;font-size:36px;font-weight:900;
color:var(--pkg-accent, #c49b3c);margin-bottom:16px;
line-height:1;
}
.pkg-currency{font-size:16px;font-weight:700;margin-inline-start:4px}
.pkg-period{font-size:14px;color:#888;font-weight:600;margin-inline-start:2px}
.pkg-perks{
flex:1;
border-top:1px dashed rgba(196,155,60,.3);
padding-top:14px;margin-bottom:16px;
display:flex;flex-direction:column;gap:8px;
}
.pkg-perk{
font-size:13px;color:#3b2f10;
display:flex;align-items:center;gap:8px;
padding:4px 0;
line-height:1.4;
}
.pkg-cta{
padding:12px 20px;border:none;border-radius:12px;
background:var(--pkg-accent, #c49b3c);color:#fff;
font-size:15px;font-weight:900;cursor:pointer;
font-family:inherit;
transition:transform .1s, filter .15s;
}
.pkg-cta:hover{filter:brightness(1.08)}
.pkg-cta:active{transform:translateY(1px)}
.pkg-footer-note{
text-align:center;margin-top:12px;
font-size:12px;color:#999;
}
@media(max-width:640px){
.pkg-grid{grid-template-columns:1fr;gap:14px;padding:12px}
.pkg-card{padding:20px 16px 16px}
.pkg-emoji{font-size:40px}
.pkg-price{font-size:30px}
}
/* ═══ Daily limit badge (calibration screen) ═══ */
.lcal-limit-badge{
margin-top:12px;
padding:10px 18px;
border-radius:999px;
font-size:13px;
font-weight:700;
display:inline-flex;
align-items:center;
gap:8px;
transition:transform .15s;
}
.lcal-limit-badge:empty{display:none}
.lcal-limit-free{
background:linear-gradient(90deg,#fef3c7 0%,#fde68a 100%);
color:#92400e;
border:1px solid #f59e0b33;
box-shadow:0 2px 8px rgba(245,158,11,.15);
}
.lcal-limit-sub{
background:linear-gradient(90deg,#d1fae5 0%,#a7f3d0 100%);
color:#065f46;
border:1px solid #10b98133;
box-shadow:0 2px 8px rgba(16,185,129,.15);
}
.lcal-limit-badge strong{font-weight:900;font-size:14px}
/* ═══ Daily Limit Reached — Professional Conversion Modal ═══ */
.dlm-overlay{
position:fixed;inset:0;z-index:9999;
background:rgba(0,0,0,.72);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
display:flex;align-items:center;justify-content:center;
padding:16px;
opacity:0;
transition:opacity .25s ease;
}
.dlm-overlay.dlm-visible{opacity:1}
.dlm-card{
background:linear-gradient(180deg,#fff 0%,#fdf3e3 100%);
border-radius:24px;
padding:32px 28px 24px;
max-width:440px;width:100%;
text-align:center;
position:relative;
box-shadow:0 24px 80px rgba(0,0,0,.35), 0 0 0 3px rgba(245,200,66,.25);
transform:scale(.9) translateY(20px);
transition:transform .3s cubic-bezier(.34,1.56,.64,1);
animation:dlmEnter .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes dlmEnter{
from{transform:scale(.85) translateY(30px);opacity:0}
to {transform:scale(1) translateY(0);opacity:1}
}
.dlm-close{
position:absolute;top:14px;inset-inline-end:14px;
width:36px;height:36px;border-radius:50%;
background:rgba(0,0,0,.08);border:none;
font-size:16px;color:#6b5b2f;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .15s,transform .15s;
}
.dlm-close:hover{background:rgba(0,0,0,.15);transform:rotate(90deg)}
.dlm-icon-wrap{
width:90px;height:90px;margin:0 auto 12px;
border-radius:50%;
background:linear-gradient(135deg,#f5c842,#e5a82c);
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 28px rgba(245,200,66,.4);
animation:dlmPulse 2.5s ease-in-out infinite;
}
@keyframes dlmPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.06)}
}
.dlm-icon{font-size:48px;line-height:1}
.dlm-title{
font-size:26px;font-weight:900;
color:#3b2f10;margin:8px 0 6px;
letter-spacing:-.5px;
}
.dlm-subtitle{
font-size:14px;color:#6b5b2f;
margin:0 0 16px;line-height:1.6;
padding:0 4px;
}
.dlm-subtitle strong{color:#c49b3c;font-weight:900}
.dlm-timer-wrap{
background:linear-gradient(180deg,#3b2f10,#1a1609);
color:#f5c842;border-radius:14px;
padding:14px 16px;margin:8px 0 18px;
box-shadow:inset 0 2px 6px rgba(0,0,0,.3);
}
.dlm-timer-label{
font-size:11px;font-weight:700;
opacity:.75;margin-bottom:6px;
letter-spacing:.5px;text-transform:uppercase;
}
.dlm-timer{
font-size:30px;font-weight:900;
font-family:'Courier New',monospace;
letter-spacing:2px;
direction:ltr;
font-variant-numeric:tabular-nums;
}
.dlm-benefits{
display:grid;grid-template-columns:1fr 1fr;gap:8px;
margin-bottom:18px;
}
.dlm-benefit{
background:rgba(245,200,66,.12);
border:1px solid rgba(245,200,66,.3);
border-radius:10px;
padding:9px 10px;
font-size:12px;font-weight:700;
color:#5b4518;
text-align:center;
}
.dlm-cta{
width:100%;
padding:16px 20px;
border:none;border-radius:14px;
background:linear-gradient(135deg,#f5c842,#c49b3c);
color:#fff;
font-size:16px;font-weight:900;
cursor:pointer;font-family:inherit;
box-shadow:0 8px 24px rgba(196,155,60,.4);
transition:transform .15s,box-shadow .15s;
margin-bottom:8px;
}
.dlm-cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(196,155,60,.5)}
.dlm-cta:active{transform:translateY(0)}
.dlm-later{
width:100%;
padding:10px;
border:none;background:none;
color:#999;font-size:13px;font-weight:600;
cursor:pointer;font-family:inherit;
transition:color .15s;
}
.dlm-later:hover{color:#6b5b2f}
@media (max-width:480px){
.dlm-card{padding:24px 20px 18px;border-radius:20px}
.dlm-icon-wrap{width:72px;height:72px}
.dlm-icon{font-size:38px}
.dlm-title{font-size:22px}
.dlm-timer{font-size:26px}
.dlm-benefits{grid-template-columns:1fr;gap:6px}
.dlm-cta{font-size:14px;padding:14px 16px}
}
/* ═══ Welcome Bonus Modal (first signup) ═══ */
.wbm-overlay{
position:fixed;inset:0;z-index:10000;
background:linear-gradient(135deg, rgba(245,200,66,.25), rgba(196,155,60,.35));
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
display:flex;align-items:center;justify-content:center;
padding:16px;
opacity:0;
transition:opacity .3s ease;
}
.wbm-overlay.wbm-visible{opacity:1}
.wbm-card{
background:linear-gradient(180deg,#fff 0%,#fffbea 100%);
border:3px solid #f5c842;
border-radius:28px;
padding:32px 28px 24px;
max-width:420px;width:100%;
text-align:center;
position:relative;
overflow:hidden;
box-shadow:0 30px 80px rgba(196,155,60,.5), 0 0 0 6px rgba(245,200,66,.2);
animation:wbmEnter .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wbmEnter{
from{transform:scale(.7) rotate(-3deg);opacity:0}
to {transform:scale(1) rotate(0);opacity:1}
}
.wbm-confetti{
font-size:18px;
letter-spacing:8px;
margin-bottom:8px;
animation:wbmFloat 2.5s ease-in-out infinite;
}
@keyframes wbmFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-6px)}
}
.wbm-icon-wrap{
width:100px;height:100px;margin:0 auto 10px;
border-radius:50%;
background:linear-gradient(135deg,#f5c842 0%,#c49b3c 100%);
display:flex;align-items:center;justify-content:center;
box-shadow:0 12px 32px rgba(245,200,66,.5);
animation:wbmPulse 1.8s ease-in-out infinite;
position:relative;
}
.wbm-icon-wrap::before{
content:'';position:absolute;inset:-8px;
border-radius:50%;
background:radial-gradient(circle, rgba(245,200,66,.4), transparent 70%);
animation:wbmGlow 1.8s ease-in-out infinite;
}
@keyframes wbmPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.08)}
}
@keyframes wbmGlow{
0%,100%{opacity:.4;transform:scale(1)}
50%{opacity:.8;transform:scale(1.2)}
}
.wbm-icon{font-size:56px;line-height:1;position:relative;z-index:1}
.wbm-title{
font-size:24px;font-weight:900;
color:#3b2f10;
margin:6px 0 4px;
letter-spacing:-.5px;
}
.wbm-subtitle{
font-size:14px;color:#8b6f2d;
margin:0 0 18px;
font-weight:600;
}
.wbm-reward{
background:linear-gradient(135deg,#3b2f10,#1a1609);
color:#f5c842;
border-radius:18px;
padding:22px 16px;
margin:0 0 16px;
display:flex;align-items:center;justify-content:center;gap:14px;
box-shadow:inset 0 2px 6px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.wbm-reward::before{
content:'';position:absolute;inset:-50%;
background:conic-gradient(transparent, rgba(245,200,66,.15), transparent);
animation:wbmShine 3s linear infinite;
}
@keyframes wbmShine{
to{transform:rotate(360deg)}
}
.wbm-coin-burst{
font-size:48px;
animation:wbmBounce 1s ease-in-out infinite;
position:relative;z-index:1;
}
@keyframes wbmBounce{
0%,100%{transform:translateY(0) rotate(-5deg)}
50%{transform:translateY(-5px) rotate(5deg)}
}
.wbm-amount{
font-size:56px;font-weight:900;
line-height:1;
font-variant-numeric:tabular-nums;
position:relative;z-index:1;
text-shadow:0 2px 4px rgba(0,0,0,.3);
}
.wbm-currency{
font-size:16px;font-weight:700;
opacity:.85;
align-self:flex-end;
padding-bottom:6px;
position:relative;z-index:1;
}
.wbm-desc{
font-size:14px;color:#5b4518;
margin:0 0 18px;
line-height:1.6;
padding:0 8px;
}
.wbm-desc strong{color:#c49b3c;font-weight:900}
.wbm-cta{
width:100%;
padding:16px 20px;
border:none;border-radius:14px;
background:linear-gradient(135deg,#f5c842,#c49b3c);
color:#fff;
font-size:17px;font-weight:900;
cursor:pointer;font-family:inherit;
box-shadow:0 10px 28px rgba(196,155,60,.5);
transition:transform .15s, box-shadow .15s;
}
.wbm-cta:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(196,155,60,.6)}
.wbm-cta:active{transform:translateY(0)}
@media (max-width:480px){
.wbm-card{padding:26px 20px 20px;border-radius:24px}
.wbm-title{font-size:20px}
.wbm-amount{font-size:42px}
.wbm-coin-burst{font-size:36px}
.wbm-icon-wrap{width:84px;height:84px}
.wbm-icon{font-size:44px}
}
/* ═══ Unlimited perk icon — big, readable ♾️ ═══ */
.perk-infinity{
display:inline-block;
font-size:1.4em;
line-height:1;
vertical-align:-0.15em;
margin:0 2px;
filter:drop-shadow(0 1px 2px rgba(196,155,60,.4));
}
/* ═══ Package Cards V3 — Gaming 3-column layout ═══ */
.pkg3-wrap{
max-width:1080px;
margin:0 auto;
padding:20px 16px 28px;
}
.pkg3-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
align-items:stretch;
}
.pkg3-card{
position:relative;
background:#fdf3e3;
border-radius:20px;
padding:0;
overflow:visible;
display:flex;
flex-direction:column;
box-shadow:
0 4px 0 rgba(139,107,31,.3),
0 10px 28px rgba(0,0,0,.12);
transition:transform .2s;
}
.pkg3-card:hover{transform:translateY(-3px)}
/* ── Ribbon on middle (recommended) card ── */
.pkg3-ribbon{
position:absolute;
top:-14px;
left:50%;
transform:translateX(-50%);
background:linear-gradient(180deg,#2c4e6e,#1e3a5a);
color:#fff;
font-size:12px;font-weight:900;
padding:6px 18px;
border-radius:999px;
box-shadow:0 4px 10px rgba(0,0,0,.25);
z-index:2;
white-space:nowrap;
letter-spacing:.5px;
}
/* ── Header (name + price) ── */
.pkg3-header{
padding:18px 14px 14px;
border-radius:20px 20px 0 0;
text-align:center;
position:relative;
overflow:hidden;
}
.pkg3-header::before{
content:'';
position:absolute;inset:0;
background:radial-gradient(circle at top, rgba(255,255,255,.35), transparent 70%);
pointer-events:none;
}
.pkg3-name{
font-size:19px;
font-weight:900;
color:#fff;
text-shadow:0 2px 4px rgba(0,0,0,.35), 0 1px 0 rgba(0,0,0,.2);
margin-bottom:4px;
position:relative;
line-height:1.15;
}
.pkg3-price{
font-size:16px;
font-weight:900;
color:#fff;
text-shadow:0 1px 3px rgba(0,0,0,.3);
position:relative;
letter-spacing:.5px;
}
/* ── Tier-specific header colours ── */
.pkg3-starter .pkg3-header{
background:linear-gradient(180deg,#d4a47a 0%,#a07647 100%);
}
.pkg3-plus .pkg3-header{
background:linear-gradient(180deg,#b0c4d4 0%,#7a95ac 100%);
}
.pkg3-legendary .pkg3-header{
background:linear-gradient(180deg,#ffd84a 0%,#e5a82c 100%);
}
/* subtle tier tint on card body */
.pkg3-starter { background:linear-gradient(180deg,#fdf3e3 0%,#f3dfbf 100%); }
.pkg3-plus { background:linear-gradient(180deg,#f5f8fc 0%,#dce8f2 100%); }
.pkg3-legendary { background:linear-gradient(180deg,#fff8e0 0%,#ffe9a0 100%); }
/* thicker colored border */
.pkg3-starter { border:2px solid #a07647; }
.pkg3-plus { border:2px solid #7a95ac; }
.pkg3-legendary { border:2px solid #e5a82c; }
/* ── Body with perk list ── */
.pkg3-body{
flex:1;
padding:16px 14px 14px;
display:flex;
flex-direction:column;
gap:9px;
}
.pkg3-perk{
display:flex;
align-items:center;
gap:12px;
font-size:15px;
color:#3b2f10;
font-weight:800;
line-height:1.4;
}
.pkg3-perk-text{
flex:1;
text-align:start;
font-size:15px;
}
.pkg3-perk-icon{
font-size:20px;
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.85);
border-radius:9px;
box-shadow:0 1px 3px rgba(0,0,0,.1);
flex-shrink:0;
}
/* Slightly smaller between 760-980 screens */
@media (min-width:761px) and (max-width:980px){
.pkg3-perk{font-size:13px;gap:10px}
.pkg3-perk-text{font-size:13px}
.pkg3-perk-icon{width:30px;height:30px;font-size:18px}
}
/* ── Gaming-style 3D CTA button ── */
.pkg3-cta{
display:block;
margin:8px 12px 14px;
padding:13px 16px;
border:none;
border-radius:14px;
background:linear-gradient(180deg,#f5b842 0%,#e8a02c 100%);
color:#fff;
font-size:15px;
font-weight:900;
font-family:inherit;
cursor:pointer;
text-shadow:0 1px 2px rgba(0,0,0,.3);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 -2px 0 rgba(139,107,31,.4),
0 4px 0 #8b6b1f,
0 6px 12px rgba(0,0,0,.2);
transition:transform .1s, box-shadow .1s;
letter-spacing:.5px;
}
.pkg3-cta:hover{
filter:brightness(1.06);
}
.pkg3-cta:active{
transform:translateY(3px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.4),
inset 0 -1px 0 rgba(139,107,31,.4),
0 1px 0 #8b6b1f,
0 2px 4px rgba(0,0,0,.15);
}
/* ── Footer note ── */
.pkg3-foot{
text-align:center;
padding:14px 8px 4px;
color:#8b6f2d;
font-size:13px;
font-weight:600;
}
/* ── Responsive: stack on small screens ── */
@media (max-width:760px){
.pkg3-grid{
grid-template-columns:1fr;
gap:20px;
}
.pkg3-ribbon{top:-14px}
}
@media (min-width:761px) and (max-width:980px){
.pkg3-name{font-size:17px}
.pkg3-price{font-size:15px}
}
/* ═══ Avatar Cosmetic Frames ═══ */
.avatar-gold-frame{
position:relative;
isolation:isolate;
}
/* Legacy gold ::before removed — PNG overlay replaces it */
@keyframes avatarRingSpin{
to{transform:rotate(360deg)}
}
.avatar-fire-frame{
position:relative;
isolation:isolate;
}
/* Legacy fire ::before removed — dual-layer rules defined below */
/* Legacy fire ::after (inset shadow) removed */
@keyframes avatarFireSpin{
to{transform:rotate(360deg)}
}
@keyframes avatarFireFlicker{
from{opacity:.7}
to{opacity:1}
}
/* ═══ Confetti burst (cosmetic on win) ═══ */
.confetti-burst{
position:fixed;
top:0;left:0;right:0;bottom:0;
pointer-events:none;
z-index:9999;
overflow:hidden;
}
.confetti-piece{
position:absolute;
top:-20px;
width:10px;
height:14px;
background:#f5c842;
border-radius:2px;
animation:confettiFall linear forwards;
will-change:transform;
opacity:.9;
}
@keyframes confettiFall{
to{
transform:translateY(105vh) rotate(720deg);
opacity:0;
}
}
/* Box-shadow ring for ![]()
avatars (can't use ::before on img) */
img.avatar-gold-frame{
box-shadow:0 0 0 3px #ffd700, 0 0 14px rgba(255,215,0,.6);
border-radius:50%;
}
img.avatar-fire-frame{
box-shadow:0 0 0 3px #ff4500, 0 0 18px rgba(255,69,0,.7), 0 0 28px rgba(255,165,0,.4);
border-radius:50%;
animation:avatarFireGlow 1.2s ease-in-out infinite alternate;
}
@keyframes avatarFireGlow{
from{box-shadow:0 0 0 3px #ff4500, 0 0 16px rgba(255,69,0,.55), 0 0 26px rgba(255,165,0,.35)}
to {box-shadow:0 0 0 3px #ff6a1a, 0 0 22px rgba(255,69,0,.85), 0 0 34px rgba(255,165,0,.55)}
}
/* legacy lb-avatar gold box-shadow removed */
/* legacy lb-avatar fire box-shadow removed */
/* Legacy inset:-3px removed — unified -8% for consistency */
/* ═══ Avatar frames — box-shadow variants (work with overflow:hidden) ═══
These override the earlier ::before approach for containers that clip
their overflow. box-shadow extends outside the element's box without
being clipped by overflow:hidden on the element itself. */
/* ═══ PNG overlay frames (replaces box-shadow approach) ═══
Lets ornate illustrated frames show around any avatar surface.
Works with circular avatars (inner img has its own border-radius:50%). */
/* Common base: overflow:visible + positioning so ::after can escape.
NOTE: ::after does NOT work on ![]()
. For img elements we use a
wrapping that carries the frame class. */
.dpb-avatar-wrap.avatar-gold-frame,
.frame-preview-wrap.avatar-gold-frame,
.profile-photo-wrap.avatar-gold-frame,
.pp-avatar.avatar-gold-frame,
.xpp-avatar.avatar-gold-frame,
.xpp-avatar-wrap.avatar-gold-frame,
.friend-avatar-wrap.avatar-gold-frame,
#profile-avatar.avatar-gold-frame,
#pp-photo-avatar.avatar-gold-frame,
.friend-avatar-fb.avatar-gold-frame,
.lb-avatar.avatar-gold-frame,
.lm-cam-avatar.avatar-gold-frame,
.lbp-avatar.avatar-gold-frame,
.lbp-simple-avatar.avatar-gold-frame,
.lbp-own-avatar-wrap.avatar-gold-frame,
.lb-champion-avatar.avatar-gold-frame,
.lb-lw-avatar.avatar-gold-frame,
.hof-avatar.avatar-gold-frame,
.live-prematch-avatar.avatar-gold-frame,
.mmq-avatar.avatar-gold-frame,
.live-flow-avatar.avatar-gold-frame,
.dpb-avatar-wrap.avatar-fire-frame,
.frame-preview-wrap.avatar-fire-frame,
.profile-photo-wrap.avatar-fire-frame,
.pp-avatar.avatar-fire-frame,
.xpp-avatar.avatar-fire-frame,
.xpp-avatar-wrap.avatar-fire-frame,
.friend-avatar-wrap.avatar-fire-frame,
#profile-avatar.avatar-fire-frame,
#pp-photo-avatar.avatar-fire-frame,
.friend-avatar-fb.avatar-fire-frame,
.lb-avatar.avatar-fire-frame,
.lm-cam-avatar.avatar-fire-frame,
.lbp-avatar.avatar-fire-frame,
.lbp-simple-avatar.avatar-fire-frame,
.lbp-own-avatar-wrap.avatar-fire-frame,
.lb-champion-avatar.avatar-fire-frame,
.lb-lw-avatar.avatar-fire-frame,
.hof-avatar.avatar-fire-frame,
.live-prematch-avatar.avatar-fire-frame,
.mmq-avatar.avatar-fire-frame,
.live-flow-avatar.avatar-fire-frame,
.fcs-friend-photo-wrap.avatar-fire-frame{
overflow:visible !important;
position:relative;
box-shadow:none !important;
animation:none !important;
}
/* Gold frame — PNG overlay extending 15% outside */
.dpb-avatar-wrap.avatar-gold-frame::after,
.frame-preview-wrap.avatar-gold-frame::after,
.profile-photo-wrap.avatar-gold-frame::after,
.pp-avatar.avatar-gold-frame::after,
.xpp-avatar.avatar-gold-frame::after,
.xpp-avatar-wrap.avatar-gold-frame::after,
.friend-avatar-wrap.avatar-gold-frame::after,
#profile-avatar.avatar-gold-frame::after,
#pp-photo-avatar.avatar-gold-frame::after,
.friend-avatar-fb.avatar-gold-frame::after,
.lb-avatar.avatar-gold-frame::after,
.lm-cam-avatar.avatar-gold-frame::after,
.lbp-avatar.avatar-gold-frame::after,
.lbp-simple-avatar.avatar-gold-frame::after,
.lbp-own-avatar-wrap.avatar-gold-frame::after,
.lb-champion-avatar.avatar-gold-frame::after,
.lb-lw-avatar.avatar-gold-frame::after,
.hof-avatar.avatar-gold-frame::after,
.live-prematch-avatar.avatar-gold-frame::after,
.mmq-avatar.avatar-gold-frame::after,
.live-flow-avatar.avatar-gold-frame::after,
.fcs-friend-photo-wrap.avatar-gold-frame::after{
content:'';
position:absolute;
inset:-8%;
background-image:url('assets/frame_gold_v4.webp');
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
z-index:3;
/* Ensure the PNG appears above siblings but the avatar img is
still visible through its transparent center. */
}
/* Fire frame — same approach, different asset */
.dpb-avatar-wrap.avatar-fire-frame::after,
.frame-preview-wrap.avatar-fire-frame::after,
.profile-photo-wrap.avatar-fire-frame::after,
.pp-avatar.avatar-fire-frame::after,
.xpp-avatar.avatar-fire-frame::after,
.xpp-avatar-wrap.avatar-fire-frame::after,
.friend-avatar-wrap.avatar-fire-frame::after,
#profile-avatar.avatar-fire-frame::after,
#pp-photo-avatar.avatar-fire-frame::after,
.friend-avatar-fb.avatar-fire-frame::after,
.lb-avatar.avatar-fire-frame::after,
.lm-cam-avatar.avatar-fire-frame::after,
.fcs-friend-photo-wrap.avatar-fire-frame::after{
content:'';
position:absolute;
inset:-8%;
background-image:url('assets/frame_fire_v4.webp');
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
z-index:3;
}
/* Neutralise the ::before that does not render on clipped elements */
.dpb-avatar-wrap.avatar-gold-frame::before,
.dpb-avatar-wrap.avatar-fire-frame::before,
.pp-avatar.avatar-gold-frame::before,
.pp-avatar.avatar-fire-frame::before,
.xpp-avatar.avatar-gold-frame::before,
.xpp-avatar.avatar-fire-frame::before,
.lm-cam-avatar.avatar-gold-frame::before,
.lm-cam-avatar.avatar-fire-frame::before{
display:none !important;
}
/* ══ Subscription UX v1 — launch polish (2026-04-17) ══ */
.pkg3-current-banner{
display:flex;align-items:center;gap:14px;
background:linear-gradient(180deg,#fff7da 0%,#f5c842 100%);
border:1.5px solid rgba(196,155,60,.55);
border-radius:18px;padding:14px 18px;margin:0 auto 18px;
max-width:960px;box-shadow:0 6px 18px -6px rgba(139,105,20,.35);
}
.pcb-icon{font-size:34px;flex:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.pcb-body{flex:1;min-width:0;text-align:start}
.pcb-title{font-size:14.5px;font-weight:800;color:#3a2d15}
.pcb-title b{color:#8b5c00}
.pcb-meta{font-size:12.5px;color:rgba(58,45,21,.75);margin-top:3px;font-weight:700}
.pcb-actions{display:flex;align-items:center;gap:8px;flex:none}
.pcb-btn{
padding:8px 14px;border-radius:999px;border:none;cursor:pointer;
background:#3a2d15;color:#fff4a3;font-family:inherit;font-weight:900;font-size:12.5px;
box-shadow:0 3px 8px -2px rgba(0,0,0,.3);
}
.pcb-btn-cancel{background:rgba(58,45,21,.12);color:#3a2d15}
.pcb-btn:hover{opacity:.92}
.pcb-chip{
font-size:11.5px;font-weight:800;color:#8b5c00;
background:rgba(255,255,255,.55);padding:5px 10px;border-radius:999px;
}
/* Current tier card highlight */
.pkg3-card.is-current{
outline:3px solid #16a34a;outline-offset:-1px;
box-shadow:0 6px 22px -6px rgba(22,163,74,.45), 0 4px 12px -4px rgba(0,0,0,.15);
}
.pkg3-ribbon-current{
background:linear-gradient(180deg,#22c55e,#16a34a) !important;
color:#fff !important;
}
.pkg3-cta-disabled{
background:linear-gradient(180deg,#e5e5e5,#bdbdbd) !important;
color:#5a5a5a !important;
cursor:not-allowed !important;
box-shadow:none !important;
opacity:0.95;
}
.pkg3-cta-upgrade{
background:linear-gradient(180deg,#60a5fa,#2563eb) !important;
color:#fff !important;
}
/* Profile — subscription strip */
.pp-sub-card{
display:flex;align-items:center;gap:12px;
background:linear-gradient(180deg,#fff4a3 0%,#f5c842 100%);
border:1.5px solid rgba(196,155,60,.55);
border-radius:14px;padding:12px 14px;margin:10px 4px 6px;
box-shadow:0 4px 14px -6px rgba(139,105,20,.35);
}
.pp-sub-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.pp-sub-emoji{font-size:28px;flex:none}
.pp-sub-text{flex:1;min-width:0;text-align:start}
.pp-sub-name{font-size:14px;font-weight:900;color:#3a2d15}
.pp-sub-meta{font-size:12px;color:rgba(58,45,21,.75);margin-top:2px;font-weight:700}
.pp-sub-btn{
flex:none;padding:8px 14px;border-radius:999px;border:none;cursor:pointer;
background:#3a2d15;color:#fff4a3;font-family:inherit;font-weight:900;font-size:12.5px;
box-shadow:0 3px 8px -2px rgba(0,0,0,.3);
}
.pp-sub-btn:hover{opacity:.92}
@media (max-width:520px){
.pkg3-current-banner{flex-wrap:wrap;gap:10px}
.pcb-body{flex:1 1 100%;order:2}
.pcb-icon{order:1}
.pcb-actions{order:3;flex:1 1 100%;justify-content:flex-end}
}
/* Wrappers for ![]()
-based avatars (img can't host ::after).
These spans sit flush around the image and carry the frame class. */
.friend-avatar-wrap,
.xpp-avatar-wrap{
display:inline-block;
position:relative;
border-radius:50%;
line-height:0; /* prevent baseline gap under inline-block */
}
.friend-avatar-wrap > img,
.xpp-avatar-wrap > img{
display:block;
border-radius:50%;
}
/* ═══ Fire frame — dual-layer counter-rotation (2026-04-17) ═══
Two PNG layers rotate in opposite directions:
· ::after (base): slow CW 12s + warm drop-shadow
· ::before (overlay): fast CCW 6s + screen blend + 60% opacity
Gold frame stays static — no animation for the laurel wreath. */
@keyframes _frameSpinCW { from { transform: scale(var(--frame-scale, 1.35)) rotate(0deg); } to { transform: scale(var(--frame-scale, 1.35)) rotate(360deg); } }
@keyframes _frameSpinCCW { from { transform: scale(var(--frame-scale, 1.35)) rotate(0deg); } to { transform: scale(var(--frame-scale, 1.35)) rotate(-360deg); } }
/* Primary layer (::after) — already defined above, add animation + glow */
.dpb-avatar-wrap.avatar-fire-frame::after,
.frame-preview-wrap.avatar-fire-frame::after,
.profile-photo-wrap.avatar-fire-frame::after,
.pp-avatar.avatar-fire-frame::after,
.xpp-avatar.avatar-fire-frame::after,
.xpp-avatar-wrap.avatar-fire-frame::after,
.friend-avatar-wrap.avatar-fire-frame::after,
#profile-avatar.avatar-fire-frame::after,
#pp-photo-avatar.avatar-fire-frame::after,
.friend-avatar-fb.avatar-fire-frame::after,
.lb-avatar.avatar-fire-frame::after,
.lm-cam-avatar.avatar-fire-frame::after,
.lbp-avatar.avatar-fire-frame::after,
.lbp-simple-avatar.avatar-fire-frame::after,
.lbp-own-avatar-wrap.avatar-fire-frame::after,
.lb-champion-avatar.avatar-fire-frame::after,
.lb-lw-avatar.avatar-fire-frame::after,
.hof-avatar.avatar-fire-frame::after,
.live-prematch-avatar.avatar-fire-frame::after,
.mmq-avatar.avatar-fire-frame::after,
.live-flow-avatar.avatar-fire-frame::after,
.fcs-friend-photo-wrap.avatar-fire-frame::after{
animation: _frameSpinCW 12s linear infinite !important;
filter: drop-shadow(0 0 3px rgba(255,100,0,0.65));
transform-origin: center;
will-change: transform;
}
/* Secondary layer (::before) — adds the flicker via reverse spin + screen blend */
.dpb-avatar-wrap.avatar-fire-frame::before,
.frame-preview-wrap.avatar-fire-frame::before,
.profile-photo-wrap.avatar-fire-frame::before,
.pp-avatar.avatar-fire-frame::before,
.xpp-avatar.avatar-fire-frame::before,
.xpp-avatar-wrap.avatar-fire-frame::before,
.friend-avatar-wrap.avatar-fire-frame::before,
#profile-avatar.avatar-fire-frame::before,
#pp-photo-avatar.avatar-fire-frame::before,
.friend-avatar-fb.avatar-fire-frame::before,
.lb-avatar.avatar-fire-frame::before,
.lm-cam-avatar.avatar-fire-frame::before,
.lbp-avatar.avatar-fire-frame::before,
.lbp-simple-avatar.avatar-fire-frame::before,
.lbp-own-avatar-wrap.avatar-fire-frame::before,
.lb-champion-avatar.avatar-fire-frame::before,
.lb-lw-avatar.avatar-fire-frame::before,
.hof-avatar.avatar-fire-frame::before,
.live-prematch-avatar.avatar-fire-frame::before,
.mmq-avatar.avatar-fire-frame::before,
.live-flow-avatar.avatar-fire-frame::before,
.fcs-friend-photo-wrap.avatar-fire-frame::before{
content:'';
position:absolute;
inset:-8%;
background-image:url('assets/frame_fire_v4.webp');
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
z-index:4; /* above ::after (z-index 3) */
opacity:0.6;
mix-blend-mode:screen;
animation: _frameSpinCCW 6s linear infinite !important;
transform-origin: center;
will-change: transform;
}
/* Fire frame — unified appearance. Drop-shadow applied everywhere for
visual consistency with the profile-page rendering the user sees. */
/* Accessibility + low-power devices — disable the animation entirely. */
@media (prefers-reduced-motion: reduce){
.avatar-fire-frame::before,
.avatar-fire-frame::after{
animation: none !important;
}
}
/* ═══ Shop card — frame preview (2026-04-17) ═══
Renders the actual frame around a sample avatar so the card shows
exactly what a player will see when the frame is applied. */
.card__image-frame{
display:flex;align-items:center;justify-content:center;
padding:18px 0;
}
.frame-preview-wrap{
width:150px;height:80px;
border-radius:50%;
background:linear-gradient(135deg,#fff4e6,#f5c842);
display:flex;align-items:center;justify-content:center;
position:relative;
box-shadow:0 4px 14px rgba(139,105,20,.2);
}
.frame-preview-avatar{
width:100%;height:100%;
border-radius:50%;
object-fit:cover;
display:block;
}
.frame-preview-emoji{
font-size:44px;line-height:1;
}
/* Subscription card — real coin icon inside perk rows */
.pkg3-coin-icon{
width:22px;height:22px;
display:inline-block;
vertical-align:middle;
object-fit:contain;
filter:drop-shadow(0 1px 2px rgba(139,105,20,.25));
}
/* ═══ Unified coin icon — coinsGame.webp replaces 🪙 emoji (2026-04-17) ═══ */
.coin-ico-inline{width:22px;height:22px;display:inline-block;vertical-align:middle;object-fit:contain}
.coin-ico-sm{width:50px;height:50px;display:inline-block;vertical-align:middle;object-fit:contain}
.coin-ico-price{width:50px;height:50px;display:inline-block;vertical-align:middle;object-fit:contain;margin-inline-start:6px}
.coin-ico-stat{width:40px;height:40px;display:inline-block;vertical-align:middle;object-fit:contain}
.coin-ico-setting{width:24px;height:24px;display:inline-block;vertical-align:middle;object-fit:contain}
.coin-ico-burst{width:72px;height:72px;display:inline-block;vertical-align:middle;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(218,165,32,.4))}
/* Gold frame — breathing glow (Technique 4: pulse scale + drop-shadow) */
@keyframes _goldBreathe {
0%, 100% {
filter: drop-shadow(0 0 2px rgba(198,134,66,.5)) drop-shadow(0 0 4px rgba(139,90,43,.3));
transform: scale(1.35);
}
50% {
filter: drop-shadow(0 0 4px rgba(232,176,122,.9)) drop-shadow(0 0 8px rgba(198,134,66,.5)) brightness(1.15);
transform: scale(1.39);
}
}
.dpb-avatar-wrap.avatar-gold-frame::after,
.frame-preview-wrap.avatar-gold-frame::after,
.profile-photo-wrap.avatar-gold-frame::after,
.pp-avatar.avatar-gold-frame::after,
.xpp-avatar.avatar-gold-frame::after,
.xpp-avatar-wrap.avatar-gold-frame::after,
.friend-avatar-wrap.avatar-gold-frame::after,
#profile-avatar.avatar-gold-frame::after,
#pp-photo-avatar.avatar-gold-frame::after,
.friend-avatar-fb.avatar-gold-frame::after,
.lb-avatar.avatar-gold-frame::after,
.lm-cam-avatar.avatar-gold-frame::after,
.lbp-avatar.avatar-gold-frame::after,
.lbp-simple-avatar.avatar-gold-frame::after,
.lbp-own-avatar-wrap.avatar-gold-frame::after,
.lb-champion-avatar.avatar-gold-frame::after,
.lb-lw-avatar.avatar-gold-frame::after,
.hof-avatar.avatar-gold-frame::after,
.live-prematch-avatar.avatar-gold-frame::after,
.mmq-avatar.avatar-gold-frame::after,
.live-flow-avatar.avatar-gold-frame::after,
.fcs-friend-photo-wrap.avatar-gold-frame::after{
animation: _goldBreathe 3s ease-in-out infinite !important;
transform-origin: center;
will-change: transform, filter;
}
/* Reduced motion — disable gold breathing */
@media (prefers-reduced-motion: reduce){
.avatar-gold-frame::after{ animation: none !important; }
}
/* Shop: active-frame button = "tap to remove frame" — distinct,
clickable (warm amber/green) so users know it's interactive. */
.card__button.active-frame{
background: linear-gradient(180deg, #d4e7c4, #a8c48a) !important;
color: #2b4d1a !important;
border: 1.5px solid #8ba76a !important;
cursor: pointer !important;
opacity: 1 !important;
pointer-events: auto !important;
box-shadow: 0 2px 6px rgba(70,120,40,.25) !important;
font-size: 13px !important;
}
.card__button.active-frame:hover{
background: linear-gradient(180deg, #c4dcb4, #96b678) !important;
transform: translateY(-1px);
}
.card__button.active-frame:active{
transform: translateY(1px);
}
/* Small-avatar wrappers need explicit sizing so the ::after anchors
correctly. Apply to every new wrapper introduced for frames. */
.lbp-own-avatar-wrap,
.lb-champion-avatar,
.lb-lw-avatar,
.hof-avatar,
.lbp-avatar,
.lbp-simple-avatar,
.live-prematch-avatar,
.mmq-avatar,
.live-flow-avatar{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
vertical-align:middle;
}
/* When a frame is active, give extra overhang so the PNG shows
clearly around the avatar — avoids the "under the image" look. */
.lbp-own-avatar-wrap.avatar-gold-frame::after,
.lbp-own-avatar-wrap.avatar-fire-frame::after,
.lbp-own-avatar-wrap.avatar-fire-frame::before,
.lbp-avatar.avatar-gold-frame::after,
.lbp-avatar.avatar-fire-frame::after,
.lbp-avatar.avatar-fire-frame::before,
.lbp-simple-avatar.avatar-gold-frame::after,
.lbp-simple-avatar.avatar-fire-frame::after,
.lbp-simple-avatar.avatar-fire-frame::before,
.lb-champion-avatar.avatar-gold-frame::after,
.lb-champion-avatar.avatar-fire-frame::after,
.lb-champion-avatar.avatar-fire-frame::before,
.lb-lw-avatar.avatar-gold-frame::after,
.lb-lw-avatar.avatar-fire-frame::after,
.lb-lw-avatar.avatar-fire-frame::before,
.hof-avatar.avatar-gold-frame::after,
.hof-avatar.avatar-fire-frame::after,
.hof-avatar.avatar-fire-frame::before,
.mmq-avatar.avatar-gold-frame::after,
.mmq-avatar.avatar-fire-frame::after,
.mmq-avatar.avatar-fire-frame::before,
.live-prematch-avatar.avatar-gold-frame::after,
.live-prematch-avatar.avatar-fire-frame::after,
.live-prematch-avatar.avatar-fire-frame::before,
.live-flow-avatar.avatar-gold-frame::after,
.live-flow-avatar.avatar-fire-frame::after,
.live-flow-avatar.avatar-fire-frame::before{
inset:-10% !important; /* compact overhang */
z-index:5 !important; /* above the avatar border + image */
}
/* When a frame is applied, soften the inner green border + shadow
so the PNG frame is the dominant ring decoration. */
.lbp-own-avatar-wrap.avatar-gold-frame > img,
.lbp-own-avatar-wrap.avatar-fire-frame > img,
.lbp-own-avatar-wrap.avatar-gold-frame > .lbp-own-avatar,
.lbp-own-avatar-wrap.avatar-fire-frame > .lbp-own-avatar{
border:none !important;
box-shadow:none !important;
}
.lbp-avatar.avatar-gold-frame > img,
.lbp-avatar.avatar-fire-frame > img,
.lbp-simple-avatar.avatar-gold-frame > img,
.lbp-simple-avatar.avatar-fire-frame > img,
.mmq-avatar.avatar-gold-frame > img,
.mmq-avatar.avatar-fire-frame > img,
.live-prematch-avatar.avatar-gold-frame > img,
.live-prematch-avatar.avatar-fire-frame > img{
border:none !important;
box-shadow:none !important;
}
/* Friend-Challenge select page — frame wrapper around the hero photo.
Matches the other avatar wrappers (display:inline-flex + position:relative
so the ::after frame anchors correctly). */
.fcs-friend-photo-wrap{
position:relative;display:inline-flex;align-items:center;justify-content:center;
}
.fcs-friend-photo-wrap.avatar-gold-frame,
.fcs-friend-photo-wrap.avatar-fire-frame{
overflow:visible;
}
.fcs-friend-photo-wrap.avatar-gold-frame .fcs-friend-photo,
.fcs-friend-photo-wrap.avatar-fire-frame .fcs-friend-photo{
border:none !important;box-shadow:none !important;
}
/* ═══════════════════════════════════════════════════════════════
Electric frame — full selector coverage + subtle pulse animation.
Same wrappers as gold/fire; adds a 2s flicker via opacity of a
second ::before layer so the ring feels "alive" without heavy CPU.
═══════════════════════════════════════════════════════════════ */
/* Base: allow ::after to escape + kill any inner ring decoration */
.dpb-avatar-wrap.avatar-electric-frame,
.frame-preview-wrap.avatar-electric-frame,
.profile-photo-wrap.avatar-electric-frame,
.pp-avatar.avatar-electric-frame,
.xpp-avatar.avatar-electric-frame,
.xpp-avatar-wrap.avatar-electric-frame,
.friend-avatar-wrap.avatar-electric-frame,
#profile-avatar.avatar-electric-frame,
#pp-photo-avatar.avatar-electric-frame,
.friend-avatar-fb.avatar-electric-frame,
.lb-avatar.avatar-electric-frame,
.lm-cam-avatar.avatar-electric-frame,
.lbp-avatar.avatar-electric-frame,
.lbp-simple-avatar.avatar-electric-frame,
.lbp-own-avatar-wrap.avatar-electric-frame,
.lb-champion-avatar.avatar-electric-frame,
.lb-lw-avatar.avatar-electric-frame,
.hof-avatar.avatar-electric-frame,
.live-prematch-avatar.avatar-electric-frame,
.mmq-avatar.avatar-electric-frame,
.live-flow-avatar.avatar-electric-frame,
.fcs-friend-photo-wrap.avatar-electric-frame{
overflow:visible !important;
position:relative;
isolation:isolate;
box-shadow:none !important;
animation:none !important;
}
/* Primary ring layer */
.dpb-avatar-wrap.avatar-electric-frame::after,
.frame-preview-wrap.avatar-electric-frame::after,
.profile-photo-wrap.avatar-electric-frame::after,
.pp-avatar.avatar-electric-frame::after,
.xpp-avatar.avatar-electric-frame::after,
.xpp-avatar-wrap.avatar-electric-frame::after,
.friend-avatar-wrap.avatar-electric-frame::after,
#profile-avatar.avatar-electric-frame::after,
#pp-photo-avatar.avatar-electric-frame::after,
.friend-avatar-fb.avatar-electric-frame::after,
.lb-avatar.avatar-electric-frame::after,
.lm-cam-avatar.avatar-electric-frame::after,
.lbp-avatar.avatar-electric-frame::after,
.lbp-simple-avatar.avatar-electric-frame::after,
.lbp-own-avatar-wrap.avatar-electric-frame::after,
.lb-champion-avatar.avatar-electric-frame::after,
.lb-lw-avatar.avatar-electric-frame::after,
.hof-avatar.avatar-electric-frame::after,
.live-prematch-avatar.avatar-electric-frame::after,
.mmq-avatar.avatar-electric-frame::after,
.live-flow-avatar.avatar-electric-frame::after,
.fcs-friend-photo-wrap.avatar-electric-frame::after{
content:'';
position:absolute;
inset:-8%;
background-image:url('assets/frame_electric_v2.webp');
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
z-index:3;
filter: drop-shadow(0 0 3px rgba(0,180,255,0.65)) brightness(1);
animation: _electricThunderStrike 4s infinite !important;
transform-origin: center;
will-change: filter, transform;
}
/* Second overlay layer for a subtle crackle feel (low opacity + faster) */
.dpb-avatar-wrap.avatar-electric-frame::before,
.frame-preview-wrap.avatar-electric-frame::before,
.profile-photo-wrap.avatar-electric-frame::before,
.xpp-avatar-wrap.avatar-electric-frame::before,
.friend-avatar-wrap.avatar-electric-frame::before,
.lb-avatar.avatar-electric-frame::before,
.lbp-avatar.avatar-electric-frame::before,
.lbp-simple-avatar.avatar-electric-frame::before,
.lbp-own-avatar-wrap.avatar-electric-frame::before,
.lb-champion-avatar.avatar-electric-frame::before,
.lb-lw-avatar.avatar-electric-frame::before,
.hof-avatar.avatar-electric-frame::before,
.live-prematch-avatar.avatar-electric-frame::before,
.mmq-avatar.avatar-electric-frame::before,
.live-flow-avatar.avatar-electric-frame::before,
.fcs-friend-photo-wrap.avatar-electric-frame::before{
content:'';
position:absolute;
inset:-18%;
border-radius:50%;
background:radial-gradient(circle, transparent 78%, rgba(200,240,255,0.75) 88%, transparent 100%);
pointer-events:none;
z-index:2;
opacity:0;
animation: _electricFlashPulse 4s infinite !important;
transform-origin:center;
will-change: opacity, transform;
}
@keyframes _electricThunderStrike{
0% { filter: drop-shadow(0 0 3px rgba(0,180,255,0.65)) brightness(1); transform: scale(1.35) rotate(0deg); }
35% { filter: drop-shadow(0 0 5px rgba(120,220,255,0.95)) brightness(1.2); transform: scale(1.29) rotate(2deg); }
70% { filter: drop-shadow(0 0 3px rgba(0,180,255,0.65)) brightness(1); transform: scale(1.35) rotate(0deg); }
72% { filter: drop-shadow(0 0 8px rgba(255,255,255,0.95)) brightness(2.5) saturate(0.3); transform: scale(1.48) rotate(-3deg); }
74% { filter: drop-shadow(0 0 4px rgba(0,200,255,0.75)) brightness(1.1); transform: scale(1.38) rotate(1deg); }
76% { filter: drop-shadow(0 0 9px rgba(255,255,255,0.95)) brightness(2.8) saturate(0.2); transform: scale(1.51) rotate(3deg); }
78% { filter: drop-shadow(0 0 3px rgba(0,180,255,0.65)) brightness(1); transform: scale(1.35) rotate(0deg); }
80% { filter: drop-shadow(0 0 7px rgba(200,240,255,0.95)) brightness(2.2); transform: scale(1.46) rotate(-2deg); }
82% { filter: drop-shadow(0 0 3px rgba(0,180,255,0.65)) brightness(1); transform: scale(1.35) rotate(0deg); }
100% { filter: drop-shadow(0 0 3px rgba(0,180,255,0.65)) brightness(1); transform: scale(1.35) rotate(0deg); }
}
@keyframes _electricFlashPulse{
0%,70%,82%,100%{ opacity:0; transform:scale(1.35); }
72% { opacity:1; transform:scale(1.75); }
76% { opacity:1; transform:scale(1.75); }
80% { opacity:0.8; transform:scale(1.56); }
}
@media (prefers-reduced-motion: reduce){
.avatar-electric-frame::before,
.avatar-electric-frame::after{
animation: none !important;
}
}
/* Nature frame — static ring PNG (animation TBD). */
.dpb-avatar-wrap.avatar-nature-frame,.frame-preview-wrap.avatar-nature-frame,.profile-photo-wrap.avatar-nature-frame,.pp-avatar.avatar-nature-frame,.xpp-avatar.avatar-nature-frame,.xpp-avatar-wrap.avatar-nature-frame,.friend-avatar-wrap.avatar-nature-frame,#profile-avatar.avatar-nature-frame,#pp-photo-avatar.avatar-nature-frame,.friend-avatar-fb.avatar-nature-frame,.lb-avatar.avatar-nature-frame,.lm-cam-avatar.avatar-nature-frame,.lbp-avatar.avatar-nature-frame,.lbp-simple-avatar.avatar-nature-frame,.lbp-own-avatar-wrap.avatar-nature-frame,.lb-champion-avatar.avatar-nature-frame,.lb-lw-avatar.avatar-nature-frame,.hof-avatar.avatar-nature-frame,.live-prematch-avatar.avatar-nature-frame,.mmq-avatar.avatar-nature-frame,.live-flow-avatar.avatar-nature-frame,.fcs-friend-photo-wrap.avatar-nature-frame{
overflow:visible !important;
position:relative;
isolation:isolate;
box-shadow:none !important;
animation:none !important;
}
.dpb-avatar-wrap.avatar-nature-frame::after,.frame-preview-wrap.avatar-nature-frame::after,.profile-photo-wrap.avatar-nature-frame::after,.pp-avatar.avatar-nature-frame::after,.xpp-avatar.avatar-nature-frame::after,.xpp-avatar-wrap.avatar-nature-frame::after,.friend-avatar-wrap.avatar-nature-frame::after,#profile-avatar.avatar-nature-frame::after,#pp-photo-avatar.avatar-nature-frame::after,.friend-avatar-fb.avatar-nature-frame::after,.lb-avatar.avatar-nature-frame::after,.lm-cam-avatar.avatar-nature-frame::after,.lbp-avatar.avatar-nature-frame::after,.lbp-simple-avatar.avatar-nature-frame::after,.lbp-own-avatar-wrap.avatar-nature-frame::after,.lb-champion-avatar.avatar-nature-frame::after,.lb-lw-avatar.avatar-nature-frame::after,.hof-avatar.avatar-nature-frame::after,.live-prematch-avatar.avatar-nature-frame::after,.mmq-avatar.avatar-nature-frame::after,.live-flow-avatar.avatar-nature-frame::after,.fcs-friend-photo-wrap.avatar-nature-frame::after{
content:'';
position:absolute;
inset:-8%;
background-image:url('assets/frame_nature_v1.webp');
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
z-index:3;
filter: drop-shadow(0 0 3px rgba(60,160,80,0.5));
transform: scale(1.35);
transform-origin: center;
}
/* Royal frame — static ring PNG (animation TBD). */
.dpb-avatar-wrap.avatar-royal-frame,.frame-preview-wrap.avatar-royal-frame,.profile-photo-wrap.avatar-royal-frame,.pp-avatar.avatar-royal-frame,.xpp-avatar.avatar-royal-frame,.xpp-avatar-wrap.avatar-royal-frame,.friend-avatar-wrap.avatar-royal-frame,#profile-avatar.avatar-royal-frame,#pp-photo-avatar.avatar-royal-frame,.friend-avatar-fb.avatar-royal-frame,.lb-avatar.avatar-royal-frame,.lm-cam-avatar.avatar-royal-frame,.lbp-avatar.avatar-royal-frame,.lbp-simple-avatar.avatar-royal-frame,.lbp-own-avatar-wrap.avatar-royal-frame,.lb-champion-avatar.avatar-royal-frame,.lb-lw-avatar.avatar-royal-frame,.hof-avatar.avatar-royal-frame,.live-prematch-avatar.avatar-royal-frame,.mmq-avatar.avatar-royal-frame,.live-flow-avatar.avatar-royal-frame,.fcs-friend-photo-wrap.avatar-royal-frame{
overflow:visible !important;
position:relative;
isolation:isolate;
box-shadow:none !important;
animation:none !important;
}
.dpb-avatar-wrap.avatar-royal-frame::after,.frame-preview-wrap.avatar-royal-frame::after,.profile-photo-wrap.avatar-royal-frame::after,.pp-avatar.avatar-royal-frame::after,.xpp-avatar.avatar-royal-frame::after,.xpp-avatar-wrap.avatar-royal-frame::after,.friend-avatar-wrap.avatar-royal-frame::after,#profile-avatar.avatar-royal-frame::after,#pp-photo-avatar.avatar-royal-frame::after,.friend-avatar-fb.avatar-royal-frame::after,.lb-avatar.avatar-royal-frame::after,.lm-cam-avatar.avatar-royal-frame::after,.lbp-avatar.avatar-royal-frame::after,.lbp-simple-avatar.avatar-royal-frame::after,.lbp-own-avatar-wrap.avatar-royal-frame::after,.lb-champion-avatar.avatar-royal-frame::after,.lb-lw-avatar.avatar-royal-frame::after,.hof-avatar.avatar-royal-frame::after,.live-prematch-avatar.avatar-royal-frame::after,.mmq-avatar.avatar-royal-frame::after,.live-flow-avatar.avatar-royal-frame::after,.fcs-friend-photo-wrap.avatar-royal-frame::after{
content:'';
position:absolute;
inset:-8%;
background-image:url('assets/frame_royal_v1.webp');
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
z-index:3;
filter: drop-shadow(0 0 3px rgba(240,200,100,0.55));
transform: scale(1.35);
transform-origin: center;
}
/* Shadow frame — static ring PNG (animation TBD). */
.dpb-avatar-wrap.avatar-shadow-frame,.frame-preview-wrap.avatar-shadow-frame,.profile-photo-wrap.avatar-shadow-frame,.pp-avatar.avatar-shadow-frame,.xpp-avatar.avatar-shadow-frame,.xpp-avatar-wrap.avatar-shadow-frame,.friend-avatar-wrap.avatar-shadow-frame,#profile-avatar.avatar-shadow-frame,#pp-photo-avatar.avatar-shadow-frame,.friend-avatar-fb.avatar-shadow-frame,.lb-avatar.avatar-shadow-frame,.lm-cam-avatar.avatar-shadow-frame,.lbp-avatar.avatar-shadow-frame,.lbp-simple-avatar.avatar-shadow-frame,.lbp-own-avatar-wrap.avatar-shadow-frame,.lb-champion-avatar.avatar-shadow-frame,.lb-lw-avatar.avatar-shadow-frame,.hof-avatar.avatar-shadow-frame,.live-prematch-avatar.avatar-shadow-frame,.mmq-avatar.avatar-shadow-frame,.live-flow-avatar.avatar-shadow-frame,.fcs-friend-photo-wrap.avatar-shadow-frame{
overflow:visible !important;
position:relative;
isolation:isolate;
box-shadow:none !important;
animation:none !important;
}
.dpb-avatar-wrap.avatar-shadow-frame::after,.frame-preview-wrap.avatar-shadow-frame::after,.profile-photo-wrap.avatar-shadow-frame::after,.pp-avatar.avatar-shadow-frame::after,.xpp-avatar.avatar-shadow-frame::after,.xpp-avatar-wrap.avatar-shadow-frame::after,.friend-avatar-wrap.avatar-shadow-frame::after,#profile-avatar.avatar-shadow-frame::after,#pp-photo-avatar.avatar-shadow-frame::after,.friend-avatar-fb.avatar-shadow-frame::after,.lb-avatar.avatar-shadow-frame::after,.lm-cam-avatar.avatar-shadow-frame::after,.lbp-avatar.avatar-shadow-frame::after,.lbp-simple-avatar.avatar-shadow-frame::after,.lbp-own-avatar-wrap.avatar-shadow-frame::after,.lb-champion-avatar.avatar-shadow-frame::after,.lb-lw-avatar.avatar-shadow-frame::after,.hof-avatar.avatar-shadow-frame::after,.live-prematch-avatar.avatar-shadow-frame::after,.mmq-avatar.avatar-shadow-frame::after,.live-flow-avatar.avatar-shadow-frame::after,.fcs-friend-photo-wrap.avatar-shadow-frame::after{
content:'';
position:absolute;
inset:-8%;
background-image:url('assets/frame_shadow_v1.webp');
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
z-index:3;
filter: drop-shadow(0 0 3px rgba(150,80,220,0.55));
transform: scale(1.35);
transform-origin: center;
}
/* ═══════════════════════════════════════════════════════════════
Frame breathing room — prevent the +35% scale PNG frames from
overlapping adjacent icons, buttons, or text across all UI
surfaces. Added per owner layout audit (2026-04-18).
═══════════════════════════════════════════════════════════════ */
/* LEADERBOARD ROWS — pad the avatar away from the rank/coin badge. */
.lb-avatar,
.lbp-simple-avatar,
.lbp-own-avatar-wrap,
.lb-champion-avatar,
.lb-lw-avatar,
.hof-avatar{
margin-inline: clamp(14px, 1.4vw, 26px) !important;
}
/* Podium .lbp-avatar is absolute-positioned (left:50% translateX);
adding margin-inline pushed it off-center. Keep it at 0. */
.lbp-avatar{
margin-inline: 0 !important;
}
/* FRIEND LIST / FRIEND CHALLENGE / PUBLIC PROFILE avatars — frame
was bleeding into action buttons. Add horizontal margin. */
.friend-avatar-wrap,
.xpp-avatar-wrap,
.fcs-friend-photo-wrap,
.live-prematch-avatar,
.live-flow-avatar,
.mmq-avatar{
margin-inline: clamp(10px, 1.2vw, 22px) !important;
}
/* PUBLIC PROFILE HERO — the big banner puts the avatar next to
action buttons. Needs larger buffer. */
.xpp-hero .xpp-avatar-wrap{
margin-inline: clamp(18px, 2vw, 34px) !important;
margin-block: clamp(8px, 1vw, 14px) !important;
}
/* Z-INDEX — online-dot / level badge / ready indicator must sit
ABOVE the ::after frame (which uses z-index 3). */
.pp-avatar .pp-online-dot,
.pp-avatar .pp-level-badge,
.friend-presence,
.live-prematch-avatar .prematch-ready-badge,
.xpp-avatar-wrap .xpp-online-dot,
.dpb-avatar-wrap ~ *,
.profile-photo-edit,
.profile-photo-wrap .profile-photo-edit{
z-index: 10 !important;
}
/* FRIEND ROWS — row gap so the avatar + frame don't kiss the name. */
.friend-row,
.fr-row{
gap: clamp(10px, 1.2vw, 18px) !important;
}
/* LIVE MATCH PLAYER CARD — .live-flow-avatar gets extra vertical +
side buffer so its electric/fire flash doesn't touch the ready
button or coin chip. */
.live-flow-avatar{
margin-block: clamp(8px, 1vw, 16px) !important;
}
/* Shrink frame scale specifically on leaderboard rows — row grids
are tighter than profile/match screens, so we drop the ring from
scale(1.35) to scale(1.12). Avatar size itself unchanged. */
.lb-avatar.avatar-gold-frame::after,
.lb-avatar.avatar-fire-frame::after,
.lb-avatar.avatar-fire-frame::before,
.lb-avatar.avatar-electric-frame::after,
.lb-avatar.avatar-electric-frame::before,
.lb-avatar.avatar-nature-frame::after,
.lb-avatar.avatar-royal-frame::after,
.lb-avatar.avatar-shadow-frame::after,
.lbp-avatar.avatar-gold-frame::after,
.lbp-avatar.avatar-fire-frame::after,
.lbp-avatar.avatar-fire-frame::before,
.lbp-avatar.avatar-electric-frame::after,
.lbp-avatar.avatar-electric-frame::before,
.lbp-avatar.avatar-nature-frame::after,
.lbp-avatar.avatar-royal-frame::after,
.lbp-avatar.avatar-shadow-frame::after,
.lbp-simple-avatar.avatar-gold-frame::after,
.lbp-simple-avatar.avatar-fire-frame::after,
.lbp-simple-avatar.avatar-fire-frame::before,
.lbp-simple-avatar.avatar-electric-frame::after,
.lbp-simple-avatar.avatar-electric-frame::before,
.lbp-simple-avatar.avatar-nature-frame::after,
.lbp-simple-avatar.avatar-royal-frame::after,
.lbp-simple-avatar.avatar-shadow-frame::after,
.hof-avatar.avatar-gold-frame::after,
.hof-avatar.avatar-fire-frame::after,
.hof-avatar.avatar-fire-frame::before,
.hof-avatar.avatar-electric-frame::after,
.hof-avatar.avatar-electric-frame::before,
.hof-avatar.avatar-nature-frame::after,
.hof-avatar.avatar-royal-frame::after,
.hof-avatar.avatar-shadow-frame::after{
--frame-scale: 1.12;
transform-origin: center;
}
/* For animated fire/electric/gold the scale is embedded in keyframes.
Override just the leaderboard selectors with !important so the base
transform takes precedence when the animation is not in a peak
frame. Also slow the animation slightly on leaderboard for calmness. */
.lb-avatar.avatar-fire-frame::after,
.lbp-avatar.avatar-fire-frame::after,
.lbp-simple-avatar.avatar-fire-frame::after,
.hof-avatar.avatar-fire-frame::after{
animation-duration: 18s !important;
}
.lb-avatar.avatar-fire-frame::before,
.lbp-avatar.avatar-fire-frame::before,
.lbp-simple-avatar.avatar-fire-frame::before,
.hof-avatar.avatar-fire-frame::before{
animation-duration: 9s !important;
}
/* Profile card is a narrow form — the avatar sits inside a compact
card with input rows directly below. The +35% scale frame visually
crowded the card + overlapped the level badge. Shrink the frame
ring only on this wrapper (scale 1.35 -> 1.15). The avatar img
keeps its base size. */
.profile-photo-wrap.avatar-gold-frame::after,
.profile-photo-wrap.avatar-fire-frame::after,
.profile-photo-wrap.avatar-fire-frame::before,
.profile-photo-wrap.avatar-electric-frame::after,
.profile-photo-wrap.avatar-electric-frame::before,
.profile-photo-wrap.avatar-nature-frame::after,
.profile-photo-wrap.avatar-royal-frame::after,
.profile-photo-wrap.avatar-shadow-frame::after{
--frame-scale: 1.15;
transform-origin: center;
}
/* Level badge on the profile avatar (the 11 pill) must sit above
the frame's ::after (z-index 3). */
.profile-photo-wrap .pp-level-badge,
.profile-photo-wrap .profile-level-badge,
.profile-photo-wrap .pp-online-dot{
z-index: 12 !important;
}
/* Force all leaderboard name cells to center universally — owner
reported that after the avatar column grew, names still clung to
one side. Applies to home, screen, and modal leaderboard variants. */
.lb-row .lb-info,
.leaderboard-screen-content .lb-row .lb-info,
#leaderboard-modal .lb-row .lb-info{
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
.lb-row .lb-name,
.leaderboard-screen-content .lb-row .lb-name,
#leaderboard-modal .lb-row .lb-name{
text-align:center !important;
width:100% !important;
margin-inline:auto !important;
}
/* Profile edit card — give the field bars more vertical gap below the
framed avatar so the frame ::after (scale 1.15 + inset -8%) does
not overlap the first input row. */
.profile-header-card .profile-photo-wrap{
margin-bottom: clamp(14px, 1.6vw, 28px);
}
.profile-header-card .profile-field-bar{
margin-top: clamp(8px, 0.8vw, 14px);
}
.profile-header-card .profile-field-bar:first-of-type{
margin-top: clamp(12px, 1.2vw, 20px);
}
/* Center the name block in .lbp-simple-row — overrides the JS-injected
styles. Owner wants names truly centered in the middle cell. */
.lbp-simple-row .lbp-simple-mid{
align-items:center !important;
text-align:center !important;
justify-content:center !important;
}
.lbp-simple-row .lbp-simple-name{
justify-content:center !important;
width:100%;
text-align:center !important;
}
.lbp-simple-row .lbp-simple-meta{
text-align:center !important;
width:100%;
}
/* Friend list rows are narrow — override frame scale via CSS variable
so animation still runs at its smaller size. */
.friend-avatar-wrap.avatar-gold-frame::after,
.friend-avatar-wrap.avatar-fire-frame::after,
.friend-avatar-wrap.avatar-fire-frame::before,
.friend-avatar-wrap.avatar-electric-frame::after,
.friend-avatar-wrap.avatar-electric-frame::before,
.friend-avatar-wrap.avatar-nature-frame::after,
.friend-avatar-wrap.avatar-royal-frame::after,
.friend-avatar-wrap.avatar-shadow-frame::after{
--frame-scale: 1.1;
transform-origin: center;
}
/* Public-profile hero — frame must stay inside the gold banner. */
.xpp-hero .xpp-avatar-wrap.avatar-gold-frame::after,
.xpp-hero .xpp-avatar-wrap.avatar-fire-frame::after,
.xpp-hero .xpp-avatar-wrap.avatar-fire-frame::before,
.xpp-hero .xpp-avatar-wrap.avatar-electric-frame::after,
.xpp-hero .xpp-avatar-wrap.avatar-electric-frame::before,
.xpp-hero .xpp-avatar-wrap.avatar-nature-frame::after,
.xpp-hero .xpp-avatar-wrap.avatar-royal-frame::after,
.xpp-hero .xpp-avatar-wrap.avatar-shadow-frame::after{
--frame-scale: 1.12;
transform-origin: center;
}
/* Friend-Challenge select page — shrink both the avatar image AND
the frame per owner spec. */
.fcs-friend-photo-wrap{
width: clamp(72px, 7vw, 100px) !important;
height: clamp(72px, 7vw, 100px) !important;
}
.fcs-friend-photo{
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 50%;
}
.fcs-friend-hero{
gap: clamp(6px, 0.5vw, 10px) !important;
padding: clamp(10px, 1vw, 16px) clamp(14px, 1.4vw, 22px) clamp(6px, 0.5vw, 10px) !important;
}
.fcs-friend-photo-wrap .fcs-friend-photo,
.fcs-friend-photo-wrap .fcs-friend-photo-fallback{
width: 100% !important;
height: 100% !important;
}
.fcs-friend-photo-wrap.avatar-gold-frame::after,
.fcs-friend-photo-wrap.avatar-fire-frame::after,
.fcs-friend-photo-wrap.avatar-fire-frame::before,
.fcs-friend-photo-wrap.avatar-electric-frame::after,
.fcs-friend-photo-wrap.avatar-electric-frame::before,
.fcs-friend-photo-wrap.avatar-nature-frame::after,
.fcs-friend-photo-wrap.avatar-royal-frame::after,
.fcs-friend-photo-wrap.avatar-shadow-frame::after{
--frame-scale: 1.12;
transform-origin: center;
}
/* Missions + Shop hero cards — no character art. Text fills the full
width and is perfectly centered. Orange + blue variants only. */
.gmc-body-orange .gmc-text,
.gmc-body-blue .gmc-text{
flex: 1 1 100%;
justify-content: center;
padding: 0;
}
/* Copy-username button sits next to the pencil edit icon. Absolute-
positioned to the LEFT of .pf-edit so the RTL row reads:
[pencil] [copy] ............ [label] [value]. */
.pf-copy{
position:absolute;
left:-44px; /* OUTSIDE the pill, on the left */
top:50%;
transform:translateY(-50%);
width:34px;height:34px;
border:1.5px solid rgba(139,105,20,0.45);
background:#fff;
color:#5a3a10;
border-radius:10px;
font-size:16px;
cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 2px 6px rgba(139,105,20,0.18);
transition:transform .12s ease,background .12s ease;
z-index:3;
pointer-events:auto;
}
.pf-copy:hover{background:#fff9eb;transform:translateY(-50%) scale(1.08)}
.pf-copy:active{transform:translateY(-50%) scale(0.94)}
/* 2026-04-18: REMOVED static transform:scale(1.12) override on .mmq-avatar
frame pseudos — it killed the rotation animation by overriding transform
from keyframes. Scale is already baked into each animation keyframe. */
/* Inline coin icon in fcs-eco-pill — replaces prior emoji. */
.fcs-eco-pill .fcs-eco-coin{
width:20px;height:20px;vertical-align:middle;
margin-inline-end:4px;
filter:drop-shadow(0 1px 2px rgba(139,105,20,0.2));
}
/* Vertical breathing room inside the player badge (dpb) — name + coin
row should not sit flush. */
.dpb-info{
gap: clamp(4px, 0.4vw, 7px) !important;
}
.dpb-name{
padding-bottom: 2px;
}
/* 2026-04-18 — MMQ card frames need bigger overhang so PNG flame/leaf/
wing tips aren't clipped by the image canvas edge. */
.mmq-avatar.avatar-electric-frame::after,
.mmq-avatar.avatar-electric-frame::before,
.mmq-avatar.avatar-nature-frame::after,
.mmq-avatar.avatar-royal-frame::after,
.mmq-avatar.avatar-shadow-frame::after{
inset:-10% !important;
z-index:5 !important;
}
/* 2026-04-18 — Fire frame brightness fix for leaderboard small avatars.
Screen blend on ::before was washing out colours against the cream row bg.
Kill the blend + boost glow so flames look vivid at 46-62px. */
.lb-avatar.avatar-fire-frame::before,
.lbp-avatar.avatar-fire-frame::before,
.lbp-simple-avatar.avatar-fire-frame::before,
.lbp-own-avatar-wrap.avatar-fire-frame::before,
.lb-champion-avatar.avatar-fire-frame::before,
.lb-lw-avatar.avatar-fire-frame::before,
.hof-avatar.avatar-fire-frame::before{
mix-blend-mode: normal !important;
opacity: 0.85 !important;
}
.lb-avatar.avatar-fire-frame::after,
.lbp-avatar.avatar-fire-frame::after,
.lbp-simple-avatar.avatar-fire-frame::after,
.lbp-own-avatar-wrap.avatar-fire-frame::after,
.lb-champion-avatar.avatar-fire-frame::after,
.lb-lw-avatar.avatar-fire-frame::after,
.hof-avatar.avatar-fire-frame::after{
filter: drop-shadow(0 0 3px rgba(255,120,0,0.85)) drop-shadow(0 0 2px rgba(255,80,0,0.55)) !important;
}
/* ═══════════════════════════════════════════════════════════════
2026-04-18 — LEGENDARY Shadow Frame (Mythic tier)
Purple/violet glow + rotating shine + pulsing aura.
═══════════════════════════════════════════════════════════════ */
@keyframes _shadowLegendaryPulse {
0%, 100% {
filter:
drop-shadow(0 0 3px rgba(168, 85, 247, 0.7))
drop-shadow(0 0 6px rgba(88, 28, 135, 0.5))
drop-shadow(0 0 9px rgba(216, 180, 254, 0.3));
transform: scale(var(--frame-scale, 1.35)) rotate(0deg);
}
50% {
filter:
drop-shadow(0 0 5px rgba(216, 180, 254, 1))
drop-shadow(0 0 10px rgba(168, 85, 247, 0.8))
drop-shadow(0 0 15px rgba(88, 28, 135, 0.5))
brightness(1.18);
transform: scale(calc(var(--frame-scale, 1.35) * 1.025)) rotate(-180deg);
}
}
@keyframes _shadowLegendaryPulseEnd {
to { transform: scale(var(--frame-scale, 1.35)) rotate(-360deg); }
}
/* Pulse only — NO rotation (per spec). Only the shine ::before rotates. */
@keyframes _shadowLegendary {
0%, 100% {
filter:
drop-shadow(0 0 3px rgba(168, 85, 247, 0.7))
drop-shadow(0 0 6px rgba(88, 28, 135, 0.5));
transform: scale(var(--frame-scale, 1.35));
}
50% {
filter:
drop-shadow(0 0 6px rgba(216, 180, 254, 1))
drop-shadow(0 0 12px rgba(168, 85, 247, 0.7))
brightness(1.15);
transform: scale(calc(var(--frame-scale, 1.35) * 1.015));
}
}
/* Shine sweep layer — purple arc chasing around the ring */
@keyframes _shadowShineSweep {
from { transform: scale(var(--frame-scale, 1.35)) rotate(0deg); }
to { transform: scale(var(--frame-scale, 1.35)) rotate(360deg); }
}
/* Replace static shadow-frame ::after with animated legendary version.
Every context where the shadow frame renders. */
.dpb-avatar-wrap.avatar-shadow-frame::after,
.frame-preview-wrap.avatar-shadow-frame::after,
.profile-photo-wrap.avatar-shadow-frame::after,
.pp-avatar.avatar-shadow-frame::after,
.xpp-avatar.avatar-shadow-frame::after,
.xpp-avatar-wrap.avatar-shadow-frame::after,
.friend-avatar-wrap.avatar-shadow-frame::after,
#profile-avatar.avatar-shadow-frame::after,
#pp-photo-avatar.avatar-shadow-frame::after,
.friend-avatar-fb.avatar-shadow-frame::after,
.lb-avatar.avatar-shadow-frame::after,
.lm-cam-avatar.avatar-shadow-frame::after,
.lbp-avatar.avatar-shadow-frame::after,
.lbp-simple-avatar.avatar-shadow-frame::after,
.lbp-own-avatar-wrap.avatar-shadow-frame::after,
.lb-champion-avatar.avatar-shadow-frame::after,
.lb-lw-avatar.avatar-shadow-frame::after,
.hof-avatar.avatar-shadow-frame::after,
.live-prematch-avatar.avatar-shadow-frame::after,
.mmq-avatar.avatar-shadow-frame::after,
.live-flow-avatar.avatar-shadow-frame::after,
.fcs-friend-photo-wrap.avatar-shadow-frame::after {
animation: _shadowLegendary 3.5s ease-in-out infinite !important;
will-change: transform, filter;
transform-origin: center;
}
/* ::before — rotating violet shine arc (masked to ring shape) */
.dpb-avatar-wrap.avatar-shadow-frame::before,
.frame-preview-wrap.avatar-shadow-frame::before,
.profile-photo-wrap.avatar-shadow-frame::before,
.pp-avatar.avatar-shadow-frame::before,
.xpp-avatar.avatar-shadow-frame::before,
.xpp-avatar-wrap.avatar-shadow-frame::before,
.friend-avatar-wrap.avatar-shadow-frame::before,
#profile-avatar.avatar-shadow-frame::before,
#pp-photo-avatar.avatar-shadow-frame::before,
.friend-avatar-fb.avatar-shadow-frame::before,
.lb-avatar.avatar-shadow-frame::before,
.lm-cam-avatar.avatar-shadow-frame::before,
.lbp-avatar.avatar-shadow-frame::before,
.lbp-simple-avatar.avatar-shadow-frame::before,
.lbp-own-avatar-wrap.avatar-shadow-frame::before,
.lb-champion-avatar.avatar-shadow-frame::before,
.lb-lw-avatar.avatar-shadow-frame::before,
.hof-avatar.avatar-shadow-frame::before,
.live-prematch-avatar.avatar-shadow-frame::before,
.mmq-avatar.avatar-shadow-frame::before,
.live-flow-avatar.avatar-shadow-frame::before,
.fcs-friend-photo-wrap.avatar-shadow-frame::before {
content: '';
position: absolute;
inset: -8%;
background: conic-gradient(
from 0deg,
transparent 0deg, transparent 300deg,
rgba(192, 132, 252, 0.35) 325deg,
rgba(255, 255, 255, 0.95) 355deg,
rgba(216, 180, 254, 0.85) 5deg,
rgba(168, 85, 247, 0.4) 30deg,
transparent 60deg
);
-webkit-mask-image: url('assets/frame_shadow_v1.webp');
mask-image: url('assets/frame_shadow_v1.webp');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mix-blend-mode: screen;
pointer-events: none;
z-index: 4;
transform: scale(var(--frame-scale, 1.35));
transform-origin: center;
animation: _shadowShineSweep 5s linear infinite;
filter: blur(1px);
will-change: transform;
}
/* ═══════════════════════════════════════════════════════════════
2026-04-18 — ROYAL Frame — Crystal Sparkles (gem positions)
Pulse glow on the PNG + twinkle on 5 gem hotspots.
═══════════════════════════════════════════════════════════════ */
/* Main PNG gets a warm gold breathing glow. Royal stays stable — no
rotation — conveying majesty / stillness. */
@keyframes _royalBreathe {
0%, 100% {
filter:
drop-shadow(0 0 3px rgba(251, 191, 36, 0.55))
drop-shadow(0 0 5px rgba(234, 179, 8, 0.25));
transform: scale(var(--frame-scale, 1.35));
}
50% {
filter:
drop-shadow(0 0 4px rgba(255, 220, 120, 0.9))
drop-shadow(0 0 8px rgba(251, 191, 36, 0.55))
brightness(1.1);
transform: scale(calc(var(--frame-scale, 1.35) * 1.015));
}
}
/* Twinkle pattern — composite of 5 sparkle hotspots on ::before. */
@keyframes _royalSparkle {
0% { opacity: 0.35; filter: brightness(0.9) blur(0.5px); }
20% { opacity: 0.95; filter: brightness(1.4) blur(0.3px); }
40% { opacity: 0.55; filter: brightness(1.0) blur(0.5px); }
55% { opacity: 1; filter: brightness(1.6) blur(0.3px); }
72% { opacity: 0.6; filter: brightness(1.0) blur(0.5px); }
85% { opacity: 1; filter: brightness(1.5) blur(0.3px); }
100% { opacity: 0.35; filter: brightness(0.9) blur(0.5px); }
}
.dpb-avatar-wrap.avatar-royal-frame::after,
.frame-preview-wrap.avatar-royal-frame::after,
.profile-photo-wrap.avatar-royal-frame::after,
.pp-avatar.avatar-royal-frame::after,
.xpp-avatar.avatar-royal-frame::after,
.xpp-avatar-wrap.avatar-royal-frame::after,
.friend-avatar-wrap.avatar-royal-frame::after,
#profile-avatar.avatar-royal-frame::after,
#pp-photo-avatar.avatar-royal-frame::after,
.friend-avatar-fb.avatar-royal-frame::after,
.lb-avatar.avatar-royal-frame::after,
.lm-cam-avatar.avatar-royal-frame::after,
.lbp-avatar.avatar-royal-frame::after,
.lbp-simple-avatar.avatar-royal-frame::after,
.lbp-own-avatar-wrap.avatar-royal-frame::after,
.lb-champion-avatar.avatar-royal-frame::after,
.lb-lw-avatar.avatar-royal-frame::after,
.hof-avatar.avatar-royal-frame::after,
.live-prematch-avatar.avatar-royal-frame::after,
.mmq-avatar.avatar-royal-frame::after,
.live-flow-avatar.avatar-royal-frame::after,
.fcs-friend-photo-wrap.avatar-royal-frame::after {
animation: _royalBreathe 3.5s ease-in-out infinite !important;
will-change: transform, filter;
transform-origin: center;
}
/* ::before — 5 sparkle hotspots matching the gem layout */
.dpb-avatar-wrap.avatar-royal-frame::before,
.frame-preview-wrap.avatar-royal-frame::before,
.profile-photo-wrap.avatar-royal-frame::before,
.pp-avatar.avatar-royal-frame::before,
.xpp-avatar.avatar-royal-frame::before,
.xpp-avatar-wrap.avatar-royal-frame::before,
.friend-avatar-wrap.avatar-royal-frame::before,
#profile-avatar.avatar-royal-frame::before,
#pp-photo-avatar.avatar-royal-frame::before,
.friend-avatar-fb.avatar-royal-frame::before,
.lb-avatar.avatar-royal-frame::before,
.lm-cam-avatar.avatar-royal-frame::before,
.lbp-avatar.avatar-royal-frame::before,
.lbp-simple-avatar.avatar-royal-frame::before,
.lbp-own-avatar-wrap.avatar-royal-frame::before,
.lb-champion-avatar.avatar-royal-frame::before,
.lb-lw-avatar.avatar-royal-frame::before,
.hof-avatar.avatar-royal-frame::before,
.live-prematch-avatar.avatar-royal-frame::before,
.mmq-avatar.avatar-royal-frame::before,
.live-flow-avatar.avatar-royal-frame::before,
.fcs-friend-photo-wrap.avatar-royal-frame::before {
content: '';
position: absolute;
inset: -8%;
pointer-events: none;
z-index: 5;
transform: scale(var(--frame-scale, 1.35));
transform-origin: center;
mix-blend-mode: screen;
background:
/* top centre gem */
radial-gradient(circle 6px at 50% 11%,
rgba(255,255,255,1) 0%,
rgba(255,240,180,0.85) 40%,
rgba(251,191,36,0.5) 70%,
transparent 100%),
/* bottom centre gem */
radial-gradient(circle 6px at 50% 90%,
rgba(255,255,255,1) 0%,
rgba(255,240,180,0.85) 40%,
rgba(251,191,36,0.5) 70%,
transparent 100%),
/* top-right gem 1 */
radial-gradient(circle 5px at 93% 12%,
rgba(255,255,255,1) 0%,
rgba(255,240,180,0.8) 45%,
transparent 100%),
/* top-right gem 2 (stacked) */
radial-gradient(circle 5px at 91% 17%,
rgba(255,255,255,1) 0%,
rgba(255,240,180,0.8) 45%,
transparent 100%),
/* top-left gem */
radial-gradient(circle 5px at 10% 17%,
rgba(255,255,255,1) 0%,
rgba(255,240,180,0.8) 45%,
transparent 100%);
background-repeat: no-repeat;
animation: _royalSparkle 2.4s ease-in-out infinite;
will-change: opacity, filter;
}
/* ═══════════════════════════════════════════════════════════════
2026-04-18 — NATURE Frame — Leaf Shimmer + Fireflies
═══════════════════════════════════════════════════════════════ */
/* Leaf shimmer: cycle through fresh green tones with subtle hue-rotate */
@keyframes _natureLeafShimmer {
0%, 100% {
filter:
drop-shadow(0 0 3px rgba(74, 222, 128, 0.55))
brightness(1) saturate(1);
transform: scale(var(--frame-scale, 1.35));
}
33% {
filter:
drop-shadow(0 0 4px rgba(132, 204, 22, 0.85))
brightness(1.18) saturate(1.3) hue-rotate(-10deg);
transform: scale(calc(var(--frame-scale, 1.35) * 1.01));
}
66% {
filter:
drop-shadow(0 0 4px rgba(163, 230, 53, 0.75))
brightness(1.12) saturate(1.2) hue-rotate(10deg);
transform: scale(calc(var(--frame-scale, 1.35) * 1.005));
}
}
/* Firefly twinkle: one shared rhythm, all 5 dots pulse with staggered
brightness/opacity via multi-stop keyframe so they look "alive". */
@keyframes _natureFireflies {
0% { opacity: 0.3; filter: brightness(0.9) blur(0.3px); }
18% { opacity: 0.95; filter: brightness(1.4); }
35% { opacity: 0.5; filter: brightness(0.95) blur(0.4px); }
52% { opacity: 1; filter: brightness(1.55); }
70% { opacity: 0.55; filter: brightness(1.0) blur(0.3px); }
88% { opacity: 0.9; filter: brightness(1.3); }
100% { opacity: 0.3; filter: brightness(0.9) blur(0.3px); }
}
.dpb-avatar-wrap.avatar-nature-frame::after,
.frame-preview-wrap.avatar-nature-frame::after,
.profile-photo-wrap.avatar-nature-frame::after,
.pp-avatar.avatar-nature-frame::after,
.xpp-avatar.avatar-nature-frame::after,
.xpp-avatar-wrap.avatar-nature-frame::after,
.friend-avatar-wrap.avatar-nature-frame::after,
#profile-avatar.avatar-nature-frame::after,
#pp-photo-avatar.avatar-nature-frame::after,
.friend-avatar-fb.avatar-nature-frame::after,
.lb-avatar.avatar-nature-frame::after,
.lm-cam-avatar.avatar-nature-frame::after,
.lbp-avatar.avatar-nature-frame::after,
.lbp-simple-avatar.avatar-nature-frame::after,
.lbp-own-avatar-wrap.avatar-nature-frame::after,
.lb-champion-avatar.avatar-nature-frame::after,
.lb-lw-avatar.avatar-nature-frame::after,
.hof-avatar.avatar-nature-frame::after,
.live-prematch-avatar.avatar-nature-frame::after,
.mmq-avatar.avatar-nature-frame::after,
.live-flow-avatar.avatar-nature-frame::after,
.fcs-friend-photo-wrap.avatar-nature-frame::after {
animation: _natureLeafShimmer 3s ease-in-out infinite !important;
will-change: transform, filter;
transform-origin: center;
}
/* ::before — 5 firefly points at spec positions */
.dpb-avatar-wrap.avatar-nature-frame::before,
.frame-preview-wrap.avatar-nature-frame::before,
.profile-photo-wrap.avatar-nature-frame::before,
.pp-avatar.avatar-nature-frame::before,
.xpp-avatar.avatar-nature-frame::before,
.xpp-avatar-wrap.avatar-nature-frame::before,
.friend-avatar-wrap.avatar-nature-frame::before,
#profile-avatar.avatar-nature-frame::before,
#pp-photo-avatar.avatar-nature-frame::before,
.friend-avatar-fb.avatar-nature-frame::before,
.lb-avatar.avatar-nature-frame::before,
.lm-cam-avatar.avatar-nature-frame::before,
.lbp-avatar.avatar-nature-frame::before,
.lbp-simple-avatar.avatar-nature-frame::before,
.lbp-own-avatar-wrap.avatar-nature-frame::before,
.lb-champion-avatar.avatar-nature-frame::before,
.lb-lw-avatar.avatar-nature-frame::before,
.hof-avatar.avatar-nature-frame::before,
.live-prematch-avatar.avatar-nature-frame::before,
.mmq-avatar.avatar-nature-frame::before,
.live-flow-avatar.avatar-nature-frame::before,
.fcs-friend-photo-wrap.avatar-nature-frame::before {
content: '';
position: absolute;
inset: -8%;
pointer-events: none;
z-index: 5;
transform: scale(var(--frame-scale, 1.35));
transform-origin: center;
mix-blend-mode: screen;
background:
/* firefly 1 — top-left */
radial-gradient(circle 4px at 20% 15%,
rgba(255,255,200,1) 0%,
rgba(163,230,53,0.75) 45%,
transparent 100%),
/* firefly 2 — right mid */
radial-gradient(circle 4px at 85% 70%,
rgba(255,255,200,1) 0%,
rgba(163,230,53,0.75) 45%,
transparent 100%),
/* firefly 3 — bottom-left */
radial-gradient(circle 4px at 15% 85%,
rgba(255,255,200,1) 0%,
rgba(163,230,53,0.75) 45%,
transparent 100%),
/* firefly 4 — top-right */
radial-gradient(circle 4px at 90% 30%,
rgba(255,255,200,1) 0%,
rgba(163,230,53,0.75) 45%,
transparent 100%),
/* firefly 5 — left mid */
radial-gradient(circle 4px at 5% 60%,
rgba(255,255,200,1) 0%,
rgba(163,230,53,0.75) 45%,
transparent 100%);
background-repeat: no-repeat;
filter: drop-shadow(0 0 6px rgba(163, 230, 53, 0.9));
animation: _natureFireflies 4s ease-in-out infinite;
will-change: opacity, filter;
}
/* 2026-04-18 — Settings page UX refinements */
#settings-screen .settings-card-wide{
grid-column: 1 / -1;
margin-top: var(--ds-gap-md);
}
#settings-screen .setting-link{
cursor: pointer;
padding: clamp(10px,0.9vw,14px) 0 !important;
border-top: 1px dashed rgba(196,155,60,.22);
transition: background .15s;
text-decoration: none;
color: inherit;
font-family: inherit;
background: transparent;
border-left: none;
border-right: none;
border-bottom: none;
width: 100%;
text-align: inherit;
}
#settings-screen .setting-link:first-of-type{
border-top: none;
}
#settings-screen .setting-link:hover{
background: rgba(196,155,60,.05);
}
#settings-screen .setting-link-danger{
color: #b42f3e;
}
#settings-screen .setting-link-danger:hover{
background: rgba(233,75,90,.06);
}
/* Balance the two top cards on desktop — min height so language card
doesnt look half-empty next to the 3-row sound card. */
@media (min-width: 901px) {
.settings-grid > .settings-card{
min-height: clamp(160px, 14vw, 200px);
}
}
/* ═══ FREE PLAY v2 — isolated styles ═══ */
#free-play-screen {
display: none;
background: var(--ds-cream-bg, #fcf3d4);
}
#free-play-screen.active {
display: flex !important;
flex-direction: column;
}
.fp-header {
display: flex;
align-items: center;
gap: 14px;
padding: 14px clamp(14px, 3vw, 28px);
background: linear-gradient(180deg, rgba(255,247,224,.98), rgba(250,236,196,.94));
backdrop-filter: blur(10px);
border-bottom: 2px solid rgba(196,155,60,.3);
position: sticky;
top: 0;
z-index: 20;
}
.fp-header-title {
flex: 1;
text-align: center;
font-size: clamp(17px, 1.8vw, 22px);
font-weight: 900;
color: #3b2f10;
letter-spacing: -.3px;
}
.fp-stage-card {
/* reuse stages .game-stage-card layout but force single column (no rail) */
grid-template-columns: 1fr !important;
}
.fp-video-el {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
border-radius: inherit;
}
/* 2026-05-10: frame-inner-fog removal applied */
/* 2026-05-10: missions-card cream polish + gold scrollbar */
/* ═══ Solo select — reuse `lsc-*` from live picker ═══
2026-05-28 (v2): the solo picker now mirrors the live challenge
picker pixel-for-pixel. This block only adds the bits that
differ: 2-column grid + green/purple card border colours. */
.lsc-card[data-mode="stages"]{border-color:var(--ds-green-bright,#22c55e)}
.lsc-card[data-mode="free"] {border-color:var(--ds-purple-violet,#8b5cf6)}
.lsc-card[data-mode="stages"] .lsc-card__icon-wrap{background:rgba(34,197,94,.12)}
.lsc-card[data-mode="free"] .lsc-card__icon-wrap{background:rgba(139,92,246,.12)}
/* Solo grid: 2 cards instead of 3 (live picker default). */
#solo-select-screen .lsc-grid{
grid-template-columns:repeat(2,minmax(240px,clamp(260px,22vw,360px)));
}
/* 2026-05-28 v2: solo picker matches live look */