* { box-sizing:border-box; }
        body {
            min-height:100vh;
            margin:0;
            color:#f4f8f2;
            font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background:#040814;
            position:relative;
            isolation:isolate;
            overflow-x:hidden;
        }
        body::before {
            content:"";
            position:fixed;
            inset:0;
            z-index:-2;
            pointer-events:none;
            background:url("/assets/optimized/tloranking.webp") center top / cover no-repeat;
            transform:translateZ(0);
        }
        body::after {
            content:"";
            position:fixed;
            inset:0;
            z-index:-1;
            pointer-events:none;
            background:
                linear-gradient(90deg, rgba(2,7,21,.38), rgba(5,13,28,.16), rgba(4,4,10,.08)),
                radial-gradient(circle at 72% 12%, rgba(240,189,66,.12), transparent 32%);
        }
        a { color:inherit; }
        .wrap { width:min(1120px, calc(100% - 28px)); margin:0 auto; padding:28px 0 60px; }
        /* ── topbar ── */
        .topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
        .brand { display:inline-flex; align-items:center; gap:13px; text-decoration:none; font-weight:1000; font-size:clamp(20px,2vw,36px); }
        .brand-mark { display:grid; width:52px; height:52px; place-items:center; overflow:hidden; border:1px solid rgba(255,238,189,.34); border-radius:50%; background:rgba(4,10,18,.42); box-shadow:0 0 0 1px rgba(125,248,232,.16), 0 10px 28px rgba(0,0,0,.32); flex-shrink:0; }
        .brand-mark img { display:block; width:100%; height:100%; object-fit:cover; }
        .brand-word { background:linear-gradient(90deg,#fff7c2 0%,#f0bd42 36%,#7df8e8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
        .mobile-menu-toggle { display:none; font:inherit; }
        .top-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-left:auto; }
        .top-actions .btn { min-height:40px; padding:0 14px; border:1px solid rgba(255,238,189,.26); border-radius:8px; color:#fff7c2; font-weight:900; text-decoration:none; cursor:pointer; background:linear-gradient(135deg,rgba(40,214,194,.16),rgba(240,189,66,.09) 46%,rgba(255,115,92,.10)),rgba(5,12,22,.60); box-shadow:0 10px 30px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(10px); display:inline-flex; align-items:center; justify-content:center; gap:8px; }
        .top-actions .btn:hover { border-color:rgba(125,248,232,.48); box-shadow:0 14px 34px rgba(0,0,0,.30),0 0 24px rgba(40,214,194,.10); }
        /* ── content buttons ── */
        .btn, button {
            display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:8px;
            padding:0 16px; border:1px solid rgba(255,238,189,.22); border-radius:8px;
            color:#f4f8f2; background:rgba(244,248,242,.10); font-weight:900; text-decoration:none; cursor:pointer;
        }
        .btn.teal, button { color:#071018; background:#28d6c2; border-color:#28d6c2; }
        .hero { display:grid; gap:12px; margin:32px 0 20px; max-width:760px; }
        h1 { margin:0; color:#fff7c2; font-size:clamp(38px,7vw,78px); line-height:.94; text-transform:uppercase; text-shadow:0 8px 36px rgba(0,0,0,.72); }
        h2 { margin:0; color:#fff7c2; }
        .accent { color:#7df8e8; }
        .muted { color:rgba(244,248,242,.74); line-height:1.55; }
        .panel { padding:18px; border:1px solid rgba(255,238,189,.18); border-radius:8px; background:rgba(7,12,24,.68); box-shadow:0 22px 70px rgba(0,0,0,.34); backdrop-filter:blur(12px); }
        .grid { display:grid; gap:14px; }
        .mode-tabs { display:flex; flex-wrap:wrap; gap:10px; }
        .mode-tabs .active { color:#071018; background:linear-gradient(135deg,#7df8e8,#d7f75b); border-color:transparent; }
        .rank-layout { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
        .panel-spy { border-color:rgba(255,79,109,.26); }
        .panel-civilian { border-color:rgba(40,214,194,.22); }
        .panel-points { border-color:rgba(215,247,91,.20); }
        .panel-spy h2 { color:#ff6b8a; }
        .panel-civilian h2 { color:#7df8e8; }
        .panel-points h2 { color:#d7f75b; }
        .rank-list { display:grid; gap:8px; margin-top:12px; }
        .rank-row { display:grid; grid-template-columns:42px 42px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 11px; border-radius:8px; background:rgba(244,248,242,.08); border:1px solid transparent; text-decoration:none; }
        .rank-row.top-1 { background:linear-gradient(135deg, rgba(255,215,107,.32), rgba(244,248,242,.08)); border-color:rgba(255,215,107,.60); }
        .rank-row.top-2 { background:linear-gradient(135deg, rgba(210,225,235,.28), rgba(244,248,242,.08)); border-color:rgba(210,225,235,.46); }
        .rank-row.top-3 { background:linear-gradient(135deg, rgba(213,139,79,.30), rgba(244,248,242,.08)); border-color:rgba(213,139,79,.48); }
        .rank-row.me { border-color:rgba(125,248,232,.55); box-shadow:0 0 0 1px rgba(125,248,232,.16); }
        .avatar { width:42px; height:42px; border-radius:50%; background:center/cover rgba(0,0,0,.30); display:grid; place-items:center; font-weight:1000; border:1px solid rgba(255,238,189,.24); }
        .premium-ring { --premium-ring-image:url("/pierscienie/clean/opt/celownik.png"); position:relative; overflow:visible !important; box-shadow:0 10px 24px rgba(0,0,0,.34) !important; }
        .premium-glow-none { filter:none; }
        .premium-glow-gold { filter:drop-shadow(0 0 12px rgba(255,225,138,.50)); }
        .premium-glow-mint { filter:drop-shadow(0 0 12px rgba(125,248,232,.48)); }
        .premium-glow-violet { filter:drop-shadow(0 0 13px rgba(201,156,255,.50)); }
        .premium-glow-ruby { filter:drop-shadow(0 0 13px rgba(255,111,145,.48)); }
        .premium-ring.ring-1 { --premium-ring-image:url("/pierscienie/clean/opt/celownik.png"); }
        .premium-ring.ring-2 { --premium-ring-image:url("/pierscienie/clean/opt/top_secret.png"); }
        .premium-ring.ring-3 { --premium-ring-image:url("/pierscienie/clean/opt/dagger.png"); }
        .premium-ring.ring-4 { --premium-ring-image:url("/pierscienie/clean/opt/maska.png"); }
        .premium-ring.ring-5 { --premium-ring-image:url("/pierscienie/clean/opt/klucznik.png"); }
        .premium-ring.ring-6 { --premium-ring-image:url("/pierscienie/clean/opt/zagadka.png"); }
        .premium-ring.ring-7 { --premium-ring-image:url("/pierscienie/clean/opt/runy.png"); }
        .premium-ring.ring-8 { --premium-ring-image:url("/pierscienie/clean/opt/tajemne.png"); }
        .premium-ring.ring-9 { --premium-ring-image:url("/pierscienie/clean/opt/pieczec.png"); }
        .premium-ring.ring-10 { --premium-ring-image:url("/pierscienie/clean/opt/assassin.png"); }
        .premium-ring.ring-11 { --premium-ring-image:url("/pierscienie/clean/opt/posion.png"); }
        .premium-ring.ring-12 { --premium-ring-image:url("/pierscienie/clean/opt/sztylety.png"); }
        .premium-ring.ring-13 { --premium-ring-image:url("/pierscienie/clean/opt/laser.png"); }
        .premium-ring.ring-14 { --premium-ring-image:url("/pierscienie/clean/opt/wanted.png"); }
        .premium-ring::after { content:""; position:absolute; inset:-30%; z-index:2; pointer-events:none; background:var(--premium-ring-image) center / contain no-repeat; }
        .premium-name { color:#ffe18a; text-shadow:0 0 18px rgba(240,189,66,.28); }
        .premium-badge-mini { display:inline-flex; margin-left:7px; padding:2px 7px; border:1px solid rgba(240,189,66,.52); border-radius:999px; color:#fff7c2; font-size:11px; font-weight:1000; }
        .rank-row span { color:rgba(244,248,242,.70); font-size:13px; }
        .search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
        input { min-height:44px; width:100%; border:1px solid rgba(255,238,189,.18); border-radius:8px; color:#f4f8f2; background:rgba(0,0,0,.24); padding:0 13px; font:inherit; }
        .pagination { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
        .pagination .active { color:#071018; background:#d7f75b; border-color:#d7f75b; }
        /* ── unified "my rank" card ── */
        .my-rank-card { padding:20px; border:1px solid rgba(255,238,189,.26); border-radius:10px; background:radial-gradient(ellipse at 0% 0%,rgba(240,189,66,.10),transparent 55%),rgba(7,12,24,.72); box-shadow:0 22px 70px rgba(0,0,0,.36); backdrop-filter:blur(12px); display:grid; gap:16px; }
        .my-rank-header { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
        .my-rank-title { color:#fff7c2; font-size:15px; font-weight:900; letter-spacing:.01em; display:flex; align-items:center; gap:6px; }
        .my-rank-title svg { color:#f0bd42; flex-shrink:0; }
        .my-rank-mode-tag { font-size:11px; color:#aab4ae; padding:2px 10px; border:1px solid rgba(255,238,189,.18); border-radius:20px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
        .my-rank-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
        .my-rank-slot { display:flex; flex-direction:column; align-items:center; gap:2px; padding:16px 10px 14px; border-radius:10px; text-decoration:none; transition:background .18s, border-color .18s, transform .14s; text-align:center; border:1px solid transparent; }
        .my-rank-slot:hover { transform:translateY(-2px); }
        .my-rank-slot.no-data { opacity:.5; pointer-events:none; cursor:default; }
        .slot-icon { font-size:22px; line-height:1; margin-bottom:4px; }
        .slot-pos { font-size:32px; font-weight:1000; line-height:1; letter-spacing:-.02em; }
        .slot-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; margin-top:6px; color:rgba(244,248,242,.80); }
        .slot-sub { font-size:12px; color:rgba(244,248,242,.50); margin-top:3px; }
        .slot-points { background:rgba(215,247,91,.07); border-color:rgba(215,247,91,.22); }
        .slot-points:hover { background:rgba(215,247,91,.13); border-color:rgba(215,247,91,.42); }
        .slot-points .slot-pos { color:#d7f75b; text-shadow:0 0 22px rgba(215,247,91,.38); }
        .slot-spy { background:rgba(255,79,109,.07); border-color:rgba(255,79,109,.22); }
        .slot-spy:hover { background:rgba(255,79,109,.13); border-color:rgba(255,79,109,.40); }
        .slot-spy .slot-pos { color:#ff6b8a; text-shadow:0 0 22px rgba(255,79,109,.38); }
        .slot-civilian { background:rgba(40,214,194,.07); border-color:rgba(40,214,194,.22); }
        .slot-civilian:hover { background:rgba(40,214,194,.13); border-color:rgba(40,214,194,.40); }
        .slot-civilian .slot-pos { color:#7df8e8; text-shadow:0 0 22px rgba(40,214,194,.38); }
        @media (max-width: 760px) {
            body::before { background-image:url("/assets/optimized/tlomobranking.webp"); background-position:center top; }
            body::after { background:linear-gradient(180deg, rgba(2,7,21,.20), rgba(4,4,10,.08)); }
            .rank-layout, .search { grid-template-columns:1fr; display:grid; }
            .rank-row { grid-template-columns:36px 38px minmax(0,1fr); }
            .rank-row > b:last-child { grid-column:3; justify-self:start; }
            .mode-tabs .btn { width:100%; }
            .my-rank-slots { grid-template-columns:1fr 1fr; }
            .slot-points { grid-column:1 / -1; }
            .brand-mark { width:40px; height:40px; }
            .brand { font-size:clamp(17px,5.5vw,22px); gap:9px; }
            .mobile-menu-toggle {
                display:inline-flex; min-height:36px; width:min(110px,30vw); align-items:center; justify-content:center; gap:6px;
                margin-left:auto; padding:0 10px; border:1px solid rgba(255,238,189,.32); border-radius:8px;
                color:#fff7c2; background:linear-gradient(135deg,rgba(40,214,194,.16),rgba(240,189,66,.10)),rgba(5,12,22,.70);
                box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08); font-weight:1000; cursor:pointer; backdrop-filter:blur(10px);
            }
            .top-actions {
                display:none; width:100%; order:3; grid-template-columns:1fr; gap:8px; margin-left:0; padding:10px;
                border:1px solid rgba(255,238,189,.18); border-radius:8px;
                background:linear-gradient(145deg,rgba(7,12,24,.90),rgba(18,10,24,.84)),rgba(5,12,22,.86);
                box-shadow:0 20px 52px rgba(0,0,0,.34); backdrop-filter:blur(14px);
            }
            .topbar.menu-open .top-actions { display:grid; }
            .top-actions .btn { width:100%; min-height:42px; justify-content:center; font-size:14px; }
        }
        @media (hover:none), (pointer:coarse) {
            body::before,
            body::after { position:absolute; transform:none; }
            *,
            *::before,
            *::after { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
        }