/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
:root {
  --r8:8px; --r12:12px; --r16:16px; --r20:20px; --r50:50%;
  --ff-head:'Syne',sans-serif;
  --ff-body:'Space Grotesk',sans-serif;
  --trans:.22s ease;
}
[data-theme="dark"] {
  --bg:#060610; --s1:#0d0d1f; --s2:#12122a; --s3:#1a1a35;
  --acc:#7c6fff; --acc-h:#9d8fff; --acc-glow:rgba(124,111,255,.25);
  --green:#2fffb4; --rose:#ff5c8d; --gold:#ffc93c; --sky:#38d9f5;
  --text:#e8e8ff; --text2:#9090b8; --text3:#505075;
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.14);
  --shadow:rgba(0,0,0,.4); --card-glow:none;
  --btn-txt:#000;
  --bg-gradient:linear-gradient(135deg,#060610 0%,#0c0c22 50%,#060610 100%);
}
[data-theme="light"] {
  --bg:#f7f5ff; --s1:#f0ecff; --s2:#e8e2ff; --s3:#ddd5ff;
  --acc:#6c47d4; --acc-h:#5836bc; --acc-glow:rgba(108,71,212,.12);
  --green:#0f9b6a; --rose:#6c47d4; --gold:#b07800; --sky:#0077aa;
  --text:#180f30; --text2:#4a3870; --text3:#9080c0;
  --border:rgba(108,71,212,.16); --border2:rgba(108,71,212,.28);
  --shadow:rgba(60,30,140,.08); --card-glow:0 2px 24px rgba(108,71,212,.08);
  --btn-txt:#fff;
  --bg-gradient:linear-gradient(135deg,#f7f5ff 0%,#f0eaff 30%,#f5f2ff 60%,#ede8ff 100%);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{
  min-height:100%;background:var(--bg);color:var(--text);
  font-family:var(--ff-body);overflow-x:hidden;
  -webkit-user-select:none;user-select:none;
  transition:background .4s,color .3s;
}
/* Content areas allow text selection */
.prose-page,.prose-body,.faq-a,.lb-inner,.about-section,.info-card,.info-cards-grid,.about-inner,p,h1,h2,h3{
  -webkit-user-select:text!important;user-select:text!important;
}

/* ══════════════════════════════════════
   BACKGROUND EFFECTS
══════════════════════════════════════ */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg-gradient)}
.blob{position:absolute;border-radius:50%;filter:blur(100px);animation:blobFloat linear infinite alternate}
[data-theme="dark"] .blob-1{width:700px;height:700px;background:#3d20ff;opacity:.07;top:-200px;left:-200px;animation-duration:22s}
[data-theme="dark"] .blob-2{width:600px;height:600px;background:#ff2090;opacity:.05;bottom:-150px;right:-150px;animation-duration:28s}
[data-theme="dark"] .blob-3{width:500px;height:500px;background:#00ffaa;opacity:.04;top:40%;left:30%;animation-duration:18s;animation-direction:alternate-reverse}
[data-theme="light"] .blob-1{width:800px;height:800px;background:#ff80c0;opacity:.35;top:-250px;left:-250px;animation-duration:22s}
[data-theme="light"] .blob-2{width:600px;height:600px;background:#c040ff;opacity:.18;bottom:-200px;right:-200px;animation-duration:28s}
[data-theme="light"] .blob-3{width:500px;height:500px;background:#ff4090;opacity:.15;top:30%;left:20%;animation-duration:18s;animation-direction:alternate-reverse}
[data-theme="light"] .blob-4{width:400px;height:400px;background:#ffaa44;opacity:.12;bottom:10%;right:10%;animation-duration:24s}
@keyframes blobFloat{0%{transform:translate(0,0) scale(1)}100%{transform:translate(120px,80px) scale(1.2)}}

/* ══════════════════════════════════════
   OVERLAY HELPERS
══════════════════════════════════════ */
canvas#confetti{position:fixed;inset:0;pointer-events:none;z-index:950;display:none}
#flash{position:fixed;inset:0;pointer-events:none;z-index:900;opacity:0}
#flash.pop{animation:flashPop .08s ease}
@keyframes flashPop{0%{opacity:.2}100%{opacity:0}}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);z-index:800;display:none;align-items:center;justify-content:center;padding:16px}
.modal-bg.show{display:flex;animation:fadeUp .3s ease}
.modal{background:var(--s2);border:1px solid var(--border2);border-radius:var(--r20);padding:24px;width:100%;max-width:400px;position:relative}
.modal-x{position:absolute;top:12px;right:12px;background:none;border:1px solid var(--border);color:var(--text2);width:30px;height:30px;border-radius:var(--r8);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all var(--trans)}
.modal-x:hover{border-color:var(--rose);color:var(--rose)}

/* ══════════════════════════════════════
   PAGE SYSTEM
══════════════════════════════════════ */
.pg{display:none;flex-direction:column;position:relative;z-index:1}
.pg.active{display:flex;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.pg-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ══════════════════════════════════════
   NAVIGATION (all pages)
══════════════════════════════════════ */
.nav{
  display:flex;align-items:center;gap:8px;padding:12px 20px;
  border-bottom:1px solid var(--border);flex-shrink:0;
  background:rgba(6,6,16,.7);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100;
}
[data-theme="light"] .nav{background:rgba(255,245,248,.85)}
.nav-logo{font-family:var(--ff-head);font-weight:800;font-size:20px;letter-spacing:-0.5px;cursor:pointer;flex-shrink:0}
.nav-logo .t1{color:var(--text)}
.nav-logo .t2{color:var(--acc)}
.nav-links{display:flex;align-items:center;gap:2px;flex:1;flex-wrap:wrap;margin-left:48px}
.nav-link{background:none;border:none;color:var(--text2);font-size:13px;font-family:var(--ff-body);cursor:pointer;padding:6px 10px;border-radius:var(--r8);transition:all var(--trans);white-space:nowrap}
.nav-link:hover{background:var(--s2);color:var(--text)}
.nav-link.active{color:var(--acc);background:var(--acc-glow)}
.nav-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.icon-btn{background:none;border:1px solid var(--border);color:var(--text2);width:36px;height:36px;border-radius:var(--r8);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--trans);flex-shrink:0}
.icon-btn:hover{border-color:var(--acc);color:var(--acc)}
.icon-btn.gold{border-color:rgba(255,201,60,.3);color:var(--gold)}
.icon-btn.gold:hover{background:rgba(255,201,60,.1)}
/* Mobile: show 2 key links always, rest in hamburger dropdown */
@media(max-width:720px){
  .nav-link-hidden-mob{display:none}
  .nav-links{gap:2px}
}
.hamburger{display:none}
@media(max-width:720px){.hamburger{display:flex}}
.mob-dropdown{display:none;position:absolute;top:100%;right:0;min-width:200px;width:220px;background:var(--s1);border:1px solid var(--border2);border-radius:0 0 var(--r12) var(--r12);padding:8px;backdrop-filter:blur(16px);z-index:200;box-shadow:0 12px 32px var(--shadow)}
.mob-dropdown.open{display:flex;flex-direction:column;gap:2px}
.mob-dropdown .nav-link{display:block;text-align:left;width:100%;padding:10px 14px;border-radius:var(--r8);font-size:14px;color:var(--text2);text-decoration:none}
.mob-dropdown .nav-link:hover{background:var(--s2)}

/* ══════════════════════════════════════
   FOOTER NAV
══════════════════════════════════════ */
.footer{border-top:1px solid var(--border2);padding:18px 20px 20px;flex-shrink:0;background:var(--s1)}
[data-theme="light"] .footer{background:rgba(255,245,248,.6)}
.f-link{background:none;border:none;color:var(--text2);font-size:13px;font-family:var(--ff-body);cursor:pointer;padding:4px;transition:color var(--trans);text-decoration:none}
.f-link:hover{color:var(--acc);text-decoration:none}
.f-copy{width:100%;text-align:center;font-size:12px;color:var(--text2);margin-top:6px}

/* ══════════════════════════════════════
   SHARED COMPONENTS
══════════════════════════════════════ */
.label{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--text2);font-weight:600;margin-bottom:8px}
.inp{width:100%;background:var(--s2);border:1.5px solid var(--border);color:var(--text);font-family:var(--ff-body);font-size:15px;padding:12px 14px;border-radius:var(--r12);outline:none;transition:border-color var(--trans)}
.inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-glow)}
.inp::placeholder{color:var(--text3)}
select.inp{cursor:pointer;appearance:none}
.tog-row{display:flex;align-items:center;gap:12px}
.tog-lbl{font-size:14px;color:var(--text2);flex:1;line-height:1.4}
.sw{position:relative;width:44px;height:24px;cursor:pointer;flex-shrink:0}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw-track{position:absolute;inset:0;background:var(--s3);border-radius:12px;transition:background var(--trans);border:1px solid var(--border)}
.sw input:checked~.sw-track{background:var(--acc);border-color:var(--acc)}
.sw-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform var(--trans);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.sw input:checked~.sw-track~.sw-thumb{transform:translateX(20px)}
.hint{font-size:12px;color:var(--text2);line-height:1.55;padding:8px 12px;background:var(--acc-glow);border-radius:var(--r8);border-left:2px solid var(--acc)}
.card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r16);padding:20px;transition:box-shadow var(--trans)}
[data-theme="light"] .card{box-shadow:var(--card-glow)}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ff-head);font-weight:700;letter-spacing:1px;text-transform:uppercase;border:none;cursor:pointer;transition:all var(--trans);position:relative;overflow:hidden;text-decoration:none}
.btn-lg{font-size:17px;padding:16px 28px;border-radius:var(--r12);width:100%}
.btn-md{font-size:14px;padding:12px 20px;border-radius:var(--r12);width:100%}
.btn-sm{font-size:12px;padding:9px 16px;border-radius:var(--r8)}
.btn-acc{background:linear-gradient(135deg,var(--acc),var(--acc-h));color:var(--btn-txt);box-shadow:0 4px 20px var(--acc-glow)}
.inp.err{border-color:var(--rose)!important;box-shadow:0 0 0 3px rgba(255,92,141,.2)!important}
.name-err{font-size:13px;color:var(--rose);margin-top:6px;display:none;animation:fadeUp .25s ease}
.name-err.show{display:block}
.btn-acc:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 28px var(--acc-glow)}
.btn-acc:active{transform:scale(.97)}
.btn-ghost{background:var(--s2);border:1px solid var(--border2);color:var(--text2)}
.btn-ghost:hover{border-color:var(--acc);color:var(--text)}
.btn-danger{background:rgba(255,92,141,.1);border:1px solid rgba(255,92,141,.3);color:var(--rose)}
.btn-danger:hover{background:rgba(255,92,141,.18)}
.btn-wa{background:#25d366;color:#fff;font-size:14px;padding:13px 20px;border-radius:var(--r12);width:100%}
/* OPT ACCORDION */
.opt-box{background:var(--s1);border:1px solid var(--border);border-radius:var(--r12);overflow:hidden}
.opt-head{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;transition:background var(--trans)}
.opt-head:hover{background:var(--s2)}
.opt-head-ico{font-size:16px;flex-shrink:0;width:28px;text-align:center}
.opt-head-

.opt-head-name{font-size:14px;font-weight:600;color:var(--text)}
.opt-head-sub{font-size:11px;color:var(--text2);margin-top:2px}
.opt-chev{color:var(--text3);transition:transform .25s;font-size:12px}
.opt-chev.o{transform:rotate(180deg)}
.opt-content{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s}
.opt-content.o{max-height:800px;padding:0 15px 15px}
.opt-inner{display:flex;flex-direction:column;gap:10px;padding-top:4px}

/* ══════════════════════════════════════
   SETUP PAGE
══════════════════════════════════════ */
.setup-body{max-width:700px;margin:0 auto;padding:20px 12px;display:flex;flex-direction:column;gap:18px}
/* HERO */
.hero-block{text-align:center;padding:8px 0}
.hero-logo{font-family:var(--ff-head);font-weight:800;font-size:clamp(52px,13vw,76px);letter-spacing:-3px;line-height:.85}
.hero-logo .t1{color:var(--text)}
.hero-logo .t2{color:var(--acc)}
.hero-tag{font-size:17px;color:var(--text);margin-top:10px;line-height:1.5;-webkit-user-select:text;user-select:text;font-weight:600;font-family:var(--ff-body)}
.award-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,201,60,.1);border:1px solid rgba(255,201,60,.28);color:var(--gold);font-size:13px;padding:8px 16px;border-radius:30px;margin-top:12px;cursor:pointer;transition:background var(--trans)}
.award-pill:hover{background:rgba(255,201,60,.18)}
.award-pill .more{font-size:11px;text-decoration:underline;opacity:.7}
/* FORM CARD */
.form-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r20);padding:22px;display:flex;flex-direction:column;gap:18px}
[data-theme="light"] .form-card{box-shadow:0 4px 32px rgba(214,53,132,.1)}
/* MODE GRID */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-card{background:var(--s2);border:2px solid var(--border);border-radius:var(--r12);padding:16px 12px;cursor:pointer;transition:all var(--trans);text-align:center;position:relative;overflow:hidden}
.mode-card:hover{border-color:var(--border2)}
.mode-card.sel{border-color:var(--acc);background:var(--acc-glow)}
.mode-card .mc-ico{font-size:28px;display:block;margin-bottom:7px}
.mode-card .mc-n{font-family:var(--ff-head);font-weight:700;font-size:15px;margin-bottom:3px;color:var(--text)}
.mode-card .mc-d{font-size:11px;color:var(--text2);line-height:1.3}
.new-badge{position:absolute;top:7px;right:7px;background:var(--rose);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:1px}
.prize-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(255,180,0,.22);border:2px solid rgba(255,180,0,.7);color:#ffcc00;font-size:11px;font-weight:800;padding:5px 12px;border-radius:20px;margin-top:8px;letter-spacing:.5px;text-shadow:0 1px 4px rgba(0,0,0,.5);box-shadow:0 0 12px rgba(255,180,0,.25)}
/* TIME */
.time-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tb{background:var(--s2);border:1.5px solid var(--border);color:var(--text2);font-family:var(--ff-head);font-weight:700;font-size:19px;padding:11px 4px;border-radius:var(--r8);cursor:pointer;transition:all var(--trans);text-align:center}
.tb .sub{font-size:9px;font-family:var(--ff-body);font-weight:400;display:block;margin-top:1px;opacity:.7}
.tb:hover,.tb.sel{border-color:var(--acc);color:var(--acc);background:var(--acc-glow)}
/* NAME */
.name-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.char-count{font-size:11px;color:var(--text3)}
/* AVATAR */
.av-prev-row{display:flex;align-items:center;gap:12px}
.av-circle{width:52px;height:52px;border-radius:50%;background:var(--s3);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;overflow:hidden;flex-shrink:0;cursor:pointer;transition:border-color var(--trans)}
.av-circle:hover{border-color:var(--acc)}
.av-circle img{width:100%;height:100%;object-fit:cover}
.av-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-bottom:9px}
.av-item{width:100%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;border:2px solid transparent;transition:all var(--trans)}
/* dark theme av backgrounds */
[data-theme="dark"] .av-item{background:var(--s3)}
/* light theme av backgrounds — soft colorful */
[data-theme="light"] .av-item:nth-child(1){background:#ffd6e7}
[data-theme="light"] .av-item:nth-child(2){background:#ffe8cc}
[data-theme="light"] .av-item:nth-child(3){background:#fff3cc}
[data-theme="light"] .av-item:nth-child(4){background:#e8f8e8}
[data-theme="light"] .av-item:nth-child(5){background:#d6eeff}
[data-theme="light"] .av-item:nth-child(6){background:#e8d6ff}
[data-theme="light"] .av-item:nth-child(7){background:#ffd6d6}
[data-theme="light"] .av-item:nth-child(8){background:#d6fff0}
[data-theme="light"] .av-item:nth-child(9){background:#ffeedd}
[data-theme="light"] .av-item:nth-child(10){background:#ddeeff}
[data-theme="light"] .av-item:nth-child(11){background:#eeddff}
[data-theme="light"] .av-item:nth-child(12){background:#ddffee}
[data-theme="light"] .av-item:nth-child(13){background:#ffddee}
[data-theme="light"] .av-item:nth-child(14){background:#ffffcc}
[data-theme="light"] .av-item:nth-child(15){background:#ccffff}
[data-theme="light"] .av-item:nth-child(n+16){background:#f0e8ff}
.av-item:hover,.av-item.sel{border-color:var(--acc);transform:scale(1.12)}
.av-upload-row label{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--s2);border:1.5px dashed var(--border);color:var(--text2);font-size:12px;font-family:var(--ff-body);padding:9px;border-radius:var(--r8);cursor:pointer;transition:all var(--trans)}
.av-upload-row label:hover{border-color:var(--acc);color:var(--acc)}
/* SOCIAL */
.s2-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:8px}
/* Result lock — prevents accidental taps for 3.5s */
.result-lock{position:fixed;inset:0;z-index:700;cursor:wait}
.result-lock-bar{position:fixed;bottom:0;left:0;height:3px;background:var(--acc);z-index:701}
.result-lock-bar.anim{animation:lockBar 3.5s linear forwards}
@keyframes lockBar{from{width:100%}to{width:0}}
/* START INFO */
.start-note{text-align:center;font-size:13px;color:var(--text2);line-height:1.6;padding:4px 0}
.start-note strong{color:var(--rose);font-weight:700}
/* INFO CARDS below form — 2-col grid */
.info-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.info-cards-grid{grid-template-columns:1fr}.time-grid{grid-template-columns:repeat(3,1fr)}.mode-grid{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.setup-body{padding:14px 8px}.form-card{padding:16px}}
.info-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r16);padding:18px;display:flex;flex-direction:column;gap:10px}
[data-theme="light"] .info-card{box-shadow:var(--card-glow)}
.ic-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.ic-ico{font-size:20px}
.ic-title{font-family:var(--ff-head);font-weight:700;font-size:14px;letter-spacing:.5px;color:var(--acc)}
.ic-item{display:flex;gap:8px;align-items:flex-start}
.ic-bullet{color:var(--acc);font-size:12px;flex-shrink:0;margin-top:2px}
.ic-txt{font-size:12px;color:var(--text2);line-height:1.45}
.ic-txt strong{color:var(--text)}
.ic-btn{margin-top:4px;font-size:12px;color:var(--acc);background:none;border:none;cursor:pointer;font-family:var(--ff-body);padding:0;text-align:left;text-decoration:underline;line-height:1.4}
/* TOP 10 HOME */
.top10-section{background:var(--s1);border:1px solid var(--border);border-radius:var(--r16);overflow:hidden}
[data-theme="light"] .top10-section{box-shadow:var(--card-glow)}
.top10-header{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.top10-title{font-family:var(--ff-head);font-weight:700;font-size:15px;letter-spacing:.5px;color:var(--gold);flex:1}
.top10-tabs{display:flex;gap:6px}
.t10-tab{background:none;border:1px solid var(--border);color:var(--text2);font-size:11px;font-family:var(--ff-body);padding:5px 10px;border-radius:20px;cursor:pointer;transition:all var(--trans)}
.t10-tab.a{border-color:var(--acc);color:var(--acc);background:var(--acc-glow)}
.top10-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border)}
@media(max-width:500px){.top10-grid{grid-template-columns:1fr 1fr}}
.t10-cell{background:var(--s1);padding:7px 8px;display:flex;flex-direction:row;align-items:center;gap:6px;cursor:pointer;transition:background var(--trans)}
.t10-cell:hover{background:var(--s2)}
.t10-pos{font-family:var(--ff-head);font-weight:700;font-size:12px;color:var(--text3);min-height:16px}
.t10-cell.p1 .t10-pos{color:var(--gold)}
.t10-cell.p2 .t10-pos{color:#c0c0c0}
.t10-cell.p3 .t10-pos{color:#cd7f32}
.t10-av{width:36px;height:36px;border-radius:50%;background:var(--s3);display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;font-weight:700}
.t10-av img{width:100%;height:100%;object-fit:cover}
.t10-name{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);display:flex;align-items:center;gap:3px;min-width:0}
.t10-taps{font-family:var(--ff-head);font-weight:700;font-size:12px;color:var(--acc)}
.t10-empty{grid-column:1/-1;padding:20px;text-align:center;color:var(--text3);font-size:13px}

/* ══════════════════════════════════════
   CHALLENGE SCREEN — redesigned
══════════════════════════════════════ */
.chal-page-wrap{max-width:460px;margin:0 auto;padding:28px 18px 40px;display:flex;flex-direction:column;gap:20px}
.chal-hero{text-align:center}
.chal-hey{font-family:var(--ff-head);font-weight:800;font-size:clamp(32px,9vw,48px);color:var(--acc);letter-spacing:-1px;line-height:1;margin-bottom:8px}
.chal-headline{font-family:var(--ff-head);font-weight:800;font-size:clamp(20px,5vw,28px);color:var(--text);margin-bottom:6px;line-height:1.2}
.chal-subline{font-size:15px;color:var(--text2);line-height:1.55}

/* SCORE CARD */
.chal-score-card{position:relative;background:linear-gradient(135deg,var(--s2),var(--s3));border:1px solid var(--border2);border-radius:20px;padding:28px 24px;overflow:hidden;text-align:center}
.csc-ring{position:absolute;border-radius:50%;border:1.5px solid var(--acc);opacity:.12}
.csc-ring-1{width:260px;height:260px;top:-80px;right:-80px}
.csc-ring-2{width:180px;height:180px;bottom:-60px;left:-60px;border-color:var(--green)}
.csc-inner{position:relative;z-index:1}
.csc-mode-tag{display:inline-flex;align-items:center;gap:6px;background:var(--acc-glow);border:1px solid var(--border2);color:var(--acc);font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;letter-spacing:1px;margin-bottom:16px;text-transform:uppercase}
.csc-score-row{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:8px}
.csc-num{font-family:var(--ff-head);font-weight:800;font-size:clamp(68px,18vw,96px);color:var(--text);line-height:1}
.csc-label{font-size:16px;color:var(--text2);font-weight:600;align-self:flex-end;padding-bottom:12px}
.csc-stats{font-size:14px;color:var(--text2)}

/* RANK ROW */
.chal-rank-row{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r12);padding:13px 18px}
.chal-rank-ico{font-size:20px}
.chal-rank-txt{font-size:15px;color:var(--text);font-weight:600}

/* CTA SECTION */
.chal-cta{display:flex;flex-direction:column;gap:10px}
.chal-cta-label{font-size:14px;color:var(--text2);font-weight:500}
.chal-name-inp{font-size:17px;padding:14px 16px}
.chal-start-btn{font-size:19px;padding:18px;border-radius:var(--r16);box-shadow:0 6px 28px var(--acc-glow)}

/* PRIZE NOTE */
.chal-prize-note{text-align:center;font-size:13px;color:var(--text2);background:rgba(255,201,60,.07);border:1px solid rgba(255,201,60,.2);border-radius:var(--r12);padding:12px;line-height:1.5}
.chal-prize-note strong{color:var(--gold)}

/* ══════════════════════════════════════
   COUNTDOWN
══════════════════════════════════════ */
#pg-countdown{align-items:center;justify-content:center}
.cd-num{font-family:var(--ff-head);font-weight:800;font-size:clamp(140px,40vw,210px);color:var(--acc);line-height:1;animation:cdPulse .88s ease infinite}
@keyframes cdPulse{0%,100%{transform:scale(.82);opacity:.38}50%{transform:scale(1.02);opacity:1}}
.cd-num.go{color:var(--green);animation:cdGo .45s ease forwards}
@keyframes cdGo{from{transform:scale(1.5);opacity:1}to{transform:scale(.6);opacity:0}}
.cd-mode{font-size:12px;letter-spacing:5px;color:var(--text2);text-transform:uppercase;margin-top:14px}

/* ══════════════════════════════════════
   GAME
══════════════════════════════════════ */
#pg-game{justify-content:stretch}
.game-wrap{width:100%;max-width:480px;margin:0 auto;padding:14px 14px 0;flex:1;display:flex;flex-direction:column;align-items:center}
.g-topbar{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.timer-display{font-family:var(--ff-head);font-weight:800;font-size:42px;letter-spacing:-2px;line-height:1;transition:color var(--trans);color:var(--text)}
.timer-display.warn{color:var(--rose);animation:timerWarn .5s ease infinite}
@keyframes timerWarn{0%,100%{opacity:1}50%{opacity:.42}}
.mode-tag{font-size:10px;letter-spacing:2px;color:var(--acc);background:var(--acc-glow);border:1px solid rgba(124,111,255,.25);padding:5px 9px;border-radius:20px;text-transform:uppercase;white-space:nowrap}
.mode-tag.dots{color:var(--rose);background:rgba(255,92,141,.1);border-color:rgba(255,92,141,.3)}
.game-actions-top{display:flex;gap:6px;flex-shrink:0}
.tbar-bg{width:100%;height:4px;background:var(--s3);border-radius:2px;overflow:hidden;margin-bottom:12px}
.tbar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--acc));transition:width .1s linear}
.stats-row{display:flex;gap:8px;width:100%;margin-bottom:10px}
.stat-box{flex:1;background:var(--s1);border:1px solid var(--border);border-radius:var(--r12);padding:10px;text-align:center}
.stat-val{font-family:var(--ff-head);font-weight:700;font-size:22px;line-height:1;color:var(--text)}
.stat-val.a{color:var(--acc)}
.stat-lbl{font-size:10px;letter-spacing:2px;color:var(--text2);text-transform:uppercase;margin-top:2px}
.pb-row{font-size:12px;color:var(--text2);margin-bottom:6px;text-align:center}
.pb-row b{color:var(--gold)}
.big-count{font-family:var(--ff-head);font-weight:800;font-size:clamp(72px,20vw,112px);line-height:1;color:var(--text)}
.big-count.bump{animation:countBump .08s ease}
@keyframes countBump{0%{transform:scale(1.12)}100%{transform:scale(1)}}
.count-label{font-size:11px;letter-spacing:3px;color:var(--text2);text-transform:uppercase;margin-bottom:12px}
.dot-alert{width:100%;padding:7px 12px;border-radius:var(--r8);background:rgba(255,92,141,.1);border:1px solid rgba(255,92,141,.3);display:none;justify-content:center;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--rose);margin-bottom:10px;animation:dotPulse .6s ease infinite}
.dot-alert.show{display:flex}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.42}}
.kb-tip{font-size:11px;color:var(--text3);text-align:center;margin-top:6px}.tap-tip{font-size:12px;color:var(--acc);text-align:center;margin-top:4px;font-weight:500;opacity:.8}
/* TAP ZONE */
.tap-zone{width:100%;max-width:340px;aspect-ratio:1;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;margin-bottom:8px;overflow:visible}
.tap-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc);opacity:.2;animation:ringPulse 2.5s ease infinite}
.tap-ring:nth-child(2){animation-delay:.85s;opacity:.12}
.tap-ring:nth-child(3){animation-delay:1.7s;opacity:.06}
@keyframes ringPulse{0%,100%{transform:scale(.9)}50%{transform:scale(1.07)}}
.tap-circle{position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#1c1c40,#08080e);border:2px solid rgba(124,111,255,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .06s,border-color .1s,box-shadow .1s;box-shadow:0 0 60px rgba(124,111,255,.06)}
[data-theme="light"] .tap-circle{background:radial-gradient(circle at 38% 38%,#f8e8f8,#fce8f0);border-color:rgba(214,53,132,.2)}
.tap-zone:active .tap-circle,.tap-circle.hit{transform:scale(.93);border-color:var(--acc);box-shadow:0 0 40px var(--acc-glow)}
.tap-circle.blocked{border-color:rgba(255,92,141,.5)!important}
.tap-ico{font-size:clamp(28px,8vw,44px);pointer-events:none;margin-bottom:5px}
.tap-txt{font-family:var(--ff-head);font-weight:700;font-size:clamp(12px,3.5vw,16px);letter-spacing:4px;color:var(--acc);text-transform:uppercase;pointer-events:none}
.ripple{position:absolute;border-radius:50%;border:2px solid var(--acc);pointer-events:none;animation:rippleOut .55s ease forwards}
@keyframes rippleOut{from{transform:scale(.25);opacity:.85}to{transform:scale(2);opacity:0}}
.ripple.miss{border-color:var(--rose)}
.dot-obs{position:absolute;width:42px;height:42px;border-radius:50%;pointer-events:auto;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:700;font-size:9px;color:rgba(0,0,0,.75);text-transform:uppercase;animation:dotIn .2s ease,dotGlow .7s ease infinite .2s;z-index:10;touch-action:manipulation;transition:transform .12s,opacity .12s}
@keyframes dotIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes dotGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
.dot-obs.out{transform:scale(0);opacity:0}

/* ══════════════════════════════════════
   RESULT
══════════════════════════════════════ */
#pg-result .page-inner{max-width:520px;margin:0 auto;padding:22px 18px}
.res-hero{text-align:center;padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:18px}
.res-badge{font-size:58px;display:block;margin-bottom:5px;animation:popIn .5s ease}
@keyframes popIn{from{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}
.res-rank-title{font-family:var(--ff-head);font-weight:800;font-size:clamp(20px,6vw,32px);letter-spacing:1px;margin-bottom:3px;color:var(--text)}
.res-count{font-family:var(--ff-head);font-weight:800;font-size:clamp(56px,16vw,86px);color:var(--acc);line-height:1}
.res-count-lbl{font-size:11px;letter-spacing:4px;color:var(--text2);text-transform:uppercase;margin-bottom:8px}
.res-msg{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:7px;max-width:400px;margin-left:auto;margin-right:auto}
.speed-class{display:inline-block;font-family:var(--ff-head);font-weight:700;font-size:12px;letter-spacing:3px;padding:5px 14px;border-radius:20px;margin-bottom:6px;text-transform:uppercase}
.streak-info{font-size:13px;color:var(--text2);margin-bottom:4px}
.streak-info b{color:var(--rose)}
.avg-info{font-size:13px;color:var(--text2);margin-bottom:16px}
.avg-info b{color:var(--green)}
.res-stats{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.r-stat{background:var(--s1);border:1px solid var(--border);border-radius:var(--r12);padding:11px 14px;text-align:center;min-width:72px}
.r-stat-val{font-family:var(--ff-head);font-weight:700;font-size:19px;color:var(--text)}
.r-stat-val.a{color:var(--acc)}
.r-stat-lbl{font-size:10px;letter-spacing:2px;color:var(--text2);text-transform:uppercase;margin-top:2px}
.prize-contact-box{background:linear-gradient(135deg,rgba(255,201,60,.1),rgba(124,111,255,.07));border:1px solid rgba(255,201,60,.3);border-radius:var(--r16);padding:18px;margin-bottom:16px;display:none}
.prize-contact-box.show{display:block}
.pcb-title{font-family:var(--ff-head);font-weight:700;font-size:16px;color:var(--gold);margin-bottom:5px}
.pcb-sub{font-size:13px;color:var(--text2);margin-bottom:12px;line-height:1.5}
.pcb-row{display:flex;gap:8px}
.pcb-row .inp{flex:1}
.pcb-row .btn{width:auto;padding:12px 16px;font-size:13px}
.pcb-ico{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none}
.pcb-err{font-size:12px;color:var(--rose);margin-top:5px;display:none}
.pcb-note{font-size:11px;color:var(--text3);margin-top:8px;line-height:1.5}
.res-actions{display:flex;gap:9px;margin-bottom:10px}
.chal-send-btn{width:100%;background:rgba(199,125,255,.1);border:1px solid rgba(199,125,255,.25);color:var(--sky);font-size:14px;font-family:var(--ff-body);font-weight:600;padding:11px;border-radius:var(--r12);cursor:pointer;transition:all var(--trans);margin-bottom:16px}
.chal-send-btn:hover{background:rgba(124,111,255,.18)}
.mini-lb-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mini-lb-title{font-family:var(--ff-head);font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;flex:1;color:var(--text)}
.see-all-btn{font-size:12px;color:var(--acc);background:none;border:none;cursor:pointer;font-family:var(--ff-body)}

/* ══════════════════════════════════════
   LEADERBOARD
══════════════════════════════════════ */
.lb-inner{max-width:600px;margin:0 auto;padding:18px 10px}
.lb-hero{background:linear-gradient(135deg,rgba(255,201,60,.08),rgba(124,111,255,.05));border:1px solid rgba(255,201,60,.2);border-radius:var(--r16);padding:18px;margin-bottom:16px;text-align:center}
.lb-hero-t{font-family:var(--ff-head);font-weight:800;font-size:20px;letter-spacing:1px;color:var(--gold)}
.lb-hero-s{font-size:13px;color:var(--text2);margin-top:6px;line-height:1.5}
.lb-tabs-row{display:flex;gap:8px;margin-bottom:12px}
.lb-tab{flex:1;padding:10px;border-radius:var(--r8);font-family:var(--ff-head);font-weight:700;font-size:13px;letter-spacing:.5px;border:1.5px solid var(--border);background:var(--s1);color:var(--text2);cursor:pointer;transition:all var(--trans);text-transform:uppercase}
.lb-tab.a{border-color:var(--acc);color:var(--acc);background:var(--acc-glow)}
.lb-tab.dots.a{border-color:var(--rose);color:var(--rose);background:rgba(255,92,141,.08)}
.time-filter{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:none}
.time-filter::-webkit-scrollbar{display:none}
.tf-btn{background:var(--s1);border:1px solid var(--border);color:var(--text2);font-family:var(--ff-head);font-weight:600;font-size:12px;padding:7px 12px;border-radius:var(--r8);cursor:pointer;white-space:nowrap;transition:all var(--trans);flex-shrink:0}
.tf-btn.a{border-color:var(--acc);color:var(--acc);font-size:15px;padding:8px 16px;font-weight:700}
/* PERIOD TABS */

/* period toggle — subtle underline style */
.period-tabs{border-bottom:1px solid var(--border);margin-bottom:14px}
.period-btn{background:none;border:none;border-bottom:2px solid transparent;color:var(--text2);font-family:var(--ff-body);font-size:13px;font-weight:600;padding:8px 14px;cursor:pointer;transition:all var(--trans);margin-bottom:-1px}
.period-btn:hover{color:var(--text)}
.period-btn.a{color:var(--acc);border-bottom-color:var(--acc)}
.lb-list{display:flex;flex-direction:column;gap:6px}
.lb-row{display:flex;align-items:center;gap:9px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r12);padding:10px 13px;transition:border-color var(--trans)}
.lb-row.me{border-color:var(--acc);background:var(--acc-glow);border-left:3px solid var(--acc)}
.lb-row.g1 .lb-name{color:#ffd700}
.lb-row.g2 .lb-name{color:#e8e8e8}
.lb-row.g3 .lb-name{color:#cd853f}
.lb-row.g1{border:2px solid #d4a017;border-left:4px solid #d4a017;background:linear-gradient(135deg,#3d2e00 0%,#2a1f00 100%)}
.lb-row.g2{border:2px solid #909090;border-left:4px solid #b0b0b0;background:linear-gradient(135deg,#252525 0%,#1a1a1a 100%)}
.lb-row.g3{border:2px solid #8b5e00;border-left:4px solid #a0660a;background:linear-gradient(135deg,#2a1800 0%,#1e1000 100%)}
.lb-pos{font-family:var(--ff-head);font-weight:700;font-size:16px;min-width:22px;text-align:center;color:var(--text2)}
.lb-row.g1 .lb-pos{color:#ffd700;text-shadow:0 0 16px #ffd700}
.lb-row.g2 .lb-pos{color:#e8e8e8;text-shadow:0 0 14px #c0c0c0}
.lb-row.g3 .lb-pos{color:#cd853f;text-shadow:0 0 14px #cd7f32}
.lb-badge{font-size:16px;min-width:20px;text-align:center}
.lb-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;overflow:hidden;background:var(--s3);cursor:pointer;transition:transform var(--trans)}
.lb-av:hover{transform:scale(1.1)}
.lb-av img{width:100%;height:100%;object-fit:cover}
.lb-name-wrap{flex:1;min-width:0}
.lb-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px;color:var(--text)}
.lb-date{font-size:10px;color:var(--text3);margin-top:1px}
.soc-ico{display:inline-flex;align-items:center;text-decoration:none;transition:transform var(--trans);line-height:1}
.soc-ico:hover{transform:scale(1.2)}
.lb-right{text-align:right;flex-shrink:0}
.lb-taps{font-family:var(--ff-head);font-weight:700;font-size:19px;color:var(--acc)}
.lb-cps{font-size:11px;color:var(--text2)}
.lb-soc-always{display:inline-flex;align-items:center;flex-shrink:0}
.lb-empty{text-align:center;padding:30px;color:var(--text2);font-size:14px;line-height:1.7}
.lb-reset-note{text-align:center;font-size:12px;color:var(--text2);padding:10px 12px;background:var(--s2);border-radius:var(--r8);margin-bottom:12px;line-height:1.55}

/* ══════════════════════════════════════
   CROP MODAL
══════════════════════════════════════ */
.crop-wrap{display:flex;justify-content:center;margin-bottom:14px}
#cropCv{border-radius:50%;cursor:grab;touch-action:none;border:3px solid var(--acc)}
#cropCv:active{cursor:grabbing}

/* ══════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════ */
.prose-page{max-width:600px;margin:0 auto;padding:22px 18px}
.prose-hero{text-align:center;padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:22px}
.prose-ico{font-size:60px;display:block;margin-bottom:10px;animation:popIn .5s ease}
.prose-title{font-family:var(--ff-head);font-weight:800;font-size:clamp(24px,7vw,38px);letter-spacing:1px;color:var(--gold)}
.prose-sub{font-size:14px;color:var(--text2);margin-top:9px;line-height:1.65}
.steps{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.step{display:flex;gap:14px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r12);padding:14px}
.step-n{font-family:var(--ff-head);font-weight:800;font-size:26px;color:var(--acc);min-width:30px}
.step-body h3{font-family:var(--ff-head);font-weight:700;font-size:15px;margin-bottom:3px;color:var(--text)}
.step-body p{font-size:13px;color:var(--text2);line-height:1.55}
.boxes-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
@media(max-width:400px){.boxes-grid{grid-template-columns:1fr}}
.box-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r12);padding:14px;text-align:center}
.box-ico{font-size:24px;margin-bottom:6px}
.box-title{font-family:var(--ff-head);font-weight:700;font-size:13px;margin-bottom:3px;color:var(--acc)}
.box-desc{font-size:12px;color:var(--text2);line-height:1.4}
.alert-box{border-radius:var(--r12);padding:14px;text-align:center;font-size:13px;color:var(--text2);line-height:1.6}
.alert-box.warn{background:rgba(255,92,141,.06);border:1px solid rgba(255,92,141,.2)}
.alert-box strong{color:var(--rose)}

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.faq-section-lbl{font-family:var(--ff-head);font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--text2);margin:18px 0 8px;padding-left:2px}
.faq-item{background:var(--s1);border:1px solid var(--border);border-radius:var(--r12);overflow:hidden;margin-bottom:6px}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;cursor:pointer;font-size:15px;font-weight:600;transition:background var(--trans);gap:10px;color:var(--text)}
.faq-q:hover{background:var(--s2)}
.faq-chevron{color:var(--text3);transition:transform .25s;font-size:12px;flex-shrink:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s;font-size:14px;color:var(--text2);line-height:1.7;padding:0 14px}
.faq-a.o{max-height:400px;padding:0 14px 13px}
.faq-a strong{color:var(--text)}
.warn-pill{display:inline-block;background:rgba(255,92,141,.1);border:1px solid rgba(255,92,141,.25);border-radius:var(--r8);padding:8px 12px;margin-top:7px;color:var(--rose);font-size:13px;line-height:1.5}

/* ══════════════════════════════════════
   SUGGEST / PROSE / CONTACT
══════════════════════════════════════ */
.suggest-body,.prose-body,.contact-body{max-width:540px;margin:0 auto;padding:22px 18px}
.page-hero{text-align:center;margin-bottom:22px}
.page-hero-ico{font-size:50px;display:block;margin-bottom:8px;animation:popIn .4s ease}
.page-hero-t{font-family:var(--ff-head);font-weight:800;font-size:clamp(22px,6vw,32px);letter-spacing:1px;margin-bottom:6px;color:var(--text)}
.page-hero-s{font-size:14px;color:var(--text2);line-height:1.6}
.sug-type-row{display:flex;gap:7px}
.sug-type-btn{flex:1;background:var(--s2);border:1.5px solid var(--border);color:var(--text2);font-family:var(--ff-head);font-weight:700;font-size:13px;padding:10px;border-radius:var(--r8);cursor:pointer;transition:all var(--trans);text-align:center}
.sug-type-btn.a{border-color:var(--acc);color:var(--acc);background:var(--acc-glow)}
.sug-ta{width:100%;background:var(--s2);border:1.5px solid var(--border);color:var(--text);font-family:var(--ff-body);font-size:14px;padding:13px;border-radius:var(--r12);resize:vertical;min-height:110px;outline:none;transition:border-color var(--trans)}
.sug-ta:focus{border-color:var(--acc)}
.sug-ta::placeholder{color:var(--text3)}
.sent-block{display:none;text-align:center;padding:24px}
.sent-block.show{display:block}
.prose-body h2{font-family:var(--ff-head);font-weight:700;font-size:16px;letter-spacing:.5px;margin:20px 0 7px;color:var(--acc)}
.prose-body h2:first-child{margin-top:0}
.prose-body p,.prose-body li{font-size:14px;color:var(--text2);line-height:1.75;margin-bottom:9px}
.prose-body ul{padding-left:17px;margin-bottom:9px}
.contact-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r12);padding:14px;margin-top:9px}
.contact-card h3{font-family:var(--ff-head);font-weight:700;font-size:14px;margin-bottom:6px;color:var(--text)}
.c-link{color:var(--acc);text-decoration:none;font-size:14px}
.c-link:hover{text-decoration:underline}

/* ══════════════════════════════════════
   SHARE MODAL
══════════════════════════════════════ */
.share-score-card{background:linear-gradient(135deg,var(--s2),var(--s3));border:1px solid var(--border);border-radius:var(--r12);padding:16px;margin-bottom:14px;text-align:center}
.share-score{font-family:var(--ff-head);font-weight:800;font-size:52px;color:var(--acc);line-height:1}
.share-score-lbl{font-size:11px;letter-spacing:3px;color:var(--text2);text-transform:uppercase}
.share-score-info{font-size:13px;color:var(--text2);margin-top:5px}
.share-opts{display:flex;flex-direction:column;gap:8px}

/* ══════════════════════════════════════
   AVATAR ZOOM MODAL
══════════════════════════════════════ */
#avZoomModal .zoom-content{display:flex;justify-content:center;padding:8px 0 14px}
#avZoomModal .zoom-name{text-align:center;font-size:15px;font-weight:600;color:var(--text)}
/* ══════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════ */
.about-section{background:var(--s1);border:1px solid var(--border);border-radius:var(--r16);overflow:hidden}
[data-theme="light"] .about-section{box-shadow:var(--card-glow)}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:600px){.about-inner{grid-template-columns:1fr}}
.about-left{padding:22px;border-right:1px solid var(--border)}
@media(max-width:600px){.about-left{border-right:none;border-bottom:1px solid var(--border)}}
.about-right{padding:22px}
.about-badge{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:8px}
.about-title{font-family:var(--ff-head);font-weight:800;font-size:clamp(20px,5vw,26px);color:var(--text);margin-bottom:12px;line-height:1.15}
.about-desc{font-size:14px;color:var(--text2);line-height:1.75;margin-bottom:10px}
.about-desc:last-child{margin-bottom:0}
.about-desc strong{color:var(--text)}
.about-stat-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--r12);padding:14px}
.asc-ico{font-size:20px;margin-bottom:6px}
.asc-title{font-family:var(--ff-head);font-weight:700;font-size:13px;color:var(--acc);margin-bottom:8px;letter-spacing:.5px;text-transform:uppercase}
.asc-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:5px}
.asc-list li{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:6px;line-height:1.4}
.asc-list li::before{content:'▸';color:var(--acc);flex-shrink:0;font-size:11px}
.asc-list li strong{color:var(--text)}

/* ══════════════════════════════════════
   HEART EFFECTS
══════════════════════════════════════ */
.heart-container{position:absolute;inset:-80px;pointer-events:none;overflow:visible;z-index:20}
.floating-heart{position:absolute;font-size:22px;line-height:1;pointer-events:none;animation:heartFloat 4.2s ease-out forwards;will-change:transform,opacity}
@keyframes heartFloat{
  0%{transform:translate(0,0) scale(.7);opacity:1}
  20%{opacity:1;transform:translate(calc(var(--arc)*.4),-80%) scale(1.1)}
  55%{opacity:.9;transform:translate(calc(var(--arc)*.85),-240%) scale(.95)}
  85%{opacity:.5;transform:translate(var(--arc),-380%) scale(.8)}
  100%{transform:translate(calc(var(--arc)*1.1),-480%) scale(.6);opacity:0}
}
.heart-btn{background:none;border:1px solid var(--border);color:var(--rose);width:38px;height:38px;border-radius:var(--r8);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--trans);flex-shrink:0;font-size:17px}
.heart-btn:hover{background:rgba(255,92,141,.12);border-color:var(--rose)}
.heart-btn.off{opacity:.32;color:var(--text3)}

/* Footer fix */main{flex:1}
/* Leaderboard links */
.lb-tab{text-decoration:none;display:flex;align-items:center;justify-content:center}
.period-btn{text-decoration:none}
.tf-btn{text-decoration:none}
.f-link{text-decoration:none}
.nav-logo{text-decoration:none}

/* Mobile nav override */
@media(max-width:720px){
  .nav-links .nav-link:not(.nav-lb-link){display:none}
  .hamburger{display:flex!important}
}
/* Allow text selection on content pages */
.prose-body,.prose-page,.faq-a,.lb-inner,.about-section,.info-card{
  -webkit-user-select:text;user-select:text;
}

/* ── Tapkaj Logo ── */
.nav-logo{display:flex;align-items:baseline;gap:0;text-decoration:none!important}
.logo-main{font-family:var(--ff-head);font-weight:800;font-size:22px;color:var(--text);letter-spacing:1px;line-height:1}
.logo-com{font-family:var(--ff-head);font-weight:700;font-size:12px;color:var(--acc);letter-spacing:0;line-height:1;align-self:flex-end;margin-bottom:1px}
[data-theme="light"] .logo-main{color:var(--text)}

/* ── Sticky nav with blur ── */
.nav,.sticky-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(6,6,16,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:background .3s;
}
[data-theme="light"] .nav,[data-theme="light"] .sticky-nav{
  background:rgba(255,245,248,.88);
}
ink:not(.nav-lb-link){display:none!important}
  .hamburger{display:flex!important}
}
@media(min-width:721px){
  .hamburger{display:none!important}
}

/* ── Leaderboard.php: links styled as buttons ── */
a.lb-tab{text-decoration:none;display:flex;align-items:center;justify-content:center}
a.period-btn{text-decoration:none}
a.tf-btn{text-decoration:none}
a.f-link{text-decoration:none}
a.nav-link{text-decoration:none}

/* ── DOT IZAZOV prize pill - high contrast ── */
.prize-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:#7a3800!important;
  border:2px solid #ff8c00!important;
  color:#ffdd00!important;
  font-size:12px!important;font-weight:800!important;
  padding:6px 14px!important;border-radius:20px;
  margin-top:8px;letter-spacing:.5px;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
  box-shadow:0 0 16px rgba(255,140,0,.35)!important;
}

/* ── Leaderboard default select fix ── */
.tf-btn.a{
  border-color:var(--acc);color:var(--acc);
  font-size:15px;font-weight:800;
  padding:9px 18px;
}

/* ── Footer always at bottom ── */

/* ── Dot izazov card background fix for prize pill visibility ── */
.mode-card{position:relative;overflow:hidden}
#mc-dots .prize-pill{position:relative;z-index:2}

/* ── Hero logo (home page big version) ── */
.hero-logo{display:flex;align-items:baseline;gap:0;justify-content:center;line-height:.85;margin-bottom:8px}
.logo-hero-main{font-family:var(--ff-head);font-weight:800;font-size:clamp(52px,14vw,80px);color:var(--text);letter-spacing:-3px}
.logo-hero-com{font-family:var(--ff-head);font-weight:700;font-size:clamp(20px,5.5vw,32px);color:var(--acc);letter-spacing:-1px;align-self:flex-end;margin-bottom:6px;margin-left:2px}



/* Game nav row - prevent button overflow on mobile */
.game-nav-row{display:flex;flex-wrap:wrap;gap:6px;padding:6px 10px;
  align-items:center;border-bottom:1px solid var(--border);
  background:rgba(6,6,16,.8);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:50}
.game-nav-row .btn{flex-shrink:0;white-space:nowrap}
@media(max-width:480px){
  .game-nav-row .btn{font-size:11px;padding:7px 10px}
  .game-nav-row .heart-btn,.game-nav-row .icon-btn{width:32px;height:32px;font-size:14px}
}

/* Ensure footer at bottom on all pages */

/* Game page nav */
.nav-game-title{font-family:var(--ff-head);font-size:15px;font-weight:700;color:var(--text2);letter-spacing:1px}
.game-nav-right{display:flex;align-items:center;gap:6px;margin-left:auto}
@media(max-width:500px){
  .btn-sm{font-size:11px;padding:7px 10px}
  .nav-game-title{display:none}
  /* On narrow mobile, show both cancel and restart */
  .game-nav-right{gap:4px}
}
@media(max-width:360px){
  .btn-sm{font-size:10px;padding:6px 8px}
}

/* ═══ MASTER LAYOUT — one clean rule ═══ */
html { scroll-behavior: smooth }

body > main { flex: 1 }
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border2);
  padding: 20px 20px 24px;
  background: var(--s1);
  text-align: center;
}
.footer > nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-bottom: 8px;
}
.f-link {
  color: var(--text2) !important;
  font-size: 13px;
  text-decoration: none;
  font-family: var(--ff-body);
  padding: 3px 2px;
  transition: color .2s;
  display: inline-block;
}
.f-link:hover { color: var(--acc) !important }
.f-copy {
  color: var(--text2);
  font-size: 12px;
  margin-top: 6px;
}

/* ── Prevent nav jump on page load ── */
html { overflow-y: scroll } /* prevent scrollbar width shift */

/* ── Footer links - guaranteed visibility ── */
.footer { display: block !important; visibility: visible !important; }
.f-link { 
  display: inline-block !important;
  color: #9090b8 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.f-link:hover { color: #7c6fff !important }
.f-copy { 
  display: block !important; 
  color: #9090b8 !important;
  visibility: visible !important;
}

/* ── Social platform dropdown arrow ── */
#socialPlatform {
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════
   NAV — DEFINITIVE RULES (single source of truth)
═══════════════════════════════════════════════ */

/* Fixed nav bar */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  height: 58px;
  background: rgba(6,6,16,.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .nav {
  background: rgba(255,245,255,.88);
}


/* Logo */
.nav-logo {
  display: flex;
  align-items: baseline;
  text-decoration: none !important;
  gap: 1px;
  flex-shrink: 0;
}
.logo-main { font-family:var(--ff-head);font-weight:800;font-size:21px;color:var(--text);letter-spacing:-1px }
.logo-com  { font-family:var(--ff-head);font-weight:700;font-size:14px;color:var(--acc);align-self:flex-end;margin-bottom:2px }

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 48px;
  flex: 1;
}
.nav-links .nav-link {
  display: flex;
  align-items: center;
  color: var(--text2);
  font-size: 13px;
  padding: 7px 11px;
  border-radius: var(--r8);
  text-decoration: none !important;
  border: none !important;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s;
  outline: none;
  box-shadow: none;
  width: auto !important;
}
.nav-links .nav-link:hover  { background: var(--s2); color: var(--text) }
.nav-links .nav-link.active { color: var(--acc); background: rgba(124,111,255,.12) }

/* Right side */
.nav-right { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0 }

/* Hamburger — hidden on desktop */
.hamburger { display: none !important }

/* Mobile dropdown */
.mob-dropdown {
  display: none;
  position: absolute;
  top: 58px; right: 0;
  min-width: 200px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 6px;
  z-index: 300;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.mob-dropdown.open { display: flex; flex-direction: column; gap: 2px }
.mob-dropdown .nav-link {
  display: block;
  width: 100% !important;
  text-align: left;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text2);
  text-decoration: none;
  font-size: 14px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background .15s;
}
.mob-dropdown .nav-link:hover { background: var(--s2); color: var(--text) }

/* ─── MOBILE NAV ─── */
@media (max-width: 720px) {
  .hamburger { display: flex !important }
  /* Show only Lista Top 50 in nav-links on mobile */
  .nav-links .nav-link:not(.nav-lb-link) { display: none !important }
  .nav-links .nav-lb-link { display: flex !important }
  .nav-links { margin-left: 10px }
}
@media (min-width: 721px) {
  .hamburger { display: none !important }
}

/* ─── IGRAJ link — green on active ─── */
[data-theme="dark"]  .nav-links .nav-link.active { color: #00e68a }
[data-theme="light"] .nav-links .nav-link.active { color: var(--acc) }

/* Social select arrow */
#socialPlatform { appearance: auto; -webkit-appearance: auto; cursor: pointer }

/* ─── Countdown centered lower ─── */
#pg-countdown.pg.active {
  align-items:center;
  justify-content:center;
  padding-top:15vh;
}


/* Game page - no scrolling, everything fits on screen */
#pg-game { overflow: hidden }
#pg-game .pg-scroll { overflow: hidden }
#pg-game .game-wrap { overflow: hidden }

/* Top10 row layout fixes */
.top10-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border)}
@media(max-width:600px){.top10-grid{grid-template-columns:1fr 1fr}}
.t10-cell{background:var(--s1);padding:8px;display:flex;flex-direction:row;align-items:center;gap:6px;min-width:0}
.t10-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;overflow:hidden;background:var(--s3)}
.t10-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.t10-pos{font-size:12px;font-family:var(--ff-head);flex-shrink:0;min-width:20px;line-height:1}
.t10-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.t10-name{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:3px}
.t10-taps{font-size:12px;font-weight:700;color:var(--acc)}

/* ═══ MASTER BODY — single authoritative rule ═══ */
html {
  scroll-behavior: smooth;
  overflow-y: scroll; /* prevent scrollbar width shift */
}
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh;
  padding-top: 58px !important; /* compensate for fixed nav */
}
body > main { flex: 1 }

/* ── Accordion opt-content spacing ── */
.opt-content.o .opt-inner { padding-top: 12px }
.opt-content { border-top: 1px solid var(--border2) }

/* ── Hero heading with icon ── */
.hero-heading-wrap {
  text-align: center;
  margin-bottom: 2px;
}
.hero-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  vertical-align: middle;
  margin-left: 8px;
  display: inline-block;
  position: relative;
  top: -2px;
}
.hero-sub {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text2);
  margin-top: 6px;
  margin-bottom: 0;
  line-height: 1.5;
  -webkit-user-select: text;
  user-select: text;
}
/* Prevent H1 wrapping on mobile */
@media (max-width: 480px) {
  .hero-tag { font-size: 16px !important }
}

/* t10 social icon size fix */
.t10-name .lb-soc-always svg,
.t10-name svg { width:12px!important;height:12px!important;flex-shrink:0 }

/* ── Game controls bar (replaces nav during game) ── */
.game-controls-bar {
  display: none; /* shown by JS when game starts */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  z-index: 250; /* above mainNav */
  background: rgba(6,6,16,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

[data-theme="light"] .blob-1{background:#7c6fff!important;opacity:.05!important}
[data-theme="light"] .blob-2{background:#a080ff!important;opacity:.04!important}
[data-theme="light"] .blob-3{background:#c0a0ff!important;opacity:.03!important}

/* Light theme: game controls bar */
[data-theme="light"] .game-controls-bar{
  background:rgba(247,245,255,.93)!important;
  border-bottom:1px solid rgba(108,71,212,.18)!important;
}
[data-theme="light"] .game-controls-bar .btn-danger{background:#dc2626;color:#fff}
[data-theme="light"] .game-controls-bar .btn-ghost{background:rgba(108,71,212,.1);color:var(--acc);border-color:rgba(108,71,212,.3)}
[data-theme="light"] .game-controls-bar .heart-btn,
[data-theme="light"] .game-controls-bar .icon-btn{background:rgba(108,71,212,.08);border:1px solid rgba(108,71,212,.2)}
/* Light theme: nav footer */
[data-theme="light"] .footer{background:var(--s1);border-top:1px solid var(--border)}
[data-theme="light"] .f-link{color:var(--text2)!important}
/* Light theme: game tap count color */
[data-theme="light"] #tapCount{color:var(--acc)!important}

/* Light theme: speed class badge - better contrast */
[data-theme="light"] .speed-class-badge{
  color:#9b5e00!important; /* amber/gold, visible on light bg */
  background:rgba(155,94,0,.1)!important;
  border-color:rgba(155,94,0,.3)!important;
}
[data-theme="light"] .res-speed{color:#9b5e00!important}

/* Light theme: game tap count - vivid purple */
[data-theme="light"] #tapCount{color:var(--acc)!important;text-shadow:none}
[data-theme="light"] .tap-zone{border-color:var(--acc)!important}
[data-theme="light"] .cd-num{color:var(--acc)!important}

/* Light theme: tap circle - dimensional gradient */
[data-theme="light"] .tap-circle {
  background: radial-gradient(circle at 38% 38%, #e8e0ff, #c0b0f0) !important;
  border: 2px solid rgba(108,71,212,.35) !important;
  box-shadow: 0 4px 24px rgba(108,71,212,.15), inset 0 2px 8px rgba(255,255,255,.6) !important;
}
[data-theme="light"] .tap-circle:active {
  background: radial-gradient(circle at 38% 38%, #d4c8ff, #a898e8) !important;
}
/* Light theme: cancel button - less aggressive */
[data-theme="light"] .game-controls-bar .btn-danger {
  background: rgba(220,38,38,.12) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220,38,38,.3) !important;
}
[data-theme="light"] .game-controls-bar .btn-danger:hover {
  background: rgba(220,38,38,.2) !important;
}

[data-theme="light"] .nav,
[data-theme="light"] .sticky-nav,
[data-theme="light"] .nav.sticky-nav {
  background: rgba(240,235,255,.95) !important;
  border-bottom: 1px solid rgba(108,71,212,.2) !important;
}

/* ── FINAL light theme overrides (highest priority) ── */
[data-theme="light"] .nav,
[data-theme="light"] nav.nav { 
  background: rgba(240,236,255,.95) !important;
  border-bottom: 1px solid rgba(108,71,212,.22) !important;
}
[data-theme="light"] #pg-game,
[data-theme="light"] #pg-game .pg-scroll { 
  background: var(--bg) !important;
  border: none !important;
}

/* ── Name input - better placeholder visibility ── */
#nameInput::placeholder,
.inp::placeholder { color: var(--text3); opacity: 0.8 }
[data-theme="dark"] #nameInput::placeholder { color: rgba(144,144,184,.7) }
[data-theme="dark"] .label { color: var(--text2) }

/* ── Game page: no seam line ── */
#pg-game { padding-top: 52px !important }
#pg-game, #pg-game .pg-scroll, #pg-game .game-wrap { background: var(--bg) !important }
.game-controls-bar { border-bottom: 1px solid var(--border) }

/* ── Prevent iOS double-tap zoom on tap zone ── */
.tap-zone, .tap-circle {
  touch-action: manipulation !important;
  -ms-touch-action: manipulation !important;
}
#pg-game * { user-select: none; -webkit-user-select: none }
/* Prevent iOS auto-zoom on input focus */
#pg-game input, .inp { font-size: 16px !important }

/* ── Game wrap: fill full background, no seam ── */
#pg-game .game-wrap {
  width: 100%;
  max-width: 100%;
  background: var(--bg) !important;
}
#pg-game .pg-scroll {
  background: var(--bg) !important;
  overflow: hidden;
}