:root {
            --ink: #f7f3e8;
            --muted: #c9d1df;
            --panel: rgba(18, 20, 28, 0.86);
            --panel-strong: #151820;
            --line: rgba(255, 255, 255, 0.14);
            --blue: #55b8ff;
            --green: #7ee787;
            --gold: #ffd166;
            --red: #ff6b6b;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background:
                radial-gradient(circle at 18% 12%, rgba(126, 231, 135, 0.18), transparent 28%),
                radial-gradient(circle at 82% 18%, rgba(255, 209, 102, 0.16), transparent 30%),
                linear-gradient(135deg, #101010, #202328 48%, #151713);
            color: var(--ink);
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        header {
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding: 16px 24px;
            background: rgba(9, 12, 18, 0.94);
            border-bottom: 1px solid var(--line);
        }

        div {
            scroll-margin-top: 80px; /* adjust to your header height */
        }

        h1,
        h2,
        h3,
        p {
            margin-top: 0;
        }

        h1 {
            margin-bottom: 0;
            font-size: 1.45rem;
        }

        a {
            color: var(--blue);
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        nav {
            display: flex;
            gap: 14px;
            white-space: nowrap;
        }

        main {
            width: min(1180px, calc(100% - 32px));
            margin: 26px auto;
        }

        .intro,
        .calculator,
        .results,
        .explain,
        .naneinf {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 8px;
            box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
        }

        .intro {
            display: grid;
            grid-template-columns: 1.3fr 0.7fr;
            gap: 20px;
            padding: 24px;
            margin-bottom: 20px;
        }

        .joker-strip {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .joker-strip img {
            height: 110px;
            image-rendering: auto;
            filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55));
        }

        .joker-builder {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            align-items: end;
        }

        .roster-list {
            display: grid;
            gap: 10px;
            margin-top: 14px;
        }

        .roster-card {
            display: grid;
            grid-template-columns: 42px 1fr auto;
            gap: 10px;
            align-items: center;
            padding: 10px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.06);
        }

        .roster-card.inactive {
            opacity: 0.48;
        }

        .roster-card img {
            width: 38px;
            height: 50px;
            object-fit: contain;
            filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
        }

        .roster-name {
            font-weight: 700;
        }

        .roster-copy {
            display: block;
            margin-top: 3px;
            color: var(--muted);
            font-size: 0.78rem;
        }

        .roster-actions {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .roster-actions button,
        .small-button {
            padding: 7px 9px;
            font-size: 0.8rem;
        }

        .app-grid {
            display: grid;
            grid-template-columns: minmax(280px, 390px) 1fr;
            gap: 20px;
        }

        .calculator,
        .results,
        .explain {
            padding: 20px;
        }

        .control-group {
            padding: 16px 0;
            border-top: 1px solid var(--line);
        }

        .control-group:first-of-type {
            border-top: 0;
            padding-top: 0;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: var(--muted);
            font-size: 0.92rem;
        }

        .label-error {
            display: block;
            margin-bottom: 8px;
            border-color: red;
            font-size: 0.92rem;
        }

        label[for="kings"].label-error, label[for="steelKings"].label-error {
            color: red;
        }

        input[type="number"],
        select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 6px;
            background: #0f131b;
            color: var(--ink);
            font: inherit;
        }

        input[type="number"].input-error {
            border-color: red;
        }

        input[type="checkbox"] {
            transform: translateY(1px);
        }

        .two-col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .check-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 10px 0;
            color: var(--muted);
        }

        .button-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 16px;
        }

        button {
            border: 0;
            border-radius: 6px;
            padding: 11px 14px;
            background: var(--blue);
            color: #081018;
            font-weight: 700;
            cursor: pointer;
        }

        button.secondary {
            background: #2a3140;
            color: var(--ink);
            border: 1px solid var(--line);
        }

        button:hover {
            filter: brightness(1.08);
        }

        .score-card {
            background: var(--panel-strong);
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 18px;
            margin-bottom: 16px;
        }

        .score-label {
            color: var(--muted);
            font-size: 0.9rem;
            margin-bottom: 6px;
        }

        .big-number {
            font-size: clamp(1.8rem, 5vw, 3.8rem);
            overflow-wrap: anywhere;
            color: var(--gold);
            line-height: 1.05;
        }

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

        .metric {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 14px;
        }

        .metric strong {
            display: block;
            color: var(--green);
            font-size: 1.25rem;
            overflow-wrap: anywhere;
        }

        .meter {
            height: 18px;
            overflow: hidden;
            border-radius: 6px;
            background: #080a0f;
            border: 1px solid var(--line);
            margin: 16px 0;
        }

        .meter-fill {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, var(--blue), var(--green), var(--gold), var(--red));
            transition: width 180ms ease;
        }

        .note {
            color: var(--muted);
            line-height: 1.55;
        }

        .warning {
            color: var(--gold);
            font-weight: 700;
        }

        .explain {
            margin-top: 20px;
        }

        .formula {
            padding: 12px;
            background: #090c12;
            border: 1px solid var(--line);
            border-radius: 6px;
            color: var(--muted);
            overflow-x: auto;
        }

        .naneinf {
            margin-top: 20px;
            gap: 20px;
            padding: 24px;
            margin-bottom: 20px;
        }

        footer {
            
            width: min(1180px, calc(100% - 32px));
            margin: 24px auto 36px;
            color: var(--muted);
        }

        @media (max-width: 820px) {
            header,
            .intro,
            .app-grid,
            .distance {
                grid-template-columns: 1fr;
            }

            header {
                display: block;
            }

            nav {
                margin-top: 12px;
                flex-wrap: wrap;
            }

            .joker-strip {
                justify-content: flex-start;
            }
        }