:root{
  --bg:#090A12;--bg-2:#111421;--card:#171B2B;--card-2:#1E2336;
  --text:#F5F5F7;--muted:#9CA3AF;--border:rgba(255,255,255,.08);
  --primary:#8B5CF6;--accent:#A855F7;--highlight:#3B82F6;
  --success:#22C55E;--danger:#EF4444;
  --radius:16px;--radius-sm:10px;
  --grad:linear-gradient(135deg,var(--primary),var(--accent) 50%,var(--highlight));
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
[data-theme=light]{--bg:#F6F5FB;--bg-2:#FFFFFF;--card:#FFFFFF;--card-2:#F1EEFB;--text:#14121F;--muted:#6B6880;--border:rgba(20,18,31,.1)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:0 0 1rem;font-weight:700;letter-spacing:-.02em}
h2{font-size:1.1rem;margin:0 0 .8rem}
hr{border:0;border-top:1px solid var(--border);margin:1.5rem 0}
.muted{color:var(--muted)}.center{text-align:center}
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Cards & controls */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.75rem 1.3rem;border-radius:999px;border:1px solid transparent;font:600 .95rem var(--font);cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;color:var(--text);background:transparent;text-decoration:none!important}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 24px -8px var(--accent)}
.btn-primary:hover{box-shadow:0 10px 30px -6px var(--accent)}
.btn-ghost{border-color:var(--border);background:var(--card-2)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:.4rem .8rem;font-size:.85rem}
.btn-block{width:100%;margin-top:.5rem}
button.link{background:none;border:0;color:inherit;font:inherit;cursor:pointer;display:flex;align-items:center;gap:.7rem;padding:0}
.field{display:block;margin-bottom:.9rem}
.field>span{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;padding:.8rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-2);color:var(--text);font:inherit;transition:border .2s,box-shadow .2s}
.field input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(168,85,247,.25)}
.has-error input{border-color:var(--danger)}
.err{color:var(--danger);font-size:.8rem;display:block;margin-top:.3rem}
.check{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin:.4rem 0}
.check input{accent-color:var(--accent);width:18px;height:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.9rem}
.segmented{display:flex;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px}
.segmented label{flex:1}.segmented input{display:none}
.segmented span{display:block;text-align:center;padding:.6rem;border-radius:8px;cursor:pointer;color:var(--muted);transition:.2s}
.segmented input:checked+span{background:var(--grad);color:#fff}
.pw-wrap{position:relative;display:block}.pw-toggle{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem}
.alert{padding:.8rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.9rem}
.alert.success{background:rgba(34,197,94,.12);color:#86EFAC;border:1px solid rgba(34,197,94,.3)}
.alert.error{background:rgba(239,68,68,.12);color:#FCA5A5;border:1px solid rgba(239,68,68,.3)}
.pill{font-size:.75rem;padding:.25rem .6rem;border-radius:999px;background:var(--card-2);color:var(--accent)}
.list{list-style:none;margin:0 0 1rem;padding:0}
.list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--border)}
.list li small{display:block}
.notice{display:flex;gap:.8rem;align-items:center}.notice i{font-size:1.6rem;color:var(--accent)}.notice p{margin:0}
.danger-zone h2{color:#FCA5A5}

/* Language switch */
.lang-switch{display:flex;gap:2px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:3px}
.lang-switch button{background:none;border:0;color:var(--muted);font:600 .75rem var(--font);padding:.3rem .55rem;border-radius:999px;cursor:pointer}
.lang-switch button.active{background:var(--grad);color:#fff}

/* App shell: sidebar on desktop, bottom nav on mobile */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;flex-shrink:0;background:var(--bg-2);border-right:1px solid var(--border);padding:1.5rem 1rem;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:var(--text);text-decoration:none!important}
.brand img{height:32px}
.sidebar .brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sidebar nav{margin-top:2rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.sidebar nav a,.sidebar-logout button{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;border-radius:12px;color:var(--muted);text-decoration:none;transition:.2s;width:100%}
.sidebar nav a i,.sidebar-logout i{font-size:1.25rem}
.sidebar nav a:hover{background:var(--card);color:var(--text)}
.sidebar nav a.active{background:linear-gradient(90deg,rgba(139,92,246,.25),transparent);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:flex-end;align-items:center;padding:1rem 1.5rem;position:sticky;top:0;background:rgba(9,10,18,.8);backdrop-filter:blur(12px);z-index:10;border-bottom:1px solid var(--border)}
[data-theme=light] .topbar{background:rgba(246,245,251,.85)}
.topbar-right{display:flex;align-items:center;gap:.8rem}
.icon-btn{position:relative;width:40px;height:40px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:1.2rem;color:var(--text)}
.badge{position:absolute;top:-2px;right:-2px;background:var(--danger);color:#fff;font-size:.65rem;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.content{padding:1.5rem;max-width:900px;width:100%;margin:0 auto}
.bottom-nav,.mobile-only{display:none}

@media (max-width:860px){
  .sidebar{display:none}
  .mobile-only{display:flex}
  .topbar{justify-content:space-between;padding:.8rem 1rem}
  .topbar .brand{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .content{padding:1rem 1rem 6rem}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(17,20,33,.95);backdrop-filter:blur(14px);border-top:1px solid var(--border);padding:.5rem .25rem calc(.5rem + env(safe-area-inset-bottom));z-index:20}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:.68rem;text-decoration:none}
  .bottom-nav a i{font-size:1.4rem}
  .bottom-nav a.active{color:var(--accent)}
  .grid-2{grid-template-columns:1fr}
}

/* Auth pages */
.auth-page{min-height:100vh;position:relative;overflow-x:hidden}
.auth-glow{position:fixed;inset:-30% -10% auto;height:70vh;background:radial-gradient(closest-side,rgba(139,92,246,.35),transparent),radial-gradient(closest-side at 80% 50%,rgba(59,130,246,.25),transparent);filter:blur(40px);pointer-events:none;z-index:0}
.auth-header{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem}
.auth-header .brand{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-main{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:1rem 1rem 3rem}
.auth-card{padding:2rem;backdrop-filter:blur(10px);background:rgba(23,27,43,.85)}
.auth-card h1{text-align:center}
.big-icon{font-size:3rem;color:var(--accent)}
.err-code{font-size:4rem;margin:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Landing */
.landing{text-align:center;padding:3rem 0}
.landing h1{font-size:clamp(2rem,6vw,3.2rem);line-height:1.1}
.lead{color:var(--muted);font-size:1.1rem}
.landing-actions{display:flex;gap:.8rem;justify-content:center;margin:2rem 0}
.landing-features{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.landing-features div{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.85rem}
.landing-features i{font-size:1.8rem;color:var(--accent)}
@media (max-width:520px){.landing-features{grid-template-columns:1fr 1fr}}

/* ---------- Phase 2: profile ---------- */
.small{font-size:.82rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem}
.verified{color:var(--highlight)}
.profile-head{display:flex;gap:1.25rem;align-items:center}
.avatar-xl{position:relative;width:120px;height:150px;border-radius:20px;background:var(--card-2);display:grid;place-items:center;flex-shrink:0;padding:3px;background-image:var(--grad)}
.avatar-xl img{width:100%;height:100%;object-fit:cover;border-radius:17px;background:var(--card)}
.avatar-xl>i{font-size:3rem;color:#fff}
.plus-btn{position:absolute;right:-10px;bottom:-10px;width:44px;height:44px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:1.5rem;cursor:pointer;border:4px solid var(--card);box-shadow:0 6px 18px -4px var(--accent);transition:transform .2s}
.plus-btn:hover{transform:scale(1.08) rotate(90deg)}
.profile-head-info{min-width:0;flex:1}.profile-head-info h1{margin:0 0 .2rem}.profile-head-info p{margin:0 0 .5rem}
.status-pill,.tile-badge{display:inline-block;font-size:.72rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;background:var(--card-2)}
.s-approved{background:rgba(34,197,94,.15);color:#86EFAC}.s-pending{background:rgba(234,179,8,.15);color:#FDE047}
.s-rejected,.s-suspended{background:rgba(239,68,68,.15);color:#FCA5A5}.s-draft{color:var(--muted)}
.progress{height:6px;background:var(--bg-2);border-radius:3px;overflow:hidden;margin:.7rem 0 .25rem;max-width:260px}.progress span{display:block;height:100%;background:var(--grad);border-radius:3px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem;margin-bottom:.75rem}
.photo-tile{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--bg-2)}
.photo-tile img{width:100%;height:100%;object-fit:cover;display:block}
.photo-tile.is-avatar{outline:2px solid var(--accent);outline-offset:2px}
.photo-tile .tile-badge{position:absolute;top:6px;left:6px;backdrop-filter:blur(6px)}
.photo-tile .tile-badge.avatar{top:auto;bottom:44px;background:rgba(139,92,246,.85);color:#fff}
.photo-tile>small{position:absolute;bottom:44px;left:6px;right:6px;font-size:.7rem;background:rgba(0,0,0,.5);padding:.15rem .4rem;border-radius:6px}
.tile-actions{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:flex-end;gap:.3rem;padding:.4rem;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.tile-actions .btn{padding:.35rem .5rem}
.photo-add label{aspect-ratio:4/5;border-radius:14px;border:2px dashed rgba(168,85,247,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;color:var(--accent);transition:.2s;font-size:.85rem}
.photo-add label i{font-size:2.2rem;width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center}
.photo-add label:hover{background:rgba(139,92,246,.08);border-color:var(--accent)}
.kv{display:grid;grid-template-columns:minmax(110px,180px) 1fr;gap:.55rem 1rem;margin:0}
.kv dt{color:var(--muted);font-size:.85rem}.kv dd{margin:0;word-break:break-word}
.add-link{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--card-2);color:var(--accent)}
.field textarea{resize:vertical}
.public-profile .gallery{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-bottom:1rem;border-radius:var(--radius)}
.public-profile .gallery img{height:min(70vh,520px);aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);scroll-snap-align:start;flex-shrink:0}
.gallery-empty{height:300px;width:100%;display:grid;place-items:center;background:var(--card);border-radius:var(--radius);font-size:4rem;color:var(--muted)}
.online-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--muted);vertical-align:middle}
.online-dot.on{background:var(--success);box-shadow:0 0 0 4px rgba(34,197,94,.2)}
@media (max-width:520px){.profile-head{flex-direction:column;text-align:center}.progress{margin-left:auto;margin-right:auto}.kv{grid-template-columns:1fr}.kv dt{margin-top:.4rem}}

/* ---------- Phase 3: discovery ---------- */
.page-head{margin-bottom:.5rem}.page-head h1{margin:0}
.chips{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 0 .9rem;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;padding:.5rem .95rem;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:.88rem;text-decoration:none!important;transition:.2s}
.chip b{font-size:.75rem;background:var(--card-2);border-radius:999px;padding:0 .45rem}
.chip.active{background:var(--grad);color:#fff;border-color:transparent}.chip.active b{background:rgba(255,255,255,.25)}
.filters summary{cursor:pointer;font-weight:600;display:flex;align-items:center;gap:.5rem;list-style:none}
.filters summary::-webkit-details-marker{display:none}
.filters[open] summary{margin-bottom:1rem}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 .8rem}
.range2{display:flex;align-items:center;gap:.4rem}.range2 input{min-width:0}
.wrap{flex-wrap:wrap}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:transform .25s,box-shadow .25s;animation:rise .4s ease both}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(139,92,246,.55)}
.pcard-photo{position:relative;display:block;aspect-ratio:4/5;color:#fff;text-decoration:none!important;background:var(--bg-2)}
.pcard-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.pcard:hover .pcard-photo img{transform:scale(1.04)}
.pcard-noimg{display:grid;place-items:center;height:100%;font-size:3rem;color:var(--muted)}
.pcard-online{position:absolute;top:10px;right:10px;width:12px;height:12px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(9,10,18,.6),0 0 12px var(--success)}
.pcard-info{position:absolute;inset:auto 0 0 0;padding:2.5rem .9rem .8rem;background:linear-gradient(transparent,rgba(5,6,12,.92))}
.pcard-info h3{margin:0;font-size:1.05rem}.pcard-info p{margin:.15rem 0 0;font-size:.8rem;color:#D1D5DB}
.pcard-about{opacity:.85}
.pcard-actions,.profile-actions{display:flex;justify-content:center;gap:.8rem;padding:.7rem}
.profile-actions{padding:0 0 1rem;gap:1.2rem}
.act{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--bg-2);color:var(--muted);font-size:1.25rem;display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .2s,color .2s}
.act.big{width:62px;height:62px;font-size:1.7rem}
.act:hover{transform:scale(1.1)}.act:active{transform:scale(.92)}
.act-like{color:#F472B6}.act-like.on{background:linear-gradient(135deg,#EC4899,#A855F7);color:#fff;border-color:transparent;box-shadow:0 8px 20px -6px #EC4899}
.act-no.on{background:#374151;color:#fff}
.act-fav{color:#FACC15}.act-fav.on{background:#FACC15;color:#1F1A00;border-color:transparent}
.act.pop{animation:pop .4s ease}
@keyframes pop{50%{transform:scale(1.3)}}
.pager{display:flex;justify-content:center;align-items:center;gap:1rem;margin:1rem 0}
.empty{text-align:center;padding:2.5rem 1rem}.empty>i{font-size:3rem;color:var(--accent)}
.safety summary{cursor:pointer;color:var(--muted)}.safety[open] summary{margin-bottom:1rem}
.match-banner{background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(139,92,246,.18))}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);opacity:0;background:var(--card-2);color:var(--text);padding:.8rem 1.3rem;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:100;transition:.3s;font-weight:600;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast-error{background:#7F1D1D}.toast-match{background:linear-gradient(135deg,#EC4899,#8B5CF6);color:#fff;font-size:1.05rem}
.report-row{align-items:flex-start!important;flex-wrap:wrap}
@media (max-width:520px){.cards-grid{grid-template-columns:1fr 1fr;gap:.6rem}.pcard-about{display:none}.act{width:38px;height:38px;font-size:1.05rem}.pcard-actions{gap:.4rem;padding:.5rem}}

/* ---------- Phase 4: chat ---------- */
.nav-badge,.badge-inline{background:var(--danger);color:#fff;font-size:.68rem;min-width:18px;height:18px;border-radius:9px;display:inline-grid;place-items:center;padding:0 5px;margin-left:auto;font-style:normal}
.bottom-nav a{position:relative}.bottom-nav .nav-badge{position:absolute;top:-2px;left:calc(50% + 4px);margin:0}
.mobile-only-flex{display:none}
@media (max-width:860px){.mobile-only-flex{display:flex}}
.section-title{margin:1.5rem 0 .8rem}
.search-bar{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:.2rem 1rem;margin-bottom:1rem}
.search-bar input{flex:1;background:none;border:0;color:var(--text);font:inherit;padding:.6rem 0;outline:0}
.ravatar{position:relative;width:46px;height:46px;border-radius:50%;background:var(--card-2);display:grid;place-items:center;flex-shrink:0;color:var(--muted)}
.ravatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ravatar.sm{width:30px;height:30px;font-size:.8rem}
.ravatar .dot{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:var(--success);border:2px solid var(--card)}
.ravatar.sm .dot{width:9px;height:9px}
.inbox{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.inbox li+li{border-top:1px solid var(--border)}
.inbox a{display:flex;gap:.8rem;align-items:center;padding:.85rem 1rem;color:var(--text);text-decoration:none!important;transition:background .2s}
.inbox a:hover{background:var(--card-2)}
.inbox-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.inbox-preview{color:var(--muted);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox li.unread .inbox-preview{color:var(--text);font-weight:600}

/* Chat page: fills the viewport under the top bar */
.chat-page{display:flex;flex-direction:column;height:calc(100vh - 140px);height:calc(100dvh - 140px);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-bottom:1px solid var(--border);background:var(--bg-2)}
.chat-who{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0;color:var(--text);text-decoration:none!important}
.chat-who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-who small{display:block;font-size:.75rem;color:var(--muted)}
.partner-status.on{color:var(--success)}
.msgs{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.35rem;scroll-behavior:smooth;overscroll-behavior:contain}
.load-older{align-self:center;margin-bottom:.5rem}
.day-divider{align-self:center;font-size:.72rem;color:var(--muted);background:var(--bg-2);padding:.2rem .7rem;border-radius:999px;margin:.6rem 0}
.msg{display:flex;align-items:flex-end;gap:.3rem;max-width:80%;animation:rise .2s ease both}
.msg.mine{align-self:flex-end;flex-direction:row-reverse}
.bubble{background:var(--card-2);padding:.55rem .8rem;border-radius:18px 18px 18px 6px;word-break:break-word;white-space:pre-wrap}
.msg.mine .bubble{background:linear-gradient(135deg,#7C3AED,#6D28D9);color:#fff;border-radius:18px 18px 6px 18px}
.bubble img{display:block;max-width:240px;max-height:300px;border-radius:12px;margin-bottom:.3rem}
.meta{font-size:.68rem;opacity:.7;text-align:right;margin-top:.15rem;display:flex;gap:.25rem;justify-content:flex-end;align-items:center}
.msg.read .tick{color:#7DD3FC}
.msg-menu{opacity:0;background:none;border:0;color:var(--muted);cursor:pointer;padding:.2rem;transition:opacity .2s}
.msg:hover .msg-menu{opacity:1}
@media (hover:none){.msg-menu{opacity:.6}}
.typing{display:flex;gap:4px;padding:0 1.2rem .5rem}
.typing[hidden]{display:none}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.composer{border-top:1px solid var(--border);padding:.6rem;background:var(--bg-2);position:relative}
.composer[hidden]{display:none}
.composer-row{display:flex;align-items:flex-end;gap:.4rem}
.composer textarea{flex:1;resize:none;background:var(--card);border:1px solid var(--border);border-radius:20px;color:var(--text);font:inherit;padding:.6rem .9rem;max-height:140px;outline:0}
.composer textarea:focus{border-color:var(--accent)}
.composer .icon-btn{cursor:pointer;color:var(--muted);width:40px;height:40px;flex-shrink:0}
.send-btn{width:42px;height:42px;border-radius:50%;border:0;background:var(--grad);color:#fff;font-size:1.15rem;cursor:pointer;flex-shrink:0;display:grid;place-items:center}
.send-btn:disabled{opacity:.6}
.emoji-panel{position:absolute;bottom:100%;left:.6rem;background:var(--card-2);border:1px solid var(--border);border-radius:16px;padding:.5rem;display:grid;grid-template-columns:repeat(8,1fr);gap:.15rem;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:5}
.emoji-panel[hidden]{display:none}
.emoji-panel button{background:none;border:0;font-size:1.35rem;cursor:pointer;border-radius:8px;padding:.15rem}
.emoji-panel button:hover{background:var(--card)}
.attach-preview{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.attach-preview[hidden]{display:none}
.attach-preview img{height:64px;border-radius:10px}
.chat-locked{padding:1rem;text-align:center;color:var(--muted);border-top:1px solid var(--border);display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.chat-locked[hidden]{display:none}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer}.menu summary::-webkit-details-marker{display:none}
.menu-list{position:absolute;right:0;top:110%;background:var(--card-2);border:1px solid var(--border);border-radius:14px;padding:.4rem;min-width:220px;z-index:20;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.menu-list a,.menu-list .link{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:10px;color:var(--text);width:100%;text-decoration:none!important}
.menu-list a:hover,.menu-list .link:hover{background:var(--card)}
.link.danger{color:#FCA5A5}

/* Rooms */
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem}
.room-card{position:relative;display:flex;align-items:center;gap:.8rem;padding:1rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);text-decoration:none!important;transition:.2s}
.room-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.room-card.vip{background:linear-gradient(135deg,rgba(250,204,21,.08),var(--card))}
.room-icon{width:46px;height:46px;border-radius:14px;background:var(--grad);display:grid;place-items:center;font-size:1.3rem;color:#fff;flex-shrink:0}
.room-icon.sm{width:38px;height:38px;border-radius:12px;font-size:1.1rem}
.room-card.vip .room-icon{background:linear-gradient(135deg,#F59E0B,#FACC15);color:#1F1A00}
.room-card.private .room-icon{background:var(--card-2);color:var(--accent)}
.room-text{flex:1;min-width:0}.room-text small{display:block;color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-online{display:flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--muted)}
.room-online .dot{width:8px;height:8px;border-radius:50%;background:var(--success)}
.room-lock{position:absolute;top:.6rem;right:.6rem;color:#FACC15}
.room-body{flex:1;display:flex;min-height:0}
.room-body .msgs{gap:.2rem}
.room-users{width:220px;border-left:1px solid var(--border);overflow-y:auto;padding:.6rem;background:var(--bg-2)}
.ruser{display:flex;align-items:center;gap:.5rem;padding:.35rem .4rem;border-radius:10px;color:var(--text);font-size:.88rem;text-decoration:none!important}
.ruser:hover{background:var(--card)}
.ruser span:not(.ravatar){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role{font-size:.65rem;padding:.1rem .4rem;border-radius:6px;background:var(--card-2);color:var(--accent)}
.role-owner,.role-site{color:#FACC15}
.rmsg{display:flex;gap:.6rem;padding:.35rem .4rem;border-radius:12px;animation:rise .2s ease both}
.rmsg:hover{background:rgba(255,255,255,.03)}
.rmsg .ravatar{width:36px;height:36px;font-size:.9rem}
.rbody{flex:1;min-width:0;position:relative}
.rhead{display:flex;gap:.5rem;align-items:baseline;font-size:.88rem}.rhead span{font-size:.7rem}
.rmsg.mine .rhead b{color:var(--accent)}
.rbody .text{white-space:pre-wrap;word-break:break-word}
.rtools{position:absolute;top:0;right:0;display:flex;gap:.3rem;opacity:0;transition:.2s;background:var(--card);border-radius:8px;padding:0 .3rem}
.rmsg:hover .rtools{opacity:1}
.rtools .link{color:var(--muted);padding:.2rem}
@media (hover:none){.rtools{opacity:.7;position:static;background:none;padding:0;margin-top:.2rem}}
@media (max-width:860px){
  .chat-page{height:calc(100dvh - 150px);border-radius:12px}
  .room-users{display:none;position:absolute;right:0;top:0;bottom:0;width:70%;z-index:5}
  .room-page{position:relative}.room-page.show-users .room-users{display:block}
}
.copy-row{display:flex;gap:.5rem}.copy-row input{flex:1;min-width:0;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);font:inherit}

/* Anonymous chat */
.anon-page{background:transparent;border:0;height:auto;min-height:calc(100dvh - 140px)}
.anon-page section[hidden]{display:none}
.anon-chat{display:flex;flex-direction:column;height:calc(100dvh - 150px);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.anon-hero{text-align:center;margin:1rem 0 1.5rem}
.anon-av{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-size:1.25rem;flex-shrink:0}
.anon-av.big{width:84px;height:84px;font-size:2.4rem;margin-bottom:.5rem}
.anon-searching{padding:3rem 1rem}
.radar{position:relative;width:140px;height:140px;margin:0 auto 1.5rem;display:grid;place-items:center;font-size:2.5rem;color:#fff}
.radar i{width:84px;height:84px;border-radius:50%;background:var(--grad);display:grid;place-items:center;z-index:1}
.radar span{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:ping 2s infinite}
.radar span+span{animation-delay:1s}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.3);opacity:0}}
.reveal-bar{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.reveal-bar .reveal-info{flex:1}
.reveal-card{display:inline-flex;align-items:center;gap:.5rem;background:var(--grad);color:#fff;padding:.25rem .8rem .25rem .25rem;border-radius:999px;font-weight:600;text-decoration:none!important}
.reveal-card img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.act-msg{color:var(--highlight);text-decoration:none!important}
.nav-badge[hidden],.badge[hidden],.badge-inline[hidden]{display:none}

/* ---------- Phase 5 ---------- */
.no-scroll{overflow:hidden}
.vip-gold{color:#FACC15}
.vip-badge{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,#F59E0B,#FACC15);color:#1F1A00;font-size:.68rem;font-weight:800;padding:.18rem .5rem;border-radius:999px;display:inline-flex;gap:.2rem;align-items:center}
.vip-badge.inline{position:static;vertical-align:middle;margin-left:.3rem}
.promo-badge{position:absolute;top:34px;left:10px;background:var(--highlight);color:#fff;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.8rem}
.pcard.promoted{border-color:rgba(59,130,246,.7);box-shadow:0 0 0 1px rgba(59,130,246,.5),0 14px 34px -14px rgba(59,130,246,.7)}
.pcard.is-vip{border-color:rgba(250,204,21,.45)}
.vip-hint{grid-column:1/-1;font-size:.85rem;color:#FACC15;margin:-.3rem 0 .6rem}
input:disabled{opacity:.45;cursor:not-allowed}
/* Stories */
.story-strip{display:flex;gap:.9rem;overflow-x:auto;padding:.2rem .1rem 1rem;scrollbar-width:none}
.story-strip::-webkit-scrollbar{display:none}
.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:1rem}
.story-ring{background:none;border:0;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:.35rem;cursor:pointer;text-decoration:none!important;flex-shrink:0;width:76px;font:inherit}
.story-ring .ring{width:68px;height:68px;border-radius:50%;padding:3px;background:var(--card-2);display:grid;place-items:center;font-size:1.6rem;color:var(--muted)}
.story-ring.unseen .ring{background:conic-gradient(from 200deg,#EC4899,#A855F7,#3B82F6,#EC4899)}
.story-ring .ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--bg)}
.story-ring.add .ring{background:var(--grad);color:#fff}
.story-ring .name{font-size:.75rem;max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:60;display:grid;place-items:center;padding:1rem}
.modal[hidden]{display:none}
.modal-card{width:100%;max-width:440px;max-height:92vh;overflow-y:auto;margin:0}
.story-type{margin-bottom:1rem}
.story-drop{display:block;margin-bottom:1rem;cursor:pointer}
.story-drop-inner{aspect-ratio:9/12;max-height:340px;border-radius:16px;border:2px dashed rgba(168,85,247,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:var(--accent);overflow:hidden}
.story-drop-inner i{font-size:2.4rem}.story-drop-inner img,.story-drop-inner video{width:100%;height:100%;object-fit:cover}
.text-story-preview{aspect-ratio:9/12;max-height:340px;border-radius:16px;display:grid;place-items:center;padding:1.5rem;margin-bottom:.7rem;transition:background .3s}
.text-story-preview textarea{width:100%;background:none;border:0;color:#fff;font:700 1.4rem var(--font);text-align:center;resize:none;outline:0;height:60%}
.text-story-preview textarea::placeholder{color:rgba(255,255,255,.6)}
.swatches{display:flex;gap:.5rem;margin-bottom:1rem}
.swatches label{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.swatches label:has(input:checked){border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
.swatches input{display:none}
.story-viewer{position:fixed;inset:0;background:#000;z-index:80;display:flex;flex-direction:column;max-width:520px;margin:0 auto}
.story-viewer[hidden]{display:none}
@media (min-width:600px){.story-viewer{box-shadow:0 0 0 100vmax rgba(0,0,0,.92)}}
.sv-bars{display:flex;gap:4px;padding:.6rem .6rem 0;position:absolute;top:0;left:0;right:0;z-index:3}
.sv-bars span{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.sv-bars i{display:block;height:100%;width:0;background:#fff}
.sv-head{position:absolute;top:14px;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:.5rem .6rem;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.sv-author{display:flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none!important}
.sv-author small{color:#D1D5DB}
.sv-actions{display:flex;gap:.3rem}
.sv-actions .icon-btn{background:rgba(0,0,0,.35);color:#fff;border:0;cursor:pointer;width:36px;height:36px;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;gap:2px}
.sv-actions .icon-btn[hidden]{display:none}
.sv-actions .sv-viewers{width:auto;padding:0 .6rem;border-radius:18px;font-size:.85rem}
.sv-stage{flex:1;display:grid;place-items:center;overflow:hidden;user-select:none}
.sv-stage img,.sv-stage video{max-width:100%;max-height:100%;object-fit:contain}
.sv-text{color:#fff;font:700 clamp(1.3rem,5vw,1.9rem)/1.35 var(--font);text-align:center;padding:2rem;white-space:pre-wrap;word-break:break-word}
.sv-caption{position:absolute;bottom:1.5rem;left:1rem;right:1rem;text-align:center;color:#fff;text-shadow:0 1px 4px #000;z-index:2}
.sv-nav{position:absolute;top:80px;bottom:80px;width:35%;background:none;border:0;z-index:2;cursor:pointer}
.sv-prev{left:0}.sv-next{right:0}
.sv-viewers-list{position:absolute;left:0;right:0;bottom:0;max-height:55%;overflow-y:auto;background:var(--card);border-radius:20px 20px 0 0;padding:1rem;z-index:4}
.sv-viewers-list[hidden]{display:none}
/* Wallet / VIP */
.wallet-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.wcard{border-radius:20px;padding:1.3rem;display:flex;flex-direction:column;gap:.4rem;color:#fff;position:relative;overflow:hidden}
.wcard.cash{background:linear-gradient(135deg,#7C3AED,#3B82F6)}
.wcard.points{background:linear-gradient(135deg,#B45309,#F59E0B)}
.wcard b{font-size:1.7rem}.wcard small{opacity:.85}.wcard .muted{color:rgba(255,255,255,.8)}
.wcard .btn{align-self:flex-start;background:rgba(255,255,255,.2);color:#fff}
.bonus-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin:1rem 0}
.bonus-days.admin{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
.bday{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:.5rem .2rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.8rem}
.bday b{font-size:1rem}.bday i{color:var(--muted)}
.bday input{width:100%;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:.3rem;font:inherit}
.bday.done{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4)}.bday.done i{color:var(--success)}
.bday.current{border-color:var(--accent);box-shadow:0 0 0 2px rgba(168,85,247,.35);animation:pop 1.4s ease infinite}
.bonus-banner{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(139,92,246,.18))}
.bonus-banner i{color:#F59E0B}.bonus-banner p{flex:1}
.amount.pos{color:#86EFAC;font-weight:700}.amount.neg,.neg{color:#FCA5A5;font-weight:700}
.vip-benefits ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem}
.vip-benefits li{display:flex;gap:.5rem;align-items:center}.vip-benefits i{color:#FACC15;font-size:1.2rem}
.vip-active{background:linear-gradient(135deg,rgba(250,204,21,.15),rgba(245,158,11,.08))}.vip-active i{color:#FACC15}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-bottom:1rem}
.pkg-grid.small{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pkg{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;display:flex;flex-direction:column;gap:.35rem;text-align:center}
.pkg h3{margin:0}.pkg p{margin:0}
.pkg .price{font-size:1.4rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vip-pkg{border-color:rgba(250,204,21,.4);background:linear-gradient(160deg,rgba(250,204,21,.08),var(--card) 60%)}
.vip-pkg .price{background:linear-gradient(135deg,#F59E0B,#FACC15);-webkit-background-clip:text;background-clip:text}
.buy-form{display:flex;gap:.4rem;justify-content:center;margin-top:.5rem;flex-wrap:wrap}
.theme-picker{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.theme-swatch input{display:none}.theme-swatch span{display:block;width:38px;height:38px;border-radius:50%;cursor:pointer;border:3px solid transparent}
.theme-swatch input:checked+span{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
.theme-default span{background:var(--card-2)}.theme-violet span{background:linear-gradient(135deg,#7C3AED,#A855F7)}
.theme-sunset span{background:linear-gradient(135deg,#F97316,#EC4899)}.theme-ocean span{background:linear-gradient(135deg,#0EA5E9,#14B8A6)}
.theme-gold span{background:linear-gradient(135deg,#F59E0B,#FACC15)}.theme-rose span{background:linear-gradient(135deg,#E11D48,#FB7185)}
.public-profile[class*="theme-"]>.card:first-of-type{border-width:2px}
.theme-violet>.card{border-color:#A855F7}.theme-sunset>.card{border-color:#F97316}.theme-ocean>.card{border-color:#0EA5E9}.theme-gold>.card{border-color:#FACC15}.theme-rose>.card{border-color:#FB7185}
.public-profile[class*="theme-"] .gallery img{box-shadow:0 0 0 3px var(--accent)}
.theme-sunset .gallery img{box-shadow:0 0 0 3px #F97316}.theme-ocean .gallery img{box-shadow:0 0 0 3px #0EA5E9}.theme-gold .gallery img{box-shadow:0 0 0 3px #FACC15}.theme-rose .gallery img{box-shadow:0 0 0 3px #FB7185}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.85rem}
.table th,.table td{padding:.5rem;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.table th{color:var(--muted);font-weight:600}
.story-mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.story-mod{display:flex;flex-direction:column;gap:.5rem}
.story-mod-media{aspect-ratio:9/12;border-radius:12px;overflow:hidden;background:#000;display:grid;place-items:center}
.story-mod-media img,.story-mod-media video{width:100%;height:100%;object-fit:contain}
.story-mod-media p{color:#fff;font-weight:700;padding:1rem;text-align:center}
@media (max-width:520px){.wallet-cards{grid-template-columns:1fr}.bonus-days{grid-template-columns:repeat(7,1fr);gap:.25rem}.bday{font-size:.65rem;padding:.4rem 0}.bday b{font-size:.8rem}}

/* ---------- Phase 6: games ---------- */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.9rem}
.game-tile{position:relative;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:1.1rem .9rem;display:flex;flex-direction:column;gap:.35rem;color:var(--text);text-decoration:none!important;transition:.25s;overflow:hidden}
.game-tile::before{content:'';position:absolute;inset:-40% -40% auto auto;width:140px;height:140px;border-radius:50%;background:hsl(var(--h),80%,60%);opacity:.12;filter:blur(10px)}
.game-tile:hover{transform:translateY(-4px);border-color:hsl(var(--h),80%,65%)}
.game-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;color:#fff;background:linear-gradient(135deg,hsl(var(--h),75%,55%),hsl(calc(var(--h) + 40),75%,50%))}
.game-tile small{color:var(--muted);font-size:.78rem;line-height:1.35}
.game-plays{position:absolute;top:.8rem;right:.8rem;font-size:.75rem;color:#FDBA74}
.game-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1rem;align-items:start}
.game-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.game-head h1{flex:1;margin:0;font-size:1.35rem}
.game-head select,.board-period{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:.45rem .6rem;font:inherit}
.game-head .icon-btn{cursor:pointer;border:1px solid var(--border)}
.game-hud{display:flex;justify-content:space-between;gap:1rem;min-height:1.6rem;margin-bottom:.5rem}
.game-stage{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;align-items:center;min-height:320px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.game-area{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}
.game-overlay{position:absolute;inset:0;background:rgba(9,10,18,.86);backdrop-filter:blur(6px);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;text-align:center;padding:1rem;z-index:5;animation:rise .3s}
.game-overlay[hidden]{display:none}
.game-overlay h2{font-size:1.8rem;margin:0}.game-overlay.win h2{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.game-overlay .ov-score{font-size:1.2rem;font-weight:700;margin:0}
.game-board ol{padding-left:0;list-style:none;margin:0 0 1rem}
.game-board li a{display:flex;align-items:center;gap:.6rem;padding:.4rem .2rem;color:var(--text);text-decoration:none!important;border-bottom:1px solid var(--border)}
.game-board li a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;background:var(--card-2)}
.rank.r1{background:#FACC15;color:#1F1A00}.rank.r2{background:#CBD5E1;color:#111}.rank.r3{background:#D97706;color:#fff}
.history{padding-left:1rem}
.game-how{margin-top:1rem}.game-how summary{cursor:pointer;font-weight:600}
.game-canvas{width:100%;max-width:420px;border-radius:14px;display:block;touch-action:none}
.game-buttons{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.dpad{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,48px);gap:6px;grid-template-areas:". u ." "l d r"}
.dpad button{border:0;border-radius:12px;background:var(--card-2);color:var(--text);font-size:1.4rem;cursor:pointer}
.dpad-up{grid-area:u}.dpad-left{grid-area:l}.dpad-down{grid-area:d}.dpad-right{grid-area:r}
@media (hover:hover) and (pointer:fine){.dpad{display:none}}
/* 2048 */
.g2048{--n:4;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;background:#1e2235;padding:8px;border-radius:14px;width:min(100%,400px);aspect-ratio:1;touch-action:none}
.tile{border-radius:10px;background:#2a2f47;display:grid;place-items:center;font-weight:800;font-size:clamp(1rem,5vw,1.8rem);color:#fff;transition:background .15s}
.t2{background:#3b3561}.t4{background:#4c3d82}.t8{background:#7c3aed}.t16{background:#9333ea}.t32{background:#c026d3}.t64{background:#db2777}.t128{background:#e11d48;font-size:clamp(.9rem,4.4vw,1.6rem)}
.t256{background:#ea580c}.t512{background:#d97706}.t1024{background:#ca8a04;font-size:clamp(.8rem,3.6vw,1.3rem)}.t2048,.t4096{background:linear-gradient(135deg,#f59e0b,#facc15);color:#1F1A00;box-shadow:0 0 20px #facc15}
/* Reaction / Simon */
.reaction-pad{width:100%;max-width:520px;height:300px;border:0;border-radius:20px;font:700 1.5rem var(--font);color:#fff;cursor:pointer;transition:background .15s}
.reaction-pad.wait{background:var(--card-2)}.reaction-pad.armed{background:#b91c1c}.reaction-pad.go{background:#16a34a}.reaction-pad.early{background:#9a3412}
.reaction-results{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.simon{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,340px);aspect-ratio:1}
.simon-pad{border:0;border-radius:24px;background:var(--c);opacity:.35;cursor:pointer;transition:opacity .1s,transform .1s}
.simon-pad.lit{opacity:1;transform:scale(.97);box-shadow:0 0 30px var(--c)}
.simon-center{position:absolute;inset:35%;border-radius:50%;border:6px solid var(--card);background:var(--bg-2);color:var(--text);font:800 1.3rem var(--font);cursor:pointer}
/* Memory */
.memory-grid{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:8px;width:min(100%,520px)}
.mcard{aspect-ratio:3/4;border:0;background:none;perspective:600px;cursor:pointer;padding:0}
.mcard-inner{position:relative;display:block;width:100%;height:100%;transition:transform .35s;transform-style:preserve-3d}
.mcard.flip .mcard-inner,.mcard.done .mcard-inner{transform:rotateY(180deg)}
.mface{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;display:grid;place-items:center;font-size:clamp(1.4rem,6vw,2.2rem)}
.mface.back{background:var(--grad)}.mface.front{background:var(--card-2);transform:rotateY(180deg);color:#F0ABFC}
.mcard.done .mface.front{background:rgba(34,197,94,.18);color:#86EFAC}
/* Minesweeper */
.mines{--w:9;display:grid;grid-template-columns:repeat(var(--w),1fr);gap:2px;width:min(100%,calc(var(--w) * 38px));touch-action:manipulation}
.mcell{aspect-ratio:1;border:0;border-radius:5px;background:#3b3f5c;color:#fff;font:700 clamp(.7rem,3vw,1rem) var(--font);cursor:pointer;padding:0}
.mcell.open{background:#1a1d2e}.mcell.boom{background:#7f1d1d}
.n1{color:#60a5fa}.n2{color:#4ade80}.n3{color:#f87171}.n4{color:#c084fc}.n5{color:#fb923c}.n6{color:#2dd4bf}.n7{color:#f472b6}.n8{color:#e5e7eb}
/* Sudoku */
.sudoku{display:grid;grid-template-columns:repeat(9,1fr);width:min(100%,440px);aspect-ratio:1;border:2px solid #a78bfa;border-radius:10px;overflow:hidden}
.scell{border:0;border-right:1px solid #2e3350;border-bottom:1px solid #2e3350;background:#141729;color:#c4b5fd;font:600 clamp(1rem,4.5vw,1.4rem) var(--font);cursor:pointer;padding:0}
.scell:nth-child(9n+3),.scell:nth-child(9n+6){border-right:2px solid #a78bfa}
.scell:nth-child(n+19):nth-child(-n+27),.scell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #a78bfa}
.scell.given{color:#fff;font-weight:800}.scell.unit{background:#1b1f38}.scell.same{background:#312e81}.scell.sel{background:#4c1d95}.scell.bad{color:#f87171}
.numpad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:min(100%,440px)}
.numpad .btn{padding:.6rem 0}
/* Sliding puzzle */
.slide-grid{--n:4;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px;width:min(100%,400px);aspect-ratio:1}
.slide-tile{border:0;border-radius:12px;background:var(--grad);color:#fff;font:800 clamp(1rem,5vw,1.8rem) var(--font);cursor:pointer;transition:transform .1s}
.slide-tile:active{transform:scale(.95)}.slide-tile.ok{background:linear-gradient(135deg,#059669,#10b981)}.slide-tile.empty{background:transparent;cursor:default}
/* Guess / quiz / math / stroop */
.guess-box,.quiz-box,.math-box,.stroop{width:min(100%,460px);margin:0}
.guess-log{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0 0}
.guess-log .higher{color:#93c5fd}.guess-log .lower{color:#fca5a5}.guess-log .ok{color:#86efac}
.quiz-timer{height:6px;background:var(--bg-2);border-radius:3px;overflow:hidden;margin:.5rem 0}.quiz-timer i{display:block;height:100%;background:var(--grad);transition:width .1s linear}
.quiz-q{margin:.8rem 0 1rem}.quiz-answers{display:grid;gap:.5rem}
.quiz-a{justify-content:flex-start;text-align:left;border-radius:14px}.quiz-a.ok{background:rgba(34,197,94,.25);border-color:#22c55e}.quiz-a.no{background:rgba(239,68,68,.25);border-color:#ef4444}
.math-q{font:800 clamp(1.8rem,8vw,2.6rem) var(--font);text-align:center;margin:1rem 0 1.2rem}
.stroop-word{font:900 clamp(2.2rem,10vw,3.4rem) var(--font);text-align:center;margin:1.2rem 0;letter-spacing:.02em}
.stroop-btns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.flash-ok{animation:fok .35s}.flash-no{animation:fno .35s}
@keyframes fok{50%{box-shadow:0 0 0 4px #22c55e}}@keyframes fno{50%{box-shadow:0 0 0 4px #ef4444}}
/* Word guess / hangman */
.wg-board{display:grid;gap:6px}
.wg-row{display:grid;grid-template-columns:repeat(5,52px);gap:6px}
.wg-row.shake{animation:shake .35s}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.wg-cell{height:52px;border:2px solid #343a5a;border-radius:10px;display:grid;place-items:center;font:800 1.5rem var(--font);text-transform:uppercase;transition:background .3s,border-color .3s}
.wg-cell.filled{border-color:#7c7fa8}.wg-cell.ok,.wg-key.ok{background:#16a34a;border-color:#16a34a}.wg-cell.near,.wg-key.near{background:#ca8a04;border-color:#ca8a04}.wg-cell.no,.wg-key.no{background:#2a2f47;border-color:#2a2f47;color:#7c7fa8}
.wg-keys{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:520px}
.wg-key{min-width:34px;height:44px;border:0;border-radius:8px;background:#3b3f5c;color:#fff;font:700 .95rem var(--font);text-transform:uppercase;cursor:pointer;padding:0 .4rem}
.wg-key.wide{min-width:58px}.wg-key.primary{background:var(--grad)}
.hang-svg{width:160px;height:200px;stroke:#c4b5fd;stroke-width:4;fill:none;stroke-linecap:round}
.hang-word{font:800 clamp(1.4rem,6vw,2rem) var(--font);letter-spacing:.15em;text-transform:uppercase;text-align:center}
/* TTT / RPS / Connect4 */
.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,330px);aspect-ratio:1}
.ttt-cell{border:0;border-radius:16px;background:var(--card-2);font:900 clamp(2.4rem,12vw,3.6rem) var(--font);cursor:pointer;color:#fff}
.ttt-cell.pX{color:#c084fc}.ttt-cell.pO{color:#60a5fa}.ttt-cell.win{background:rgba(250,204,21,.25)}
.rps-arena{display:flex;align-items:center;justify-content:center;gap:1.5rem;min-height:120px}
.rps-hand{width:110px;height:110px;border-radius:50%;background:var(--card-2);display:grid;place-items:center;font-size:3.2rem;color:#c084fc}
.rps-hand.ai{color:#60a5fa}.rps-hand.pop{animation:pop .35s}
.rps-vs{font-size:1.2rem;color:var(--muted)}
.rps-btns{display:flex;gap:.8rem}
.rps-btn{width:96px;height:96px;border:0;border-radius:22px;background:var(--grad);color:#fff;font-size:2.2rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem}
.rps-btn small{font-size:.72rem}
.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:#1d4ed8;padding:8px;border-radius:16px;width:min(100%,460px)}
.c4-hole{aspect-ratio:1;border-radius:50%;border:0;background:#0b1024;cursor:pointer;padding:0;transition:background .2s}
.c4-hole.p1{background:radial-gradient(circle at 35% 35%,#fca5a5,#dc2626)}.c4-hole.p2{background:radial-gradient(circle at 35% 35%,#fde68a,#eab308)}
.c4-hole.win{box-shadow:0 0 0 4px #fff inset}
/* Chess / checkers */
.board8{display:grid;grid-template-columns:repeat(8,1fr);width:min(100%,520px);aspect-ratio:1;border-radius:10px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.sq{position:relative;border:0;padding:0;display:grid;place-items:center;cursor:pointer;font-size:clamp(1.5rem,7.5vw,2.6rem);line-height:1}
.sq.light{background:#e9e3f6}.sq.dark{background:#8b6fc9}
.chess .sq{color:#111}.chess .sq.wp{color:#fff;text-shadow:0 0 2px #000,0 0 1px #000,0 1px 2px #000}
.sq.sel{box-shadow:inset 0 0 0 4px #facc15}.sq.last{background-image:linear-gradient(rgba(250,204,21,.35),rgba(250,204,21,.35))}
.sq.target::after{content:'';width:28%;height:28%;border-radius:50%;background:rgba(17,24,39,.45);position:absolute}
.sq.capture::after{width:86%;height:86%;background:transparent;border:5px solid rgba(17,24,39,.45)}
.sq.check{background:radial-gradient(circle,#ef4444,#7f1d1d)!important}
.sq[data-rank]::before{content:attr(data-rank);position:absolute;top:2px;left:3px;font-size:.6rem;color:#4c1d95}
.sq[data-file]::before{content:attr(data-file);position:absolute;bottom:1px;right:3px;font-size:.6rem;color:#4c1d95}
.sq[data-rank][data-file]::before{content:attr(data-rank) ' ' attr(data-file)}
.checkers .sq.light{background:#ede9fe}.checkers .sq.dark{background:#5b21b6}
.checkers .sq.can{box-shadow:inset 0 0 0 3px rgba(250,204,21,.6)}
.piece{width:78%;height:78%;border-radius:50%;display:grid;place-items:center;font-size:clamp(.8rem,3.4vw,1.2rem)}
.piece.w{background:radial-gradient(circle at 35% 35%,#fff,#cbd5e1);box-shadow:0 3px 0 #94a3b8;color:#b45309}
.piece.b{background:radial-gradient(circle at 35% 35%,#4b5563,#111827);box-shadow:0 3px 0 #000;color:#facc15}
.promo-pick{display:flex;gap:.4rem}.promo-pick .btn{font-size:2rem;padding:.2rem .7rem}
@media (max-width:1000px){.game-shell{grid-template-columns:1fr}}
@media (max-width:420px){.wg-row{grid-template-columns:repeat(5,46px)}.wg-cell{height:46px}.wg-key{min-width:28px;height:42px;font-size:.85rem}.game-stage{padding:.6rem}}
/* Entertainment */
.fun-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.9rem;margin-bottom:1rem}
.fact-card{align-items:flex-start}.fact-card i{color:#FACC15}.fact-card p{margin:.2rem 0 0}
.zodiac-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.zodiac-card{text-align:center}.zodiac-card h2{font-size:1.6rem;margin:.3rem 0}
.big-z{font-size:3.4rem;display:block;color:var(--accent);margin-bottom:.4rem}
.el-fire .big-z{color:#f97316}.el-water .big-z{color:#38bdf8}.el-air .big-z{color:#a5b4fc}.el-earth .big-z{color:#84cc16}
.notice-ent{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3);color:#d8b4fe}
.horo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.horo.mine{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.horo b i{color:var(--accent)}
.name-card h2 small{font-size:.8rem;font-weight:400}
.random-name{text-align:center;margin:1rem 0}.random-name b{font-size:2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.compat-result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.compat-ring{--p:50;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#ec4899 calc(var(--p) * 1%),var(--bg-2) 0);position:relative}
.compat-ring::before{content:'';position:absolute;inset:12px;border-radius:50%;background:var(--card)}
.compat-ring b{position:relative;font-size:1.9rem}
.random-card{text-align:center}.random-card .chips{justify-content:center;flex-wrap:wrap}
.random-card .chip{cursor:pointer;font:inherit}
.random-text{min-height:120px;display:flex;flex-direction:column;justify-content:center;font-size:1.3rem;font-weight:600;padding:1rem}
.random-text.pop,.rng-out.pop{animation:rise .35s}
.quiz-form fieldset{border:1px solid var(--border)}.quiz-form legend{padding:0 .4rem;font-weight:600}
.quiz-opt{display:flex;gap:.6rem;align-items:center;padding:.55rem .7rem;border-radius:10px;cursor:pointer;margin:.2rem 0}
.quiz-opt:hover{background:var(--card-2)}.quiz-opt input{accent-color:var(--accent);width:18px;height:18px}
.quiz-opt:has(input:checked){background:rgba(139,92,246,.18)}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.tool-out .big{font-size:1.3rem;font-weight:800}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;text-align:center;margin-top:.6rem}
.countdown div{background:var(--bg-2);border-radius:12px;padding:.6rem 0}.countdown b{display:block;font-size:1.5rem}
.rng-out{font:900 3.2rem var(--font);text-align:center;margin-top:.8rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Phase 7 ---------- */
.site-footer{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 1rem 2rem;color:var(--muted);font-size:.85rem;text-align:center;position:relative;z-index:1}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;justify-content:center}
.site-footer a{color:var(--muted)}.site-footer a:hover{color:var(--text)}
.site-footer .social{display:flex;gap:.7rem;font-size:1.3rem}
@media (max-width:860px){.app .site-footer{padding-bottom:6rem}}
.static-page{max-width:760px;margin:0 auto}
.prose{line-height:1.75}.prose h2{margin:1.6rem 0 .6rem}.prose h3{margin:1.2rem 0 .4rem}.prose ul,.prose ol{padding-left:1.3rem}.prose li{margin:.25rem 0}

/* Phase 8: announcements and notification centre */
.announcement{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1rem;margin-bottom:1rem;border-radius:var(--radius);border:1px solid rgba(168,85,247,.4);background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(59,130,246,.12))}
.announcement>i{font-size:1.4rem;color:var(--accent)}.announcement div{flex:1}.announcement p{margin:.2rem 0 0;color:var(--muted);font-size:.9rem}
.announcement[hidden]{display:none}
.ann-close{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.page-head .row-actions{display:flex;gap:.4rem}
.notif-list{list-style:none;padding:0;overflow:hidden}
.notif-list li a{display:flex;gap:.8rem;align-items:center;padding:.85rem 1rem;color:var(--text);border-bottom:1px solid var(--border)}
.notif-list li:last-child a{border-bottom:0}
.notif-list li a>i{font-size:1.3rem;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);color:var(--accent);flex:none}
.notif-list li a span{display:flex;flex-direction:column;gap:.15rem}
.notif-list li.unread a{background:rgba(139,92,246,.08)}.notif-list li.unread a span{font-weight:600}
.notif-list li.unread a>i{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
.switch-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--border)}
.switch-row input{width:20px;height:20px;accent-color:var(--accent)}
.tabs{display:flex;gap:.3rem;overflow-x:auto;margin:0 0 1rem}
.tabs a{padding:.45rem .9rem;border-radius:999px;color:var(--muted);border:1px solid var(--border);font-size:.88rem;white-space:nowrap}
.tabs a.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-color:transparent}
.pager a{padding:.35rem .7rem;border-radius:8px;border:1px solid var(--border);color:var(--muted)}.pager a.active{background:var(--accent);color:#fff;border-color:transparent}