:root {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(151, 50, 255, .15),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 30%,
            rgba(255, 47, 128, .08),
            transparent 35%
        ),
        #08070b;

    color: #f6f2fa;

    font-family:
        Inter,
        system-ui,
        sans-serif;
}

button,
input,
select {
    font: inherit;
}

button {
    color: inherit;
}

.chess-topbar {
    position: sticky;
    top: 0;

    z-index: 50;

    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    min-height: 66px;

    padding:
        12px
        clamp(15px, 4vw, 50px);

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(8,7,11,.92);

    backdrop-filter:
        blur(18px);
}

.chess-brand {
    font-weight: 1000;
    letter-spacing: .09em;
}

.chess-brand span {
    color: #bc51ff;
}

.chess-back,
.chess-friends-link {
    color: #bbb1c5;
    text-decoration: none;

    font-size: 12px;
    font-weight: 900;
}

.chess-friends-link {
    justify-self: end;
}

.chess-shell {
    width:
        min(
            1160px,
            calc(100% - 28px)
        );

    margin:
        0
        auto;

    padding:
        48px
        0
        80px;
}

.chess-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 30px;
}

.chess-kicker {
    margin:
        0
        0
        8px;

    color: #bd6dff;

    font-size: 11px;

    font-weight: 1000;

    letter-spacing: .14em;
}

.chess-hero h1 {
    margin: 0;

    font-size:
        clamp(
            42px,
            8vw,
            88px
        );

    line-height: .95;
}

.chess-hero p:not(.chess-kicker) {
    max-width: 620px;

    color: #a99eb2;

    line-height: 1.65;
}

.chess-status {
    padding:
        10px
        13px;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 999px;

    color: #b8acbf;

    font-size: 11px;

    font-weight: 900;
}

.chess-mode-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 24px;
}

.chess-mode-card {
    min-height: 150px;

    padding: 24px;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(34,27,43,.95),
            rgba(15,13,20,.98)
        );

    text-align: left;

    cursor: pointer;

    transition:
        transform .15s ease,
        border-color .15s ease;
}

.chess-mode-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(190,81,255,.65);
}

.chess-mode-card strong {
    display: block;

    margin-bottom: 9px;

    font-size: 23px;
}

.chess-mode-card span {
    color: #a99eb2;

    font-size: 13px;
}

.chess-panel {
    margin-bottom: 22px;

    padding:
        clamp(
            18px,
            4vw,
            28px
        );

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 24px;

    background:
        rgba(14,12,18,.92);
}

.chess-panel-head,
.chess-lobby-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.chess-panel-head {
    margin-bottom: 22px;
}

.chess-panel h2 {
    margin: 0;

    font-size: 25px;
}

.bot-level-grid {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 11px;
}

.bot-level {
    min-height: 115px;

    padding: 15px;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 16px;

    background:
        #15121b;

    text-align: left;

    cursor: pointer;
}

.bot-level:hover {
    border-color:
        rgba(190,81,255,.65);

    background:
        #1d1725;
}

.bot-level strong {
    display: block;

    margin-bottom: 8px;

    font-size: 12px;
}

.bot-level span {
    color: #8f8497;

    font-size: 11px;

    line-height: 1.4;
}

.online-settings {
    margin-bottom: 15px;

    padding: 14px;

    border-radius: 15px;

    background: #111016;
}

.online-settings label {
    display: flex;
    align-items: center;

    gap: 12px;
}

.online-settings span {
    color: #928798;

    font-size: 10px;
    font-weight: 950;
}

select,
input {
    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 10px;

    background: #0b0a0e;

    color: #fff;
}

select {
    padding:
        9px
        10px;
}

input {
    width: 100%;

    padding:
        11px
        12px;

    outline: none;
}

input:focus,
select:focus {
    border-color:
        rgba(190,81,255,.7);
}

.chess-lobby-box {
    margin-top: 13px;

    padding: 17px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius: 17px;

    background:
        rgba(255,255,255,.025);
}

.chess-lobby-title {
    margin-bottom: 7px;

    font-size: 11px;
    font-weight: 1000;

    letter-spacing: .08em;
}

.chess-lobby-box p {
    color: #8f8595;

    font-size: 12px;
}

.chess-action-row {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.chess-user-search {
    display: grid;
    grid-template-columns:
        1fr
        auto;

    gap: 9px;
}

.chess-primary,
.chess-secondary,
.chess-danger,
.chess-small-button {
    border-radius: 10px;

    font-size: 10px;

    font-weight: 1000;

    cursor: pointer;
}

.chess-primary,
.chess-secondary,
.chess-danger {
    padding:
        10px
        13px;
}

.chess-primary {
    border:
        1px solid
        #b849ff;

    background:
        linear-gradient(
            135deg,
            #8c30db,
            #c34cff
        );
}

.chess-secondary,
.chess-small-button {
    border:
        1px solid
        rgba(255,255,255,.12);

    background: #17131c;
}

.chess-danger {
    border:
        1px solid
        rgba(255,70,102,.45);

    background:
        rgba(120,25,43,.45);
}

.chess-small-button {
    padding:
        8px
        10px;
}

.chess-message {
    min-height: 17px;

    margin-top: 9px;

    color: #9b8fa3;

    font-size: 11px;
}

.chess-two-column {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px;
}

.chess-list {
    display: grid;

    gap: 8px;

    margin-top: 10px;

    color: #8e8495;

    font-size: 11px;
}

.chess-list-item {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 11px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 11px;

    background: #0e0c12;
}

.chess-list-main {
    min-width: 0;
}

.chess-list-main strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
}

.chess-list-main small {
    color: #766d7c;
}

.friend-presence {
    display: inline-block;

    margin-top: 3px;

    color: #9d91a5;

    font-size: 9px;

    font-weight: 900;
}

.friend-presence.online {
    color: #75e099;
}

.chess-game {
    width:
        min(
            780px,
            100%
        );

    margin:
        0
        auto
        25px;
}

.chess-board-wrap {
    width: 100%;

    padding:
        10px;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 18px;

    background: #111016;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.32);
}

.chess-board {
    display: grid;

    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    grid-template-rows:
        repeat(8, minmax(0, 1fr));

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 10px;
}

.chess-square {
    position: relative;

    display: grid;
    place-items: center;

    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    padding: 0;

    border: 0;

    cursor: pointer;

    font-family:
        "Segoe UI Symbol",
        "Arial Unicode MS",
        sans-serif;

    font-size:
        clamp(
            27px,
            7vw,
            62px
        );

    line-height: 1;
}

.chess-square.light {
    background: #d5cadf;
}

.chess-square.dark {
    background: #69517d;
}

.chess-square.selected {
    box-shadow:
        inset 0 0 0 5px
        rgba(255,221,89,.86);
}

.chess-square.legal::after {
    content: "";

    position: absolute;

    width: 22%;
    height: 22%;

    border-radius: 999px;

    background:
        rgba(39,255,135,.6);
}

.chess-square.capture::after {
    width: 78%;
    height: 78%;

    border:
        5px solid
        rgba(255,86,113,.72);

    background: transparent;
}

.chess-square.last-move {
    box-shadow:
        inset 0 0 0 999px
        rgba(255,225,85,.18);
}

.chess-square.in-check {
    box-shadow:
        inset 0 0 0 999px
        rgba(255,38,80,.35);
}

.chess-piece-white {
    position: relative;

    z-index: 2;

    color: #fff;

    text-shadow:
        0 2px 4px
        rgba(0,0,0,.9),
        0 0 2px
        #000;
}

.chess-piece-black {
    position: relative;

    z-index: 2;

    color: #101015;

    text-shadow:
        0 1px 1px
        rgba(255,255,255,.2);
}

.chess-player-card {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 10px;

    margin:
        10px
        0;

    padding:
        11px
        13px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 13px;

    background: #100e14;
}

.chess-player-piece {
    font-size: 24px;
}

.chess-player-card small {
    display: block;

    color: #776e7e;

    font-size: 8px;

    font-weight: 900;
}

.chess-player-card strong {
    font-size: 12px;
}

.chess-clock {
    min-width: 73px;

    padding:
        8px
        9px;

    border-radius: 9px;

    background: #08070b;

    text-align: center;

    font-variant-numeric:
        tabular-nums;

    font-weight: 1000;
}

.chess-player-card.active {
    border-color:
        rgba(188,81,255,.7);
}

.chess-game-info {
    padding:
        15px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 15px;

    background: #100e14;
}

.chess-game-message {
    margin-bottom: 12px;

    font-size: 13px;

    font-weight: 900;
}

.promotion-control {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}

.promotion-control span {
    color: #817688;

    font-size: 9px;
    font-weight: 950;
}

.chess-stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;
}

.chess-stats-grid article {
    padding: 14px;

    border-radius: 13px;

    background: #111016;
}

.chess-stats-grid span {
    display: block;

    margin-bottom: 6px;

    color: #756b7b;

    font-size: 9px;

    font-weight: 950;
}

.chess-stats-grid strong {
    font-size: 22px;
}

.chess-leaderboard {
    margin-top: 18px;
}

.chess-leaderboard h3 {
    font-size: 11px;

    letter-spacing: .1em;
}

.chess-leaderboard-row {
    display: grid;

    grid-template-columns:
        35px
        1fr
        auto;

    gap: 10px;

    padding:
        10px
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    font-size: 11px;
}

@media (max-width: 850px) {

    .bot-level-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .chess-two-column {
        grid-template-columns:
            1fr;
    }
}

@media (max-width: 650px) {

    .chess-topbar {
        grid-template-columns:
            auto
            1fr
            auto;
    }

    .chess-brand {
        justify-self: center;

        font-size: 12px;
    }

    .chess-hero {
        display: block;
    }

    .chess-status {
        display: inline-block;

        margin-top: 10px;
    }

    .chess-mode-grid {
        grid-template-columns:
            1fr;
    }

    .chess-user-search {
        grid-template-columns:
            1fr;
    }

    .chess-stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .chess-square {
        font-size:
            clamp(
                28px,
                10vw,
                48px
            );
    }
}

/* =====================================================
   BIFF3EN_CHESS_VISUAL_V1
   ===================================================== */


/* ---------------------------------
   SISTE TREKK
   --------------------------------- */

.chess-square.last-move {
    box-shadow:
        inset 0 0 0 999px
        rgba(255, 213, 59, .32),
        inset 0 0 0 4px
        rgba(255, 231, 90, .92);
}


.chess-square.last-move.selected {
    box-shadow:
        inset 0 0 0 999px
        rgba(255, 213, 59, .30),
        inset 0 0 0 5px
        rgba(255, 255, 255, .95);
}


/* ---------------------------------
   SJAKK
   --------------------------------- */

.chess-square.in-check {
    box-shadow:
        inset 0 0 0 999px
        rgba(255, 25, 70, .55),
        inset 0 0 0 5px
        rgba(255, 72, 103, .95);

    animation:
        b3-check-pulse
        1.1s
        ease-in-out
        infinite;
}


@keyframes b3-check-pulse {

    0%,
    100% {
        filter:
            brightness(1);
    }

    50% {
        filter:
            brightness(1.23);
    }
}


/* ---------------------------------
   BRETT-KOORDINATER
   --------------------------------- */

.chess-square.show-file::before {
    content:
        attr(data-file);

    position: absolute;

    right: 5px;
    bottom: 3px;

    z-index: 4;

    color:
        rgba(20, 15, 25, .72);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size:
        clamp(
            8px,
            1vw,
            11px
        );

    font-weight: 1000;

    line-height: 1;

    text-transform:
        uppercase;

    pointer-events: none;
}


.chess-square.dark.show-file::before {
    color:
        rgba(255, 255, 255, .66);
}


.chess-square.show-rank::after {
    content:
        attr(data-rank);

    position: absolute;

    top: 4px;
    left: 5px;

    z-index: 4;

    width: auto;
    height: auto;

    border: 0;

    border-radius: 0;

    background: transparent;

    color:
        rgba(20, 15, 25, .72);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size:
        clamp(
            8px,
            1vw,
            11px
        );

    font-weight: 1000;

    line-height: 1;

    pointer-events: none;
}


.chess-square.dark.show-rank::after {
    color:
        rgba(255, 255, 255, .66);
}


/*
 * Legal-move-dot må beholdes når ruta også
 * har rank-coordinate.
 */

.chess-square.legal.show-rank::after {
    content: "";

    top: 50%;
    left: 50%;

    width: 22%;
    height: 22%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        999px;

    background:
        rgba(39, 255, 135, .68);
}


.chess-square.capture.show-rank::after {
    width: 78%;
    height: 78%;

    border:
        5px solid
        rgba(255, 86, 113, .78);

    background:
        transparent;
}


/*
 * Rank på ruter med legal highlight får
 * egen liten label.
 */

.chess-square.show-rank.legal::before {
    content:
        attr(data-rank);

    position: absolute;

    top: 4px;
    left: 5px;
    right: auto;
    bottom: auto;

    z-index: 5;

    color:
        rgba(20, 15, 25, .72);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size:
        clamp(
            8px,
            1vw,
            11px
        );

    font-weight: 1000;

    line-height: 1;

    pointer-events: none;
}


.chess-square.dark.show-rank.legal::before {
    color:
        rgba(255, 255, 255, .66);
}