/* Outfit, self-hosted (SIL OFL). Was a render-blocking request to
   fonts.googleapis.com + fonts.gstatic.com on the critical path. */
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/outfit-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/outfit-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/outfit-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/outfit-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{--bg:#000000;--bg2:#050505;--bg3:#0A0A0A;--purple:#c084fc;--purple2:#9333ea;--pdim:rgba(192,132,252,0.12);--pborder:rgba(192,132,252,0.25);--green:#34d399;--gdim:rgba(52,211,153,0.1);--gborder:rgba(52,211,153,0.25);--t:#fff;--t2:rgba(255,255,255,0.55);--t3:rgba(255,255,255,0.28);--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);--font:'Outfit',sans-serif}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:#05030a;color:var(--t);font-family:var(--font);min-height:100vh;overflow-x:hidden}
body{padding-top:70px;padding-bottom:58px;background:radial-gradient(circle at 15% 50%,rgba(99,39,150,0.15),transparent 25%),radial-gradient(circle at 85% 30%,rgba(52,211,153,0.1),transparent 25%),#05030a;background-attachment:fixed}
.view{display:none}.view.active{display:block}
img{display:block}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(192,132,252,0.3)}50%{box-shadow:0 0 40px rgba(192,132,252,0.6)}}
@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0deg);opacity:1}100%{transform:translateY(300px) rotate(720deg);opacity:0}}

.animate-fadeup{animation:fadeUp 0.4s ease forwards}
.animate-fadein{animation:fadeIn 0.3s ease forwards}
.anim-delay-1{animation-delay:0.05s;opacity:0}
.anim-delay-2{animation-delay:0.1s;opacity:0}
.anim-delay-3{animation-delay:0.15s;opacity:0}
.anim-delay-4{animation-delay:0.2s;opacity:0}
.anim-delay-5{animation-delay:0.25s;opacity:0}
.anim-delay-6{animation-delay:0.3s;opacity:0}

/* SKELETON */
.skeleton{background:#111;background-image:linear-gradient(90deg,#111 0%,#111 30%,rgba(255,255,255,0.18) 50%,#111 70%,#111 100%);background-size:200% 100%;animation:shimmer 1.2s infinite linear;border-radius:12px}
.skel-card{height:200px;border-radius:18px}
.skel-feat{height:220px;border-radius:22px;margin:0 16px 20px}
.skel-stat{height:72px;border-radius:14px;flex:1}

/* HEADER */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.08);padding:14px 16px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:22px;font-weight:900;letter-spacing:-0.5px}.logo span{color:var(--purple)}
.hdr-icons{display:flex;gap:10px}
.icon-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;flex-shrink:0;transition:background 0.2s}
.icon-btn:active{background:rgba(255,255,255,0.12)}
.ndot{position:absolute;top:7px;right:7px;width:7px;height:7px;background:var(--purple);border-radius:50%;border:1.5px solid var(--bg)}

/* SEARCH */
.sbox-wrap{padding:12px 16px 0}
.sbox{background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:14px;display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;transition:border-color 0.2s}
.sbox:active{border-color:var(--pborder)}
.sbox span{color:var(--t3);font-size:14px}

/* CATS */
.cats-wrap{padding:12px 16px}
.cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.cats::-webkit-scrollbar{display:none}
.cat{display:inline-block;text-decoration:none;background:rgba(255,255,255,0.05);border:1px solid var(--border2);border-radius:20px;padding:7px 16px;font-size:13px;font-weight:500;color:var(--t2);white-space:nowrap;cursor:pointer;transition:all .2s;flex-shrink:0}
.cat.on{background:var(--pdim);border-color:var(--pborder);color:var(--purple)}

/* FEATURED */
.feat{margin:0 16px 20px;border-radius:22px;overflow:hidden;position:relative;height:220px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(255,255,255,0.08);cursor:pointer;background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:fadeUp 0.4s ease 0.1s forwards, glow 3s ease-in-out 0.5s infinite;box-shadow:0 8px 32px rgba(192,132,252,0.15)}
.feat-img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feat-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,5,15,.97) 0%,rgba(7,5,15,.4) 55%,transparent 100%)}
.feat-content{position:absolute;bottom:0;left:0;right:0;padding:16px}
.feat-badge{display:inline-block;background:var(--purple);color:#1a0a3d;font-size:9px;font-weight:800;letter-spacing:2px;padding:3px 9px;border-radius:20px;margin-bottom:8px}
.feat-title{font-size:24px;font-weight:800;line-height:1.1;margin-bottom:3px}
.feat-sub{font-size:12px;color:var(--t2)}
.feat-ph{width:100%;height:100%;background:linear-gradient(135deg,#1a0a3d,#2e1065);display:flex;align-items:center;justify-content:center;font-size:60px}

/* STATS */
.stats{display:flex;gap:8px;padding:0 16px 20px}
.scard{flex:1;background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:12px 8px;text-align:center;transition:transform 0.2s}
.scard:active{transform:scale(0.97)}
.scard-n{font-size:18px;font-weight:800;color:var(--purple)}
.scard-l{font-size:10px;color:var(--t3);margin-top:2px;font-weight:500}

/* SEC HDR */
.sec-hdr{display:flex;justify-content:space-between;align-items:center;padding:0 16px 12px}
.sec-hdr h1,.sec-hdr h2{font-size:18px;font-weight:800}
.sec-hdr a{font-size:13px;color:var(--purple);cursor:pointer}

/* GAME GRID */
.ggrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 20px}
.gcard{display:block;text-decoration:none;color:inherit;background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:18px;overflow:hidden;cursor:pointer;transition:transform 0.15s cubic-bezier(0.4,0,0.2,1),border-color .2s}
.gcard:active{transform:scale(0.96)}
.gcard:hover{border-color:var(--pborder)}
.gcard-thumb{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:transparent}
.gcard-ph{width:100%;aspect-ratio:1;background:linear-gradient(135deg,#1a0a3d,#2e1065);display:flex;align-items:center;justify-content:center;font-size:44px}
.gcard-body{padding:10px 12px 12px}
.gcard-name{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard-cat{font-size:11px;color:var(--t3);margin-top:2px}
.gcard-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.gbadge{background:var(--pdim);border:1px solid var(--pborder);color:var(--purple);font-size:9px;font-weight:700;padding:3px 8px;border-radius:6px}
.gdl{font-size:10px;color:var(--t3)}

/* BOTTOM NAV */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:space-around;padding:4px 0 10px}
.bni{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 14px;cursor:pointer;transition:transform 0.15s cubic-bezier(0.4,0,0.2,1)}
.bni:active{transform:scale(0.96)}
.bni-lbl{font-size:8.5px;font-weight:600;color:var(--t3);transition:color .2s}
.bni.on .bni-lbl{color:var(--purple)}
.bni-dot{width:3px;height:3px;background:var(--purple);border-radius:50%;opacity:0;transition:opacity .2s}
.bni.on .bni-dot{opacity:1}
.bni svg{color:var(--t3);transition:color .2s;width:20px;height:20px}
.bni.on svg{color:var(--purple)}

/* DETAIL */
.bcirc{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 0.2s}
.bcirc:active{background:rgba(255,255,255,0.15)}

/* Banner */
.dbanner-area{position:relative;height:220px;overflow:hidden;border-radius:24px;margin:14px 14px 0;-webkit-mask-image:linear-gradient(to top, transparent 0%, black 40%);mask-image:linear-gradient(to top, transparent 0%, black 40%);}
.dbanner-img{width:100%;height:100%;object-fit:cover;display:block}
.dbanner-ph{width:100%;height:100%;background:linear-gradient(135deg,#0d0021 0%,#1a0a3d 50%,#2e1065 100%);display:flex;align-items:center;justify-content:center}
.dbanner-ph svg{opacity:0.15}
.dbanner-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 70%);}
.dbanner-topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;z-index:3}
.dbanner-actions{display:flex;gap:7px}

/* App info row: icon + name side by side, overlapping banner */
.dapp-row{display:flex;align-items:flex-end;gap:12px;padding:0 28px;margin-top:-32px;position:relative;z-index:5;margin-bottom:10px}
.dapp-icon{width:68px;height:68px;border-radius:18px;overflow:hidden;flex-shrink:0;border:2px solid rgba(192,132,252,0.5);box-shadow:0 0 0 3px rgba(192,132,252,0.1),0 6px 20px rgba(0,0,0,0.7);background:linear-gradient(135deg,#1a0a3d,#2e1065);display:flex;align-items:center;justify-content:center}
.dapp-icon img{width:100%;height:100%;object-fit:cover;display:block}
.dapp-text{flex:1;padding-bottom:4px}
.dname{font-size:20px;font-weight:800;line-height:1.1;text-shadow:0 2px 8px rgba(0,0,0,0.8)}
.ddev{font-size:11px;color:var(--purple);margin-top:3px;font-weight:500}

/* Tags */
.dtags{display:flex;gap:6px;flex-wrap:wrap;padding:0 28px 12px;border-bottom:1px solid var(--border)}
.tag{font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;display:flex;align-items:center;gap:4px}
.tag svg{width:9px;height:9px}
.tag-p{background:var(--pdim);border:1px solid var(--pborder);color:var(--purple)}
.tag-g{background:var(--gdim);border:1px solid var(--gborder);color:var(--green)}

/* Download button */
.dlbtn-wrap{padding:12px 14px 10px}
.dlbtn{width:100%;background:linear-gradient(135deg,var(--purple2),var(--purple));color:#fff;border:none;border-radius:14px;padding:15px;font-size:16px;font-weight:800;font-family:var(--font);cursor:pointer;transition:transform 0.15s cubic-bezier(0.4,0,0.2,1),opacity 0.15s;display:flex;align-items:center;justify-content:center;gap:9px}
.dlbtn:active{transform:scale(0.96);opacity:0.9}
.dlbtn svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.5}

/* Stat pills */
.dstats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 14px 12px}
.dst{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:11px;padding:9px 4px;text-align:center}
.dst-n{font-size:14px;font-weight:700;color:var(--purple)}
.dst-l{font-size:8px;color:var(--t3);margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}

/* Mod features checklist */
.dfeatures{margin:0 14px 12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:13px;padding:12px 13px}
.dfeatures-title{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:9px}
.dfeatures-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px}
.dfeature-item{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,0.8);font-weight:500;min-width:0}
.dfeature-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dfeature-check{width:16px;height:16px;border-radius:50%;background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.35);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dfeature-check svg{width:8px;height:8px;stroke:var(--green);fill:none;stroke-width:2.5}

/* About — full width */
.dabout{margin:0 14px 12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:13px;padding:12px 13px}
.dabout-title{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:9px}
.ddesc{font-size:12px;color:var(--t2);line-height:1.7;word-break:break-word;overflow-wrap:anywhere}

/* Game info — full width */
.dgameinfo{margin:0 14px 12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:13px;padding:12px 13px}
.dgameinfo-title{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:9px}
.irow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.irow:last-child{margin-bottom:0}
.irow-l{font-size:10px;color:var(--t3);font-weight:500}
.irow-v{font-size:11px;font-weight:700;color:#e9d5ff;text-align:right}

/* Screenshots */
.shots{display:flex;gap:8px;padding:0 14px 14px;overflow-x:auto;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shot{width:108px;height:184px;border-radius:14px;overflow:hidden;flex-shrink:0;border:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center}
.shot svg{opacity:0.12}
.shot img{width:100%;height:100%;object-fit:cover}
.shots.landscape .shot{width:220px;height:130px}

/* Section label (screenshots only) */
.dsec-label{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;padding:10px 14px 6px}

/* Article (SEO content) */
.darticle{margin:16px 14px 0;padding-top:16px;border-top:1px solid var(--border)}
.darticle h2{font-size:18px;font-weight:800;margin:18px 0 8px;color:#fff}
.darticle h3{font-size:15px;font-weight:700;margin:14px 0 6px;color:#e9d5ff}
.darticle p{font-size:13px;color:var(--t2);line-height:1.75;margin-bottom:10px;word-break:break-word;overflow-wrap:anywhere}
.darticle ul,.darticle ol{margin:0 0 12px;padding-left:20px}
.darticle li{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:5px}
.darticle a{color:var(--purple);text-decoration:none}
.darticle strong{color:#fff}
.article-dl-btn{width:100%;background:linear-gradient(135deg,var(--purple2),var(--purple));color:#fff;border:none;border-radius:14px;padding:14px;font-size:15px;font-weight:800;font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;margin:16px 0}
.article-dl-btn svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.5}
.article-dl-btn:active{transform:scale(0.98);opacity:0.9}
/* FAQ */
.dfaq{margin:18px 14px 0}
.dfaq-title{font-size:16px;font-weight:800;margin-bottom:10px}
.faq-item{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.faq-q{font-size:13px;font-weight:700;color:#fff;margin-bottom:5px}
.faq-a{font-size:12px;color:var(--t2);line-height:1.65;word-break:break-word;overflow-wrap:anywhere}
/* Breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 16px 12px;font-size:12px;color:var(--t3)}
.crumbs a{color:var(--t2);text-decoration:none}
.crumbs a:active{color:var(--purple)}
.crumbs .crumb-sep{color:var(--t3)}
.crumbs .crumb-cur{color:var(--t2)}

/* Related games (internal links) */
.drelated{padding:0 16px;margin-top:6px}
.drelated-title{font-size:15px;font-weight:700;margin-bottom:12px}
.drelated-list{display:flex;flex-direction:column;gap:8px}
.drel{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--bg3);text-decoration:none;color:inherit}
.drel img{width:40px;height:40px;border-radius:10px;object-fit:cover;flex-shrink:0}
.drel-ph{width:40px;height:40px;border-radius:10px;background:rgba(192,132,252,0.08);flex-shrink:0}
.drel-name{font-size:13px;font-weight:600;line-height:1.3}
.drel-cat{font-size:11px;color:var(--t2);margin-top:2px}

/* Prerendered SEO block (shown to crawlers before JS boots; removed on load) */
#prerender-seo{padding:16px}
#prerender-seo h1{font-size:20px;margin-bottom:8px}
#prerender-seo a{color:var(--purple)}
#prerender-seo .pr-links{margin-top:20px}
#prerender-seo .pr-links h2{font-size:15px;margin-bottom:8px}
#prerender-seo .pr-links ul{padding-left:18px}
#prerender-seo .pr-links li{margin-bottom:4px;font-size:13px}
#prerender-seo .pr-spec{margin:16px 0}
#prerender-seo .pr-spec h2{font-size:15px;margin-bottom:8px}
#prerender-seo .pr-spec ul{padding-left:18px}
#prerender-seo .pr-spec li{margin-bottom:4px;font-size:13px;color:var(--t2)}

/* CUSTOM LOCKER — Bottom Sheet */
.cl-overlay{position:fixed;inset:0;z-index:99999;background:rgba(5,3,10,.85);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:none;align-items:flex-end;justify-content:center}
.cl-overlay.show{display:flex}
@keyframes cl-sheet-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes cl-sheet-out{from{transform:translateY(0)}to{transform:translateY(100%)}}
.cl-modal{background:#0d0d10;border:1px solid rgba(46,16,101,0.9);border-radius:28px 28px 0 0;width:100%;max-width:500px;display:flex;flex-direction:column;max-height:90vh;animation:cl-sheet-in 0.38s cubic-bezier(0.32,0.72,0,1) forwards;position:relative;overscroll-behavior:contain}
.cl-modal.closing{animation:cl-sheet-out 0.3s ease forwards !important}
/* Drag handle */
.cl-handle{width:40px;height:4px;background:rgba(255,255,255,0.15);border-radius:2px;margin:12px auto 8px;flex-shrink:0}
/* Header */
.cl-head{display:flex;align-items:center;gap:12px;padding:0 20px 12px;flex-shrink:0}
.cl-game-icon{width:48px;height:48px;border-radius:14px;overflow:hidden;border:1px solid rgba(192,132,252,0.3);flex-shrink:0;background:rgba(192,132,252,0.08);display:flex;align-items:center;justify-content:center}
.cl-game-icon img{width:100%;height:100%;object-fit:cover;border-radius:13px}
.cl-game-name{font-size:16px;font-weight:800;color:#fff}
.cl-game-sub{font-size:12px;color:rgba(255,255,255,0.45);margin-top:2px}
.cl-divider{display:none}
/* Carousel container */
#red-carousel-container{display:flex;align-items:center;gap:8px;padding:10px 10px 0;flex-shrink:0}
.carousel-nav{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.6);cursor:pointer;flex-shrink:0;font-size:15px;font-weight:700;transition:all .2s;-webkit-tap-highlight-color:transparent;user-select:none}
.carousel-nav:active,.carousel-nav.click-highlight{background:rgba(192,132,252,0.2);border-color:#c084fc;color:#c084fc;box-shadow:0 0 12px rgba(192,132,252,0.4);transform:scale(0.93)}
/* Active offer card area (fills carousel middle) */
#active-offer-card{flex:1;min-width:0}
.task-card-content{background:rgba(255,255,255,0.03);border:1.5px solid rgba(46,16,101,0.7);border-radius:16px;padding:12px 13px;display:flex;flex-direction:column;gap:9px}
.offer-header-row{display:flex;gap:10px;align-items:center}
.offer-img-wrapper{width:50px;height:50px;border-radius:12px;overflow:hidden;background:rgba(192,132,252,0.08);flex-shrink:0;border:1px solid rgba(192,132,252,0.2);display:flex;align-items:center;justify-content:center}
.offer-img-wrapper img{width:100%;height:100%;object-fit:cover}
.offer-text-group{flex:1;min-width:0}
.task-title{font-size:13px;font-weight:700;color:#fff;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.task-desc{font-size:10px;color:rgba(255,255,255,0.45);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
/* Instruction box inside card */
.instruction-box{background:rgba(192,132,252,0.05);border:1px dashed rgba(192,132,252,0.22);border-radius:10px;padding:8px 10px}
.instruction-header{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.instruction-label{font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(192,132,252,0.7)}
.new-user-label{background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);color:#34d399;font-size:7px;font-weight:800;padding:2px 6px;border-radius:5px;letter-spacing:.5px;text-transform:uppercase;margin-left:auto}
.instruction-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.instruction-steps li{font-size:10px;color:rgba(255,255,255,0.6);display:flex;gap:5px;line-height:1.5}
.instruction-steps li strong{color:#c084fc;flex-shrink:0}
/* Card CTA button */
.task-card-btn{background:linear-gradient(135deg,#7c3aed,#c084fc);border:none;border-radius:10px;padding:10px 0;color:#fff;font-size:12px;font-weight:800;font-family:var(--font);cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:.3px;transition:opacity .2s;-webkit-tap-highlight-color:transparent}
.task-card-btn:active{opacity:0.8}
/* Waiting state (replaces card when offer clicked) */
.cl-waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 16px;gap:13px;text-align:center;min-height:175px}
.cl-spinner{width:42px;height:42px;border:3px solid rgba(192,132,252,0.15);border-top-color:#c084fc;border-radius:50%;animation:spin .8s linear infinite}
.cl-wait-title{font-size:14px;font-weight:700;color:#fff}
.cl-wait-sub{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.6;max-width:240px}
.cl-recheck-btn{margin-top:2px;background:rgba(192,132,252,0.12);border:1px solid rgba(192,132,252,0.35);color:#c084fc;border-radius:10px;padding:9px 16px;font-size:12px;font-weight:700;font-family:var(--font);cursor:pointer;transition:background .2s}
.cl-recheck-btn:active{background:rgba(192,132,252,0.2)}
.cl-recheck-btn:disabled{opacity:.6;cursor:default}
.cl-wait-hint{font-size:10px;color:rgba(255,255,255,0.35);max-width:230px;line-height:1.6}
/* Carousel dots */
.carousel-dots{display:flex;justify-content:center;gap:5px;padding:8px 0 2px;flex-shrink:0}
.dot{width:5px;height:5px;background:rgba(255,255,255,0.1);border-radius:50%;transition:all .25s}
.dot.active{background:#c084fc;width:14px;border-radius:3px}
/* Progress bar */
.cl-progress{display:flex;align-items:center;gap:0;padding:12px 20px 10px;flex-shrink:0}
.cl-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;position:relative}
.cl-step-dot{width:28px;height:28px;border-radius:50%;border:2px solid rgba(192,132,252,0.2);background:rgba(192,132,252,0.06);display:flex;align-items:center;justify-content:center;transition:all .35s;font-size:11px;font-weight:800;color:rgba(192,132,252,0.3);z-index:1}
.cl-step.active .cl-step-dot{border-color:#c084fc;background:rgba(192,132,252,0.18);color:#c084fc;box-shadow:0 0 14px rgba(192,132,252,0.35)}
.cl-step.done .cl-step-dot{border-color:#34d399;background:rgba(52,211,153,0.15);color:#34d399}
.cl-step-lbl{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,0.25);transition:color .35s;white-space:nowrap}
.cl-step.active .cl-step-lbl{color:#c084fc}
.cl-step.done .cl-step-lbl{color:#34d399}
.cl-connector{flex:1;height:2px;background:rgba(192,132,252,0.12);margin-bottom:18px;transition:background .35s;border-radius:2px}
.cl-connector.lit{background:linear-gradient(90deg,#34d399,#c084fc)}
/* Bottom action button */
.cl-action-wrap{padding:8px 14px 28px;flex-shrink:0}
.cl-action-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;border:none;border-radius:16px;font-size:14px;font-weight:800;font-family:var(--font);cursor:pointer;transition:all .25s;letter-spacing:.3px}
.cl-action-btn.locked{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.28);cursor:not-allowed;border:1.5px solid rgba(255,255,255,0.07)}
.cl-action-btn.active{background:linear-gradient(135deg,#059669,#34d399);color:#fff;box-shadow:0 8px 24px rgba(52,211,153,0.35)}
.cl-action-btn.active:active{transform:scale(0.97);opacity:0.9}

/* CONFETTI */
.confetti-piece{position:fixed;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:9999;animation:confetti-fall 1.5s ease-in forwards}

/* SEARCH PAGE */
.search-page{padding:16px}
.spage-box{background:var(--bg3);border:1px solid var(--pborder);border-radius:14px;display:flex;align-items:center;gap:10px;padding:13px 14px;margin-bottom:20px}
.spage-box input{background:none;border:none;outline:none;color:#fff;font-family:var(--font);font-size:15px;flex:1}
.spage-box input::placeholder{color:var(--t3)}
.spage-clear{background:none;border:none;color:var(--t3);font-size:17px;line-height:1;cursor:pointer;padding:0;display:none;flex-shrink:0;transition:color .15s}
.spage-clear.visible{display:block}
.spage-clear:active{color:var(--t)}
.sresults{display:flex;flex-direction:column;gap:10px}
.srow{text-decoration:none;color:inherit;background:var(--bg3);border:1px solid var(--border);border-radius:16px;display:flex;align-items:center;gap:12px;padding:12px;cursor:pointer;transition:border-color 0.2s,transform 0.15s}
.srow:active{border-color:var(--pborder);transform:scale(0.98)}
.srow-icon{width:52px;height:52px;border-radius:14px;overflow:hidden;flex-shrink:0;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:24px}
.srow-icon img{width:100%;height:100%;object-fit:cover}
.srow-name{font-size:14px;font-weight:700}
.srow-cat{font-size:12px;color:var(--t3);margin-top:2px}
.sbadge{background:var(--pdim);border:1px solid var(--pborder);color:var(--purple);font-size:10px;font-weight:700;padding:3px 9px;border-radius:6px;margin-left:auto;flex-shrink:0}

/* INNER PAGES */
.inner-page{padding:16px}
.page-title{font-size:22px;font-weight:800;margin-bottom:16px}
.empty{text-align:center;padding:50px 20px;color:var(--t3)}
.empty-icon{font-size:44px;margin-bottom:12px}
.zero-req-card{margin:18px auto 0;max-width:320px;background:var(--pdim);border:1px solid var(--pborder);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.zero-req-txt{font-size:13px;color:var(--t2);line-height:1.5}
.zero-req-txt strong{color:var(--purple)}
.zero-req-btn{background:linear-gradient(135deg,var(--purple2),var(--purple));color:#fff;border:none;border-radius:10px;padding:11px;font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;transition:opacity .2s}
.zero-req-btn:active{opacity:.85}
.zero-req-btn:disabled{opacity:.5;cursor:default}
.zero-req-done{font-size:13px;color:var(--green);font-weight:600;line-height:1.5}

/* AUTH */
.auth-page{padding:24px 20px}
.auth-logo{font-size:28px;font-weight:900;text-align:center;margin-bottom:4px}.auth-logo span{color:var(--purple)}
.auth-tagline{font-size:13px;color:var(--t3);text-align:center;margin-bottom:28px}
.auth-tabs{display:flex;background:var(--bg3);border:1px solid var(--border2);border-radius:12px;padding:4px;margin-bottom:20px}
.auth-tab{flex:1;padding:9px;text-align:center;font-size:14px;font-weight:600;color:var(--t3);border-radius:9px;cursor:pointer;transition:all .2s}
.auth-tab.on{background:var(--pdim);color:var(--purple);border:1px solid var(--pborder)}
.social-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border-radius:14px;font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;border:1px solid var(--border2);background:var(--bg3);color:var(--t);transition:all 0.2s}
.social-btn:active{transform:scale(0.98)}
.sico{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.or-divider{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.or-line{flex:1;height:1px;background:var(--border)}
.or-txt{font-size:12px;color:var(--t3)}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-step{display:none}.auth-step.show{display:flex;flex-direction:column;gap:12px}

/* INPUT WITH EYE / FLAG */
.auth-inp-wrap{position:relative;display:flex;align-items:center}
.auth-inp{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:12px;padding:14px 16px;font-size:15px;color:#fff;font-family:var(--font);outline:none;transition:border-color 0.2s}
.auth-inp:focus{border-color:var(--pborder)}
.auth-inp.with-eye{padding-right:48px}
.eye-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--t3);display:flex;align-items:center;padding:4px;transition:color 0.2s}
.eye-btn:hover{color:var(--t2)}

/* PHONE INPUT */
.phone-wrap{display:flex;gap:8px;align-items:stretch}
.flag-selector{background:var(--bg3);border:1px solid var(--border2);border-radius:12px;padding:0 10px;display:flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0;min-width:80px;font-size:14px;color:var(--t);transition:border-color 0.2s;position:relative}
.flag-selector:hover{border-color:var(--pborder)}
.flag-dropdown{position:absolute;top:calc(100% + 6px);left:0;width:260px;background:var(--bg2);border:1px solid var(--border2);border-radius:14px;z-index:500;max-height:240px;overflow-y:auto;scrollbar-width:thin;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
.flag-search{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;position:sticky;top:0;background:var(--bg2)}
.flag-search input{background:none;border:none;outline:none;color:#fff;font-family:var(--font);font-size:13px;flex:1}
.flag-search input::placeholder{color:var(--t3)}
.flag-opt{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;font-size:13px;transition:background 0.15s}
.flag-opt:hover{background:rgba(255,255,255,0.05)}
.flag-opt .code{color:var(--t3);font-size:12px;margin-left:auto}
.phone-inp{flex:1}
.auth-inp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-btn{width:100%;background:linear-gradient(135deg,var(--purple2),var(--purple));color:#fff;border:none;border-radius:12px;padding:15px;font-size:16px;font-weight:700;font-family:var(--font);cursor:pointer;margin-top:4px;transition:transform 0.15s,opacity 0.15s}
.auth-btn:active{transform:scale(0.98);opacity:0.9}
.auth-err{font-size:13px;color:#f87171;text-align:center;display:none;padding:8px 12px;background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.2);border-radius:8px}
.auth-success{font-size:13px;color:var(--green);text-align:center;display:none;padding:8px 12px;background:var(--gdim);border:1px solid var(--gborder);border-radius:8px}
.auth-back-link{font-size:13px;color:var(--purple);text-align:center;cursor:pointer;margin-top:4px}

/* EMOJI PICKER */

/* PROFILE */
.profile-page{padding:20px}
.profile-hero{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:24px;text-align:center;margin-bottom:20px;animation:fadeUp 0.4s ease}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--purple2),var(--purple));display:flex;align-items:center;justify-content:center;margin:0 auto 12px;border:2px solid var(--pborder);overflow:hidden}
.profile-name{font-size:20px;font-weight:800}
.profile-email{font-size:13px;color:var(--t3);margin-top:4px}
.profile-since{font-size:11px;color:var(--t3);margin-top:4px}
.profile-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.pcard{background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center}
.pcard-n{font-size:22px;font-weight:800;color:var(--purple)}
.pcard-l{font-size:11px;color:var(--t3);margin-top:4px}
.profile-menu{display:flex;flex-direction:column;gap:8px}
.pmenu-item{background:var(--bg3);border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:border-color 0.2s,transform 0.15s}
.pmenu-item:active{border-color:var(--pborder);transform:scale(0.98)}
.pmenu-item-txt{flex:1}
.pmenu-title{font-size:14px;font-weight:600}
.pmenu-sub{font-size:12px;color:var(--t3);margin-top:2px}
.pmenu-arr{color:var(--t3);font-size:18px}
.logout-btn{width:100%;background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.25);color:#f87171;border-radius:12px;padding:14px;font-size:15px;font-weight:600;font-family:var(--font);cursor:pointer;margin-top:12px;transition:transform 0.15s}
.logout-btn:active{transform:scale(0.98)}

/* ACCOUNT SETTINGS SHEET */
.settings-sheet{position:fixed;inset:0;z-index:998;background:rgba(7,5,15,.92);backdrop-filter:blur(10px);display:none;align-items:flex-end;justify-content:center}
.settings-sheet.show{display:flex}
.settings-box{background:var(--bg2);border:1px solid var(--border2);border-radius:28px 28px 0 0;width:100%;max-width:480px;padding:20px 20px 40px;animation:slideUp 0.3s ease}
.settings-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.settings-title{font-size:18px;font-weight:800}
.settings-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.settings-field{margin-bottom:14px}
.settings-label{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.settings-inp{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:12px;padding:13px 16px;font-size:15px;color:#fff;font-family:var(--font);outline:none;transition:border-color 0.2s}
.settings-inp:focus{border-color:var(--pborder)}
.settings-inp:disabled{color:var(--t3);cursor:not-allowed}
.settings-save-btn{width:100%;background:linear-gradient(135deg,var(--purple2),var(--purple));color:#fff;border:none;border-radius:12px;padding:14px;font-size:16px;font-weight:700;font-family:var(--font);cursor:pointer;margin-top:8px}
.settings-note{font-size:12px;color:var(--t3);margin-top:6px}

/* NOTIF SHEET */
.notif-sheet{position:fixed;inset:0;z-index:998;background:rgba(7,5,15,.92);backdrop-filter:blur(10px);display:none;align-items:flex-end;justify-content:center}
.notif-sheet.show{display:flex}
.notif-box{background:var(--bg2);border:1px solid var(--border2);border-radius:28px 28px 0 0;width:100%;max-width:480px;padding:20px 20px 40px;animation:slideUp 0.3s ease}
.notif-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border)}
.notif-row:last-child{border-bottom:none}
.notif-info .notif-title{font-size:14px;font-weight:600}
.notif-info .notif-sub{font-size:12px;color:var(--t3);margin-top:2px}
.toggle-wrap{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle-wrap input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:var(--border2);border-radius:24px;cursor:pointer;transition:background 0.3s}
.toggle-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform 0.3s}
.toggle-wrap input:checked + .toggle-slider{background:var(--purple)}
.toggle-wrap input:checked + .toggle-slider:before{transform:translateX(20px)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;z-index:998;background:rgba(7,5,15,.85);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.show{display:flex}
.modal-box{background:var(--bg2);border:1px solid var(--border2);border-radius:22px;padding:24px;width:100%;max-width:340px;text-align:center;animation:fadeUp 0.3s ease}
.modal-icon{font-size:36px;margin-bottom:12px}
.modal-title{font-size:18px;font-weight:800;margin-bottom:8px}
.modal-msg{font-size:14px;color:var(--t2);line-height:1.6;margin-bottom:20px}
.modal-btn{width:100%;background:var(--pdim);border:1px solid var(--pborder);color:var(--purple);border-radius:12px;padding:13px;font-size:15px;font-weight:700;font-family:var(--font);cursor:pointer}

/* TOAST */
#toastContainer{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--bg3);border:1px solid var(--pborder);color:var(--purple);font-size:14px;font-weight:600;padding:12px 24px;border-radius:12px;opacity:0;transition:opacity .3s;white-space:nowrap}
.toast.show{opacity:1}

/* ── VIEW TRANSITIONS ──────────────────────────────────────────────── */
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes viewOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}
.view.active{animation:viewIn 0.22s cubic-bezier(0.4,0,0.2,1) forwards}

/* card tap feedback */
.gcard,.srow,.pmenu-item,.feat{transition:transform 0.14s cubic-bezier(0.4,0,0.2,1),border-color 0.2s,box-shadow 0.2s}
.gcard:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(192,132,252,0.12)}
.srow:hover{transform:translateY(-1px)}
.bni{transition:transform 0.14s cubic-bezier(0.4,0,0.2,1)}
.bni:active{transform:scale(0.88)}
.icon-btn{transition:background 0.18s,transform 0.13s}
.icon-btn:active{transform:scale(0.9)}
.dlbtn{transition:transform 0.14s cubic-bezier(0.4,0,0.2,1),opacity 0.15s,box-shadow 0.2s}
.dlbtn:hover{box-shadow:0 6px 24px rgba(192,132,252,0.35)}

/* ── GLOBAL ANNOUNCEMENT BANNER ────────────────────────────────────── */
#globalBanner{display:none;position:sticky;top:0;z-index:150;padding:10px 16px;font-size:13px;font-weight:600;text-align:center;letter-spacing:0.2px;animation:fadeIn 0.3s ease}
#globalBanner.info{background:rgba(96,165,250,0.12);border-bottom:1px solid rgba(96,165,250,0.3);color:#93c5fd}
#globalBanner.warning{background:rgba(251,191,36,0.1);border-bottom:1px solid rgba(251,191,36,0.3);color:#fde68a}
#globalBanner.success{background:rgba(52,211,153,0.1);border-bottom:1px solid rgba(52,211,153,0.25);color:#6ee7b7}
#globalBanner.show{display:block}
@keyframes sbSlideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes sbSlideDown{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(20px)}}

/* ── SPLASH SCREEN ──────────────────────────────────────────────────── */
#splashScreen{position:fixed;inset:0;z-index:999999;background:#05030a;display:flex;align-items:center;justify-content:center;pointer-events:none}
#splashScreen.done{animation:splashFadeOut 0.45s ease forwards}
@keyframes splashFadeOut{to{opacity:0;visibility:hidden}}
/* Fixed-size container so clip-path never cuts text */
#splashLogoWrap{width:260px;height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;animation:splashReveal 2.7s cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes splashReveal{
  0%   {clip-path:inset(47% 100% 47% 0 round 3px)}
  20%  {clip-path:inset(47% 0%   47% 0 round 3px)}
  38%  {clip-path:inset(0%  0%   0%  0 round 24px)}
  66%  {clip-path:inset(0%  0%   0%  0 round 24px)}
  82%  {clip-path:inset(47% 0%   47% 0 round 3px)}
  99%  {clip-path:inset(47% 0%   47% 100% round 3px);opacity:1}
  100% {clip-path:inset(47% 0%   47% 100% round 3px);opacity:0}
}
#splashIcon{animation:splashIconPop 2.7s forwards}
@keyframes splashIconPop{
  0%,18%{opacity:0;transform:scale(0.5)}
  36%{opacity:1;transform:scale(1.06)}
  46%{transform:scale(1)}
  65%{opacity:1;transform:scale(1)}
  80%{opacity:0;transform:scale(0.6)}
  100%{opacity:0}
}
#splashText{animation:splashTextFade 2.7s forwards}
@keyframes splashTextFade{
  0%,28%{opacity:0;transform:translateY(8px)}
  46%{opacity:1;transform:translateY(0)}
  65%{opacity:1}
  80%{opacity:0}
  100%{opacity:0}
}

/* ── MAINTENANCE OVERLAY ────────────────────────────────────────────── */
#maintenanceOverlay{display:none;position:fixed;inset:0;z-index:99998;background:#05030a;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}
#maintenanceOverlay.show{display:flex}

/* ── CUSTOM SHARE SHEET ─────────────────────────────────────────────── */
#shareOverlay{position:fixed;inset:0;z-index:9998;background:rgba(5,3,10,.85);backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center}
#shareOverlay.show{display:flex}
@keyframes shareIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
#shareSheet{background:#0d0d10;border:1px solid rgba(46,16,101,0.8);border-radius:28px 28px 0 0;width:100%;max-width:500px;padding:20px 20px 36px;animation:shareIn 0.3s cubic-bezier(0.32,0.72,0,1) forwards}
.share-handle{width:40px;height:4px;background:rgba(255,255,255,0.12);border-radius:2px;margin:0 auto 18px}
.share-title{font-size:12px;font-weight:700;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;text-align:center}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.share-btn{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.share-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);transition:transform 0.12s,background 0.15s;font-size:22px}
.share-btn:active .share-icon{transform:scale(0.9);background:rgba(192,132,252,0.15)}
.share-lbl{font-size:10px;color:rgba(255,255,255,0.4);font-weight:600}
.share-copy-row{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;display:flex;align-items:center;gap:10px;padding:10px 14px}
.share-url{flex:1;font-size:12px;color:rgba(255,255,255,0.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-copy-btn{background:var(--pdim);border:1px solid var(--pborder);color:var(--purple);border-radius:8px;padding:6px 14px;font-size:12px;font-weight:700;font-family:var(--font);cursor:pointer;flex-shrink:0;transition:background 0.15s}
.share-copy-btn:active{background:rgba(192,132,252,0.25)}

/* ── CAROUSEL ARROWS OVERRIDE ──────────────────────────────────────── */
.carousel-nav{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s;-webkit-tap-highlight-color:transparent;user-select:none}
.carousel-nav svg{pointer-events:none}
.carousel-nav:active,.carousel-nav.click-highlight{background:rgba(192,132,252,0.2);border-color:#c084fc;box-shadow:0 0 12px rgba(192,132,252,0.4);transform:scale(0.92)}