*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-family:inherit}
:root{
--bg0:#EFF6FF;--bg1:#F0F9FF;--bg2:#ECFDF5;
--card:#FFFFFF;
--sky:#0EA5E9;--sky2:#0284C7;--sky3:#0369A1;--sky-dk:#0C4A6E;
--sky-lt:#E0F2FE;--sky-md:#BAE6FD;
--mint:#10B981;--mint-lt:#D1FAE5;--mint-md:#6EE7B7;
--amber:#F59E0B;--amber-lt:#FEF3C7;--amber-md:#FDE68A;
--coral:#EF4444;--coral-lt:#FEE2E2;
--purple:#8B5CF6;--purple-lt:#EDE9FE;
--green-lt:#DCFCE7;
--joy-pink:#FF6B9D;--joy-purple:#9D4EDD;--joy-orange:#FFA500;
--achievement-gold:#FFD700;
--vibrant-purple:#7C3AED;--vibrant-purple-lt:#EDE9FE;--vibrant-purple-md:#A78BFA;
--coral-pink:#FF6B9D;--coral-pink-lt:#FFE4ED;
--lime-green:#84CC16;--lime-green-lt:#ECFDF5;
--sunny-yellow:#FBBF24;--sunny-yellow-lt:#FEF3C7;
--text:#0C4A6E;--muted:#475569;--muted2:#94A3B8;
--border:#E0F2FE;--border2:#BAE6FD;
--sh: 0 4px 16px rgba(14,165,233,0.08);
--sh-md: 0 8px 28px rgba(14,165,233,0.13);
--sh-lg: 0 16px 48px rgba(14,165,233,0.18);
--r:20px;--r-sm:14px;--r-xs:10px;
}
html,body{height:100%;min-height:100%;overflow:hidden;background:linear-gradient(135deg,var(--bg0) 0%,var(--bg2) 100%)}
body{
font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
color:var(--text);
background:linear-gradient(135deg,#F0FEFF 0%,#ECFDF5 100%);
background-attachment:fixed;
height:100%;
min-height:100vh;
min-height:100svh;
min-height:100dvh;
overflow:hidden;
position:relative;
}
body::before{
content:'';
position:fixed;
inset:0;
background-image:url('data:image/svg+xml,');
background-size:200px 200px;
background-repeat:repeat;
pointer-events:none;
z-index:0;
}
body > * {position:relative;z-index:1;}
#app{width:100%;max-width:1400px;margin:0 auto;padding:18px 20px 0;min-height:100vh;min-height:100svh;min-height:100dvh;height:100%;display:flex;flex-direction:column;gap:14px;overflow:hidden}
#main{flex:1;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:4px}
#main::-webkit-scrollbar{display:none}
/* During play (sc-grid present), #main has no scrollable content — lock it */
#main:has(.sc-grid){overflow:hidden;padding-bottom:0}
/* ── WELCOME SPLASH ── */
#welcome-splash{position:fixed;inset:0;z-index:99998;background:linear-gradient(135deg,var(--sky) 0%,var(--sky2) 60%,var(--mint) 100%);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;min-height:100vh;min-height:100svh;min-height:100dvh}
#welcome-splash.gone{display:none}
.ws-box{background:#fff;border-radius:24px;padding:18px 20px 14px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.18);animation:bounceIn 0.5s cubic-bezier(.3,1.5,.5,1);max-height:calc(100dvh - 24px);overflow-y:auto}
.ws-crown{font-size:2.2rem;text-align:center;margin-bottom:3px}
.ws-title{font-size:1.3rem;font-weight:800;color:var(--sky-dk);text-align:center;margin-bottom:10px;letter-spacing:-0.5px}
.ws-sub{font-size:0.85rem;color:var(--muted);text-align:center;line-height:1.6;margin-bottom:18px}
.ws-label{font-size:0.72rem;font-weight:700;color:var(--sky3);margin-bottom:3px;display:block}
.ws-input{width:100%;padding:8px 12px;border:1.5px solid var(--border2);border-radius:var(--r-xs);font-size:0.88rem;font-family:inherit;color:var(--text);outline:none;transition:border-color 0.15s;margin-bottom:8px}
.ws-input:focus{border-color:var(--sky)}
.ws-role-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px}
.ws-role-btn{padding:7px 4px;border:1.5px solid var(--border2);border-radius:var(--r-xs);background:#fff;font-size:0.76rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all 0.13s;text-align:center}
.ws-role-btn:hover{border-color:var(--sky);color:var(--sky3);background:var(--sky-lt)}
.ws-role-btn.sel{border-color:var(--sky);background:var(--sky-lt);color:var(--sky3)}
.ws-consent{display:flex;align-items:flex-start;gap:8px;background:#F8FBFF;border:1.5px solid var(--border);border-radius:12px;padding:9px 10px;margin-bottom:10px;font-size:0.72rem;line-height:1.45;color:var(--muted);cursor:pointer}
.ws-consent input{margin-top:2px;flex-shrink:0}
.ws-link-btn{display:inline;padding:0;border:none;background:none;color:var(--sky3);font-size:inherit;font-weight:800;cursor:pointer;text-decoration:underline}
.ws-link-btn:hover{color:var(--sky2)}
.legal-ov{position:fixed;inset:0;z-index:99999;background:rgba(12,74,110,0.56);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}
.legal-box{position:relative;background:#fff;border-radius:22px;padding:18px 18px 14px;max-width:680px;width:100%;max-height:calc(100dvh - 36px);overflow-y:auto;box-shadow:0 24px 60px rgba(14,165,233,0.24);border:1px solid var(--border)}
.legal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;border-radius:50%;background:#EFF6FF;color:var(--sky3);font-size:0.9rem;font-weight:900;cursor:pointer}
.legal-kicker{display:inline-flex;align-items:center;gap:6px;background:#EFF6FF;color:var(--sky3);border-radius:999px;padding:5px 10px;font-size:0.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.6px;margin-bottom:9px}
.legal-title{font-size:1.28rem;font-weight:900;color:var(--sky-dk);line-height:1.1;margin-bottom:4px}
.legal-updated{font-size:0.72rem;color:var(--muted2);margin-bottom:12px}
.legal-body{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.legal-section{background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border:1px solid #DCEEFF;border-radius:14px;padding:11px 12px}
.legal-section-title{font-size:0.82rem;font-weight:900;color:var(--text);margin-bottom:4px}
.legal-section-body{font-size:0.74rem;line-height:1.55;color:var(--muted)}
.legal-ok{width:100%;padding:10px 12px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;font-size:0.84rem;font-weight:800;cursor:pointer}
.ws-start{width:100%;padding:11px;background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;border:none;border-radius:var(--r-sm);font-size:0.95rem;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(14,165,233,0.35);transition:transform 0.13s,box-shadow 0.13s;margin-bottom:7px}
.ws-start:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(14,165,233,0.45)}
.ws-note{font-size:0.68rem;color:var(--muted2);text-align:center;line-height:1.5}
.ws-skip{display:block;text-align:center;font-size:0.72rem;color:var(--muted2);margin-top:7px;cursor:pointer;text-decoration:underline}
.ws-features{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.ws-feat{display:flex;align-items:center;gap:10px;background:#F0F9FF;border:1px solid #BAE6FD;border-radius:10px;padding:9px 12px}
.ws-feat-ico{font-size:1.3rem;flex-shrink:0}
.ws-feat-text{font-size:0.8rem;color:#0369A1;font-weight:600;line-height:1.3}
.ws-tabs{display:flex;gap:5px;margin-bottom:10px;background:#F0F9FF;border-radius:10px;padding:3px}
.ws-tab{flex:1;padding:8px 4px;border:none;border-radius:7px;font-size:0.83rem;font-weight:600;color:var(--muted);background:transparent;cursor:pointer;transition:all 0.15s;font-family:inherit}
.ws-tab.ws-tab-active{background:#fff;color:var(--sky3);box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.ws-error{font-size:0.76rem;color:#DC2626;background:#FEF2F2;border:1px solid #FECACA;border-radius:8px;padding:6px 10px;margin-bottom:8px;display:none;text-align:center;line-height:1.4}
.ws-error.show{display:block}
/* ── Compact feature cards (Create Account) ─────────────────────────────── */
.ws-feats-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.ws-feat-mini{border-radius:12px;padding:9px 5px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;border:1.5px solid transparent}
.ws-feat-mini--blue{background:linear-gradient(150deg,#EFF6FF,#DBEAFE);border-color:#BFDBFE}
.ws-feat-mini--green{background:linear-gradient(150deg,#F0FDF4,#DCFCE7);border-color:#86EFAC}
.ws-feat-mini--amber{background:linear-gradient(150deg,#FFFBEB,#FEF3C7);border-color:#FCD34D}
.ws-feat-mini-ico{font-size:1.7rem;line-height:1;margin-bottom:2px}
.ws-feat-mini-lbl{font-size:0.64rem;font-weight:800;color:var(--text);letter-spacing:0.1px;line-height:1.2}
.ws-feat-mini-sub{font-size:0.56rem;color:var(--muted);line-height:1.3;font-weight:500}
/* ── Trial badge on splash ───────────────────────────────────────────────── */
.ws-trial-badge{background:linear-gradient(90deg,#10b981,#059669);color:#fff;border-radius:20px;padding:5px 12px;font-size:0.72rem;font-weight:700;text-align:center;margin-bottom:10px;letter-spacing:0.1px}
/* ── Trial countdown banner ──────────────────────────────────────────────── */
/* ── Trial banner (compact, app-blended) ─────────────────────────────────── */
.trial-banner{display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:0.78rem;font-weight:600;border-bottom:1.5px solid transparent;flex-shrink:0}
.trial-banner--info{background:rgba(14,165,233,0.1);border-bottom-color:rgba(14,165,233,0.25);color:#0C4A6E}
.trial-banner--warn{background:rgba(245,158,11,0.1);border-bottom-color:rgba(245,158,11,0.3);color:#92400E}
.trial-banner--urgent{background:rgba(239,68,68,0.1);border-bottom-color:rgba(239,68,68,0.3);color:#991B1B;animation:urgentPulse 2s ease-in-out infinite}
@keyframes urgentPulse{0%,100%{background:rgba(239,68,68,0.1)}50%{background:rgba(239,68,68,0.18)}}
.tb-ico{font-size:1rem;flex-shrink:0;line-height:1}
.tb-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:0.78rem}
.tb-dots{display:flex;gap:4px;align-items:center;flex-shrink:0}
.tb-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.tb-dot--on{background:currentColor;opacity:0.9}
.tb-dot--off{background:currentColor;opacity:0.25}
.tb-btn{background:var(--sky);color:#fff;border:none;border-radius:20px;padding:4px 12px;font-size:0.72rem;font-weight:700;cursor:pointer;flex-shrink:0;white-space:nowrap}
.nav-trial-banner{
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid transparent;
border-radius:999px;
padding:7px 12px;
font:inherit;
font-size:0.72rem;
font-weight:800;
cursor:pointer;
white-space:nowrap;
max-width:250px;
transition:transform 0.13s ease,opacity 0.13s ease,box-shadow 0.13s ease,background 0.13s ease;
box-shadow:0 1px 0 rgba(255,255,255,0.08) inset;
}
.nav-trial-banner:hover{transform:translateY(-1px);opacity:1}
.nav-trial-banner .tb-ico{font-size:0.95rem}
.nav-trial-banner .tb-label{min-width:0;max-width:140px;font-size:0.72rem;color:inherit}
.nav-trial-banner .tb-dots{gap:3px}
.nav-trial-banner .tb-dot{width:7px;height:7px}
.nav-trial-banner.trial-banner--info{
background:linear-gradient(135deg,#0EA5E9,#0284C7);
border-color:#7DD3FC;
color:#F0F9FF;
}
.nav-trial-banner.trial-banner--warn{
background:linear-gradient(135deg,#F59E0B,#D97706);
border-color:#FDE68A;
color:#FFF7ED;
}
.nav-trial-banner.trial-banner--urgent{
background:linear-gradient(135deg,#EF4444,#DC2626);
border-color:#FCA5A5;
color:#FEF2F2;
animation:urgentPulse 2s ease-in-out infinite;
}
#nav-trial-slot{display:flex;align-items:center;min-width:0;flex-shrink:0}
/* ── Subscription tab (gamified) ─────────────────────────────────────────── */
/* Pro hero card */
.sub-hero-card{background:linear-gradient(135deg,#0f766e 0%,#155e75 48%,#1d4ed8 100%);border-radius:18px;padding:22px 18px 18px;text-align:center;color:#fff;margin-bottom:12px;position:relative;overflow:visible;display:flex;flex-direction:column;box-shadow:0 10px 28px rgba(14,116,144,0.18)}
.sub-hero-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,0.15),transparent 60%);pointer-events:none}
.sub-hero-sparkles{font-size:1.4rem;letter-spacing:8px;margin-bottom:6px;animation:sparkle 2.5s ease-in-out infinite}
@keyframes sparkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.8;transform:scale(1.06)}}
.sub-hero-title{font-size:1.35rem;font-weight:900;letter-spacing:-0.5px;margin-bottom:4px}
.sub-hero-sub{font-size:0.8rem;opacity:0.85;margin-bottom:10px}
.sub-hero-badge{display:inline-block;background:rgba(255,255,255,0.2);border:1.5px solid rgba(255,255,255,0.5);border-radius:20px;padding:3px 14px;font-size:0.7rem;font-weight:800;letter-spacing:1px;margin-bottom:16px}
.sub-hero-perks{text-align:left;border-top:1px solid rgba(255,255,255,0.2);padding-top:12px;padding-bottom:4px;display:flex;flex-direction:column;align-items:stretch;flex:0 0 auto}
.sub-perk-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:0.82rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.1);min-height:28px;flex:0 0 auto}
.sub-perk-row:last-child{border-bottom:none}
.sub-perk-ico{font-size:1rem;width:22px;text-align:center;flex-shrink:0}
.sub-perk-txt{flex:1}
.sub-perk-check{color:rgba(255,255,255,0.9);font-weight:900;font-size:0.9rem}
/* Pro detail card */
.sub-detail-card{background:linear-gradient(135deg,#F8FBFF,#EEF6FF);border:1.5px solid var(--sky-md);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.sub-detail-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f1f5f9;font-size:0.82rem}
.sub-detail-row:last-child{border-bottom:none}
.sub-detail-lbl{color:var(--muted);font-weight:500}
.sub-detail-val{font-weight:700;color:#1e293b;text-align:right}
/* Trial card */
.sub-trial-card{border-radius:16px;padding:20px 18px;text-align:center;color:#fff;margin-bottom:14px}
.sub-trial-card--active{background:linear-gradient(135deg,#0f766e 0%,#155e75 48%,#1d4ed8 100%)}
.sub-trial-card--warn{background:linear-gradient(135deg,#0f766e 0%,#1d4ed8 100%)}
.sub-trial-card--urgent{background:linear-gradient(135deg,#0f766e 0%,#2563eb 100%);animation:urgentPulse 1.8s ease-in-out infinite}
.sub-trial-card--expired{background:linear-gradient(135deg,#155e75,#1d4ed8)}
.sub-trial-ico{font-size:2.2rem;margin-bottom:6px}
.sub-trial-title{font-size:1.1rem;font-weight:800;margin-bottom:4px}
.sub-trial-msg{font-size:0.8rem;opacity:0.9;margin-bottom:14px;line-height:1.4}
.sub-trial-track{height:8px;background:rgba(255,255,255,0.25);border-radius:6px;overflow:hidden;margin-bottom:8px}
.sub-trial-fill{height:100%;background:#fff;border-radius:6px;transition:width 0.4s ease}
.sub-trial-pips{display:flex;justify-content:center;gap:8px;margin-bottom:14px}
.sub-trial-pip{font-size:0.68rem;font-weight:700;padding:3px 10px;border-radius:20px}
.sub-trial-locked{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.26);border-radius:14px;padding:12px;text-align:left;margin-top:8px;backdrop-filter:blur(8px)}
.sub-trial-locked-lbl{font-size:0.73rem;font-weight:800;opacity:0.96;margin-bottom:9px;text-transform:uppercase;letter-spacing:0.6px}
.sub-locked-row{display:flex;align-items:center;gap:8px;font-size:0.79rem;padding:5px 0;opacity:0.98;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.12)}
.sub-locked-row:last-child{border-bottom:none}
.sub-locked-ico{width:20px;text-align:center;flex-shrink:0}
.sub-locked-txt{flex:1}
.sub-locked-badge{font-size:0.62rem;font-weight:800;letter-spacing:0.7px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,0.22);border:1px solid rgba(255,255,255,0.38);color:#fff;flex-shrink:0}
/* Cancel / manage box */
.sub-cancel-box{background:linear-gradient(135deg,#F8FBFF,#EEF6FF);border:1.5px solid var(--sky-md);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.sub-cancel-ttl{font-size:0.85rem;font-weight:700;color:#64748b;margin-bottom:6px}
.sub-cancel-body{font-size:0.78rem;color:#475569;line-height:1.5}
.sub-cancel-body p{margin:0 0 4px}
.sub-manage-btn{width:100%;border:none;border-radius:20px;padding:10px;font-size:0.82rem;font-weight:700;cursor:pointer;background:linear-gradient(135deg,#0f766e,#1d4ed8);color:#fff;margin-top:8px}
/* Plan section */
.sub-section-hdr{font-size:0.85rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;text-align:center}
.sub-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.sub-plan{border-radius:14px;padding:16px 12px;text-align:center;border:2px solid transparent;position:relative;padding-top:20px}
.sub-plan--year{border-color:var(--sky);background:linear-gradient(160deg,#ecfeff,#dbeafe)}
.sub-plan--month{border-color:var(--sky-md);background:linear-gradient(160deg,#F8FBFF,#EEF6FF)}
.sub-plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#0f766e,#1d4ed8);color:#fff;font-size:0.6rem;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap}
.sub-plan-name{font-size:0.82rem;font-weight:800;color:#1e293b;margin-bottom:4px}
.sub-plan-price{font-size:1.6rem;font-weight:900;color:#1e293b;line-height:1.1}
.sub-plan-price span{font-size:0.72rem;font-weight:500;color:var(--muted)}
.sub-plan-hint{font-size:0.65rem;color:var(--muted2);margin:4px 0 8px}
.sub-plan-feats{list-style:none;padding:0;margin:0 0 10px;text-align:left;font-size:0.72rem;color:#475569;font-weight:600;line-height:1.9}
.sub-plan-btn{width:100%;border:none;border-radius:20px;padding:9px;font-size:0.78rem;font-weight:700;cursor:pointer}
.sub-plan-btn--primary{background:linear-gradient(135deg,#0f766e,#1d4ed8);color:#fff}
.sub-plan-btn--secondary{background:#e2e8f0;color:#1e293b}
/* ── Paywall ──────────────────────────────────────────────────────────────── */
.paywall-wrap{padding:28px 20px 24px;text-align:center;max-width:420px;margin:0 auto}
.paywall-ico{font-size:3.5rem;margin-bottom:12px}
.paywall-ttl{font-size:1.35rem;font-weight:800;color:var(--sky-dk);margin-bottom:8px;letter-spacing:-0.3px}
.paywall-sub{font-size:0.88rem;color:var(--muted);line-height:1.6;margin-bottom:24px}
.paywall-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.paywall-plan{border-radius:16px;padding:20px 14px 16px;text-align:center;position:relative;border:2px solid var(--border2)}
.paywall-plan--year{border-color:var(--sky);background:linear-gradient(145deg,#F0F9FF,#DBEAFE)}
.paywall-plan--month{background:#F9FAFB}
.paywall-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--sky);color:#fff;font-size:0.6rem;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap;letter-spacing:0.5px}
.paywall-plan-name{font-size:0.8rem;font-weight:700;color:var(--muted);margin-bottom:6px;margin-top:6px}
.paywall-plan-price{font-size:1.9rem;font-weight:800;color:var(--sky-dk);line-height:1}
.paywall-plan-price span{font-size:0.8rem;font-weight:500;color:var(--muted)}
.paywall-plan-hint{font-size:0.68rem;color:var(--muted);margin:4px 0 14px}
.paywall-btn{width:100%;padding:10px;border:none;border-radius:10px;font-size:0.88rem;font-weight:700;cursor:pointer;font-family:inherit;transition:transform 0.13s}
.paywall-btn--primary{background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;box-shadow:0 4px 14px rgba(14,165,233,0.35)}
.paywall-btn--secondary{background:var(--border2);color:var(--text)}
.paywall-btn:hover{transform:translateY(-1px)}
.paywall-lock{font-size:0.72rem;color:var(--muted2)}
.ws-social{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.ws-social-btn{width:100%;padding:11px 14px;border-radius:var(--r-xs);font-size:0.88rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.13s;font-family:inherit}
.ws-google-btn{background:#fff;color:#3c4043;border:1.5px solid #dadce0}
.ws-google-full{width:100%;padding:10px 14px;border-radius:var(--r-xs);font-size:0.88rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.13s;font-family:inherit;margin-bottom:10px}
.ws-google-full:hover{background:#f8f9fa;box-shadow:0 1px 6px rgba(0,0,0,0.12)}
.ws-google-btn:hover{background:#f8f9fa;box-shadow:0 1px 6px rgba(0,0,0,0.12)}
.ws-apple-btn{background:#000;color:#fff;border:1.5px solid #000}
.ws-apple-btn:hover{background:#1a1a1a}
.ws-divider{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--muted2);font-size:0.72rem;font-weight:500}
.ws-divider::before,.ws-divider::after{content:'';flex:1;height:1px;background:var(--border2)}
/* ── STATS EMPTY STATE ── */
.stats-empty-state{text-align:center;padding:40px 20px}
.ses-icon{font-size:3rem;margin-bottom:12px}
.ses-title{font-size:1.2rem;font-weight:800;color:var(--sky-dk);margin-bottom:8px}
.ses-text{font-size:0.88rem;color:var(--muted);line-height:1.6;max-width:280px;margin:0 auto}
/* ── NPS PROMPT ── */
.nps-wrap{background:linear-gradient(135deg,var(--sky-lt),var(--mint-lt));border:1.5px solid var(--border2);border-radius:var(--r);padding:18px;text-align:center;margin-bottom:14px}
.nps-title{font-size:1rem;font-weight:800;color:var(--sky-dk);margin-bottom:4px}
.nps-sub{font-size:0.8rem;color:var(--muted);margin-bottom:13px}
.nps-row{display:flex;gap:8px;justify-content:center}
.nps-btn{flex:1;max-width:110px;padding:10px 6px;border:1.5px solid var(--border2);border-radius:var(--r-sm);background:#fff;font-size:1.3rem;cursor:pointer;transition:all 0.13s;display:flex;flex-direction:column;align-items:center;gap:3px}
.nps-btn span{font-size:0.65rem;font-weight:700;color:var(--muted)}
.nps-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.nps-btn.sel{border-color:var(--sky);background:var(--sky-lt)}
#start-anim{position:fixed;inset:0;z-index:99999;background:linear-gradient(135deg,var(--sky),var(--sky2));display:flex;align-items:center;justify-content:center;pointer-events:all}
#start-anim.fading{animation:startFade 0.85s ease forwards}
#start-anim.gone{display:none}
.start-text{font-size:3rem;font-weight:800;color:#fff;letter-spacing:-1px;animation:startPop 0.85s ease forwards}
@keyframes startFade{0%{opacity:1}70%{opacity:1}100%{opacity:0;pointer-events:none}}
@keyframes startPop{0%{opacity:0;transform:scale(0.4)}35%{opacity:1;transform:scale(1.15)}55%{transform:scale(1)}75%{transform:scale(1.08)}100%{opacity:0;transform:scale(0.7)}}
/* ── READY-GO OVERLAY ── */
.ready-go-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(30,90,200,0.95) 0%,rgba(50,200,150,0.95) 100%);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(2px)}
.ready-go-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.ready-go-text{position:absolute;font-size:clamp(60px,20vw,200px);font-weight:900;letter-spacing:8px;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,0.3);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;opacity:0;transform:scale(0.8);pointer-events:none;will-change:transform,opacity}
.ready-go-ready{animation:readyPop 0.72s cubic-bezier(0.34,1.56,0.64,1) forwards}
.ready-go-go{animation:goPop 0.46s cubic-bezier(0.34,1.56,0.64,1) 1s forwards}
@keyframes readyPop{0%{opacity:0;transform:scale(0.5)}50%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@keyframes goPop{0%{opacity:0;transform:scale(0.5)}50%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@media(max-width:480px){.ready-go-text{font-size:clamp(40px,18vw,120px);letter-spacing:4px}}
/* ── NAV ── REVAMPED */
#nav{
display:flex !important;
background:linear-gradient(135deg,#0F172A 0%,#1E3A5F 100%) !important;
border-radius:0 !important;
padding:14px 24px !important;
box-shadow:0 4px 20px rgba(0,0,0,0.35) !important;
border:none !important;
align-items:center !important;
justify-content:space-between !important;
gap:20px !important;
position:relative;
overflow:visible !important;
margin:0 !important;
}
#nav::before{
content:'';
position:absolute;
inset:0;
background-image:radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size:80px 80px;
opacity:0.5;
pointer-events:none;
z-index:1;
}
#nav.show{display:flex !important}
.nav-left{
display:flex;
align-items:center;
gap:20px;
z-index:2;
flex:1;
}
.nav-logo{
font-size:1.1rem;
font-weight:800;
color:#fff;
letter-spacing:-0.5px;
display:flex;
align-items:center;
gap:10px;
white-space:nowrap;
}
.nav-logo::before{
content:'';
width:56px;
height:56px;
flex:0 0 56px;
display:inline-block;
margin-right:2px;
border-radius:50%;
background:url('assets/mascot/nav-boss-coin.png') center/contain no-repeat;
filter:drop-shadow(0 4px 10px rgba(255,184,61,0.35));
}
.nav-title{
font-size:1.02rem;
font-weight:800;
color:#fff;
letter-spacing:-0.3px;
display:none;
}
.nav-btn{
font-size:0.82rem;
font-weight:600;
color:rgba(255,255,255,0.8);
background:rgba(255,255,255,0.15);
border:1.5px solid rgba(255,255,255,0.2);
border-radius:50px;
padding:8px 16px;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
transition:all 0.2s ease;
white-space:nowrap;
z-index:2;
}
.nav-btn:hover,.nav-btn.active{
background:rgba(255,255,255,0.25);
color:#fff;
border-color:rgba(255,255,255,0.4);
}
.nav-right{
display:flex;
align-items:center;
gap:12px;
z-index:2;
margin-left:auto;
}
.icon-btn{
width:40px;
height:40px;
border-radius:50%;
background:rgba(255,255,255,0.15);
border:1.5px solid rgba(255,255,255,0.2);
color:#fff;
font-size:1.2rem;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.2s ease;
}
.icon-btn:hover{
background:rgba(255,255,255,0.25);
border-color:rgba(255,255,255,0.4);
transform:scale(1.08);
}
/* ── PROFILE SECTION ── */
.nav-profile-wrapper{
position:relative;
z-index:999;
flex-shrink:0;
}
.nav-profile{
display:flex;
align-items:center;
gap:10px;
padding:8px 12px 8px 8px;
background:rgba(255,255,255,0.12);
border:1.5px solid rgba(255,255,255,0.25);
border-radius:50px;
cursor:pointer;
transition:all 0.2s ease;
white-space:nowrap;
}
.nav-profile:hover{
background:rgba(255,255,255,0.18);
border-color:rgba(255,255,255,0.35);
transform:translateY(-1px);
}
.nav-av{
width:38px;
height:38px;
border-radius:50%;
overflow:hidden;
background:rgba(255,255,255,0.25);
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border:2px solid rgba(255,255,255,0.3);
}
.nav-av svg,.nav-av img{width:100%;height:100%;display:block;object-fit:cover;}
.nav-profile-info{
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}
.nav-name{
font-size:0.88rem;
font-weight:600;
color:#fff;
white-space:nowrap;
}
.nav-role{
font-size:0.7rem;
font-weight:500;
color:rgba(255,255,255,0.8);
white-space:nowrap;
}
.nav-dropdown-icon{
width:16px;
height:16px;
display:flex;
align-items:center;
justify-content:center;
color:rgba(255,255,255,0.7);
font-size:0.9rem;
margin-left:4px;
}
/* ── PROFILE DROPDOWN MENU ── */
.profile-dropdown{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
background:#3D5A80 !important;
border-radius:8px !important;
min-width:160px !important;
box-shadow:0 8px 24px rgba(0,0,0,0.25) !important;
z-index:10000 !important;
overflow:hidden !important;
display:none !important;
flex-direction:column !important;
opacity:0 !important;
transform:scale(0.95) translateY(-8px) !important;
transform-origin:top right !important;
transition:all 0.2s ease !important;
pointer-events:none !important;
width:auto !important;
flex-grow:0 !important;
flex-shrink:0 !important;
flex-basis:auto !important;
}
.profile-dropdown.show{
display:flex !important;
flex-direction:column !important;
opacity:1 !important;
transform:scale(1) translateY(0) !important;
pointer-events:auto !important;
}
.dropdown-item{
width:100% !important;
padding:10px 14px !important;
background:none !important;
border:none !important;
color:#fff !important;
font-size:0.85rem !important;
font-weight:500 !important;
text-align:left !important;
cursor:pointer !important;
transition:all 0.15s ease !important;
border-bottom:1px solid rgba(255,255,255,0.1) !important;
white-space:nowrap !important;
display:block !important;
margin:0 !important;
}
.dropdown-item:last-child{
border-bottom:none !important;
}
.dropdown-item:hover{
background:rgba(255,255,255,0.15) !important;
padding-left:18px !important;
}
.dropdown-item.logout{
color:#FF6B9D !important;
background:rgba(255,107,157,0.1) !important;
border-top:1px solid rgba(255,107,157,0.2) !important;
}
.dropdown-item.logout:hover{
background:rgba(255,107,157,0.2) !important;
}
/* ── SOUND BUTTON ── */
.sound-btn{
width:44px;
height:44px;
background:rgba(255,255,255,0.12);
border:1.5px solid rgba(255,255,255,0.25);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.2s ease;
flex-shrink:0;
color:#fff;
font-size:1.2rem;
}
.sound-btn:hover{
background:rgba(255,255,255,0.18);
border-color:rgba(255,255,255,0.35);
transform:scale(1.05);
}
.sound-icon{
display:inline-block;
transition:opacity 0.2s;
}
.sound-btn.muted .sound-icon{
opacity:0.5;
}
/* ── TEXT-TO-SPEECH BUTTON ── */
.tts-btn{
width:44px;
height:44px;
background:rgba(255,255,255,0.12);
border:1.5px solid rgba(255,255,255,0.25);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.2s ease;
flex-shrink:0;
color:#fff;
font-size:1.2rem;
padding:0;
font-family:inherit;
}
.tts-btn:hover{
background:rgba(255,255,255,0.18);
border-color:rgba(255,255,255,0.35);
transform:scale(1.05);
}
.tts-btn.tts-playing{
background:rgba(255,200,0,0.25);
border-color:rgba(255,200,0,0.5);
animation:pulse-tts 0.6s infinite;
}
@keyframes pulse-tts{
0%, 100%{transform:scale(1);}
50%{transform:scale(1.08);}
}
/* ── EMBEDDED TTS BUTTON IN QUESTION CARD ── */
.sc-tts-btn{
position:absolute;
top:20px;
right:20px;
width:48px;
height:48px;
background:rgba(255,255,255,0.15);
border:2px solid rgba(255,255,255,0.3);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.2s ease;
color:#fff;
font-size:1.4rem;
padding:0;
font-family:inherit;
z-index:10;
}
.sc-tts-btn:hover{
background:rgba(255,255,255,0.25);
border-color:rgba(255,255,255,0.45);
transform:scale(1.08);
}
.sc-tts-btn.sc-tts-playing{
background:rgba(255,200,0,0.3);
border-color:rgba(255,200,0,0.6);
animation:pulse-tts 0.6s infinite;
}
.sc-top{
position:relative;
}
/* ── GAMIFIED QUESTION BOX (Scenario & Challenge play) ── */
.sc-q-glass,
.ch-q-glass{
background:#FFFFFF;
border:1.5px solid #D6EAFB;
border-radius:16px;
padding:16px 18px;
margin-top:10px;
box-shadow:
0 10px 24px rgba(15,23,42,0.08),
0 2px 8px rgba(14,165,233,0.08);
position:relative;
animation:qCardIn 0.32s cubic-bezier(.3,1.4,.5,1) both;
}
@keyframes qCardIn{
0%{transform:scale(0.97) translateY(4px);opacity:0}
100%{transform:scale(1) translateY(0);opacity:1}
}
/* Bolder text inside for readability */
.sc-q-glass .sc-name{font-weight:900;font-size:1.3rem;text-align:left;color:#0F172A}
.sc-q-glass .sc-body{font-weight:600;color:#334155;text-align:left;font-size:1.1rem}
.ch-q-glass .ch-q-title{font-weight:900;text-align:left;color:#0F172A;font-size:1.3rem}
.ch-q-glass .ch-q-body{font-weight:600;color:#334155;text-align:left;font-size:1.1rem}
/* ── HUD ── ENHANCED */
#hud{
display:none;
background:var(--card);
border-radius:var(--r);
padding:14px 18px;
box-shadow:0 6px 20px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
border:1px solid var(--border);
align-items:center;
flex-wrap:nowrap;
gap:8px;
justify-content:space-between;
margin-bottom:0;
padding:10px 18px;
}
#hud.show{display:flex}
.hs{
display:flex;
align-items:center;
gap:7px;
padding:6px 14px;
border-radius:50px;
font-weight:700;
font-size:0.82rem;
transition:all 0.15s;
flex-shrink:0;
cursor:pointer;
position:relative;
overflow:visible;
}
.hs img{display:block;align-self:center;flex-shrink:0}
.hs-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;line-height:1}
.hs-info>span:not(.hs-lbl){line-height:1.1}
.hs-lbl{font-size:0.54rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:0.68;white-space:nowrap;line-height:1.1;margin-top:1px}
.hs:active{transform:scale(0.95)}
.hs:hover{transform:translateY(-1px)}
.hs.co{
background:linear-gradient(135deg,var(--amber-lt),#FCD34D);
color:#92400E;
border:1.5px solid var(--amber-md);
box-shadow:0 2px 8px rgba(245,158,11,0.15);
}
.hs.cu{
background:linear-gradient(135deg,var(--sky-lt),#BAE6FD);
color:var(--sky3);
border:1.5px solid var(--sky-md);
box-shadow:0 2px 8px rgba(14,165,233,0.15);
}
.hs.ha{
background:linear-gradient(135deg,var(--purple-lt),#DDD6FE);
color:#5B21B6;
border:1.5px solid #DDD6FE;
box-shadow:0 2px 8px rgba(139,92,246,0.15);
}
.hs.bp{
background:linear-gradient(135deg,#FFF3CD,#FFE8A8);
color:#B8860B;
border:1.5px solid #FFE8A8;
box-shadow:0 2px 8px rgba(184,134,11,0.15);
}
.hs.pr{
background:linear-gradient(135deg,var(--mint-lt),#6EE7B7);
color:#065F46;
border:1.5px solid var(--mint-md);
font-size:0.76rem;
box-shadow:0 2px 8px rgba(16,185,129,0.15);
}
.hud-icon{width:22px;height:22px;display:inline-block;object-fit:contain;vertical-align:middle}
.hud-pos{
font-size:0.76rem;
font-weight:700;
background:linear-gradient(135deg,var(--sky),var(--sky2));
color:#fff;
padding:8px 14px;
border-radius:50px;
display:flex;
align-items:center;
gap:7px;
max-width:200px;
overflow:hidden;
box-shadow:0 2px 12px rgba(14,165,233,0.2);
margin-left:auto;
}
.hud-av-ring{
width:36px;
height:36px;
border-radius:50%;
overflow:hidden;
background:rgba(255,255,255,0.28);
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
}
.hud-av-ring svg,.hud-av-ring img{width:100%;height:100%;display:block;object-fit:cover;}
.f-up{animation:fUp 0.45s ease}
.f-dn{animation:fDn 0.45s ease}
.f-pop{animation:fPop 0.52s cubic-bezier(.25,1.4,.45,1)}
@keyframes fUp{0%,100%{background:inherit}50%{background:#D1FAE5}}
@keyframes fDn{0%,100%{background:inherit}50%{background:#FEE2E2}}
@keyframes fPop{
0%{transform:translateY(0) scale(1)}
35%{transform:translateY(-3px) scale(1.06)}
100%{transform:translateY(0) scale(1)}
}
.hs-pop{
position:absolute;
top:-12px;
right:6px;
min-width:24px;
padding:3px 7px;
border-radius:999px;
background:linear-gradient(135deg,#22C55E,#16A34A);
color:#fff;
font-size:0.72rem;
font-weight:900;
line-height:1;
box-shadow:0 8px 16px rgba(22,163,74,0.24);
pointer-events:none;
animation:hsPopRise 0.9s ease forwards;
}
@keyframes hsPopRise{
0%{opacity:0;transform:translateY(6px) scale(0.85)}
20%{opacity:1;transform:translateY(0) scale(1)}
100%{opacity:0;transform:translateY(-18px) scale(1.02)}
}
/* ── GENERIC CARD ── ENHANCED */
.card{
background:var(--card);
border-radius:var(--r);
padding:20px 18px 16px;
box-shadow:0 6px 24px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
border:1px solid var(--border);
transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
position:relative;
overflow:hidden;
}
.card::after{
content:'';
position:absolute;
top:-50px;
right:-50px;
width:130px;
height:130px;
border-radius:50%;
background:radial-gradient(circle,rgba(14,165,233,0.08),transparent 70%);
pointer-events:none;
}
.card:hover{
transform:translateY(-4px);
box-shadow:0 12px 36px rgba(14,165,233,0.15), 0 0 20px rgba(14,165,233,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
}
.screen{animation:slideUp 0.28s ease both;min-width:0}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(0.65)}to{opacity:1;transform:scale(1)}}
@keyframes bounceIn{0%{transform:scale(0.4)}60%{transform:scale(1.18)}80%{transform:scale(0.94)}100%{transform:scale(1)}}
@keyframes spinIn{from{transform:rotate(-180deg) scale(0);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(780deg);opacity:0}}
@keyframes floatBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes celebrate{0%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.15) rotate(5deg)}100%{transform:scale(1) rotate(-5deg)}}
@keyframes achieve{0%{opacity:0;transform:scale(0.5) translateY(20px)}50%{transform:scale(1.08)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 0 rgba(14,165,233,0.7)}50%{box-shadow:0 0 0 10px rgba(14,165,233,0)}}
@keyframes progressFill{0%{width:0}100%{width:100%}}
/* ── SECTION OUTLINES ── */
.outline-primary{box-shadow:inset 0 0 0 2px var(--sky);border-radius:16px}
.profile-screen{
overflow-y:auto;
overflow-x:hidden;
max-height:calc(100dvh - 122px);
scrollbar-width:thin;
}
.profile-screen--subscription{
padding-bottom:20px;
}
.profile-screen--help{
overflow:visible;
max-height:none;
min-height:calc(100dvh - 122px);
height:fit-content;
padding-bottom:10px;
}
.profile-screen:hover{
transform:none;
box-shadow:inset 0 0 0 2px var(--sky), 0 6px 24px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}
.profile-screen--profile:hover,
.profile-screen--statistics:hover,
.profile-screen--subscription:hover{
transform:none;
box-shadow:inset 0 0 0 2px var(--sky), 0 6px 24px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}
.outline-challenge{box-shadow:inset 0 0 0 2px #F97316;border-radius:16px}
.outline-success{box-shadow:inset 0 0 0 2px var(--mint);border-radius:16px}
.outline-featured{box-shadow:inset 0 0 0 2px var(--amber);border-radius:16px}
.outline-danger{box-shadow:inset 0 0 0 2px var(--coral);border-radius:16px}
/* ── HERO BANNER ── ENHANCED */
.hero-wrap{
padding-right:245px;
background:linear-gradient(135deg,var(--sky) 0%,var(--sky2) 100%),
url('data:image/svg+xml,');
background-size:100%, 200px 200px;
background-position:0 0, 5px 10px;
border-radius:var(--r);
padding:16px 18px;
position:relative;
overflow:hidden;
min-height:110px;
border:4px solid rgba(255,255,255,0.95);
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px rgba(14,165,233,0.3);
}
.hero-wrap,.hero-mascot,.hero-chips,.mode-row,.info-cards-row,.mcard,.mcard-content,.mcard-text-block,.info-card,.panel,.sidebar,.prof-hero,.prof-hero-body,.prof-hero-left,.prof-hero-center,.prof-hero-right,.paywall-wrap,.paywall-plan,.md-lobby-horiz,.ch-lobby-horiz,.md-setup-fullscreen,.md-diff-horiz,.ch-lobby-cards{min-width:0}
.hero-wrap::before{
content:'';
position:absolute;
right:-25px;
top:-25px;
width:100px;
height:100px;
border-radius:50%;
background:rgba(255,255,255,0.12);
z-index:2;
}
.hero-wrap::after{
content:'';
position:absolute;
right:25px;
bottom:-18px;
width:60px;
height:60px;
border-radius:50%;
background:rgba(255,255,255,0.08);
z-index:2;
}
.hero-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,0.22);color:#fff;border-radius:50px;padding:3px 10px;font-size:0.73rem;font-weight:700;margin-bottom:4px}
.hero-badge img,.hero-badge svg{filter:drop-shadow(0 0 6px rgba(255,230,100,0.9)) drop-shadow(0 0 14px rgba(255,200,50,0.7));animation:heroIconGlow 2.2s ease-in-out infinite}
@keyframes heroIconGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,230,100,0.9)) drop-shadow(0 0 14px rgba(255,200,50,0.7))}50%{filter:drop-shadow(0 0 10px rgba(255,240,120,1)) drop-shadow(0 0 22px rgba(255,210,60,0.9))}}
.hero-title{font-size:2rem;font-weight:800;color:#fff;line-height:1;margin-bottom:6px;letter-spacing:-0.5px}
.hero-sub{font-size:0.84rem;color:rgba(255,255,255,0.88);max-width:100%;line-height:1.5;margin-bottom:11px}
.hero-mascot{position:absolute;right:18px;bottom:6px;width:220px;height:220px;display:flex;align-items:flex-end;justify-content:center;animation:floatBounce 3.2s ease-in-out infinite;z-index:2}
.hero-mascot img{width:100%;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,0.22))}
@media(max-width:540px){.hero-mascot{width:130px;height:130px;right:10px;bottom:8px}.hero-wrap{padding-right:145px}}
.hero-chips{display:flex;gap:5px;flex-wrap:wrap}
.hchip{background:rgba(255,255,255,0.22);color:#fff;border-radius:14px;padding:6px 12px;font-size:0.88rem;font-weight:700;display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:56px;border:2px solid transparent;transition:all 0.2s ease;position:relative}
.hchip.hchip-met{background:rgba(52,211,153,0.25);border-color:rgba(52,211,153,0.7);box-shadow:0 0 12px rgba(52,211,153,0.35)}
.hchip-lbl{font-size:0.58rem;font-weight:600;color:rgba(255,255,255,0.75);text-transform:uppercase;letter-spacing:.4px;margin-top:1px}
/* ── TYPE SCALE ── */
:root{--fs-h1:1.5rem;--fs-h2:1.1rem;--fs-body:0.875rem;--fs-sm:0.75rem;--fs-xs:0.68rem}
/* ── MODE CARDS ── CLEAN REBUILD */
.mode-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:100%;grid-auto-rows:210px}
.home-save-note{font-size:0.62rem;color:var(--muted2);text-align:center;padding:5px 0 0}
/* ── INFO CARDS ROW (How It Works + Learning Skills) ── */
.info-cards-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 6px}
.info-card{border-radius:16px;padding:12px 13px;position:relative;overflow:hidden}
.info-card::before{content:'';position:absolute;top:-18px;right:-18px;width:72px;height:72px;border-radius:50%;opacity:0.12;pointer-events:none}
.info-card-hiw{background:#fff;border:2px solid #BFDBFE;box-shadow:0 4px 0 #DBEAFE,0 8px 20px rgba(37,99,235,0.12)}
.info-card-hiw::before{background:#2563EB}
.info-card-skills{background:#fff;border:2px solid #DDD6FE;box-shadow:0 4px 0 #EDE9FE,0 8px 20px rgba(124,58,237,0.12)}
.info-card-skills::before{background:#7C3AED}
.info-card-hdr{font-size:0.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.info-card-hiw .info-card-hdr{color:#1D4ED8;text-shadow:none}
.info-card-skills .info-card-hdr{color:#6D28D9;text-shadow:none}
.hiw-item{display:flex;align-items:flex-start;gap:8px;margin-bottom:7px}
.hiw-item:last-child{margin-bottom:0}
.hiw-badge{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;margin-top:1px;box-shadow:0 2px 6px rgba(0,0,0,0.18)}
.hiw-badge-blue{background:linear-gradient(135deg,#60A5FA,#3B82F6)}
.hiw-badge-green{background:linear-gradient(135deg,#34D399,#10B981)}
.hiw-badge-gold{background:linear-gradient(135deg,#FCD34D,#F59E0B)}
.hiw-badge-violet{background:linear-gradient(135deg,#C084FC,#A855F7)}
.hiw-badge-teal{background:linear-gradient(135deg,#2DD4BF,#0D9488)}
.hiw-badge-rose{background:linear-gradient(135deg,#FB7185,#F43F5E)}
.hiw-item-body{min-width:0}
.hiw-item-title{font-size:0.73rem;font-weight:900;color:#1e293b;line-height:1.2;text-shadow:none}
.hiw-item-desc{font-size:0.62rem;color:#475569;line-height:1.35;margin-top:2px}
.mcard-text-block{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;width:100%}
/* Coming Soon locked card */
.mcard.coming-soon{opacity:0.45;filter:grayscale(0.7)}
.cs-lock-icon{font-size:2.6rem;line-height:1;display:flex;align-items:center;justify-content:center;width:80px;height:85px;margin:2px 0;flex-shrink:0}
.cs-unlock-bar{width:85%;height:8px;background:rgba(255,255,255,0.25);border-radius:4px;overflow:hidden;margin:4px 0;border:1px solid rgba(255,255,255,0.3)}
.cs-unlock-fill{height:100%;background:linear-gradient(90deg,rgba(255,255,255,0.7),rgba(255,255,255,0.95));border-radius:4px;transition:width 0.8s ease}
.mcard{
position:relative;
border-radius:var(--r-sm);
padding:20px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
cursor:pointer;
overflow:hidden;
border:4px solid rgba(255,255,255,0.95);
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px rgba(0,0,0,0.22);
transition:all 0.3s ease;
}
.mcard:hover{
transform:translateY(-6px);
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 16px 36px rgba(0,0,0,0.28);
}
.mcard::before{
content:'';
position:absolute;
inset:0;
background-image:radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size:60px 60px;
opacity:0.2;
pointer-events:none;
z-index:1;
}
.mcard::after{
content:'';
position:absolute;
bottom:-25px;
right:-25px;
width:160px;
height:160px;
background-image:url('data:image/svg+xml,');
background-size:100%;
opacity:0.5;
pointer-events:none;
z-index:1;
}
/* Scenario Play card */
.mcard.active{
background:linear-gradient(145deg,#16a34a,#15803d);
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px rgba(21,128,61,0.38);
}
.mcard.active:hover{
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 16px 36px rgba(21,128,61,0.48);
}
.mcard.active::after{
background-image:url('data:image/svg+xml,');
}
/* Business Challenge card */
.mcard.challenge{
background:linear-gradient(145deg,#d97706,#b45309);
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px rgba(180,83,9,0.38);
}
.mcard.challenge:hover{
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 16px 36px rgba(180,83,9,0.48);
}
.mcard.challenge::after{
background-image:url('data:image/svg+xml,');
}
/* Coming Soon card */
.mcard.coming-soon{
background:#7C3AED;
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px rgba(124,58,237,0.35);
cursor:not-allowed;
pointer-events:none;
}
.mcard.coming-soon:hover{
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px rgba(124,58,237,0.35);
transform:none;
}
.mcard.coming-soon::after{
background-image:url('data:image/svg+xml,');
}
.mcard-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
width:100%;
height:100%;
gap:0;
text-align:center;
padding:10px 10px;
}
.mcard-icon{
width:62px;
height:66px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
flex-shrink:0;
}
.mcard.active .mcard-icon{
width:65px;
height:66px;
}
.mcard-title{
font-size:1.05rem;
font-weight:800;
color:#fff;
margin:2px 0;
padding:0;
letter-spacing:0.3px;
text-shadow:0 2px 4px rgba(0,0,0,0.15);
line-height:1.15;
}
.mcard-sub{
font-size:0.7rem;
color:rgba(255,255,255,0.9);
line-height:1.25;
text-shadow:0 1px 3px rgba(0,0,0,0.1);
margin:1px 0;
}
.mcard-progress-copy{
font-size:0.58rem;
font-weight:700;
color:rgba(255,255,255,0.78);
letter-spacing:0.02em;
margin:4px 0 0;
text-shadow:none;
opacity:0.9;
}
.mcard .prog-bar{
width:85%;
height:7px;
background:rgba(255,255,255,0.5);
border:1px solid rgba(255,255,255,0.6);
border-radius:5px;
overflow:hidden;
margin:2px 0;
display:block;
flex-shrink:0;
box-shadow:0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
.mcard .prog-fill{
height:100%;
background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
border-radius:3px;
box-shadow:inset 0 1px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,0.2);
}
.progress-badge{
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.25);
color:#fff;
border-radius:50px;
padding:3px 10px;
font-size:0.65rem;
font-weight:700;
margin:1px 0;
text-align:center;
white-space:nowrap;
}
.prog-bar{
width:100%;
height:10px;
background:rgba(0,0,0,0.1);
border-radius:6px;
overflow:hidden;
margin-top:6px;
border:1px solid rgba(0,0,0,0.08);
}
.prog-fill{
height:100%;
background:linear-gradient(90deg,#0EA5E9,#38BDF8);
border-radius:6px;
transition:width 0.8s cubic-bezier(.4,0,.2,1);
box-shadow:0 1px 4px rgba(14,165,233,0.4);
}
.mcard-start-btn{
display:inline-block;
background:linear-gradient(135deg,#FFE600,#FFB800);
color:#1a1a00;
border:none;
padding:8px 26px;
border-radius:50px;
font-weight:800;
font-size:0.88rem;
cursor:pointer;
margin-top:4px;
margin-bottom:0;
transition:all 0.2s ease;
box-shadow:0 4px 0 rgba(0,0,0,0.22),0 6px 16px rgba(0,0,0,0.18);
text-decoration:none;
letter-spacing:0.2px;
}
.mcard-start-btn:hover{
background:linear-gradient(135deg,#FFF000,#FFC400);
transform:translateY(-2px);
box-shadow:0 6px 0 rgba(0,0,0,0.22),0 10px 20px rgba(0,0,0,0.2);
}
.mcard-start-btn:active{
transform:translateY(2px);
box-shadow:0 2px 0 rgba(0,0,0,0.22);
}
/* ── DAILY MISSION STRIP ── */
.daily-mission-strip{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#FFFBEB,#FEF3C7);border:1.5px solid #FCD34D;border-radius:16px;padding:14px 16px;margin-bottom:12px}
.dm-icon{font-size:1.8rem;flex-shrink:0;line-height:1}
.dm-body{flex:1;min-width:0}
.dm-title{font-size:0.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.7px;color:#92400E;margin-bottom:2px}
.dm-focus{font-size:0.9rem;font-weight:700;color:#78350F;line-height:1.4}
.dm-badge{flex-shrink:0;background:#FCD34D;color:#78350F;font-size:0.68rem;font-weight:800;border-radius:50px;padding:4px 10px;white-space:nowrap}
/* ── DAILY PROG ── */
.prog-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.prog-lbl{font-size:0.95rem;font-weight:700;color:var(--text)}
.prog-num{font-size:0.78rem;font-weight:700;color:var(--sky3)}
.home-progress-note{
font-size:0.66rem;
color:var(--muted2);
margin-top:5px;
line-height:1.35;
}
.prog-bar{height:8px;background:rgba(255,255,255,0.3);border-radius:4px;overflow:hidden;opacity:1;transition:opacity 0.3s ease;margin:8px 0;display:block}
.mcard:hover .prog-bar{opacity:1}
.prog-fill{height:100%;background:rgba(255,255,255,0.6);border-radius:4px;transition:width 0.6s ease;box-shadow:0 0 8px rgba(255,255,255,0.4)}
/* ── BIG PLAY BUTTON ── */
.big-play{width:100%;padding:15px;background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;border:none;border-radius:var(--r-sm);font-size:1.08rem;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(14,165,233,0.35);transition:transform 0.13s,box-shadow 0.13s}
.big-play:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(14,165,233,0.45)}
.big-play:active{transform:scale(0.97)}
.big-play:disabled{background:linear-gradient(135deg,#94A3B8,#64748B);box-shadow:none;cursor:not-allowed;transform:none}
/* ── SCENARIO LAYOUT ── */
.sc-grid{display:grid;grid-template-columns:1fr 196px;gap:10px;align-items:stretch;height:100%;overflow:hidden}
.sc-main{min-width:0;padding:16px;background:var(--card);border-radius:16px;box-shadow:inset 0 0 0 2px var(--sky);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;display:flex;flex-direction:column}
.sc-main::-webkit-scrollbar{display:none}
.sc-main--compact{overflow:hidden;padding:14px}
.sc-main--compact .sc-top{padding:10px 12px;margin-bottom:5px}
.sc-main--compact .sc-icon-ring{width:84px;height:84px;font-size:2.5rem;margin:0 auto 6px}
.sc-main--compact .sc-name{font-size:0.94rem;margin-bottom:2px}
.sc-main--compact .sc-body{font-size:0.9rem;line-height:1.42}
.sc-main--compact .sc-mode-note,
.sc-main--compact .sc-fill-card,
.sc-main--compact .sc-sequence-card,
.sc-main--compact .sc-quote-card{padding:8px 10px;margin:2px 0 6px}
.sc-main--compact .choices{gap:5px}
.sc-main--compact .cho-btn{padding:9px 11px;font-size:0.81rem}
.sc-main--compact .go-btn{margin-top:6px;padding:10px}
.sc-main--sequence{overflow:hidden;padding:12px}
.sc-main--sequence .sc-top{padding:9px 11px;margin-bottom:5px}
.sc-main--sequence .sc-icon-ring{width:78px;height:78px;font-size:2.25rem;margin:0 auto 5px}
.sc-main--sequence .sc-name{font-size:0.92rem;margin-bottom:2px}
.sc-main--sequence .sc-body{font-size:0.88rem;line-height:1.38}
.sc-main--sequence .sc-sequence-card{padding:8px 10px;margin:2px 0 6px}
.sc-main--sequence .choices{gap:5px}
.sc-main--sequence .cho-btn--sequence-pick{padding:8px 10px}
.sc-main--sequence .go-btn{margin-top:6px;padding:10px}
.sc-top{background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);border-radius:var(--r);padding:14px;margin-bottom:7px;text-align:center;position:relative;overflow:hidden;flex:1;display:flex;flex-direction:column;justify-content:center;border:1.5px solid #CFE5F8;box-shadow:0 12px 28px rgba(15,23,42,0.08)}
.sc-top::before{content:'';position:absolute;right:-18px;top:-18px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,0.12),rgba(14,165,233,0.02) 65%,transparent 70%)}
.local-question-watermark{position:absolute;top:10px;left:10px;z-index:4;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:rgba(15,23,42,0.78);color:#fff;font-size:0.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 16px rgba(15,23,42,0.16);pointer-events:none}
.local-question-watermark::before{content:'●';color:#FBBF24;font-size:0.62rem;line-height:1}
.sc-icon-ring{width:108px;height:108px;border-radius:50%;background:linear-gradient(180deg,#E0F2FE,#F0F9FF);display:flex;align-items:center;justify-content:center;font-size:3.3rem;margin:0 auto 10px;animation:popIn 0.3s cubic-bezier(.3,1.5,.5,1);box-shadow:inset 0 0 0 1.5px #BAE6FD}
.sc-cat{font-size:0.66rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#2563EB;margin-bottom:4px}
.sc-subcat{font-size:0.58rem;font-weight:600;color:#7C3AED;opacity:0.85;letter-spacing:0.4px}
.sc-name{font-size:1.05rem;font-weight:900;color:#0F172A;margin-bottom:4px;line-height:1.3;text-align:left;width:100%}
.sc-diff{display:inline-block;border-radius:50px;padding:2px 9px;font-size:0.66rem;font-weight:700;margin-bottom:5px}
.d-easy{background:rgba(16,185,129,0.28);color:#D1FAE5}
.d-medium{background:rgba(245,158,11,0.28);color:#FEF3C7}
.d-hard{background:rgba(239,68,68,0.28);color:#FEE2E2}
.d-expert{background:rgba(139,92,246,0.28);color:#EDE9FE}
.sc-body{font-size:1rem;color:#334155;line-height:1.6;text-align:left}
.choices{display:flex;flex-direction:column;gap:7px}
.cho-btn{display:flex;align-items:center;gap:9px;background:var(--card);border:1.5px solid var(--border2);border-radius:var(--r-sm);padding:11px 13px;cursor:pointer;text-align:left;font-size:0.88rem;font-weight:600;color:var(--text);transition:all 0.14s;line-height:1.4;width:100%}
.cho-btn:hover{border-color:var(--sky);background:var(--sky-lt);transform:translateX(3px)}
.cho-btn:active{transform:scale(0.98)}
.cho-btn:disabled{opacity:0.45;cursor:not-allowed;transform:none!important}
.cho-copy{display:block;flex:1}
.sc-mode-note,.sc-fill-card,.sc-sequence-card,.sc-quote-card{
border:2px solid #CFE5F8;
background:linear-gradient(180deg,#FFFFFF 0%,#F6FBFF 100%);
border-radius:18px;
padding:13px 15px;
margin:5px 0 11px;
color:#334155;
box-shadow:0 6px 16px rgba(14,165,233,0.08);
}
.sc-mode-note{
font-size:0.92rem;
font-weight:900;
color:#0F172A;
line-height:1.35;
border-color:#BFE1FA;
background:linear-gradient(180deg,#F0F9FF 0%,#FFFFFF 100%);
}
.sc-fill-label,.sc-sequence-label,.sc-quote-label{
display:inline-flex;
align-items:center;
min-height:24px;
padding:3px 9px;
border-radius:999px;
font-size:0.67rem;
font-weight:900;
letter-spacing:0.05em;
text-transform:uppercase;
color:#0F4C81;
background:#E0F2FE;
margin-bottom:7px;
}
.sc-fill-sentence{
font-size:0.98rem;
font-weight:900;
color:#0F172A;
line-height:1.45;
}
.sc-fill-help,.sc-sequence-help,.sc-quote-copy{
font-size:0.86rem;
font-weight:800;
color:#334155;
margin-top:6px;
line-height:1.35;
}
.sc-quote-card{
border-color:#F7D7A8;
background:linear-gradient(180deg,#FFF9F1 0%,#FFFFFF 100%);
}
.sc-quote-label{
background:#FEF3C7;
color:#9A3412;
}
.sc-quote-copy{
color:#7C2D12;
}
.sc-fill-card{
border-color:#C7E0FF;
background:linear-gradient(180deg,#F4F9FF 0%,#FFFFFF 100%);
}
.sc-fill-label{
background:#DBEAFE;
color:#1D4ED8;
}
.sc-sequence-card{
border-color:#BFDBFE;
background:linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%);
}
.sc-sequence-label{
background:#DBEAFE;
color:#1D4ED8;
}
.sc-body + .sc-fill-card,.sc-body + .sc-sequence-card,.sc-body + .sc-quote-card,.sc-body + .sc-mode-note{margin-top:10px}
.sc-sequence-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
.sc-sequence-picked{display:flex;align-items:flex-start;gap:6px;background:#FFFFFF;border:1.5px solid #BFE1FA;border-radius:12px;padding:7px 8px;min-width:0}
.sc-sequence-picked-badge{flex-shrink:0;background:#DBEAFE;color:#1D4ED8;border-radius:999px;padding:3px 8px;font-size:0.64rem;font-weight:900}
.sc-sequence-picked-copy{font-size:0.78rem;font-weight:700;color:#0F172A;line-height:1.25;min-width:0}
.sc-sequence-empty{margin-top:8px;padding:8px 9px;border-radius:12px;background:#F8FAFC;border:1.5px dashed #BFDBFE;color:#475569;font-size:0.76rem;font-weight:700}
.sc-sequence-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.sc-sequence-reset,.sc-sequence-submit{border:none;border-radius:999px;padding:7px 10px;font-size:0.7rem;font-weight:800;cursor:pointer}
.sc-sequence-reset{background:#E2E8F0;color:#334155}
.sc-sequence-submit{background:#BFDBFE;color:#1E3A8A}
.sc-sequence-submit.is-ready{background:linear-gradient(135deg,#0EA5E9,#2563EB);color:#fff}
.sc-sequence-submit:disabled{opacity:0.55;cursor:not-allowed}
.choices--dialogue .cho-btn--dialogue{
background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
border-radius:18px;
padding:12px 14px;
align-items:flex-start;
}
.choices--mistake .cho-btn--mistake{
background:linear-gradient(180deg,#FFFDF8 0%,#FFF7ED 100%);
border-color:#F5D7B2;
}
.choices--chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px}
.cho-btn--chip{
justify-content:center;
text-align:center;
border-radius:999px;
padding:10px 12px;
font-weight:800;
background:linear-gradient(180deg,#FFFFFF 0%,#F1F5F9 100%);
}
.choices--sequence{gap:8px}
.cho-btn--sequence-pick{
align-items:flex-start;
border-radius:16px;
padding:10px 12px;
background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
}
.cho-btn--sequence-pick .cho-copy{font-weight:800;color:#0F3F6E;font-size:0.8rem;line-height:1.28}
.cho-ltr{width:25px;height:25px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.76rem;font-weight:700;color:#fff;flex-shrink:0}
.l-a{background:var(--sky)}.l-b{background:var(--mint)}.l-c{background:var(--amber)}
/* ── SIDEBAR ── ENHANCED */
.sidebar{display:flex;flex-direction:column;gap:12px;overflow:hidden}
/* ── SIDEBAR COMPACT: inside scenario/challenge play ── */
.sc-grid .sidebar{gap:8px;height:100%}
.sc-grid .sidebar .panel{padding:10px 12px}
.sc-grid .sidebar .panel:first-child{flex:0 0 auto}
.sc-grid .sidebar .panel:last-child{flex:0 0 auto;display:flex;flex-direction:column;overflow:visible}
.sc-grid .sidebar .panel:last-child .rw-list{flex:none;display:flex;flex-direction:column;gap:5px;justify-content:flex-start}
.sc-grid .sidebar .panel-h{font-size:0.82rem;margin-bottom:5px;padding-bottom:5px}
.sc-grid .sidebar .cur-pos-box{padding:6px 10px;margin-bottom:6px;font-size:0.82rem}
.sc-grid .sidebar .cur-pos-lbl{font-size:0.64rem}
.sc-grid .sidebar .prow{padding:2px 0;margin-bottom:2px;display:flex;align-items:center;gap:6px}
.sc-grid .sidebar .plbl{font-size:0.74rem;min-width:70px}
.sc-grid .sidebar .pnums{font-size:0.72rem;min-width:48px;text-align:right}
.sc-grid .sidebar .pbar{height:6px;flex:1}
/* Gamified reward rows — mini power-up cards, fill height equally */
.sc-grid .sidebar .rw-row2{
flex:0 0 auto;
min-height:0;
padding:6px 8px;
border-radius:9px;
background:var(--bg2);
border:1px solid var(--border) !important;
border-left:3px solid var(--sky) !important;
border-bottom:1px solid var(--border) !important;
gap:7px;
align-items:center;
}
.sc-grid .sidebar .rw-row2:nth-child(1){border-left-color:#F59E0B !important}
.sc-grid .sidebar .rw-row2:nth-child(2){border-left-color:var(--sky) !important}
.sc-grid .sidebar .rw-row2:nth-child(3){border-left-color:#10B981 !important}
.sc-grid .sidebar .rw-left{min-width:0}
.sc-grid .sidebar .rw-title{font-size:0.68rem;font-weight:800;margin-bottom:1px;color:var(--text);line-height:1.12}
.sc-grid .sidebar .rw-meta{font-size:0.56rem;gap:2px;color:var(--muted2);line-height:1.1;flex-wrap:wrap}
.sc-grid .sidebar .rw-buy-btn{padding:4px 9px;font-size:0.64rem;font-weight:700;border-radius:8px}
.panel{
background:var(--card);
border-radius:var(--r);
padding:16px;
box-shadow:0 4px 16px rgba(14,165,233,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
border:1px solid var(--border);
transition:all 0.25s ease;
}
.panel:hover{box-shadow:0 8px 24px rgba(14,165,233,0.12), inset 0 1px 0 rgba(255,255,255,0.8);}
/* Hide player profile card from home sidebar - Option 1 */
.home-side > div:first-child,
.home-side > .card:first-child,
.sidebar > .card:first-of-type{
display:none !important;
}
.home-side .panel,.home-progress-card,.home-side .card{border:2px solid #D1D5DB}
.feature-card,.tips-card,.side-guide-card{border:2px solid #D1D5DB}
.panel-h{font-size:0.82rem;font-weight:700;color:var(--text);margin-bottom:9px;display:flex;align-items:center;gap:4px;padding-bottom:9px;border-bottom:1px solid var(--border)}
/* Role journey box (replaces old cur-pos-box) */
.role-journey-box{display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(135deg,var(--sky-lt),var(--purple-lt));border:1.5px solid var(--sky-md);border-radius:12px;padding:14px 12px;margin-bottom:10px}
.role-journey-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px}
.role-journey-item.role-journey-target .role-journey-name{color:var(--sky3);font-weight:800}
.role-journey-item.role-journey-target img,.role-journey-item.role-journey-target svg{opacity:0.72;filter:grayscale(15%)}
.role-journey-lbl{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted2)}
.role-journey-name{font-size:0.72rem;font-weight:700;color:var(--text);text-align:center;line-height:1.2;margin-top:2px}
.role-journey-arrow{font-size:1.6rem;color:var(--sky3);flex-shrink:0;font-weight:900}
.role-journey-glow{display:flex;align-items:center;justify-content:center;border-radius:50%;padding:6px;animation:currentRoleGlow 1.8s ease-in-out infinite alternate;background:radial-gradient(circle,rgba(255,220,50,0.35) 0%,rgba(255,165,0,0.1) 60%,transparent 80%)}
@keyframes currentRoleGlow{0%{box-shadow:0 0 12px 4px rgba(255,200,0,0.55),0 0 28px 10px rgba(255,160,0,0.3);filter:drop-shadow(0 0 8px rgba(255,200,0,0.8))}100%{box-shadow:0 0 22px 10px rgba(255,200,0,0.75),0 0 48px 20px rgba(255,140,0,0.45);filter:drop-shadow(0 0 18px rgba(255,200,0,1))}}
/* Streak card */
.home-streak-card{background:linear-gradient(135deg,#FFF7ED,#FEF3C7);border:2px solid #FDE68A}
.streak-card-top{display:flex;align-items:center;gap:10px}
.streak-fire-icon{font-size:2rem;line-height:1;flex-shrink:0}
.streak-card-body{flex:1;min-width:0}
.streak-card-title{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#92400E;margin-bottom:1px}
.streak-card-count{font-size:1.1rem;font-weight:900;color:#B45309}
/* Hero chips label */
.hero-chips-label{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:rgba(255,255,255,0.75);margin-bottom:5px;margin-top:12px}
.cur-pos-box{background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;border-radius:var(--r-xs);padding:7px 9px;text-align:center;font-weight:700;font-size:0.78rem;line-height:1.4;margin-bottom:9px}
.cur-pos-lbl{font-size:0.62rem;opacity:0.8;margin-bottom:1px}
.prow{display:flex;align-items:center;gap:5px;padding:3px 5px;margin-bottom:3px;border-radius:8px;transition:background 0.2s}
.prow.row-met{background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.2)}
.prow-check{font-size:0.65rem;width:16px;text-align:center;flex-shrink:0;color:var(--mint);font-weight:900}
.pem{font-size:0.78rem;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.plbl{font-size:0.7rem;color:var(--muted);min-width:42px;font-weight:600}
.plbl.plbl-met{color:var(--mint);font-weight:700}
.pbar{flex:1;height:7px;background:var(--sky-lt);border-radius:4px;overflow:hidden}
.pbar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--sky),var(--mint));transition:width 0.48s ease;box-shadow:0 0 6px rgba(16,185,129,0.5)}
.pnums{font-size:0.66rem;font-weight:700;white-space:nowrap;min-width:40px;text-align:right}
.pnums.met{color:var(--mint)}.pnums.unmet{color:var(--coral)}
.promo-ready-banner{background:linear-gradient(135deg,#065F46,#047857);color:#fff;border-radius:10px;padding:8px 12px;text-align:center;font-size:0.78rem;font-weight:800;margin-top:10px;animation:pulseBanner 1.5s ease-in-out infinite alternate;letter-spacing:0.3px}
@keyframes pulseBanner{0%{box-shadow:0 0 8px rgba(52,211,153,0.4)}100%{box-shadow:0 0 18px rgba(52,211,153,0.75)}}
.rw-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)}
.rw-row:last-child{border:none}
.rw-info{flex:1}
.rw-name{font-size:0.76rem;font-weight:700;color:var(--text)}
.rw-sub{font-size:0.65rem;color:var(--muted2)}
.rw-btn{background:var(--sky-lt);color:var(--sky3);border:1.5px solid var(--sky-md);border-radius:50px;padding:4px 9px;font-size:0.7rem;font-weight:700;cursor:pointer;transition:all 0.12s;white-space:nowrap}
.rw-btn:hover{background:var(--sky);color:#fff}
.rw-btn:disabled{opacity:0.4;cursor:not-allowed;background:var(--border);border-color:var(--border);color:var(--muted2)}
.safety-active{background:var(--mint-lt);color:#065F46;border:1.5px solid var(--mint-md);border-radius:var(--r-xs);padding:5px 7px;font-size:0.7rem;font-weight:700;text-align:center;margin-top:4px}
/* Compact 3-column reward grid */
.rw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:2px 0}
.rw-card{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;padding:6px 4px;text-align:center}
.rw-card-icon{font-size:1.1rem;line-height:1}
.rw-card-name{font-size:0.6rem;font-weight:700;color:var(--text);line-height:1.2}
.rw-card-effect{font-size:0.55rem;color:var(--muted2);line-height:1.2}
.rw-card-cost{font-size:0.6rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:2px;justify-content:center}
.rw-card-btn{background:var(--sky-lt);color:var(--sky3);border:1.5px solid var(--sky-md);border-radius:50px;padding:2px 8px;font-size:0.6rem;font-weight:700;cursor:pointer;transition:all 0.12s;margin-top:2px;width:100%}
.rw-card-btn:hover{background:var(--sky);color:#fff}
.rw-card-btn:disabled{opacity:0.4;cursor:not-allowed;background:var(--border);border-color:var(--border);color:var(--muted2)}
/* Vertical reward rows */
.rw-list{display:flex;flex-direction:column;gap:4px}
.rw-row2{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.rw-row2:last-child{border-bottom:none}
.rw-left{flex:1;min-width:0}
.rw-title{font-size:0.88rem;font-weight:700;color:var(--text);margin-bottom:3px}
.rw-meta{font-size:0.74rem;color:var(--muted2);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rw-buy-btn{background:var(--sky-lt);color:var(--sky3);border:1.5px solid var(--sky-md);border-radius:50px;padding:5px 14px;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.12s;white-space:nowrap;flex-shrink:0}
.rw-buy-btn:hover{background:var(--sky);color:#fff}
.rw-buy-btn:disabled{opacity:0.4;cursor:not-allowed;background:var(--border);border-color:var(--border);color:var(--muted2)}
.rewards-screen{max-width:100%;width:100%}
.rewards-shell{display:flex;flex-direction:column;gap:12px;width:100%}
.rewards-hero{display:flex;align-items:stretch;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#0f766e 0%,#155e75 48%,#1d4ed8 100%);border-radius:22px;padding:16px 18px;box-shadow:0 10px 28px rgba(14,116,144,0.18);position:relative;overflow:hidden}
.rewards-hero::before{content:'✦ ✧ ★';position:absolute;top:10px;right:16px;font-size:.72rem;letter-spacing:6px;color:rgba(255,255,255,.24)}
.rewards-hero::after{content:'';position:absolute;bottom:-32px;right:-18px;width:118px;height:118px;border-radius:50%;background:rgba(255,255,255,.08)}
.rewards-hero-copy{position:relative;z-index:1;flex:1;min-width:0}
.rewards-hero-kicker{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:4px 10px;font-size:.66rem;font-weight:800;color:#ECFEFF;text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px}
.rewards-hero-title{font-size:1.28rem;font-weight:900;color:#fff;line-height:1.05;margin-bottom:4px}
.rewards-hero-sub{font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.88);max-width:440px}
.rewards-balance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:320px;max-width:360px;position:relative;z-index:1}
.rewards-balance-card{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.18);border-radius:16px;padding:10px 12px;color:#fff;backdrop-filter:blur(4px);min-width:0}
.rewards-balance-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.15rem}
.rewards-balance-label{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:rgba(255,255,255,.72)}
.rewards-balance-value{font-size:1.06rem;font-weight:900;color:#fff;line-height:1.05}
.rewards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rewards-shop-card{background:#fff;border-radius:20px;padding:14px 14px 13px;border:2px solid #E5E7EB;box-shadow:0 8px 22px rgba(15,23,42,.08);display:flex;flex-direction:column;gap:8px;min-width:0;position:relative;overflow:hidden}
.rewards-shop-card::before{content:'';position:absolute;top:-30px;right:-24px;width:96px;height:96px;border-radius:50%;opacity:.14}
.rewards-shop-card--spin{border-color:#FCD34D;box-shadow:0 8px 22px rgba(245,158,11,.12)}
.rewards-shop-card--spin::before{background:#F59E0B}
.rewards-shop-card--boss{border-color:#C4B5FD;box-shadow:0 8px 22px rgba(124,58,237,.12)}
.rewards-shop-card--boss::before{background:#7C3AED}
.rewards-shop-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;position:relative;z-index:1}
.rewards-shop-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;background:#F8FAFC;color:#475569}
.rewards-shop-cost{display:block;max-width:138px;font-size:.7rem;font-weight:800;color:var(--text);line-height:1.35;text-align:right}
.rewards-shop-icon{font-size:2rem;line-height:1;position:relative;z-index:1}
.rewards-shop-title{font-size:1rem;font-weight:900;color:var(--text);line-height:1.1;position:relative;z-index:1}
.rewards-shop-desc{font-size:.72rem;color:var(--muted2);line-height:1.5;position:relative;z-index:1}
.rewards-shop-pool{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.rewards-pill{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:999px;background:#F8FAFC;border:1px solid #E2E8F0;font-size:.62rem;font-weight:700;color:#475569;line-height:1.2}
.rewards-progress-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.68rem;font-weight:800;color:var(--text);position:relative;z-index:1}
.rewards-progress-label{color:var(--muted2);text-transform:uppercase;letter-spacing:.6px}
.rewards-progress-value{color:#6D28D9}
.rewards-progress-bar{height:8px;border-radius:999px;background:#EDE9FE;overflow:hidden;position:relative;z-index:1}
.rewards-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#8B5CF6,#C084FC);transition:width .3s ease}
.rewards-shop-btn{margin-top:auto;background:linear-gradient(135deg,#0EA5E9,#2563EB);color:#fff;border:none;border-radius:14px;padding:10px 12px;font-size:.78rem;font-weight:800;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;box-shadow:0 8px 18px rgba(37,99,235,.18);position:relative;z-index:1}
.rewards-shop-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(37,99,235,.24)}
.rewards-shop-btn--boss{background:linear-gradient(135deg,#7C3AED,#A855F7);box-shadow:0 8px 18px rgba(124,58,237,.18)}
.rewards-shop-btn--boss:hover{box-shadow:0 10px 20px rgba(124,58,237,.24)}
.rewards-shop-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.rewards-footnote{font-size:.68rem;color:var(--muted2);text-align:center;padding:0 6px}
.lucky-spin-ov{position:fixed;inset:0;z-index:10020;background:rgba(15,23,42,.58);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px}
.lucky-spin-box{width:min(100%,420px);background:linear-gradient(135deg,#0f766e 0%,#155e75 48%,#1d4ed8 100%);border-radius:24px;padding:16px;box-shadow:0 18px 42px rgba(15,23,42,.32);color:#fff;position:relative;overflow:hidden}
.lucky-spin-box::before{content:'✦ ✧ ★';position:absolute;top:12px;right:16px;font-size:.72rem;letter-spacing:6px;color:rgba(255,255,255,.26)}
.lucky-spin-top{position:relative;z-index:1;margin-bottom:12px}
.lucky-spin-kicker{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:4px 10px;font-size:.64rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;margin-bottom:8px}
.lucky-spin-title{font-size:1.12rem;font-weight:900;line-height:1.1}
.lucky-spin-reel-wrap{position:relative;z-index:1;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.18);border-radius:18px;padding:14px 12px 12px;margin-bottom:12px}
.lucky-spin-pointer{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:.9rem;color:#FDE68A}
.lucky-spin-reel{min-height:96px;display:flex;align-items:center;justify-content:center}
.lucky-spin-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;animation:luckySpinPulse .18s ease}
.lucky-spin-card-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.lucky-spin-card-name{font-size:.74rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.84)}
.lucky-spin-card-value{font-size:1.1rem;font-weight:900;color:#fff}
.lucky-spin-result{position:relative;z-index:1;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.2);border-radius:18px;padding:12px 12px 10px;text-align:center;margin-bottom:12px;animation:slideUp .28s ease}
.lucky-spin-result-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px}
.lucky-spin-result-label{font-size:.68rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:3px}
.lucky-spin-result-title{font-size:1.05rem;font-weight:900;color:#fff;margin-bottom:3px}
.lucky-spin-result-amount{font-size:1.18rem;font-weight:900;color:#FDE68A;margin-bottom:4px}
.lucky-spin-result-detail{font-size:.72rem;line-height:1.45;color:rgba(255,255,255,.84)}
.lucky-spin-btn{width:100%;border:none;border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.18);color:#fff;font-size:.8rem;font-weight:800;cursor:pointer;position:relative;z-index:1;transition:transform .12s ease,opacity .12s ease}
.lucky-spin-btn:disabled{opacity:.7;cursor:wait}
.lucky-spin-btn:not(:disabled):hover{transform:translateY(-1px);background:rgba(255,255,255,.28)}
.lucky-spin-done .lucky-spin-reel-wrap{box-shadow:0 0 0 2px rgba(253,230,138,.35)}
@keyframes luckySpinPulse{0%{transform:scale(.92);opacity:.45}100%{transform:scale(1);opacity:1}}
/* ── RESULT ── */
.res-center{text-align:center}
.res-icon{font-size:3.2rem;display:block;margin:0 auto 9px;animation:bounceIn 0.5s cubic-bezier(.3,1.5,.5,1)}
.res-title{font-size:1.25rem;font-weight:800;margin-bottom:5px;color:var(--sky-dk)}
.res-text{font-size:0.87rem;color:var(--muted);line-height:1.65;margin-bottom:14px}
.chips{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:13px}
.chip{border-radius:50px;padding:5px 12px;font-weight:700;font-size:0.8rem;display:flex;align-items:center;gap:4px}
.chip.pos{background:var(--green-lt);color:#166534}
.chip.neg{background:var(--coral-lt);color:#991B1B}
.chip.neu{background:var(--border);color:var(--muted)}
.stat-now{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}
.sn{border-radius:14px;padding:16px 12px;text-align:center;border:2px solid rgba(255,255,255,0.3);min-height:100px;display:flex;flex-direction:column;justify-content:center}
.sn.c{background:var(--amber-lt)}.sn.u{background:var(--sky-lt)}.sn.h{background:var(--purple-lt)}.sn.bp{background:#FFF3CD}
.sn-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%}
.sn-desc{font-size:0.9rem;font-weight:600;color:var(--text);text-align:center;line-height:1.4;display:flex;align-items:center;justify-content:center}
.sn-val{font-size:1.4rem;font-weight:900;line-height:1}
.sn-change-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;font-weight:700;font-size:0.8rem}
.sn-change-emoji{font-size:1rem;display:inline-block}
.sn-change-amt{min-width:22px;text-align:center}
.sn-change-badge.pos{background:#D1FAE5;color:#059669}
.sn-change-badge.neg{background:#FEE2E2;color:#DC2626}
.sn-change-badge.neu{background:#E2E8F0;color:#64748B;animation:steadyPulse 2s ease-in-out infinite}
@keyframes steadyPulse{0%,100%{transform:scale(1);opacity:0.8}50%{transform:scale(1.05);opacity:1}}
.sn-lbl{font-size:0.7rem;font-weight:600;color:var(--muted)}
.sn.c .sn-val{color:#92400E}.sn.c .sn-lbl{color:#B45309}
.sn.u .sn-val{color:var(--sky3)}.sn.u .sn-lbl{color:var(--sky2)}
.sn.h .sn-val{color:#5B21B6}.sn.h .sn-lbl{color:#7C3AED}
.sn.bp .sn-val{color:#B8860B}.sn.bp .sn-lbl{color:#DAA520}
/* ── GAMIFIED RESULT REWARD CARDS ── */
.res-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;margin:0 auto 12px;animation:resBounce 0.6s cubic-bezier(.3,1.5,.5,1)}
.res-header-win{background:linear-gradient(135deg,#D1FAE5,#A7F3D0);box-shadow:0 0 0 4px #10B981,0 0 28px rgba(16,185,129,0.4)}
.res-header-loss{background:linear-gradient(135deg,#FEE2E2,#FECACA);box-shadow:0 0 0 4px #EF4444,0 0 28px rgba(239,68,68,0.25)}
.res-icon-big{font-size:2.6rem;line-height:1}
@keyframes resBounce{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.2) rotate(5deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.res-bonus{background:var(--mint-lt);color:#065F46;border-radius:50px;padding:4px 14px;font-size:0.75rem;font-weight:700;display:inline-block;margin-bottom:12px;animation:slideUp 0.4s ease 0.3s both}
.rw-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.rw-card{border-radius:18px;padding:16px 12px;text-align:center;position:relative;overflow:hidden;opacity:0;animation:rwCardIn 0.5s cubic-bezier(.3,1.5,.5,1) both}
.rw-card.gain{background:linear-gradient(135deg,#DCFCE7,#BBF7D0);border:2px solid #22C55E;box-shadow:0 4px 16px rgba(34,197,94,0.25)}
.rw-card.loss{background:linear-gradient(135deg,#FEE2E2,#FECACA);border:2px solid #F87171;box-shadow:0 4px 16px rgba(248,113,113,0.2);animation:rwCardIn 0.5s cubic-bezier(.3,1.5,.5,1) both,rwShake 0.5s ease 0.6s both}
.rw-card.neutral{background:linear-gradient(135deg,#F1F5F9,#E2E8F0);border:2px solid #CBD5E1}
@keyframes rwCardIn{0%{opacity:0;transform:scale(0.6) translateY(20px)}70%{transform:scale(1.06) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes rwShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.rw-card-icon{font-size:1.8rem;margin-bottom:4px}
.rw-card-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:4px}
.rw-card-val{font-size:1.6rem;font-weight:900;color:var(--text);line-height:1;margin-bottom:6px}
.rw-card-change{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-weight:800;font-size:0.9rem}
.rw-card.gain .rw-card-change{background:#16A34A;color:#fff}
.rw-card.loss .rw-card-change{background:#DC2626;color:#fff}
.rw-card.neutral .rw-card-change{background:#94A3B8;color:#fff}
.rw-arrow{font-size:0.85rem}
.rw-arrow.arrow-up{animation:arrowBounce 0.8s ease 0.5s both}
@keyframes arrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.rw-burst{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.9);transform:translate(-50%,-50%) scale(0);animation:burstOut 0.6s ease 0.2s both}
@keyframes burstOut{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(-50%,-50%) scale(12);opacity:0}}
.res-continue-btn{margin-top:4px;animation:slideUp 0.4s ease 0.7s both}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
/* ── UNIFIED LESSON CARD ── */
.lesson-card{position:relative;border-radius:18px;margin-bottom:10px;overflow:hidden;animation:slideUp 0.4s ease 0.4s both;box-shadow:0 10px 28px rgba(15,23,42,0.12);text-align:left}
.lesson-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at top right,rgba(255,255,255,0.34),transparent 34%)}
.lesson-card-header{display:flex;align-items:center;gap:10px;padding:11px 13px}
.lesson-card.correct .lesson-card-header{background:linear-gradient(135deg,#D9F99D,#86EFAC 58%,#A7F3D0);border:none;border-radius:18px 18px 0 0}
.lesson-card.wrong .lesson-card-header{background:linear-gradient(135deg,#FECACA,#FDA4AF 58%,#FECDD3);border:none;border-radius:18px 18px 0 0}
.lc-verdict-ico{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1;flex-shrink:0;background:rgba(255,255,255,0.78);box-shadow:0 6px 14px rgba(15,23,42,0.12)}
.lc-header-text{flex:1;min-width:0}
.lc-verdict-text{font-size:0.92rem;font-weight:900;line-height:1.1;margin-bottom:2px}
.lesson-card.correct .lc-verdict-text{color:#065F46}
.lesson-card.wrong .lc-verdict-text{color:#991B1B}
.lc-badge{display:inline-flex;align-items:center;gap:5px;font-size:0.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#334155;background:rgba(255,255,255,0.7);padding:3px 7px;border-radius:999px}
.lesson-card-body{padding:11px 12px;border:none;border-radius:0 0 18px 18px}
.lesson-card.correct .lesson-card-body{background:linear-gradient(180deg,#F0FDF4 0%,#ECFDF5 100%)}
.lesson-card.wrong .lesson-card-body{background:linear-gradient(180deg,#FFF8F7 0%,#FFF1F2 100%)}
.lc-section{background:rgba(255,255,255,0.85);border:1px solid rgba(255,255,255,0.8);border-radius:14px;padding:8px 10px;box-shadow:0 4px 12px rgba(148,163,184,0.12)}
.lc-section + .lc-section{margin-top:6px}
.lc-section-label{font-size:0.55rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.lc-section-copy{font-size:0.79rem;font-weight:800;line-height:1.26}
.lc-step-list{display:grid;gap:5px}
.lc-step-item{display:flex;align-items:flex-start;gap:7px}
.lc-step-num{flex-shrink:0;width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:0.62rem;font-weight:900;background:#DBEAFE;color:#1D4ED8;box-shadow:inset 0 -1px 0 rgba(255,255,255,0.55)}
.lc-step-text{font-size:0.76rem;font-weight:800;line-height:1.2;color:#0F172A}
.lesson-card.correct .lc-step-text{color:#166534}
.lesson-card.wrong .lc-section--wrong .lc-step-num{background:#FECDD3;color:#B91C1C}
.lesson-card.wrong .lc-section--wrong .lc-step-text{color:#7F1D1D}
.lesson-card.wrong .lc-section--best .lc-step-num{background:#DCFCE7;color:#166534}
.lesson-card.wrong .lc-section--best .lc-step-text{color:#166534}
.lesson-card--sequence .lesson-card-body{display:grid;gap:6px}
.lesson-card--sequence .lc-section + .lc-section{margin-top:0}
.lesson-card--sequence .lc-section-label{margin-bottom:5px}
.lesson-card.correct .lc-section{background:rgba(255,255,255,0.92)}
.lesson-card.correct .lc-section--best{background:linear-gradient(135deg,#ECFCCB,#FFFFFF);box-shadow:0 8px 18px rgba(74,222,128,0.15)}
.lesson-card.wrong .lc-section--wrong{background:linear-gradient(135deg,#FFF1F2,#FFFFFF)}
.lesson-card.wrong .lc-section--best{background:linear-gradient(135deg,#FEE2E2,#FFFFFF)}
.lesson-card.correct .lc-section-label,.lesson-card.correct .lc-section-copy{color:#065F46}
.lesson-card.wrong .lc-section--wrong .lc-section-label{color:#B91C1C}
.lesson-card.wrong .lc-section--wrong .lc-section-copy{color:#7F1D1D}
.lesson-card.wrong .lc-section--best{background:linear-gradient(135deg,#ECFCCB,#FFFFFF)}
.lesson-card.wrong .lc-section--best .lc-section-label{color:#166534}
.lesson-card.wrong .lc-section--best .lc-section-copy{color:#166534}
.lesson-card .lc-section--why .lc-section-label{color:#475569}
.lesson-card.correct .lc-section--why .lc-section-copy{color:#166534}
.lesson-card.wrong .lc-section--why{background:linear-gradient(135deg,#F0FDF4,#FFFFFF)}
.lesson-card.wrong .lc-section--why .lc-section-label{color:#166534}
.lesson-card.wrong .lc-section--why .lc-section-copy{color:#166534}
/* ── PLAY RESULT SCREEN: COMPACT LAYOUT ── */
.play-result{
border:2px solid #60A5FA;
box-shadow:0 18px 34px rgba(37,99,235,0.14), inset 0 0 0 1px rgba(255,255,255,0.8);
background:
radial-gradient(circle at top right,rgba(191,219,254,0.45),transparent 28%),
radial-gradient(circle at bottom left,rgba(125,211,252,0.2),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F3F9FF 100%);
}
.play-result.play-result--compact{max-width:760px;margin:0 auto;padding:14px 14px 12px;display:flex;align-items:center;justify-content:center;min-height:min(calc(100dvh - 150px),540px)}
.play-result.play-result--compact .res-center{width:100%;max-width:680px}
.play-result.play-result--compact .res-title{margin-bottom:4px}
.play-result.play-result--compact .challenge-finish-points--result{margin-bottom:8px}
.play-result--story{min-height:min(calc(100dvh - 150px),500px);overflow:hidden}
.play-result--sequence{min-height:min(calc(100dvh - 150px),500px);overflow:hidden;align-items:center}
.result-points-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;background:#fff;border:1.5px solid #CFE5FB;font-size:.8rem;font-weight:800;color:#0F4C81}
/* On mobile: keep 2-col reward grid but compact padding */
.play-result .rw-card{border-radius:12px;padding:10px 8px}
.play-result .rw-card-icon{font-size:1.4rem;margin-bottom:2px}
.play-result .rw-card-label{font-size:0.62rem;margin-bottom:2px}
.play-result .rw-card-val{font-size:1.2rem;margin-bottom:4px}
.play-result .rw-card-change{padding:2px 8px;font-size:0.95rem}
.play-result .res-icon-wrap{width:54px;height:54px;margin-bottom:6px}
.play-result .res-icon-big{font-size:1.8rem}
.play-result .res-title{font-size:1rem;margin-bottom:3px}
.play-result .rw-cards-grid{gap:8px;margin-bottom:10px}
.play-result .lesson-card{margin-bottom:8px}
.play-result .lesson-card-body{padding:9px 10px}
.play-result .lc-section{padding:6px 8px}
.play-result .lc-section-label{font-size:0.54rem}
.play-result .lc-section-copy{font-size:0.74rem;line-height:1.22}
.play-result .lc-step-list{gap:4px}
.play-result .lc-step-item{gap:6px}
.play-result .lc-step-num{width:18px;height:18px;font-size:0.56rem}
.play-result .lc-step-text{font-size:0.72rem;line-height:1.18}
.go-btn.go-btn--submit{background:linear-gradient(135deg,#22C55E,#16A34A);box-shadow:0 8px 18px rgba(34,197,94,0.24)}
.go-btn.go-btn--submit:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(34,197,94,0.28)}
.go-btn.go-btn--submit:disabled{background:linear-gradient(135deg,#94A3B8,#64748B);box-shadow:none}
/* On desktop: 4-col horizontal strip for reward cards */
@media(min-width:600px){
.play-result .rw-cards-grid{grid-template-columns:repeat(4,1fr)}
}
/* Challenge round result: adaptive */
.challenge-round-result{
max-width:760px;
margin:0 auto;
padding:18px;
max-height:none;
overflow:hidden;
border:2px solid #60A5FA;
box-shadow:0 18px 34px rgba(37,99,235,0.14), inset 0 0 0 1px rgba(255,255,255,0.8);
background:
radial-gradient(circle at top right,rgba(191,219,254,0.45),transparent 28%),
radial-gradient(circle at bottom left,rgba(253,230,138,0.18),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F4FAFF 100%);
}
.challenge-round-result--compact{display:flex;flex-direction:column;justify-content:flex-start}
.challenge-round-result .result-grid{gap:10px;margin-bottom:12px}
.challenge-round-result .result-card{padding:12px}
.challenge-round-result .result-avatar{width:38px;height:38px;margin-bottom:6px}
.challenge-round-result .result-score-summary{padding:12px;margin-bottom:12px}
.challenge-round-result .result-header{margin-bottom:8px;font-size:1rem;text-align:center}
.challenge-finish-scoreboard--round{margin-bottom:8px;padding:12px}
.challenge-finish-scoreboard--round .challenge-finish-score-num{font-size:2rem;margin-bottom:0}
.challenge-finish-scoreboard--round .challenge-finish-score-side{padding:10px 8px}
.challenge-finish-scoreboard--round .challenge-finish-score-avatar{width:36px;height:36px;margin-bottom:4px}
.challenge-finish-scoreboard--round .challenge-finish-score-side--you{background:linear-gradient(180deg,#FFFFFF,#F0F9FF)}
.challenge-finish-scoreboard--round .challenge-finish-score-side--boss{background:linear-gradient(180deg,#FFFFFF,#FFF7ED)}
.challenge-finish-score-avatar--round{width:50px !important;height:50px !important;box-shadow:0 10px 20px rgba(15,76,129,0.12)}
.challenge-finish-score-avatar--you{border:2px solid #38BDF8;background:linear-gradient(135deg,#E0F2FE,#FFFFFF)}
.challenge-finish-score-avatar--boss{border:2px solid #F97316;background:linear-gradient(135deg,#FFEDD5,#FFFFFF)}
.challenge-finish-vs--round{align-self:center;padding:9px 11px;background:linear-gradient(135deg,#F97316,#FB923C);color:#fff;box-shadow:0 10px 20px rgba(249,115,22,0.22)}
.challenge-round-badge{display:inline-flex;align-items:center;justify-content:center;margin-top:6px;padding:5px 9px;border-radius:999px;font-size:.66rem;font-weight:900;letter-spacing:.04em}
.challenge-round-badge--you{background:linear-gradient(135deg,#DBEAFE,#E0F2FE);color:#0F4C81;border:1px solid #93C5FD}
.challenge-round-badge--boss{background:linear-gradient(135deg,#FFEDD5,#FFF7ED);color:#C2410C;border:1px solid #FDBA74}
.challenge-round-result .lesson-card{margin-bottom:8px}
.challenge-round-result .lesson-card-header{padding:9px 12px}
.challenge-round-result .lesson-card-body{padding:10px 12px}
.challenge-round-result .lc-verdict-text{font-size:0.88rem}
.challenge-round-result .lc-lesson{font-size:0.84rem;line-height:1.45}
.challenge-round-result .lc-best{padding:8px 10px;margin-top:8px}
.challenge-round-result .lc-best-choice{font-size:0.8rem}
.challenge-round-result .lc-best-why{font-size:0.76rem}
.challenge-round-next-btn{margin-top:8px}
/* ── CHALLENGE SPEED TIMER ── */
.challenge-timer-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 14px;padding:8px 16px;background:#1E293B;border-radius:12px;border:2px solid #F97316}
.challenge-timer-label{font-size:0.78rem;font-weight:700;color:#FB923C;text-transform:uppercase;letter-spacing:.5px}
.challenge-timer{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;border-radius:50%;font-size:1.5rem;font-weight:900;color:#fff;background:#334155;border:3px solid #64748B;transition:background 0.3s,border-color 0.3s,transform 0.1s;font-variant-numeric:tabular-nums}
.challenge-timer.warning{background:#B45309;border-color:#FBBF24;color:#fff}
.challenge-timer.danger{background:#DC2626;border-color:#FCA5A5;color:#fff;animation:timerPulse 0.4s ease infinite alternate}
@keyframes timerPulse{from{transform:scale(1)}to{transform:scale(1.18)}}
.go-btn{width:100%;padding:13px;background:linear-gradient(135deg,#9CA3AF,#6B7280);color:#fff;border:none;border-radius:var(--r-sm);font-size:0.98rem;font-weight:700;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,0.15);transition:transform 0.12s}
.go-btn:hover{transform:translateY(-2px)}.go-btn:active{transform:scale(0.97)}
/* ── UPGRADE ── */
.upg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:9px;margin-bottom:13px}
.upg-card{background:var(--bg0);border:1.5px solid var(--border2);border-radius:var(--r-sm);padding:15px 11px;text-align:center;transition:all 0.17s}
.upg-card:hover{border-color:var(--sky);box-shadow:var(--sh-md);transform:translateY(-3px)}
.upg-card.bought{background:var(--sky-lt);border-color:var(--sky)}
.upg-ico{font-size:1.9rem;display:block;margin-bottom:6px}
.upg-nm{font-size:0.83rem;font-weight:700;margin-bottom:3px;color:var(--text)}
.upg-ds{font-size:0.7rem;color:var(--muted);margin-bottom:7px;line-height:1.5}
.upg-ef{font-size:0.7rem;color:var(--mint);font-weight:700;margin-bottom:9px}
.buy-btn{width:100%;padding:7px;background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;border:none;border-radius:var(--r-xs);font-size:0.75rem;font-weight:700;cursor:pointer;transition:transform 0.11s}
.buy-btn:hover{transform:scale(1.04)}.buy-btn:disabled{background:#CBD5E1;cursor:not-allowed;transform:none;opacity:0.6}
.skip-lnk{background:none;border:1.5px solid var(--border2);border-radius:50px;padding:9px 22px;cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--muted);transition:all 0.12s}
.skip-lnk:hover{border-color:var(--sky3);color:var(--sky3)}
/* ── PROMOTION ── */
.promo-wrap{text-align:center}
.promo-ico{font-size:4rem;display:block;animation:spinIn 0.6s cubic-bezier(.3,1.5,.5,1);margin-bottom:7px}
.promo-ttl{font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,var(--amber),var(--coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
.promo-box{display:inline-block;background:var(--sky-lt);border:1.5px solid var(--sky-md);border-radius:var(--r-xs);padding:9px 18px;font-size:1.05rem;font-weight:800;color:var(--sky-dk);margin:8px 0 13px}
.promo-rews{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-bottom:15px}
/* ── DAY COMPLETE / GAMEOVER / WIN ── */
.day-ttl{font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,var(--sky),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:5px}
.lock-note{background:var(--sky-lt);border:1.5px solid var(--sky-md);border-radius:var(--r-sm);padding:11px 14px;font-size:0.83rem;font-weight:600;color:var(--sky3);margin:11px 0;line-height:1.6}
.go-ttl{font-size:1.55rem;font-weight:800;color:var(--coral);margin-bottom:7px}
.win-ttl{font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,var(--amber),var(--coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:7px}
/* ── PROFILE ── */
.av-big{width:78px;height:78px;margin:0 auto 9px;animation:popIn 0.35s ease}
.av-big svg{width:100%;height:100%}
.av-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:13px}
.av-category-hdr{font-size:0.72rem;font-weight:800;color:var(--sky-dk);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:5px}
.av-opt{aspect-ratio:1;background:#fff;border:2px solid var(--border2);border-radius:14px;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all 0.15s;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.av-opt svg,.av-opt img{width:100%;height:100%;display:block;object-fit:cover;}
.av-opt:hover{border-color:var(--sky);background:var(--sky-lt);transform:scale(1.08);box-shadow:0 4px 12px rgba(14,165,233,0.25)}
.av-opt.sel{border-color:var(--sky);background:var(--sky-lt);box-shadow:0 0 0 4px rgba(14,165,233,0.3),0 4px 14px rgba(14,165,233,0.2)}
.p-input{width:100%;border:1.5px solid var(--border2);border-radius:var(--r-xs);padding:9px 13px;font-size:0.93rem;font-weight:600;background:var(--card);color:var(--text);outline:none;transition:border-color 0.14s}
.p-input:focus{border-color:var(--sky)}
.p-save{width:100%;padding:14px;background:linear-gradient(135deg,#0EA5E9,#7C3AED);color:#fff;border:none;border-radius:var(--r-sm);font-size:1rem;font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(14,165,233,0.35);transition:all 0.2s;margin-top:11px;letter-spacing:.3px}
.p-save:hover{transform:scale(1.03) translateY(-2px);box-shadow:0 10px 28px rgba(14,165,233,0.4)}
.p-save:active{transform:scale(0.98)}
.p-reset{background:none;border:1.5px solid #FCA5A5;border-radius:50px;padding:8px 20px;cursor:pointer;font-size:0.82rem;font-weight:700;color:var(--coral);transition:all 0.11s;margin-top:7px}
.p-reset:hover{background:var(--coral-lt);color:#991B1B}
.sbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:13px}
.sbox{background:var(--bg0);border:1px solid var(--border2);border-radius:var(--r-sm);padding:11px;text-align:center}
.sbox-v{font-size:1.65rem;font-weight:800;color:var(--sky3)}
.sbox-l{font-size:0.7rem;font-weight:600;color:var(--muted2);margin-top:2px}
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid var(--border)}
.tog-lbl{font-size:0.86rem;font-weight:600;color:var(--muted)}
.sect-h{font-size:1.25rem;font-weight:800;margin-bottom:11px;display:flex;align-items:center;gap:7px;color:var(--sky-dk)}
.sect-sub{font-size:0.82rem;color:var(--muted);margin-bottom:13px}
.sep{border:none;border-top:1px solid var(--border);margin:13px 0}
/* ── TOAST ── */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(65px);background:var(--sky-dk);color:#fff;border-radius:50px;padding:8px 18px;z-index:9999;max-width:calc(100vw - 36px);text-align:center;font-size:0.84rem;font-weight:700;transition:transform 0.28s cubic-bezier(.3,1.5,.5,1),opacity 0.28s;opacity:0;white-space:normal}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.confetti-p{position:fixed;pointer-events:none;z-index:9998;border-radius:2px;animation:confettiFall linear forwards}
/* ── MODAL ── */
.modal-ov{position:fixed;inset:0;background:rgba(12,74,110,0.52);z-index:9990;display:flex;align-items:center;justify-content:center;padding:18px}
.modal-bx{background:var(--card);border-radius:var(--r);padding:26px 20px;max-width:310px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(14,165,233,0.22);animation:popIn 0.22s cubic-bezier(.3,1.5,.5,1)}
.modal-ico{font-size:2.8rem;margin-bottom:9px;display:block}
.modal-ttl{font-size:1.25rem;font-weight:800;color:var(--sky-dk);margin-bottom:5px}
.modal-txt{font-size:0.85rem;color:var(--muted);line-height:1.6;margin-bottom:17px}
.modal-ok{width:100%;padding:11px;background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;border:none;border-radius:var(--r-sm);font-size:0.93rem;font-weight:700;cursor:pointer}
.day-wrap-ov{position:fixed;inset:0;background:rgba(10,30,70,0.5);z-index:9992;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}
.day-wrap-box{width:min(100%,430px);background:linear-gradient(180deg,#fefefe 0%,#f4fbff 100%);border:2px solid rgba(30,159,255,0.22);border-radius:30px;padding:18px 18px 18px;box-shadow:0 28px 80px rgba(8,47,73,0.2);position:relative;overflow:hidden;animation:popIn 0.22s cubic-bezier(.3,1.5,.5,1)}
.day-wrap-box:before{content:"";position:absolute;right:-35px;top:-35px;width:120px;height:120px;border-radius:999px;background:radial-gradient(circle,rgba(59,130,246,0.2) 0%,rgba(59,130,246,0) 72%)}
.day-wrap-box:after{content:"";position:absolute;left:-24px;bottom:-30px;width:110px;height:110px;border-radius:999px;background:radial-gradient(circle,rgba(16,185,129,0.18) 0%,rgba(16,185,129,0) 72%)}
.day-wrap-hero{position:relative;z-index:1;background:linear-gradient(135deg,rgba(14,165,233,0.12),rgba(37,99,235,0.08));border:1px solid rgba(96,165,250,0.18);border-radius:24px;padding:14px 14px 12px;margin-bottom:14px}
.day-wrap-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,196,0,0.16);color:#b45309;font-size:0.8rem;font-weight:900;letter-spacing:.08em;border-radius:999px;padding:8px 12px;margin-bottom:12px}
.day-wrap-kicker{display:inline-flex;align-items:center;gap:6px;background:rgba(255,196,0,0.16);color:#b45309;font-size:0.78rem;font-weight:900;letter-spacing:.08em;border-radius:999px;padding:8px 12px;margin-bottom:12px;position:relative;z-index:1}
.day-wrap-hero-main{display:flex;align-items:center;gap:12px}
.day-wrap-hero-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:linear-gradient(135deg,#fff8cc,#dbeafe);box-shadow:0 12px 24px rgba(37,99,235,0.12);flex-shrink:0}
.day-wrap-hero-icon-fire{background:linear-gradient(135deg,#fff7d1,#ffe4b5)}
.day-wrap-hero-icon-fire .streak-fire-icon{font-size:2rem}
.day-wrap-hero-copy{min-width:0;flex:1}
.day-wrap-minirow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.day-mini-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,0.76);border:1px solid rgba(96,165,250,0.18);font-size:0.76rem;font-weight:800;color:#365a7a}
.day-wrap-title{font-size:1.7rem;line-height:1.08;font-weight:900;color:#0f3d69;margin-bottom:8px;position:relative;z-index:1}
.day-wrap-copy{font-size:0.96rem;line-height:1.5;color:#47637d;position:relative;z-index:1}
.day-wrap-forecast{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;position:relative;z-index:1}
.day-wrap-stat{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1.5px solid rgba(96,165,250,0.2);border-radius:22px;padding:14px 13px 13px;box-shadow:0 14px 32px rgba(14,165,233,0.08);position:relative;overflow:hidden}
.day-wrap-stat:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:linear-gradient(90deg,rgba(251,191,36,0.9),rgba(59,130,246,0.65))}
.day-wrap-stat-ico{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fef3c7,#dbeafe);font-size:1.22rem;flex-shrink:0;box-shadow:0 10px 20px rgba(37,99,235,0.12)}
.day-wrap-stat-ico-fire{background:linear-gradient(135deg,#fff7cc,#fde68a)}
.day-wrap-stat-ico-fire .streak-fire-icon{font-size:1.7rem;line-height:1}
.day-wrap-stat-ico-coin{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.day-wrap-stat-ico-coin svg{width:28px;height:28px;display:block}
.day-wrap-stat strong{display:block;font-size:1.08rem;color:#0f3d69;line-height:1.15}
.day-wrap-stat span{display:block;font-size:0.78rem;color:#6b7f95;line-height:1.35;margin-top:4px}
.day-wrap-tip{font-size:0.84rem;color:#1d4ed8;background:linear-gradient(135deg,rgba(219,234,254,0.9),rgba(224,242,254,0.88));border-radius:16px;padding:12px 13px;margin-bottom:14px;position:relative;z-index:1;font-weight:700}
.day-wrap-btn{width:100%;border:none;border-radius:999px;padding:13px 16px;font-size:1rem;font-weight:900;color:#fff;background:linear-gradient(135deg,#14b8a6,#2563eb);box-shadow:0 12px 24px rgba(37,99,235,0.24);cursor:pointer;position:relative;z-index:1}
.day-wrap-btn:hover{transform:translateY(-1px)}
.day-wrap-btn:active{transform:translateY(0)}
.tomorrow-streak-card{background:linear-gradient(180deg,#fffdf4 0%,#fff7d1 100%);border-color:rgba(245,158,11,0.28)}
.tomorrow-streak-card .day-wrap-stat-ico{background:linear-gradient(135deg,#fff7cc,#fde68a)}
.tomorrow-prize-card{background:linear-gradient(180deg,#f5fbff 0%,#dff3ff 100%);border-color:rgba(56,189,248,0.26)}
.tomorrow-prize-card .day-wrap-stat-ico{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.streak-reward-box{background:
radial-gradient(circle at 14% 18%,rgba(255,214,10,0.18) 0,rgba(255,214,10,0) 18%),
radial-gradient(circle at 86% 16%,rgba(59,130,246,0.16) 0,rgba(59,130,246,0) 18%),
linear-gradient(180deg,#fffdf7 0%,#eef9ff 100%)}
.streak-reward-box .day-wrap-kicker{background:linear-gradient(135deg,rgba(255,215,0,0.18),rgba(251,146,60,0.14));color:#c2410c;box-shadow:inset 0 0 0 1px rgba(251,146,60,0.08)}
.streak-reward-box .day-wrap-title{font-size:1.72rem}
.streak-reward-box .day-wrap-copy{font-size:0.98rem;color:#35597b}
.streak-reward-box .day-wrap-forecast{gap:12px}
.streak-reward-box .day-wrap-stat{min-height:124px;align-items:center}
.streak-reward-box .day-wrap-stat-ico{width:44px;height:44px;border-radius:14px;font-size:1.28rem;box-shadow:0 10px 20px rgba(37,99,235,0.12)}
.streak-reward-box .day-wrap-stat strong{font-size:1.12rem;line-height:1.15}
.streak-reward-box .day-wrap-stat span{font-size:0.8rem;line-height:1.38}
.streak-power-card{background:linear-gradient(180deg,#fffdf4 0%,#fff8da 100%);border-color:rgba(245,158,11,0.28)}
.streak-power-card .day-wrap-stat-ico{background:linear-gradient(135deg,#fff7cc,#fde68a)}
.streak-prize-card{background:linear-gradient(180deg,#f7fbff 0%,#e0f2fe 100%);border-color:rgba(59,130,246,0.24)}
.streak-prize-card .day-wrap-stat-ico{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.streak-reward-box .day-wrap-tip{background:linear-gradient(135deg,rgba(219,234,254,0.92),rgba(224,242,254,0.92));font-size:0.87rem;color:#1e40af;padding:11px 13px}
.streak-reward-box .day-wrap-btn{background:linear-gradient(135deg,#0fb9b1,#2563eb 58%,#1d4ed8 100%);font-size:1.04rem;letter-spacing:.01em}
/* ── CONFIRM ── */
#conf-ov{display:none;position:fixed;inset:0;background:rgba(12,74,110,0.52);z-index:99999;align-items:center;justify-content:center;padding:18px}
#conf-ov.show{display:flex}
#conf-bx{background:var(--card);border-radius:var(--r);padding:24px 20px;max-width:300px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.2);animation:popIn 0.22s cubic-bezier(.3,1.5,.5,1)}
#conf-bx .ct{font-size:1.05rem;font-weight:800;margin-bottom:6px;color:var(--text)}
#conf-bx .cm{font-size:0.84rem;color:var(--muted);margin-bottom:17px;line-height:1.5}
#conf-bx .cbtns{display:flex;gap:7px}
#conf-bx .cok{flex:1;padding:10px;border:none;border-radius:50px;background:linear-gradient(135deg,var(--coral),#DC2626);color:#fff;font-size:0.87rem;font-weight:700;cursor:pointer}
#conf-bx .cno{flex:1;padding:10px;border:1.5px solid var(--border2);border-radius:50px;background:var(--card);color:var(--muted);font-size:0.87rem;font-weight:600;cursor:pointer}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE BREAKPOINT MAP
This app responds to viewport width/height, not device names.
- Phone small: max-width 480px
- Phone / narrow tablet: max-width 768px
- Tablet portrait / compact tablet: 769px - 960px
- Laptop / desktop: min-width 961px
- Larger laptop / desktop: min-width 1024px
- Short-height screens: max-height 920px / 820px / 760px / 720px
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
LAPTOP / DESKTOP LAYOUTS
═══════════════════════════════════════════════════════════════ */
/* ── DESKTOP DASHBOARD ── */
@media(min-width:961px){
.home-dashboard{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,360px);gap:18px;align-items:stretch}
.home-main{display:flex;flex-direction:column;gap:14px;min-width:0;height:100%}
.home-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.home-side .card{height:fit-content}
.hero-wrap{flex:1}
.mode-row{flex:1;grid-auto-rows:1fr}
.mcard{height:100%}
.home-side .panel{padding:16px}
.home-split{display:grid;grid-template-columns:1fr;gap:14px}
.desktop-only{display:block}
.home-progress-card{padding:14px 16px}
.home-progress-card .prog-row{margin-bottom:6px}
.home-progress-card .prog-bar{height:9px}
.home-progress-card .prog-num{font-size:0.86rem}
.home-progress-card .prog-lbl{font-size:0.88rem}
.home-progress-card .home-progress-note{font-size:0.62rem;margin-top:4px}
.home-progress-card .streak-inline{margin-top:8px;gap:8px}
.home-progress-card .streak-chip{padding:6px 10px;font-size:0.72rem}
.home-progress-card .streak-sub{font-size:0.64rem;line-height:1.3}
.home-cta-row{display:grid;grid-template-columns:1fr;gap:14px}
.big-play{min-height:64px}
.mode-row{gap:12px}
.mcard{min-height:148px;display:flex;flex-direction:column;justify-content:center}
.mcard-title{font-size:1rem}
.mcard-sub{font-size:0.78rem}
.hero-wrap{min-height:220px;padding:28px 28px;padding-right:255px}
.hero-title{font-size:3rem}
.hero-sub{font-size:0.98rem;max-width:100%}
.hero-mascot{width:220px;height:220px;right:16px;bottom:6px}
.hero-chips{gap:8px}
.hchip{font-size:0.82rem;padding:5px 12px}
.sc-grid{gap:18px}
.panel-h{font-size:0.9rem}
.cur-pos-box{padding:10px 12px;font-size:0.9rem}
.prow{padding:4px 0}
.plbl,.pnums{font-size:0.74rem}
.rw-name{font-size:0.84rem}
.rw-sub{font-size:0.72rem}
}
@media(min-width:1024px){
#app{padding:16px 24px 0}
#nav,#hud{max-width:none}
.screen{width:100%}
.sc-grid{grid-template-columns:minmax(0,2fr) minmax(320px,380px)}
.sc-name{font-size:1.3rem}
.sc-body{font-size:0.95rem}
}
/* ── Trial banner desktop sizing ─────────────────────────────────────────── */
@media(min-width:961px){
.trial-banner{padding:6px 20px;font-size:0.77rem}
.tb-btn{padding:3px 12px;font-size:0.7rem}
/* Subscription tab — single column, trimmed to fit one viewport */
.sub-trial-locked{display:block}
.sub-hero-perks{
max-height:none;
overflow:visible;
padding-bottom:6px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:18px;
row-gap:0;
align-items:start;
}
.sub-hero-card{padding:14px 16px 14px;margin-bottom:8px}
.sub-hero-sparkles{font-size:1rem;margin-bottom:2px;letter-spacing:6px}
.sub-hero-title{font-size:1.05rem;margin-bottom:2px}
.sub-hero-sub{font-size:0.72rem;margin-bottom:6px}
.sub-hero-badge{font-size:0.6rem;padding:2px 10px;margin-bottom:10px}
.sub-perk-row{padding:3px 0;font-size:0.74rem;min-height:22px;flex:0 0 auto}
.sub-perk-row:nth-last-child(-n+2){border-bottom:none}
.sub-perk-check{margin-left:auto}
.sub-detail-card{padding:8px 14px;margin-bottom:8px}
.sub-detail-row{padding:3px 0;font-size:0.76rem}
.sub-cancel-box{padding:10px 14px;margin-bottom:8px}
.sub-cancel-ttl{font-size:0.78rem;margin-bottom:4px}
.sub-cancel-body{font-size:0.7rem}
.sub-cancel-body p{margin:0 0 2px}
.sub-manage-btn{padding:7px;font-size:0.75rem;margin-top:6px}
.sub-trial-card{padding:12px 16px;margin-bottom:10px}
.sub-trial-ico{font-size:1.5rem;margin-bottom:2px}
.sub-trial-title{font-size:0.92rem;margin-bottom:2px}
.sub-trial-msg{font-size:0.72rem;margin-bottom:8px}
.sub-trial-track{margin-bottom:5px}
.sub-trial-pips{margin-bottom:8px}
.sub-trial-locked{padding:10px 12px;margin-top:6px}
.sub-trial-locked-lbl{font-size:0.66rem;margin-bottom:6px}
.sub-locked-row{font-size:0.7rem;padding:4px 0}
.sub-locked-badge{font-size:0.56rem;padding:2px 6px}
.sub-section-hdr{margin-bottom:8px;font-size:0.78rem}
.sub-plans{gap:8px;margin-bottom:4px}
.sub-plan{padding:10px 10px;padding-top:16px}
.sub-plan-name{font-size:0.74rem;margin-bottom:2px}
.sub-plan-price{font-size:1.25rem}
.sub-plan-hint{font-size:0.6rem;margin:2px 0 5px}
.sub-plan-feats{font-size:0.64rem;line-height:1.6;margin-bottom:6px}
.sub-plan-btn{padding:6px;font-size:0.72rem}
.profile-screen--subscription{
overflow-y:auto;
padding-right:12px;
}
}
/* ── MODERATE COMPACT: large laptop / 900px height (e.g. 1440×900) ── */
@media(min-width:961px) and (min-height:821px) and (max-height:920px){
#app{padding:10px 22px 14px;gap:10px}
.home-main,.home-side{gap:11px}
.hero-wrap{min-height:0;padding:18px 24px;padding-right:215px}
.hero-title{font-size:2.4rem}
.hero-sub{font-size:0.84rem;margin-bottom:9px;max-width:100%}
.hero-mascot{width:185px;height:185px}
.hchip{padding:5px 11px}
.info-card{padding:9px 11px}
.hiw-item{margin-bottom:5px}
.mcard{min-height:120px}
.mcard-icon{width:52px;height:56px}
.home-side .card{padding:14px 16px}
.role-journey-box{padding:10px 12px;margin-bottom:9px}
.role-journey-glow img,.role-journey-glow svg,.role-journey-item img,.role-journey-item svg{width:58px!important;height:58px!important}
.prow{padding:3px 4px;margin-bottom:2px}
.prog-row{margin-bottom:6px}
}
/* ── TIGHT COMPACT: small laptop / 800px height (e.g. 1280×800, MacBook Air) ── */
@media(min-width:961px) and (max-height:820px){
#app{padding:5px 20px 8px;gap:6px}
.home-main,.home-side{gap:8px}
.hero-wrap{min-height:0;padding:13px 20px;padding-right:175px}
.hero-title{font-size:2rem}
.hero-sub{font-size:0.74rem;line-height:1.4;margin-bottom:7px;max-width:100%}
.hero-chips-label{margin:0 0 3px;font-size:0.58rem}
.hchip{padding:4px 9px;font-size:0.76rem;min-width:50px}
.hero-mascot{width:150px;height:150px;right:12px;bottom:4px}
.info-card{padding:8px 10px}
.info-card-hdr{font-size:0.72rem;margin-bottom:5px}
.hiw-item{margin-bottom:4px}
.hiw-badge{width:24px;height:24px;font-size:0.82rem}
.hiw-item-title{font-size:0.66rem}
.hiw-item-desc{font-size:0.57rem}
.mcard{min-height:105px}
.mcard-icon{width:46px;height:50px}
.mcard-title{font-size:0.88rem}
.mcard-sub{font-size:0.64rem}
.mcard-start-btn{padding:4px 12px;font-size:0.7rem;margin-top:3px}
.home-side .card{padding:12px 14px}
.role-journey-box{padding:8px 10px;margin-bottom:8px;gap:10px}
.role-journey-glow img,.role-journey-glow svg,.role-journey-item img,.role-journey-item svg{width:50px!important;height:50px!important}
.role-journey-name{font-size:0.64rem}
.prow{padding:2px 4px;margin-bottom:1px}
.plbl,.pnums{font-size:0.68rem}
.promo-ready-banner{padding:6px 10px;font-size:0.7rem;margin-top:6px}
.streak-fire-icon{font-size:1.5rem}
.streak-card-count{font-size:0.95rem}
.streak-card-title{font-size:0.66rem}
.prog-row{margin-bottom:5px}
.prog-lbl{font-size:0.8rem}
.prog-num{font-size:0.7rem}
/* ── Challenge & lobby: use flex height chain so real device browser chrome
doesn't cause clipping via dvh-based max-height ── */
#app{height:100dvh !important;overflow:hidden !important}
/* All screens: locked to viewport — no scroll on tablet landscape */
#main{flex:1 !important;min-height:0 !important;overflow:hidden !important}
/* Lobby: auto-height inside locked #main; compact to fit */
.ch-lobby-horiz{height:auto !important;min-height:0 !important;overflow:visible !important;gap:6px !important}
.ch-lobby-banner{padding:8px 16px !important;gap:12px !important}
.ch-lobby-banner .lobby-banner-icon{font-size:1.6rem !important}
.ch-lobby-banner .lobby-banner-title{font-size:1.1rem !important}
.ch-lobby-banner .lobby-banner-sub{font-size:0.68rem !important;line-height:1.35 !important}
.ch-info-card{padding:10px 14px !important}
.ch-action-card{padding:10px 14px !important;gap:8px !important}
.ch-action-vs{font-size:1.8rem !important;margin-bottom:0 !important}
.ch-action-title{font-size:1rem !important}
.ch-action-sub{font-size:0.72rem !important}
.speed-mode-banner{padding:8px 12px !important;margin-bottom:6px !important}
.smb-title{font-size:0.82rem !important}
.smb-sub{font-size:0.72rem !important}
/* Challenge play: parent chain determines height, not dvh calc */
.sc-grid:has(.ch-fullscreen){height:100% !important}
.sc-grid .ch-fullscreen{max-height:none !important;height:100% !important;overflow:hidden !important}
/* Compact VS bar: reduce avatar, tighten padding */
.ch-vs-bar{padding:8px 16px !important}
.ch-av-ring{width:52px !important;height:52px !important}
.ch-pts{font-size:1.1rem !important}
.ch-vs-badge{width:36px !important;height:36px !important;font-size:1.1rem !important}
/* Compact timer row */
.challenge-timer-row{padding:6px 14px !important;margin:4px 0 6px !important}
.challenge-timer{min-width:36px !important;height:36px !important;font-size:1.05rem !important}
/* Compact question card */
.ch-question-card{padding:10px 14px !important}
.ch-q-title{font-size:1rem !important}
.ch-q-body{font-size:0.88rem !important;line-height:1.42 !important}
/* Compact choices */
.ch-choices{gap:6px !important}
.ch-choices .cho-btn{padding:10px 13px !important;font-size:0.86rem !important;min-height:44px !important}
.rewards-hero{padding:14px 15px;gap:10px}
.rewards-hero-title{font-size:1.1rem}
.rewards-hero-sub{font-size:.72rem}
.rewards-balance{min-width:260px;max-width:none}
.rewards-shop-card{padding:12px}
.rewards-shop-icon{font-size:1.75rem}
.rewards-shop-title{font-size:.92rem}
.rewards-shop-desc{font-size:.68rem}
.rewards-shop-btn{padding:9px 10px;font-size:.74rem}
}
.home-bottom-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
/* ── PATTERN INTEGRATION ── */
.feature-card,.tips-card,.side-guide-card{
border-radius:var(--r);
padding:18px;
box-shadow:0 6px 24px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
position:relative;
overflow:hidden;
}
.feature-card{
background:linear-gradient(135deg,#FFFFFF 0%,#ECFDF5 100%),
radial-gradient(circle at 20% 50%, rgba(16,185,129,0.04) 1px, transparent 1px);
background-size:100%, 80px 80px;
border:2px solid var(--mint);
border-left:4px solid var(--mint);
}
.tips-card{
background:linear-gradient(135deg,#FFFFFF 0%,#F5F3FF 100%),
radial-gradient(circle at 30% 40%, rgba(124,58,237,0.04) 1.5px, transparent 1.5px);
background-size:100%, 90px 90px;
border:2px solid var(--vibrant-purple);
border-left:4px solid var(--vibrant-purple);
}
.side-guide-card{
background:var(--card);
border:2px solid #D1D5DB;
}
.feature-card::after,.tips-card::after,.side-guide-card::after{
content:'';
position:absolute;
top:-35px;
right:-35px;
width:100px;
height:100px;
border-radius:50%;
background:radial-gradient(circle,rgba(16,185,129,0.08),transparent 70%);
pointer-events:none;
}
.fc-title,.tc-title,.sg-title{font-size:1rem;font-weight:800;color:var(--sky-dk);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.feature-mission{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.mini-stat{background:var(--bg0);border:1px solid var(--border2);border-radius:var(--r-sm);padding:12px 10px;text-align:center}
.mini-stat .msv{font-size:1.1rem;font-weight:800;color:var(--sky3)}
.mini-stat .msl{font-size:0.7rem;font-weight:700;color:var(--muted2);margin-top:2px}
.goal-pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.goal-pill{background:var(--sky-lt);color:var(--sky3);border:1px solid var(--sky-md);border-radius:999px;padding:6px 10px;font-size:0.72rem;font-weight:700}
.tip-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tip-item{display:flex;flex-direction:column;gap:7px;align-items:flex-start;background:#F8FBFF;border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 12px}
.tip-ico{width:32px;height:32px;border-radius:10px;background:var(--mint-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem}
.tip-copy{font-size:0.78rem;line-height:1.5;color:var(--muted)}
.tip-copy strong{display:block;color:var(--text);font-size:0.82rem;margin-bottom:3px}
.tc-footer{font-size:0.68rem;color:var(--muted2);text-align:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
@media(max-width:600px){.tip-list{grid-template-columns:1fr}}
.guide-list{display:grid;gap:9px}
.guide-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
.guide-row:last-child{border-bottom:none}
.guide-lbl{font-size:0.76rem;font-weight:700;color:var(--text)}
.guide-sub{font-size:0.68rem;color:var(--muted2);margin-top:2px}
.guide-val{font-size:0.76rem;font-weight:800;color:var(--sky3);white-space:nowrap}
@media(max-width:960px){.home-bottom-grid{grid-template-columns:1fr}}
/* ═══════════════════════════════════════════════════════════════
PHONE LAYOUTS
480px and below = compact phone rules
481px - 700px = larger phone / phablet bridge rules
═══════════════════════════════════════════════════════════════ */
/* ── MOBILE HUD FIX ── */
@media(max-width:480px){
/* ── HUD: compact chips so nothing overflows ── */
#hud{padding:7px 8px;gap:4px;flex-wrap:nowrap}
.hs{font-size:0.72rem;padding:4px 6px;gap:4px;flex-shrink:1;min-width:0}
.hs-lbl{display:none} /* hide "COINS / CUSTOMERS / etc" labels to save width */
.hs img{width:16px;height:16px}
.hud-pos{font-size:0.64rem;padding:3px 7px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-av-ring{width:26px;height:26px;flex-shrink:0}
/* ── Hero card: chips in 2×2 grid instead of vertical stack ── */
.hero-wrap{padding:14px !important;min-height:0}
.hero-mascot{width:90px;height:90px;right:6px;bottom:4px}
.hero-title,.hero-sub,.hero-chips-label,.hero-chips{max-width:calc(100% - 100px)}
.hero-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.hchip{min-width:0;padding:6px 8px;font-size:0.8rem;border-radius:10px}
.hero-title{font-size:1.5rem;margin-bottom:4px}
.hero-sub{font-size:0.76rem;margin-bottom:8px}
.hero-chips-label{margin-top:8px;margin-bottom:3px}
/* ── Play mode cards: horizontal rows ── */
.mode-row{grid-template-columns:1fr !important;grid-auto-rows:auto !important;gap:10px}
.mcard{min-height:80px !important;max-height:none !important;flex-direction:row;padding:14px 16px;gap:0;align-items:center}
.mcard-content{flex-direction:row;text-align:left;padding:0;gap:12px;height:auto;align-items:center;justify-content:flex-start}
.mcard-icon{width:52px;height:52px;margin:0;flex-shrink:0}
.mcard-text-block{flex:1;min-width:0}
.mcard-title{font-size:0.95rem;margin:0 0 2px}
.mcard-sub{font-size:0.7rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard-progress-copy{font-size:0.56rem;margin:3px 0 0;color:rgba(255,255,255,0.74)}
.mcard-content > .prog-bar,.mcard .prog-bar{width:100%;margin:4px 0}
.mcard-start-btn{padding:5px 14px;font-size:0.74rem;margin-top:4px;white-space:nowrap}
.mcard.market-day .mcard-content{gap:8px}
.mcard.market-day .mcard-icon{width:44px;height:44px}
.progress-badge{padding:2px 8px;font-size:0.6rem;margin:2px 0}
/* ── Stats: 3-col trio tighter ── */
.stat-trio-grid{gap:6px}
.stat-trio-val{font-size:1.6rem}
.stat-trio-lbl{font-size:0.6rem}
.stat-trio-box{padding:12px 8px}
/* ── Choice buttons: ensure good tap size ── */
.cho-btn{padding:13px 14px;font-size:0.9rem;min-height:52px}
/* ── Profile tabs: prevent overflow ── */
.prof-tabs{gap:4px}
.tab-btn{font-size:0.72rem;padding:6px 8px}
/* ── Nav bar: compact for mobile ── */
#nav{gap:8px !important;padding:10px !important;flex-wrap:wrap}
.nav-left{gap:8px;flex-shrink:1;min-width:0}
.nav-logo{font-size:0.9rem;gap:4px;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
.nav-btn{padding:6px 10px;font-size:0.75rem;gap:4px;flex-shrink:0}
.nav-btn .nav-btn-text{display:none} /* hide text, show only emoji */
.nav-right{gap:6px;flex-shrink:0;margin-left:auto;justify-content:flex-end}
.nav-profile{padding:5px 8px 5px 5px;gap:6px}
.nav-profile-info{display:none} /* hide name+role text, show avatar only */
.nav-av{width:30px;height:30px}
.sound-btn,.icon-btn{width:34px;height:34px;font-size:1rem}
.paywall-wrap{padding:20px 12px 18px}
.paywall-plans{grid-template-columns:1fr}
.paywall-plan{padding:18px 12px 14px}
.ws-box{padding:16px 14px 12px}
.ws-feats-mini{grid-template-columns:1fr}
}
@media(min-width:481px) and (max-width:700px){
.paywall-plans{grid-template-columns:1fr}
.ws-feats-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ═══════════════════════════════════════════════════════════════
TABLET AND SHARED RESPONSIVE LAYOUTS
max-width 960px = shared tablet/mobile stacking
769px - 960px = tablet-specific tuning
═══════════════════════════════════════════════════════════════ */
/* ── RESPONSIVE ── */
@media(max-width:960px){
.home-dashboard{grid-template-columns:1fr;gap:12px}
.sc-grid{grid-template-columns:1fr;height:auto !important;overflow:visible}
.sc-main{overflow:visible;height:auto}
.sidebar{overflow:visible;height:auto}
.sc-top{flex:none;min-height:160px}
.upg-grid{grid-template-columns:1fr}
#app{padding:10px 12px 0;max-width:none}
#main{padding-bottom:66px}
#main:has(.sc-grid){overflow:auto;padding-bottom:66px}
.card{padding:15px 13px 13px}
.hs{font-size:0.74rem;padding:4px 8px}
#hud{gap:4px}
.hero-title{font-size:2rem}
.hero-wrap{padding-right:185px}
.hero-mascot{width:165px;height:165px;right:10px;bottom:8px}
.hero-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hchip{min-width:0}
.mode-row{gap:8px;margin-top:10px;grid-auto-rows:210px}
.mcard{min-height:210px;max-height:210px}
}
/* Between small tablet and mobile — use 2×2 chip grid */
@media(max-width:600px){
.hero-chips{grid-template-columns:repeat(2,1fr) !important}
}
@media(min-width:961px){.sc-grid{grid-template-columns:minmax(0,2fr) minmax(320px,380px)}}
/* QUESTION UI UPGRADE — wider, bigger, easier for kids — desktop only */
@media(min-width:961px){
.sc-grid{
grid-template-columns:minmax(0,1fr) 360px;
gap:14px;
}
.sc-top{
width:100%;
max-width:none;
padding:16px 32px 14px;
border-radius:20px;
min-height:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.sc-icon-ring{
width:56px;
height:56px;
font-size:1.7rem;
margin:0 auto 6px;
}
.sc-cat{
font-size:0.78rem;
letter-spacing:1.4px;
margin-bottom:4px;
}
.sc-name{
font-size:24px;
font-weight:900;
margin-top:4px;
line-height:1.2;
margin-bottom:6px;
max-width:100%;
text-align:left;
}
.sc-diff{
font-size:0.7rem;
padding:3px 10px;
margin-bottom:8px;
}
.sc-body{
font-size:17px;
font-weight:700;
line-height:1.45;
color:#ffffff;
background:rgba(255,255,255,0.15);
padding:10px 16px;
border-radius:12px;
margin-top:8px;
max-width:700px;
width:100%;
text-align:left;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}
.choices{
gap:8px;
}
.cho-btn{
min-height:50px;
padding:11px 14px;
font-size:0.96rem;
border-radius:14px;
line-height:1.4;
}
.cho-ltr{
width:28px;
height:28px;
border-radius:8px;
font-size:0.86rem;
}
}
/* STREAK UNDER DAILY PROGRESS */
.streak-inline{
margin-top:10px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.streak-chip{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 12px;
border-radius:999px;
background:var(--amber-lt);
border:1.5px solid var(--amber-md);
color:#B45309;
font-size:0.8rem;
font-weight:800;
}
.streak-chip-label{
white-space:nowrap;
}
.streak-chip-value{
min-width:20px;
text-align:center;
font-weight:900;
}
.streak-sub{
font-size:0.72rem;
color:var(--muted2);
text-align:right;
}
@media (max-width: 768px) {
.sc-top{
max-width:100%;
padding:20px;
min-height:unset;
}
.sc-name{
font-size:24px;
max-width:100%;
}
.sc-body{
font-size:18px;
max-width:100%;
}
}
@media(max-width:960px){
.streak-inline{flex-direction:column;align-items:flex-start}
.streak-sub{text-align:left}
}
@media(min-width:769px) and (max-width:960px){
#app{padding:12px 14px 0;max-width:none;gap:12px}
#main{padding-bottom:72px}
#main:has(.sc-grid){overflow:auto;padding-bottom:72px}
#nav{padding:12px 14px !important;gap:10px !important}
.nav-left{gap:10px;min-width:0}
.nav-logo{max-width:170px;overflow:hidden;text-overflow:ellipsis}
.nav-right{gap:8px;min-width:0}
.nav-btn{padding:7px 12px}
#hud{padding:10px 12px;gap:6px;flex-wrap:wrap}
.hs{padding:6px 10px;min-width:0}
.hud-pos{max-width:100%;margin-left:0}
.hero-wrap{padding:18px;display:flex;flex-direction:column;gap:12px}
.hero-title{font-size:2.1rem}
.hero-sub{max-width:70%;font-size:0.82rem}
.hero-mascot{width:160px;height:160px;right:10px;bottom:8px}
.hero-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:70%}
.hchip{min-width:0}
.rewards-grid{grid-template-columns:1fr}
.rewards-hero{flex-direction:column;align-items:stretch}
.rewards-balance{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;max-width:none}
.mode-row{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(180px,1fr);gap:10px}
.mcard{min-height:180px;max-height:none}
.info-cards-row{grid-template-columns:1fr}
.paywall-wrap{max-width:560px}
.paywall-plans{grid-template-columns:1fr;gap:10px}
.sc-grid{grid-template-columns:minmax(0,1fr);height:auto !important;overflow:visible}
.sc-main,.sidebar{overflow:visible;height:auto}
.sc-top{flex:none;min-height:0;padding:18px 20px}
.sc-q-glass{max-width:none}
.choices{gap:10px}
.prof-hero-body{flex-direction:column;align-items:stretch}
.prof-hero-left,.prof-hero-center,.prof-hero-right{width:100%;min-width:0;max-width:100%}
.md-lobby-horiz,.ch-lobby-horiz{height:auto;overflow:visible}
#main:has(.md-lobby-horiz),#main:has(.ch-lobby-horiz),#main:has(.md-setup-fullscreen){overflow:auto;padding-bottom:72px}
.md-diff-horiz,.md-setup-fullscreen{grid-template-columns:1fr;display:grid;height:auto;overflow:visible}
.ch-lobby-horiz{max-width:920px;margin:0 auto;gap:14px}
.ch-lobby-banner{padding:22px 24px;gap:16px}
.ch-lobby-cards{grid-template-columns:minmax(0,1.1fr) minmax(280px,0.9fr) !important;display:grid;height:auto;overflow:visible;align-items:stretch}
.ch-info-card,.ch-action-card{min-height:0}
.ch-action-card{padding:22px 18px}
.ch-action-vs{font-size:3rem}
.sc-grid:has(.ch-fullscreen){max-width:920px;margin:0 auto;grid-template-columns:minmax(0,1fr) !important}
.sc-grid:has(.ch-fullscreen) .sidebar{display:none}
.sc-grid:has(.ch-fullscreen) .ch-fullscreen{padding:14px 16px;max-width:none}
.sc-grid:has(.ch-fullscreen) .ch-topbar{flex-wrap:nowrap;justify-content:space-between}
.sc-grid:has(.ch-fullscreen) .ch-dots{flex-wrap:wrap;justify-content:flex-end;max-width:220px}
.sc-grid:has(.ch-fullscreen) .ch-vs-bar{padding:12px 14px}
.sc-grid:has(.ch-fullscreen) .ch-av-ring{width:60px;height:60px}
.sc-grid:has(.ch-fullscreen) .ch-name{font-size:0.74rem;max-width:84px}
.sc-grid:has(.ch-fullscreen) .ch-pts{font-size:1.28rem}
.sc-grid:has(.ch-fullscreen) .challenge-timer-row{margin:6px 0 8px;padding:8px 12px}
.sc-grid:has(.ch-fullscreen) .challenge-timer{min-width:42px;height:42px;font-size:1.25rem}
.sc-grid:has(.ch-fullscreen) .ch-question-card{padding:14px 16px}
.sc-grid:has(.ch-fullscreen) .ch-q-title{font-size:1.1rem}
.sc-grid:has(.ch-fullscreen) .ch-q-body{font-size:0.96rem;line-height:1.48}
.sc-grid:has(.ch-fullscreen) .ch-choices{gap:8px}
.sc-grid:has(.ch-fullscreen) .cho-btn{padding:12px 13px;font-size:0.88rem}
}
.icon-btn {
background: var(--sky-lt);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.icon-btn:hover {
transform: scale(1.1);
background: var(--sky-md);
}
/* ── CHALLENGE ROUND HEADER ── */
.challenge-header{background:linear-gradient(135deg,#F3F4F6 0%,#E5E7EB 100%);border-radius:12px;padding:16px 18px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,0.08);border:1px solid #D1D5DB}
.challenge-round-title{text-align:center;font-size:0.9rem;font-weight:700;color:var(--muted);margin-bottom:8px;letter-spacing:0.5px}
.round-number{color:var(--sky);font-size:1.05rem;font-weight:800}
.challenge-round-indicators{display:flex;justify-content:center;gap:4px;margin-bottom:12px}
.round-dot{width:8px;height:8px;border-radius:50%;background:#D1D5DB;transition:all 0.3s ease}
.round-dot.active{background:var(--mint)}
.round-dot.current{width:12px;height:12px;background:var(--sky);box-shadow:0 0 0 2px rgba(14,165,233,0.2)}
.challenge-scores{display:flex;gap:12px;justify-content:center}
.score-box{padding:10px 16px;border-radius:8px;text-align:center;min-width:110px;transition:transform 0.2s ease}
.score-box:hover{transform:translateY(-2px)}
.player-score{background:linear-gradient(135deg,rgba(14,165,233,0.1),rgba(2,132,199,0.1));border:1.5px solid var(--sky-md);box-shadow:inset 0 0 0 2px var(--sky);border-radius:12px}
.mini-boss-score{background:linear-gradient(135deg,rgba(249,115,22,0.1),rgba(234,88,12,0.1));border:1.5px solid #FB923C}
.score-label{font-size:0.8rem;font-weight:700;color:var(--muted);margin-bottom:4px;letter-spacing:0.3px}
.player-score .score-label{color:var(--sky-dk)}
.mini-boss-score .score-label{color:#B45309}
.score-value{font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:2px}
.player-score .score-value{color:var(--sky)}
.mini-boss-score .score-value{color:#F97316}
.score-unit{font-size:0.65rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
/* ── CHALLENGE HEADER AVATARS ── */
.player-avatar-section,.miniboss-avatar-section{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}
.player-avatar-circle,.miniboss-avatar-circle{width:40px;height:40px;border-radius:50%;overflow:hidden;background:rgba(14,165,233,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:6px;border:2px solid}
.player-avatar-circle{border-color:var(--sky)}
.miniboss-avatar-circle{border-color:#F97316}
.player-avatar-circle svg,.miniboss-avatar-circle svg{width:100%;height:100%}
.player-name-label,.miniboss-label{font-size:0.75rem;font-weight:700;color:var(--text);text-align:center;max-width:80px;word-break:break-word}
.miniboss-label{color:#B45309}
/* ── RESULTS SCREEN STYLING ── */
.result-header{text-align:center;font-size:1.3rem;font-weight:800;color:var(--text);margin-bottom:25px;letter-spacing:0.5px}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px}
.result-card{border-radius:12px;padding:20px;text-align:center;border:2px solid;transition:transform 0.2s ease}
.result-card:hover{transform:translateY(-4px)}
.result-your-choice{background:linear-gradient(135deg,rgba(14,165,233,0.08),rgba(2,132,199,0.08));border-color:var(--sky)}
.result-miniboss-choice{background:linear-gradient(135deg,rgba(249,115,22,0.08),rgba(234,88,12,0.08));border-color:#FB923C}
.result-avatar{width:50px;height:50px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;border:2px solid}
.result-your-choice .result-avatar{border-color:var(--sky)}
.result-miniboss-choice .result-avatar{border-color:#F97316}
.result-avatar svg{width:100%;height:100%}
.result-label{font-size:0.85rem;font-weight:700;color:var(--muted);margin-bottom:8px;letter-spacing:0.3px;text-transform:uppercase}
.result-choice-text{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:12px;line-height:1.4}
.result-status{font-size:0.95rem;font-weight:700;padding:8px;border-radius:6px}
.result-status.correct{color:#059669;background:rgba(5,150,105,0.1)}
.result-status.incorrect{color:#DC2626;background:rgba(220,38,38,0.1)}
.result-score-summary{display:flex;align-items:center;justify-content:center;gap:20px;padding:20px;background:linear-gradient(135deg,#F3F4F6 0%,#E5E7EB 100%);border-radius:12px;margin-bottom:20px}
.result-score-you,.result-score-miniboss{font-size:2rem;font-weight:800;text-align:center}
.result-score-you{color:var(--sky);flex:1}
.result-score-miniboss{color:#F97316;flex:1}
.result-score-vs{font-size:0.9rem;font-weight:700;color:var(--muted);text-transform:uppercase}
.result-best-choice{text-align:center;font-size:0.9rem;color:var(--muted);padding:15px;background:var(--muted-lt);border-radius:8px;line-height:1.5}
/* ── SPEED MODE LOBBY BANNER ── */
.speed-mode-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#1E293B 0%,#0F172A 100%);border-radius:14px;padding:14px 18px;margin-bottom:20px;border:2px solid #F97316;text-align:left}
.smb-icon{font-size:2.4rem;flex-shrink:0;animation:smb-pulse 1.2s ease-in-out infinite alternate}
@keyframes smb-pulse{from{transform:scale(1)}to{transform:scale(1.2)}}
.smb-title{font-size:1rem;font-weight:900;color:#FB923C;letter-spacing:.5px;margin-bottom:3px}
.smb-sub{font-size:0.82rem;color:#94A3B8;line-height:1.5}
.smb-sub strong{color:#FBBF24}
/* ── CHALLENGE FULL-SCREEN NO-SCROLL LAYOUT ── */
.ch-fullscreen{display:flex;flex-direction:column;gap:8px;min-height:calc(100dvh - 80px);padding:12px 16px;max-width:860px;margin:0 auto;box-sizing:border-box}
.sc-grid .ch-fullscreen{max-width:none;margin:0;width:100%;min-height:0;max-height:calc(100dvh - 100px);overflow:hidden;background:var(--card);border-radius:16px;box-shadow:inset 0 0 0 2px var(--sky)}
.sc-grid .ch-fullscreen .ch-choices{flex:1;justify-content:stretch}
.sc-grid .ch-fullscreen .ch-choices .cho-btn{flex:1}
.ch-topbar{display:flex;align-items:center;gap:10px;justify-content:space-between}
.ch-back-btn{background:rgba(255,255,255,0.15);border:1.5px solid rgba(255,255,255,0.25);border-radius:50px;padding:5px 14px;font-size:0.78rem;font-weight:700;color:var(--text);cursor:pointer;white-space:nowrap;transition:background 0.15s}
.ch-back-btn:hover{background:var(--sky-lt)}
.ch-round-info{font-size:0.82rem;font-weight:700;color:var(--muted);white-space:nowrap}
.ch-round-info strong{color:var(--sky);font-size:0.95rem}
.ch-dots{display:flex;gap:3px;align-items:center}
/* ── VS BAR ── */
.ch-vs-bar{display:flex;align-items:center;justify-content:center;gap:0;background:linear-gradient(135deg,rgba(14,165,233,0.08) 0%,rgba(249,115,22,0.08) 100%);border-radius:18px;padding:14px 20px;border:1.5px solid var(--border2)}
.ch-combatant{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.ch-av-ring{width:68px;height:68px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.12);flex-shrink:0}
.ch-av-ring svg,.ch-av-ring img{width:100%;height:100%;object-fit:cover;display:block;}
.player-ring{border:3px solid var(--sky);background:rgba(14,165,233,0.1);box-shadow:0 0 0 4px rgba(14,165,233,0.15),0 4px 16px rgba(14,165,233,0.2)}
.boss-ring{border:3px solid #F97316;background:rgba(249,115,22,0.1);box-shadow:0 0 0 4px rgba(249,115,22,0.15),0 4px 16px rgba(249,115,22,0.2)}
.ch-name{font-size:0.78rem;font-weight:800;max-width:90px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-color{color:var(--sky3)}
.boss-color{color:#C2410C}
.ch-pts{font-size:1.5rem;font-weight:900;line-height:1}
.ch-pts-lbl{font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:0.7}
.ch-vs-badge{font-size:1.3rem;font-weight:900;color:#fff;background:linear-gradient(135deg,#F97316,#DC2626);border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0 12px;box-shadow:0 4px 14px rgba(220,38,38,0.4);letter-spacing:-1px;animation:vsPulse 2s ease-in-out infinite}
@keyframes vsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* ── CHALLENGE QUESTION CARD ── */
.ch-question-card{background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);border-radius:16px;padding:18px 22px;color:var(--text);border:1.5px solid #CFE5F8;box-shadow:0 12px 28px rgba(15,23,42,0.08);position:relative}
.ch-question-card .local-question-watermark{top:10px;right:10px;left:auto;background:rgba(15,23,42,0.82)}
.ch-q-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ch-q-ico{font-size:1.6rem}
.ch-q-cat{font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#2563EB;flex:1}
.ch-q-title{font-size:1.25rem;font-weight:800;margin-bottom:8px;line-height:1.3;color:#0F172A}
.ch-q-body{font-size:1.05rem;line-height:1.55;color:#334155;text-align:center}
.ch-choices{display:flex;flex-direction:column;gap:7px}
/* ── CHALLENGE WINNER SCREEN ── */
.challenge-winner-card{max-width:760px;margin:0 auto;padding:20px 24px 22px;text-align:center}
.challenge-winner-emoji{font-size:3.2rem;margin-bottom:8px}
.challenge-winner-title{font-size:1.22rem;font-weight:700;margin-bottom:6px}
.challenge-finish-card{max-width:760px;margin:0 auto;padding:20px 20px 16px;border-radius:24px;position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);border:1.5px solid #DCEEFE;box-shadow:0 22px 48px rgba(14,76,129,0.12)}
.challenge-finish-card::before{content:'';position:absolute;inset:0;background:
radial-gradient(circle at top left,rgba(56,189,248,0.16),transparent 34%),
radial-gradient(circle at top right,rgba(167,139,250,0.16),transparent 30%),
radial-gradient(circle at bottom center,rgba(253,230,138,0.18),transparent 36%);
pointer-events:none}
.challenge-finish--win{
border:2px solid #60A5FA;
background:
radial-gradient(circle at top right,rgba(134,239,172,0.28),transparent 28%),
radial-gradient(circle at bottom left,rgba(191,219,254,0.35),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F2FFF8 100%);
box-shadow:0 22px 48px rgba(37,99,235,0.14);
}
.challenge-finish--loss{
border:2px solid #60A5FA;
background:
radial-gradient(circle at top right,rgba(191,219,254,0.42),transparent 28%),
radial-gradient(circle at bottom left,rgba(253,186,116,0.18),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F4F9FF 100%);
box-shadow:0 22px 48px rgba(37,99,235,0.14);
}
.challenge-finish--draw{
border:2px solid #60A5FA;
background:
radial-gradient(circle at top right,rgba(253,224,71,0.2),transparent 28%),
radial-gradient(circle at bottom left,rgba(191,219,254,0.32),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#FFFDF5 100%);
box-shadow:0 22px 48px rgba(37,99,235,0.14);
}
.challenge-finish--day{border-color:#BAE6FD}
.challenge-finish--day{
border:2px solid #60A5FA;
background:
radial-gradient(circle at top right,rgba(191,219,254,0.42),transparent 28%),
radial-gradient(circle at bottom left,rgba(110,231,183,0.18),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F2FBFF 100%);
box-shadow:0 20px 40px rgba(37,99,235,0.14);
}
.challenge-finish-top,.challenge-finish-scoreboard,.challenge-finish-summary,.challenge-finish-mini-grid,.challenge-finish-trail-wrap,.challenge-loot-wrap,.challenge-loot-cards,.challenge-finish-actions{position:relative;z-index:1}
.challenge-finish-top{text-align:center;margin-bottom:12px}
.challenge-finish-stamp{width:82px;height:82px;margin:0 auto 10px;border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:2.7rem;background:linear-gradient(135deg,#E0F2FE,#EDE9FE);box-shadow:0 16px 30px rgba(59,130,246,0.16);animation:floatBounce 3.2s ease-in-out infinite}
.challenge-finish-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#EFF6FF;color:#0F4C81;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.challenge-finish-title{font-size:1.65rem;font-weight:900;color:#0F4C81;letter-spacing:-.03em;margin-bottom:6px}
.challenge-finish-msg{font-size:.9rem;font-weight:700;max-width:560px;margin:0 auto;line-height:1.42}
.challenge-finish-outcome{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;padding:6px 12px;border-radius:999px;background:linear-gradient(135deg,#FFF7DB,#FEF3C7);border:1.5px solid #FCD34D;font-size:.74rem;font-weight:900;color:#92400E}
.challenge-finish-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:0 auto 10px;padding:12px;border-radius:20px;background:linear-gradient(135deg,#F8FDFF,#EEF6FF);border:1.5px solid #D8EEFF}
.challenge-finish-score-side{border-radius:18px;padding:12px 10px;background:#fff;box-shadow:0 10px 24px rgba(15,76,129,0.08)}
.challenge-finish-score-side--you{border:1.5px solid #93C5FD}
.challenge-finish-score-side--boss{border:1.5px solid #FDBA74}
.challenge-finish-score-avatar{width:108px;height:108px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,#E0F2FE,#F8FAFC);box-shadow:0 10px 22px rgba(15,76,129,0.12);overflow:hidden}
.challenge-finish-score-avatar svg,.challenge-finish-score-avatar img{width:100%;height:100%;display:block}
.challenge-finish-score-side--you .challenge-finish-score-avatar{border:3px solid #38BDF8;box-shadow:0 0 0 5px rgba(56,189,248,0.16),0 10px 22px rgba(14,165,233,0.18);background:linear-gradient(135deg,#E0F2FE,#FFFFFF)}
.challenge-finish-score-side--boss .challenge-finish-score-avatar{border:3px solid #F97316;box-shadow:0 0 0 5px rgba(249,115,22,0.16),0 10px 22px rgba(234,88,12,0.18);background:linear-gradient(135deg,#FFEDD5,#FFFFFF)}
.challenge-finish-score-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748B;margin-bottom:6px}
.challenge-finish-score-num{font-size:2.2rem;font-weight:900;line-height:1;color:#0F4C81;margin-bottom:8px}
.challenge-finish-vs{font-size:.92rem;font-weight:900;color:#fff;background:linear-gradient(135deg,#F97316,#FB923C);border-radius:999px;padding:8px 11px;letter-spacing:.08em;box-shadow:0 10px 20px rgba(249,115,22,0.22)}
.challenge-finish-score-bar{height:10px;border-radius:999px;background:#E5EEF8;overflow:hidden}
.challenge-finish-score-fill{height:100%;border-radius:999px}
.challenge-finish-score-fill--you{background:linear-gradient(90deg,#38BDF8,#2563EB)}
.challenge-finish-score-fill--boss{background:linear-gradient(90deg,#FB923C,#F97316)}
.challenge-finish-summary{padding:16px 18px;border-radius:22px;background:linear-gradient(135deg,#FEF3C7,#FFF7DB);border:1.5px solid #FCD34D;margin-bottom:14px;text-align:center}
.challenge-finish-summary--compact{margin-bottom:12px}
.challenge-finish-summary--day{background:linear-gradient(135deg,#E0F2FE,#F0F9FF);border-color:#7DD3FC}
.challenge-finish-summary-title{font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#92400E;margin-bottom:6px}
.challenge-finish-summary-copy{font-size:1rem;line-height:1.5;color:#7C2D12}
.challenge-finish-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.challenge-finish-mini-grid--compact{margin-bottom:10px}
.challenge-finish-mini-card{padding:14px 12px;border-radius:18px;background:linear-gradient(135deg,#F8FAFC,#EEF6FF);border:1.5px solid #DCEEFE;text-align:center}
.challenge-finish-mini-label{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748B;margin-bottom:6px}
.challenge-finish-mini-val{font-size:1rem;font-weight:900;color:#0F4C81;line-height:1.35}
.challenge-finish-points{padding:10px 12px;border-radius:18px;background:linear-gradient(135deg,#EFF6FF,#F8FBFF);border:1.5px solid #D8EEFF;margin-bottom:10px;text-align:center}
.challenge-finish-points-title{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#0F4C81;margin-bottom:6px}
.challenge-finish-points-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.challenge-finish-points-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#fff;border:1.5px solid #CFE5FB;font-size:.8rem;font-weight:800;color:#0F4C81}
.challenge-finish-points-empty{font-size:.9rem;font-weight:700;color:#64748B}
.challenge-finish--compact{max-width:740px;padding:18px 18px 14px}
.challenge-finish--compact .challenge-finish-top{margin-bottom:10px}
.challenge-finish--compact .challenge-finish-scoreboard{margin-bottom:8px}
.challenge-finish--compact .challenge-finish-actions{margin-top:8px}
.challenge-finish-trail-wrap{padding:16px;border-radius:22px;background:linear-gradient(135deg,#EFF6FF,#F8FAFC);border:1.5px solid #D8EEFF;margin-bottom:14px}
.challenge-finish-trail-wrap--day{background:linear-gradient(135deg,#F8FDFF,#EEF9FF)}
.challenge-finish-trail-title{font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#0F4C81;margin-bottom:10px}
.challenge-finish-statnow{margin-bottom:0}
.challenge-finish-trail{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.challenge-finish-dot{border-radius:16px;padding:10px 6px;text-align:center;background:#fff;border:1.5px solid #E2E8F0}
.challenge-finish-dot span{display:block;font-size:.6rem;font-weight:800;letter-spacing:.08em;color:#94A3B8;text-transform:uppercase;margin-bottom:4px}
.challenge-finish-dot strong{font-size:.92rem;font-weight:900;color:#475569}
.challenge-finish-dot.win{background:linear-gradient(135deg,#DCFCE7,#BBF7D0);border-color:#6EE7B7}
.challenge-finish-dot.win strong{color:#166534}
.challenge-finish-dot.loss{background:linear-gradient(135deg,#DBEAFE,#E0E7FF);border-color:#93C5FD}
.challenge-finish-dot.loss strong{color:#1D4ED8}
.challenge-finish-dot.empty{background:#F8FAFC}
.challenge-finish-actions{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-top:12px}
.challenge-finish-primary{margin:0}
.challenge-finish-secondary{margin:0;padding:12px 16px;border-radius:999px}
.challenge-loot-wrap--day{background:linear-gradient(145deg,#ECFEFF 0%,#E0F2FE 100%);border-color:#7DD3FC}
.challenge-loot-wrap--day .challenge-loot-title{color:#0F4C81}
.challenge-loot-wrap--day .challenge-loot-sub{color:#0369A1}
.challenge-loot-wrap--day .challenge-loot-list{background:rgba(255,255,255,0.78);border-color:rgba(14,116,144,0.12)}
.challenge-loot-wrap--day .challenge-loot-row{color:#0F4C81}
.challenge-loot-wrap--day .challenge-loot-row strong{color:#075985}
.challenge-loot-wrap{max-width:700px;margin:8px auto 10px;padding:12px 14px;border-radius:18px;text-align:left;background:linear-gradient(145deg,#FFF8E1 0%,#FFECC0 100%);border:1.5px solid #F4B942;box-shadow:0 10px 22px rgba(180,128,20,0.12)}
.challenge-loot-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.challenge-loot-copy{flex:1;min-width:0}
.challenge-loot-title{font-size:.95rem;font-weight:900;color:#7C2D12;line-height:1.15}
.challenge-loot-sub{font-size:.72rem;color:#B45309;margin-top:2px}
.challenge-loot-list{padding:8px 10px;border-radius:14px;background:rgba(255,251,235,0.82);border:1px solid rgba(180,83,9,0.12)}
.challenge-loot-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed rgba(146,64,14,0.12);font-size:.95rem;color:#0F4C81}
.challenge-loot-row strong{font-size:1rem;color:#0B4F7A}
.challenge-loot-row-last{border-bottom:none;padding-bottom:2px}
.challenge-loot-cards{margin:10px 0 8px;grid-template-columns:repeat(4,1fr);gap:8px}
.challenge-loot-cards .rw-card{border-radius:18px;padding:10px 8px;background:
radial-gradient(circle at top,rgba(255,255,255,0.75),rgba(255,255,255,0) 42%),
linear-gradient(150deg,#D1FAE5,#A7F3D0);
border:2px solid #22C55E;box-shadow:0 6px 14px rgba(34,197,94,0.14)}
.challenge-loot-cards .rw-card-icon{font-size:1.18rem;margin-bottom:4px}
.challenge-loot-cards .rw-card-label{font-size:.62rem;letter-spacing:.08em;color:#166534;margin-bottom:3px}
.challenge-loot-cards .rw-card-change{font-size:.92rem;padding:4px 10px}
.play-result:hover,
.challenge-round-result:hover,
.challenge-winner-card:hover,
.challenge-finish-card:hover,
.play-result .result-card:hover,
.challenge-round-result .result-card:hover{
transform:none !important;
box-shadow:inherit !important;
}
/* ═══════════════════════════════════════════════════════════════
CHALLENGE / RESULT RESPONSIVE RULES
These cover Business Challenge play, results, and winner screens.
═══════════════════════════════════════════════════════════════ */
@media(max-width:960px){
.challenge-header{padding:14px 14px;margin-bottom:12px}
.challenge-scores{gap:10px;flex-wrap:wrap}
.score-box{min-width:96px;padding:9px 12px}
.result-grid{gap:12px}
.result-card{padding:16px}
.result-score-summary{gap:14px;padding:16px}
.ch-topbar{flex-wrap:wrap;justify-content:center}
.ch-vs-bar{padding:12px 16px}
.ch-question-card{padding:16px 18px}
.play-result{padding:16px 14px}
.play-result.play-result--compact{min-height:auto;padding:16px 14px}
.lesson-card-header,.lesson-card-body{padding-left:14px;padding-right:14px}
.rw-cards-grid{gap:10px}
}
@media(max-width:768px){
.challenge-round-result{padding:14px !important}
.challenge-round-result--compact{min-height:auto !important}
.challenge-header{padding:12px}
.challenge-round-title{font-size:0.82rem}
.challenge-scores{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.score-box{min-width:0;padding:8px 10px}
.score-label{font-size:0.72rem}
.score-value{font-size:1.15rem}
.score-unit{font-size:0.58rem}
.result-header{font-size:1.1rem;margin-bottom:16px}
.result-grid{grid-template-columns:1fr;gap:10px;margin-bottom:14px}
.result-card{padding:14px}
.result-choice-text{font-size:0.92rem}
.result-status{font-size:0.86rem;padding:7px}
.result-score-summary{gap:10px;padding:12px;margin-bottom:14px}
.result-points-pill{justify-content:center}
.result-score-you,.result-score-miniboss{font-size:1.5rem}
.result-score-vs{font-size:0.75rem}
.speed-mode-banner{padding:12px 14px;gap:10px}
.smb-icon{font-size:2rem}
.smb-title{font-size:0.92rem}
.smb-sub{font-size:0.76rem}
.ch-fullscreen{padding:10px 12px;min-height:auto}
.sc-grid .ch-fullscreen{max-height:none;overflow:visible}
.ch-topbar{display:grid;grid-template-columns:1fr;justify-items:center;gap:8px}
.ch-back-btn,.ch-round-info{white-space:normal;text-align:center}
.ch-dots{flex-wrap:wrap;justify-content:center}
.ch-vs-bar{padding:10px 12px;gap:10px}
.ch-av-ring{width:56px;height:56px}
.ch-name{font-size:0.72rem;max-width:74px}
.ch-pts{font-size:1.18rem}
.ch-vs-badge{width:38px;height:38px;font-size:1rem;margin:0 6px}
.challenge-timer-row{gap:8px;padding:8px 10px;margin:6px 0 10px}
.challenge-timer-label{font-size:0.68rem}
.challenge-timer{min-width:40px;height:40px;font-size:1.2rem}
.ch-question-card{padding:14px 12px}
.ch-q-meta{align-items:flex-start;flex-wrap:wrap}
.ch-q-cat{font-size:0.72rem}
.ch-q-title{font-size:1.05rem}
.ch-q-body{font-size:0.92rem;line-height:1.45}
.ch-choices{gap:8px}
.challenge-winner-card{padding:14px 14px 16px !important}
.challenge-winner-emoji{font-size:2.5rem !important}
.challenge-winner-title{font-size:1.02rem !important}
.challenge-winner-msg{font-size:0.88rem !important;margin-bottom:10px !important}
.challenge-winner-score{padding:10px !important;margin-bottom:10px !important}
.challenge-winner-score-line{font-size:1.15rem !important}
.challenge-winner-score-sub{font-size:0.8rem !important}
.challenge-winner-reward{font-size:0.84rem !important;padding:10px 12px !important;margin-bottom:10px !important}
.challenge-winner-reward-amt{font-size:0.96rem !important}
.challenge-finish-card{padding:22px 14px 18px !important;border-radius:24px !important}
.challenge-finish-stamp{width:70px !important;height:70px !important;font-size:2.3rem !important}
.challenge-finish-title{font-size:1.55rem !important}
.challenge-finish-msg{font-size:0.92rem !important}
.challenge-finish-outcome{font-size:0.74rem !important;padding:7px 11px !important}
.challenge-finish-scoreboard{grid-template-columns:1fr !important;gap:10px !important;padding:14px !important}
.challenge-finish-vs{justify-self:center !important}
.challenge-finish-score-avatar{width:40px !important;height:40px !important;margin-bottom:6px !important}
.challenge-finish-mini-grid{grid-template-columns:1fr !important}
.challenge-finish-points-row{flex-direction:column}
.challenge-finish-points-pill{justify-content:center}
.challenge-finish-trail{grid-template-columns:repeat(5,1fr) !important}
.challenge-finish-dot{padding:8px 4px !important;border-radius:12px !important}
.challenge-finish-dot span{font-size:0.54rem !important}
.challenge-finish-dot strong{font-size:0.82rem !important}
.challenge-finish-actions{grid-template-columns:1fr !important}
.challenge-loot-wrap{padding:10px 10px 8px !important;margin:8px auto !important}
.challenge-loot-title{font-size:0.88rem !important}
.challenge-loot-sub{font-size:0.68rem !important}
.challenge-loot-list{padding:7px 9px !important}
.challenge-loot-row{font-size:0.88rem !important;padding:5px 0 !important}
.challenge-loot-row strong{font-size:0.94rem !important}
.challenge-loot-cards{grid-template-columns:1fr 1fr !important;gap:7px !important;margin:8px 0 8px !important}
.challenge-loot-cards .rw-card{padding:9px 7px !important}
.challenge-loot-cards .rw-card-icon{font-size:1rem !important}
.challenge-loot-cards .rw-card-label{font-size:0.56rem !important}
.challenge-loot-cards .rw-card-change{font-size:0.8rem !important;padding:3px 8px !important}
.play-result{padding:14px 12px}
.play-result .rw-cards-grid{grid-template-columns:1fr 1fr;gap:8px}
.play-result .rw-card{padding:10px 8px}
.play-result .rw-card-label{font-size:0.58rem}
.play-result .rw-card-change{font-size:0.85rem}
.lesson-card{margin-bottom:10px}
.lesson-card-header{padding:10px 12px;gap:8px}
.lesson-card-body{padding:11px 12px}
.lc-verdict-text{font-size:0.92rem}
.lc-badge{font-size:0.62rem}
.lc-lesson,.lc-best-choice,.lc-best-why{font-size:0.8rem}
.stat-now{grid-template-columns:1fr 1fr;gap:8px}
.big-play{font-size:0.96rem;padding:13px 12px}
}
@media(max-width:430px){
.challenge-scores{grid-template-columns:1fr}
.ch-vs-bar{flex-direction:column;padding:12px 10px}
.ch-combatant{width:100%}
.ch-name{max-width:none}
.ch-vs-badge{margin:2px 0}
.ch-question-card .sc-tts-btn{margin-left:auto}
.result-avatar{width:42px;height:42px;margin-bottom:8px}
.play-result .rw-cards-grid{grid-template-columns:1fr}
.stat-now{grid-template-columns:1fr}
.go-btn,.big-play{font-size:0.92rem}
}
@media(max-height:760px){
.challenge-round-result{max-height:none}
.ch-fullscreen{gap:6px}
.ch-vs-bar{padding:10px 14px}
.challenge-timer-row{margin:4px 0 8px}
.ch-question-card{padding:14px 16px}
}
/* ── RESULT CARD UPDATE: exact numbers only, no arrows ── */
.rw-card-change{display:inline-flex;align-items:center;justify-content:center;padding:4px 14px;border-radius:20px;font-weight:900;font-size:1.2rem}
.rw-card.gain .rw-card-change{background:#16A34A;color:#fff}
.rw-card.loss .rw-card-change{background:#DC2626;color:#fff}
.rw-card-val{display:none}
.rw-no-change{text-align:center;padding:18px;color:var(--muted);font-size:0.9rem;font-weight:600;background:var(--sky-lt);border-radius:14px;width:100%;grid-column:1/-1}
/* ── PROFILE GAMIFIED LAYOUT ── */
.prof-hero{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;background:linear-gradient(135deg,#0f766e 0%,#155e75 48%,#1d4ed8 100%);border-radius:20px;margin-bottom:16px;border:none;position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(14,116,144,0.18)}
.prof-hero::before{content:'✦ ✧ ★ ✦ ✧ ★';position:absolute;top:8px;right:10px;font-size:0.68rem;color:rgba(255,255,255,0.25);letter-spacing:5px;pointer-events:none}
.prof-hero::after{content:'';position:absolute;bottom:-20px;left:-20px;width:100px;height:100px;background:rgba(255,255,255,0.05);border-radius:50%;pointer-events:none}
.prof-wm{position:absolute;top:0;left:0;right:0;bottom:0;font-size:1.05rem;letter-spacing:10px;line-height:2.4;opacity:0.07;overflow:hidden;pointer-events:none;word-break:break-all;padding:6px 8px;user-select:none;z-index:0}
.prof-av-wrap{width:86px;height:86px;border-radius:50%;overflow:hidden;flex-shrink:0;border:3px solid rgba(255,255,255,0.9);box-shadow:0 0 0 5px rgba(255,255,255,0.2);background:rgba(255,255,255,0.15);animation:avatarPulse 2.5s ease-in-out infinite}
@keyframes avatarPulse{0%,100%{box-shadow:0 0 0 5px rgba(255,255,255,0.2),0 0 16px rgba(255,255,255,0.1)}50%{box-shadow:0 0 0 9px rgba(255,255,255,0.1),0 0 32px rgba(255,255,255,0.3)}}
.prof-av-wrap svg,.prof-av-wrap img{width:100%;height:100%;display:block;object-fit:cover;}
.prof-hero-info{flex:1;min-width:0}
.prof-hero-name-lbl{font-size:0.68rem;font-weight:700;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.p-input-hero{background:rgba(255,255,255,0.18)!important;border:1.5px solid rgba(255,255,255,0.4)!important;color:#fff!important}
.p-input-hero::placeholder{color:rgba(255,255,255,0.5)!important}
.save-name-btn{padding:7px 13px;background:rgba(255,255,255,0.22);color:#fff;border:1.5px solid rgba(255,255,255,0.5);border-radius:10px;font-size:0.78rem;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all 0.15s}
.save-name-btn:hover{background:rgba(255,255,255,0.38)}
.prof-position-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,0.2);color:#fff;border:1.5px solid rgba(255,255,255,0.4);border-radius:50px;padding:5px 12px;font-size:0.8rem;font-weight:700;margin-top:4px}
.prof-lv-badge{font-size:0.68rem;color:rgba(255,255,255,0.75);font-weight:700;margin-top:5px;letter-spacing:.3px}
/* Mini Boss Card — unified hero */
.prof-card-title-bar{font-size:0.65rem;font-weight:800;color:rgba(255,255,255,0.75);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px;display:flex;align-items:center;gap:5px}
.prof-card-title-bar::before{content:'';width:3px;height:10px;background:rgba(255,255,255,0.7);border-radius:2px;display:inline-block}
.prof-hero-body{display:flex;align-items:center;gap:14px;width:100%}
.prof-hero-left{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;width:240px;min-width:240px;padding:14px 18px;background:rgba(255,255,255,0.08);border-radius:16px;border:1.5px solid rgba(255,255,255,0.18)}
.prof-hero-center{min-width:0;text-align:center;width:100%}
/* Name: collapsed display row */
.prof-name-display-row{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:2px}
.prof-name-text{font-size:1.4rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:-0.3px}
.prof-edit-btn{background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.35);border-radius:8px;color:#fff;font-size:0.68rem;font-weight:700;padding:3px 9px;cursor:pointer;flex-shrink:0;white-space:nowrap;transition:background 0.15s}
.prof-edit-btn:hover{background:rgba(255,255,255,0.3)}
/* Name: edit row */
.prof-name-row{display:flex;gap:6px;align-items:center;margin-bottom:4px}
/* Position panel — large and obvious */
.prof-hero-right{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0;max-width:calc(100% - 260px);background:rgba(255,255,255,0.13);border-radius:18px;padding:8px 10px;border:1.5px solid rgba(255,255,255,0.25);position:relative;z-index:1}
.prof-pos-col{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.prof-pos-lbl{font-size:0.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,0.6)}
.prof-pos-icon-lg{display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.3))}
.prof-pos-name{font-size:0.7rem;font-weight:700;color:rgba(255,255,255,0.95);max-width:72px;line-height:1.3;text-align:center}
.prof-pos-divider{font-size:1.5rem;color:rgba(255,255,255,0.3);font-weight:300;padding:0 2px;margin-top:20px}
/* Integrated rank section inside hero card */
.prof-hero-rank{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.2);position:relative;z-index:1;width:100%}
.prof-rank-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.prof-rank-hdr span:first-child{font-size:0.75rem;font-weight:800;color:rgba(255,255,255,0.9);text-transform:uppercase;letter-spacing:.4px}
.prof-rank-pct{font-size:1rem;font-weight:900;color:#FBBF24}
/* Overall promotion bar — thicker, gold gradient */
.prof-rank-overall-bar{height:9px;background:rgba(255,255,255,0.15);border-radius:5px;overflow:hidden;margin-bottom:7px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)}
.prof-rank-overall-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,#818CF8,#A855F7,#EC4899);transition:width 1s cubic-bezier(.4,0,.2,1)}
/* Hero progress rows — bigger icons and text */
.hero-prow{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.hero-pico{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.hero-pico svg,.hero-pico img{width:100%;height:100%}
.hero-plbl{font-size:0.7rem;font-weight:700;color:rgba(255,255,255,0.85);width:65px;flex-shrink:0}
.hero-pbar{flex:1;height:8px;background:rgba(255,255,255,0.15);border-radius:4px;overflow:hidden}
.hero-pbar-fill{height:100%;border-radius:6px;transition:width 0.8s cubic-bezier(.4,0,.2,1)}
.hero-pbar-fill.met{background:linear-gradient(90deg,#34D399,#6EE7B7)!important}
.hero-pnum{font-size:0.7rem;font-weight:700;color:rgba(255,255,255,0.8);white-space:nowrap;flex-shrink:0;min-width:52px;text-align:right}
.hero-pnum.met{color:#6EE7B7;font-weight:800}
.hero-rank-ready{background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.4);border-radius:10px;padding:8px 12px;text-align:center;font-size:0.82rem;font-weight:700;color:#fff;margin-top:8px}
/* Section headers between profile cards */
.prof-section-hdr{font-size:0.72rem;font-weight:800;color:var(--sky3);text-transform:uppercase;letter-spacing:.6px;margin:16px 0 10px;display:flex;align-items:center;gap:8px}
.prof-section-hdr::before{content:'';width:3px;height:14px;background:linear-gradient(180deg,var(--sky),var(--mint));border-radius:2px;display:inline-block;flex-shrink:0}
/* Avatar section without its own sub-header now */
.prof-av-section{margin-bottom:14px;background:linear-gradient(135deg,#EFF6FF,#EDE9FE);border-radius:16px;padding:14px;border:1.5px solid var(--border2)}
/* Mini stats strip */
.prof-mini-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.prof-mini-card{border-radius:16px;padding:14px 8px;text-align:center;border:1.5px solid transparent;animation:rwCardIn 0.4s cubic-bezier(.3,1.5,.5,1) both}
.prof-mini-card.rnd{background:linear-gradient(135deg,#D1FAE5,#A7F3D0);border-color:var(--mint-md)}
.prof-mini-card.str{background:linear-gradient(135deg,#FEF3C7,#FDE68A);border-color:#FCD34D}
.prof-mini-card.chs{background:linear-gradient(135deg,#EDE9FE,#DDD6FE);border-color:#C4B5FD}
.prof-stat-icon{font-size:1.6rem;margin-bottom:3px}
.prof-stat-val{font-size:1.8rem;font-weight:900;color:var(--text);line-height:1}
.prof-stat-lbl{font-size:0.6rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.prof-av-section{margin-bottom:14px;background:linear-gradient(135deg,#EFF6FF,#EDE9FE);border-radius:16px;padding:14px;border:1.5px solid var(--border2)}
.prof-av-sect-hdr{font-size:0.78rem;font-weight:800;color:var(--sky-dk);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.av-opt{position:relative}
.av-opt-check{position:absolute;bottom:2px;right:2px;background:var(--sky);color:#fff;border-radius:50%;width:18px;height:18px;font-size:0.65rem;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 6px rgba(14,165,233,0.4)}
/* ── ROLE PROGRESS CARD ── */
.role-progress-card{background:linear-gradient(135deg,var(--sky-lt) 0%,var(--purple-lt) 100%);border-radius:18px;padding:16px 18px;margin-bottom:16px;border:1.5px solid var(--sky-md)}
/* Journey header: Now → % → Next */
.role-journey-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:8px}
.role-journey-from,.role-journey-to{flex:1;text-align:center}
.rj-label{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);margin-bottom:4px}
.rj-role{font-size:1.4rem;line-height:1.2;font-weight:800}
.rj-role span{font-size:0.72rem;font-weight:700;color:var(--muted);display:block;margin-top:2px}
.rj-next{color:var(--sky3)}
.role-journey-middle{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.rj-pct-lbl{font-size:0.6rem;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.4px}
/* Donut chart */
.role-donut{width:58px;height:58px;flex-shrink:0}
.role-donut-bg{fill:none;stroke:var(--border2);stroke-width:3.8}
.role-donut-fill{fill:none;stroke:var(--sky);stroke-width:3.8;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.role-donut-pct{font-size:8px;font-weight:900;fill:var(--sky-dk);text-anchor:middle;font-family:inherit}
/* Progress rows */
.role-prow{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.role-pico{font-size:1rem;flex-shrink:0;width:32px;display:flex;align-items:center;justify-content:center}
.role-plbl{font-size:0.72rem;font-weight:700;color:var(--muted);width:62px;flex-shrink:0}
.role-pbar{flex:1;height:12px;background:rgba(14,165,233,0.12);border-radius:6px;overflow:hidden}
.role-pbar-fill{height:100%;border-radius:6px;transition:width 0.8s cubic-bezier(.4,0,.2,1);animation:pbarSlide 0.8s cubic-bezier(.4,0,.2,1) both}
@keyframes pbarSlide{from{width:0!important}to{}}
.pbar-c{background:linear-gradient(90deg,var(--amber),#FBBF24)}
.pbar-u{background:linear-gradient(90deg,var(--sky),#38BDF8)}
.pbar-h{background:linear-gradient(90deg,var(--purple),#A78BFA)}
.pbar-bp{background:linear-gradient(90deg,#F97316,#FB923C)}
.pbar-c.met,.pbar-u.met,.pbar-h.met,.pbar-bp.met{background:linear-gradient(90deg,var(--mint),#34D399)}
.role-pnum{font-size:0.65rem;font-weight:700;color:var(--muted);background:var(--bg0);border:1px solid var(--border2);border-radius:50px;padding:2px 7px;flex-shrink:0;white-space:nowrap}
.role-pmet{color:var(--mint)!important;font-weight:800!important;background:var(--mint-lt)!important;border-color:var(--mint-md)!important}
.role-pcheck{color:var(--mint);font-size:0.85rem;font-weight:900;flex-shrink:0}
.role-ready-banner{background:linear-gradient(135deg,var(--mint-lt),var(--green-lt));color:#065F46;border:1.5px solid var(--mint-md);border-radius:12px;padding:10px;text-align:center;font-size:0.85rem;font-weight:700;margin-top:10px;animation:readyGlow 1.5s ease-in-out infinite alternate}
@keyframes readyGlow{from{box-shadow:0 0 6px rgba(16,185,129,0.2)}to{box-shadow:0 0 18px rgba(16,185,129,0.45)}}
/* ── BACKGROUND FINANCE ICONS ── */
.bg-icons{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-icon{position:fixed;width:60px;height:60px;opacity:0.2;display:flex;align-items:center;justify-content:center;animation:rotateFloat 14s ease-in-out infinite}
.bg-icon svg{width:100%;height:100%}
@keyframes floatBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.bg-icon:nth-child(1){animation:floatBounce 3.2s ease-in-out infinite}
.bg-icon:nth-child(2){animation:floatBounce 3.6s ease-in-out infinite}
.bg-icon:nth-child(3){animation:floatBounce 3.0s ease-in-out infinite}
.bg-icon:nth-child(4){animation:floatBounce 3.4s ease-in-out infinite}
.bg-icon:nth-child(5){animation:floatBounce 3.1s ease-in-out infinite}
.bg-icon:nth-child(6){animation:floatBounce 3.8s ease-in-out infinite}
.bg-icon:nth-child(7){animation:floatBounce 2.9s ease-in-out infinite}
.bg-icon:nth-child(8){animation:floatBounce 3.3s ease-in-out infinite}
.bg-icon:nth-child(9){animation:floatBounce 3.5s ease-in-out infinite}
.bg-icon:nth-child(10){animation:floatBounce 3.0s ease-in-out infinite}
.bg-icon:nth-child(11){animation:floatBounce 3.7s ease-in-out infinite}
.bg-icon:nth-child(12){animation:floatBounce 3.1s ease-in-out infinite}
.bg-icon:nth-child(13){animation:floatBounce 3.3s ease-in-out infinite}
.bg-icon:nth-child(14){animation:floatBounce 3.9s ease-in-out infinite}
.bg-icon:nth-child(15){animation:floatBounce 3.0s ease-in-out infinite}
.bg-icon:nth-child(16){animation:floatBounce 3.4s ease-in-out infinite}
.screen.home-dashboard{position:relative;z-index:1}
.home-main,.home-side{position:relative;z-index:1}
/* Profile Tabs */
.profile-tabs{display:flex;gap:8px;border-bottom:2px solid var(--sky-lt);padding-bottom:8px;margin-bottom:12px}
.tab-btn{background:none;border:none;padding:8px 12px;font-weight:600;font-size:0.9rem;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;transition:all 0.2s}
.tab-btn.active{color:var(--sky-dark);border-bottom-color:var(--sky)}
.tab-btn:hover:not(.active){color:var(--sky);opacity:0.8}
/* ── STATISTICS TAB GAMIFIED ── */
/* Performance Banner */
.stat-perf-banner{background:linear-gradient(135deg,#0f766e 0%,#155e75 48%,#1d4ed8 100%);border-radius:20px;padding:16px 18px;margin-bottom:16px;color:#fff;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.stat-perf-banner::before{content:'★ ✦ ★ ✦ ★';position:absolute;top:5px;right:10px;font-size:0.65rem;color:rgba(255,255,255,0.2);letter-spacing:4px;pointer-events:none}
.stat-perf-banner::after{content:'';position:absolute;bottom:-20px;left:-10px;width:80px;height:80px;background:rgba(255,255,255,0.05);border-radius:50%;pointer-events:none}
.stat-perf-grade{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.18);border:2.5px solid rgba(255,255,255,0.45);display:flex;align-items:center;justify-content:center;font-size:1.9rem;flex-shrink:0;animation:avatarPulse 2.5s ease-in-out infinite}
.stat-perf-info{flex:1;min-width:0}
.stat-perf-title{font-size:1rem;font-weight:800;margin-bottom:3px;letter-spacing:-0.3px}
.stat-perf-sub{font-size:0.72rem;color:rgba(255,255,255,0.75);line-height:1.5}
.stat-perf-right{text-align:center;flex-shrink:0}
.stat-perf-pts{font-size:2rem;font-weight:900;line-height:1;color:#fff}
/* Star rating */
.stat-diff-stars{margin:3px 0;line-height:1}
/* Win rate ring wrapper */
.stat-wr-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
/* Tier badge */
.wr-tier{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:0.68rem;font-weight:800;white-space:nowrap}
.wr-tier.gold{background:linear-gradient(135deg,#FEF3C7,#FDE68A);color:#78350F;border:1.5px solid #FCD34D}
.wr-tier.silver{background:linear-gradient(135deg,#F1F5F9,#E2E8F0);color:#475569;border:1.5px solid #CBD5E1}
.wr-tier.bronze{background:linear-gradient(135deg,#FEF3C7,#FDBA74);color:#92400E;border:1.5px solid #FB923C}
.wr-tier.rookie{background:var(--sky-lt);color:var(--sky3);border:1.5px solid var(--sky-md)}
/* Results label */
.stat-result-label{font-size:0.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
/* Badge improvements */
.badge-item.unlocked{background:linear-gradient(135deg,#FEF9C3,#FDE68A);border:2px solid #FCD34D;box-shadow:0 4px 14px rgba(251,191,36,0.25)}
.badge-item.unlocked:hover{transform:scale(1.06);box-shadow:0 8px 24px rgba(251,191,36,0.4)}
.badge-shine{position:absolute;top:0;left:0;right:0;height:50%;border-radius:14px 14px 60% 60%;background:linear-gradient(180deg,rgba(255,255,255,0.45) 0%,transparent 100%);pointer-events:none}
.badge-prog-bar{height:3px;background:rgba(0,0,0,0.1);border-radius:2px;margin-top:5px;overflow:hidden}
/* Category grade labels */
.cat-tile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.cat-grade{font-size:0.65rem;font-weight:900;padding:1px 6px;border-radius:20px;flex-shrink:0;letter-spacing:.3px}
.cat-grade.s-grade{background:linear-gradient(135deg,#FEF9C3,#FDE68A);color:#78350F;border:1px solid #FCD34D}
.cat-grade.a-grade{background:#D1FAE5;color:#065F46;border:1px solid #6EE7B7}
.cat-grade.b-grade{background:#E0F2FE;color:#0369A1;border:1px solid var(--sky-md)}
.cat-grade.c-grade{background:#FEF3C7;color:#78350F;border:1px solid #FCD34D}
.cat-grade.d-grade{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}
.stat-sect-hdr{border-radius:14px;padding:10px 14px;font-size:0.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.stat-sect-hdr.green{background:linear-gradient(135deg,#D1FAE5,#A7F3D0);color:#065F46;border:1.5px solid var(--mint-md)}
.stat-sect-hdr.purple{background:linear-gradient(135deg,#EDE9FE,#DDD6FE);color:#4C1D95;border:1.5px solid #C4B5FD}
.stat-sect-hdr.sky{background:linear-gradient(135deg,#E0F2FE,#BAE6FD);color:#0369A1;border:1.5px solid var(--sky-md)}
.stat-sect-hdr.coral{background:linear-gradient(135deg,#FEE2E2,#FECACA);color:#991B1B;border:1.5px solid #FCA5A5}
.stat-sect-hdr.amber{background:linear-gradient(135deg,#FEF3C7,#FDE68A);color:#78350F;border:1.5px solid #FCD34D}
/* Difficulty cards */
.stat-diff-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.stat-diff-card{border-radius:14px;padding:12px 10px;text-align:center;border:2px solid transparent;position:relative;overflow:hidden}
.stat-diff-card.easy{background:linear-gradient(135deg,#D1FAE5,#A7F3D0);border-color:#6EE7B7}
.stat-diff-card.medium{background:linear-gradient(135deg,#FEF3C7,#FDE68A);border-color:#FCD34D}
.stat-diff-card.hard{background:linear-gradient(135deg,#FEE2E2,#FECACA);border-color:#FCA5A5}
.stat-diff-ico{font-size:1.6rem;margin-bottom:4px}
.stat-diff-val{font-size:1.6rem;font-weight:900;line-height:1;color:var(--text)}
.stat-diff-name{font-size:0.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:3px 0}
.stat-diff-sub{font-size:0.62rem;color:var(--muted);font-weight:600}
.stat-diff-bar{height:5px;border-radius:3px;background:rgba(0,0,0,0.1);margin-top:6px;overflow:hidden}
/* Stats boxes row */
.stat-sbox-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stat-sbox{border-radius:14px;padding:14px 10px;text-align:center;border:2px solid transparent}
.stat-sbox.mint{background:linear-gradient(135deg,#D1FAE5,#A7F3D0);border-color:#6EE7B7}
.stat-sbox.sky{background:linear-gradient(135deg,#E0F2FE,#BAE6FD);border-color:var(--sky-md)}
.stat-sbox-ico{font-size:1.8rem;margin-bottom:4px}
.stat-sbox-val{font-size:2rem;font-weight:900;color:var(--text);line-height:1}
.stat-sbox-lbl{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-top:4px}
/* Win rate ring */
.stat-ch-wrap{display:flex;align-items:center;gap:14px;padding:12px 0;margin-bottom:10px}
.stat-wr-ring{width:86px;height:86px;flex-shrink:0}
.stat-wr-bg{fill:none;stroke:var(--border2);stroke-width:3.8}
.stat-wr-fill{fill:none;stroke:#8B5CF6;stroke-width:3.8;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1)}
.stat-wr-pct{font-size:7px;font-weight:900;fill:#6D28D9;text-anchor:middle;font-family:inherit}
.stat-wr-info{flex:1}
.stat-wr-lbl{font-size:0.95rem;font-weight:800;color:var(--text);margin-bottom:4px}
.stat-wr-sub{font-size:0.75rem;color:var(--muted)}
/* Result dot chips */
.ch-result-dots{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.ch-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.62rem;font-weight:800;border:2px solid transparent}
.ch-dot.win{background:#D1FAE5;color:#065F46;border-color:#6EE7B7}
.ch-dot.loss{background:#FEE2E2;color:#991B1B;border-color:#FCA5A5}
.ch-dot.empty{background:var(--bg0);color:var(--muted);border-color:var(--border2)}
/* Badges */
.badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px}
.badge-item{border-radius:16px;padding:14px 8px;text-align:center;background:var(--bg0);border:2px solid var(--border2);position:relative;transition:transform 0.15s,box-shadow 0.15s;overflow:hidden}
.badge-item.locked{opacity:0.6;filter:grayscale(0.4)}
.badge-ico{font-size:2rem;margin-bottom:4px}
.badge-name{font-size:0.68rem;font-weight:800;color:var(--text);line-height:1.2}
.badge-desc{font-size:0.58rem;color:var(--muted);margin-top:3px;line-height:1.3}
.badge-lock-overlay{font-size:0.9rem;position:absolute;top:5px;right:7px;opacity:0.4}
/* Category tiles */
.cat-tiles-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.cat-tile{border-radius:12px;padding:10px 12px;border:1.5px solid var(--border2);display:flex;align-items:center;gap:8px;font-size:0.78rem;font-weight:700}
.cat-tile.locked{background:var(--bg0);color:var(--muted);opacity:0.7}
.cat-tile.unlocked{background:linear-gradient(135deg,var(--sky-lt),#EDE9FE);color:var(--text);border-color:var(--sky-md)}
.cat-tile-ico{font-size:1.2rem;flex-shrink:0}
.cat-tile-info{flex:1;min-width:0}
.cat-tile-name{font-size:0.72rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-tile-pct{font-size:0.62rem;color:var(--muted);font-weight:600}
.cat-tile-bar{height:4px;background:var(--border2);border-radius:2px;margin-top:4px;overflow:hidden}
.cat-tile-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--sky),var(--mint))}
.ch-q-subcat{font-size:0.62rem;font-weight:600;color:#7C3AED;opacity:0.85;margin-left:2px}
.cat-section{margin-bottom:8px}
.cat-main-tile{border-width:2px;border-color:var(--sky-md)}
.cat-main-name{font-size:0.78rem !important;font-weight:800 !important}
.cat-subtiles-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:5px;padding-left:10px}
.cat-sub-tile{border-radius:9px !important;padding:7px 10px !important;border-color:rgba(124,58,237,0.2) !important;background:linear-gradient(135deg,#F5F3FF,#EDE9FE) !important}
/* Mission card */
.mission-card{background:linear-gradient(135deg,#FEF3C7,#FDE68A);border-radius:16px;padding:14px 16px;border:2px solid #FCD34D;margin-bottom:4px}
.mission-hdr{font-size:0.82rem;font-weight:800;color:#78350F;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.mission-goal{font-size:0.8rem;color:#92400E;font-weight:600;line-height:1.5}
.mission-goal+.mission-goal{margin-top:6px;padding-top:6px;border-top:1px solid rgba(0,0,0,0.08)}
/* ── Stat trio / duo grids */
.stat-trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.stat-duo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.stat-trio-box{background:#fff;border:2px solid #E2E8F0;border-radius:16px;padding:16px 12px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.stat-trio-box.correct{background:linear-gradient(135deg,#D1FAE5,#A7F3D0);border-color:#6EE7B7}
.stat-trio-box.wrong{background:linear-gradient(135deg,#FEE2E2,#FECACA);border-color:#FCA5A5}
.stat-trio-val{font-size:2rem;font-weight:900;color:var(--sky-dk);line-height:1}
.stat-trio-box.correct .stat-trio-val{color:#065F46}
.stat-trio-box.wrong .stat-trio-val{color:#991B1B}
.stat-trio-lbl{font-size:0.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:5px}
/* ── Mission insights */
.mission-insights{display:flex;flex-direction:column;gap:12px;margin-bottom:4px}
.mission-ins-block{background:#fff;border-radius:16px;padding:14px 16px;border:2px solid #E2E8F0;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.mission-ins-label{font-size:0.76rem;font-weight:800;color:var(--sky-dk);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.mission-cat-pills{display:flex;flex-wrap:wrap;gap:8px}
.mission-cat-pill{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:20px;padding:6px 14px;font-size:0.8rem;font-weight:700;min-width:120px}
.mission-cat-pill.strong{background:linear-gradient(135deg,#D1FAE5,#A7F3D0);border:1.5px solid #6EE7B7;color:#065F46}
.mission-cat-pill.weak{background:linear-gradient(135deg,#FEF3C7,#FDE68A);border:1.5px solid #FCD34D;color:#78350F}
.mcp-name{font-weight:700}
.mcp-rate{font-weight:800;font-size:0.78rem;opacity:0.8}
/* ── Tier badges */
.tier-badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:0.68rem;font-weight:800;letter-spacing:0.4px}
.tier-bronze{background:linear-gradient(90deg,#CD7F32,#A0522D);color:#fff;box-shadow:0 2px 8px rgba(160,82,45,0.45)}
.tier-silver{background:linear-gradient(90deg,#A8A9AD,#C4C4C4);color:#1a1a2e;box-shadow:0 2px 8px rgba(168,169,173,0.4)}
.tier-gold{background:linear-gradient(90deg,#FFD700,#FFA500);color:#1a1a2e;box-shadow:0 2px 8px rgba(255,215,0,0.45)}
.tier-diamond{background:linear-gradient(90deg,#6EC6CA,#B9F2FF);color:#0c4a6e;box-shadow:0 2px 8px rgba(110,198,202,0.45)}
.tier-elite{background:linear-gradient(90deg,#a855f7,#ec4899);color:#fff;box-shadow:0 2px 8px rgba(168,85,247,0.45)}
.tier-legend{background:linear-gradient(135deg,#FFD700,#FF6B6B,#a855f7);color:#fff;box-shadow:0 2px 10px rgba(255,107,107,0.5)}
/* ── Position panel rework */
.prof-pos-cols{display:flex;align-items:flex-start;justify-content:center;gap:10px}
.prof-pos-glow img,.prof-pos-glow svg{animation:iconGlow 2s ease-in-out infinite}
.prof-pos-glow{filter:drop-shadow(0 0 10px #FFD700) drop-shadow(0 0 5px #FFA500) drop-shadow(0 3px 8px rgba(0,0,0,0.35))}
.prof-pos-locked{opacity:0.42;filter:grayscale(0.55) drop-shadow(0 3px 8px rgba(0,0,0,0.3))}
@keyframes iconGlow{0%,100%{filter:drop-shadow(0 0 8px #FFD700) drop-shadow(0 0 4px #FFA500) drop-shadow(0 3px 8px rgba(0,0,0,0.3))}50%{filter:drop-shadow(0 0 18px #FFD700) drop-shadow(0 0 10px rgba(255,165,0,0.8)) drop-shadow(0 3px 14px rgba(0,0,0,0.45))}}
.tier-tagline{font-size:0.62rem;color:rgba(255,255,255,0.72);text-align:center;font-style:italic;line-height:1.35;max-width:165px;padding:0 2px}
/* ── View ranks button */
.view-ranks-btn{width:100%;margin-top:6px;padding:8px 12px;background:rgba(255,255,255,0.95);border:none;border-radius:12px;color:#1e3a5f;font-size:0.72rem;font-weight:800;cursor:pointer;letter-spacing:0.2px;transition:all 0.2s;box-shadow:0 3px 12px rgba(0,0,0,0.25)}
.view-ranks-btn:hover,.view-ranks-btn:active{background:#fff;box-shadow:0 5px 18px rgba(0,0,0,0.3);transform:translateY(-1px)}
/* Help & Contact */
.help-shell{display:flex;flex-direction:column;gap:10px}
.help-hero{background:linear-gradient(135deg,#0f766e 0%,#2563eb 100%);border-radius:20px;padding:14px 16px;color:#fff;box-shadow:0 12px 26px rgba(37,99,235,0.15)}
.help-hero-kicker{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,0.14);font-size:0.62rem;font-weight:800;letter-spacing:.4px;margin-bottom:7px}
.help-hero-title{font-size:1.18rem;font-weight:900;line-height:1.05;margin-bottom:4px}
.help-hero-sub{font-size:0.74rem;line-height:1.45;max-width:560px;color:rgba(255,255,255,0.92)}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.help-section-title{font-size:0.82rem;font-weight:900;color:var(--sky3);margin-top:0}
.help-card,.help-contact-box{background:#fff;border:1.5px solid rgba(37,99,235,0.12);border-radius:16px;padding:12px 13px;box-shadow:0 8px 20px rgba(15,23,42,0.05)}
.help-card--link{cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease}
.help-card--link:hover,.help-card--link:focus-visible{transform:translateY(-2px);border-color:rgba(37,99,235,0.28);box-shadow:0 12px 24px rgba(37,99,235,0.1);background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);outline:none}
.help-card{position:relative;overflow:hidden}
.help-card::before{
position:absolute;
right:10px;
bottom:8px;
font-size:2.5rem;
line-height:1;
opacity:.12;
pointer-events:none;
z-index:0;
filter:drop-shadow(0 6px 16px rgba(15,23,42,.08));
}
.help-card--play::before{content:'🧠'}
.help-card--powers::before{content:'⚡'}
.help-card--rewards::before{content:'🎁'}
.help-card--subscription::before{content:'💳'}
.help-card--soundlab::before{content:'🔊'}
.help-card-top{position:relative;z-index:1;margin-bottom:10px}
.help-card-kicker{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}
.help-card-top--play .help-card-kicker{color:#2563EB}
.help-card-top--powers .help-card-kicker{color:#7C3AED}
.help-card-top--rewards .help-card-kicker{color:#D97706}
.help-card-top--subscription .help-card-kicker{color:#1D4ED8}
.help-card-top--soundlab .help-card-kicker{color:#0f766e}
.help-card-ico{font-size:1.3rem;margin-bottom:5px;line-height:1}
.help-card-title{font-size:1rem;font-weight:900;color:var(--text);margin-bottom:0;line-height:1.12;position:relative;z-index:1}
.help-card-body{font-size:0.76rem;line-height:1.46;color:var(--muted);position:relative;z-index:1}
.help-fun-list{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.help-fun-row{display:flex;align-items:flex-start;gap:8px}
.help-fun-ico{width:26px;height:26px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem;box-shadow:0 4px 10px rgba(15,23,42,.08)}
.help-card-top--play + .help-fun-list .help-fun-ico{background:linear-gradient(135deg,#DBEAFE,#BFDBFE)}
.help-card-top--powers + .help-fun-list .help-fun-ico{background:linear-gradient(135deg,#F3E8FF,#E9D5FF)}
.help-fun-copy{min-width:0}
.help-fun-title{font-size:.82rem;font-weight:900;color:var(--text);line-height:1.1;margin-bottom:2px}
.help-fun-body{font-size:.72rem;line-height:1.38;color:var(--muted)}
.help-card-cta{margin-top:8px;font-size:.74rem;font-weight:800;color:var(--sky3);position:relative;z-index:1}
.help-contact-box{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;border-color:rgba(15,118,110,0.16);background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)}
.help-contact-top{display:flex;align-items:flex-start;gap:10px}
.help-contact-main{display:flex;flex-direction:column;gap:10px;flex:1;justify-content:space-evenly}
.help-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.help-form-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.help-form-field--message{gap:6px}
.help-form-label{font-size:.62rem;font-weight:900;color:var(--sky3);text-transform:uppercase;letter-spacing:.5px}
.help-form-control{width:100%;border:1.5px solid #D7E6FF;border-radius:12px;padding:9px 10px;background:#fff;font-size:.72rem;color:var(--text);outline:none;transition:border-color .15s ease, box-shadow .15s ease}
.help-form-control:focus{border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,0.12)}
.help-form-textarea{min-height:92px;max-height:132px;resize:vertical;line-height:1.45}
.help-form-hint{font-size:.68rem;line-height:1.4;color:#155e75;background:rgba(14,165,233,0.08);border:1px solid rgba(14,165,233,0.12);border-radius:12px;padding:8px 10px}
.help-contact-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.help-contact-btn{margin-top:12px;width:100%;padding:9px 11px;border:none;border-radius:12px;background:linear-gradient(90deg,#0ea5e9,#2563eb);color:#fff;font-size:0.74rem;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(37,99,235,0.18)}
.help-contact-btn:hover,.help-contact-btn:active{transform:translateY(-1px)}
.help-contact-actions .help-contact-btn{margin-top:0;width:auto;min-width:200px}
.help-contact-mini{font-size:.64rem;line-height:1.4;color:var(--muted);max-width:280px}
.help-footnote{font-size:0.66rem;color:var(--muted);text-align:center}
.help-footnote a{color:var(--sky3);font-weight:800;text-decoration:none}
.fx-page{display:flex;flex-direction:column;gap:12px}
.fx-page-hero{background:
radial-gradient(circle at top right,rgba(255,255,255,0.24),transparent 32%),
linear-gradient(135deg,#0f766e 0%,#2563eb 52%,#7c3aed 100%);
border-radius:22px;padding:16px 18px;color:#fff;box-shadow:0 14px 30px rgba(37,99,235,0.18);position:relative;overflow:hidden}
.fx-page-hero::after{content:'';position:absolute;inset:auto -6% -48% auto;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.2),transparent 68%);pointer-events:none}
.fx-page-kicker{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.16);padding:6px 11px;border-radius:999px;font-size:.68rem;font-weight:900;letter-spacing:.08em;margin-bottom:8px}
.fx-page-title{font-size:1.5rem;font-weight:900;line-height:1.05;margin-bottom:6px}
.fx-page-sub{font-size:.84rem;line-height:1.45;color:rgba(255,255,255,0.9);max-width:720px}
.fx-hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fx-hero-tags span{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);font-size:.66rem;font-weight:800;letter-spacing:.02em}
.fx-mood-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}
.fx-mood-card{display:flex;gap:9px;align-items:flex-start;padding:11px 12px;border-radius:16px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.16);backdrop-filter:blur(6px)}
.fx-mood-card--energy{background:linear-gradient(180deg,rgba(255,255,255,0.18),rgba(56,189,248,0.14))}
.fx-mood-card--joy{background:linear-gradient(180deg,rgba(255,255,255,0.18),rgba(251,191,36,0.15))}
.fx-mood-card--beauty{background:linear-gradient(180deg,rgba(255,255,255,0.18),rgba(244,114,182,0.14))}
.fx-mood-icon{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.18);font-size:1rem;flex-shrink:0}
.fx-mood-title{font-size:.8rem;font-weight:900;line-height:1.1;margin-bottom:3px}
.fx-mood-body{font-size:.66rem;line-height:1.4;color:rgba(255,255,255,0.86);font-weight:700}
.fx-page-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:12px}
.fx-panel{background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border:1.5px solid rgba(37,99,235,0.12);border-radius:18px;padding:14px 15px;box-shadow:0 8px 20px rgba(15,23,42,0.05)}
.fx-panel-title{font-size:1rem;font-weight:900;color:#0f3d69;margin-bottom:4px}
.fx-panel-sub{font-size:.72rem;line-height:1.4;color:#58718a;margin-bottom:8px}
.fx-signature-wrap{margin:10px 0 2px;padding:10px 11px;border-radius:16px;background:linear-gradient(180deg,#fff7ed 0%,#fff 100%);border:1px solid rgba(251,146,60,0.16)}
.fx-signature-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fx-signature-chip{appearance:none;border:none;border-radius:14px;padding:10px 11px;text-align:left;display:flex;flex-direction:column;gap:4px;background:linear-gradient(135deg,#fff1f2 0%,#eff6ff 50%,#fef3c7 100%);box-shadow:0 8px 18px rgba(148,163,184,0.12);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.fx-signature-chip:hover,.fx-signature-chip:focus-visible{transform:translateY(-1px);box-shadow:0 12px 20px rgba(37,99,235,0.14);outline:none}
.fx-signature-chip strong{font-size:.78rem;font-weight:900;color:#0f3d69;line-height:1.1}
.fx-signature-chip span{font-size:.64rem;line-height:1.35;color:#64748b;font-weight:700}
.fx-review-table-wrap{overflow:auto;border-radius:14px}
.fx-review-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.68rem;line-height:1.4}
.fx-review-table th,.fx-review-table td{padding:9px 10px;vertical-align:top;text-align:left}
.fx-review-table th{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:#0f766e;background:#ecfeff;border-bottom:1px solid #c7f3ff}
.fx-review-table td{background:#fff;border-bottom:1px solid #e0f2fe;color:#475569;font-weight:700}
.fx-review-table tbody tr:last-child td{border-bottom:none}
.fx-table-event{font-weight:900;color:#0f3d69}
.fx-review-list{display:flex;flex-direction:column;gap:10px}
.fx-review-card{border:1px solid rgba(37,99,235,0.12);border-radius:16px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);padding:12px 13px;box-shadow:0 8px 18px rgba(15,23,42,0.05)}
.fx-review-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:10px}
.fx-review-event{font-size:.9rem;font-weight:900;color:#0f3d69;line-height:1.1}
.fx-review-moment{font-size:.66rem;font-weight:800;color:#0f766e;background:#ecfeff;border-radius:999px;padding:4px 8px;white-space:nowrap}
.fx-review-actions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.fx-review-btn{appearance:none;border:none;border-radius:999px;padding:8px 11px;background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff;font-size:.66rem;font-weight:900;letter-spacing:.01em;cursor:pointer;box-shadow:0 8px 16px rgba(37,99,235,0.18);transition:transform .15s ease,box-shadow .15s ease}
.fx-review-btn:hover,.fx-review-btn:focus-visible{transform:translateY(-1px);box-shadow:0 10px 18px rgba(37,99,235,0.22);outline:none}
.fx-review-btn--soft{background:linear-gradient(180deg,#ffffff 0%,#eff6ff 100%);color:#0f3d69;border:1px solid rgba(37,99,235,0.14);box-shadow:0 6px 14px rgba(148,163,184,0.12)}
.fx-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fx-review-block{background:#fff;border:1px solid #e0f2fe;border-radius:13px;padding:9px 10px}
.fx-review-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;font-weight:900;color:#0f766e;margin-bottom:5px}
.fx-review-copy{font-size:.68rem;line-height:1.5;color:#475569;font-weight:700}
.fx-review-copy strong{color:#0f3d69}
.fx-review-meta{display:flex;flex-direction:column;gap:5px;margin-top:9px;padding-top:9px;border-top:1px dashed #cbd5e1}
.fx-review-meta-row{font-size:.66rem;line-height:1.45;color:#64748b;font-weight:700}
.fx-review-meta-row strong{color:#0f3d69}
.fx-current-list{display:flex;flex-direction:column;gap:8px}
.fx-current-row{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:10px;align-items:center;padding:8px 0}
.fx-current-use{font-size:.72rem;line-height:1.4;color:#58718a;font-weight:700}
.help-card--lab{grid-column:1 / -1;background:linear-gradient(180deg,#ffffff 0%,#f5fbff 100%)}
.fx-lab-section{position:relative;z-index:1;margin-top:10px}
.fx-lab-label{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.7px;color:#0f766e;margin-bottom:7px}
.fx-lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fx-lab-grid--combo{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx-lab-grid--voice{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx-lab-btn{border:none;border-radius:14px;padding:10px 9px;background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#0f3d69;font-size:.74rem;font-weight:900;line-height:1.15;cursor:pointer;box-shadow:0 8px 16px rgba(37,99,235,0.08);transition:transform .15s ease, box-shadow .15s ease}
.fx-lab-btn:hover,.fx-lab-btn:focus-visible{transform:translateY(-1px);box-shadow:0 10px 18px rgba(37,99,235,0.12);outline:none}
.fx-lab-btn--visual{background:linear-gradient(135deg,#fff7ed,#ffedd5)}
.fx-lab-btn--combo{background:linear-gradient(135deg,#ecfeff,#dbeafe)}
.fx-lab-btn--voice{background:linear-gradient(135deg,#fdf4ff,#ede9fe);color:#5b21b6}
.fx-lab-section--options{margin-top:12px}
.fx-option-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fx-option-list--visual{grid-template-columns:repeat(2,minmax(0,1fr))}
.fx-option-chip{
appearance:none;
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
gap:4px;
min-height:66px;
padding:10px 11px;
border-radius:16px;
border:1.5px solid rgba(96,165,250,0.18);
background:linear-gradient(180deg,#ffffff 0%,#eff6ff 100%);
box-shadow:0 8px 16px rgba(37,99,235,0.06);
cursor:pointer;
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.fx-option-chip:hover,.fx-option-chip:focus-visible{transform:translateY(-1px);box-shadow:0 10px 18px rgba(37,99,235,0.12);outline:none}
.fx-option-chip--picked{border-color:#2563eb;background:linear-gradient(180deg,#eff6ff 0%,#dbeafe 100%);box-shadow:0 0 0 3px rgba(37,99,235,0.16),0 12px 22px rgba(37,99,235,0.12)}
.fx-option-chip strong{
font-size:.8rem;
font-weight:900;
line-height:1.12;
color:#0f3d69;
}
.fx-option-chip span{
font-size:.66rem;
line-height:1.35;
color:#58718a;
font-weight:700;
}
.fx-option-list--visual .fx-option-chip{
background:linear-gradient(180deg,#fffdf5 0%,#fff3df 100%);
border-color:rgba(251,146,60,0.18);
}
.fx-option-list--visual .fx-option-chip--picked{
border-color:#f59e0b;
background:linear-gradient(180deg,#fff7e8 0%,#ffe7bf 100%);
box-shadow:0 0 0 3px rgba(245,158,11,0.16),0 12px 22px rgba(251,146,60,0.12);
}
@media (min-width:900px){
.help-shell{
display:grid;
grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);
grid-template-areas:
"hero hero"
"faq contact"
"foot foot";
grid-template-rows:auto 1fr auto;
min-height:calc(100dvh - 255px);
gap:8px 10px
}
.help-shell > .help-hero{grid-area:hero}
.help-shell > .help-grid{grid-area:faq;height:100%}
.help-shell > .help-section-title{display:none}
.help-shell > .help-contact-box{grid-area:contact;align-self:stretch}
.help-shell > .help-footnote{grid-area:foot}
.help-grid{height:100%;grid-auto-rows:minmax(0,1fr)}
.help-card{height:100%;display:flex;flex-direction:column;justify-content:flex-start}
.help-card--lab{height:auto}
.help-contact-box{height:100%}
.help-contact-main{height:100%}
.help-form-field--message{flex:1}
.help-form-textarea{height:100%;min-height:110px}
.help-contact-actions{margin-top:auto;align-items:flex-end}
.help-hero{padding:12px 14px;border-radius:18px}
.help-hero-kicker{font-size:.58rem;padding:4px 9px;margin-bottom:5px}
.help-hero-title{font-size:1.02rem}
.help-hero-sub{font-size:.67rem;line-height:1.32;max-width:500px}
.help-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.help-section-title{font-size:.76rem}
.help-card,.help-contact-box{padding:10px 11px;border-radius:14px}
.help-card-ico{font-size:1.1rem;margin-bottom:4px}
.help-card-kicker{font-size:.64rem;margin-bottom:5px}
.help-card-title{font-size:.88rem}
.help-card-body{font-size:.7rem;line-height:1.36}
.help-card::before{font-size:2.1rem;right:8px;bottom:7px}
.help-fun-list{gap:7px}
.help-fun-row{gap:7px}
.help-fun-ico{width:24px;height:24px;font-size:.86rem;border-radius:9px}
.help-fun-title{font-size:.74rem}
.help-fun-body{font-size:.66rem;line-height:1.32}
.help-contact-box{gap:8px}
.help-contact-top{gap:8px}
.help-form-grid{gap:7px}
.help-form-label{font-size:.56rem}
.help-form-control{padding:7px 9px;font-size:.66rem;border-radius:10px}
.help-form-textarea{min-height:86px;max-height:none}
.help-form-hint{font-size:.61rem;line-height:1.32;padding:7px 8px;border-radius:10px}
.help-contact-actions{gap:8px}
.help-contact-actions .help-contact-btn{min-width:168px}
.help-contact-btn{padding:8px 10px;font-size:.68rem;border-radius:11px}
.help-contact-mini{font-size:.57rem;line-height:1.28;max-width:220px}
.help-footnote{font-size:.58rem}
.fx-hero-tags{margin-top:8px}
.fx-hero-tags span{font-size:.6rem;padding:4px 9px}
.fx-mood-grid{gap:7px}
.fx-mood-card{padding:9px 10px;border-radius:14px}
.fx-mood-icon{width:30px;height:30px;border-radius:10px;font-size:.92rem}
.fx-mood-title{font-size:.72rem}
.fx-mood-body{font-size:.6rem}
.fx-signature-wrap{padding:9px 10px}
.fx-signature-row{grid-template-columns:1fr;gap:7px}
.fx-signature-chip{padding:9px 10px}
.fx-signature-chip strong{font-size:.72rem}
.fx-signature-chip span{font-size:.6rem}
.fx-review-table{font-size:.62rem}
.fx-review-table th,.fx-review-table td{padding:8px 9px}
.fx-review-card{padding:10px 11px}
.fx-review-event{font-size:.82rem}
.fx-review-moment{font-size:.6rem}
.fx-review-actions{gap:6px}
.fx-review-btn{font-size:.6rem;padding:7px 10px}
.fx-review-grid{gap:7px}
.fx-review-block{padding:8px 9px}
.fx-review-copy,.fx-review-meta-row{font-size:.62rem}
.fx-lab-grid,.fx-lab-grid--combo,.fx-lab-grid--voice{grid-template-columns:repeat(2,minmax(0,1fr))}
.fx-lab-btn{font-size:.68rem;padding:9px 8px}
.fx-option-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.fx-option-chip{min-height:60px;padding:9px 10px}
.fx-option-chip strong{font-size:.75rem}
.fx-option-chip span{font-size:.62rem}
.fx-page-grid{grid-template-columns:1.02fr .98fr;gap:10px}
.fx-current-row{grid-template-columns:minmax(140px,180px) 1fr;gap:8px}
.fx-current-use{font-size:.66rem}
}
@media (min-width:900px) and (max-height:900px){
.help-shell{gap:7px}
.help-hero{padding:11px 13px}
.help-card,.help-contact-box{padding:9px 10px}
.help-card-body{font-size:.6rem}
.help-card-kicker{font-size:.6rem}
.help-card-title{font-size:.82rem}
.help-fun-ico{width:22px;height:22px;font-size:.8rem}
.help-fun-title{font-size:.7rem}
.help-fun-body{font-size:.62rem}
.help-card::before{font-size:1.9rem}
.help-form-textarea{min-height:78px}
.help-contact-mini{font-size:.56rem}
.fx-lab-grid,.fx-lab-grid--combo,.fx-lab-grid--voice{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fx-lab-btn{font-size:.64rem;padding:8px 7px;border-radius:12px}
.fx-option-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fx-option-chip{min-height:56px;padding:8px 9px;border-radius:13px}
.fx-option-chip strong{font-size:.72rem}
.fx-option-chip span{font-size:.59rem}
.fx-page{gap:10px}
.fx-page-hero{padding:13px 15px;border-radius:18px}
.fx-page-title{font-size:1.24rem}
.fx-page-sub{font-size:.72rem}
.fx-mood-grid{grid-template-columns:1fr;gap:6px}
.fx-signature-row{grid-template-columns:1fr}
.fx-review-grid{grid-template-columns:1fr}
.fx-review-head{flex-direction:column}
.fx-review-moment{white-space:normal}
.fx-panel{padding:11px 12px}
.fx-panel-title{font-size:.88rem}
.fx-panel-sub{font-size:.66rem}
.fx-current-row{grid-template-columns:minmax(128px,165px) 1fr;gap:8px;padding:7px 0}
.fx-current-use{font-size:.62rem;line-height:1.32}
}
@media (min-width:900px) and (max-height:780px){
.help-shell{
grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
min-height:calc(100dvh - 235px);
gap:7px 8px
}
.help-hero{padding:10px 12px}
.help-hero-title{font-size:.96rem}
.help-hero-sub{font-size:.63rem;line-height:1.26}
.help-grid{gap:7px}
.help-card,.help-contact-box{padding:8px 9px;border-radius:13px}
.help-card-kicker{font-size:.56rem}
.help-card-title{font-size:.78rem}
.help-card-body{font-size:.64rem;line-height:1.28}
.help-card::before{font-size:1.7rem;right:7px;bottom:6px}
.help-fun-row{gap:6px}
.help-fun-ico{width:20px;height:20px;font-size:.72rem;border-radius:8px}
.help-fun-title{font-size:.66rem}
.help-fun-body{font-size:.58rem;line-height:1.24}
.help-contact-top{gap:7px}
.help-form-grid{gap:6px}
.help-form-control{padding:6px 8px;font-size:.62rem}
.help-form-textarea{min-height:70px}
.help-form-hint{font-size:.57rem;padding:6px 7px}
.help-contact-btn{padding:7px 9px;font-size:.64rem}
.help-contact-mini{font-size:.54rem;max-width:200px}
.help-footnote{font-size:.54rem}
.fx-lab-grid,.fx-lab-grid--combo,.fx-lab-grid--voice{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fx-lab-btn{font-size:.62rem;padding:7px 7px;border-radius:11px}
.fx-option-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fx-option-chip{min-height:52px;padding:7px 8px;border-radius:12px}
.fx-option-chip strong{font-size:.68rem}
.fx-option-chip span{font-size:.56rem;line-height:1.26}
.fx-page{gap:9px}
.fx-page-hero{padding:11px 13px;border-radius:16px}
.fx-page-kicker{font-size:.58rem;padding:4px 9px;margin-bottom:6px}
.fx-page-title{font-size:1.08rem}
.fx-page-sub{font-size:.64rem;line-height:1.32}
.fx-hero-tags{gap:6px;margin-top:8px}
.fx-hero-tags span{font-size:.55rem;padding:4px 8px}
.fx-mood-grid{grid-template-columns:1fr;gap:6px}
.fx-mood-card{padding:8px 9px;border-radius:13px}
.fx-mood-icon{width:28px;height:28px;border-radius:9px;font-size:.86rem}
.fx-mood-title{font-size:.68rem}
.fx-mood-body{font-size:.57rem;line-height:1.3}
.fx-signature-wrap{padding:8px 9px;border-radius:14px}
.fx-signature-row{grid-template-columns:1fr;gap:6px}
.fx-signature-chip{padding:8px 9px;border-radius:12px}
.fx-signature-chip strong{font-size:.66rem}
.fx-signature-chip span{font-size:.56rem}
.fx-review-table{font-size:.56rem}
.fx-review-table th,.fx-review-table td{padding:7px 8px}
.fx-review-card{padding:9px 10px;border-radius:14px}
.fx-review-event{font-size:.76rem}
.fx-review-moment{font-size:.56rem;padding:3px 7px}
.fx-review-actions{gap:5px}
.fx-review-btn{font-size:.56rem;padding:6px 9px}
.fx-review-grid{grid-template-columns:1fr;gap:6px}
.fx-review-block{padding:7px 8px;border-radius:11px}
.fx-review-copy,.fx-review-meta-row{font-size:.58rem;line-height:1.38}
.fx-page-grid{grid-template-columns:1fr;gap:9px}
.fx-panel{padding:10px 11px;border-radius:15px}
.fx-panel-title{font-size:.82rem}
.fx-panel-sub{font-size:.62rem;line-height:1.32}
.fx-current-row{grid-template-columns:1fr;gap:6px;padding:6px 0}
.fx-current-use{font-size:.58rem;line-height:1.28}
}
/* ── Rank Ladder page */
.rl-sub{font-size:0.72rem;color:var(--muted);text-align:center;margin:-4px 0 10px;line-height:1.4}
.rl-list{display:flex;flex-direction:column;gap:7px;max-height:62vh;overflow-y:auto;padding-right:2px;margin-bottom:4px}
.rl-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;border:1.5px solid var(--border2);background:var(--card);transition:opacity 0.2s}
.rl-row.rl-cur{background:linear-gradient(135deg,#1e3a5f,#0f2744);border-color:#FFD700;box-shadow:0 0 0 2.5px rgba(255,215,0,0.25),0 4px 16px rgba(0,0,0,0.15)}
.rl-row.rl-done{background:#f0fdf4;border-color:#6EE7B7}
.rl-row.rl-locked{opacity:0.52;filter:grayscale(0.25)}
.rl-num{width:22px;text-align:center;font-size:0.65rem;font-weight:800;color:var(--muted);flex-shrink:0}
.rl-row.rl-cur .rl-num{color:#FFD700;font-size:0.9rem}
.rl-row.rl-done .rl-num{color:#10B981;font-size:0.85rem}
.rl-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rl-row.rl-cur .rl-icon{filter:drop-shadow(0 0 8px #FFD700)}
.rl-info{flex:1;min-width:0}
.rl-name-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.rl-name{font-size:0.78rem;font-weight:800;color:var(--text)}
.rl-row.rl-cur .rl-name{color:#fff}
.rl-row.rl-done .rl-name{color:#065F46}
.rl-tier{font-size:0.58rem;font-weight:800;padding:2px 8px;border-radius:10px}
.rl-reqs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rl-req{display:flex;align-items:center;gap:3px;font-size:0.62rem;font-weight:700;color:var(--muted)}
.rl-starter{font-size:0.62rem;color:var(--muted);font-style:italic}
/* ═══════════════════════════════════════════════════════════════
PROFILE / HUD / NARROW-SCREEN CLEANUP
Extra small-screen fixes that do not belong to a single page.
═══════════════════════════════════════════════════════════════ */
/* Profile hero card — stack vertically on small screens */
@media(max-width:600px){
.prof-hero-body{flex-direction:column;align-items:stretch;gap:10px}
.prof-hero-left{width:100%;min-width:0;align-items:center;padding:12px 14px}
.prof-hero-right{max-width:100%}
.prof-hero-center{width:100%;min-width:0;text-align:center}
.rewards-screen{max-width:100%}
.rewards-shell{gap:10px}
.rewards-hero{padding:13px 14px;border-radius:18px}
.rewards-hero-title{font-size:1rem}
.rewards-hero-sub{font-size:.7rem;max-width:100%}
.rewards-balance{grid-template-columns:1fr 1fr;gap:6px}
.rewards-balance-card{padding:9px 10px;border-radius:14px}
.rewards-balance-value{font-size:.95rem}
.rewards-grid{gap:10px}
.rewards-shop-card{border-radius:16px;padding:11px}
.rewards-shop-top{gap:6px}
.rewards-shop-badge,.rewards-pill{font-size:.58rem}
.rewards-shop-cost{font-size:.66rem;max-width:112px}
.rewards-shop-icon{font-size:1.6rem}
.rewards-shop-title{font-size:.86rem}
.rewards-shop-desc{font-size:.66rem;line-height:1.4}
.rewards-progress-row{font-size:.64rem}
.rewards-shop-btn{padding:8px 10px;font-size:.72rem;border-radius:12px}
.rewards-footnote{font-size:.62rem}
.lucky-spin-ov{padding:14px}
.lucky-spin-box{padding:14px;border-radius:20px}
.lucky-spin-title{font-size:1rem}
.lucky-spin-reel-wrap{padding:12px 10px 10px}
.lucky-spin-reel{min-height:88px}
.lucky-spin-card-value{font-size:1rem}
.lucky-spin-result{padding:11px 10px 9px}
.lucky-spin-result-title{font-size:.96rem}
.lucky-spin-result-amount{font-size:1.05rem}
.lucky-spin-result-detail{font-size:.68rem}
.lucky-spin-btn{padding:9px 10px;font-size:.76rem}
.help-hero{padding:16px 15px;border-radius:20px}
.help-hero-title{font-size:1.15rem}
.help-hero-sub{font-size:.72rem}
.help-grid,.help-form-grid{grid-template-columns:1fr}
.help-card,.help-contact-box{padding:14px 13px;border-radius:16px}
.help-contact-top{gap:10px}
.fx-lab-grid,.fx-lab-grid--combo,.fx-lab-grid--voice{grid-template-columns:repeat(2,minmax(0,1fr))}
.help-form-control{padding:9px 10px;font-size:.74rem}
.help-form-textarea{min-height:116px}
.help-contact-actions{align-items:stretch}
.help-contact-actions .help-contact-btn{width:100%;min-width:0}
.help-contact-mini{max-width:none}
.help-contact-btn{padding:9px 10px;font-size:.74rem}
.fx-lab-btn{padding:9px 8px;font-size:.72rem}
.fx-page-grid{grid-template-columns:1fr}
.fx-page-hero{padding:16px 15px;border-radius:20px}
.fx-page-title{font-size:1.15rem}
.fx-page-sub{font-size:.72rem}
.fx-mood-grid{grid-template-columns:1fr}
.fx-signature-row{grid-template-columns:1fr}
.fx-review-grid{grid-template-columns:1fr}
.fx-panel{padding:14px 13px;border-radius:16px}
}
@media (max-height:820px){
.help-shell{gap:8px}
.help-hero{padding:12px 14px;border-radius:18px}
.help-hero-kicker{margin-bottom:5px}
.help-hero-title{font-size:1.04rem}
.help-hero-sub{font-size:.68rem;line-height:1.35}
.help-grid{gap:8px}
.help-card,.help-contact-box{padding:10px 11px;border-radius:14px}
.help-card-ico{font-size:1.15rem;margin-bottom:4px}
.help-card-title{font-size:.76rem;margin-bottom:3px}
.help-card-body{font-size:.64rem;line-height:1.34}
.help-form-grid{gap:7px}
.help-form-label{font-size:.58rem}
.help-form-control{padding:8px 9px;font-size:.68rem}
.help-form-textarea{min-height:78px;max-height:110px}
.help-form-hint{font-size:.63rem;padding:7px 9px}
.help-contact-btn{padding:8px 10px;font-size:.7rem}
.help-contact-mini,.help-footnote{font-size:.6rem}
}
@media (max-height:820px) and (orientation:landscape){
.help-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.help-card--lab{grid-column:1 / -1}
.help-contact-top{align-items:center}
.help-contact-box{gap:8px}
.help-form-grid{grid-template-columns:1fr 1fr}
.help-contact-actions{gap:8px}
}
/* Profile hero — tablet portrait: reduce left card footprint */
@media(min-width:601px) and (max-width:860px){
.prof-hero-left{width:195px;min-width:170px}
.prof-hero-right{max-width:calc(100% - 215px)}
}
/* Mode cards — 2 columns on mid-small screens */
@media(min-width:481px) and (max-width:700px){
.mode-row{grid-template-columns:1fr 1fr !important;grid-auto-rows:auto !important;gap:10px}
.mcard{min-height:180px !important;max-height:none !important}
}
/* HUD at mid-small range — prevent overflow / crowding */
@media(min-width:481px) and (max-width:700px){
.hs{font-size:0.7rem;padding:4px 7px;gap:5px}
#hud{gap:4px 5px}
}
/* Mobile — compact stats, rank ladder, challenge dots */
@media(max-width:480px){
.ch-dot{width:24px;height:24px;font-size:0.55rem}
.stat-wr-ring{width:70px;height:70px}
.stat-ch-wrap{gap:10px}
.rl-row{padding:7px 10px;gap:7px}
.rl-icon{width:36px;height:36px}
.mission-goal{font-size:0.76rem}
}
/* Very small screens (≤360px) — 2-col grids */
@media(max-width:360px){
.badges-grid{grid-template-columns:repeat(2,1fr)}
.stat-diff-grid{grid-template-columns:1fr 1fr}
.cat-tiles-grid{grid-template-columns:1fr}
}
/* Mid-small screens (481–700px) — hero title + HUD scale down */
@media(min-width:481px) and (max-width:700px){
.hero-title{font-size:1.6rem}
.hero-sub{font-size:0.78rem}
}
/* ═══════════════════════════════════════
MARKET DAY MODE
═══════════════════════════════════════ */
/* Mode Card – teal/cyan */
.mcard.market-day{
background:linear-gradient(145deg,#0891b2,#0e7490);
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px rgba(8,145,178,0.35);
}
.mcard.market-day:hover{
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 16px 36px rgba(8,145,178,0.45);
}
.mcard.market-day::after{
background-image:url('data:image/svg+xml,');
}
/* Market Day — locked/coming-soon state */
.mcard.market-day.mcard-locked{
opacity:0.55;
cursor:default;
pointer-events:none;
}
.mcard.market-day.mcard-locked:hover{
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px rgba(8,145,178,0.35);
transform:none;
}
.mcard.market-day .mcard-content{
gap:6px;
}
.mcard.market-day .mcard-icon{
width:54px;
height:58px;
}
.mcard-locked-badge{
display:inline-flex;
align-items:center;
gap:5px;
background:linear-gradient(135deg,rgba(255,255,255,0.2),rgba(255,255,255,0.1));
border:1px solid rgba(255,255,255,0.34);
border-radius:999px;
padding:5px 12px;
font-size:0.66rem;
font-weight:800;
color:#fff;
letter-spacing:.18px;
margin-top:5px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 4px 10px rgba(0,0,0,0.12);
backdrop-filter:blur(6px);
}
/* ─── Lobby Screen ─── */
.card.md-screen{
padding:16px 16px 20px;
display:flex!important;
flex-direction:column!important;
gap:12px;
max-width:500px;
margin:0 auto;
box-sizing:border-box;
}
.md-lobby-hdr{
text-align:center;
padding:6px 0 2px;
}
.md-lobby-emoji{
font-size:3rem;
line-height:1;
display:block;
margin-bottom:6px;
}
.md-lobby-title{
font-size:1.45rem;
font-weight:900;
color:var(--text);
margin-bottom:3px;
}
.md-lobby-sub{
font-size:0.82rem;
color:var(--muted);
line-height:1.4;
}
.md-lobby-stats{
display:flex;
gap:8px;
justify-content:center;
flex-wrap:wrap;
}
.md-stat-pill{
background:var(--sky-lt);
border:1.5px solid var(--sky-md);
border-radius:50px;
padding:5px 14px;
font-size:0.76rem;
font-weight:700;
color:var(--sky3);
display:flex;
align-items:center;
gap:4px;
}
.md-section-lbl{
font-size:0.74rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.8px;
color:var(--muted);
text-align:center;
}
.md-diff-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:9px;
}
.md-diff-btn{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
padding:14px 6px 12px;
border-radius:16px;
border:2.5px solid transparent;
cursor:pointer;
background:var(--bg1);
transition:all 0.18s;
font-family:inherit;
color:var(--text);
box-shadow:var(--sh);
}
.md-diff-btn:hover,.md-diff-btn:focus-visible{
transform:translateY(-3px);
box-shadow:var(--sh-md);
}
.md-diff-btn.easy{background:var(--mint-lt);border-color:var(--mint-md)}
.md-diff-btn.easy:hover{border-color:var(--mint)}
.md-diff-btn.medium{background:var(--amber-lt);border-color:var(--amber-md)}
.md-diff-btn.medium:hover{border-color:var(--amber)}
.md-diff-btn.hard{background:var(--coral-lt);border-color:#fca5a5}
.md-diff-btn.hard:hover{border-color:var(--coral)}
.md-diff-emoji{font-size:1.6rem;line-height:1}
.md-diff-name{font-size:0.82rem;font-weight:800;color:var(--text)}
.md-diff-desc{font-size:0.65rem;color:var(--muted);text-align:center;line-height:1.3}
/* ─── Weather banner ─── */
.md-weather{
border-radius:12px;
padding:9px 14px;
font-size:0.82rem;
font-weight:700;
text-align:center;
line-height:1.35;
}
.md-weather.sunny{background:var(--amber-lt);border:1.5px solid var(--amber-md);color:#92400e}
.md-weather.hot{background:#fff7ed;border:1.5px solid #fed7aa;color:#c2410c}
.md-weather.rainy{background:var(--sky-lt);border:1.5px solid var(--sky-md);color:var(--sky3)}
.md-weather.festival{background:var(--purple-lt);border:1.5px solid #c4b5fd;color:#5b21b6}
.md-weather.cold{background:#f0f9ff;border:1.5px solid #7dd3fc;color:var(--sky3)}
/* ─── Product card ─── */
.md-product{
background:linear-gradient(135deg,var(--sky-lt),#fff);
border:2px solid var(--sky-md);
border-radius:16px;
padding:14px 16px;
text-align:center;
}
.md-product-emoji{font-size:2.8rem;line-height:1;margin-bottom:4px}
.md-product-name{font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:3px}
.md-product-tip{font-size:0.76rem;color:var(--muted);font-style:italic;line-height:1.4}
/* ─── Choices ─── */
.md-choice-sec{display:flex;flex-direction:column;gap:7px}
.md-choice-lbl{
font-size:0.86rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.5px;
color:var(--text);
}
.md-choice-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:7px;
}
.md-choice-btn{
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
padding:11px 4px 9px;
border-radius:12px;
border:2.5px solid var(--border2);
background:var(--card);
cursor:pointer;
transition:all 0.18s;
font-family:inherit;
color:var(--text);
}
.md-choice-btn:hover{
border-color:var(--sky);
background:var(--sky-lt);
transform:translateY(-2px);
box-shadow:var(--sh);
}
/* ═══════════════════════════════════════
STORY PLAY NEW BANK SUPPORT
═══════════════════════════════════════ */
.sc-mode-note--mini{
padding:8px 10px;
font-size:.74rem;
}
.sc-main--match{
display:flex;
flex-direction:column;
gap:8px;
}
.sc-match-playfield{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:10px;
margin-top:8px;
}
.sc-match-column{
min-width:0;
}
.sc-match-section-label{
margin-bottom:6px;
font-size:.66rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--sky3);
}
.sc-match-stack{
display:grid;
grid-template-columns:1fr;
gap:7px;
}
.sc-match-target{
display:flex;
align-items:flex-start;
gap:10px;
width:100%;
text-align:left;
padding:10px 11px !important;
border-radius:16px !important;
transition:transform .14s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
user-select:none;
-webkit-user-select:none;
}
.sc-match-problem-num{
flex:0 0 auto;
width:24px;
height:24px;
border-radius:999px;
display:grid;
place-items:center;
background:linear-gradient(135deg,#60A5FA,#2563EB);
color:#fff;
font-size:.72rem;
font-weight:900;
}
.sc-match-target-copy{
flex:1;
min-width:0;
}
.sc-match-problem-text{
font-size:.8rem;
font-weight:900;
line-height:1.25;
color:var(--text);
}
.sc-match-slot{
margin-top:7px;
min-height:40px;
border-radius:12px;
padding:8px 10px;
border:1.5px dashed #BFDBFE;
background:#F8FAFC;
display:flex;
align-items:center;
transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sc-match-slot-placeholder,
.sc-match-slot-card{
font-size:.72rem;
font-weight:800;
line-height:1.25;
}
.sc-match-slot-placeholder{
color:#64748B;
}
.sc-match-slot-card{
color:#1D4ED8;
display:inline-flex;
align-items:center;
min-height:24px;
padding:4px 9px;
border-radius:999px;
background:linear-gradient(135deg,#DBEAFE,#EFF6FF);
box-shadow:0 4px 10px rgba(37,99,235,0.12);
}
.sc-match-target.is-ready{
border-color:#93C5FD !important;
background:linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%) !important;
}
.sc-match-target.is-ready .sc-match-slot{
background:linear-gradient(180deg,#FFFFFF 0%,#EFF6FF 100%);
}
.sc-match-target.is-filled .sc-match-slot{
border-style:solid;
border-color:#93C5FD;
background:#EFF6FF;
}
.sc-match-target.is-drop-hover{
border-color:#F59E0B !important;
background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 100%) !important;
box-shadow:0 10px 24px rgba(245,158,11,0.18);
transform:translateY(-1px);
}
.sc-match-target.is-drop-hover .sc-match-slot{
border-style:solid;
border-color:#FBBF24;
background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 100%);
box-shadow:0 0 0 3px rgba(251,191,36,0.15);
}
.choices--match{
display:grid !important;
grid-template-columns:1fr;
gap:7px !important;
}
.cho-btn--match-option{
justify-content:flex-start;
text-align:left;
gap:8px;
padding:10px 11px !important;
cursor:grab;
touch-action:none;
user-select:none;
-webkit-user-select:none;
transition:transform .14s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
will-change:transform;
}
.cho-btn--match-option:hover{
transform:translateY(-1px);
box-shadow:0 10px 18px rgba(180,138,63,0.1);
}
.cho-btn--match-option:active,
.cho-btn--match-option.is-armed{
cursor:grabbing;
transform:scale(.985);
}
.sc-match-card-emoji{
flex:0 0 auto;
width:24px;
height:24px;
border-radius:999px;
display:grid;
place-items:center;
background:#FFF7DC;
color:#C48A2C;
font-size:.8rem;
}
.cho-btn--match-option.is-ready{
border-color:#E8D7A7 !important;
background:linear-gradient(180deg,#FFFDF7 0%,#FFFFFF 100%) !important;
box-shadow:0 10px 20px rgba(180,138,63,0.12);
}
.cho-btn--match-option.is-used{
opacity:.55;
}
.cho-btn--match-option.is-dragging{
opacity:.18;
transform:scale(.98);
}
.sc-match-progress{
font-size:.7rem;
font-weight:800;
color:var(--muted);
}
.sc-match-progress-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:42px;
padding:3px 8px;
margin-right:6px;
border-radius:999px;
background:#DBEAFE;
color:#1D4ED8;
box-shadow:0 6px 14px rgba(37,99,235,0.12);
}
.match-drag-ghost{
position:fixed;
left:0;
top:0;
z-index:9999;
pointer-events:none;
max-width:min(260px,70vw);
padding:10px 12px;
border-radius:16px;
border:2px solid #F59E0B;
background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 100%);
color:#9A3412;
font-size:.8rem;
font-weight:900;
line-height:1.2;
box-shadow:0 18px 30px rgba(245,158,11,0.24);
transform:translate(-50%,-50%) rotate(-2deg);
}
body.match-dragging .sc-main--match{
cursor:grabbing;
}
@media (max-width:700px){
.sc-match-playfield{
grid-template-columns:1fr;
}
}
.md-choice-btn.sel{
border-color:var(--sky);
background:var(--sky-lt);
box-shadow:0 0 0 3px rgba(14,165,233,0.18);
}
.md-choice-icon{font-size:1.1rem;line-height:1.2}
.md-choice-name{font-size:0.92rem;font-weight:800}
.md-choice-hint{font-size:0.72rem;color:var(--muted);text-align:center;line-height:1.3}
/* Start Day button */
.md-start-btn{
width:100%;
padding:14px;
border-radius:14px;
border:none;
background:linear-gradient(135deg,#0ea5e9,#0284c7);
color:#fff;
font-size:1rem;
font-weight:800;
cursor:pointer;
font-family:inherit;
box-shadow:0 4px 0 rgba(2,132,199,0.5),0 6px 16px rgba(14,165,233,0.3);
transition:all 0.18s;
letter-spacing:.3px;
}
.md-start-btn:hover:not(:disabled){
transform:translateY(-2px);
box-shadow:0 6px 0 rgba(2,132,199,0.5),0 10px 24px rgba(14,165,233,0.35);
}
.md-start-btn:active:not(:disabled){
transform:translateY(2px);
box-shadow:0 2px 0 rgba(2,132,199,0.5);
}
.md-start-btn:disabled{
opacity:.42;
cursor:not-allowed;
background:var(--muted2);
box-shadow:none;
}
/* ─── Simulation screen ─── */
.md-sim-center{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0}
.md-sim-title{font-size:1.1rem;font-weight:800;color:var(--text);text-align:center}
.md-sim-stall{font-size:3.2rem;text-align:center;animation:mdBounce 1s ease-in-out infinite alternate}
@keyframes mdBounce{from{transform:scale(1)}to{transform:scale(1.06)}}
.md-crowd{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:6px;
min-height:64px;
background:var(--bg1);
border-radius:14px;
padding:10px 14px;
width:100%;
}
.md-pax{
font-size:1.3rem;
opacity:0;
transform:translateY(8px) scale(.6);
animation:mdPaxIn .3s ease forwards;
display:inline-block;
}
@keyframes mdPaxIn{to{opacity:1;transform:translateY(0) scale(1)}}
.md-pax-missed{font-size:1.3rem;opacity:.25;display:inline-block}
.md-progress-wrap{width:100%}
.md-progress-track{
height:12px;
background:var(--sky-lt);
border-radius:50px;
overflow:hidden;
box-shadow:inset 0 2px 4px rgba(0,0,0,0.07);
}
.md-progress-fill{
height:100%;
width:0%;
background:linear-gradient(90deg,#0ea5e9,#06b6d4);
border-radius:50px;
transition:width 1.6s cubic-bezier(.4,0,.2,1);
}
.md-progress-lbl{font-size:.74rem;color:var(--muted);font-weight:600;text-align:center;margin-top:5px}
/* ─── Results screen ─── */
.md-result-hdr{text-align:center;padding:4px 0 6px}
.md-result-emoji{font-size:3rem;line-height:1;margin-bottom:4px}
.md-result-title{font-size:1.25rem;font-weight:900;color:var(--text)}
.md-result-sub{font-size:.76rem;color:var(--muted);margin-top:2px}
.md-stat-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
}
.md-stat-tile{
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
padding:12px 6px 10px;
border-radius:14px;
background:var(--bg1);
border:2px solid var(--border2);
}
.md-stat-tile.pos{background:var(--mint-lt);border-color:var(--mint-md)}
.md-stat-tile.neg{background:var(--coral-lt);border-color:#fca5a5}
.md-stat-icon{font-size:1.35rem}
.md-stat-val{font-size:1.35rem;font-weight:900;color:var(--text)}
.md-stat-val.pos{color:var(--mint)}
.md-stat-val.neg{color:var(--coral)}
.md-stat-lbl{font-size:.65rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
/* Explanation box */
.md-explain{
display:flex;
align-items:flex-start;
gap:10px;
background:#fefce8;
border:2px solid #fde68a;
border-radius:14px;
padding:11px 13px;
}
.md-explain-ico{font-size:1.25rem;flex-shrink:0;margin-top:1px}
.md-explain-body{}
.md-explain-title{font-size:.76rem;font-weight:900;color:#78350f;margin-bottom:2px}
.md-explain-text{font-size:.76rem;color:#92400e;font-weight:600;line-height:1.45}
/* Score badge */
.md-score-row{
display:flex;
justify-content:center;
}
.md-score-badge{
background:linear-gradient(135deg,#fef3c7,#fde68a);
border:2px solid var(--amber);
border-radius:50px;
padding:7px 20px;
font-size:.88rem;
font-weight:800;
color:#78350f;
display:flex;
align-items:center;
gap:6px;
}
/* Action buttons */
.md-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
}
.md-btn{
padding:13px 10px;
border-radius:13px;
border:none;
font-size:.84rem;
font-weight:800;
cursor:pointer;
font-family:inherit;
transition:all .18s;
}
.md-btn:hover{transform:translateY(-2px)}
.md-btn:active{transform:translateY(1px)}
.md-btn.primary{
background:linear-gradient(135deg,#0ea5e9,#0284c7);
color:#fff;
box-shadow:0 3px 0 rgba(2,132,199,.5);
}
.md-btn.secondary{
background:var(--bg1);
border:2px solid var(--border2);
color:var(--text);
}
/* Responsive — already mobile-first, ensure it's comfortable on wider screens */
@media(min-width:520px){
.md-diff-row{gap:12px}
.md-choice-row{gap:10px}
}
/* ═══════════════════════════════════════════════════════════════
MARKET DAY / BUSINESS CHALLENGE LOBBY LAYOUTS
Full-screen lobby and setup layouts, plus their breakpoint rules.
═══════════════════════════════════════════════════════════════ */
/* Lock #main overflow */
#main:has(.md-lobby-horiz),
#main:has(.ch-lobby-horiz),
#main:has(.md-setup-fullscreen){overflow:hidden;padding-bottom:0}
/* ── Shared horizontal lobby shell (flex column) ── */
.md-lobby-horiz,
.ch-lobby-horiz{
display:flex;
flex-direction:column;
height:100%;
gap:12px;
overflow:hidden;
}
/* ── Compact hero banner — teal (Market Day) ── */
.md-lobby-banner{
background:linear-gradient(135deg,#0891b2 0%,#0e7490 60%,#0c6478 100%);
border-radius:18px;
padding:20px 28px;
color:#fff;
display:flex;
align-items:center;
gap:20px;
flex-shrink:0;
border:2px solid rgba(255,255,255,0.25);
box-shadow:0 5px 0 rgba(0,0,0,0.18),0 8px 20px rgba(8,145,178,0.25);
position:relative;
overflow:hidden;
}
/* ── Compact hero banner — amber (Business Challenge) ── */
.ch-lobby-banner{
background:linear-gradient(135deg,#d97706 0%,#b45309 60%,#92400e 100%);
border-radius:18px;
padding:20px 28px;
color:#fff;
display:flex;
align-items:center;
gap:20px;
flex-shrink:0;
border:2px solid rgba(255,255,255,0.25);
box-shadow:0 5px 0 rgba(0,0,0,0.18),0 8px 20px rgba(180,83,9,0.28);
position:relative;
overflow:hidden;
}
.md-lobby-banner::before,
.ch-lobby-banner::before{
content:'';
position:absolute;
inset:0;
background-image:radial-gradient(circle at 85% 50%,rgba(255,255,255,0.07) 1px,transparent 1px);
background-size:48px 48px;
pointer-events:none;
}
.lobby-banner-icon{font-size:3.5rem;flex-shrink:0;animation:floatBounce 3s ease-in-out infinite;position:relative;z-index:1}
.lobby-banner-body{flex:1;min-width:0;position:relative;z-index:1}
.lobby-banner-title{font-size:2rem;font-weight:900;letter-spacing:-0.5px;margin-bottom:4px;color:#fff}
.lobby-banner-sub{font-size:0.85rem;color:rgba(255,255,255,0.88);line-height:1.4}
.lobby-banner-meta{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.lobby-banner-stat{background:rgba(255,255,255,0.18);border:1.5px solid rgba(255,255,255,0.28);border-radius:50px;padding:4px 14px;font-size:0.75rem;font-weight:700;color:#fff}
/* ── MARKET DAY: 3 difficulty cards in a horizontal row ── */
.md-diff-horiz{
flex:1;
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:12px;
min-height:0;
}
.md-diff-card{
background:var(--card);
border:2px solid var(--border);
border-radius:18px;
padding:22px 18px;
display:flex;
flex-direction:column;
align-items:center;
cursor:pointer;
transition:all 0.2s;
text-align:center;
box-shadow:var(--sh);
overflow:hidden;
}
.md-diff-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.md-diff-card:active{transform:translateY(0)}
.md-diff-card-icon{font-size:3rem;margin-bottom:10px;animation:floatBounce 3.5s ease-in-out infinite}
.md-diff-card-name{font-size:1.2rem;font-weight:900;color:var(--text);margin-bottom:6px}
.md-diff-card-desc{font-size:0.77rem;color:var(--muted);line-height:1.45;flex:1;margin-bottom:14px}
.md-diff-card-btn{
width:100%;padding:10px;border:none;border-radius:12px;
font-size:0.84rem;font-weight:800;cursor:pointer;font-family:inherit;
color:#fff;pointer-events:none;
box-shadow:0 3px 0 rgba(0,0,0,0.2);
}
.md-diff-card.easy{border-top:4px solid #22c55e}
.md-diff-card.easy .md-diff-card-btn{background:linear-gradient(135deg,#22c55e,#16a34a)}
.md-diff-card.medium{border-top:4px solid #f59e0b}
.md-diff-card.medium .md-diff-card-btn{background:linear-gradient(135deg,#f59e0b,#d97706)}
.md-diff-card.hard{border-top:4px solid #ef4444}
.md-diff-card.hard .md-diff-card-btn{background:linear-gradient(135deg,#ef4444,#dc2626)}
/* ── BUSINESS CHALLENGE: 2 cards (info + action) in a row ── */
.ch-lobby-cards{
flex:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
min-height:0;
}
.ch-info-card{
background:var(--card);
border:2px solid var(--border);
border-radius:18px;
padding:20px;
display:flex;
flex-direction:column;
gap:12px;
overflow:hidden;
box-shadow:var(--sh);
}
.ch-action-card{
background:var(--card);
border:2px solid var(--border);
border-radius:18px;
padding:24px 20px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:14px;
overflow:hidden;
box-shadow:var(--sh);
}
.ch-action-matchup{display:flex;align-items:center;justify-content:center;gap:14px}
.ch-action-avatar{
width:86px;
height:86px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:linear-gradient(135deg,#F8FBFF,#E0F2FE);
box-shadow:0 10px 22px rgba(15,76,129,0.12);
}
.ch-action-avatar svg,.ch-action-avatar img{width:100%;height:100%;display:block}
.ch-action-avatar--player{border:2px solid #7DD3FC}
.ch-action-avatar--boss{border:2px solid #FBBF24}
.ch-action-vs{font-size:2.75rem;animation:floatBounce 2.5s ease-in-out infinite}
.ch-action-title{font-size:1.15rem;font-weight:900;color:var(--text)}
.ch-action-sub{font-size:0.78rem;color:var(--muted);text-align:center}
/* ── STORY PLAY landing variants ── */
.story-lobby-banner{
background:linear-gradient(135deg,#16a34a 0%,#15803d 60%,#166534 100%);
box-shadow:0 5px 0 rgba(0,0,0,0.18),0 8px 20px rgba(21,128,61,0.28);
}
.story-info-card{
border-color:#BBF7D0;
background:linear-gradient(180deg,#F7FFF9 0%,#FFFFFF 100%);
}
.story-progress-card{
border:1.5px solid #BBF7D0;
background:linear-gradient(180deg,#ECFDF5 0%,#FFFFFF 100%);
border-radius:16px;
padding:14px 15px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}
.story-progress-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.story-progress-kicker{
font-size:0.72rem;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#166534;
}
.story-progress-copy{
font-size:0.82rem;
font-weight:900;
color:#15803D;
}
.story-progress-bar{
width:100%;
height:10px;
background:#DCFCE7;
border-radius:999px;
overflow:hidden;
box-shadow:inset 0 1px 2px rgba(21,128,61,0.12);
}
.story-progress-fill{
height:100%;
border-radius:999px;
background:linear-gradient(135deg,#22C55E,#15803D);
}
.story-progress-note{
margin-top:10px;
font-size:0.77rem;
line-height:1.45;
font-weight:700;
color:#166534;
}
.story-type-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.story-type-chip{
display:flex;
align-items:center;
gap:8px;
min-width:0;
padding:11px 12px;
border-radius:14px;
background:linear-gradient(180deg,#FFFFFF 0%,#F0FDF4 100%);
border:1.5px solid #DCFCE7;
box-shadow:0 6px 16px rgba(34,197,94,0.08);
}
.story-type-chip span{
width:30px;
height:30px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:#DCFCE7;
font-size:1rem;
flex-shrink:0;
}
.story-type-chip strong{
font-size:0.78rem;
line-height:1.2;
color:#14532D;
}
.story-action-card{
border-color:#86EFAC;
background:linear-gradient(180deg,#F0FDF4 0%,#FFFFFF 100%);
}
.story-action-matchup{gap:12px}
.story-action-avatar{
border-color:#4ADE80 !important;
background:linear-gradient(135deg,#FFFFFF,#DCFCE7);
}
.story-action-icon{
width:70px;
height:70px;
border-radius:24px;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
background:linear-gradient(135deg,#DCFCE7,#BBF7D0);
color:#166534;
box-shadow:0 12px 24px rgba(21,128,61,0.15);
}
.story-big-play{
background:linear-gradient(135deg,#22C55E,#15803D);
box-shadow:0 6px 20px rgba(21,128,61,0.28);
}
.story-big-play:hover{
box-shadow:0 10px 28px rgba(21,128,61,0.34);
}
/* ── MARKET DAY landing variants ── */
.md-info-card{
border-color:#A5F3FC;
background:linear-gradient(180deg,#F3FEFF 0%,#FFFFFF 100%);
}
.md-info-feature{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px 15px;
border-radius:16px;
border:1.5px solid #BAE6FD;
background:linear-gradient(180deg,#ECFEFF 0%,#FFFFFF 100%);
}
.md-info-feature-icon{
width:42px;
height:42px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.35rem;
background:#CFFAFE;
flex-shrink:0;
}
.md-info-feature-title{
font-size:0.92rem;
font-weight:900;
color:#164E63;
margin-bottom:4px;
}
.md-info-feature-copy{
font-size:0.77rem;
line-height:1.5;
font-weight:700;
color:#155E75;
}
.md-lobby-stat-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.md-lobby-stat-card{
border-radius:15px;
padding:13px 12px;
background:linear-gradient(180deg,#FFFFFF 0%,#F0FDFF 100%);
border:1.5px solid #CFFAFE;
box-shadow:0 6px 16px rgba(8,145,178,0.08);
}
.md-lobby-stat-label{
display:block;
font-size:0.68rem;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#0F766E;
margin-bottom:6px;
}
.md-lobby-stat-value{
display:block;
font-size:1.35rem;
font-weight:900;
color:#0F172A;
}
.md-info-tip-list{
display:grid;
gap:8px;
}
.md-info-tip{
display:flex;
align-items:flex-start;
gap:8px;
padding:10px 12px;
border-radius:14px;
background:#FFFFFF;
border:1.5px solid #E0F7FA;
color:#164E63;
font-size:0.76rem;
font-weight:700;
line-height:1.4;
}
.md-info-tip span{flex-shrink:0}
.md-action-card{
align-items:stretch;
justify-content:flex-start;
border-color:#67E8F9;
background:linear-gradient(180deg,#ECFEFF 0%,#FFFFFF 100%);
}
.md-action-hero{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
text-align:center;
}
.md-action-stall{
width:84px;
height:84px;
border-radius:26px;
display:flex;
align-items:center;
justify-content:center;
font-size:2.5rem;
background:linear-gradient(135deg,#CFFAFE,#A5F3FC);
box-shadow:0 14px 28px rgba(8,145,178,0.14);
}
.md-lobby-difficulty-list{
display:grid;
gap:10px;
width:100%;
}
.md-lobby-diff-btn{
width:100%;
display:flex;
align-items:center;
gap:12px;
padding:13px 14px;
border-radius:16px;
border:1.5px solid #CFFAFE;
background:#FFFFFF;
cursor:pointer;
text-align:left;
transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
box-shadow:0 8px 18px rgba(8,145,178,0.08);
}
.md-lobby-diff-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 22px rgba(8,145,178,0.12);
}
.md-lobby-diff-btn.easy{border-color:#86EFAC}
.md-lobby-diff-btn.medium{border-color:#FCD34D}
.md-lobby-diff-btn.hard{border-color:#FDA4AF}
.md-lobby-diff-icon{
width:42px;
height:42px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.25rem;
flex-shrink:0;
background:#ECFEFF;
}
.md-lobby-diff-btn.easy .md-lobby-diff-icon{background:#DCFCE7}
.md-lobby-diff-btn.medium .md-lobby-diff-icon{background:#FEF3C7}
.md-lobby-diff-btn.hard .md-lobby-diff-icon{background:#FFE4E6}
.md-lobby-diff-copy{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
flex:1;
}
.md-lobby-diff-copy strong{
font-size:0.88rem;
color:#0F172A;
}
.md-lobby-diff-copy em{
font-style:normal;
font-size:0.74rem;
line-height:1.35;
font-weight:700;
color:#475569;
}
.md-lobby-diff-arrow{
font-size:0.9rem;
font-weight:900;
color:#0891B2;
flex-shrink:0;
}
/* ── MARKET DAY SETUP: fullscreen 2-col ── */
.md-setup-fullscreen{
display:grid;
height:100%;
gap:12px;
overflow:hidden;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.md-setup-left,.md-setup-right{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.md-setup-left{justify-content:center}
@media(min-width:769px) and (max-width:1100px){
.md-lobby-banner,.ch-lobby-banner{padding:18px 20px;gap:16px}
.lobby-banner-icon{font-size:3rem}
.lobby-banner-title{font-size:1.7rem}
.lobby-banner-sub{font-size:0.8rem}
.md-diff-horiz{grid-template-columns:repeat(3,minmax(0,1fr))}
.md-diff-card{padding:18px 14px}
.md-diff-card-name{font-size:1.05rem}
.md-diff-card-desc{font-size:0.72rem}
.ch-lobby-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(min-width:961px) and (max-width:1180px){
.sc-grid:has(.ch-fullscreen){grid-template-columns:minmax(0,1fr) 280px;gap:12px}
.sc-grid:has(.ch-fullscreen) .ch-fullscreen{padding:12px 14px}
.sc-grid:has(.ch-fullscreen) .ch-vs-bar{padding:12px 14px}
.sc-grid:has(.ch-fullscreen) .ch-av-ring{width:60px;height:60px}
.sc-grid:has(.ch-fullscreen) .ch-name{font-size:0.74rem}
.sc-grid:has(.ch-fullscreen) .ch-pts{font-size:1.3rem}
.sc-grid:has(.ch-fullscreen) .ch-question-card{padding:15px 18px}
.ch-lobby-horiz{max-width:1040px;margin:0 auto}
.ch-lobby-cards{grid-template-columns:minmax(0,1fr) minmax(320px,0.9fr)}
}
@media(min-width:961px){
.sc-grid:has(.ch-fullscreen) .sidebar{gap:8px !important}
.sc-grid:has(.ch-fullscreen) .sidebar .panel{padding:9px 11px !important}
.sc-grid:has(.ch-fullscreen) .sidebar .panel:last-child{flex:0 0 auto !important;overflow:visible !important}
.sc-grid:has(.ch-fullscreen) .sidebar .panel:last-child .rw-list{flex:none !important;gap:5px !important}
.sc-grid:has(.ch-fullscreen) .sidebar .panel-h{margin-bottom:5px !important;padding-bottom:5px !important}
.sc-grid:has(.ch-fullscreen) .sidebar .rw-row2{
flex:0 0 auto !important;
min-height:0 !important;
padding:6px 8px !important;
gap:7px !important;
align-items:center !important;
}
.sc-grid:has(.ch-fullscreen) .sidebar .rw-title{font-size:0.68rem !important;line-height:1.14 !important}
.sc-grid:has(.ch-fullscreen) .sidebar .rw-meta{font-size:0.56rem !important;line-height:1.12 !important}
.sc-grid:has(.ch-fullscreen) .sidebar .rw-buy-btn{padding:4px 9px !important;font-size:0.64rem !important}
}
@media(orientation:landscape) and (min-width:961px) and (max-width:1180px) and (max-height:900px){
.sc-grid{grid-template-columns:minmax(0,1fr) 276px !important;gap:10px !important}
.sc-grid .sidebar{gap:6px !important}
.sc-grid .sidebar .panel{padding:8px 10px !important}
.sc-grid .sidebar .panel:first-child{flex:0 0 auto !important}
.sc-grid .sidebar .panel:last-child{flex:1 1 auto !important}
.sc-grid .sidebar .panel-h{font-size:0.76rem !important;margin-bottom:4px !important;padding-bottom:4px !important}
.sc-grid .sidebar .cur-pos-box{padding:4px 7px !important;margin-bottom:4px !important;font-size:0.72rem !important;line-height:1.25 !important}
.sc-grid .sidebar .cur-pos-box img,
.sc-grid .sidebar .cur-pos-box svg{width:42px !important;height:42px !important}
.sc-grid .sidebar .cur-pos-lbl{font-size:0.54rem !important}
.sc-grid .sidebar .prow{padding:0 !important;margin-bottom:0 !important}
.sc-grid .sidebar .pem{width:20px !important;height:20px !important}
.sc-grid .sidebar .plbl{font-size:0.62rem !important;min-width:52px !important}
.sc-grid .sidebar .pnums{font-size:0.62rem !important;min-width:38px !important}
.sc-grid .sidebar .pbar{height:5px !important}
.sc-grid .sidebar .rw-list{gap:4px !important}
.sc-grid .sidebar .rw-row2{
flex:0 0 auto !important;
min-height:44px !important;
padding:4px 6px !important;
gap:5px !important;
align-items:flex-start !important;
}
.sc-grid .sidebar .rw-title{font-size:0.56rem !important;line-height:1.05 !important;margin-bottom:1px !important}
.sc-grid .sidebar .rw-meta{font-size:0.48rem !important;line-height:1.02 !important}
.sc-grid .sidebar .rw-buy-btn{
padding:3px 7px !important;
font-size:0.56rem !important;
align-self:center !important;
white-space:nowrap !important;
}
.sc-grid .sidebar .safety-active{font-size:0.56rem !important;padding:3px 5px !important;margin-top:3px !important}
}
@media(max-height:820px){
.md-lobby-banner,.ch-lobby-banner{padding:16px 20px}
.md-diff-card{padding:18px 14px}
.ch-info-card,.ch-action-card{padding:18px 16px}
.md-setup-fullscreen{gap:10px}
}
@media(max-width:900px),(max-height:720px){
.md-lobby-horiz,.ch-lobby-horiz{height:auto;overflow:visible}
#main:has(.md-lobby-horiz),#main:has(.ch-lobby-horiz){overflow:auto;padding-bottom:66px}
.md-diff-horiz,.ch-lobby-cards{grid-template-columns:1fr}
.md-setup-fullscreen{display:flex;flex-direction:column;height:auto;overflow:visible}
#main:has(.md-setup-fullscreen){overflow:auto;padding-bottom:66px}
}
/* ── Mobile fallback ── */
@media(max-width:768px){
.md-lobby-horiz,.ch-lobby-horiz{display:flex;flex-direction:column;height:auto;overflow:visible}
#main:has(.md-lobby-horiz),#main:has(.ch-lobby-horiz){overflow:auto;padding-bottom:66px}
.md-diff-horiz,.ch-lobby-cards{grid-template-columns:1fr}
.md-setup-fullscreen{display:flex;flex-direction:column;height:auto;overflow:visible}
#main:has(.md-setup-fullscreen){overflow:auto;padding-bottom:66px}
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE AUDIT FIXES — TABLET & MOBILE
Addresses layout issues found during tablet/mobile audit.
Desktop (min-width:961px) is NOT affected by any rule below.
═══════════════════════════════════════════════════════════════ */
/* ── FIX 1: 601–768px gap ────────────────────────────────────────
The existing tablet block starts at 769px, leaving the common
768px breakpoint (iPad, many Android tablets) without tablet
treatment. This block fills the 601–768px gap.
────────────────────────────────────────────────────────────── */
@media(min-width:601px) and (max-width:768px){
/* App shell */
#app{padding:10px 12px 0 !important;max-width:none;gap:10px}
#main{padding-bottom:68px}
#main:has(.sc-grid){overflow:auto;padding-bottom:68px}
/* Nav */
#nav{padding:10px 14px !important;gap:10px !important}
.nav-logo{max-width:155px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-right{gap:8px}
.nav-btn{padding:6px 11px}
/* HUD */
#hud{padding:8px 12px;gap:5px;flex-wrap:wrap}
.hs{padding:5px 8px;min-width:0}
.hud-pos{max-width:100%;margin-left:0}
/* Hero card */
.hero-wrap{padding-right:155px}
.hero-mascot{width:140px;height:140px;right:10px;bottom:8px}
.hero-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* Mode cards → 2 columns */
.mode-row{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:minmax(160px,1fr) !important;gap:10px}
.mcard{min-height:160px !important;max-height:none !important}
/* Info cards → single column */
.info-cards-row{grid-template-columns:1fr}
/* Scenario screen */
.sc-grid{grid-template-columns:minmax(0,1fr) !important;height:auto !important;overflow:visible}
.sc-main,.sidebar{overflow:visible;height:auto}
.sc-top{flex:none;min-height:0 !important;padding:16px 18px}
.sc-q-glass{max-width:none}
.choices{gap:10px}
/* Challenge fullscreen */
.sc-grid:has(.ch-fullscreen){max-width:100%;margin:0;grid-template-columns:minmax(0,1fr) !important}
.sc-grid:has(.ch-fullscreen) .sidebar{display:none !important}
.sc-grid:has(.ch-fullscreen) .ch-topbar{flex-wrap:nowrap;justify-content:space-between}
.sc-grid:has(.ch-fullscreen) .ch-dots{flex-wrap:wrap;justify-content:flex-end;max-width:220px}
/* Profile hero */
.prof-hero-body{flex-direction:column;align-items:stretch}
.prof-hero-left,.prof-hero-center,.prof-hero-right{width:100%;min-width:0;max-width:100%}
/* Market Day / Challenge lobbies */
.md-lobby-horiz,.ch-lobby-horiz{height:auto;overflow:visible}
#main:has(.md-lobby-horiz),#main:has(.ch-lobby-horiz){overflow:auto;padding-bottom:68px}
.md-diff-horiz,.ch-lobby-cards{grid-template-columns:1fr}
/* Compact diff cards to horizontal rows so all 3 fit without scrolling */
.md-diff-card{flex-direction:row !important;padding:12px 14px !important;gap:12px !important;align-items:center !important}
.md-diff-card-icon{font-size:1.8rem !important;margin-bottom:0 !important;flex-shrink:0 !important}
.md-diff-card-desc{display:none !important}
.md-diff-card-btn{margin-top:0 !important;margin-left:auto !important;flex-shrink:0 !important}
.md-setup-fullscreen{display:flex;flex-direction:column;height:auto;overflow:visible}
#main:has(.md-setup-fullscreen){overflow:auto;padding-bottom:68px}
}
/* ── FIX 2: Hide sidebar during scenario/challenge play on all
non-desktop sizes (≤960px).
The sidebar (Position tracker + Rewards shop) is secondary
content accessible from the home screen. Hiding it ensures
the play area always fits on screen without scrolling.
────────────────────────────────────────────────────────────── */
@media(max-width:960px){
.sc-grid .sidebar{display:none !important}
}
/* ── FIX 3: Mobile portrait (≤480px) — compact scenario card ────
Reduces question card size so all 3 answer choices are visible
on screen without scrolling in portrait orientation.
────────────────────────────────────────────────────────────── */
@media(max-width:480px){
.sc-top{padding:10px 12px !important;min-height:0 !important}
.sc-q-glass{padding:9px 11px !important;margin-top:5px !important}
.sc-icon-ring{width:36px !important;height:36px !important;font-size:1.1rem !important;margin-bottom:3px !important}
.sc-cat{font-size:0.62rem !important;margin-bottom:2px !important}
.sc-name{font-size:1.05rem !important;line-height:1.25 !important}
.sc-diff{font-size:0.58rem !important;padding:2px 6px !important;margin-bottom:3px !important}
.sc-body{font-size:0.88rem !important;line-height:1.38 !important;padding:7px 9px !important;margin-top:3px !important}
.sc-tts-btn{width:34px !important;height:34px !important;font-size:1rem !important;top:8px !important;right:8px !important}
/* Compact choices */
.choices{gap:5px !important}
.cho-btn{padding:10px 12px !important;font-size:0.87rem !important;min-height:46px !important}
.cho-ltr{width:24px !important;height:24px !important;font-size:0.74rem !important;border-radius:6px !important}
/* Challenge screen fills the whole main — no bottom nav padding needed */
#main:has(.ch-fullscreen){padding-bottom:0 !important}
/* ── Challenge screen: compact portrait ── */
.ch-fullscreen{gap:5px !important;padding:8px 10px !important}
.ch-topbar{padding:0 !important;margin-bottom:4px !important;gap:6px !important}
.ch-back-btn{padding:4px 10px !important;font-size:0.72rem !important}
.ch-round-info{font-size:0.74rem !important}
.ch-dots span{width:6px !important;height:6px !important}
.ch-vs-bar{padding:8px 12px !important;margin-bottom:0 !important}
.ch-av-ring{width:50px !important;height:50px !important}
.ch-pts{font-size:1.1rem !important}
.ch-name{font-size:0.62rem !important}
.ch-vs-badge{width:34px !important;height:34px !important;font-size:1.05rem !important;margin:0 8px !important}
.challenge-timer-row{padding:5px 10px !important;margin:3px 0 5px !important}
.challenge-timer{min-width:34px !important;height:34px !important;font-size:0.95rem !important}
.ch-question-card{padding:10px 12px !important;margin-bottom:0 !important}
.ch-q-title{font-size:0.95rem !important;margin-bottom:4px !important}
.ch-q-body{font-size:0.84rem !important;line-height:1.38 !important}
.ch-choices{gap:5px !important}
.ch-choices .cho-btn{min-height:42px !important;padding:8px 12px !important}
/* ── Challenge lobby compact portrait ── */
.ch-lobby-banner{padding:10px 14px !important}
.ch-lobby-banner .lobby-banner-icon{font-size:1.6rem !important;margin-bottom:2px !important}
.ch-lobby-banner .lobby-banner-title{font-size:1.1rem !important}
.ch-lobby-banner .lobby-banner-sub{font-size:0.68rem !important}
.ch-info-card{display:none !important}
.ch-lobby-cards{grid-template-columns:1fr !important;gap:8px !important}
.ch-action-matchup{gap:8px !important}
.ch-action-avatar{width:60px !important;height:60px !important}
.ch-action-vs{font-size:1.8rem !important;animation:none !important;margin-bottom:0 !important}
.ch-action-card{padding:14px !important;gap:8px !important}
.ch-action-title{font-size:1rem !important}
.ch-action-sub{font-size:0.72rem !important}
/* ── Market Day lobby compact portrait ── */
.md-lobby-banner{padding:10px 14px !important}
.md-lobby-banner .lobby-banner-icon{font-size:1.6rem !important;margin-bottom:2px !important}
.md-lobby-banner .lobby-banner-title{font-size:1.1rem !important}
.md-lobby-banner .lobby-banner-sub{display:none !important}
.md-lobby-banner .lobby-banner-meta{gap:8px !important}
.md-diff-horiz{gap:8px !important;flex-direction:column !important}
.md-diff-card{flex-direction:row !important;padding:10px 12px !important;gap:10px !important;align-items:center !important}
.md-diff-card-icon{font-size:1.6rem !important;margin-bottom:0 !important;animation:none !important;flex-shrink:0 !important}
.md-diff-card-name{font-size:0.85rem !important;margin-bottom:0 !important}
.md-diff-card-desc{display:none !important}
.md-diff-card-btn{margin-top:0 !important;padding:6px 14px !important;margin-left:auto !important;flex-shrink:0 !important}
.md-lobby-horiz > .go-btn{padding:7px !important;font-size:0.8rem !important;margin-top:4px !important}
}
/* ── FIX 4: Landscape orientation (max-height:500px) ────────────
Applies to: mobile landscape, short-height tablets.
NOT applied to desktop (guarded by max-width:960px below).
Uses a 2-column layout so question and choices sit side by side.
────────────────────────────────────────────────────────────── */
@media(max-height:500px) and (max-width:960px){
/* Ultra-compact nav */
#nav{padding:6px 12px !important;gap:8px !important}
.nav-btn{padding:4px 9px !important;font-size:0.73rem !important}
.nav-logo{font-size:0.88rem !important}
.nav-profile{padding:4px 8px 4px 4px !important;gap:6px !important}
.nav-profile-info{display:none !important}
.nav-av{width:26px !important;height:26px !important}
.sound-btn,.tts-btn{width:30px !important;height:30px !important;font-size:0.95rem !important}
/* App shell — flex stretch so #main fills viewport height */
#app{gap:0 !important;padding:5px 10px 0 !important;height:100dvh !important;overflow:hidden !important}
/* Home/lobby: scrollable. Challenge play: locked */
#main{flex:1 !important;min-height:0 !important;overflow-y:auto !important}
#main:has(.ch-fullscreen){overflow:hidden !important}
/* Hide trial banner — frees ~36px of vertical space */
.trial-banner{display:none !important}
/* Compact HUD */
#hud{padding:4px 8px !important;gap:3px !important}
.hs{padding:3px 5px !important;font-size:0.62rem !important;gap:3px !important}
.hs img{width:13px !important;height:13px !important}
.hs-lbl{display:none !important}
.hud-pos{padding:3px 6px !important;font-size:0.58rem !important}
.hud-av-ring{width:20px !important;height:20px !important}
/* ── Scenario: 2-column side-by-side layout ── */
.sc-grid{grid-template-columns:1fr !important;height:auto !important}
.sc-grid .sidebar{display:none !important}
.sc-main{
display:grid !important;
grid-template-columns:1fr 1fr !important;
grid-template-rows:1fr auto !important;
gap:8px !important;
padding:8px !important;
height:auto !important;
overflow:visible !important;
flex:none !important;
}
.sc-top{
grid-column:1 !important;
grid-row:1 / 3 !important;
margin-bottom:0 !important;
min-height:0 !important;
padding:8px 10px !important;
justify-content:flex-start !important;
overflow:hidden !important;
}
.choices{
grid-column:2 !important;
grid-row:1 !important;
gap:5px !important;
align-self:start !important;
}
.sc-main > .go-btn{
grid-column:2 !important;
grid-row:2 !important;
margin-top:0 !important;
padding:7px 10px !important;
font-size:0.76rem !important;
width:100%;
}
/* Compact question elements */
.sc-icon-ring{width:28px !important;height:28px !important;font-size:0.85rem !important;margin:0 0 2px !important}
.sc-cat{font-size:0.55rem !important;margin-bottom:1px !important}
.sc-name{font-size:0.9rem !important;line-height:1.2 !important;margin-bottom:2px !important}
.sc-diff{font-size:0.52rem !important;padding:1px 5px !important;margin-bottom:2px !important}
.sc-body{font-size:0.8rem !important;line-height:1.33 !important;padding:5px 7px !important;margin-top:3px !important}
.sc-q-glass{padding:6px 8px !important;margin-top:3px !important}
.sc-tts-btn{display:none !important}
/* Compact choices */
.cho-btn{padding:7px 9px !important;font-size:0.8rem !important;min-height:38px !important;line-height:1.3 !important}
.cho-ltr{width:20px !important;height:20px !important;font-size:0.64rem !important;border-radius:5px !important}
/* Challenge screen fills whole main in landscape — no bottom padding needed */
#main:has(.ch-fullscreen){padding-bottom:0 !important}
/* sc-grid + ch-fullscreen fill #main exactly — locked, no scroll */
.sc-grid:has(.ch-fullscreen){height:100% !important;align-self:stretch !important}
.sc-grid .ch-fullscreen{max-height:none !important;height:100% !important}
/* ── Challenge screen: compact landscape ── */
.ch-fullscreen{
gap:4px !important;
padding:5px 10px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* VS bar: force horizontal row, hide name labels to save space */
.ch-vs-bar{flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:6px !important;padding:4px 10px !important}
.ch-combatant{flex-direction:row !important;align-items:center !important;gap:5px !important}
.ch-name{display:none !important}
.ch-av-ring{width:34px !important;height:34px !important}
.ch-pts{font-size:0.85rem !important;white-space:nowrap !important}
.ch-vs-badge{width:26px !important;height:26px !important;font-size:0.82rem !important;margin:0 3px !important;flex-shrink:0 !important}
/* Timer row */
.challenge-timer-row{padding:3px 10px !important;margin:0 !important}
.challenge-timer{min-width:26px !important;height:26px !important;font-size:0.8rem !important}
/* Question card — hide category meta row to save ~38px */
.ch-question-card{padding:5px 10px !important;margin-bottom:0 !important}
.ch-q-meta{display:none !important}
.ch-q-title{font-size:0.82rem !important;margin-bottom:2px !important}
.ch-q-body{font-size:0.76rem !important;line-height:1.3 !important}
/* Choices */
.ch-choices{gap:3px !important}
.ch-choices .cho-btn{min-height:26px !important;padding:4px 9px !important;font-size:0.75rem !important;line-height:1.25 !important}
.ch-choices .cho-ltr{width:17px !important;height:17px !important;font-size:0.58rem !important;border-radius:4px !important}
/* ── Home screen landscape ── */
.hero-wrap{min-height:0 !important;padding:9px 12px !important;padding-right:115px !important}
.hero-title{font-size:1.35rem !important;margin-bottom:3px !important}
.hero-sub{font-size:0.7rem !important;margin-bottom:5px !important;line-height:1.38 !important}
.hero-mascot{width:98px !important;height:98px !important;right:6px !important;bottom:4px !important}
.hero-chips{gap:4px !important}
.hchip{padding:3px 7px !important;font-size:0.7rem !important;min-width:44px !important}
/* Mode cards: compact horizontal rows */
.mode-row{grid-template-columns:1fr !important;gap:5px !important;grid-auto-rows:auto !important;margin-top:5px !important}
.mcard{min-height:52px !important;max-height:none !important;flex-direction:row !important;padding:8px 12px !important;align-items:center !important}
.mcard-content{flex-direction:row !important;text-align:left !important;padding:0 !important;gap:10px !important;height:auto !important;align-items:center !important;justify-content:flex-start !important}
.mcard-icon{width:36px !important;height:36px !important;margin:0 !important;flex-shrink:0 !important}
.mcard-text-block{align-items:flex-start !important}
.mcard-title{font-size:0.85rem !important;margin:0 0 1px !important}
.mcard-sub{font-size:0.62rem !important;margin:0 !important}
.mcard-progress-copy{font-size:0.5rem !important;margin:2px 0 0 !important;color:rgba(255,255,255,0.72) !important}
.mcard-start-btn{padding:3px 9px !important;font-size:0.68rem !important;margin-top:2px !important}
.mcard.market-day .mcard-content{gap:6px !important}
.mcard.market-day .mcard-icon{width:32px !important;height:32px !important}
/* Info cards: side by side in landscape */
.info-cards-row{grid-template-columns:1fr 1fr !important}
/* ── Challenge lobby compact landscape ── */
.ch-lobby-banner{padding:7px 12px !important}
.ch-lobby-banner .lobby-banner-icon{font-size:1.3rem !important;margin-bottom:1px !important}
.ch-lobby-banner .lobby-banner-title{font-size:0.95rem !important}
.ch-lobby-banner .lobby-banner-sub{font-size:0.62rem !important}
.ch-info-card{display:none !important}
.ch-lobby-cards{grid-template-columns:1fr !important;gap:6px !important}
.ch-action-matchup{gap:8px !important}
.ch-action-avatar{width:54px !important;height:54px !important}
.ch-action-vs{font-size:1.35rem !important;animation:none !important;margin-bottom:0 !important}
.ch-action-card{padding:10px 12px !important;gap:6px !important}
.ch-action-title{font-size:0.88rem !important}
.ch-action-sub{font-size:0.66rem !important}
.ch-action-card .big-play{padding:7px 14px !important;font-size:0.8rem !important}
.ch-action-card .go-btn{padding:5px 12px !important;font-size:0.75rem !important}
/* ── Market Day lobby compact landscape ── */
.md-lobby-banner{padding:7px 12px !important}
.md-lobby-banner .lobby-banner-icon{font-size:1.3rem !important;margin-bottom:1px !important}
.md-lobby-banner .lobby-banner-title{font-size:0.95rem !important}
.md-lobby-banner .lobby-banner-sub{display:none !important}
.md-lobby-banner .lobby-banner-meta{display:none !important}
.md-diff-horiz{gap:6px !important;flex-direction:column !important}
.md-diff-card{flex-direction:row !important;padding:7px 10px !important;gap:8px !important;align-items:center !important}
.md-diff-card-icon{font-size:1.3rem !important;margin-bottom:0 !important;animation:none !important;flex-shrink:0 !important}
.md-diff-card-name{font-size:0.8rem !important;margin-bottom:0 !important}
.md-diff-card-desc{display:none !important}
.md-diff-card-btn{margin-top:0 !important;padding:5px 10px !important;font-size:0.75rem !important;margin-left:auto !important;flex-shrink:0 !important}
.md-lobby-horiz > .go-btn{padding:5px 10px !important;font-size:0.75rem !important;margin-top:2px !important}
}
/* ── FIX 5: Mobile landscape should scroll across scenario/challenge flows ──
Applies to phone-sized landscape only.
Restores vertical scrolling and resets the old short-height no-scroll rules.
───────────────────────────────────────────────────────────────────────── */
@media(orientation:landscape) and (max-width:600px){
#app{height:100dvh !important;overflow:hidden !important}
#main,
#main:has(.sc-grid),
#main:has(.md-lobby-horiz),
#main:has(.ch-lobby-horiz),
#main:has(.md-setup-fullscreen),
#main:has(.play-result),
#main:has(.challenge-round-result),
#main:has(.challenge-winner-card){
overflow:auto !important;
padding-bottom:66px !important;
}
.home-dashboard,
.home-main,
.home-side{
height:auto !important;
min-height:0 !important;
overflow:visible !important;
}
#nav-trial-slot{display:none !important}
.sc-grid,
.sc-grid:has(.ch-fullscreen),
.md-lobby-horiz,
.ch-lobby-horiz,
.md-setup-fullscreen{
height:auto !important;
max-height:none !important;
overflow:visible !important;
}
.sc-main{
display:flex !important;
flex-direction:column !important;
grid-template-columns:none !important;
grid-template-rows:none !important;
height:auto !important;
overflow:visible !important;
gap:8px !important;
}
.sc-top{
grid-column:auto !important;
grid-row:auto !important;
flex:none !important;
overflow:visible !important;
padding:10px 12px !important;
}
.choices{
grid-column:auto !important;
grid-row:auto !important;
align-self:auto !important;
height:auto !important;
gap:6px !important;
}
.sc-main > .go-btn{
grid-column:auto !important;
grid-row:auto !important;
width:100% !important;
}
.play-result,
.challenge-round-result,
.challenge-winner-card,
.sc-grid .ch-fullscreen{
height:auto !important;
max-height:none !important;
overflow:visible !important;
}
.challenge-round-result{padding:14px 12px !important}
.challenge-round-result .result-grid{grid-template-columns:1fr !important}
.challenge-winner-card{padding:20px 16px !important}
}
/* ── FIX 6: Tablet landscape should fit in one viewport, no scroll ────────
Keeps the existing single-column structure/behavior, but trims spacing,
sizing, and container heights so scenario and challenge flows fit.
───────────────────────────────────────────────────────────────────────── */
@media(orientation:landscape) and (min-width:601px) and (max-width:1180px) and (max-height:900px){
#app{height:100dvh !important;overflow:hidden !important;padding:8px 12px 0 !important;gap:8px !important}
#main,
#main:has(.sc-grid),
#main:has(.md-lobby-horiz),
#main:has(.ch-lobby-horiz),
#main:has(.md-setup-fullscreen),
#main:has(.play-result),
#main:has(.challenge-round-result),
#main:has(.challenge-winner-card){
overflow:hidden !important;
padding-bottom:0 !important;
}
.nav-trial-banner{
padding:6px 10px !important;
max-width:210px !important;
}
.nav-trial-banner .tb-label{max-width:110px !important;font-size:0.68rem !important}
.nav-trial-banner .tb-dot{width:6px !important;height:6px !important}
/* Scenario play */
.sc-grid{height:100% !important;overflow:hidden !important}
.sc-main{
height:100% !important;
overflow:hidden !important;
padding:12px !important;
gap:8px !important;
}
.sc-top{
flex:0 0 48% !important;
min-height:0 !important;
max-height:280px !important;
padding:12px 14px !important;
margin-bottom:0 !important;
}
.sc-icon-ring{width:40px !important;height:40px !important;font-size:1.2rem !important;margin:0 auto 4px !important}
.sc-cat{font-size:0.58rem !important;margin-bottom:2px !important}
.sc-name{font-size:1rem !important;line-height:1.18 !important;margin-bottom:4px !important}
.sc-diff{font-size:0.56rem !important;padding:1px 6px !important;margin-bottom:4px !important}
.sc-q-glass{padding:8px 10px !important;margin-top:4px !important}
.sc-body{font-size:0.92rem !important;line-height:1.4 !important}
.choices{
gap:8px !important;
flex:1 1 auto !important;
justify-content:flex-start !important;
}
.cho-btn{padding:10px 12px !important;min-height:48px !important;font-size:0.92rem !important;line-height:1.3 !important}
.cho-ltr{width:20px !important;height:20px !important;font-size:0.62rem !important}
.sc-main > .go-btn{margin-top:0 !important;padding:8px 10px !important;font-size:0.78rem !important}
/* Scenario result */
.play-result{
height:100% !important;
overflow:hidden !important;
padding:12px !important;
}
.play-result .res-icon-wrap{width:52px !important;height:52px !important;margin-bottom:6px !important}
.play-result .res-icon-big{font-size:1.7rem !important}
.play-result .res-title{font-size:0.98rem !important;margin-bottom:4px !important}
.play-result .res-bonus{font-size:0.68rem !important;margin-bottom:8px !important}
.play-result .rw-cards-grid{gap:8px !important;margin-bottom:10px !important}
.play-result .rw-card{padding:9px 8px !important}
.play-result .rw-card-icon{font-size:1.15rem !important}
.play-result .rw-card-label{font-size:0.56rem !important}
.play-result .rw-card-change{font-size:0.8rem !important;padding:2px 8px !important}
.lesson-card{margin-bottom:8px !important}
.lesson-card-header{padding:9px 12px !important}
.lesson-card-body{padding:10px 12px !important}
.lc-verdict-ico{font-size:1.2rem !important}
.lc-verdict-text{font-size:0.84rem !important}
.lc-badge,.lc-your-choice-label,.lc-best-label{font-size:0.56rem !important}
.lc-lesson,.lc-best-choice,.lc-best-why{font-size:0.76rem !important;line-height:1.34 !important}
.play-result .res-continue-btn{margin-top:0 !important;padding:9px 12px !important;font-size:0.8rem !important}
/* Challenge lobby */
.ch-lobby-horiz{
height:100% !important;
overflow:hidden !important;
gap:8px !important;
max-width:920px !important;
margin:0 auto !important;
}
.ch-lobby-banner{padding:14px 18px !important;gap:12px !important}
.ch-lobby-banner .lobby-banner-icon{font-size:1.5rem !important}
.ch-lobby-banner .lobby-banner-title{font-size:1rem !important}
.ch-lobby-banner .lobby-banner-sub{font-size:0.68rem !important;line-height:1.35 !important}
.ch-lobby-cards{
grid-template-columns:minmax(0,1.1fr) minmax(260px,0.9fr) !important;
gap:8px !important;
min-height:0 !important;
height:100% !important;
overflow:hidden !important;
}
.ch-info-card,.ch-action-card{padding:12px 14px !important;min-height:0 !important}
.speed-mode-banner{padding:10px 12px !important;margin-bottom:8px !important}
.smb-icon{font-size:1.7rem !important}
.smb-title{font-size:0.82rem !important}
.smb-sub{font-size:0.72rem !important;line-height:1.35 !important}
.ch-action-matchup{gap:10px !important}
.ch-action-avatar{width:64px !important;height:64px !important}
.ch-action-vs{font-size:1.7rem !important;margin-bottom:0 !important}
.ch-action-title{font-size:0.96rem !important}
.ch-action-sub{font-size:0.72rem !important}
.ch-action-card .big-play{padding:10px 12px !important;font-size:0.88rem !important}
.ch-action-card .go-btn{padding:8px 12px !important;font-size:0.78rem !important}
/* Challenge play */
.sc-grid:has(.ch-fullscreen){height:100% !important;max-width:920px !important;margin:0 auto !important}
.sc-grid .ch-fullscreen{
height:100% !important;
max-height:none !important;
overflow:hidden !important;
padding:10px 12px !important;
gap:6px !important;
}
.ch-topbar{flex-wrap:nowrap !important;justify-content:space-between !important;gap:8px !important}
.ch-back-btn{padding:4px 10px !important;font-size:0.72rem !important}
.ch-round-info{font-size:0.72rem !important}
.ch-round-info strong{font-size:0.84rem !important}
.ch-dots{max-width:220px !important}
.ch-vs-bar{padding:8px 12px !important}
.ch-av-ring{width:46px !important;height:46px !important}
.ch-name{font-size:0.68rem !important;max-width:76px !important}
.ch-pts{font-size:1rem !important}
.ch-vs-badge{width:34px !important;height:34px !important;font-size:1rem !important;margin:0 8px !important}
.challenge-timer-row{margin:0 !important;padding:5px 10px !important}
.challenge-timer-label{font-size:0.66rem !important}
.challenge-timer{min-width:32px !important;height:32px !important;font-size:0.92rem !important}
.ch-question-card{padding:10px 12px !important}
.ch-q-meta{margin-bottom:6px !important}
.ch-q-ico{font-size:1.1rem !important}
.ch-q-cat{font-size:0.66rem !important}
.ch-q-title{font-size:0.92rem !important;margin-bottom:4px !important}
.ch-q-body{font-size:0.9rem !important;line-height:1.38 !important}
.ch-choices{gap:5px !important}
.ch-choices .cho-btn{padding:8px 10px !important;min-height:38px !important;font-size:0.88rem !important;line-height:1.28 !important}
.ch-choices .cho-ltr{width:18px !important;height:18px !important;font-size:0.58rem !important}
.ch-bottom-home-btn{margin-top:0 !important;padding:8px 10px !important;font-size:0.76rem !important}
/* Challenge round result */
.challenge-round-result{
height:100% !important;
max-height:none !important;
overflow:hidden !important;
padding:12px !important;
}
.challenge-round-result .result-header{font-size:0.96rem !important;margin-bottom:6px !important}
.challenge-round-result .result-grid{gap:8px !important;margin-bottom:10px !important}
.challenge-round-result .result-card{padding:10px !important}
.challenge-round-result .result-avatar{width:34px !important;height:34px !important;margin-bottom:5px !important}
.challenge-round-result .result-label{font-size:0.72rem !important;margin-bottom:5px !important}
.challenge-round-result .result-choice-text{font-size:0.82rem !important;margin-bottom:8px !important;line-height:1.3 !important}
.challenge-round-result .result-status{font-size:0.76rem !important;padding:6px !important}
.challenge-round-result .result-score-summary{gap:10px !important;padding:10px !important;margin-bottom:10px !important}
.challenge-round-result .result-score-you,
.challenge-round-result .result-score-miniboss{font-size:1.35rem !important}
.challenge-round-result .result-score-vs{font-size:0.72rem !important}
.challenge-finish-score-avatar--round{width:44px !important;height:44px !important}
.challenge-round-badge{font-size:0.6rem !important;padding:4px 7px !important}
.challenge-round-result .lesson-card{margin-bottom:6px !important}
.challenge-round-result .lesson-card-header{padding:8px 10px !important}
.challenge-round-result .lesson-card-body{padding:9px 10px !important}
.challenge-round-result .lc-lesson{font-size:0.8rem !important;line-height:1.4 !important}
.challenge-round-result .lc-best-choice{font-size:0.76rem !important}
.challenge-round-result .lc-best-why{font-size:0.72rem !important}
.challenge-round-next-btn{margin-top:0 !important;padding:9px 12px !important;font-size:0.82rem !important}
/* Challenge winner */
.challenge-winner-card{
height:100% !important;
overflow:hidden !important;
padding:16px 18px !important;
}
.challenge-winner-emoji{font-size:2.6rem !important;margin-bottom:8px !important}
.challenge-winner-title{font-size:1.04rem !important;margin-bottom:6px !important}
.challenge-winner-msg{font-size:0.9rem !important;margin-bottom:10px !important}
.challenge-winner-score{padding:10px !important;margin-bottom:10px !important}
.challenge-winner-score-line{font-size:1.08rem !important}
.challenge-winner-score-sub{font-size:0.74rem !important}
.challenge-winner-reward{padding:10px !important;margin-bottom:10px !important;font-size:0.84rem !important}
.challenge-winner-reward-amt{font-size:0.98rem !important}
.challenge-winner-card .big-play,
.challenge-winner-card .go-btn{padding:9px 12px !important;font-size:0.82rem !important}
}
@media(orientation:landscape) and (min-width:601px) and (max-width:1180px) and (max-height:720px){
.sc-top{padding:10px 12px !important;flex-basis:44% !important;max-height:236px !important}
.sc-name{font-size:0.92rem !important}
.sc-body{font-size:0.84rem !important;line-height:1.34 !important}
.choices{gap:6px !important}
.cho-btn{padding:8px 10px !important;min-height:40px !important;font-size:0.86rem !important}
.play-result .rw-cards-grid{gap:6px !important}
.play-result .rw-card{padding:8px 7px !important}
.ch-lobby-banner{padding:10px 14px !important}
.ch-info-card,.ch-action-card{padding:10px 12px !important}
.ch-vs-bar{padding:6px 10px !important}
.ch-question-card{padding:8px 10px !important}
.ch-q-title{font-size:0.86rem !important}
.ch-q-body{font-size:0.82rem !important;line-height:1.32 !important}
.ch-choices .cho-btn{padding:7px 9px !important;min-height:32px !important;font-size:0.82rem !important}
.ch-bottom-home-btn{padding:7px 9px !important;font-size:0.72rem !important}
.challenge-round-result .result-card{padding:8px !important}
.challenge-winner-card{padding:14px 16px !important}
}
/* ── READING-FIRST PLAY LAYOUT ──
Final pass to keep questions and choices at a calmer eye level. */
.sc-grid{
grid-template-columns:minmax(0,1fr) 244px !important;
gap:18px !important;
align-items:start !important;
}
.sc-main{
padding:22px 24px !important;
}
.sc-top{
flex:none !important;
justify-content:flex-start !important;
min-height:0 !important;
padding:22px 24px 18px !important;
margin-bottom:14px !important;
}
.sc-icon-ring{
width:88px !important;
height:88px !important;
font-size:2.7rem !important;
margin:0 auto 8px !important;
}
.sc-q-glass{
max-width:720px !important;
margin:12px auto 0 !important;
padding:18px 22px !important;
}
.sc-q-glass .sc-name,
.sc-q-glass .sc-body{
text-align:left !important;
}
.sc-q-glass .sc-name{
font-size:1.28rem !important;
line-height:1.28 !important;
margin-bottom:8px !important;
}
.sc-q-glass .sc-body{
font-size:1rem !important;
line-height:1.62 !important;
}
.choices{
max-width:760px;
width:100%;
margin:0 auto;
gap:11px !important;
}
.cho-btn{
align-items:flex-start !important;
padding:15px 16px !important;
min-height:68px !important;
font-size:1rem !important;
line-height:1.45 !important;
}
.cho-ltr{
width:30px !important;
height:30px !important;
font-size:0.82rem !important;
margin-top:1px;
}
.sc-main > .go-btn{
max-width:760px;
margin:12px auto 0 !important;
}
.sc-grid:has(.ch-fullscreen){
grid-template-columns:minmax(0,1fr) 244px !important;
gap:18px !important;
align-items:start !important;
}
.sc-grid .ch-fullscreen{
padding:18px 20px !important;
gap:12px !important;
}
.ch-vs-bar,
.challenge-timer-row,
.ch-question-card,
.ch-choices,
.ch-bottom-home-btn{
max-width:760px;
width:100%;
margin-left:auto;
margin-right:auto;
}
.ch-vs-bar{
padding:12px 18px !important;
}
.challenge-timer-row{
margin:0 auto !important;
}
.ch-question-card{
padding:20px 24px !important;
}
.ch-q-meta{
margin-bottom:10px !important;
}
.ch-q-title,
.ch-q-body,
.ch-q-glass .ch-q-title,
.ch-q-glass .ch-q-body{
text-align:left !important;
}
.ch-q-title,
.ch-q-glass .ch-q-title{
font-size:1.22rem !important;
line-height:1.3 !important;
margin-bottom:8px !important;
}
.ch-q-body,
.ch-q-glass .ch-q-body{
font-size:1rem !important;
line-height:1.58 !important;
}
.ch-choices{
gap:10px !important;
}
.ch-choices .cho-btn{
min-height:64px !important;
padding:14px 16px !important;
font-size:0.98rem !important;
line-height:1.42 !important;
}
.ch-bottom-home-btn{
margin-top:4px !important;
}
@media(max-width:960px){
.sc-grid,
.sc-grid:has(.ch-fullscreen){
grid-template-columns:minmax(0,1fr) !important;
gap:14px !important;
}
.sc-grid .sidebar{
display:none !important;
}
.sc-main{
padding:18px 16px !important;
}
.sc-top{
padding:18px 16px 14px !important;
}
.sc-q-glass,
.ch-question-card{
max-width:none !important;
padding:16px 16px !important;
}
.sc-q-glass .sc-name,
.ch-q-title,
.ch-q-glass .ch-q-title{
font-size:1.08rem !important;
}
.sc-q-glass .sc-body,
.ch-q-body,
.ch-q-glass .ch-q-body{
font-size:0.94rem !important;
line-height:1.55 !important;
}
.choices,
.ch-vs-bar,
.challenge-timer-row,
.ch-choices,
.ch-bottom-home-btn{
max-width:none;
}
.cho-btn,
.ch-choices .cho-btn{
min-height:58px !important;
padding:13px 14px !important;
font-size:0.94rem !important;
}
}
/* ── SOLO PLAY LAYOUT ──
Story and Boss Challenge no longer show the right-hand sidebar. */
#main:has(.sc-grid--solo){
overflow:hidden !important;
padding-bottom:0 !important;
}
.sc-grid.sc-grid--solo{
grid-template-columns:minmax(0,1fr) !important;
max-width:860px;
margin:0 auto;
gap:0 !important;
height:100% !important;
overflow:hidden !important;
}
.sc-grid.sc-grid--solo .sidebar{
display:none !important;
}
.sc-grid.sc-grid--solo .sc-main{
height:100%;
padding:12px 12px 10px !important;
overflow:hidden !important;
display:flex;
flex-direction:column;
justify-content:stretch;
}
.sc-grid.sc-grid--solo .sc-top{
flex:0 0 auto !important;
padding:13px 14px 12px !important;
margin-bottom:10px !important;
}
.sc-grid.sc-grid--solo .sc-icon-ring{
width:66px !important;
height:66px !important;
font-size:1.95rem !important;
margin-bottom:5px !important;
}
.sc-grid.sc-grid--solo .sc-cat{
font-size:0.62rem !important;
margin-bottom:3px !important;
}
.sc-grid.sc-grid--solo .sc-diff{
margin-bottom:5px !important;
font-size:0.64rem !important;
padding:3px 9px !important;
}
.sc-grid.sc-grid--solo .sc-q-glass{
max-width:100% !important;
margin-top:6px !important;
padding:14px 16px !important;
}
.sc-grid.sc-grid--solo .sc-q-glass .sc-name{
font-size:1.26rem !important;
line-height:1.22 !important;
margin-bottom:10px !important;
padding-left:0 !important;
text-align:left !important;
}
.sc-grid.sc-grid--solo .sc-q-glass .sc-body{
font-size:1.18rem !important;
line-height:1.46 !important;
text-align:left !important;
}
.sc-grid.sc-grid--solo .sc-mode-note,
.sc-grid.sc-grid--solo .sc-fill-card,
.sc-grid.sc-grid--solo .sc-sequence-card,
.sc-grid.sc-grid--solo .sc-quote-card{
padding:15px 16px !important;
margin:6px 0 12px !important;
}
.sc-grid.sc-grid--solo .sc-mode-note{
font-size:1rem !important;
line-height:1.36 !important;
}
.sc-grid.sc-grid--solo .sc-fill-label,
.sc-grid.sc-grid--solo .sc-sequence-label,
.sc-grid.sc-grid--solo .sc-quote-label{
font-size:0.76rem !important;
min-height:28px !important;
padding:4px 10px !important;
margin-bottom:8px !important;
}
.sc-grid.sc-grid--solo .sc-fill-sentence{
font-size:1.18rem !important;
line-height:1.46 !important;
}
.sc-grid.sc-grid--solo .sc-fill-help,
.sc-grid.sc-grid--solo .sc-sequence-help,
.sc-grid.sc-grid--solo .sc-quote-copy{
font-size:0.96rem !important;
line-height:1.36 !important;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices{
flex:1 1 auto;
display:grid !important;
grid-template-rows:repeat(3,minmax(0,1fr));
max-width:100% !important;
gap:9px !important;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .cho-btn{
height:100%;
padding:14px 16px !important;
min-height:0 !important;
font-size:1.1rem !important;
line-height:1.38 !important;
align-items:center !important;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .cho-copy{
font-size:1.12rem !important;
line-height:1.38 !important;
font-weight:800 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-card{
padding:11px 12px !important;
margin-bottom:8px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-label{
font-size:0.74rem !important;
margin-bottom:5px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-help{
font-size:0.96rem !important;
margin-top:4px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-stack{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
margin-top:8px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-picked{
padding:9px 10px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-picked-copy{
font-size:0.9rem !important;
line-height:1.26 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-actions{
margin-top:8px !important;
gap:8px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-reset,
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-submit{
padding:9px 12px !important;
font-size:0.84rem !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .choices--sequence{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:none !important;
gap:8px !important;
flex:none !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick{
height:auto !important;
min-height:64px !important;
align-items:flex-start !important;
padding:12px 14px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick .cho-copy{
font-size:1rem !important;
line-height:1.28 !important;
}
.sc-grid.sc-grid--solo .cho-ltr{
width:34px !important;
height:34px !important;
font-size:1rem !important;
font-weight:900 !important;
border-radius:10px !important;
}
.sc-grid.sc-grid--solo .sc-main > .go-btn{
margin-top:8px !important;
max-width:100% !important;
padding:11px 14px !important;
font-size:0.92rem !important;
}
.play-result.play-result--story{
padding:14px 14px 12px !important;
}
.play-result.play-result--story .res-icon-wrap{
width:72px !important;
height:72px !important;
margin-bottom:10px !important;
}
.play-result.play-result--story .res-icon-big{
font-size:2.2rem !important;
}
.play-result.play-result--story .res-title{
font-size:1.5rem !important;
margin-bottom:6px !important;
}
.play-result.play-result--story .res-bonus{
font-size:0.9rem !important;
padding:6px 14px !important;
margin-bottom:12px !important;
}
.play-result.play-result--story .lesson-card{
margin-bottom:10px !important;
}
.play-result.play-result--story .lesson-card-header{
padding:13px 15px !important;
}
.play-result.play-result--story .lc-verdict-ico{
width:42px !important;
height:42px !important;
font-size:1.35rem !important;
}
.play-result.play-result--story .lc-verdict-text{
font-size:1.08rem !important;
}
.play-result.play-result--story .lc-badge{
font-size:0.64rem !important;
padding:4px 9px !important;
}
.play-result.play-result--story .lesson-card-body{
padding:13px 14px !important;
}
.play-result.play-result--story .lc-section{
padding:11px 12px !important;
}
.play-result.play-result--story .lc-section-label{
font-size:0.62rem !important;
margin-bottom:6px !important;
}
.play-result.play-result--story .lc-section-copy{
font-size:0.94rem !important;
line-height:1.36 !important;
}
.play-result.play-result--story .rw-cards-grid{
gap:10px !important;
margin-bottom:12px !important;
}
.play-result.play-result--story .rw-card{
padding:14px 10px !important;
}
.play-result.play-result--story .rw-card-icon{
font-size:1.55rem !important;
}
.play-result.play-result--story .rw-card-label{
font-size:0.64rem !important;
}
.play-result.play-result--story .rw-card-change{
font-size:1rem !important;
}
.play-result.play-result--story .res-continue-btn{
padding:12px 16px !important;
font-size:1rem !important;
}
.sc-grid.sc-grid--challenge{
max-width:860px;
}
.sc-grid.sc-grid--challenge .ch-fullscreen{
height:100% !important;
max-height:none !important;
overflow:hidden !important;
padding:12px 14px !important;
gap:10px !important;
display:grid !important;
grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
}
.sc-grid.sc-grid--challenge .ch-topbar{
gap:8px !important;
margin-bottom:0 !important;
}
.sc-grid.sc-grid--challenge .ch-back-btn{
padding:6px 10px !important;
font-size:0.78rem !important;
}
.sc-grid.sc-grid--challenge .ch-round-info{
font-size:0.78rem !important;
}
.sc-grid.sc-grid--challenge .ch-dots{
gap:3px !important;
}
.sc-grid.sc-grid--challenge .ch-vs-bar{
max-width:100% !important;
padding:12px 14px !important;
}
.sc-grid.sc-grid--challenge .ch-av-ring{
width:52px !important;
height:52px !important;
}
.sc-grid.sc-grid--challenge .ch-name{
font-size:0.76rem !important;
}
.sc-grid.sc-grid--challenge .ch-pts{
font-size:1.15rem !important;
}
.sc-grid.sc-grid--challenge .ch-vs-badge{
width:38px !important;
height:38px !important;
font-size:1rem !important;
margin:0 8px !important;
}
.sc-grid.sc-grid--challenge .challenge-timer-row{
max-width:100% !important;
padding:8px 12px !important;
}
.sc-grid.sc-grid--challenge .challenge-timer{
min-width:38px !important;
height:38px !important;
font-size:1.1rem !important;
}
.sc-grid.sc-grid--challenge .ch-question-card{
max-width:100% !important;
padding:18px 20px !important;
}
.sc-grid.sc-grid--challenge .ch-q-meta{
margin-bottom:8px !important;
}
.sc-grid.sc-grid--challenge .ch-q-ico{
font-size:1.22rem !important;
}
.sc-grid.sc-grid--challenge .ch-q-cat{
font-size:0.7rem !important;
}
.sc-grid.sc-grid--challenge .ch-q-title,
.sc-grid.sc-grid--challenge .ch-q-glass .ch-q-title{
font-size:1.44rem !important;
line-height:1.3 !important;
margin-bottom:14px !important;
padding-left:0 !important;
text-align:left !important;
}
.sc-grid.sc-grid--challenge .ch-q-body,
.sc-grid.sc-grid--challenge .ch-q-glass .ch-q-body{
font-size:1.22rem !important;
line-height:1.52 !important;
text-align:left !important;
}
.sc-grid.sc-grid--challenge .ch-choices{
flex:1 1 auto;
display:grid !important;
grid-template-rows:repeat(3,minmax(0,1fr));
max-width:100% !important;
gap:10px !important;
}
.sc-grid.sc-grid--challenge .ch-choices .cho-btn{
height:100%;
min-height:0 !important;
padding:15px 16px !important;
font-size:1.14rem !important;
line-height:1.4 !important;
align-items:center !important;
}
.sc-grid.sc-grid--challenge .ch-choices .cho-copy{
font-size:1.14rem !important;
line-height:1.4 !important;
font-weight:800 !important;
}
.sc-grid.sc-grid--challenge .ch-bottom-home-btn{
max-width:100% !important;
margin-top:0 !important;
padding:11px 14px !important;
font-size:0.92rem !important;
}
.sc-grid.sc-grid--challenge .ch-choices .cho-ltr{
width:30px !important;
height:30px !important;
font-size:0.9rem !important;
font-weight:900 !important;
border-radius:9px !important;
}
.sc-grid.sc-grid--challenge .challenge-timer-label{
font-size:0.74rem !important;
}
.challenge-round-result{
padding:20px 18px !important;
}
.challenge-round-result .result-header{
font-size:1.16rem !important;
margin-bottom:10px !important;
}
.challenge-round-result .result-grid{
gap:12px !important;
margin-bottom:14px !important;
}
.challenge-round-result .result-card{
padding:14px !important;
}
.challenge-round-result .result-avatar{
width:44px !important;
height:44px !important;
margin-bottom:8px !important;
}
.challenge-round-result .result-label{
font-size:0.82rem !important;
}
.challenge-round-result .result-choice-text{
font-size:0.96rem !important;
line-height:1.34 !important;
}
.challenge-round-result .result-status{
font-size:0.84rem !important;
}
.challenge-round-result .result-score-summary{
padding:14px !important;
margin-bottom:14px !important;
}
.challenge-round-result .result-score-you,
.challenge-round-result .result-score-miniboss{
font-size:1.55rem !important;
}
.challenge-round-result .result-score-vs{
font-size:0.84rem !important;
}
.challenge-round-result .lesson-card{
margin-bottom:10px !important;
}
.challenge-round-result .lesson-card-header{
padding:12px 14px !important;
}
.challenge-round-result .lesson-card-body{
padding:12px 13px !important;
}
.challenge-round-result .lc-verdict-text{
font-size:1rem !important;
}
.challenge-round-result .lc-section{
padding:10px 11px !important;
}
.challenge-round-result .lc-section-label{
font-size:0.62rem !important;
}
.challenge-round-result .lc-section-copy{
font-size:0.9rem !important;
line-height:1.34 !important;
}
@media(max-width:960px){
#main:has(.sc-grid--solo){
overflow:auto !important;
padding-bottom:68px !important;
}
.sc-grid.sc-grid--solo{
height:auto !important;
overflow:visible !important;
}
.sc-grid.sc-grid--solo .sc-main,
.sc-grid.sc-grid--challenge .ch-fullscreen{
height:auto !important;
overflow:visible !important;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices,
.sc-grid.sc-grid--challenge .ch-choices{
display:flex !important;
flex-direction:column !important;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .cho-btn,
.sc-grid.sc-grid--challenge .ch-choices .cho-btn{
min-height:58px !important;
height:auto !important;
align-items:flex-start !important;
font-size:0.92rem !important;
}
.sc-grid.sc-grid--solo .sc-q-glass .sc-name,
.sc-grid.sc-grid--challenge .ch-q-title,
.sc-grid.sc-grid--challenge .ch-q-glass .ch-q-title{
font-size:1.1rem !important;
}
.sc-grid.sc-grid--solo .sc-q-glass .sc-body,
.sc-grid.sc-grid--challenge .ch-q-body,
.sc-grid.sc-grid--challenge .ch-q-glass .ch-q-body{
font-size:1.04rem !important;
}
}
/* ═══════════════════════════════════════
TARGETED PLAY FIXES
Only Step By Step + Match It Up + remove in-screen home/back controls.
═══════════════════════════════════════ */
.ch-back-btn,
.ch-bottom-home-btn{
display:none !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match{
display:grid !important;
grid-template-rows:auto auto minmax(0,1fr) auto;
gap:6px !important;
overflow:hidden !important;
padding:10px 11px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence{
grid-template-rows:minmax(156px,auto) minmax(0,1fr) auto !important;
gap:8px !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match{
grid-template-rows:auto minmax(0,1fr) auto !important;
gap:6px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-top,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top{
flex:0 0 auto !important;
min-height:0 !important;
justify-content:flex-start !important;
padding:8px 10px !important;
margin-bottom:0 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-top{
display:block !important;
padding:8px 10px !important;
min-height:156px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-icon-ring,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top .sc-icon-ring{
width:60px !important;
height:60px !important;
font-size:1.8rem !important;
margin:0 auto 4px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-q-glass,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top .sc-q-glass{
margin-top:4px !important;
padding:10px 12px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-q-glass{
width:100% !important;
max-width:none !important;
min-height:0 !important;
height:auto !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:center !important;
min-height:104px !important;
padding:14px 16px !important;
text-align:center !important;
background:
radial-gradient(circle at top center,rgba(255,255,255,0.7),transparent 45%),
linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
box-shadow:0 10px 22px rgba(59,130,246,0.08);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-name,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top .sc-name{
font-size:.94rem !important;
line-height:1.18 !important;
margin-bottom:4px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-body,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top .sc-body{
font-size:.8rem !important;
line-height:1.28 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-name{
font-size:1.04rem !important;
line-height:1.2 !important;
text-align:center !important;
width:100% !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-body{
font-size:.96rem !important;
line-height:1.34 !important;
text-align:center !important;
width:100% !important;
max-width:92% !important;
margin:0 auto !important;
color:#334155 !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top .sc-body{
font-size:.92rem !important;
line-height:1.34 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-playfield{
min-height:0;
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:10px !important;
align-items:stretch;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-column{
min-width:0;
min-height:0;
display:flex;
flex-direction:column;
border-radius:20px;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-column--choices{
gap:6px;
align-items:stretch;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-card{
margin:0 !important;
padding:8px 10px 6px !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
align-content:stretch !important;
background:
radial-gradient(circle at top right,rgba(125,211,252,0.22),transparent 32%),
linear-gradient(180deg,#F6FBFF 0%,#FFFFFF 100%) !important;
box-shadow:0 12px 24px rgba(59,130,246,0.1);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-help{
font-size:.74rem !important;
margin-top:2px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:5px !important;
margin-top:5px !important;
grid-template-rows:repeat(3,minmax(0,1fr));
flex:1 1 auto;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot{
border:1.5px dashed #BFDBFE;
background:linear-gradient(180deg,#F8FBFF 0%,#FFFFFF 100%);
border-radius:14px;
padding:7px 9px;
min-height:44px;
display:grid;
grid-template-rows:auto minmax(0,1fr);
align-content:center;
box-shadow:0 6px 14px rgba(148,163,184,0.08);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot:nth-child(1){
border-color:#60A5FA;
background:linear-gradient(180deg,#DBEAFE 0%,#FFFFFF 100%);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot:nth-child(1) .sc-sequence-slot-badge{
background:linear-gradient(135deg,#60A5FA,#2563EB);
color:#fff;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot:nth-child(1) .sc-sequence-slot-label{
color:#1D4ED8;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot:nth-child(2){
border-color:#34D399;
background:linear-gradient(180deg,#D1FAE5 0%,#FFFFFF 100%);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot:nth-child(2) .sc-sequence-slot-badge{
background:linear-gradient(135deg,#34D399,#10B981);
color:#fff;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot:nth-child(2) .sc-sequence-slot-label{
color:#059669;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot:nth-child(3){
border-color:#F59E0B;
background:linear-gradient(180deg,#FED7AA 0%,#FFFFFF 100%);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot:nth-child(3) .sc-sequence-slot-badge{
background:linear-gradient(135deg,#F59E0B,#EA580C);
color:#fff;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot:nth-child(3) .sc-sequence-slot-label{
color:#C2410C;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot.is-filled{
border-style:solid;
border-color:#93C5FD;
background:linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%);
box-shadow:0 12px 22px rgba(37,99,235,0.14);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-top{
display:flex;
align-items:center;
gap:6px;
margin-bottom:3px;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-badge{
width:17px;
height:17px;
border-radius:999px;
display:grid;
place-items:center;
background:#DBEAFE;
color:#1D4ED8;
font-size:.54rem;
font-weight:900;
flex-shrink:0;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-label{
font-size:.62rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
color:#2563EB;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-body{
min-width:0;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-picked-copy{
font-size:.72rem !important;
line-height:1.14 !important;
font-weight:800;
color:#0F172A;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-placeholder{
font-size:.7rem;
line-height:1.14;
font-weight:700;
color:#64748B;
}
.sc-grid.sc-grid--solo .sc-main--sequence > .choices--sequence{
min-height:0;
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
grid-template-rows:repeat(3,minmax(0,1fr)) !important;
grid-auto-rows:minmax(0,1fr) !important;
gap:10px !important;
align-content:stretch !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-column--choices > .choices--sequence{
flex:1 1 auto;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick{
min-height:0 !important;
height:100% !important;
min-height:56px !important;
padding:12px 14px !important;
align-items:center !important;
border-radius:18px !important;
border-width:2px !important;
box-shadow:0 10px 20px rgba(59,130,246,0.08);
transition:transform .14s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick:nth-child(1){
background:linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%) !important;
border-color:#93C5FD !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick:nth-child(2){
background:linear-gradient(180deg,#ECFDF5 0%,#FFFFFF 100%) !important;
border-color:#6EE7B7 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick:nth-child(3){
background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 100%) !important;
border-color:#FDBA74 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick:hover{
transform:translateY(-1px);
box-shadow:0 14px 24px rgba(59,130,246,0.12);
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick .cho-copy{
font-size:.94rem !important;
line-height:1.24 !important;
font-weight:800 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-actions{
margin-top:3px !important;
width:100% !important;
display:flex !important;
justify-content:flex-end !important;
align-items:flex-end !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-column--choices .sc-sequence-actions{
margin-top:auto !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-reset,
.sc-grid.sc-grid--solo .sc-main--sequence > .go-btn{
margin-top:0 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-reset{
background:linear-gradient(135deg,#F59E0B,#F97316) !important;
color:#FFF7ED !important;
box-shadow:0 10px 18px rgba(249,115,22,0.18);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-reset:hover{
background:linear-gradient(135deg,#FB923C,#EA580C) !important;
transform:translateY(-1px);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-sequence-card.sc-main--match{
min-height:0;
overflow:hidden;
display:grid;
grid-template-rows:auto auto minmax(0,1fr) auto;
gap:6px;
margin:0 !important;
padding:8px 9px !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-sequence-help{
font-size:.7rem !important;
margin-top:3px !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-playfield{
min-height:0;
gap:8px;
margin-top:0;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-column{
min-height:0;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-column--answers{
display:flex;
flex-direction:column;
align-items:stretch;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-stack,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .choices--match{
gap:6px !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-target{
padding:8px 9px !important;
gap:8px;
border-width:2px !important;
box-shadow:0 10px 20px rgba(148,163,184,0.1);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-stack .sc-match-target:nth-child(1){
border-color:#60A5FA !important;
background:linear-gradient(180deg,#DBEAFE 0%,#FFFFFF 100%) !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-stack .sc-match-target:nth-child(1) .sc-match-problem-num{
background:linear-gradient(135deg,#60A5FA,#2563EB);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-stack .sc-match-target:nth-child(2){
border-color:#34D399 !important;
background:linear-gradient(180deg,#D1FAE5 0%,#FFFFFF 100%) !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-stack .sc-match-target:nth-child(2) .sc-match-problem-num{
background:linear-gradient(135deg,#34D399,#10B981);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-stack .sc-match-target:nth-child(3){
border-color:#F6B96B !important;
background:linear-gradient(180deg,#FFF1E3 0%,#FFFFFF 100%) !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-stack .sc-match-target:nth-child(3) .sc-match-problem-num{
background:linear-gradient(135deg,#F7BE78,#EE8F4A);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-problem-text{
font-size:.74rem;
line-height:1.18;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-slot{
min-height:32px;
margin-top:5px;
padding:6px 8px;
overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.85);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-slot-placeholder,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-slot-card{
font-size:.66rem;
line-height:1.16;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-slot-card{
min-height:20px;
padding:3px 8px;
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option{
min-height:44px !important;
padding:8px 9px !important;
border-width:2px !important;
border-color:#EEE3BF !important;
background:linear-gradient(180deg,#FFFEFA 0%,#FFFFFF 100%) !important;
box-shadow:0 10px 18px rgba(180,138,63,0.08);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-card-emoji{
width:28px;
height:28px;
font-size:1.1rem;
background:linear-gradient(135deg,#FFF2C7,#EFCB7A);
color:#9A6B1F;
box-shadow:0 5px 12px rgba(180,138,63,0.14);
border:1.5px solid #E7D19A;
transform:scale(1.02);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option .cho-copy{
font-size:.72rem !important;
line-height:1.16 !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-sequence-actions{
margin-top:10px !important;
padding-top:2px !important;
flex:0 0 auto !important;
flex-direction:column !important;
align-items:flex-end !important;
justify-content:flex-start !important;
gap:6px !important;
position:relative;
z-index:1;
width:100% !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-column--answers .sc-sequence-actions{
margin-top:auto !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-playfield{
margin-bottom:8px !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .go-btn{
margin-top:0 !important;
min-height:44px !important;
align-self:stretch !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-sequence-reset{
background:linear-gradient(135deg,#F59E0B,#F97316) !important;
color:#FFF7ED !important;
box-shadow:0 10px 18px rgba(249,115,22,0.18);
margin-top:4px !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-progress{
align-self:flex-end !important;
text-align:right;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-sequence-reset:hover{
background:linear-gradient(135deg,#FB923C,#EA580C) !important;
transform:translateY(-1px);
}
@media (max-width:700px){
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-playfield{
grid-template-columns:1fr;
gap:6px;
}
}
@media (max-height:820px){
.sc-grid.sc-grid--solo .sc-main--sequence,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match{
padding:8px 9px !important;
gap:5px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence{
gap:5px !important;
grid-template-rows:minmax(144px,auto) minmax(0,1fr) auto !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match{
gap:5px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-top,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top{
padding:7px 9px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-top{
min-height:144px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-icon-ring,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top .sc-icon-ring{
width:52px !important;
height:52px !important;
font-size:1.6rem !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-q-glass,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top .sc-q-glass{
padding:8px 10px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-q-glass{
min-height:92px !important;
padding:12px 14px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-name,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top .sc-name{
font-size:.88rem !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-body,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top .sc-body{
font-size:.74rem !important;
line-height:1.22 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-name{
font-size:.92rem !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-body{
font-size:.86rem !important;
line-height:1.28 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-playfield{
gap:8px !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-top .sc-body{
font-size:.84rem !important;
line-height:1.28 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option{
min-height:40px !important;
padding:7px 8px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick{
height:100% !important;
min-height:0 !important;
min-height:48px !important;
padding:10px 12px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick .cho-copy{
font-size:.84rem !important;
line-height:1.18 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-help{
font-size:.7rem !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot{
min-height:40px !important;
padding:6px 8px !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-label{
font-size:.58rem !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-picked-copy,
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-placeholder{
font-size:.66rem !important;
line-height:1.1 !important;
}
}
@media (max-width:700px){
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-playfield{
grid-template-columns:1fr !important;
gap:8px !important;
}
}
/* Match result page: compact fit-to-view without scroll */
.play-result.play-result--match{
min-height:min(calc(100dvh - 150px),540px) !important;
max-width:740px !important;
padding:10px 12px !important;
overflow:hidden !important;
}
.play-result.play-result--match .res-center{
width:100%;
max-width:660px;
min-height:100%;
display:flex;
flex-direction:column;
justify-content:flex-start;
gap:8px;
}
.play-result.play-result--match .res-icon-wrap{
width:62px !important;
height:62px !important;
margin-bottom:4px !important;
}
.play-result.play-result--match .res-icon-big{
font-size:2.05rem !important;
}
.play-result.play-result--match .res-title{
font-size:1.2rem !important;
margin-bottom:2px !important;
}
.play-result.play-result--match .res-bonus{
font-size:.72rem !important;
padding:4px 10px !important;
margin-bottom:4px !important;
}
.play-result.play-result--match .lesson-card{
margin-bottom:4px !important;
flex:1 1 auto;
}
.play-result.play-result--match .lesson-card-header{
padding:9px 11px !important;
gap:8px !important;
}
.play-result.play-result--match .lc-verdict-ico{
width:32px !important;
height:32px !important;
font-size:1rem !important;
}
.play-result.play-result--match .lc-verdict-text{
font-size:.98rem !important;
}
.play-result.play-result--match .lc-badge{
font-size:.58rem !important;
padding:3px 7px !important;
}
.play-result.play-result--match .lesson-card-body{
padding:10px 11px !important;
gap:5px !important;
}
.play-result.play-result--match .lc-section{
padding:7px 9px !important;
}
.play-result.play-result--match .lc-section-label{
font-size:.54rem !important;
margin-bottom:3px !important;
}
.play-result.play-result--match .lc-section-copy{
font-size:.78rem !important;
line-height:1.24 !important;
}
.play-result.play-result--match .lc-step-list{
gap:3px !important;
}
.play-result.play-result--match .lc-step-item{
gap:5px !important;
}
.play-result.play-result--match .lc-step-num{
width:18px !important;
height:18px !important;
font-size:.56rem !important;
}
.play-result.play-result--match .lc-step-text{
font-size:.74rem !important;
line-height:1.2 !important;
}
.play-result.play-result--match .challenge-finish-points--result{
padding:8px 9px !important;
margin-bottom:4px !important;
}
.play-result.play-result--match .challenge-finish-points-title{
font-size:.64rem !important;
margin-bottom:4px !important;
}
.play-result.play-result--match .challenge-finish-points-row{
gap:4px !important;
}
.play-result.play-result--match .result-points-pill{
padding:5px 7px !important;
font-size:.72rem !important;
gap:5px !important;
}
.play-result.play-result--match .res-continue-btn{
margin-top:0 !important;
padding:9px 12px !important;
font-size:.86rem !important;
}
@media (max-height:820px){
.play-result.play-result--match{
min-height:min(calc(100dvh - 150px),490px) !important;
padding:8px 10px !important;
}
.play-result.play-result--match .res-center{
gap:6px;
}
.play-result.play-result--match .res-icon-wrap{
width:50px !important;
height:50px !important;
}
.play-result.play-result--match .res-icon-big{
font-size:1.78rem !important;
}
.play-result.play-result--match .res-title{
font-size:1.06rem !important;
}
.play-result.play-result--match .lesson-card-header{
padding:8px 10px !important;
}
.play-result.play-result--match .lesson-card-body{
padding:8px 9px !important;
}
.play-result.play-result--match .lc-section{
padding:5px 7px !important;
}
.play-result.play-result--match .lc-step-text,
.play-result.play-result--match .lc-section-copy{
font-size:.7rem !important;
line-height:1.16 !important;
}
}