/* ============================================================
   SHADOWSKINGS - THRONE ROOM
   OBSIDIAN DOMINION
============================================================ */

#throne-root {
    --throne-bg: #05030a;
    --throne-panel: rgba(11, 6, 19, 0.94);
    --throne-panel-soft: rgba(18, 9, 30, 0.72);
    --throne-panel-deep: rgba(7, 4, 13, 0.96);

    --throne-border: rgba(143, 92, 255, 0.48);
    --throne-border-soft: rgba(143, 92, 255, 0.25);
    --throne-purple: #a76cff;
    --throne-purple-bright: #c39aff;

    --throne-text: #e9e0f5;
    --throne-muted: #887b9e;
    --throne-gold: #e4c56b;

    position: relative;

    width: 100%;

    /*
     * IMPORTANT:
     *
     * throne-root must be a real viewport-sized scroll container.
     *
     * min-height: 100vh allowed this element to grow with all of its
     * content. That meant scrollHeight and clientHeight could become
     * effectively equal, leaving the drag-scroll system with nothing
     * to move.
     */
    height: 100vh;
    min-height: 0;

    box-sizing: border-box;

    padding:
        clamp(20px, 2.5vw, 44px)
        clamp(18px, 4vw, 72px);

    overflow-x: hidden;
    overflow-y: auto;

    /*
     * Keep normal wheel / touch scrolling available.
     */
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(70, 31, 110, 0.10),
            transparent 34%
        ),
        radial-gradient(
            circle at 20% 50%,
            rgba(82, 31, 126, 0.06),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #07030d 0%,
            #040207 55%,
            #020104 100%
        );

    color: var(--throne-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}


/* ============================================================
   BACKGROUND
============================================================ */

.throne-bg {
    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0, 0, 0, 0.55) 100%
        );

    z-index: 0;
}


.throne-focus-absorber {
    position: absolute;

    width: 0;
    height: 0;

    opacity: 0;

    pointer-events: none;
}


/* ============================================================
   MAIN FRAME
============================================================ */

.throne-frame {
    position: relative;
    z-index: 1;

    width: min(1500px, 100%);

    margin: 0 auto;

    box-sizing: border-box;

    padding:
        clamp(22px, 2.2vw, 34px);

    border:
        1px solid
        rgba(143, 92, 255, 0.58);

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 6, 21, 0.97),
            rgba(5, 3, 10, 0.98)
        );

    box-shadow:
        0 0 45px rgba(89, 43, 150, 0.16),
        inset 0 0 50px rgba(75, 32, 125, 0.05);
}


/* ============================================================
   HEADER
============================================================ */

.throne-header {
    display: grid;

    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    align-items: center;

    gap: 24px;

    padding-bottom: 22px;

    border-bottom:
        1px solid
        rgba(143, 92, 255, 0.25);
}


.throne-header-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(168, 105, 255, 0.75)
        );
}


.throne-header-line:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(168, 105, 255, 0.75),
            transparent
        );
}


.throne-header-center {
    min-width: 300px;

    text-align: center;
}


.throne-eyebrow {
    margin-bottom: 6px;

    color: #756689;

    font-family: Arial, sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 5px;
}


.throne-header h1 {
    margin: 0;

    color: #eee4ff;

    font-size:
        clamp(34px, 3vw, 50px);

    font-weight: 700;

    letter-spacing: 3px;

    line-height: 1;

    text-shadow:
        0 0 8px rgba(177, 116, 255, 0.7),
        0 0 22px rgba(121, 65, 200, 0.35);
}


.throne-subtitle {
    margin-top: 8px;

    color: #796a8f;

    font-family: Arial, sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 5px;
}


/* ============================================================
   MAIN GRID
============================================================ */

.throne-main-grid {
    display: grid;

    grid-template-columns:
        minmax(190px, 220px)
        minmax(0, 1fr)
        minmax(190px, 220px);

    gap: 22px;

    margin-top: 26px;
}


.throne-center {
    display: flex;
    flex-direction: column;

    gap: 16px;

    min-width: 0;
}


/* ============================================================
   SIDE PANELS
============================================================ */

.throne-side-panel {
    min-width: 0;

    padding: 12px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(143, 92, 255, 0.32);

    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            rgba(15, 8, 25, 0.80),
            rgba(7, 4, 13, 0.88)
        );
}


.panel-ornament-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(143, 92, 255, 0.45),
            transparent
        );
}


.side-panel-title {
    padding: 11px 0;

    text-align: center;

    color: #9183a4;

    font-family: Arial, sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 4px;
}


/* ============================================================
   RULER
============================================================ */

.throne-race-portrait-frame {
    position: relative;

    width: 100%;
    aspect-ratio: 0.56;

    box-sizing: border-box;

    margin-top: 12px;

    padding: 2px;

    border:
        1px solid
        rgba(159, 95, 255, 0.58);

    background: #030206;

    overflow: hidden;
}


.throne-race-portrait-frame::before,
.throne-race-portrait-frame::after {
    content: "";

    position: absolute;
    left: 50%;

    width: 42px;
    height: 1px;

    transform: translateX(-50%);

    background: #a76cff;

    z-index: 2;
}


.throne-race-portrait-frame::before {
    top: 7px;
}


.throne-race-portrait-frame::after {
    bottom: 7px;
}


.throne-race-portrait {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    background: #030206;
}


.player-info {
    padding: 15px 4px 11px;

    text-align: center;
}


.player-name {
    color: #eee6f8;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.2;
}


.player-race {
    margin-top: 6px;

    color: #817391;

    font-family: Arial, sans-serif;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.ruler-divider {
    height: 1px;

    margin: 4px 0 12px;

    background:
        rgba(143, 92, 255, 0.22);
}


.ruler-stat-row {
    display: flex;

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

    gap: 10px;

    margin-bottom: 8px;

    padding: 9px 10px;

    border:
        1px solid
        rgba(143, 92, 255, 0.20);

    background:
        rgba(5, 3, 10, 0.52);

    font-family: Arial, sans-serif;
}


.ruler-stat-row span {
    color: #766b84;

    font-size: 8px;

    text-transform: uppercase;
}


.ruler-stat-row strong {
    color: #d4b8ff;

    font-size: 11px;
}


/* ============================================================
   GENERIC SECTION
============================================================ */

.throne-section,
.development-panel {
    box-sizing: border-box;

    padding: 17px;

    border:
        1px solid
        rgba(143, 92, 255, 0.30);

    background:
        linear-gradient(
            145deg,
            rgba(14, 7, 24, 0.77),
            rgba(7, 4, 13, 0.88)
        );
}


.section-kicker {
    color: #817093;

    font-family: Arial, sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 4px;
}


.section-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}


.section-heading h2 {
    margin: 4px 0 0;

    color: #e6ddf0;

    font-size: 17px;
    font-weight: 400;
}


.section-rule {
    height: 1px;

    margin: 10px 0 14px;

    background:
        linear-gradient(
            90deg,
            rgba(143, 92, 255, 0.40),
            rgba(143, 92, 255, 0.12)
        );
}


/* ============================================================
   DOMINION
============================================================ */

.dominion-section {
    padding: 15px 18px 17px;
}


.dominion-section > .section-kicker {
    margin-bottom: 12px;

    text-align: center;
}


.dominion-grid {
    display: grid;

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

    gap: 8px;
}


.dominion-stat {
    min-width: 0;

    padding: 13px 8px;

    text-align: center;

    border:
        1px solid
        rgba(143, 92, 255, 0.23);

    background:
        rgba(4, 2, 8, 0.56);
}


.dominion-stat span {
    display: block;

    color: #766b84;

    font-family: Arial, sans-serif;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.dominion-stat strong {
    display: block;

    margin-top: 8px;

    color: #e6dcf2;

    font-size: 19px;
}


.dominion-stat:first-child strong {
    color: #bd82ff;

    text-shadow:
        0 0 10px
        rgba(167, 108, 255, 0.4);
}


/* ============================================================
   TREASURY
============================================================ */

.treasury-primary-grid {
    display: grid;

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

    gap: 8px;
}


.treasury-stat {
    padding: 14px 10px;

    text-align: center;

    border:
        1px solid
        rgba(143, 92, 255, 0.22);

    background:
        rgba(5, 3, 10, 0.62);
}


.treasury-stat span,
.resource-strip span,
.vault-summary-grid span {
    display: block;

    color: #74697f;

    font-family: Arial, sans-serif;

    font-size: 8px;

    text-transform: uppercase;
}


.treasury-stat strong {
    display: block;

    margin-top: 7px;

    color: #eee7f5;

    font-size: 17px;
}


.treasury-gold strong {
    color: var(--throne-gold);

    text-shadow:
        0 0 8px
        rgba(228, 197, 107, 0.2);
}


/* ============================================================
   RESOURCE STRIP
============================================================ */

.resource-strip {
    display: grid;

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

    margin-top: 8px;

    border:
        1px solid
        rgba(143, 92, 255, 0.20);

    background:
        rgba(4, 2, 8, 0.48);
}


.resource-strip > div {
    padding: 9px 8px;

    text-align: center;

    border-right:
        1px solid
        rgba(143, 92, 255, 0.12);
}


.resource-strip > div:last-child {
    border-right: 0;
}


.resource-strip strong {
    display: block;

    margin-top: 4px;

    font-family: Arial, sans-serif;

    font-size: 11px;
}


/* ============================================================
   VAULT
============================================================ */

.vault-summary {
    display: grid;

    grid-template-columns:
        170px
        minmax(0, 1fr);

    align-items: stretch;

    margin-top: 8px;

    border:
        1px solid
        rgba(188, 138, 69, 0.28);

    background:
        linear-gradient(
            90deg,
            rgba(50, 29, 18, 0.26),
            rgba(5, 3, 10, 0.58)
        );
}


.vault-summary-label {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 9px 11px;

    border-right:
        1px solid
        rgba(188, 138, 69, 0.20);
}


.vault-diamond {
    display: flex;

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

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    transform: rotate(45deg);

    border:
        1px solid
        rgba(216, 170, 94, 0.58);

    color: #d5b46d;

    font-family: Arial, sans-serif;

    font-size: 8px;
}


.vault-diamond::first-letter {
    transform: rotate(-45deg);
}


.vault-summary-label small {
    display: block;

    color: #766b84;

    font-family: Arial, sans-serif;

    font-size: 6px;

    letter-spacing: 1px;
}


.vault-summary-label strong {
    display: block;

    margin-top: 2px;

    color: #d9c9e8;

    font-size: 12px;
}


.vault-summary-grid {
    display: grid;

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

    gap: 4px;

    padding: 5px;
}


.vault-summary-grid > div {
    min-width: 0;

    padding: 8px 4px;

    text-align: center;

    background:
        rgba(3, 2, 7, 0.46);
}


.vault-summary-grid strong {
    display: block;

    margin-top: 4px;

    color: #cfc3d9;

    font-family: Arial, sans-serif;

    font-size: 10px;
}


/* ============================================================
   MILITARY
============================================================ */

.military-grid {
    display: grid;

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

    gap: 8px;
}


.military-stat {
    display: flex;

    min-height: 78px;

    flex-direction: column;

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

    padding: 10px;

    box-sizing: border-box;

    text-align: center;

    border:
        1px solid
        rgba(143, 92, 255, 0.24);

    background:
        rgba(5, 3, 10, 0.58);
}


.military-stat span {
    color: #796d87;

    font-family: Arial, sans-serif;

    font-size: 8px;

    text-transform: uppercase;
}


.military-stat strong {
    margin-top: 7px;

    color: #eee6f5;

    font-size: 22px;
}


.military-stat small {
    margin-top: 6px;

    color: #5f556d;

    font-family: Arial, sans-serif;

    font-size: 6px;

    letter-spacing: 1px;
}


.military-primary {
    border-color:
        rgba(167, 108, 255, 0.45);

    background:
        radial-gradient(
            circle at center,
            rgba(94, 43, 142, 0.12),
            rgba(5, 3, 10, 0.66)
        );
}


.military-primary strong {
    color: #b67cff;

    font-size: 30px;

    text-shadow:
        0 0 14px
        rgba(167, 108, 255, 0.35);
}


/* ============================================================
   SEAT OF POWER
============================================================ */

.warlord-seat-wrapper {
    width: 100%;
    aspect-ratio: 0.56;

    box-sizing: border-box;

    margin-top: 12px;

    padding: 2px;

    border:
        1px solid
        rgba(143, 92, 255, 0.52);

    background: #030206;

    overflow: hidden;
}


.warlord-seat-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}


.war-record-title {
    margin-top: 12px;

    padding: 9px 0;

    text-align: center;

    border-top:
        1px solid
        rgba(143, 92, 255, 0.20);

    color: #81738f;

    font-family: Arial, sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;
}


.war-record-grid {
    display: grid;

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

    gap: 5px;
}


.war-record-grid > div {
    min-width: 0;

    padding: 9px 5px;

    text-align: center;

    border:
        1px solid
        rgba(143, 92, 255, 0.17);

    background:
        rgba(4, 2, 8, 0.46);
}


.war-record-grid span {
    display: block;

    color: #6d6279;

    font-family: Arial, sans-serif;

    font-size: 7px;

    text-transform: uppercase;
}


.war-record-grid strong {
    display: block;

    margin-top: 5px;

    font-family: Arial, sans-serif;

    font-size: 12px;
}


/* ============================================================
   DEVELOPMENT
============================================================ */

.development-panel {
    margin-top: 20px;
}


.development-heading {
    align-items: center;

    margin-bottom: 12px;
}


.development-line {
    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            rgba(143, 92, 255, 0.40),
            transparent
        );
}


.development-grid {
    display: grid;

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

    gap: 8px;
}


.development-stat {
    position: relative;

    min-width: 0;

    padding: 12px 10px 12px 42px;

    border:
        1px solid
        rgba(143, 92, 255, 0.20);

    background:
        rgba(4, 2, 8, 0.46);
}


.development-stat::before {
    content: "+";

    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: #8f5cff;

    font-family: Arial, sans-serif;

    font-size: 15px;
}


.development-stat span {
    display: block;

    color: #766b84;

    font-family: Arial, sans-serif;

    font-size: 7px;

    text-transform: uppercase;
}


.development-stat strong {
    display: block;

    margin-top: 4px;

    color: #ded5e7;

    font-family: Arial, sans-serif;

    font-size: 11px;
}
/* ============================================================
   COMMAND DECK

   Normal document flow.
   No command is permanently selected.
============================================================ */

.command-deck {
    position: relative;

    width: 100%;

    box-sizing: border-box;

    margin-top: 20px;

    padding: 17px 12px 12px;

    border:
        1px solid
        rgba(143, 92, 255, 0.42);

    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            rgba(13, 7, 22, 0.96),
            rgba(6, 3, 11, 0.98)
        );

    box-shadow:
        inset 0 0 20px
        rgba(110, 55, 180, 0.05);
}


.command-title {
    position: absolute;

    left: 50%;
    top: 0;

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

    padding: 4px 16px;

    border:
        1px solid
        rgba(143, 92, 255, 0.45);

    background: #09040f;

    color: #817291;

    font-family: Arial, sans-serif;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 3px;
}


.command-grid {
    display: grid;

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

    gap:
        4px;
}


.cmd-btn {
    min-width: 0;
    min-height: 44px;

    padding: 8px 6px;

    border:
        1px solid
        rgba(143, 92, 255, 0.30);

    border-radius: 2px;

    outline: none;

    background:
        linear-gradient(
            180deg,
            rgba(22, 11, 36, 0.84),
            rgba(8, 4, 14, 0.92)
        );

    color: #cfc4d9;

    font-family: Arial, sans-serif;

    font-size: 9px;

    cursor: pointer;

    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}


.cmd-btn:hover {
    border-color:
        rgba(177, 116, 255, 0.78);

    background:
        linear-gradient(
            180deg,
            rgba(58, 27, 88, 0.92),
            rgba(18, 8, 31, 0.96)
        );

    color: #ffffff;

    box-shadow:
        inset 0 0 12px
        rgba(151, 85, 235, 0.12);

    transform:
        translateY(-1px);
}


.cmd-btn:active {
    transform:
        translateY(1px);
}


/* ============================================================
   RESPONSIVE - LARGE LAPTOP
============================================================ */

@media (max-width: 1250px) {

    #throne-root {
        padding-left: 24px;
        padding-right: 24px;
    }

    .throne-main-grid {
        grid-template-columns:
            180px
            minmax(0, 1fr)
            180px;
    }

    .command-grid {
        grid-template-columns:
            repeat(12, minmax(0, 1fr));

        gap:
            4px;
    }

    .development-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


/* ============================================================
   RESPONSIVE - TABLET
============================================================ */

@media (max-width: 950px) {

    #throne-root {
        padding:
            16px;
    }

    .throne-frame {
        padding:
            18px;
    }

    .throne-header {
        grid-template-columns:
            1fr;
    }

    .throne-header-line {
        display: none;
    }

    .throne-header-center {
        min-width: 0;
    }

    .throne-main-grid {
        grid-template-columns:
            1fr;
    }

    .ruler-panel,
    .seat-panel {
        max-width: none;
    }

    .ruler-panel {
        display: grid;

        grid-template-columns:
            140px
            minmax(0, 1fr);

        gap: 16px;
    }

    .ruler-panel >
    .panel-ornament-line,
    .ruler-panel >
    .side-panel-title {
        display: none;
    }

    .throne-race-portrait-frame {
        grid-row:
            1 / span 4;

        margin: 0;
    }

    .player-info {
        align-self: end;

        text-align: left;
    }

    .warlord-seat-wrapper {
        max-height: 330px;

        aspect-ratio: auto;

        height: 330px;
    }

    .warlord-seat-image {
        object-fit: contain;
    }

    .dominion-grid,
    .treasury-primary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .military-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .vault-summary {
        grid-template-columns:
            1fr;
    }

    .vault-summary-label {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(188, 138, 69, 0.20);
    }

    .command-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}


/* ============================================================
   RESPONSIVE - MOBILE
============================================================ */

@media (max-width: 600px) {

    #throne-root {
        padding: 8px;
    }

    .throne-frame {
        padding: 12px;

        border-radius: 4px;
    }

    .throne-header {
        padding:
            12px 0 18px;
    }

    .throne-header h1 {
        font-size: 32px;

        letter-spacing: 1px;
    }

    .throne-eyebrow,
    .throne-subtitle {
        letter-spacing: 3px;
    }

    .ruler-panel {
        grid-template-columns:
            110px
            minmax(0, 1fr);
    }

    .throne-section,
    .development-panel {
        padding: 12px;
    }

    .dominion-grid,
    .treasury-primary-grid,
    .military-grid,
    .development-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .resource-strip {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .resource-strip > div:nth-child(2) {
        border-right: 0;
    }

    .resource-strip > div:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(143, 92, 255, 0.12);
    }

    .vault-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .vault-summary-grid > div:last-child {
        grid-column:
            1 / -1;
    }

    .war-record-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .command-deck {
        margin-top: 16px;

        padding:
            18px 8px 8px;
    }

    .command-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .cmd-btn {
        min-height: 48px;

        font-size: 10px;
    }
}

/* ============================================================
   SHADOWSKINGS STORE BUTTON
============================================================ */

.throne-header {
    position: relative;
}

.throne-store-button {
    position: absolute;

    top: 43%;
    right: 0;

    width:
        clamp(
            150px,
            15vw,
            230px
        );

    padding: 0;

    transform:
        translateY(-50%);

    border: 0;

    background: transparent;

    cursor: pointer;

    z-index: 5;

    transition:
        transform 160ms ease,
        filter 160ms ease;
}

.throne-store-button img {
    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;

    user-select: none;
}

.throne-store-button:hover {
    transform:
        translateY(-50%)
        scale(1.035);

    filter:
        brightness(1.13)
        drop-shadow(
            0 0 12px
            rgba(167, 108, 255, 0.55)
        );
}

.throne-store-button:active {
    transform:
        translateY(-50%)
        scale(0.98);
}

.throne-store-button:focus-visible {
    outline:
        1px solid
        var(--throne-purple-bright);

    outline-offset: 4px;
}


/* ============================================================
   STORE BUTTON RESPONSIVE
============================================================ */

@media (max-width: 950px) {

    .throne-store-button {
        position: relative;

        top: auto;
        right: auto;

        width:
            min(
                220px,
                70vw
            );

        margin:
            16px auto 0;

        transform: none;

        grid-column:
            1 / -1;
    }

    .throne-store-button:hover {
        transform:
            scale(1.035);
    }

    .throne-store-button:active {
        transform:
            scale(0.98);
    }
}


@media (max-width: 600px) {

    .throne-store-button {
        width:
            min(
                190px,
                75vw
            );

        margin-top:
            12px;
    }
}


/* ============================================================
   PREMIUM TOKEN BALANCE
============================================================ */

.throne-premium-tokens {
    position: absolute;
    top: 85%;
    right: 0;
    width: clamp(150px, 15vw, 230px);
    text-align: center;
    z-index: 5;
    color: #d8b4fe;
    font-weight: 700;
    letter-spacing: 1px;
}

.throne-premium-tokens-label {
    display: block;
    font-size: 11px;
    opacity: 0.8;
}

#throne-premium-token-balance {
    display: block;
    margin-top: 3px;
    font-size: 18px;
}

/* ============================================================
   MOBILE — PREMIUM TOKENS CENTERED BELOW STORE
============================================================ */

@media (max-width: 950px) {

    .throne-premium-tokens {
        position: relative;

        top: auto;
        right: auto;

        width:
            min(
                220px,
                70vw
            );

        margin:
            6px auto 0;

        text-align: center;

        grid-column:
            1 / -1;
    }
}

@media (max-width: 600px) {

    .throne-premium-tokens {
        width:
            min(
                190px,
                75vw
            );

        margin-top: 4px;
    }
}