/* ═══ TRUSTIES GAME STYLES ═══ */

:root {
    --bg:       #050507;
    --surface:  #0C0C10;
    --card:     #111116;
    --border:   rgba(255,255,255,0.06);
    --border2:  rgba(255,255,255,0.12);
    --text:     #EEEEF5;
    --muted:    rgba(238,238,245,0.35);
    --muted2:   rgba(238,238,245,0.55);
    --green:    #00F5A0;
    --green-d:  rgba(0,245,160,0.12);
    --red:      #FF3D6B;
    --red-d:    rgba(255,61,107,0.12);
    --blue:     #4D9FFF;
    --blue-d:   rgba(77,159,255,0.12);
    --accent:   #FFFFFF;
}

* { margin:0; padding:0; box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none; user-select:none; }

html,body { width:100%; height:100%; overflow:hidden;
    background:var(--bg); color:var(--text);
    font-family:'DM Sans', sans-serif;
    touch-action:none; }

/* ── NOISE LAYER ── */
body::after {
    content:'';
    position:fixed; inset:0; pointer-events:none; z-index:0;
    opacity:.025;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════════════════════════
   MAIN SCREEN
══════════════════════════════ */
#main {
    position:fixed; inset:0; z-index:10;
    display:flex; flex-direction:column;
    padding:0 20px;
}

/* ── TOPBAR ── */
.topbar {
    display:flex; align-items:center;
    justify-content:space-between;
    padding:12px 0 16px;
}

.brand {
    font-family:'DM Sans', sans-serif;
    font-size:28px; font-weight:800;
    letter-spacing:-.03em;
    color:var(--muted2);
}

.topbar-right {
    display:flex; align-items:center; gap:8px;
}

.lang-btn {
    background:var(--card);
    border:1px solid var(--border2);
    border-radius:100px;
    padding:8px 12px;
    font-size:12px; font-weight:600;
    color:var(--muted2);
    cursor:pointer;
    transition:all .2s;
}
.lang-btn:hover { border-color:var(--green); color:var(--text); }

.balance-pill {
    display:flex; align-items:center; gap:8px;
    background:var(--card);
    border:1px solid var(--border2);
    border-radius:100px;
    padding:10px 16px 10px 12px;
}

.balance-pill .coin-icon {
    font-size:16px;
    filter: drop-shadow(0 0 4px rgba(255,193,7,0.5));
}

.balance-pill .num {
    font-family:'DM Sans', sans-serif;
    font-size:15px; font-weight:700;
    color:var(--text); letter-spacing:.02em;
}

/* ── STATS ── */
.stats {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:8px; margin-bottom:24px;
}

.stat {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px 10px;
    text-align:center;
}

.stat .s-label {
    font-size:9px; font-weight:500;
    letter-spacing:.18em; text-transform:uppercase;
    color:var(--muted); margin-bottom:8px;
}

.stat .s-val {
    font-family:'DM Sans', sans-serif;
    font-size:24px; font-weight:800;
    color:var(--text);
}

.stat .s-val.g { color:var(--green); }
.stat .s-val.r { color:var(--red); }

/* ── PLAY AREA ── */
.play-area {
    flex:1; display:flex;
    flex-direction:column;
    align-items:center; justify-content:center;
    gap:20px;
}

#playBtn {
    width:180px; height:180px;
    border-radius:50%;
    background:var(--card);
    border:1px solid var(--border2);
    cursor:pointer;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:6px;
    position:relative;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),
                box-shadow .3s;
    box-shadow:0 0 0 1px rgba(255,255,255,0.04),
               0 40px 80px rgba(0,0,0,.6);
}

#playBtn::before {
    content:'';
    position:absolute; inset:-1px;
    border-radius:50%;
    background:conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--green) 60deg,
        transparent 120deg,
        transparent 180deg,
        var(--blue) 240deg,
        transparent 300deg,
        transparent 360deg
    );
    mask:radial-gradient(circle, transparent 86px, black 87px);
    -webkit-mask:radial-gradient(circle, transparent 86px, black 87px);
    animation:spin 4s linear infinite;
}

@keyframes spin { to { transform:rotate(360deg); } }

#playBtn:active { transform:scale(.94); }

#playBtn.revenge::before {
    background:conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--red) 60deg,
        transparent 120deg,
        transparent 360deg
    );
}

.p-icon { font-size:32px; }
.p-text {
    font-family:'DM Sans', sans-serif;
    font-size:18px; font-weight:800;
    letter-spacing:.12em; color:var(--text);
}
.p-sub {
    font-size:11px; color:var(--muted);
    letter-spacing:.08em;
}

#playBtn.revenge .p-text { color:var(--red); }

.play-caption {
    font-size:12px; color:var(--muted);
    letter-spacing:.04em; text-align:center;
}

/* ── FEED ── */
.feed-wrap { padding-bottom:36px; }

.feed-head {
    display:flex; align-items:center;
    gap:8px; margin-bottom:10px;
}

.live-dot {
    width:5px; height:5px; border-radius:50%;
    background:var(--green);
    box-shadow:0 0 6px var(--green);
    animation:blink 2s ease infinite;
}

@keyframes blink {
    0%,100% { opacity:1; } 50% { opacity:.2; }
}

.feed-head span {
    font-size:10px; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase;
    color:var(--muted);
}

.feed-list {
    display:flex; flex-direction:column;
    gap:5px; overflow:hidden;
}

.feed-row {
    display:flex; align-items:center;
    justify-content:space-between;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 14px;
    animation:fadeDown .35s ease;
}

@keyframes fadeDown {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:translateY(0); }
}

.feed-row .fn { font-size:13px; color:var(--text); font-weight:500; }
.feed-row .fd { font-size:13px; color:var(--muted); }
.feed-row .fa { font-size:13px; font-weight:700; }
.feed-row .fa.p { color:var(--green); }
.feed-row .fa.n { color:var(--red); }

/* ══════════════════════════════
   OVERLAY BASE
══════════════════════════════ */
.layer {
    position:fixed; inset:0; z-index:50;
    display:none;
    flex-direction:column;
    align-items:center; justify-content:center;
    padding:20px;
    background:rgba(5,5,7,.97);
    backdrop-filter:blur(40px);
}
.layer.on {
    display:flex;
    animation:layerIn .3s cubic-bezier(.25,.8,.25,1);
}
@keyframes layerIn {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════
   MATCHMAKING SEARCH
══════════════════════════════ */
.mm-container {
    display:flex; flex-direction:column;
    align-items:center; width:100%; max-width:360px;
}

/* Radar animation */
.mm-radar {
    width:160px; height:160px;
    position:relative;
    margin-bottom:28px;
}

.mm-radar-ring {
    position:absolute; border-radius:50%;
    border:1px solid rgba(0,245,160,.15);
}
.mm-radar-ring.r1 { inset:0; }
.mm-radar-ring.r2 { inset:20px; border-color:rgba(0,245,160,.25); }
.mm-radar-ring.r3 { inset:40px; border-color:rgba(0,245,160,.35); }

.mm-radar-sweep {
    position:absolute; inset:0;
    border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0deg, rgba(0,245,160,.2) 60deg, transparent 120deg);
    animation:radarSweep 2.5s linear infinite;
}

.mm-radar-center {
    position:absolute;
    inset:40px;
    border-radius:50%;
    background:rgba(0,245,160,.08);
    border:2px solid rgba(0,245,160,.4);
    display:flex; align-items:center; justify-content:center;
    font-size:36px;
    z-index:2;
    animation:centerPulse 2s ease-in-out infinite;
}

@keyframes radarSweep {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}
@keyframes centerPulse {
    0%, 100% { transform:scale(1); box-shadow:0 0 0 0 rgba(0,245,160,.3); }
    50%      { transform:scale(1.05); box-shadow:0 0 20px 4px rgba(0,245,160,.15); }
}

/* Title & status */
.mm-title {
    font-family:'DM Sans', sans-serif;
    font-size:24px; font-weight:800;
    margin-bottom:6px; text-align:center;
}
.mm-status {
    font-size:13px; color:var(--muted);
    text-align:center; margin-bottom:24px;
    min-height:18px;
    transition:opacity .3s;
}

/* Info row */
.mm-info-row {
    display:flex; gap:8px; width:100%;
    margin-bottom:20px;
}
.mm-info-item {
    flex:1;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 8px;
    text-align:center;
}
.mm-info-icon { font-size:18px; margin-bottom:4px; }
.mm-info-val {
    font-size:20px; font-weight:800;
    color:var(--green);
    margin-bottom:2px;
}
.mm-info-label {
    font-size:10px; color:var(--muted);
    text-transform:uppercase; letter-spacing:.06em;
}

/* Progress bar */
.mm-progress {
    width:100%; height:4px;
    background:rgba(255,255,255,.06);
    border-radius:4px;
    overflow:hidden;
    margin-bottom:20px;
}
.mm-progress-bar {
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--green), #00d4ff);
    border-radius:4px;
    transition:width .5s linear;
}

/* Cancel button */
.mm-cancel {
    background:none;
    border:1px solid var(--border2);
    border-radius:10px;
    padding:10px 32px;
    font-family:inherit;
    font-size:13px; font-weight:600;
    color:var(--muted2);
    cursor:pointer;
    transition:all .15s;
}
.mm-cancel:hover {
    border-color:var(--red);
    color:var(--red);
    background:rgba(255,61,107,.06);
}

/* Found animation */
.mm-container.found .mm-radar-sweep { animation:none; background:rgba(0,245,160,.15); }
.mm-container.found .mm-radar-center {
    animation:foundBounce .5s ease;
    border-color:var(--green);
    background:rgba(0,245,160,.15);
}
.mm-container.found .mm-title { color:var(--green); }
@keyframes foundBounce {
    0%   { transform:scale(1); }
    40%  { transform:scale(1.25); }
    100% { transform:scale(1); }
}

/* ══════════════════════════════
   MATCH
══════════════════════════════ */
.match-inner { width:100%; max-width:420px; }

.pot-tag {
    display:flex; align-items:center; justify-content:center;
    gap:8px;
    font-family:'DM Sans', sans-serif;
    font-size:13px; font-weight:700;
    letter-spacing:.08em;
    color:var(--muted2);
    margin-bottom:20px;
}
.pot-tag b { font-size:18px; color:var(--text); }

.opp-card {
    background:var(--card);
    border:1px solid var(--border2);
    border-radius:20px;
    padding:24px;
    margin-bottom:20px;
    display:flex; align-items:center; gap:18px;
}

.opp-avi {
    width:60px; height:60px;
    border-radius:50%;
    background:var(--surface);
    border:1px solid var(--border2);
    display:flex; align-items:center; justify-content:center;
    font-size:30px; flex-shrink:0;
}

.opp-info { flex:1; min-width:0; }

.opp-name {
    font-family:'DM Sans', sans-serif;
    font-size:22px; font-weight:800;
    margin-bottom:6px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
}

.opp-meta {
    display:flex; gap:12px;
    font-size:12px; color:var(--muted);
    margin-bottom:10px;
}

.trust-track {
    height:3px; background:var(--border);
    border-radius:3px; overflow:hidden;
}

.trust-fill {
    height:100%; border-radius:3px;
    background:var(--green);
    transition:width 1s ease;
}

/* timer */
.timer-bar {
    display:flex; align-items:center; gap:14px;
    margin-bottom:20px;
}

.t-num {
    font-family:'DM Sans', sans-serif;
    font-size:56px; font-weight:800;
    line-height:1; min-width:52px; text-align:center;
    transition:color .3s;
    color:var(--text);
}
.t-num.u { color:var(--red); }

.t-track {
    flex:1; height:4px;
    background:var(--border);
    border-radius:4px; overflow:hidden;
}

.t-fill {
    height:100%; border-radius:4px;
    background:var(--text);
    transition:width 1s linear, background .3s;
}
.t-fill.u { background:var(--red); }

/* choice btns */
.choices {
    display:grid; grid-template-columns:1fr 1fr;
    gap:10px; margin-bottom:14px;
}

.ch {
    border-radius:18px;
    padding:26px 14px;
    text-align:center;
    cursor:pointer;
    border:1px solid var(--border);
    background:var(--card);
    transition:all .2s cubic-bezier(.25,.8,.25,1);
    position:relative; overflow:hidden;
}

.ch::after {
    content:'';
    position:absolute; inset:0; opacity:0;
    transition:opacity .2s; border-radius:18px;
}

.ch.s::after { background:radial-gradient(circle at 50% 0%,rgba(0,245,160,.18),transparent 70%); }
.ch.b::after { background:radial-gradient(circle at 50% 0%,rgba(255,61,107,.18),transparent 70%); }

.ch:active { transform:scale(.96); }

.ch.sel.s { border-color:var(--green); box-shadow:0 0 0 1px var(--green),0 0 28px rgba(0,245,160,.2); }
.ch.sel.s::after { opacity:1; }
.ch.sel.b { border-color:var(--red);   box-shadow:0 0 0 1px var(--red),  0 0 28px rgba(255,61,107,.2); }
.ch.sel.b::after { opacity:1; }

.ch .ci { font-size:36px; margin-bottom:10px; display:block; }

.ch .cl {
    font-family:'DM Sans', sans-serif;
    font-size:17px; font-weight:800;
    letter-spacing:.06em; margin-bottom:4px;
}

.ch.s .cl { color:var(--green); }
.ch.b .cl { color:var(--red); }

.ch .cr { font-size:12px; color:var(--muted); }

.match-note {
    text-align:center; font-size:11px;
    color:var(--muted); letter-spacing:.03em;
}
.match-note span { color:var(--red); }

/* ══════════════════════════════
   RESULT
══════════════════════════════ */
.result-inner {
    width:100%; max-width:420px;
    text-align:center;
}

.r-tag {
    display:inline-block;
    font-size:10px; font-weight:700;
    letter-spacing:.2em; text-transform:uppercase;
    padding:7px 18px; border-radius:100px;
    margin-bottom:24px;
}
.r-tag.w { background:var(--green-d); color:var(--green); border:1px solid rgba(0,245,160,.25); }
.r-tag.l { background:var(--red-d);   color:var(--red);   border:1px solid rgba(255,61,107,.25); }
.r-tag.h { background:rgba(255,255,255,.05); color:var(--muted2); border:1px solid var(--border2); }

.r-title {
    font-family:'DM Sans', sans-serif;
    font-size:32px; font-weight:800;
    line-height:1.1; margin-bottom:28px;
}

.duel {
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; gap:10px; margin-bottom:28px;
}

.dc {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px; padding:18px 10px;
}

.dc .dcn { font-size:11px; color:var(--muted); margin-bottom:10px; letter-spacing:.08em; }
.dc .dci { font-size:32px; margin-bottom:6px; }
.dc .dcl { font-size:13px; font-weight:700; }
.dc .dcl.s { color:var(--green); }
.dc .dcl.b { color:var(--red); }

.d-vs {
    font-family:'DM Sans', sans-serif;
    font-size:14px; font-weight:800;
    color:var(--muted); letter-spacing:.08em;
}

.r-amount {
    font-family:'DM Sans', sans-serif;
    font-size:80px; font-weight:800;
    line-height:1; margin-bottom:8px;
}
.r-amount.p { color:var(--green); }
.r-amount.n { color:var(--red); }
.r-amount.z { color:var(--muted2); }

.r-sub { font-size:13px; color:var(--muted); margin-bottom:32px; }

.again {
    width:100%; padding:18px;
    border-radius:14px; border:none; cursor:pointer;
    font-family:'DM Sans', sans-serif;
    font-size:16px; font-weight:800;
    letter-spacing:.06em;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),
                box-shadow .3s;
}

.again:active { transform:scale(.97); }

.again.n {
    background:var(--text); color:var(--bg);
    box-shadow:0 8px 32px rgba(255,255,255,.12);
}

.again.r {
    background:var(--red); color:#fff;
    box-shadow:0 8px 32px rgba(255,61,107,.4);
    animation:rPulse 2s ease infinite;
}

@keyframes rPulse {
    0%,100% { box-shadow:0 8px 32px rgba(255,61,107,.4); }
    50%      { box-shadow:0 8px 48px rgba(255,61,107,.7); }
}

/* ══════════════════════════════
   WELCOME BONUS
══════════════════════════════ */
.welcome-overlay {
    position:fixed; inset:0; z-index:300;
    background:rgba(5,5,7,0.95);
    backdrop-filter:blur(30px);
    display:none; align-items:center; justify-content:center;
    padding:20px;
    animation:fadeIn .4s ease;
}

.welcome-card {
    width:100%; max-width:400px;
    background:linear-gradient(145deg, var(--card), var(--surface));
    border:1px solid var(--border2);
    border-radius:28px;
    padding:40px 28px;
    text-align:center;
    animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1);
    position:relative; overflow:hidden;
}

.welcome-card::before {
    content:''; position:absolute;
    top:-50%; left:-50%; width:200%; height:200%;
    background:radial-gradient(circle, rgba(0,245,160,0.1) 0%, transparent 70%);
    animation:spin 8s linear infinite;
}

@keyframes scaleIn {
    from { opacity:0; transform:scale(0.8); }
    to   { opacity:1; transform:scale(1); }
}

.welcome-icon {
    font-size:80px; margin-bottom:16px;
    animation:bounce 2s ease infinite;
    position:relative; z-index:1;
}

@keyframes bounce {
    0%, 100% { transform:translateY(0); }
    50% { transform:translateY(-10px); }
}

.welcome-title {
    font-family:'DM Sans', sans-serif;
    font-size:32px; font-weight:800;
    margin-bottom:8px; position:relative; z-index:1;
}

.welcome-subtitle {
    font-size:14px; color:var(--muted2);
    margin-bottom:32px; position:relative; z-index:1;
}

.bonus-amount {
    background:var(--card);
    border:2px solid var(--green);
    border-radius:20px;
    padding:24px;
    margin-bottom:28px;
    box-shadow:0 0 40px rgba(0,245,160,0.2);
    position:relative; z-index:1;
}

.bonus-coins {
    font-family:'DM Sans', sans-serif;
    font-size:48px; font-weight:800;
    color:var(--green);
    margin-bottom:8px;
    text-shadow:0 0 20px rgba(0,245,160,0.5);
}

.bonus-label {
    font-size:13px; color:var(--muted);
    letter-spacing:.05em;
}

.welcome-btn {
    width:100%; padding:18px;
    border-radius:16px; border:none;
    background:linear-gradient(135deg, var(--green), #00C97F);
    color:#000; font-family:'DM Sans', sans-serif;
    font-size:16px; font-weight:800;
    cursor:pointer;
    box-shadow:0 8px 32px rgba(0,245,160,0.4);
    transition:transform .2s cubic-bezier(.34,1.56,.64,1);
    margin-bottom:16px;
    position:relative; z-index:1;
}

.welcome-btn:active { transform:scale(.97); }
.welcome-btn span { font-size:20px; margin-right:8px; }

.welcome-note {
    font-size:12px; color:var(--muted);
    position:relative; z-index:1;
}

/* ══════════════════════════════
   SHOP MODAL
══════════════════════════════ */
.shop-overlay {
    position:fixed; inset:0; z-index:250;
    background:rgba(5,5,7,0.92);
    backdrop-filter:blur(24px);
    display:none;
    align-items:center; justify-content:center;
    padding:20px;
    animation:fadeIn .3s ease;
}
.shop-overlay.show { display:flex; }

.shop-close {
    position:absolute; top:20px; right:20px;
    width:40px; height:40px;
    border-radius:50%;
    background:var(--card);
    border:1px solid var(--border2);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; color:var(--text);
    cursor:pointer;
    transition:all .2s;
}
.shop-close:hover { background:var(--surface); transform:rotate(90deg); }

.shop-card {
    width:100%; max-width:440px;
    background:var(--card);
    border:1px solid var(--border2);
    border-radius:24px;
    padding:32px 24px;
    animation:slideUp .4s cubic-bezier(.25,.8,.25,1);
}

@keyframes slideUp {
    from { opacity:0; transform:translateY(40px); }
    to   { opacity:1; transform:translateY(0); }
}

.shop-header { text-align:center; margin-bottom:28px; }
.shop-icon { font-size:56px; margin-bottom:12px; }
.shop-title {
    font-family:'DM Sans', sans-serif;
    font-size:26px; font-weight:800;
    margin-bottom:6px;
}
.shop-subtitle { font-size:13px; color:var(--muted2); }

.shop-packages { display:grid; gap:12px; margin-bottom:28px; }

.package {
    background:var(--surface);
    border:2px solid var(--border);
    border-radius:18px;
    padding:20px;
    cursor:pointer;
    transition:all .25s cubic-bezier(.25,.8,.25,1);
    position:relative; overflow:hidden;
}

.package::before {
    content:''; position:absolute;
    inset:0; opacity:0;
    background:radial-gradient(circle at 50% 0%, var(--green-d), transparent 70%);
    transition:opacity .25s;
}

.package:hover { border-color:var(--green); transform:translateY(-2px); }
.package:hover::before { opacity:1; }

.package.hot {
    border-color:var(--blue);
    background:linear-gradient(145deg, var(--surface), rgba(77,159,255,0.05));
}
.package.hot::before {
    background:radial-gradient(circle at 50% 0%, var(--blue-d), transparent 70%);
}
.package.hot:hover { border-color:var(--blue); }

.pkg-badge {
    position:absolute; top:12px; right:12px;
    font-size:10px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    background:var(--green-d);
    color:var(--green);
    border:1px solid rgba(0,245,160,0.3);
    padding:4px 10px; border-radius:100px;
}
.pkg-badge.hot-badge {
    background:var(--blue-d);
    color:var(--blue);
    border-color:rgba(77,159,255,0.3);
}

.pkg-coins {
    font-family:'DM Sans', sans-serif;
    font-size:32px; font-weight:800;
    margin-bottom:8px;
    position:relative; z-index:1;
}
.pkg-price {
    font-size:18px; font-weight:700;
    color:var(--text);
    margin-bottom:4px;
    position:relative; z-index:1;
}
.pkg-bonus {
    font-size:12px; color:var(--muted);
    position:relative; z-index:1;
}

.shop-methods { margin-bottom:20px; }

.method-title {
    font-size:12px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); margin-bottom:12px;
}

.methods-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.method {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    display:flex; flex-direction:column;
    align-items:center; gap:6px;
    cursor:pointer;
    transition:all .2s;
}
.method.active {
    border-color:var(--green);
    background:rgba(0,245,160,0.05);
}
.method:hover { border-color:var(--border2); }
.method img { width:24px; height:24px; border-radius:50%; }
.method span { font-size:11px; font-weight:600; color:var(--text); }

.shop-note {
    text-align:center;
    font-size:12px; color:var(--muted);
    padding:12px;
    background:var(--surface);
    border-radius:12px;
}

/* ══════════════════════════════
   POPUP SHEET
══════════════════════════════ */
.popup-bg {
    position:fixed; inset:0; z-index:200;
    background:rgba(5,5,7,.88);
    backdrop-filter:blur(20px);
    display:none; align-items:flex-end; padding:16px;
}
.popup-bg.on {
    display:flex;
    animation:fadeIn .25s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.sheet {
    width:100%; max-width:500px; margin:0 auto;
    background:var(--card);
    border:1px solid var(--border2);
    border-radius:24px;
    padding:28px 24px 32px;
    animation:sheetUp .35s cubic-bezier(.25,.8,.25,1);
}
@keyframes sheetUp {
    from { transform:translateY(80px); opacity:0; }
    to   { transform:translateY(0);    opacity:1; }
}

.sh-icon { font-size:44px; text-align:center; margin-bottom:14px; }
.sh-title {
    font-family:'DM Sans', sans-serif;
    font-size:22px; font-weight:800;
    text-align:center; margin-bottom:10px;
}
.sh-msg {
    font-size:14px; color:var(--muted2);
    text-align:center; line-height:1.65; margin-bottom:24px;
}
.sh-btn {
    width:100%; padding:16px; border-radius:12px;
    border:none; cursor:pointer;
    font-family:'DM Sans', sans-serif;
    font-size:15px; font-weight:800;
    letter-spacing:.05em;
}
.sh-btn.def { background:var(--text); color:var(--bg); }
.sh-btn.danger { background:var(--red); color:#fff; }

/* ── COIN PARTICLE ── */
.coin {
    position:fixed; pointer-events:none; z-index:999;
    font-size:20px;
    animation:coinUp 1.1s ease-out forwards;
}
@keyframes coinUp {
    0%   { opacity:1; transform:translateY(0) scale(1) rotate(0deg); }
    100% { opacity:0; transform:translateY(-180px) scale(0.5) rotate(540deg); }
}

/* ══════════════════════════════
   NEAR-WIN ANIMATION
══════════════════════════════ */
.near-win-overlay {
    position:fixed; inset:0; z-index:400;
    background:rgba(5,5,7,.97);
    display:flex; align-items:center; justify-content:center;
    animation:fadeIn .3s ease;
}

.nw-step {
    font-family:'DM Sans', sans-serif;
    font-size:28px; font-weight:800;
    text-align:center;
    transition:all .3s;
}

.nw-step.nw-green {
    color:var(--green);
    text-shadow:0 0 40px rgba(0,245,160,0.6);
}

.nw-step.nw-red {
    color:var(--red);
    text-shadow:0 0 40px rgba(255,61,107,0.6);
}

.near-win-overlay.nw-glitch {
    animation:glitch .3s ease-in-out;
}

@keyframes glitch {
    0%   { transform:translate(0); filter:hue-rotate(0deg); }
    20%  { transform:translate(-5px, 3px); filter:hue-rotate(90deg); }
    40%  { transform:translate(5px, -3px); filter:hue-rotate(180deg); }
    60%  { transform:translate(-3px, -5px); filter:hue-rotate(270deg); }
    80%  { transform:translate(3px, 5px); filter:hue-rotate(360deg); }
    100% { transform:translate(0); filter:hue-rotate(0deg); }
}

.near-win-overlay.nw-flash {
    animation:redFlash .2s ease;
}

@keyframes redFlash {
    0%   { background:rgba(255,61,107,.4); }
    100% { background:rgba(5,5,7,.97); }
}

/* ══════════════════════════════
   AUTH MODAL
══════════════════════════════ */
.auth-overlay {
    position:fixed; inset:0; z-index:350;
    background:rgba(5,5,7,0.95);
    backdrop-filter:blur(30px);
    display:none; align-items:center; justify-content:center;
    padding:20px;
}
.auth-overlay.show { display:flex; }

.auth-card {
    width:100%; max-width:400px;
    background:var(--card);
    border:1px solid var(--border2);
    border-radius:24px;
    padding:32px 24px;
    text-align:center;
    position:relative;
}

.auth-close {
    position:absolute; top:16px; right:16px;
    width:32px; height:32px;
    border-radius:50%;
    background:var(--surface);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; color:var(--muted);
    cursor:pointer;
}

.auth-icon { font-size:48px; margin-bottom:12px; }

.auth-title {
    font-family:'DM Sans', sans-serif;
    font-size:24px; font-weight:800;
    margin-bottom:24px;
}

.auth-form { display:flex; flex-direction:column; gap:12px; }

.auth-input {
    width:100%; padding:14px 16px;
    border-radius:12px;
    border:1px solid var(--border2);
    background:var(--surface);
    color:var(--text);
    font-family:'DM Sans', sans-serif;
    font-size:14px;
    outline:none;
    transition:border-color .2s;
}
.auth-input:focus { border-color:var(--green); }
.auth-input::placeholder { color:var(--muted); }

.auth-error {
    display:none;
    color:var(--red);
    font-size:13px;
    text-align:left;
    padding:8px 12px;
    background:var(--red-d);
    border-radius:8px;
}

.auth-btn {
    width:100%; padding:14px;
    border-radius:12px; border:none;
    font-family:'DM Sans', sans-serif;
    font-size:15px; font-weight:700;
    cursor:pointer;
    transition:transform .2s;
}
.auth-btn:active { transform:scale(.97); }
.auth-btn.primary { background:var(--green); color:#000; }
.auth-btn.google { background:#4285F4; color:#fff; }
.auth-btn.telegram { background:#0088cc; color:#fff; }

.auth-divider {
    display:flex; align-items:center; gap:12px;
    color:var(--muted); font-size:12px;
    margin:4px 0;
}
.auth-divider::before, .auth-divider::after {
    content:''; flex:1; height:1px; background:var(--border);
}

.auth-links {
    display:flex; justify-content:center; gap:16px;
    margin-top:8px;
}
.auth-links a {
    font-size:13px; color:var(--blue);
    cursor:pointer; text-decoration:none;
}
.auth-links a:hover { text-decoration:underline; }