/* Pirate Defense Phase 1 buildless game shell. Served directly from public/game/. */

:root {
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: dark;
    --game-bg: #07111f;
    --game-panel: rgba(10, 24, 42, 0.88);
    --game-panel-strong: #0d1d31;
    --game-line: rgba(188, 225, 255, 0.16);
    --game-text: #f8fbff;
    --game-muted: #9db0c5;
    --game-gold: #f4c96d;
    --game-cyan: #5fd7ff;
    --game-green: #4fe39a;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    background: var(--game-bg);
}

.game-document,
.game-body {
    overflow: hidden;
    overscroll-behavior: none;
}

.game-body {
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--game-text);
    font-family: var(--font-sans);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
    outline: 3px solid rgba(95, 215, 255, 0.72);
    outline-offset: 3px;
}

.is-hidden {
    display: none !important;
}

.system-message {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: #07111f;
    color: white;
    text-align: center;
}

.game-app {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 18%, rgba(45, 153, 213, 0.22), transparent 34%),
        linear-gradient(155deg, #07111f 0%, #0b233b 48%, #07111f 100%);
}

.ambient-layer {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(14px);
    opacity: 0.62;
    pointer-events: none;
}

.ambient-layer--one {
    width: 38rem;
    height: 38rem;
    top: -20rem;
    right: -12rem;
    background: rgba(50, 168, 239, 0.22);
}

.ambient-layer--two {
    width: 32rem;
    height: 32rem;
    bottom: -20rem;
    left: -14rem;
    background: rgba(244, 201, 109, 0.16);
}

.entry-gate {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding:
        calc(1.25rem + var(--safe-top))
        calc(1.25rem + var(--safe-right))
        calc(1.25rem + var(--safe-bottom))
        calc(1.25rem + var(--safe-left));
    background:
        linear-gradient(rgba(3, 11, 21, 0.38), rgba(3, 11, 21, 0.78)),
        radial-gradient(circle at 50% 30%, rgba(95, 215, 255, 0.16), transparent 30%);
}

.entry-card {
    width: min(31rem, 100%);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--game-line);
    border-radius: 2rem;
    background: linear-gradient(180deg, rgba(13, 29, 49, 0.94), rgba(6, 17, 30, 0.92));
    box-shadow:
        0 2rem 6rem rgba(0, 0, 0, 0.38),
        inset 0 1px rgba(255, 255, 255, 0.05);
    text-align: center;
    backdrop-filter: blur(18px);
}

.entry-card__eyebrow,
.stage-copy__tag {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(95, 215, 255, 0.24);
    border-radius: 999px;
    background: rgba(95, 215, 255, 0.08);
    color: #bcecff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.brand-mark {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    margin: 1.5rem auto 1rem;
}

.brand-mark__ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(244, 201, 109, 0.75);
    border-radius: 999px;
    box-shadow: 0 0 2.5rem rgba(244, 201, 109, 0.16);
}

.brand-mark__ring::before,
.brand-mark__ring::after {
    content: "";
    position: absolute;
    inset: 0.75rem;
    border: 1px solid rgba(95, 215, 255, 0.32);
    border-radius: inherit;
}

.brand-mark__sail {
    position: absolute;
    inset: 1.75rem 2rem 1.45rem 2.2rem;
    border-radius: 65% 20% 58% 22%;
    background:
        linear-gradient(135deg, transparent 0 45%, rgba(8, 28, 48, 0.92) 46% 50%, transparent 51%),
        linear-gradient(145deg, var(--game-gold), #fff0b5);
    transform: skewX(-8deg);
    box-shadow: 0 0 2rem rgba(244, 201, 109, 0.25);
}

.entry-card__title {
    margin: 0;
    color: #fff6d6;
    font-size: clamp(2.2rem, 7vw, 4.2rem);
    font-weight: 950;
    letter-spacing: -0.05em;
    line-height: 0.98;
    text-shadow: 0 0 2rem rgba(244, 201, 109, 0.18);
}

.entry-card__subtitle {
    max-width: 27rem;
    margin: 1rem auto 1.5rem;
    color: var(--game-muted);
    font-size: clamp(0.95rem, 2vw, 1.08rem);
    line-height: 1.65;
}

.primary-game-button,
.secondary-game-button,
.icon-game-button,
.game-dock button {
    border: 0;
    color: white;
    cursor: pointer;
}

.primary-game-button {
    width: 100%;
    min-height: 4.7rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.35rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 40%),
        linear-gradient(135deg, #1278b7, #0c9b85);
    box-shadow:
        0 1rem 2.5rem rgba(5, 99, 130, 0.3),
        inset 0 1px rgba(255, 255, 255, 0.22);
    transition: transform 160ms ease, filter 160ms ease;
}

.primary-game-button:hover {
    filter: brightness(1.08);
}

.primary-game-button:active {
    transform: scale(0.985);
}

.primary-game-button span,
.primary-game-button small {
    display: block;
}

.primary-game-button span {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.primary-game-button small {
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.75rem;
}

.secondary-game-button {
    width: 100%;
    min-height: 3rem;
    margin-top: 0.75rem;
    border: 1px solid var(--game-line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.05);
    font-weight: 800;
}

.entry-card__hint {
    min-height: 1.3rem;
    margin: 1rem 0 0;
    color: #7890a8;
    font-size: 0.78rem;
}

.game-shell {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    padding:
        calc(0.75rem + var(--safe-top))
        calc(0.75rem + var(--safe-right))
        calc(0.75rem + var(--safe-bottom))
        calc(0.75rem + var(--safe-left));
}

.game-topbar,
.game-dock {
    z-index: 3;
    border: 1px solid var(--game-line);
    background: rgba(7, 17, 31, 0.78);
    box-shadow: 0 0.9rem 2.5rem rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px);
}

.game-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.3rem;
    padding: 0.65rem 0.8rem;
    border-radius: 1.25rem;
}

.player-chip {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.75rem;
}

.player-chip__avatar {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    flex: 0 0 auto;
    border: 1px solid rgba(244, 201, 109, 0.35);
    border-radius: 1rem;
    background: linear-gradient(145deg, #1d4f73, #0e253d);
    color: #fff1b8;
    font-size: 0.8rem;
    font-weight: 950;
}

.player-chip strong,
.player-chip small {
    display: block;
}

.player-chip strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-chip small {
    margin-top: 0.12rem;
    color: var(--game-muted);
    font-size: 0.72rem;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.realm-badge {
    display: inline-grid;
    place-items: center;
    min-width: 3rem;
    min-height: 2.35rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(79, 227, 154, 0.24);
    border-radius: 0.9rem;
    background: rgba(79, 227, 154, 0.1);
    color: #a8f7cf;
    font-size: 0.8rem;
    font-weight: 900;
}

.icon-game-button {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--game-line);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    font-size: 1.2rem;
}

.game-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    margin: 0.75rem 0;
    overflow: hidden;
    border: 1px solid var(--game-line);
    border-radius: 1.5rem;
    background:
        linear-gradient(180deg, rgba(7, 17, 31, 0.2), rgba(7, 17, 31, 0.76)),
        radial-gradient(circle at 50% 28%, rgba(95, 215, 255, 0.2), transparent 24%),
        linear-gradient(160deg, #0d3452, #0b2137 48%, #07111f);
}

.game-stage::before,
.game-stage::after {
    content: "";
    position: absolute;
    left: -10%;
    width: 120%;
    height: 8rem;
    border-radius: 50%;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.game-stage::before {
    bottom: 13%;
    transform: rotate(-2deg);
}

.game-stage::after {
    bottom: 5%;
    transform: rotate(3deg);
}

.horizon-glow {
    position: absolute;
    top: 20%;
    left: 50%;
    width: min(55rem, 80vw);
    height: 14rem;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(95, 215, 255, 0.08);
    filter: blur(34px);
}

.stage-copy {
    position: relative;
    z-index: 2;
    width: min(58rem, calc(100% - 2rem));
    text-align: center;
}

.stage-copy h2 {
    margin: 0.9rem 0 0.7rem;
    color: #fff4cd;
    font-size: clamp(2rem, 6vw, 5.5rem);
    font-weight: 950;
    letter-spacing: -0.06em;
    line-height: 0.95;
}

.stage-copy > p {
    max-width: 44rem;
    margin: 0 auto;
    color: #b3c3d4;
    font-size: clamp(0.92rem, 2vw, 1.08rem);
    line-height: 1.65;
}

.foundation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.foundation-grid article {
    min-height: 7.5rem;
    padding: 1rem;
    border: 1px solid var(--game-line);
    border-radius: 1.15rem;
    background: rgba(7, 17, 31, 0.62);
    text-align: left;
    backdrop-filter: blur(10px);
}

.foundation-grid strong,
.foundation-grid span {
    display: block;
}

.foundation-grid strong {
    color: #f8e7af;
    font-size: 0.92rem;
}

.foundation-grid span {
    margin-top: 0.45rem;
    color: #90a5ba;
    font-size: 0.76rem;
    line-height: 1.45;
}

.game-dock {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
    min-height: 4.6rem;
    padding: 0.45rem;
    border-radius: 1.25rem;
}

.game-dock button {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 0.45rem;
    border-radius: 0.9rem;
    background: transparent;
}

.game-dock button[aria-current="page"] {
    background: linear-gradient(180deg, rgba(95, 215, 255, 0.15), rgba(95, 215, 255, 0.05));
    color: #bfeeff;
}

.game-dock button:disabled {
    cursor: default;
    opacity: 0.38;
}

.game-dock button span,
.game-dock button small {
    display: block;
}

.game-dock button span {
    font-size: 1.15rem;
}

.game-dock button small {
    margin-top: 0.18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.67rem;
    font-weight: 800;
    white-space: nowrap;
}

.rotate-notice {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    place-items: center;
    gap: 0.8rem;
    padding: 2rem;
    background: #07111f;
    text-align: center;
}

.rotate-notice span {
    font-size: 3rem;
}

.rotate-notice strong {
    max-width: 18rem;
}

@media (max-width: 767px) {
    .game-shell {
        padding:
            calc(0.45rem + var(--safe-top))
            calc(0.45rem + var(--safe-right))
            calc(0.45rem + var(--safe-bottom))
            calc(0.45rem + var(--safe-left));
    }

    .game-topbar {
        min-height: 3.9rem;
        padding: 0.5rem 0.6rem;
        border-radius: 1rem;
    }

    .player-chip__avatar {
        width: 2.55rem;
        height: 2.55rem;
        border-radius: 0.8rem;
    }

    .game-stage {
        margin: 0.45rem 0;
        border-radius: 1.1rem;
    }

    .stage-copy {
        width: min(34rem, calc(100% - 1.2rem));
    }

    .foundation-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .foundation-grid article {
        min-height: auto;
        padding: 0.75rem 0.85rem;
        text-align: center;
    }

    .game-dock {
        min-height: 4.25rem;
        padding: 0.35rem;
        border-radius: 1rem;
    }

    .game-dock button {
        padding: 0.35rem 0.2rem;
    }
}

@media (max-height: 580px) and (orientation: landscape) {
    .game-topbar {
        min-height: 3.2rem;
    }

    .player-chip__avatar {
        width: 2.2rem;
        height: 2.2rem;
    }

    .stage-copy h2 {
        margin-top: 0.55rem;
        font-size: clamp(1.8rem, 8vh, 3.2rem);
    }

    .stage-copy > p {
        font-size: 0.78rem;
    }

    .foundation-grid {
        margin-top: 0.75rem;
    }

    .foundation-grid article {
        min-height: 4.6rem;
        padding: 0.65rem;
    }

    .game-dock {
        min-height: 3.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* Phase 1 account foundation. */

.auth-gate {
    z-index: 30;
    place-items: start center;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.auth-card {
    width: min(40rem, 100%);
    margin: auto 0;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border: 1px solid var(--game-line);
    border-radius: 2rem;
    background: linear-gradient(180deg, rgba(13, 29, 49, 0.97), rgba(6, 17, 30, 0.96));
    box-shadow:
        0 2rem 6rem rgba(0, 0, 0, 0.42),
        inset 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(18px);
}

.auth-card__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.auth-card__header h1 {
    margin: 0.8rem 0 0.3rem;
    color: #fff6d6;
    font-size: clamp(1.65rem, 5vw, 2.6rem);
    line-height: 1;
}

.auth-card__header p,
.auth-card__footer {
    margin: 0;
    color: var(--game-muted);
    line-height: 1.55;
}

.auth-back-button {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--game-line);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--game-text);
    cursor: pointer;
}

.auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 1.5rem 0 1rem;
    padding: 0.35rem;
    border: 1px solid var(--game-line);
    border-radius: 1rem;
    background: rgba(2, 10, 20, 0.42);
}

.auth-tabs button {
    min-height: 2.9rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--game-muted);
    font-weight: 850;
    cursor: pointer;
}

.auth-tabs button[aria-selected="true"] {
    background: linear-gradient(135deg, rgba(95, 215, 255, 0.2), rgba(244, 201, 109, 0.14));
    color: var(--game-text);
    box-shadow: inset 0 0 0 1px rgba(95, 215, 255, 0.22);
}

.auth-panel {
    min-width: 0;
}

.auth-form {
    display: grid;
    gap: 1rem;
}

.auth-form__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.game-field {
    display: grid;
    gap: 0.45rem;
    color: #dcecff;
    font-size: 0.86rem;
    font-weight: 800;
}

.game-field input {
    width: 100%;
    min-height: 3.2rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(188, 225, 255, 0.2);
    border-radius: 0.9rem;
    outline: 0;
    background: rgba(2, 10, 20, 0.56);
    color: var(--game-text);
    user-select: text;
    -webkit-user-select: text;
}

.game-field input:focus {
    border-color: rgba(95, 215, 255, 0.72);
    box-shadow: 0 0 0 3px rgba(95, 215, 255, 0.12);
}

.game-field small {
    color: var(--game-muted);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
}

.game-checkbox {
    display: inline-flex;
    gap: 0.65rem;
    align-items: center;
    width: fit-content;
    color: var(--game-muted);
    font-size: 0.82rem;
    cursor: pointer;
}

.game-checkbox input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--game-cyan);
}

.auth-alert {
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(255, 111, 111, 0.34);
    border-radius: 0.9rem;
    background: rgba(148, 33, 45, 0.2);
    color: #ffd8dc;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.45;
}

.auth-submit-button {
    margin-top: 0.15rem;
}

.auth-card__footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--game-line);
    font-size: 0.76rem;
    text-align: center;
}

.logout-form {
    display: inline-flex;
    margin: 0;
}

@media (max-width: 767px) {
    .auth-gate {
        place-items: start center;
    }

    .auth-card {
        margin: auto 0;
        border-radius: 1.5rem;
    }

    .auth-form__split {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 680px) and (orientation: landscape) {
    .auth-card {
        margin: 0 auto;
        padding-block: 1rem;
    }

    .auth-card__header p,
    .auth-card__footer {
        display: none;
    }

    .auth-tabs {
        margin-block: 0.75rem;
    }

    .auth-form {
        gap: 0.65rem;
    }

    .game-field input {
        min-height: 2.65rem;
        padding-block: 0.55rem;
    }

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

/* Pirate Defense website and contained game launcher.
   Scoped to .pd-site-* so shared entry/auth screens remain unchanged. */

.pd-site-body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    user-select: auto;
    -webkit-user-select: auto;
}

.pd-site-app {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    background:
        radial-gradient(circle at 50% -8rem, rgba(64, 164, 222, 0.18), transparent 34rem),
        linear-gradient(180deg, #07111f 0%, #081523 48%, #060e19 100%);
}

.pd-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding:
        calc(0.65rem + var(--safe-top))
        calc(1rem + var(--safe-right))
        0.65rem
        calc(1rem + var(--safe-left));
    border-bottom: 1px solid rgba(188, 225, 255, 0.1);
    background: rgba(5, 15, 27, 0.88);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(20px);
}

.pd-site-header__inner {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) auto minmax(15rem, 1fr);
    align-items: center;
    gap: 1.2rem;
    width: min(96rem, 100%);
    margin: 0 auto;
}

.pd-site-brand {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.pd-site-brand__crest {
    position: relative;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(244, 201, 109, 0.48);
    border-radius: 0.95rem;
    background:
        radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.24), transparent 30%),
        linear-gradient(145deg, #d8993b, #724116 62%, #3b210f);
    box-shadow:
        inset 0 0 0 0.18rem rgba(10, 22, 33, 0.42),
        0 0.75rem 1.8rem rgba(0, 0, 0, 0.22);
}

.pd-site-brand__crest::before,
.pd-site-brand__crest::after,
.pd-site-brand__crest span {
    content: "";
    position: absolute;
    background: #fff1bf;
}

.pd-site-brand__crest::before {
    width: 0.17rem;
    height: 1.7rem;
    left: 1.38rem;
    top: 0.68rem;
    border-radius: 999px;
    transform: rotate(-3deg);
}

.pd-site-brand__crest::after {
    width: 1.25rem;
    height: 1.3rem;
    left: 1.44rem;
    top: 0.66rem;
    clip-path: polygon(0 0, 100% 28%, 74% 100%, 0 85%);
    background: linear-gradient(135deg, #fff6d7, #e4bd62);
}

.pd-site-brand__crest span {
    width: 1.6rem;
    height: 0.36rem;
    left: 0.67rem;
    bottom: 0.52rem;
    border-radius: 50% 50% 45% 45%;
    background: #2e1a0f;
    box-shadow: 0 -0.17rem 0 #fff1bf;
}

.pd-site-brand > span:last-child {
    min-width: 0;
    margin-left: 0.72rem;
}

.pd-site-brand strong,
.pd-site-brand small {
    display: block;
}

.pd-site-brand strong {
    overflow: hidden;
    color: #fff4d0;
    font-size: 0.98rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pd-site-brand small {
    margin-top: 0.12rem;
    color: #718ba2;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pd-site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.pd-site-nav a {
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    color: #8fa5b9;
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}

.pd-site-nav a:hover,
.pd-site-nav a[aria-current="page"] {
    background: rgba(95, 215, 255, 0.08);
    color: #e5f7ff;
}

.pd-site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    min-width: 0;
}

.pd-site-online {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.55rem;
    padding: 0.55rem 0.78rem;
    border: 1px solid rgba(79, 227, 154, 0.16);
    border-radius: 0.8rem;
    background: rgba(22, 88, 64, 0.12);
    color: #a6ebca;
    font-size: 0.68rem;
    font-weight: 850;
    white-space: nowrap;
}

.pd-site-online > span {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: #4fe39a;
    box-shadow: 0 0 0.9rem rgba(79, 227, 154, 0.58);
}

.pd-site-button {
    min-height: 2.55rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(188, 225, 255, 0.13);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    color: #d9e9f6;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 800;
    transition: border-color 160ms ease, background 160ms ease;
}

.pd-site-button:hover {
    border-color: rgba(95, 215, 255, 0.36);
    background: rgba(95, 215, 255, 0.08);
}

.pd-site-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 2.7rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(244, 201, 109, 0.1);
    background: rgba(67, 41, 13, 0.2);
    color: #8ca2b5;
    font-size: 0.68rem;
    text-align: center;
}

.pd-site-notice span {
    flex: 0 0 auto;
    padding: 0.27rem 0.5rem;
    border: 1px solid rgba(244, 201, 109, 0.26);
    border-radius: 999px;
    color: #f1cf7e;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-site-notice p {
    margin: 0;
}

.pd-site-main {
    width: min(96rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2.1rem 0 4rem;
}

.pd-site-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    align-items: end;
    gap: 2rem;
    margin-bottom: 1.3rem;
    padding: 0 0.25rem;
}

.pd-site-eyebrow,
.pd-site-card__eyebrow {
    display: block;
    color: #7ca2bd;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pd-site-intro h1 {
    max-width: 16ch;
    margin: 0.42rem 0 0;
    color: #fff4d5;
    font-size: clamp(2rem, 4.4vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.pd-site-intro > p {
    max-width: 37rem;
    margin: 0 0 0.25rem auto;
    color: #8298ab;
    font-size: 0.88rem;
    line-height: 1.65;
}

.pd-site-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    align-items: start;
    gap: 1rem;
}

.pd-gamebox {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(188, 225, 255, 0.16);
    border-radius: 1.35rem;
    background: linear-gradient(180deg, rgba(13, 29, 48, 0.98), rgba(5, 15, 27, 0.98));
    box-shadow:
        0 1.8rem 4.5rem rgba(0, 0, 0, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.045);
}

.pd-gamebox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0.72rem 0.78rem;
    border-bottom: 1px solid rgba(188, 225, 255, 0.1);
    background: rgba(7, 20, 34, 0.96);
}

.pd-gamebox__title {
    display: flex;
    align-items: center;
    min-width: 0;
}

.pd-gamebox__icon {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    border: 1px solid rgba(244, 201, 109, 0.34);
    border-radius: 0.85rem;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.16), transparent 32%),
        linear-gradient(145deg, #9c671e, #4b2c12);
    color: #fff1b7;
    font-size: 1.2rem;
}

.pd-gamebox__title > span:last-child {
    min-width: 0;
    margin-left: 0.68rem;
}

.pd-gamebox__title small,
.pd-gamebox__title strong {
    display: block;
}

.pd-gamebox__title small {
    color: #6f889f;
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pd-gamebox__title strong {
    margin-top: 0.12rem;
    overflow: hidden;
    color: #f6fbff;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-gamebox__player {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.48rem;
    min-width: 0;
}

.pd-gamebox__avatar {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    border: 1px solid rgba(244, 201, 109, 0.35);
    border-radius: 0.82rem;
    background:
        radial-gradient(circle at 40% 25%, rgba(255, 255, 255, 0.16), transparent 32%),
        linear-gradient(145deg, #306b8c, #112e48 64%, #0a1d30);
    color: #fff0bb;
    font-size: 0.78rem;
    font-weight: 950;
}

.pd-gamebox__identity {
    min-width: 0;
    padding-right: 0.25rem;
}

.pd-gamebox__identity small,
.pd-gamebox__identity strong,
.pd-gamebox__stat small,
.pd-gamebox__stat strong {
    display: block;
}

.pd-gamebox__identity small,
.pd-gamebox__stat small {
    color: #6d849a;
    font-size: 0.55rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-gamebox__identity strong {
    max-width: 9rem;
    margin-top: 0.12rem;
    overflow: hidden;
    color: #fff4cf;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-gamebox__stat {
    min-width: 4.25rem;
    padding: 0.48rem 0.62rem;
    border: 1px solid rgba(188, 225, 255, 0.11);
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.035);
}

.pd-gamebox__stat strong {
    margin-top: 0.12rem;
    color: #dcecff;
    font-size: 0.72rem;
}

.pd-gamebox__fullscreen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 2.65rem;
    padding: 0.48rem 0.7rem;
    border: 1px solid rgba(95, 215, 255, 0.2);
    border-radius: 0.78rem;
    background: rgba(95, 215, 255, 0.07);
    color: #c8efff;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.pd-gamebox__fullscreen:hover {
    border-color: rgba(95, 215, 255, 0.48);
    background: rgba(95, 215, 255, 0.12);
}

.pd-gamebox__fullscreen:active {
    transform: scale(0.97);
}

.pd-gamebox__fullscreen > span {
    font-size: 1rem;
}

.pd-gamebox__fullscreen small {
    font-size: 0.62rem;
    font-weight: 850;
}

.pd-gamebox__viewport {
    position: relative;
    min-width: 0;
    aspect-ratio: 16 / 9;
    min-height: 30rem;
    overflow: hidden;
    background: #061522;
    outline: none;
}

.pd-game-ui {
    display: grid;
    grid-template-columns: 4.7rem minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.pd-game-nav {
    position: relative;
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 0;
    padding: 0.48rem;
    border-right: 1px solid rgba(188, 225, 255, 0.1);
    background:
        linear-gradient(180deg, rgba(13, 33, 50, 0.98), rgba(5, 18, 30, 0.98));
}

.pd-game-nav button {
    display: grid;
    place-items: center;
    gap: 0.22rem;
    min-height: 4rem;
    padding: 0.45rem 0.2rem;
    border: 0;
    border-radius: 0.82rem;
    background: transparent;
    color: #617b92;
}

.pd-game-nav button.is-active {
    background: linear-gradient(180deg, rgba(95, 215, 255, 0.14), rgba(95, 215, 255, 0.045));
    color: #d9f5ff;
    box-shadow: inset 0 0 0 1px rgba(95, 215, 255, 0.15);
}

.pd-game-nav button:disabled {
    opacity: 0.48;
}

.pd-game-nav button span {
    font-size: 0.95rem;
}

.pd-game-nav button small {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.52rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-game-stage {
    position: relative;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
    background: #0a3754;
}

.pd-game-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2, 14, 24, 0.74) 0%, rgba(2, 14, 24, 0.32) 37%, transparent 68%),
        linear-gradient(180deg, transparent 54%, rgba(2, 13, 23, 0.44) 100%);
}

.pd-game-scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 21%, rgba(255, 229, 151, 0.4), transparent 12rem),
        linear-gradient(180deg, #4da9cc 0%, #4e9ebb 46%, #0d5579 46.5%, #063553 100%);
}

.pd-game-scene::before {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    top: 45%;
    height: 56%;
    background:
        repeating-radial-gradient(
            ellipse at 50% 0,
            transparent 0 3.2rem,
            rgba(169, 225, 246, 0.1) 3.35rem 3.45rem,
            transparent 3.6rem 6.2rem
        );
    opacity: 0.78;
}

.pd-game-scene__sun {
    position: absolute;
    top: 9%;
    right: 16%;
    width: 7.2rem;
    height: 7.2rem;
    border-radius: 999px;
    background: #f5dfa1;
    box-shadow:
        0 0 0 1.4rem rgba(245, 223, 161, 0.08),
        0 0 4.5rem rgba(245, 223, 161, 0.44);
}

.pd-game-scene__cloud {
    position: absolute;
    width: 7rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(218, 239, 244, 0.16);
    filter: blur(0.3px);
}

.pd-game-scene__cloud::before,
.pd-game-scene__cloud::after {
    content: "";
    position: absolute;
    bottom: 0;
    border-radius: 999px 999px 0 0;
    background: inherit;
}

.pd-game-scene__cloud::before {
    left: 1.2rem;
    width: 2.7rem;
    height: 2.8rem;
}

.pd-game-scene__cloud::after {
    right: 1rem;
    width: 2.2rem;
    height: 2.2rem;
}

.pd-game-scene__cloud--one {
    left: 45%;
    top: 20%;
}

.pd-game-scene__cloud--two {
    right: 2%;
    top: 13%;
    transform: scale(0.86);
}

.pd-game-scene__island {
    position: absolute;
    bottom: 38%;
    height: 5.8rem;
    border-radius: 55% 60% 12% 12%;
    background: linear-gradient(180deg, #5e9552, #27634d 72%, #1c4e44);
}

.pd-game-scene__island--left {
    left: -8%;
    width: 40%;
    transform: rotate(-3deg);
}

.pd-game-scene__island--right {
    right: -5%;
    width: 34%;
    transform: rotate(4deg);
}

.pd-game-scene__fort {
    position: absolute;
    right: 12%;
    bottom: 41%;
    width: 8rem;
    height: 4.2rem;
    background:
        linear-gradient(90deg,
            #294955 0 16%,
            transparent 16% 22%,
            #294955 22% 42%,
            transparent 42% 48%,
            #294955 48% 68%,
            transparent 68% 74%,
            #294955 74% 100%
        );
    box-shadow: 0 1rem 0 #274651;
}

.pd-game-scene__fort::after {
    content: "";
    position: absolute;
    inset: 1rem 0 -1rem;
    background: #294955;
}

.pd-game-ship {
    position: absolute;
    z-index: 5;
    right: 21%;
    bottom: 18%;
    width: 15rem;
    height: 13rem;
    filter: drop-shadow(0 1.4rem 1.5rem rgba(0, 0, 0, 0.24));
}

.pd-game-ship__mast {
    position: absolute;
    z-index: 5;
    left: 7.3rem;
    top: 0.8rem;
    width: 0.25rem;
    height: 9.2rem;
    border-radius: 999px;
    background: #78421f;
}

.pd-game-ship__sail {
    position: absolute;
    z-index: 4;
    background:
        repeating-linear-gradient(0deg, rgba(110, 82, 48, 0.08) 0 1px, transparent 1px 0.72rem),
        linear-gradient(145deg, #f3d990, #cba96a);
    filter: drop-shadow(0 0.35rem 0.4rem rgba(0, 0, 0, 0.13));
}

.pd-game-ship__sail--main {
    left: 3.8rem;
    top: 2.2rem;
    width: 3.8rem;
    height: 6.9rem;
    clip-path: polygon(100% 0, 100% 100%, 0 82%, 30% 15%);
}

.pd-game-ship__sail--front {
    left: 7.55rem;
    top: 2.6rem;
    width: 4.1rem;
    height: 5.7rem;
    clip-path: polygon(0 0, 100% 85%, 0 100%);
}

.pd-game-ship__flag {
    position: absolute;
    z-index: 6;
    left: 7.5rem;
    top: 0.75rem;
    width: 3rem;
    height: 1.35rem;
    clip-path: polygon(0 0, 100% 18%, 72% 50%, 100% 78%, 0 100%);
    background: #912f29;
}

.pd-game-ship__deck {
    position: absolute;
    z-index: 6;
    left: 2.2rem;
    bottom: 3.1rem;
    width: 10.6rem;
    height: 1rem;
    border-top: 0.28rem solid #7a421e;
    background: repeating-linear-gradient(90deg, #8f5a2a 0 1rem, #6c3d1f 1rem 1.1rem);
    transform: skewX(-12deg);
}

.pd-game-ship__hull {
    position: absolute;
    z-index: 5;
    left: 2.7rem;
    bottom: 0;
    width: 10.2rem;
    height: 4rem;
    clip-path: polygon(0 0, 100% 12%, 82% 84%, 52% 100%, 18% 76%);
    background:
        linear-gradient(165deg, #82451e 0 40%, #4b281e 40% 100%);
}

.pd-game-scene__wave {
    position: absolute;
    z-index: 6;
    height: 1rem;
    border-top: 0.12rem solid rgba(170, 222, 242, 0.28);
    border-radius: 50%;
}

.pd-game-scene__wave--one {
    right: 5%;
    bottom: 13%;
    width: 37%;
    transform: rotate(2deg);
}

.pd-game-scene__wave--two {
    right: 18%;
    bottom: 9%;
    width: 25%;
    transform: rotate(-4deg);
}

.pd-game-scene__wave--three {
    left: 44%;
    bottom: 6%;
    width: 31%;
    transform: rotate(1deg);
}

.pd-game-stage__content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(36rem, 58%);
    min-height: 100%;
    padding: clamp(1.8rem, 4vw, 4.6rem);
}

.pd-game-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 1.9rem;
    padding: 0.36rem 0.7rem;
    border: 1px solid rgba(244, 201, 109, 0.35);
    border-radius: 999px;
    background: rgba(50, 33, 13, 0.34);
    color: #ffe29a;
    font-size: 0.58rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.pd-game-stage h2 {
    max-width: 9ch;
    margin: 0.75rem 0 0.65rem;
    color: #fff6d8;
    font-size: clamp(2.4rem, 5.7vw, 5.6rem);
    line-height: 0.9;
    letter-spacing: -0.065em;
    text-shadow: 0 0.18rem rgba(0, 0, 0, 0.16);
}

.pd-game-stage__content > p {
    max-width: 28rem;
    margin: 0;
    color: #c0d1da;
    font-size: clamp(0.74rem, 1vw, 0.94rem);
    line-height: 1.55;
}

.pd-game-stage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.pd-game-action {
    display: grid;
    min-width: 9.5rem;
    min-height: 3.25rem;
    padding: 0.58rem 0.85rem;
    border: 1px solid rgba(188, 225, 255, 0.17);
    border-radius: 0.78rem;
    background: rgba(3, 18, 31, 0.65);
    color: #e8f4fb;
    text-align: left;
    backdrop-filter: blur(10px);
}

.pd-game-action:disabled {
    cursor: default;
    opacity: 1;
}

.pd-game-action span,
.pd-game-action small {
    display: block;
}

.pd-game-action span {
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pd-game-action small {
    margin-top: 0.14rem;
    color: #829aae;
    font-size: 0.58rem;
}

.pd-game-action--primary {
    border-color: rgba(244, 201, 109, 0.45);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 46%),
        linear-gradient(135deg, #aa6b1e, #6c3d11);
    box-shadow: 0 0.85rem 1.7rem rgba(79, 42, 10, 0.24);
}

.pd-game-action--primary small {
    color: #e5bd77;
}

.pd-game-objective {
    position: absolute;
    z-index: 8;
    right: 1rem;
    bottom: 1rem;
    width: min(15rem, 34%);
    padding: 0.85rem;
    border: 1px solid rgba(188, 225, 255, 0.15);
    border-radius: 0.95rem;
    background: rgba(4, 17, 29, 0.74);
    backdrop-filter: blur(14px);
}

.pd-game-objective__status {
    display: inline-block;
    margin-bottom: 0.55rem;
    padding: 0.27rem 0.48rem;
    border: 1px solid rgba(79, 227, 154, 0.18);
    border-radius: 999px;
    background: rgba(79, 227, 154, 0.08);
    color: #91e8bd;
    font-size: 0.54rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pd-game-objective small,
.pd-game-objective strong,
.pd-game-objective p {
    display: block;
}

.pd-game-objective small {
    color: #7590a7;
    font-size: 0.55rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-game-objective strong {
    margin: 0.2rem 0;
    color: #fff0bc;
    font-size: 0.82rem;
}

.pd-game-objective p {
    margin: 0;
    color: #8199ad;
    font-size: 0.62rem;
    line-height: 1.45;
}

.pd-game-mobile-dock {
    display: none;
}

.pd-gamebox__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.6rem;
    padding: 0.55rem 0.8rem;
    border-top: 1px solid rgba(188, 225, 255, 0.09);
    background: rgba(7, 20, 34, 0.96);
    color: #71899f;
    font-size: 0.6rem;
}

.pd-gamebox__footer span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.pd-gamebox__footer i {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 999px;
    background: #4fe39a;
    box-shadow: 0 0 0.8rem rgba(79, 227, 154, 0.5);
}

.pd-site-sidebar {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
}

.pd-site-card {
    padding: 1rem;
    border: 1px solid rgba(188, 225, 255, 0.12);
    border-radius: 1.15rem;
    background:
        linear-gradient(180deg, rgba(16, 34, 52, 0.94), rgba(7, 18, 31, 0.96));
    box-shadow:
        0 1rem 2.5rem rgba(0, 0, 0, 0.14),
        inset 0 1px rgba(255, 255, 255, 0.035);
}

.pd-site-card--featured {
    min-height: 13rem;
    background:
        radial-gradient(circle at 100% 0, rgba(244, 201, 109, 0.17), transparent 45%),
        linear-gradient(145deg, #2b281f, #0b1a2a 70%);
}

.pd-site-card h2 {
    margin: 0.45rem 0 0.6rem;
    color: #fff2c8;
    font-size: 1.25rem;
    line-height: 1.12;
}

.pd-site-card p {
    margin: 0;
    color: #8ca1b4;
    font-size: 0.72rem;
    line-height: 1.55;
}

.pd-site-card__meta {
    display: block;
    margin-top: 1.4rem;
    color: #d6b76f;
    font-size: 0.6rem;
    font-weight: 850;
    text-transform: uppercase;
}

.pd-site-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(188, 225, 255, 0.08);
}

.pd-site-card__head small,
.pd-site-card__head strong {
    display: block;
}

.pd-site-card__head small {
    color: #71899f;
    font-size: 0.58rem;
    font-weight: 850;
    text-transform: uppercase;
}

.pd-site-card__head strong {
    margin-top: 0.16rem;
    color: #f3f8fc;
    font-size: 0.88rem;
}

.pd-site-card__status {
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(79, 227, 154, 0.18);
    border-radius: 999px;
    background: rgba(79, 227, 154, 0.07);
    color: #91e8bd;
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pd-site-status-list {
    display: grid;
    gap: 0.58rem;
    margin-top: 0.78rem;
}

.pd-site-status-list > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pd-site-status-list small {
    color: #71899f;
    font-size: 0.62rem;
}

.pd-site-status-list strong {
    max-width: 9rem;
    overflow: hidden;
    color: #d6e4ee;
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-site-links {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.72rem;
}

.pd-site-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.8rem;
    padding: 0.62rem 0.7rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    color: #a9bbc9;
    font-size: 0.66rem;
    font-weight: 750;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}

.pd-site-links a:hover {
    background: rgba(95, 215, 255, 0.07);
    color: #d9f5ff;
}

.pd-site-links strong {
    color: #6fd8ff;
}

.pd-site-section {
    margin-top: 2.6rem;
    scroll-margin-top: 6rem;
}

.pd-site-section__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1rem;
}

.pd-site-section__head h2 {
    margin: 0.38rem 0 0;
    color: #f5f9fc;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    letter-spacing: -0.04em;
}

.pd-site-section__head p {
    max-width: 31rem;
    margin: 0 0 0.18rem;
    color: #71899f;
    font-size: 0.76rem;
    line-height: 1.55;
    text-align: right;
}

.pd-site-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.pd-news-card {
    position: relative;
    min-height: 14rem;
    padding: 1.15rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.15rem;
}

.pd-news-card::after {
    content: "";
    position: absolute;
    right: -3.5rem;
    bottom: -4.2rem;
    width: 11rem;
    height: 11rem;
    border: 1.3rem solid rgba(255, 255, 255, 0.055);
    border-radius: 999px;
}

.pd-news-card--gold {
    background:
        radial-gradient(circle at 100% 0, rgba(255, 214, 121, 0.2), transparent 42%),
        linear-gradient(135deg, #5a3c1d, #181b20);
}

.pd-news-card--blue {
    background:
        radial-gradient(circle at 100% 0, rgba(95, 215, 255, 0.2), transparent 42%),
        linear-gradient(135deg, #16475e, #101c28);
}

.pd-news-card--violet {
    background:
        radial-gradient(circle at 100% 0, rgba(167, 133, 255, 0.22), transparent 42%),
        linear-gradient(135deg, #3b3057, #1b1a29);
}

.pd-news-card > span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pd-news-card h3 {
    max-width: 13ch;
    margin: 2.2rem 0 0.55rem;
    color: #fff6dc;
    font-size: 1.55rem;
    line-height: 1.05;
}

.pd-news-card p {
    position: relative;
    z-index: 2;
    max-width: 24rem;
    margin: 0;
    color: rgba(230, 241, 249, 0.7);
    font-size: 0.72rem;
    line-height: 1.5;
}

.pd-news-card small {
    position: absolute;
    left: 1.15rem;
    bottom: 1.1rem;
    z-index: 2;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.6rem;
    font-weight: 850;
    text-transform: uppercase;
}

.pd-site-community-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 0.8rem;
}

.pd-site-community,
.pd-site-support {
    min-height: 15rem;
    padding: clamp(1.3rem, 3vw, 2rem);
    border: 1px solid rgba(188, 225, 255, 0.11);
    border-radius: 1.15rem;
    scroll-margin-top: 6rem;
}

.pd-site-community {
    background:
        radial-gradient(circle at 100% 20%, rgba(95, 215, 255, 0.13), transparent 35%),
        linear-gradient(145deg, rgba(16, 42, 59, 0.95), rgba(7, 18, 31, 0.98));
}

.pd-site-support {
    background:
        radial-gradient(circle at 100% 20%, rgba(244, 201, 109, 0.12), transparent 35%),
        linear-gradient(145deg, rgba(47, 37, 24, 0.94), rgba(7, 18, 31, 0.98));
}

.pd-site-community h2,
.pd-site-support h2 {
    max-width: 18ch;
    margin: 1.8rem 0 0.6rem;
    color: #f6fbff;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    letter-spacing: -0.04em;
}

.pd-site-community p,
.pd-site-support p {
    max-width: 35rem;
    margin: 0;
    color: #8298ab;
    font-size: 0.76rem;
    line-height: 1.6;
}

.pd-site-coming {
    display: inline-flex;
    margin-top: 1.15rem;
    padding: 0.42rem 0.65rem;
    border: 1px solid rgba(188, 225, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: #8aa2b5;
    font-size: 0.62rem;
    font-weight: 800;
}

.pd-site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(96rem, calc(100% - 2rem));
    margin: 0 auto;
    padding:
        1.2rem
        max(0px, var(--safe-right))
        calc(1.5rem + var(--safe-bottom))
        max(0px, var(--safe-left));
    border-top: 1px solid rgba(188, 225, 255, 0.08);
    color: #5f778d;
    font-size: 0.64rem;
}

/* The fullscreen API targets only the contained game viewport. */
.pd-gamebox__viewport:fullscreen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    aspect-ratio: auto;
    background: #061522;
}

.pd-gamebox__viewport:fullscreen .pd-game-ui {
    height: 100%;
    min-height: 100%;
}

.pd-gamebox__viewport:fullscreen .pd-game-stage {
    min-height: 100%;
}

@media (max-width: 1280px) {
    .pd-site-header__inner {
        grid-template-columns: minmax(13rem, 1fr) auto minmax(13rem, 1fr);
    }

    .pd-site-layout {
        grid-template-columns: minmax(0, 1fr) 17rem;
    }

    .pd-gamebox__identity {
        display: none;
    }

    .pd-gamebox__viewport {
        min-height: 27rem;
    }

    .pd-game-ship {
        right: 13%;
        transform: scale(0.9);
        transform-origin: bottom right;
    }

    .pd-game-stage__content {
        width: min(34rem, 62%);
    }
}

@media (max-width: 1100px) {
    .pd-site-header__inner {
        grid-template-columns: minmax(13rem, 1fr) auto;
    }

    .pd-site-nav {
        display: none;
    }

    .pd-site-layout {
        grid-template-columns: 1fr;
    }

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

    .pd-site-card {
        min-height: 100%;
    }

    .pd-site-card--featured {
        min-height: 100%;
    }

    .pd-gamebox__viewport {
        min-height: 30rem;
    }
}

@media (max-width: 820px) {
    .pd-site-main {
        width: min(100% - 1rem, 96rem);
        padding-top: 1.35rem;
    }

    .pd-site-intro {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .pd-site-intro > p {
        margin-left: 0;
    }

    .pd-gamebox__bar {
        align-items: flex-start;
    }

    .pd-gamebox__stat {
        display: none;
    }

    .pd-gamebox__fullscreen small {
        display: none;
    }

    .pd-gamebox__fullscreen {
        width: 2.65rem;
        padding-inline: 0;
    }

    .pd-site-sidebar {
        grid-template-columns: 1fr;
    }

    .pd-site-news-grid {
        grid-template-columns: 1fr;
    }

    .pd-site-community-grid {
        grid-template-columns: 1fr;
    }

    .pd-site-section__head {
        display: block;
    }

    .pd-site-section__head p {
        margin-top: 0.65rem;
        text-align: left;
    }
}

@media (max-width: 680px) {
    .pd-site-header {
        padding-inline: calc(0.5rem + var(--safe-right)) calc(0.5rem + var(--safe-left));
    }

    .pd-site-header__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
    }

    .pd-site-brand__crest {
        width: 2.65rem;
        height: 2.65rem;
        transform: scale(0.9);
        transform-origin: left center;
    }

    .pd-site-brand > span:last-child {
        margin-left: 0.38rem;
    }

    .pd-site-brand strong {
        font-size: 0.78rem;
    }

    .pd-site-brand small,
    .pd-site-online {
        display: none;
    }

    .pd-site-notice {
        align-items: flex-start;
        padding-inline: 0.65rem;
        text-align: left;
    }

    .pd-site-main {
        width: min(100% - 0.75rem, 96rem);
        padding-top: 1rem;
    }

    .pd-site-intro {
        margin-bottom: 0.9rem;
    }

    .pd-site-intro h1 {
        font-size: clamp(2rem, 12vw, 3rem);
    }

    .pd-gamebox {
        border-radius: 1rem;
    }

    .pd-gamebox__bar {
        padding: 0.55rem;
    }

    .pd-gamebox__title {
        min-width: 0;
    }

    .pd-gamebox__icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .pd-gamebox__title > span:last-child {
        margin-left: 0.5rem;
    }

    .pd-gamebox__avatar {
        width: 2.45rem;
        height: 2.45rem;
    }

    .pd-gamebox__identity {
        display: none;
    }

    .pd-gamebox__viewport {
        aspect-ratio: auto;
        min-height: 31rem;
    }

    .pd-game-ui {
        grid-template-columns: 1fr;
        min-height: 27rem;
    }

    .pd-game-nav {
        display: none;
    }

    .pd-game-stage {
        min-height: 27rem;
    }

    .pd-game-stage::before {
        background:
            linear-gradient(180deg, rgba(2, 14, 24, 0.06) 0%, rgba(2, 14, 24, 0.26) 44%, rgba(2, 13, 23, 0.92) 80%);
    }

    .pd-game-scene__sun {
        top: 7%;
        right: 8%;
        width: 5.8rem;
        height: 5.8rem;
    }

    .pd-game-scene__fort {
        right: 2%;
        bottom: 43%;
        transform: scale(0.7);
        transform-origin: bottom right;
    }

    .pd-game-ship {
        right: -10%;
        bottom: 22%;
        transform: scale(0.65);
    }

    .pd-game-stage__content {
        justify-content: flex-end;
        width: 100%;
        min-height: 27rem;
        padding: 1rem 1rem 4.3rem;
    }

    .pd-game-stage h2 {
        max-width: 10ch;
        margin-top: 0.6rem;
        font-size: clamp(2.3rem, 13vw, 3.8rem);
    }

    .pd-game-stage__content > p {
        max-width: 28rem;
        font-size: 0.75rem;
    }

    .pd-game-stage__actions {
        margin-top: 0.75rem;
    }

    .pd-game-action {
        min-width: 0;
        flex: 1 1 8rem;
        min-height: 3rem;
    }

    .pd-game-objective {
        display: none;
    }

    .pd-game-mobile-dock {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.15rem;
        min-height: 4rem;
        padding: 0.35rem;
        border-top: 1px solid rgba(188, 225, 255, 0.09);
        background: #071725;
    }

    .pd-game-mobile-dock button {
        display: grid;
        place-items: center;
        min-width: 0;
        padding: 0.25rem 0.1rem;
        border: 0;
        border-radius: 0.7rem;
        background: transparent;
        color: #617b92;
    }

    .pd-game-mobile-dock button[aria-current="page"] {
        background: rgba(95, 215, 255, 0.09);
        color: #d9f5ff;
    }

    .pd-game-mobile-dock button:disabled {
        opacity: 0.46;
    }

    .pd-game-mobile-dock span {
        font-size: 0.9rem;
    }

    .pd-game-mobile-dock small {
        max-width: 100%;
        overflow: hidden;
        font-size: 0.5rem;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pd-gamebox__footer {
        display: none;
    }

    .pd-site-section {
        margin-top: 1.8rem;
    }

    .pd-site-footer {
        width: min(100% - 1rem, 96rem);
    }
}

@media (max-width: 430px) {
    .pd-site-button {
        min-height: 2.4rem;
        padding-inline: 0.65rem;
        font-size: 0.62rem;
    }

    .pd-site-notice p {
        font-size: 0.62rem;
        line-height: 1.4;
    }

    .pd-gamebox__player {
        gap: 0.35rem;
    }

    .pd-gamebox__title strong {
        font-size: 0.78rem;
    }

    .pd-gamebox__avatar {
        display: none;
    }

    .pd-gamebox__viewport {
        min-height: 29rem;
    }

    .pd-game-ui,
    .pd-game-stage,
    .pd-game-stage__content {
        min-height: 25rem;
    }

    .pd-game-stage__content {
        padding-bottom: 1rem;
    }

    .pd-game-mobile-dock {
        min-height: 4rem;
    }

    .pd-news-card {
        min-height: 13rem;
    }

    .pd-site-footer {
        display: grid;
        justify-content: start;
    }
}

@media (max-height: 650px) and (orientation: landscape) {
    .pd-gamebox__viewport {
        min-height: 25rem;
    }

    .pd-game-stage__content {
        padding-block: 1.3rem;
    }

    .pd-game-stage h2 {
        font-size: clamp(2.3rem, 10vh, 4.3rem);
    }

    .pd-game-ship {
        transform: scale(0.75);
        transform-origin: bottom right;
    }
}

/* ============================================================
   Pirate Defense in-game client
   Scoped to the contained /play viewport so website/auth UI stays unchanged.
   ============================================================ */

.pd-client {
    --client-ink: #24170f;
    --client-cream: #fff1c9;
    --client-paper: #f5e5bf;
    --client-red: #b53b31;
    --client-red-dark: #782620;
    --client-gold: #f6c95f;
    --client-gold-dark: #a86718;
    --client-blue: #42a9df;
    --client-blue-dark: #174d74;
    --client-green: #69d8a2;
    isolation: isolate;
    font-family: Georgia, "Times New Roman", serif;
}

.pd-client,
.pd-client button {
    color: #fff;
}

.pd-client button {
    font-family: inherit;
}

.pd-client-screen {
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
}

/* ---------- Launch screen ---------- */

.pd-client-launch {
    display: grid;
    place-items: center;
    background:
        linear-gradient(180deg, rgba(6, 28, 62, 0.03), rgba(0, 16, 37, 0.28)),
        linear-gradient(180deg, #3d91d0 0 54%, #2e7db8 54% 58%, #0e567e 58% 100%);
}

.pd-client-launch__sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.pd-client-launch__sky::before {
    content: "";
    position: absolute;
    inset: 0 0 42%;
    background:
        radial-gradient(circle at 52% 18%, rgba(255, 255, 255, 0.9), transparent 2%),
        radial-gradient(circle at 28% 30%, rgba(255, 255, 255, 0.22), transparent 24%),
        linear-gradient(180deg, #236ec1 0%, #59b7e4 72%, #c5eaf5 100%);
}

.pd-client-launch__sky::after {
    content: "";
    position: absolute;
    inset: 58% -10% 0;
    background:
        repeating-radial-gradient(
            ellipse at 50% -10%,
            transparent 0 3.5rem,
            rgba(214, 245, 255, 0.23) 3.65rem 3.85rem,
            transparent 4rem 7rem
        ),
        linear-gradient(180deg, #1574a8, #074465);
    transform: perspective(16rem) rotateX(18deg);
    transform-origin: top center;
}

.pd-client-cloud {
    position: absolute;
    z-index: 1;
    width: 12rem;
    height: 3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    filter: blur(0.1rem);
    box-shadow:
        2.6rem -1.2rem 0 0.65rem rgba(255, 255, 255, 0.68),
        5.8rem 0.2rem 0 0.2rem rgba(255, 255, 255, 0.5);
    opacity: 0.82;
}

.pd-client-cloud--one {
    top: 12%;
    left: -4%;
    transform: scale(0.8) rotate(-3deg);
}

.pd-client-cloud--two {
    top: 20%;
    right: 8%;
    transform: scale(0.58);
    opacity: 0.5;
}

.pd-client-cloud--three {
    top: 38%;
    left: 38%;
    transform: scale(0.45);
    opacity: 0.34;
}

.pd-client-moon {
    position: absolute;
    top: 8%;
    right: 18%;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 999px;
    background: #ffe49a;
    box-shadow:
        0 0 0 1.2rem rgba(255, 231, 164, 0.09),
        0 0 5rem rgba(255, 222, 123, 0.42);
}

.pd-client-cliff {
    position: absolute;
    z-index: 2;
    right: -3%;
    bottom: 28%;
    width: 34%;
    height: 21%;
    clip-path: polygon(0 32%, 22% 8%, 55% 20%, 72% 0, 100% 14%, 100% 100%, 0 100%);
    background:
        linear-gradient(180deg, #4c7a57 0 26%, #315448 27% 42%, #223f3d 43% 100%);
    filter: drop-shadow(0 1.2rem 1rem rgba(0, 20, 28, 0.25));
}

.pd-client-lighthouse {
    position: absolute;
    z-index: 3;
    right: 15%;
    bottom: 45%;
    width: 2.8rem;
    height: 8rem;
    clip-path: polygon(18% 100%, 82% 100%, 66% 8%, 34% 8%);
    background:
        repeating-linear-gradient(0deg, #f4e3bd 0 1.15rem, #b64034 1.15rem 2.3rem);
    box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.24);
}

.pd-client-lighthouse::before {
    content: "";
    position: absolute;
    top: -0.7rem;
    left: 0.2rem;
    width: 2.4rem;
    height: 1.1rem;
    border-radius: 0.3rem 0.3rem 0 0;
    background: #3f2c25;
}

.pd-client-lighthouse::after {
    content: "";
    position: absolute;
    top: -0.2rem;
    left: -7.5rem;
    width: 8rem;
    height: 1.2rem;
    background: linear-gradient(90deg, transparent, rgba(255, 246, 185, 0.78));
    clip-path: polygon(0 48%, 100% 0, 100% 100%);
    filter: blur(0.2rem);
    opacity: 0.72;
}

.pd-client-launch-ship {
    position: absolute;
    z-index: 4;
    left: 7%;
    bottom: 9%;
    width: 18rem;
    height: 15rem;
    filter: drop-shadow(0 1.5rem 1.6rem rgba(0, 17, 28, 0.35));
    animation: pd-client-bob 5s ease-in-out infinite;
}

.pd-client-launch-ship__mast {
    position: absolute;
    left: 8.4rem;
    top: 0.6rem;
    width: 0.32rem;
    height: 10rem;
    border-radius: 999px;
    background: #6d3b1f;
}

.pd-client-launch-ship__sail {
    position: absolute;
    left: 3.4rem;
    top: 2rem;
    width: 5rem;
    height: 7.5rem;
    clip-path: polygon(100% 0, 100% 100%, 0 82%, 19% 12%);
    background:
        linear-gradient(90deg, transparent 0 44%, rgba(164, 54, 44, 0.92) 44% 65%, transparent 65%),
        repeating-linear-gradient(0deg, rgba(91, 62, 35, 0.08) 0 1px, transparent 1px 0.72rem),
        linear-gradient(145deg, #fff0c4, #dab879);
}

.pd-client-launch-ship__flag {
    position: absolute;
    left: 8.45rem;
    top: 0.75rem;
    width: 3.8rem;
    height: 1.5rem;
    clip-path: polygon(0 0, 100% 12%, 72% 50%, 100% 88%, 0 100%);
    background: #a7352e;
}

.pd-client-launch-ship__hull {
    position: absolute;
    left: 2rem;
    bottom: 0.6rem;
    width: 14rem;
    height: 5.2rem;
    clip-path: polygon(0 0, 100% 8%, 88% 72%, 59% 100%, 19% 78%);
    background:
        linear-gradient(168deg, #9a5d2b 0 33%, #5d311d 34% 70%, #321d18 71% 100%);
}

.pd-client-launch-ship__hull::before {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 1.1rem;
    top: 0.55rem;
    height: 0.62rem;
    background: repeating-linear-gradient(90deg, #b97935 0 1rem, #7e4924 1rem 1.16rem);
}

@keyframes pd-client-bob {
    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-0.55rem) rotate(1deg);
    }
}

.pd-client-utility {
    position: absolute;
    z-index: 12;
    top: 9%;
    left: 2%;
    display: grid;
    gap: 0.45rem;
}

.pd-client-utility button {
    display: grid;
    justify-items: center;
    gap: 0.12rem;
    width: 4.6rem;
    padding: 0.28rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    text-shadow: 0 0.12rem 0.18rem rgba(0, 0, 0, 0.55);
}

.pd-client-utility button span {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border: 0.18rem solid rgba(255, 255, 255, 0.74);
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 30%),
        linear-gradient(145deg, #5ca8dc, #275e95);
    box-shadow:
        0 0.3rem 0.65rem rgba(0, 27, 53, 0.26),
        inset 0 0 0 0.16rem rgba(18, 65, 107, 0.35);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 900;
}

.pd-client-utility button small {
    font-size: 0.62rem;
    font-weight: 800;
}

.pd-client-launch__content {
    position: relative;
    z-index: 10;
    display: grid;
    justify-items: center;
    width: min(29rem, calc(100% - 8rem));
    padding: 1.4rem 1.5rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.2rem;
    background: linear-gradient(180deg, rgba(20, 26, 35, 0.4), rgba(7, 15, 25, 0.62));
    box-shadow:
        0 1.6rem 5rem rgba(0, 22, 42, 0.26),
        inset 0 1px rgba(255, 255, 255, 0.14);
    text-align: center;
    backdrop-filter: blur(0.35rem);
}

.pd-client-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid rgba(255, 224, 137, 0.45);
    border-radius: 999px;
    background: rgba(70, 45, 14, 0.45);
    color: #ffe29a;
    font-family: var(--font-sans);
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-client-launch__content h2 {
    margin: 0.55rem 0 0;
    color: #fff4cb;
    font-size: clamp(2.5rem, 6vw, 5.8rem);
    line-height: 0.92;
    letter-spacing: -0.06em;
    text-shadow:
        0 0.16rem #704418,
        0 0.3rem 1.3rem rgba(0, 0, 0, 0.42);
}

.pd-client-launch__content > p {
    margin: 0.65rem 0 0.9rem;
    color: rgba(244, 250, 255, 0.86);
    font-family: var(--font-sans);
    font-size: 0.72rem;
}

.pd-client-launch__captain {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    width: min(22rem, 100%);
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.85rem;
    background: rgba(4, 18, 32, 0.46);
    text-align: left;
}

.pd-client-launch__avatar {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.6rem;
    border: 0.12rem solid rgba(255, 222, 139, 0.72);
    border-radius: 999px;
    background: linear-gradient(145deg, #347cb1, #163b63);
    color: #fff2c0;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 950;
}

.pd-client-launch__captain small,
.pd-client-launch__captain strong {
    display: block;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-client-launch__captain small {
    color: #9fc6df;
    font-family: var(--font-sans);
    font-size: 0.52rem;
}

.pd-client-launch__captain strong {
    margin-top: 0.06rem;
    color: #fff5d7;
    font-size: 0.78rem;
}

.pd-client-launch__realm {
    padding: 0.35rem 0.5rem;
    border-radius: 0.55rem;
    background: rgba(70, 198, 147, 0.18);
    color: #9af0c6;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 900;
}

.pd-client-primary {
    display: grid;
    place-items: center;
    min-width: min(18rem, 100%);
    min-height: 3.35rem;
    padding: 0.52rem 1rem;
    border: 0.16rem solid #7c4617;
    border-radius: 0.35rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 42%),
        linear-gradient(180deg, #ffd95e, #e89b20);
    box-shadow:
        0 0.26rem 0 #80430e,
        0 0.7rem 1.4rem rgba(67, 35, 7, 0.3),
        inset 0 0 0 0.12rem rgba(255, 245, 178, 0.75);
    color: #50300f;
    cursor: pointer;
    text-shadow: 0 1px rgba(255, 247, 183, 0.7);
    transition: transform 120ms ease, filter 120ms ease;
}

.pd-client-primary:hover {
    filter: brightness(1.05);
}

.pd-client-primary:active {
    transform: translateY(0.12rem);
    box-shadow:
        0 0.14rem 0 #80430e,
        0 0.4rem 0.9rem rgba(67, 35, 7, 0.28),
        inset 0 0 0 0.12rem rgba(255, 245, 178, 0.75);
}

.pd-client-primary span {
    font-size: 1rem;
    font-weight: 900;
}

.pd-client-primary small {
    margin-top: 0.04rem;
    color: #704713;
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 800;
}

.pd-client-launch__version {
    position: absolute;
    z-index: 10;
    right: 1rem;
    bottom: 0.8rem;
    display: grid;
    justify-items: end;
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--font-sans);
    font-size: 0.54rem;
    text-shadow: 0 0.12rem 0.2rem rgba(0, 0, 0, 0.5);
}

/* ---------- Realm selector ---------- */

.pd-client-realm {
    display: grid;
    place-items: center;
    background: #8e5740;
}

.pd-client-realm__backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(96, 49, 31, 0.12), rgba(25, 23, 31, 0.26)),
        radial-gradient(circle at 18% 22%, rgba(255, 214, 139, 0.62), transparent 22%),
        linear-gradient(135deg, #b57855, #6c4a5c 56%, #3d536f);
    filter: blur(0.2rem);
    transform: scale(1.03);
}

.pd-client-realm__backdrop::before,
.pd-client-realm__backdrop::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 236, 190, 0.22);
    filter: blur(1rem);
}

.pd-client-realm__backdrop::before {
    width: 22rem;
    height: 22rem;
    top: -7rem;
    left: -4rem;
}

.pd-client-realm__backdrop::after {
    width: 18rem;
    height: 18rem;
    right: -3rem;
    bottom: -5rem;
}

.pd-client-realm-panel {
    position: relative;
    z-index: 8;
    width: min(49rem, calc(100% - 8rem));
    min-height: min(25rem, calc(100% - 3rem));
    overflow: hidden;
    border: 0.24rem solid #a43e34;
    border-radius: 0.3rem;
    background: #f7edd3;
    box-shadow:
        0 1.3rem 4rem rgba(36, 19, 16, 0.46),
        inset 0 0 0 0.12rem rgba(255, 255, 255, 0.65);
    color: var(--client-ink);
}

.pd-client-realm-panel::before {
    content: "";
    position: absolute;
    inset: 3.8rem 0 3.7rem;
    pointer-events: none;
    background:
        radial-gradient(circle at 74% 45%, transparent 0 6.8rem, rgba(117, 88, 55, 0.06) 6.9rem 7rem, transparent 7.1rem),
        repeating-linear-gradient(115deg, rgba(113, 83, 50, 0.025) 0 1px, transparent 1px 1.2rem);
}

.pd-client-realm-panel__head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.8rem;
    padding: 0.55rem 0.8rem 0.55rem 1rem;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(180deg, #d94f45, #b33831);
    color: #fff5df;
    text-shadow: 0 0.12rem rgba(93, 23, 20, 0.5);
}

.pd-client-realm-panel__head small,
.pd-client-realm-panel__head strong {
    display: block;
}

.pd-client-realm-panel__head small {
    color: #ffd3b1;
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-client-realm-panel__head strong {
    margin-top: 0.1rem;
    font-size: 1.35rem;
}

.pd-client-realm-panel__head > button {
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    text-shadow: 0 0.12rem rgba(72, 21, 17, 0.5);
}

.pd-client-realm-panel__body {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
    min-height: 18rem;
}

.pd-client-realm-tabs {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 0.8rem 0.55rem;
    border-right: 1px solid rgba(102, 65, 39, 0.18);
    background:
        linear-gradient(180deg, rgba(173, 89, 64, 0.9), rgba(132, 64, 50, 0.92));
}

.pd-client-realm-tabs > span {
    margin: 0.4rem 0 0.05rem;
    color: rgba(255, 231, 209, 0.82);
    font-family: var(--font-sans);
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-client-realm-tabs button {
    min-height: 2.65rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, #6ab8f0, #4899dd);
    color: #eef8ff;
    cursor: pointer;
    font-weight: 900;
    text-shadow: 0 0.1rem rgba(31, 85, 131, 0.5);
}

.pd-client-realm-tabs button.is-active {
    min-height: 3.1rem;
    border-color: #8e4b18;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 38%),
        linear-gradient(180deg, #ffe276, #f2b632);
    color: #673b16;
    text-shadow: 0 1px rgba(255, 246, 185, 0.7);
}

.pd-client-realm-tabs button:disabled {
    cursor: default;
    opacity: 0.8;
}

.pd-client-realm-list {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.7rem;
    padding: 1rem;
}

.pd-client-realm-list__intro span,
.pd-client-realm-list__intro strong {
    display: block;
}

.pd-client-realm-list__intro span {
    color: #9b7750;
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pd-client-realm-list__intro strong {
    margin-top: 0.08rem;
    color: #5f351d;
    font-size: 1.05rem;
}

.pd-client-realm-card {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.72rem;
    border: 0.14rem solid rgba(146, 90, 52, 0.34);
    border-radius: 0.2rem;
    background: rgba(255, 252, 239, 0.76);
    color: #5c341d;
    cursor: pointer;
    text-align: left;
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.pd-client-realm-card.is-selected {
    border-color: #c48b3e;
    box-shadow:
        0 0 0 0.15rem rgba(255, 211, 106, 0.38),
        0 0.5rem 1.3rem rgba(99, 58, 26, 0.12);
}

.pd-client-realm-card__code {
    min-width: 2.6rem;
    font-size: 1.05rem;
    font-weight: 900;
}

.pd-client-realm-card__avatar {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border: 0.14rem solid #c38d45;
    border-radius: 999px;
    background: linear-gradient(145deg, #4f95c1, #1d4d77);
    color: #fff1c1;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 950;
}

.pd-client-realm-card__name strong,
.pd-client-realm-card__name small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-client-realm-card__name strong {
    font-size: 1rem;
}

.pd-client-realm-card__name small {
    margin-top: 0.18rem;
    color: #9f7c56;
    font-family: var(--font-sans);
    font-size: 0.55rem;
}

.pd-client-realm-card__status {
    padding: 0.3rem 0.48rem;
    border-radius: 999px;
    background: #e3f5e8;
    color: #2f8a58;
    font-family: var(--font-sans);
    font-size: 0.52rem;
    font-weight: 900;
}

.pd-client-realm-list__empty {
    display: grid;
    place-items: center;
    min-height: 7rem;
    margin-top: 0.3rem;
    border: 1px dashed rgba(129, 91, 56, 0.2);
    border-radius: 0.35rem;
    color: #b18d66;
    text-align: center;
}

.pd-client-realm-list__empty span {
    font-size: 1.5rem;
    opacity: 0.38;
}

.pd-client-realm-list__empty p {
    max-width: 17rem;
    margin: 0.35rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    line-height: 1.45;
}

.pd-client-realm-panel__foot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.7rem;
    padding: 0.55rem 0.8rem;
    border-top: 1px solid rgba(105, 70, 44, 0.16);
    background: #ead8b4;
}

.pd-client-realm-panel__foot > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #8b6a48;
    font-family: var(--font-sans);
    font-size: 0.54rem;
}

.pd-client-realm-panel__foot i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #48bb7d;
    box-shadow: 0 0 0.6rem rgba(72, 187, 125, 0.5);
}

.pd-client-primary--compact {
    min-width: 8.5rem;
    min-height: 2.55rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
}

/* ---------- Loading screen ---------- */

.pd-client-loading {
    display: grid;
    place-items: center;
    background: #9cd7ef;
}

.pd-client-loading__sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.92), transparent 14%),
        linear-gradient(180deg, #4e9ddd 0%, #a9daf3 58%, #eff8fd 100%);
}

.pd-client-loading__sky::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -12%;
    height: 48%;
    background:
        radial-gradient(ellipse at 14% 60%, #fff 0 16%, transparent 17%),
        radial-gradient(ellipse at 38% 48%, #fff 0 18%, transparent 19%),
        radial-gradient(ellipse at 63% 60%, #fff 0 17%, transparent 18%),
        radial-gradient(ellipse at 88% 46%, #fff 0 20%, transparent 21%);
    filter: drop-shadow(0 -1rem 2rem rgba(255, 255, 255, 0.8));
}

.pd-client-loading__cloud {
    position: absolute;
    width: 20rem;
    height: 6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    filter: blur(0.3rem);
}

.pd-client-loading__cloud--one {
    left: -3rem;
    top: 17%;
    box-shadow:
        4rem -2rem 0 1rem rgba(255, 255, 255, 0.82),
        9rem 0 0 0.5rem rgba(255, 255, 255, 0.65);
}

.pd-client-loading__cloud--two {
    right: -3rem;
    top: 28%;
    transform: scale(0.7);
    opacity: 0.7;
}

.pd-client-loading__island {
    position: absolute;
    left: 38%;
    top: 20%;
    width: 22rem;
    height: 11rem;
    border-radius: 50% 50% 35% 35%;
    background:
        radial-gradient(circle at 42% 34%, #d8e6d3 0 0.8rem, transparent 0.9rem),
        linear-gradient(180deg, #8dcb7b 0 28%, #6f9768 29% 43%, #7d735f 44% 100%);
    clip-path: polygon(6% 38%, 25% 11%, 48% 20%, 69% 0, 96% 29%, 84% 69%, 55% 88%, 27% 78%);
    filter:
        drop-shadow(0 2rem 2.4rem rgba(52, 94, 121, 0.25))
        blur(0.1px);
    opacity: 0.78;
}

.pd-client-loading__ship {
    position: absolute;
    right: 22%;
    bottom: 25%;
    width: 7rem;
    height: 5rem;
    animation: pd-client-loading-ship 4.5s ease-in-out infinite;
}

.pd-client-loading__ship::before {
    content: "";
    position: absolute;
    left: 2.7rem;
    top: 0;
    width: 0.15rem;
    height: 3.2rem;
    background: #76502d;
}

.pd-client-loading__ship::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 0.4rem;
    width: 1.7rem;
    height: 2.4rem;
    clip-path: polygon(100% 0, 100% 100%, 0 78%, 18% 14%);
    background: #f4dfb0;
}

.pd-client-loading__ship span {
    position: absolute;
    left: 0.4rem;
    bottom: 0;
    width: 6rem;
    height: 2rem;
    clip-path: polygon(0 0, 100% 15%, 75% 88%, 40% 100%, 12% 70%);
    background: #82502d;
}

@keyframes pd-client-loading-ship {
    0%,
    100% {
        transform: translate(0, 0) rotate(-2deg);
    }

    50% {
        transform: translate(-1rem, -0.7rem) rotate(2deg);
    }
}

.pd-client-loading__brand {
    position: relative;
    z-index: 4;
    display: grid;
    justify-items: center;
    margin-top: -5rem;
    text-shadow: 0 0.2rem 0.5rem rgba(34, 78, 112, 0.25);
}

.pd-client-loading__brand span {
    color: #466f8f;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pd-client-loading__brand strong {
    margin-top: 0.2rem;
    color: #fff8e3;
    font-size: clamp(2.2rem, 5vw, 4.7rem);
}

.pd-client-loading__footer {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.55rem 0.9rem 0.8rem;
    background: linear-gradient(180deg, rgba(23, 62, 92, 0.08), rgba(19, 52, 80, 0.82));
    text-align: center;
}

.pd-client-loading__bar {
    height: 0.36rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(13, 44, 70, 0.25);
}

.pd-client-loading__bar span {
    display: block;
    width: 4%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5fd7ff, #fff1a8);
    box-shadow: 0 0 1rem rgba(95, 215, 255, 0.6);
    transition: width 240ms ease;
}

.pd-client-loading__footer p {
    margin: 0.35rem 0 0;
    color: #f3f8fc;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 800;
}

.pd-client-loading__footer small {
    display: block;
    margin-top: 0.15rem;
    color: rgba(232, 244, 252, 0.8);
    font-family: var(--font-sans);
    font-size: 0.54rem;
}

/* ---------- Harbor home ---------- */

.pd-client-harbor {
    background: #7b442a;
}

.pd-client-tavern {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 73% 12%, rgba(255, 184, 83, 0.18), transparent 20%),
        linear-gradient(180deg, #815038 0%, #5b321f 44%, #422319 100%);
}

.pd-client-tavern__wall {
    position: absolute;
    inset: 0 0 34%;
    background:
        repeating-linear-gradient(90deg, transparent 0 7.8rem, rgba(55, 27, 17, 0.5) 7.8rem 8.35rem),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 4rem, rgba(78, 38, 22, 0.18) 4rem 4.2rem),
        linear-gradient(180deg, #87543b, #6e402b);
}

.pd-client-tavern__window {
    position: absolute;
    left: 4%;
    top: 14%;
    width: 15%;
    height: 31%;
    border: 0.65rem solid #54301f;
    border-radius: 0.4rem 0.4rem 42% 42%;
    background:
        linear-gradient(90deg, transparent 47%, rgba(84, 48, 31, 0.9) 48% 53%, transparent 54%),
        linear-gradient(0deg, transparent 48%, rgba(84, 48, 31, 0.9) 49% 54%, transparent 55%),
        linear-gradient(180deg, #8dd6ef, #d9f4ff);
    box-shadow:
        0 0 0 0.28rem rgba(133, 85, 51, 0.6),
        0 0 3rem rgba(151, 221, 244, 0.22);
}

.pd-client-tavern__sunbeam {
    position: absolute;
    left: 11%;
    top: 37%;
    width: 34%;
    height: 42%;
    clip-path: polygon(0 0, 52% 0, 100% 100%, 27% 100%);
    background: linear-gradient(90deg, rgba(255, 226, 157, 0.2), transparent);
    filter: blur(0.35rem);
}

.pd-client-tavern__shelf {
    position: absolute;
    right: 8%;
    width: 30%;
    height: 1.2rem;
    border-top: 0.2rem solid #9d6539;
    background: #59331f;
    box-shadow: 0 0.5rem 0.8rem rgba(33, 15, 9, 0.25);
}

.pd-client-tavern__shelf::before {
    content: "◉  ◍  ◉  ◍  ◉";
    position: absolute;
    left: 8%;
    bottom: 0.9rem;
    color: #c58f57;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    letter-spacing: 0.55rem;
    text-shadow: 0 -0.1rem #4b2a1c;
}

.pd-client-tavern__shelf--one {
    top: 18%;
}

.pd-client-tavern__shelf--two {
    top: 31%;
    right: 3%;
    width: 36%;
}

.pd-client-tavern__bar {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 29%;
    height: 7%;
    border-top: 0.45rem solid #c27b3d;
    background:
        repeating-linear-gradient(90deg, #8a4d27 0 4rem, #73401f 4rem 4.25rem);
    box-shadow: 0 0.8rem 1.2rem rgba(36, 17, 10, 0.38);
}

.pd-client-tavern__bar-front {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 31%;
    border-top: 0.4rem solid #6f3b20;
    background:
        repeating-linear-gradient(90deg, rgba(65, 30, 17, 0.24) 0 0.18rem, transparent 0.18rem 7rem),
        linear-gradient(180deg, #8d4c29, #63321e);
}

.pd-client-tavern__bar-front::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 26%;
    background: linear-gradient(180deg, #8f2630, #671f29);
}

.pd-client-tavern__stool {
    position: absolute;
    z-index: 3;
    bottom: 9%;
    width: 4.5rem;
    height: 8.5rem;
    border-top: 0.75rem solid #7d4828;
    border-left: 0.36rem solid #6a3b23;
    border-right: 0.36rem solid #6a3b23;
}

.pd-client-tavern__stool--one {
    right: 23%;
}

.pd-client-tavern__stool--two {
    right: 8%;
    transform: scale(0.88);
}

.pd-client-tavern__barrel {
    position: absolute;
    z-index: 3;
    bottom: 31%;
    width: 5rem;
    height: 5rem;
    border-radius: 45% 45% 24% 24%;
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(77, 39, 21, 0.34) 16% 20%, transparent 20% 80%, rgba(77, 39, 21, 0.34) 80% 84%, transparent 84%),
        linear-gradient(180deg, #a86832, #754222);
    box-shadow:
        inset 0 0.55rem #c0803c,
        inset 0 -0.55rem #4f2a1a;
}

.pd-client-tavern__barrel--one {
    left: 22%;
}

.pd-client-tavern__barrel--two {
    left: 30%;
    transform: scale(0.78);
}

.pd-client-tavern__lantern {
    position: absolute;
    z-index: 4;
    top: 4%;
    width: 1.7rem;
    height: 2.6rem;
    border: 0.22rem solid #4b2a1b;
    border-radius: 0.35rem 0.35rem 0.6rem 0.6rem;
    background: #ffc762;
    box-shadow:
        0 0 0 0.7rem rgba(255, 180, 73, 0.08),
        0 0 2rem rgba(255, 166, 51, 0.32);
}

.pd-client-tavern__lantern--one {
    left: 31%;
}

.pd-client-tavern__lantern--two {
    right: 32%;
}

.pd-client-tavern__keeper {
    position: absolute;
    z-index: 4;
    left: 55%;
    bottom: 35%;
    width: 8rem;
    height: 11rem;
}

.pd-client-tavern__keeper-head {
    position: absolute;
    left: 2.3rem;
    top: 0.7rem;
    width: 3.2rem;
    height: 3.4rem;
    border-radius: 48% 48% 42% 42%;
    background:
        linear-gradient(140deg, transparent 0 54%, #8e4b34 55% 100%),
        #e5ad79;
    box-shadow: 0 -0.8rem 0 #45251d;
}

.pd-client-tavern__keeper-body {
    position: absolute;
    left: 0.5rem;
    bottom: 0;
    width: 7rem;
    height: 7.5rem;
    border-radius: 48% 48% 18% 18%;
    background:
        linear-gradient(90deg, transparent 46%, #f2d3a8 46% 54%, transparent 54%),
        linear-gradient(150deg, #1c6477, #0e3f54);
}

.pd-client-hud {
    position: absolute;
    z-index: 12;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.65rem;
    background: linear-gradient(180deg, rgba(28, 15, 10, 0.68), rgba(28, 15, 10, 0));
    pointer-events: none;
}

.pd-client-hud button,
.pd-client-hud .pd-client-captain-hud,
.pd-client-hud .pd-client-resources {
    pointer-events: auto;
}

.pd-client-captain-hud {
    display: grid;
    grid-template-columns: auto minmax(0, auto) auto auto;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    text-shadow: 0 0.12rem 0.2rem rgba(0, 0, 0, 0.72);
}

.pd-client-captain-hud__avatar {
    display: grid;
    place-items: center;
    width: 3.3rem;
    height: 3.3rem;
    border: 0.18rem solid #f6c95f;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.24), transparent 30%),
        linear-gradient(145deg, #5a9fd0, #1b4e78);
    box-shadow:
        0 0 0 0.18rem rgba(85, 36, 16, 0.82),
        0 0.35rem 0.7rem rgba(0, 0, 0, 0.25);
    color: #fff4c8;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 950;
}

.pd-client-captain-hud__identity {
    min-width: 0;
}

.pd-client-captain-hud__identity strong,
.pd-client-captain-hud__identity small {
    display: block;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-client-captain-hud__identity strong {
    color: #fff2c2;
    font-size: 1.1rem;
}

.pd-client-captain-hud__identity small {
    color: #d7c2a6;
    font-family: var(--font-sans);
    font-size: 0.52rem;
}

.pd-client-level {
    display: grid;
    place-items: center;
    min-width: 2.6rem;
    min-height: 1.8rem;
    border: 0.12rem solid #c9822e;
    border-radius: 999px;
    background: #7e3f24;
    color: #ffe5a1;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 950;
}

.pd-client-power {
    display: grid;
    padding: 0.28rem 0.5rem;
    border-left: 0.16rem solid rgba(246, 201, 95, 0.55);
    font-family: var(--font-sans);
}

.pd-client-power small {
    color: #d9b891;
    font-size: 0.44rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pd-client-power strong {
    color: #fff0b7;
    font-size: 0.78rem;
}

.pd-client-resources {
    display: flex;
    align-items: center;
    gap: 0.36rem;
}

.pd-client-resources > span {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.28rem 0.25rem 0.38rem;
    border: 0.1rem solid rgba(255, 225, 170, 0.28);
    border-radius: 999px;
    background: rgba(38, 22, 16, 0.74);
    box-shadow: 0 0.25rem 0.7rem rgba(0, 0, 0, 0.2);
    font-family: var(--font-sans);
}

.pd-client-resources i {
    margin-right: 0.25rem;
    color: #ffd766;
    font-style: normal;
    font-size: 0.72rem;
}

.pd-client-resources strong {
    min-width: 3.4rem;
    color: #fff0ca;
    font-size: 0.63rem;
}

.pd-client-resources button {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    border-radius: 999px;
    background: #d14c3d;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 900;
}

.pd-client-event-strip {
    position: absolute;
    z-index: 11;
    top: 4rem;
    right: 1%;
    display: flex;
    justify-content: flex-end;
    gap: 0.28rem;
    max-width: 58%;
}

.pd-client-event-strip button,
.pd-client-side-actions button,
.pd-client-dock button {
    position: relative;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-shadow: 0 0.1rem 0.18rem rgba(0, 0, 0, 0.72);
}

.pd-client-event-strip button {
    display: grid;
    justify-items: center;
    width: 4.2rem;
    padding: 0.15rem;
}

.pd-client-event-strip button span {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 0.16rem solid rgba(255, 234, 180, 0.72);
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.34), transparent 30%),
        linear-gradient(145deg, #d9953c, #8b4b23);
    box-shadow:
        0 0.25rem 0.65rem rgba(0, 0, 0, 0.28),
        inset 0 0 0 0.12rem rgba(96, 48, 19, 0.3);
    color: #fff1b9;
    font-family: var(--font-sans);
    font-size: 1.2rem;
}

.pd-client-event-strip button:nth-child(2n) span {
    background:
        radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.3), transparent 30%),
        linear-gradient(145deg, #5ba4d4, #2a5f91);
}

.pd-client-event-strip button small {
    max-width: 4.2rem;
    margin-top: -0.1rem;
    color: #fff3d7;
    font-size: 0.5rem;
    font-weight: 900;
    line-height: 1;
}

.pd-client-event-strip i,
.pd-client-side-actions i,
.pd-client-dock i {
    position: absolute;
    top: 0.05rem;
    right: 0.35rem;
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 999px;
    background: #e84b3d;
    box-shadow: 0 0 0 0.12rem rgba(255, 234, 202, 0.8);
}

.pd-client-side-actions {
    position: absolute;
    z-index: 11;
    left: 1%;
    top: 37%;
    display: grid;
    gap: 0.45rem;
}

.pd-client-side-actions button {
    display: grid;
    justify-items: center;
    width: 4.3rem;
    padding: 0.2rem;
}

.pd-client-side-actions button span {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.7rem 0.7rem 1.2rem 1.2rem;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 30%),
        linear-gradient(145deg, #d78d3a, #7d4020);
    box-shadow:
        0 0.25rem 0.65rem rgba(0, 0, 0, 0.32),
        inset 0 0 0 0.12rem rgba(255, 224, 168, 0.35);
    color: #ffe6a6;
    font-family: var(--font-sans);
    font-size: 1.1rem;
}

.pd-client-side-actions button small {
    color: #fff1d8;
    font-size: 0.52rem;
    font-weight: 900;
}

.pd-client-hotspot {
    position: absolute;
    z-index: 10;
    left: 48%;
    top: 47%;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem 0.35rem 0.35rem;
    border: 0.12rem solid rgba(255, 232, 182, 0.3);
    border-radius: 999px;
    background: rgba(59, 31, 18, 0.68);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.24);
    cursor: pointer;
    backdrop-filter: blur(0.2rem);
}

.pd-client-hotspot__portrait {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 0.12rem solid #f0c067;
    border-radius: 999px;
    background: linear-gradient(145deg, #bc7440, #70351f);
}

.pd-client-hotspot small,
.pd-client-hotspot strong {
    display: block;
    text-align: left;
}

.pd-client-hotspot small {
    color: #d8b996;
    font-family: var(--font-sans);
    font-size: 0.43rem;
    text-transform: uppercase;
}

.pd-client-hotspot strong {
    color: #fff0bc;
    font-size: 0.7rem;
}

.pd-client-hotspot > i {
    color: #ffd474;
    font-style: normal;
    font-size: 1.25rem;
}

.pd-client-quest {
    position: absolute;
    z-index: 10;
    right: 1%;
    bottom: 18%;
    width: 14rem;
    padding: 0.65rem;
    border: 0.12rem solid rgba(255, 225, 177, 0.25);
    border-radius: 0.75rem;
    background:
        linear-gradient(180deg, rgba(72, 35, 18, 0.82), rgba(40, 23, 17, 0.9));
    box-shadow: 0 0.65rem 1.4rem rgba(0, 0, 0, 0.28);
}

.pd-client-quest > span {
    color: #e4b873;
    font-family: var(--font-sans);
    font-size: 0.46rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-client-quest strong {
    display: block;
    margin-top: 0.18rem;
    color: #fff0bc;
    font-size: 0.82rem;
}

.pd-client-quest p {
    margin: 0.25rem 0 0.5rem;
    color: #c4ad98;
    font-family: var(--font-sans);
    font-size: 0.53rem;
    line-height: 1.45;
}

.pd-client-quest button {
    min-height: 1.7rem;
    padding: 0.28rem 0.55rem;
    border: 0.1rem solid rgba(255, 215, 128, 0.35);
    border-radius: 999px;
    background: rgba(244, 176, 70, 0.15);
    color: #ffd98e;
    cursor: pointer;
    font-size: 0.52rem;
    font-weight: 900;
}

.pd-client-social-bar {
    position: absolute;
    z-index: 12;
    left: 1%;
    bottom: 1%;
    display: flex;
    gap: 0.2rem;
}

.pd-client-social-bar button {
    min-width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: rgba(72, 36, 22, 0.8);
    color: #ffe6b0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 900;
}

.pd-client-dock {
    position: absolute;
    z-index: 12;
    left: 50%;
    bottom: 0.45%;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 0.18rem;
    width: min(73%, 48rem);
    transform: translateX(-50%);
}

.pd-client-dock button {
    display: grid;
    justify-items: center;
    width: 5.4rem;
    min-width: 0;
    padding: 0.1rem;
}

.pd-client-dock button span {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 0.14rem solid rgba(255, 228, 174, 0.68);
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.26), transparent 32%),
        linear-gradient(145deg, #cd8738, #73401f);
    box-shadow:
        0 0.3rem 0.75rem rgba(0, 0, 0, 0.34),
        inset 0 0 0 0.15rem rgba(99, 48, 20, 0.34);
    color: #ffe7a9;
    font-family: var(--font-sans);
    font-size: 1.25rem;
}

.pd-client-dock button:nth-child(3n) span {
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.24), transparent 32%),
        linear-gradient(145deg, #5b9bc2, #285775);
}

.pd-client-dock button small {
    margin-top: -0.15rem;
    color: #fff0d3;
    font-size: 0.52rem;
    font-weight: 900;
    white-space: nowrap;
}

.pd-client-home-menu {
    position: absolute;
    z-index: 13;
    right: 0.55rem;
    bottom: 0.5rem;
    display: none;
    width: 2.7rem;
    height: 2.7rem;
    border: 0.12rem solid rgba(255, 226, 169, 0.42);
    border-radius: 999px;
    background: rgba(64, 31, 19, 0.84);
    color: #ffe7b2;
    cursor: pointer;
    font-family: var(--font-sans);
}

/* ---------- In-game modal / feedback ---------- */

.pd-client-panel {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.pd-client-panel__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17, 10, 7, 0.66);
    cursor: pointer;
    backdrop-filter: blur(0.15rem);
}

.pd-client-panel__card {
    position: relative;
    width: min(30rem, calc(100% - 2rem));
    overflow: hidden;
    border: 0.2rem solid #b64136;
    border-radius: 0.4rem;
    background: #f5e6c1;
    color: #5f341e;
    box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.44);
}

.pd-client-panel__card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
    background: linear-gradient(180deg, #d95447, #b83a31);
    color: #fff4dc;
}

.pd-client-panel__card > header small,
.pd-client-panel__card > header strong {
    display: block;
}

.pd-client-panel__card > header small {
    color: #ffd0ad;
    font-family: var(--font-sans);
    font-size: 0.48rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pd-client-panel__card > header strong {
    margin-top: 0.08rem;
    font-size: 1.1rem;
}

.pd-client-panel__card > header button {
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 1.7rem;
}

.pd-client-panel__body {
    display: grid;
    place-items: center;
    min-height: 10rem;
    padding: 1.2rem;
    text-align: center;
}

.pd-client-panel__emblem {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border: 0.14rem solid #d5a15a;
    border-radius: 999px;
    background: #ecd7ad;
    color: #a56726;
    font-size: 1.5rem;
}

.pd-client-panel__body p {
    max-width: 22rem;
    margin: 0.7rem 0 0;
    color: #8f6a49;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    line-height: 1.55;
}

.pd-client-panel__card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.7rem;
    border-top: 1px solid rgba(105, 72, 43, 0.16);
    background: #ead7b0;
    color: #90704e;
    font-family: var(--font-sans);
    font-size: 0.52rem;
}

.pd-client-panel__card > footer button {
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border: 0.1rem solid #9c632d;
    border-radius: 0.25rem;
    background: linear-gradient(180deg, #ffd36b, #e9a72e);
    color: #5c3415;
    cursor: pointer;
    font-size: 0.58rem;
    font-weight: 900;
}

.pd-client-toast {
    position: absolute;
    z-index: 60;
    left: 50%;
    bottom: 5.8rem;
    max-width: min(25rem, calc(100% - 2rem));
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(255, 227, 174, 0.25);
    border-radius: 999px;
    background: rgba(48, 25, 16, 0.9);
    color: #ffe4aa;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 800;
    text-align: center;
    transform: translateX(-50%);
    box-shadow: 0 0.7rem 1.7rem rgba(0, 0, 0, 0.28);
}

/* Keep the game client self-contained in fullscreen. */
.pd-gamebox__viewport:fullscreen .pd-client-screen {
    min-height: 100%;
}

.pd-gamebox__viewport:fullscreen .pd-client-launch__content {
    transform: scale(1.18);
}

.pd-gamebox__viewport:fullscreen .pd-client-event-strip {
    top: 5rem;
}

.pd-gamebox__viewport:fullscreen .pd-client-dock {
    bottom: 1.2%;
}

/* ---------- Client responsiveness ---------- */

@media (max-width: 1100px) {
    .pd-client-event-strip {
        max-width: 52%;
    }

    .pd-client-event-strip button {
        width: 3.55rem;
    }

    .pd-client-event-strip button span {
        width: 2.55rem;
        height: 2.55rem;
    }

    .pd-client-dock button {
        width: 4.8rem;
    }

    .pd-client-dock button span {
        width: 3.15rem;
        height: 3.15rem;
    }
}

@media (max-width: 820px) {
    .pd-client-launch__content {
        width: min(25rem, calc(100% - 6rem));
    }

    .pd-client-realm-panel {
        width: min(45rem, calc(100% - 5.5rem));
    }

    .pd-client-event-strip button:nth-child(4) {
        display: none;
    }

    .pd-client-power {
        display: none;
    }

    .pd-client-quest {
        width: 12rem;
    }
}

@media (max-width: 680px) {
    .pd-gamebox__viewport.pd-client {
        min-height: 31rem;
    }

    .pd-client-utility {
        top: 4%;
        left: 1%;
        gap: 0.2rem;
    }

    .pd-client-utility button {
        width: 3.5rem;
    }

    .pd-client-utility button span {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 0.85rem;
    }

    .pd-client-utility button small {
        font-size: 0.48rem;
    }

    .pd-client-launch__content {
        width: min(23rem, calc(100% - 5rem));
        padding: 1rem;
    }

    .pd-client-launch__content h2 {
        font-size: clamp(2.5rem, 13vw, 4.2rem);
    }

    .pd-client-launch-ship {
        left: -4%;
        bottom: 7%;
        transform: scale(0.72);
        transform-origin: bottom left;
    }

    .pd-client-cliff {
        right: -12%;
        width: 48%;
    }

    .pd-client-lighthouse {
        right: 14%;
        transform: scale(0.74);
        transform-origin: bottom center;
    }

    .pd-client-realm-panel {
        width: calc(100% - 4.6rem);
        min-height: calc(100% - 1rem);
    }

    .pd-client-realm-panel__body {
        grid-template-columns: 7.4rem minmax(0, 1fr);
    }

    .pd-client-realm-tabs {
        padding-inline: 0.35rem;
    }

    .pd-client-realm-tabs button {
        font-size: 0.66rem;
    }

    .pd-client-realm-card {
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 0.42rem;
        padding: 0.55rem;
    }

    .pd-client-realm-card__status {
        display: none;
    }

    .pd-client-realm-card__avatar {
        width: 2.6rem;
        height: 2.6rem;
    }

    .pd-client-realm-list__empty {
        min-height: 5rem;
    }

    .pd-client-hud {
        padding: 0.38rem;
    }

    .pd-client-captain-hud {
        gap: 0.28rem;
    }

    .pd-client-captain-hud__avatar {
        width: 2.8rem;
        height: 2.8rem;
    }

    .pd-client-captain-hud__identity strong {
        max-width: 7rem;
        font-size: 0.85rem;
    }

    .pd-client-level {
        min-width: 2.25rem;
    }

    .pd-client-resources {
        gap: 0.2rem;
    }

    .pd-client-resources > span {
        padding-left: 0.3rem;
    }

    .pd-client-resources > span:nth-child(2) {
        display: none;
    }

    .pd-client-resources strong {
        min-width: 2.8rem;
        font-size: 0.55rem;
    }

    .pd-client-event-strip {
        top: 3.6rem;
        right: 0.2rem;
        max-width: 56%;
        gap: 0.05rem;
    }

    .pd-client-event-strip button {
        width: 3.15rem;
    }

    .pd-client-event-strip button span {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.9rem;
    }

    .pd-client-event-strip button small {
        font-size: 0.42rem;
    }

    .pd-client-event-strip button:nth-child(3),
    .pd-client-event-strip button:nth-child(4) {
        display: none;
    }

    .pd-client-side-actions {
        top: 33%;
    }

    .pd-client-side-actions button {
        width: 3.5rem;
    }

    .pd-client-side-actions button span {
        width: 2.55rem;
        height: 2.55rem;
    }

    .pd-client-hotspot {
        left: 42%;
        top: 48%;
        transform: scale(0.82);
        transform-origin: left center;
    }

    .pd-client-quest {
        right: 0.35rem;
        bottom: 20%;
        width: 10.5rem;
    }

    .pd-client-quest p {
        display: none;
    }

    .pd-client-dock {
        left: 3.8rem;
        right: 3.4rem;
        width: auto;
        gap: 0.02rem;
        transform: none;
    }

    .pd-client-dock button {
        width: auto;
        flex: 1 1 0;
    }

    .pd-client-dock button span {
        width: 2.65rem;
        height: 2.65rem;
        font-size: 0.95rem;
    }

    .pd-client-dock button small {
        font-size: 0.42rem;
    }

    .pd-client-dock button:nth-child(4),
    .pd-client-dock button:nth-child(5) {
        display: none;
    }

    .pd-client-home-menu {
        display: grid;
        place-items: center;
    }

    .pd-client-social-bar {
        bottom: 0.4rem;
    }
}

@media (max-width: 430px) {
    .pd-gamebox__viewport.pd-client {
        min-height: 29rem;
    }

    .pd-client-launch__content {
        width: min(20rem, calc(100% - 4.3rem));
    }

    .pd-client-launch__captain {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pd-client-launch__realm {
        display: none;
    }

    .pd-client-realm-panel {
        width: calc(100% - 0.8rem);
    }

    .pd-client-utility {
        display: none;
    }

    .pd-client-realm-panel__body {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }

    .pd-client-realm-list {
        padding: 0.65rem;
    }

    .pd-client-realm-card__code {
        display: none;
    }

    .pd-client-realm-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pd-client-realm-panel__foot > span {
        display: none;
    }

    .pd-client-realm-panel__foot {
        justify-content: flex-end;
    }

    .pd-client-captain-hud__identity small,
    .pd-client-level {
        display: none;
    }

    .pd-client-event-strip button:nth-child(2) {
        display: none;
    }

    .pd-client-side-actions button:nth-child(3) {
        display: none;
    }

    .pd-client-hotspot {
        left: 37%;
    }

    .pd-client-quest {
        display: none;
    }

    .pd-client-dock button:nth-child(2) {
        display: none;
    }
}

@media (min-width: 681px) and (max-height: 650px) and (orientation: landscape) {
    .pd-gamebox__viewport.pd-client {
        min-height: 25rem;
    }

    .pd-client-launch__content {
        transform: scale(0.84);
    }

    .pd-client-utility {
        top: 3%;
        transform: scale(0.86);
        transform-origin: left top;
    }

    .pd-client-realm-panel {
        min-height: calc(100% - 1rem);
        transform: scale(0.9);
    }

    .pd-client-event-strip {
        top: 3.6rem;
        transform: scale(0.9);
        transform-origin: right top;
    }

    .pd-client-side-actions {
        top: 31%;
        transform: scale(0.85);
        transform-origin: left center;
    }

    .pd-client-dock {
        transform: translateX(-50%) scale(0.9);
        transform-origin: center bottom;
    }
}


/* ---------- Phase 5: Campaign foundation ---------- */

.pd-client-campaign {
    position: absolute;
    inset: 0;
    z-index: 45;
    display: grid;
    place-items: center;
    padding: 0.8rem;
}

.pd-client-campaign__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background:
        radial-gradient(circle at 70% 20%, rgba(157, 69, 35, 0.22), transparent 35%),
        rgba(17, 10, 7, 0.76);
    cursor: pointer;
    backdrop-filter: blur(0.18rem);
}

.pd-client-campaign__window {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(58rem, calc(100% - 1rem));
    max-height: calc(100% - 1rem);
    overflow: hidden;
    border: 0.18rem solid #8c4727;
    border-radius: 0.55rem;
    background: #ead8b0;
    color: #5d321f;
    box-shadow:
        0 1.5rem 4rem rgba(0, 0, 0, 0.52),
        inset 0 0 0 0.12rem rgba(255, 234, 187, 0.35);
}

.pd-client-campaign__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.85rem;
    background:
        linear-gradient(90deg, rgba(95, 33, 21, 0.2), transparent 42%),
        linear-gradient(180deg, #d85845, #a9322b);
    color: #fff1ce;
}

.pd-client-campaign__head small,
.pd-client-campaign__head strong {
    display: block;
}

.pd-client-campaign__head small {
    color: #ffd0a4;
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-client-campaign__head strong {
    margin-top: 0.05rem;
    font-size: 1.25rem;
    line-height: 1;
}

.pd-client-campaign__head > button {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 1.8rem;
}

.pd-client-campaign__body {
    display: grid;
    grid-template-columns: minmax(11rem, 0.34fr) minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.pd-client-campaign__brief {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    overflow: auto;
    border-right: 1px solid rgba(100, 63, 38, 0.18);
    background:
        linear-gradient(180deg, rgba(102, 67, 39, 0.1), transparent 40%),
        #e2c99b;
}

.pd-client-campaign__crest {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.65rem;
    border: 0.16rem solid #b36f31;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.35), transparent 28%),
        linear-gradient(145deg, #f3c865, #b8792d);
    color: #6c351b;
    font-size: 1.5rem;
    box-shadow:
        0 0.35rem 0.8rem rgba(92, 54, 29, 0.18),
        inset 0 0 0 0.12rem rgba(255, 238, 184, 0.5);
}

.pd-client-campaign__brief > small {
    color: #a05c2c;
    font-family: var(--font-sans);
    font-size: 0.48rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-client-campaign__brief h3 {
    margin: 0.18rem 0 0;
    color: #66351f;
    font-size: 1.25rem;
}

.pd-client-campaign__brief > p {
    margin: 0.5rem 0 0;
    color: #7f5b40;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    line-height: 1.5;
}

.pd-client-campaign__active {
    margin-top: 0.85rem;
    padding: 0.7rem;
    border: 1px solid rgba(126, 67, 34, 0.22);
    border-radius: 0.38rem;
    background: rgba(255, 243, 207, 0.65);
}

.pd-client-campaign__active small,
.pd-client-campaign__active strong,
.pd-client-campaign__active span {
    display: block;
}

.pd-client-campaign__active small {
    color: #a45a2d;
    font-family: var(--font-sans);
    font-size: 0.46rem;
    font-weight: 950;
    text-transform: uppercase;
}

.pd-client-campaign__active strong {
    margin-top: 0.16rem;
    color: #6a351f;
    font-size: 0.82rem;
}

.pd-client-campaign__active span {
    margin-top: 0.28rem;
    color: #8b694e;
    font-family: var(--font-sans);
    font-size: 0.48rem;
}

.pd-client-campaign__active code {
    color: #8f3d2e;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 900;
}

.pd-client-campaign__security {
    margin-top: auto !important;
    padding-top: 0.8rem;
    color: #9a694b !important;
    font-size: 0.5rem !important;
}

.pd-client-campaign__missions {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.7rem;
    overflow: auto;
    background:
        linear-gradient(rgba(255, 250, 229, 0.82), rgba(238, 217, 173, 0.88)),
        repeating-linear-gradient(0deg, rgba(98, 68, 40, 0.03) 0 1px, transparent 1px 4px);
}

.pd-client-mission {
    display: grid;
    gap: 0.45rem;
    padding: 0.68rem;
    border: 1px solid rgba(118, 73, 42, 0.2);
    border-left: 0.24rem solid #c77d32;
    border-radius: 0.35rem;
    background: rgba(255, 250, 229, 0.88);
    box-shadow: 0 0.25rem 0.65rem rgba(95, 56, 31, 0.08);
}

.pd-client-mission.is-active {
    border-left-color: #d24336;
    background: #fff4d2;
    box-shadow:
        0 0 0 0.1rem rgba(210, 67, 54, 0.16),
        0 0.4rem 1rem rgba(108, 55, 30, 0.12);
}

.pd-client-mission.is-locked {
    border-left-color: #9e8b77;
    filter: saturate(0.45);
    opacity: 0.72;
}

.pd-client-mission > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
}

.pd-client-mission__number {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.3rem;
    background: linear-gradient(145deg, #d98c3c, #a35425);
    color: #fff1ca;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 950;
}

.pd-client-mission > header small,
.pd-client-mission > header strong {
    display: block;
}

.pd-client-mission > header small {
    color: #a46b42;
    font-family: var(--font-sans);
    font-size: 0.45rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pd-client-mission > header strong {
    margin-top: 0.04rem;
    color: #60321f;
    font-size: 0.86rem;
}

.pd-client-mission__status {
    padding: 0.28rem 0.45rem;
    border-radius: 999px;
    background: #e8d2a5;
    color: #8b5b35;
    font-family: var(--font-sans);
    font-size: 0.44rem;
    font-weight: 950;
    text-transform: uppercase;
}

.pd-client-mission.is-active .pd-client-mission__status {
    background: #d4493b;
    color: #fff1d7;
}

.pd-client-mission > p {
    margin: 0;
    color: #806047;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    line-height: 1.45;
}

.pd-client-mission__rewards {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.42rem 0.5rem;
    border-radius: 0.25rem;
    background: rgba(181, 126, 60, 0.08);
}

.pd-client-mission__rewards > small {
    color: #9a6b44;
    font-family: var(--font-sans);
    font-size: 0.44rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pd-client-mission__rewards > span {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
}

.pd-client-mission__rewards i {
    padding: 0.2rem 0.34rem;
    border-radius: 999px;
    background: #ead7af;
    color: #7b4b2e;
    font-family: var(--font-sans);
    font-size: 0.44rem;
    font-style: normal;
    font-weight: 900;
}

.pd-client-mission > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.pd-client-mission > footer > span {
    color: #9b5a2c;
    font-family: var(--font-sans);
    font-size: 0.52rem;
    font-weight: 950;
}

.pd-client-mission > footer button {
    min-width: 7rem;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border: 0.1rem solid #8d4c25;
    border-radius: 0.28rem;
    background: linear-gradient(180deg, #ffd76e, #eaa72f);
    color: #593116;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.53rem;
    font-weight: 950;
    box-shadow: inset 0 0 0 0.08rem rgba(255, 244, 191, 0.42);
}

.pd-client-mission > footer button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.pd-client-mission > footer button:disabled {
    border-color: #9c8b75;
    background: #bbae98;
    color: #695e51;
    cursor: not-allowed;
    box-shadow: none;
}

.pd-client-mission > footer button.is-loading {
    opacity: 0.78;
}

.pd-client-campaign__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.48rem 0.7rem;
    border-top: 1px solid rgba(104, 65, 39, 0.16);
    background: #d9bc89;
    color: #806044;
    font-family: var(--font-sans);
    font-size: 0.5rem;
}

.pd-client-campaign__foot button {
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border: 0.1rem solid #8f562b;
    border-radius: 0.25rem;
    background: #f1cf75;
    color: #603619;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.52rem;
    font-weight: 950;
}

@media (max-width: 760px) {
    .pd-client-campaign {
        padding: 0.3rem;
    }

    .pd-client-campaign__window {
        width: calc(100% - 0.3rem);
        max-height: calc(100% - 0.3rem);
    }

    .pd-client-campaign__body {
        grid-template-columns: 9rem minmax(0, 1fr);
    }

    .pd-client-campaign__brief {
        padding: 0.65rem;
    }

    .pd-client-campaign__crest {
        width: 3rem;
        height: 3rem;
        font-size: 1.1rem;
    }

    .pd-client-campaign__brief h3 {
        font-size: 0.95rem;
    }

    .pd-client-campaign__missions {
        padding: 0.45rem;
    }

    .pd-client-mission {
        padding: 0.5rem;
    }

    .pd-client-mission__rewards {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .pd-client-campaign__body {
        display: block;
        overflow: auto;
    }

    .pd-client-campaign__brief {
        min-height: auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid rgba(100, 63, 38, 0.18);
    }

    .pd-client-campaign__crest {
        display: none;
    }

    .pd-client-campaign__security {
        margin-top: 0.6rem !important;
    }

    .pd-client-campaign__missions {
        overflow: visible;
    }

    .pd-client-mission > header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pd-client-mission__status {
        grid-column: 2;
        justify-self: start;
    }

    .pd-client-mission > footer {
        align-items: stretch;
        flex-direction: column;
    }

    .pd-client-mission > footer button {
        width: 100%;
    }

    .pd-client-campaign__foot > span {
        display: none;
    }

    .pd-client-campaign__foot {
        justify-content: flex-end;
    }
}


/* Phase 6: server-authoritative campaign battle */

.pd-client-campaign__active > button {
    width: 100%;
    min-height: 2rem;
    margin-top: 0.55rem;
    border: 0.1rem solid #874923;
    border-radius: 0.28rem;
    background: linear-gradient(180deg, #ffd86f, #e9a42e);
    color: #5b3219;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.52rem;
    font-weight: 950;
}

.pd-client-battle {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 0.65rem;
}

.pd-client-battle__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(35, 133, 176, 0.2), transparent 38%),
        rgba(5, 14, 24, 0.86);
    cursor: pointer;
    backdrop-filter: blur(0.2rem);
}

.pd-client-battle__window {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: min(60rem, calc(100% - 0.5rem));
    max-height: calc(100% - 0.5rem);
    overflow: hidden;
    border: 0.16rem solid #70462b;
    border-radius: 0.6rem;
    background: #10283a;
    color: #f8e6b9;
    box-shadow:
        0 1.8rem 5rem rgba(0, 0, 0, 0.6),
        inset 0 0 0 0.1rem rgba(255, 221, 150, 0.18);
}

.pd-client-battle__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.62rem 0.8rem;
    border-bottom: 1px solid rgba(255, 222, 157, 0.18);
    background:
        linear-gradient(90deg, rgba(244, 166, 67, 0.16), transparent 45%),
        linear-gradient(180deg, #223d4f, #142d3e);
}

.pd-client-battle__head small,
.pd-client-battle__head strong {
    display: block;
}

.pd-client-battle__head small {
    color: #7fd9f3;
    font-family: var(--font-sans);
    font-size: 0.48rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-client-battle__head strong {
    margin-top: 0.08rem;
    color: #ffe8ae;
    font-size: 1.12rem;
}

.pd-client-battle__head > button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 1.7rem;
}

.pd-client-battle__field {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    min-height: 13rem;
    padding: 1rem 1.2rem 1.35rem;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(8, 42, 67, 0.08) 0 56%, rgba(7, 36, 55, 0.25) 57%),
        linear-gradient(180deg, #61b6d1 0 52%, #2b7897 53% 70%, #174e6b 71%);
}

.pd-client-battle__field::after {
    content: "";
    position: absolute;
    right: -8%;
    bottom: 26%;
    left: -8%;
    height: 3rem;
    background:
        radial-gradient(ellipse at 20% 100%, rgba(255, 255, 255, 0.26), transparent 38%),
        radial-gradient(ellipse at 70% 100%, rgba(255, 255, 255, 0.2), transparent 42%);
    opacity: 0.8;
}

.pd-client-battle__sky,
.pd-client-battle__sea {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pd-client-battle__sea {
    top: 58%;
    background:
        repeating-linear-gradient(
            176deg,
            rgba(255, 255, 255, 0.08) 0 0.12rem,
            transparent 0.12rem 1rem
        );
}

.pd-client-battle__cloud {
    position: absolute;
    width: 7rem;
    height: 1.4rem;
    border-radius: 999px;
    background: rgba(242, 249, 245, 0.42);
    filter: blur(0.06rem);
}

.pd-client-battle__cloud::before,
.pd-client-battle__cloud::after {
    content: "";
    position: absolute;
    bottom: 0;
    border-radius: 999px;
    background: inherit;
}

.pd-client-battle__cloud::before {
    left: 1rem;
    width: 2.4rem;
    height: 2.4rem;
}

.pd-client-battle__cloud::after {
    right: 1rem;
    width: 3rem;
    height: 2rem;
}

.pd-client-battle__cloud--one {
    top: 16%;
    left: 8%;
}

.pd-client-battle__cloud--two {
    top: 25%;
    right: 9%;
    transform: scale(0.75);
}

.pd-client-battle__unit,
.pd-client-battle__turn {
    position: relative;
    z-index: 2;
}

.pd-client-battle__unit {
    display: grid;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid rgba(255, 234, 188, 0.24);
    border-radius: 0.42rem;
    background: rgba(8, 31, 47, 0.78);
    box-shadow: 0 0.65rem 1.4rem rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(0.2rem);
}

.pd-client-battle__unit--enemy {
    text-align: right;
}

.pd-client-battle__ship {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    color: #ffe7a8;
    font-size: 3.4rem;
    line-height: 1;
    filter: drop-shadow(0 0.45rem 0.45rem rgba(0, 0, 0, 0.28));
}

.pd-client-battle__unit--player .pd-client-battle__ship {
    left: 12%;
}

.pd-client-battle__unit--enemy .pd-client-battle__ship {
    right: 12%;
    color: #ffd0b2;
}

.pd-client-battle__unit small {
    color: #8fd5e6;
    font-family: var(--font-sans);
    font-size: 0.46rem;
    font-weight: 950;
    text-transform: uppercase;
}

.pd-client-battle__unit strong {
    overflow: hidden;
    margin-top: 0.08rem;
    color: #fff0c4;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-client-battle__unit > span:last-child {
    margin-top: 0.26rem;
    color: #c8dce4;
    font-family: var(--font-sans);
    font-size: 0.46rem;
    font-weight: 900;
}

.pd-client-battle__meter {
    height: 0.48rem;
    margin-top: 0.42rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
}

.pd-client-battle__meter i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4ece83, #a2ef83);
    transition: width 220ms ease;
}

.pd-client-battle__unit--enemy .pd-client-battle__meter i {
    margin-left: auto;
    background: linear-gradient(90deg, #e45145, #ff9a58);
}

.pd-client-battle__turn {
    align-self: center;
    display: grid;
    place-items: center;
    min-width: 6.7rem;
    margin: 0 0.6rem 0.7rem;
    padding: 0.6rem;
    border: 1px solid rgba(255, 229, 170, 0.26);
    border-radius: 999px;
    background: rgba(8, 28, 42, 0.8);
    text-align: center;
}

.pd-client-battle__turn small,
.pd-client-battle__turn strong,
.pd-client-battle__turn span {
    display: block;
}

.pd-client-battle__turn small {
    color: #7fd9f3;
    font-family: var(--font-sans);
    font-size: 0.42rem;
    font-weight: 950;
    text-transform: uppercase;
}

.pd-client-battle__turn strong {
    color: #ffe39b;
    font-size: 1.25rem;
}

.pd-client-battle__turn span {
    max-width: 8rem;
    margin-top: 0.1rem;
    color: #d4e4e7;
    font-family: var(--font-sans);
    font-size: 0.42rem;
    line-height: 1.35;
}

.pd-client-battle__commands {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.62rem;
    border-top: 1px solid rgba(255, 226, 160, 0.16);
    background: #102638;
}

.pd-client-battle__commands button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.5rem;
    min-width: 0;
    min-height: 3.2rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(255, 218, 139, 0.32);
    border-radius: 0.36rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
        #29465a;
    color: #fff0c9;
    cursor: pointer;
}

.pd-client-battle__commands button:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.pd-client-battle__commands button:disabled {
    cursor: wait;
    opacity: 0.45;
}

.pd-client-battle__commands button > span {
    grid-row: 1 / 3;
    font-size: 1.35rem;
}

.pd-client-battle__commands strong,
.pd-client-battle__commands small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-client-battle__commands strong {
    font-family: var(--font-sans);
    font-size: 0.62rem;
}

.pd-client-battle__commands small {
    color: #a9c6d3;
    font-family: var(--font-sans);
    font-size: 0.42rem;
}

.pd-client-battle__result {
    position: absolute;
    inset: 3.6rem 1rem 3.4rem;
    z-index: 5;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 1.2rem;
    border: 1px solid rgba(255, 224, 150, 0.34);
    border-radius: 0.5rem;
    background:
        radial-gradient(circle at 50% 20%, rgba(246, 197, 90, 0.2), transparent 38%),
        rgba(8, 24, 35, 0.95);
    text-align: center;
    backdrop-filter: blur(0.25rem);
}

.pd-client-battle__result > small {
    color: #7ed7f1;
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-client-battle__result > strong {
    margin-top: 0.2rem;
    color: #ffe4a0;
    font-size: 2rem;
}

.pd-client-battle__result > p {
    max-width: 24rem;
    margin: 0.45rem 0 0;
    color: #c8dce4;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    line-height: 1.5;
}

.pd-client-battle__result > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.pd-client-battle__result > div span {
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(255, 224, 143, 0.24);
    border-radius: 999px;
    background: rgba(255, 209, 106, 0.12);
    color: #ffe7aa;
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 950;
}

.pd-client-battle__result > button {
    min-height: 2.2rem;
    margin-top: 0.8rem;
    padding: 0.4rem 0.8rem;
    border: 0.1rem solid #a96c2e;
    border-radius: 0.3rem;
    background: linear-gradient(180deg, #ffd96d, #eba632);
    color: #5b3218;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.56rem;
    font-weight: 950;
}

.pd-client-battle__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.45rem 0.65rem;
    border-top: 1px solid rgba(255, 225, 160, 0.14);
    background: #0c2030;
    color: #9fb8c5;
    font-family: var(--font-sans);
    font-size: 0.46rem;
}

.pd-client-battle__foot button {
    min-height: 1.9rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(255, 221, 144, 0.28);
    border-radius: 0.25rem;
    background: #29475b;
    color: #ffe8b1;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 900;
}

@media (max-width: 700px) {
    .pd-client-battle {
        padding: 0.25rem;
    }

    .pd-client-battle__window {
        width: calc(100% - 0.2rem);
        max-height: calc(100% - 0.2rem);
    }

    .pd-client-battle__field {
        min-height: 10rem;
        padding: 0.8rem 0.5rem 1rem;
    }

    .pd-client-battle__turn {
        min-width: 4.8rem;
        margin-inline: 0.3rem;
    }

    .pd-client-battle__ship {
        font-size: 2.5rem;
    }

    .pd-client-battle__commands {
        gap: 0.3rem;
        padding: 0.4rem;
    }

    .pd-client-battle__commands button {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        justify-items: center;
        min-height: 2.8rem;
        padding: 0.35rem;
        text-align: center;
    }

    .pd-client-battle__commands button > span {
        display: none;
    }

    .pd-client-battle__commands small {
        display: none;
    }
}

@media (max-width: 500px) {
    .pd-client-battle__field {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
    }

    .pd-client-battle__turn {
        position: absolute;
        top: 0.5rem;
        left: 50%;
        z-index: 3;
        min-width: 7rem;
        transform: translateX(-50%);
    }

    .pd-client-battle__unit--player {
        grid-column: 1;
    }

    .pd-client-battle__unit--enemy {
        grid-column: 2;
    }

    .pd-client-battle__unit strong {
        font-size: 0.66rem;
    }

    .pd-client-battle__result {
        inset: 3.3rem 0.4rem 3rem;
    }

    .pd-client-battle__foot > span {
        display: none;
    }

    .pd-client-battle__foot {
        justify-content: flex-end;
    }
}


/* Phase 3B: player progression panels. */

.pd-client-progression {
    position: absolute;
    inset: 0;
    z-index: 47;
    display: grid;
    place-items: center;
    padding: 0.75rem;
}

.pd-client-progression__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(199, 125, 50, 0.18), transparent 34%),
        rgba(17, 10, 7, 0.78);
    cursor: pointer;
    backdrop-filter: blur(0.18rem);
}

.pd-client-progression__window {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(62rem, calc(100% - 1rem));
    max-height: calc(100% - 1rem);
    overflow: hidden;
    border: 0.18rem solid #8c4727;
    border-radius: 0.55rem;
    background: #ead8b0;
    color: #5d321f;
    box-shadow:
        0 1.5rem 4rem rgba(0, 0, 0, 0.52),
        inset 0 0 0 0.12rem rgba(255, 234, 187, 0.35);
}

.pd-client-progression__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.85rem;
    background:
        linear-gradient(90deg, rgba(95, 33, 21, 0.2), transparent 42%),
        linear-gradient(180deg, #d85845, #a9322b);
    color: #fff1ce;
}

.pd-client-progression__head small,
.pd-client-progression__head strong {
    display: block;
}

.pd-client-progression__head small {
    color: #ffd0a4;
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-client-progression__head strong {
    margin-top: 0.05rem;
    font-size: 1.25rem;
    line-height: 1;
}

.pd-client-progression__head > button {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 1.8rem;
}

.pd-client-progression__resources {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.45rem 0.7rem;
    overflow-x: auto;
    border-bottom: 1px solid rgba(100, 63, 38, 0.18);
    background: #d8bd89;
    scrollbar-width: thin;
}

.pd-client-progression-resource {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.4rem;
    align-items: baseline;
    min-width: 6rem;
    padding: 0.38rem 0.55rem;
    border: 1px solid rgba(111, 66, 36, 0.18);
    border-radius: 999px;
    background: rgba(255, 245, 214, 0.7);
}

.pd-client-progression-resource small {
    color: #91643e;
    font-family: var(--font-sans);
    font-size: 0.45rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pd-client-progression-resource strong {
    margin-left: auto;
    color: #62341e;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 950;
}

.pd-client-progression__body {
    min-height: 0;
    overflow: auto;
    background:
        linear-gradient(rgba(255, 250, 229, 0.86), rgba(238, 217, 173, 0.9)),
        repeating-linear-gradient(0deg, rgba(98, 68, 40, 0.03) 0 1px, transparent 1px 4px);
}

.pd-client-progression__loading {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    min-height: 14rem;
    padding: 1rem;
    color: #7f5b40;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    text-align: center;
}

.pd-client-progression__loading span {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border: 0.16rem solid #b36f31;
    border-radius: 999px;
    background: linear-gradient(145deg, #f3c865, #b8792d);
    color: #6c351b;
    font-size: 1.5rem;
}

.pd-client-progression__content {
    min-height: 100%;
    padding: 0.7rem;
}

.pd-client-progression-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.pd-client-progression-card {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.72rem;
    border: 1px solid rgba(118, 73, 42, 0.22);
    border-left: 0.24rem solid #c77d32;
    border-radius: 0.4rem;
    background: rgba(255, 250, 229, 0.9);
    box-shadow: 0 0.3rem 0.75rem rgba(95, 56, 31, 0.09);
}

.pd-client-progression-card--ship {
    grid-column: 1 / -1;
}

.pd-client-progression-card > header,
.pd-client-progression-module > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.pd-client-progression-card > header small,
.pd-client-progression-card > header strong,
.pd-client-progression-module > header small,
.pd-client-progression-module > header strong {
    display: block;
}

.pd-client-progression-card > header small,
.pd-client-progression-module > header small {
    color: #a05c2c;
    font-family: var(--font-sans);
    font-size: 0.45rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pd-client-progression-card > header strong {
    margin-top: 0.14rem;
    color: #63341f;
    font-size: 0.96rem;
}

.pd-client-progression-module > header strong {
    margin-top: 0.12rem;
    color: #63341f;
    font-size: 0.76rem;
}

.pd-client-progression-tier {
    flex: 0 0 auto;
    padding: 0.25rem 0.42rem;
    border: 1px solid rgba(164, 83, 42, 0.22);
    border-radius: 999px;
    background: #f0d7a4;
    color: #8c4727;
    font-family: var(--font-sans);
    font-size: 0.48rem;
    font-weight: 950;
}

.pd-client-progression-meta {
    margin: 0;
    color: #8b694e;
    font-family: var(--font-sans);
    font-size: 0.52rem;
    font-weight: 750;
    text-transform: capitalize;
}

.pd-client-progression-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    margin: 0;
}

.pd-client-progression-stats > div {
    min-width: 0;
    padding: 0.38rem 0.3rem;
    border: 1px solid rgba(112, 70, 42, 0.13);
    border-radius: 0.3rem;
    background: rgba(225, 198, 145, 0.44);
    text-align: center;
}

.pd-client-progression-stats dt {
    overflow: hidden;
    color: #9c6b45;
    font-family: var(--font-sans);
    font-size: 0.4rem;
    font-weight: 900;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pd-client-progression-stats dd {
    margin: 0.12rem 0 0;
    color: #60341f;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 950;
}

.pd-client-progression-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.pd-client-progression-actions > div,
.pd-client-progression-ship-action,
.pd-client-progression-module__action {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.pd-client-progression-cost {
    display: grid;
    min-width: 0;
    color: #7d573b;
    font-family: var(--font-sans);
}

.pd-client-progression-cost small {
    font-size: 0.4rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pd-client-progression-cost strong {
    margin-top: 0.08rem;
    overflow: hidden;
    font-size: 0.48rem;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.pd-client-progression-cost.is-unaffordable strong {
    color: #a33e32;
}

.pd-client-progression-action {
    min-height: 2rem;
    padding: 0.38rem 0.55rem;
    border: 0.1rem solid #9c632d;
    border-radius: 0.28rem;
    background: linear-gradient(180deg, #ffd36b, #e9a72e);
    color: #5c3415;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.52rem;
    font-weight: 950;
}

.pd-client-progression-action:disabled {
    border-color: rgba(107, 79, 55, 0.26);
    background: #d2c09b;
    color: #8f8068;
    cursor: not-allowed;
}

.pd-client-progression-subtitle {
    margin: 0.2rem 0 0;
    color: #6e3b22;
    font-size: 0.75rem;
}

.pd-client-progression-modules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.pd-client-progression-module {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid rgba(112, 70, 42, 0.16);
    border-radius: 0.35rem;
    background: rgba(239, 220, 180, 0.62);
}

.pd-client-progression-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 1.2rem;
    color: #8b694e;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    text-align: center;
}

.pd-client-progression__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.7rem;
    border-top: 1px solid rgba(100, 63, 38, 0.18);
    background: #d8bd89;
    color: #8d6342;
    font-family: var(--font-sans);
    font-size: 0.48rem;
}

.pd-client-progression__footer button {
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border: 0.1rem solid #9c632d;
    border-radius: 0.25rem;
    background: linear-gradient(180deg, #ffd36b, #e9a72e);
    color: #5c3415;
    cursor: pointer;
    font-size: 0.54rem;
    font-weight: 900;
}

@media (max-width: 760px) {
    .pd-client-progression {
        padding: 0.35rem;
    }

    .pd-client-progression__window {
        width: calc(100% - 0.3rem);
        max-height: calc(100% - 0.3rem);
    }

    .pd-client-progression-grid {
        grid-template-columns: 1fr;
    }

    .pd-client-progression-card--ship {
        grid-column: auto;
    }

    .pd-client-progression-modules {
        grid-template-columns: 1fr;
    }

    .pd-client-progression__footer > span {
        display: none;
    }

    .pd-client-progression__footer {
        justify-content: flex-end;
    }
}

@media (max-width: 520px) {
    .pd-client-progression-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-client-progression-actions {
        grid-template-columns: 1fr;
    }

    .pd-client-progression__content {
        padding: 0.5rem;
    }
}