/* ===== mafia.html · extracted style block 1 ===== */
:root {
            --gold: #c9a227;
            --gold-hot: #f0d78c;
            --ink: #060508;
            --ink-mid: #121018;
            --ink-card: #1a1522;
            --blood: #5c1a1a;
            --blood-glow: rgba(180, 40, 40, 0.35);
            --glass: rgba(18, 14, 24, 0.72);
            --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
            --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
            --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
        }

        * { box-sizing: border-box; }
        html {
            scroll-behavior: smooth;
            overflow-x: clip;
            -webkit-text-size-adjust: 100%;
        }

        body {
            margin: 0;
            min-height: 100vh;
            min-height: 100dvh;
            background: var(--ink);
            color: var(--gold);
            font-family: var(--font-body);
            font-weight: 300;
            overflow-x: clip;
        }

        /* Киношная подложка: виньетка + лёгкий шум (без внешних URL) */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse 85% 70% at 50% 0%, rgba(92, 26, 26, 0.22) 0%, transparent 55%),
                radial-gradient(ellipse 100% 100% at 50% 100%, transparent 30%, rgba(0,0,0,0.85) 100%),
                linear-gradient(180deg, #0e0a12 0%, #060508 45%, #0a080e 100%);
            pointer-events: none;
            z-index: 0;
        }

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

        .scanlines {
            position: fixed;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0,0,0,0.03) 2px,
                rgba(0,0,0,0.03) 4px
            );
            pointer-events: none;
            z-index: 2;
            opacity: 0.4;
        }

        .wrap {
            position: relative;
            z-index: 10;
            max-width: min(1240px, 96vw);
            width: 100%;
            margin: 0 auto;
            padding:
                92px
                max(clamp(20px, 4vw, 48px), env(safe-area-inset-right, 0px))
                max(110px, env(safe-area-inset-bottom, 0px))
                max(clamp(20px, 4vw, 48px), env(safe-area-inset-left, 0px));
        }

        /* Лёгкий «прожектор» по центру полотна */
        .wrap::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            width: min(100%, 900px);
            height: 70%;
            max-height: 720px;
            background: radial-gradient(ellipse 70% 55% at 50% 18%, rgba(201, 162, 39, 0.06) 0%, transparent 65%);
            pointer-events: none;
            z-index: -1;
        }

        /* Крупные «таблетки» у левого и правого края экрана */
        .nav-pill {
            position: fixed;
            top: max(16px, env(safe-area-inset-top, 0px) + 12px);
            z-index: 80;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: clamp(0.72rem, 1.4vw, 0.88rem);
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            padding: 14px 22px;
            border-radius: 999px;
            border: 1px solid rgba(255, 232, 170, 0.35);
            background: linear-gradient(165deg, rgba(38, 32, 48, 0.95) 0%, rgba(14, 12, 20, 0.98) 100%);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(0, 0, 0, 0.4) inset,
                0 0 32px rgba(201, 162, 39, 0.12);
            transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
            isolation: isolate;
            overflow: hidden;
            animation: mafiaPillSheen 7s ease-in-out infinite;
        }

        .nav-pill::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            z-index: 0;
            background:
                radial-gradient(ellipse 130% 120% at 12% -25%, rgba(201, 162, 39, 0.38) 0%, transparent 52%),
                radial-gradient(ellipse 110% 100% at 88% 130%, rgba(92, 26, 26, 0.32) 0%, transparent 48%),
                linear-gradient(
                    108deg,
                    rgba(201, 162, 39, 0.16) 0%,
                    rgba(120, 60, 75, 0.1) 35%,
                    rgba(240, 215, 140, 0.1) 65%,
                    rgba(201, 162, 39, 0.14) 100%
                );
            background-size: 100% 100%, 100% 100%, 280% 280%;
            background-position: 0% 0%, 100% 100%, 0% 45%;
            animation: mafiaNavAurora 20s ease-in-out infinite;
            pointer-events: none;
        }

        .nav-pill::after {
            content: '';
            position: absolute;
            top: -40%;
            left: -35%;
            width: 58%;
            height: 180%;
            z-index: 0;
            border-radius: inherit;
            background: linear-gradient(
                118deg,
                transparent 0%,
                rgba(255, 248, 235, 0.06) 42%,
                rgba(255, 236, 190, 0.14) 50%,
                rgba(255, 248, 235, 0.06) 58%,
                transparent 100%
            );
            animation: mafiaNavSweep 11s ease-in-out infinite;
            pointer-events: none;
        }

        .nav-pill__inner {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .nav-pill--home {
            left: max(16px, env(safe-area-inset-left, 0px));
            color: #fff8e8;
            text-decoration: none;
        }

        .nav-pill--home:hover {
            border-color: rgba(255, 236, 180, 0.65);
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 48px rgba(201, 162, 39, 0.28);
            transform: translateY(-2px);
            animation: none;
        }

        .nav-pill--status {
            right: max(16px, env(safe-area-inset-right, 0px));
            color: #fcefc1;
            cursor: default;
            padding-left: 18px;
            padding-right: 22px;
        }

        .nav-pill .status-pulse {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #BDECB6;
            box-shadow: 0 0 14px var(--blood-glow);
            animation: pulse 2s ease-in-out infinite;
            flex-shrink: 0;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.55; transform: scale(0.85); }
        }

        @keyframes mafiaNavAurora {
            0%, 100% { background-position: 0% 0%, 100% 100%, 0% 45%; }
            50% { background-position: 18% 12%, 82% 88%, 100% 55%; }
        }

        @keyframes mafiaNavSweep {
            0% { transform: translateX(-42%) skewX(-11deg); opacity: 0.28; }
            50% { opacity: 0.48; }
            100% { transform: translateX(42%) skewX(-11deg); opacity: 0.28; }
        }

        @keyframes mafiaPillSheen {
            0%, 100% {
                box-shadow:
                    0 4px 24px rgba(0, 0, 0, 0.55),
                    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
                    0 0 28px rgba(201, 162, 39, 0.14);
            }
            50% {
                box-shadow:
                    0 4px 28px rgba(0, 0, 0, 0.5),
                    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
                    0 0 44px rgba(240, 215, 140, 0.22);
            }
        }

        /* Герой + рамка «дело» */
        .hero {
            text-align: center;
            padding: 40px clamp(20px, 4vw, 48px) 36px;
            position: relative;
            max-width: 920px;
            margin: 0 auto;
            border: 1px solid rgba(201, 162, 39, 0.18);
            border-radius: 20px;
            background: linear-gradient(165deg, rgba(22, 18, 32, 0.45) 0%, rgba(8, 6, 14, 0.25) 100%);
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.35) inset,
                0 24px 60px rgba(0, 0, 0, 0.35);
        }

        .hero::before,
        .hero::after {
            content: '♠';
            position: absolute;
            top: 14px;
            font-size: 0.75rem;
            opacity: 0.2;
            color: var(--gold-hot);
        }

        .hero::before { left: 18px; }
        .hero::after { content: '♣'; right: 18px; }

        .hero-tag {
            display: inline-block;
            font-family: var(--font-display);
            font-size: clamp(0.65rem, 1.2vw, 0.75rem);
            letter-spacing: 0.38em;
            color: rgba(201, 162, 39, 0.5);
            margin-bottom: 20px;
            animation: fadeUp 0.9s var(--ease-out) both;
        }

        .mafia-title {
            font-family: var(--font-display);
            font-size: clamp(2.85rem, 7.5vw, 5.25rem);
            font-weight: 700;
            line-height: 1.08;
            margin: 0;
            letter-spacing: 0.04em;
            color: #f5f0e6;
            text-shadow:
                0 0 60px rgba(201, 162, 39, 0.25),
                0 2px 0 rgba(0,0,0,0.8);
            animation: fadeUp 0.9s var(--ease-out) 0.08s both;
        }

        /* «Мафии» - яркое золото, без «грязного» прозрачного градиента */
        .mafia-title span {
            display: block;
            margin-top: 6px;
            color: #ffecb3;
            -webkit-text-fill-color: #ffecb3;
            background: none;
            text-shadow:
                0 0 42px rgba(255, 214, 120, 0.55),
                0 0 18px rgba(201, 162, 39, 0.45),
                0 2px 0 rgba(0, 0, 0, 0.9);
        }

        .subtitle {
            margin: 24px auto 0;
            max-width: 560px;
            font-size: clamp(1rem, 1.9vw, 1.15rem);
            line-height: 1.65;
            font-weight: 400;
            color: rgba(201, 162, 39, 0.58);
            letter-spacing: 0.02em;
            animation: fadeUp 0.9s var(--ease-out) 0.16s both;
        }

        .subtitle strong {
            color: rgba(240, 215, 140, 0.82);
            font-weight: 600;
        }

        .doc-id {
            margin-top: 18px;
            font-family: var(--font-body);
            font-size: 0.68rem;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: rgba(201, 162, 39, 0.28);
            animation: fadeUp 0.9s var(--ease-out) 0.22s both;
        }

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

        .divider-ornament {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin: 40px 0 12px;
            opacity: 0.4;
            font-family: var(--font-display);
            font-size: 0.85rem;
            letter-spacing: 0.45em;
        }

        .divider-ornament::before,
        .divider-ornament::after {
            content: '';
            height: 1px;
            width: min(160px, 26vw);
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
        }

        /* Альбом: кнопка снаружи контейнера с картами - не перекрывается */
        .album-stage {
            position: relative;
            margin: 20px auto 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 36px;
            padding-bottom: 28px;
        }

        .album-fan-wrap {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .album-container {
            position: relative;
            width: 100%;
            max-width: 1100px;
            min-height: 600px;
            height: 600px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 8px;
            perspective: 1400px;
        }

        .photo-card {
            --rot: 0deg;
            --tx: 0px;
            --ty: 0px;
            position: absolute;
            left: 50%;
            width: min(260px, 30vw);
            min-height: min(400px, 78vw);
            height: auto;
            padding: 12px 12px 14px;
            background: linear-gradient(165deg, #252030 0%, var(--ink-card) 50%, #14101a 100%);
            border: 1px solid rgba(201, 162, 39, 0.3);
            border-radius: 16px;
            box-shadow:
                0 24px 48px rgba(0,0,0,0.65),
                inset 0 1px 0 rgba(255,255,255,0.04);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            transform: translate(calc(-50% + var(--tx)), var(--ty)) rotate(var(--rot));
            transform-style: preserve-3d;
            transition:
                transform 0.65s var(--ease-out),
                border-color 0.35s,
                box-shadow 0.45s,
                z-index 0s linear 0.2s;
            z-index: calc(20 - var(--i));
        }

        .photo-card:focus-visible {
            outline: 2px solid var(--gold-hot);
            outline-offset: 4px;
        }

        .photo-card .frame {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            flex: 0 0 auto;
            width: 100%;
            height: min(230px, 36vw);
            min-height: 180px;
            background: #0a080c;
        }

        .photo-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: grayscale(0.35) contrast(1.05) brightness(0.92);
            transition: filter 0.5s var(--ease-out), transform 0.6s var(--ease-out);
        }

        .photo-card .rank {
            position: absolute;
            top: 10px;
            left: 10px;
            font-family: var(--font-display);
            font-size: 0.62rem;
            letter-spacing: 0.18em;
            color: rgba(245, 240, 230, 0.85);
            background: rgba(0,0,0,0.55);
            padding: 4px 8px;
            border: 1px solid rgba(201, 162, 39, 0.35);
        }

        .photo-card .role {
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 0.55rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(201, 162, 39, 0.7);
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
        }

        .photo-card-footer {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin-top: 8px;
            padding: 0 2px 2px;
            min-height: 0;
        }

        .photo-name {
            text-align: center;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.8rem;
            letter-spacing: 0.14em;
            color: var(--gold-hot);
            text-transform: uppercase;
        }

        .photo-role-title {
            text-align: center;
            margin-top: 6px;
            font-family: var(--font-display);
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            color: rgba(255, 236, 200, 0.88);
            text-transform: uppercase;
        }

        .photo-desc {
            margin: 8px 0 0;
            text-align: center;
            font-family: var(--font-body);
            font-size: 0.72rem;
            line-height: 1.45;
            font-weight: 400;
            letter-spacing: 0.03em;
            color: rgba(201, 162, 39, 0.62);
            text-transform: none;
        }

        /* Стопка до открытия */
        .album-container:not(.open) .photo-card {
            --tx: calc(var(--i) * -3px);
            --ty: calc(var(--i) * -4px);
            --rot: calc((var(--i) - 3) * 1.2deg);
        }

        .album-container:not(.open) .photo-card:hover {
            transform: translate(calc(-50% + var(--tx)), calc(var(--ty) - 8px)) rotate(var(--rot)) scale(1.02);
            border-color: rgba(240, 215, 140, 0.5);
            z-index: 30;
        }

        /* Веер после открытия */
        .album-container.open .photo-card {
            transition-duration: 0.75s;
        }

        .album-container.open #p1 { --tx: clamp(-340px, -34vw, -200px); --rot: -13deg; }
        .album-container.open #p2 { --tx: clamp(-175px, -17vw, -100px); --rot: -5deg; }
        .album-container.open #p3 { --tx: 0px; --ty: -32px; --rot: 0deg; z-index: 25; }
        .album-container.open #p4 { --tx: clamp(100px, 17vw, 175px); --rot: 5deg; }
        .album-container.open #p5 { --tx: clamp(200px, 34vw, 340px); --rot: 13deg; }

        .album-container.open .photo-card:hover {
            z-index: 40;
            border-color: var(--gold-hot);
            box-shadow:
                0 32px 64px rgba(0,0,0,0.75),
                0 0 40px rgba(201, 162, 39, 0.12);
            transform: translate(calc(-50% + var(--tx)), calc(var(--ty) - 16px)) rotate(var(--rot)) scale(1.06);
        }

        .album-container.open .photo-card:hover img {
            filter: grayscale(0) contrast(1.08) brightness(1);
            transform: scale(1.04);
        }

        .action-btn {
            position: relative;
            flex-shrink: 0;
            font-family: var(--font-display);
            font-size: clamp(0.82rem, 1.5vw, 0.95rem);
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            padding: 20px 48px;
            color: var(--ink);
            background: linear-gradient(165deg, #fff2c4 0%, var(--gold-hot) 35%, var(--gold) 70%, #9a7b1a 100%);
            border: none;
            border-radius: 999px;
            cursor: pointer;
            box-shadow:
                0 0 0 1px rgba(255,255,255,0.22) inset,
                0 14px 40px rgba(201, 162, 39, 0.4);
            transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
            animation: btnGlow 4s ease-in-out infinite;
        }

        @keyframes btnGlow {
            0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset, 0 10px 32px rgba(201, 162, 39, 0.28); }
            50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.26) inset, 0 14px 40px rgba(201, 162, 39, 0.38); }
        }

        .action-btn:hover {
            transform: translateY(-4px) scale(1.03);
        }

        .action-btn:active {
            transform: scale(0.98);
        }

        /* Низ */
        .bottom-links {
            margin-top: 48px;
            text-align: center;
            padding-top: 28px;
            border-top: 1px solid rgba(201, 162, 39, 0.12);
        }

        .footer-suits {
            font-size: 0.9rem;
            letter-spacing: 0.65em;
            opacity: 0.22;
            margin-bottom: 20px;
            font-family: var(--font-display);
        }

        .cta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            justify-content: center;
            align-items: center;
        }

        .cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 18px 32px;
            font-family: var(--font-display);
            font-size: clamp(0.78rem, 1.4vw, 0.88rem);
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            text-decoration: none;
            border-radius: 12px;
            transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
        }

        .cta-primary {
            color: var(--ink);
            background: linear-gradient(165deg, #f5e6b8 0%, var(--gold) 40%, #7a6218 100%);
            box-shadow: 0 8px 28px rgba(201, 162, 39, 0.28);
            border-radius: 999px;
            padding: 20px 44px;
        }

        .cta-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 40px rgba(201, 162, 39, 0.38);
        }

        .cta-ghost {
            color: var(--gold-hot);
            border: 1px solid rgba(201, 162, 39, 0.4);
            background: var(--glass);
            backdrop-filter: blur(10px);
        }

        .cta-ghost:hover {
            border-color: var(--gold-hot);
            transform: translateY(-2px);
        }

        /* Модалка */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(4, 3, 6, 0.88);
            backdrop-filter: blur(8px);
            z-index: 200;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s var(--ease-out), visibility 0.4s;
        }

        .modal-overlay.is-open {
            opacity: 1;
            visibility: visible;
        }

        .modal-box {
            max-width: min(480px, 94vw);
            max-height: min(90vh, 900px);
            width: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: linear-gradient(180deg, #221c2e 0%, #121018 100%);
            border: 1px solid rgba(201, 162, 39, 0.35);
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 40px 80px rgba(0,0,0,0.8);
            transform: scale(0.92) translateY(20px);
            transition: transform 0.45s var(--ease-out);
        }

        .modal-overlay.is-open .modal-box {
            transform: scale(1) translateY(0);
        }

        .modal-box img {
            width: 100%;
            border-radius: 10px;
            display: block;
            aspect-ratio: 3/4;
            object-fit: cover;
        }

        .modal-title {
            font-family: var(--font-display);
            text-align: center;
            margin: 16px 0 6px;
            font-size: 1.1rem;
            letter-spacing: 0.2em;
            color: var(--gold-hot);
        }

        .modal-meta {
            text-align: center;
            font-family: var(--font-display);
            font-size: 0.8rem;
            color: rgba(240, 215, 140, 0.75);
            letter-spacing: 0.1em;
            margin-top: 4px;
        }

        .modal-desc {
            text-align: center;
            font-family: var(--font-body);
            font-size: 0.92rem;
            line-height: 1.55;
            color: rgba(201, 162, 39, 0.65);
            margin: 14px 8px 0;
            font-weight: 400;
            letter-spacing: 0.02em;
        }

        .modal-close {
            display: block;
            width: 100%;
            margin-top: 18px;
            padding: 12px;
            font-family: var(--font-display);
            font-size: 0.7rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            background: transparent;
            border: 1px solid rgba(201, 162, 39, 0.35);
            color: var(--gold);
            border-radius: 8px;
            cursor: pointer;
            transition: border-color 0.25s, color 0.25s;
        }

        .modal-close:hover {
            border-color: var(--gold-hot);
            color: var(--gold-hot);
        }

        /* Узкие экраны: веер сохраняем — масштабируем блок под ширину (без столбика) */
        @media (max-width: 1100px) {
            .album-stage {
                gap: 24px;
                width: 100%;
                max-width: 100vw;
                padding-left: max(0px, env(safe-area-inset-left, 0px));
                padding-right: max(0px, env(safe-area-inset-right, 0px));
            }

            .album-fan-wrap {
                --fan-scale: max(0.38, min(1, (100vw - 36px) / 960));
                display: flex;
                justify-content: center;
                width: 100%;
                height: calc(600px * var(--fan-scale));
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                padding: 8px 0 4px;
                box-sizing: content-box;
            }

            .album-fan-wrap .album-container {
                flex-shrink: 0;
                transform: scale(var(--fan-scale));
                transform-origin: top center;
            }

            .album-container {
                perspective: 1400px;
            }

            .photo-card {
                width: min(240px, 28vw);
                min-height: min(380px, 70vw);
            }

            .photo-card .frame {
                height: min(220px, 34vw);
                min-height: 160px;
            }

            .album-container.open #p1 { --tx: clamp(-260px, -30vw, -120px); --rot: -12deg; }
            .album-container.open #p2 { --tx: clamp(-130px, -15vw, -55px); --rot: -5deg; }
            .album-container.open #p3 { --tx: 0px; --ty: -26px; --rot: 0deg; z-index: 25; }
            .album-container.open #p4 { --tx: clamp(55px, 15vw, 130px); --rot: 5deg; }
            .album-container.open #p5 { --tx: clamp(120px, 28vw, 260px); --rot: 12deg; }
        }

        @media (max-width: 480px) {
            .album-fan-wrap {
                --fan-scale: max(0.32, min(1, (100vw - 24px) / 960));
            }
        }

        @media (max-width: 768px) {
            .nav-pill {
                font-size: 0.58rem;
                padding: 11px 14px;
                letter-spacing: 0.1em;
            }

            .nav-pill--home {
                left: 12px;
            }

            .nav-pill--status {
                right: 12px;
                padding-right: 14px;
            }

            .wrap {
                padding-top: 76px;
            }

            .mafia-title span { display: inline; margin-left: 0.25em; margin-top: 0; }
        }

        @media (max-width: 480px) {
            .wrap {
                padding-top: 80px;
                padding-left: max(14px, env(safe-area-inset-left, 0px));
                padding-right: max(14px, env(safe-area-inset-right, 0px));
            }

            .nav-pill {
                padding: 10px 12px;
                font-size: 0.52rem;
                letter-spacing: 0.08em;
            }

            .nav-pill--home {
                left: max(10px, env(safe-area-inset-left, 0px));
            }

            .nav-pill--status {
                right: max(10px, env(safe-area-inset-right, 0px));
                padding-left: 12px;
                padding-right: 14px;
                max-width: calc(100vw - 160px);
            }

            .hero {
                padding: 28px 14px 28px;
            }

            .subtitle {
                font-size: 0.95rem;
            }
        }

        @media (max-width: 360px) {
            .nav-pill--status .nav-pill__inner {
                font-size: 0.92em;
            }
        }

        @media (min-width: 1400px) {
            .wrap {
                max-width: min(1240px, 92vw);
            }
        }

        @media (max-height: 500px) and (orientation: landscape) {
            .wrap {
                padding-top: 64px;
            }

            .hero {
                padding: 20px 16px 20px;
            }

            .mafia-title {
                font-size: clamp(1.8rem, 5vw, 3rem);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }