/* ==========================================================================
   SPACEWARRIORS — STYLES

   SECTIONS:
    1.  Design Tokens (CSS Custom Properties)
    2.  Base Reset
    3.  Background & Body
    4.  Layout: App Container
    5.  Layout: Shell (Main Device Frame)
    6.  Shell Decoration — outer frame border & inner accent stripe
    7.  Content Card
    8.  Flash Messages
    9.  Glass Panel — shared glassmorphism component
   10.  Panel Edge Refinements — gradient overlay on header & location panels
   ── Standard Location screen elements ─────────────────────────────────
   11.  Element «Потолок» (Header) — player nickname panel
   12.  Element «Локация» — location image panel
   13.  Element «Описание» — location description text
   14.  Element «Кнопки перемещения» — movement button grid
   15.  Element «Кнопки взаимодействия» — interaction buttons
   16.  Captain's Bridge Screen
   ── Shared UI components ────────────────────────────────────────────────
   17.  Button Component — shared base (.sw-btn, .sw-link-btn)
   18.  Button States — hover, active, disabled
   ── Auth screens (login / register) ────────────────────────────────────
   19.  Form Components
   ── Responsive overrides ────────────────────────────────────────────────
   20.  Viewport-scale layout
   ========================================================================== */


/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
    /* Glass panel */
    --sw-glass-bg:          rgba(0, 0, 0, 0);
    --sw-glass-edge-light:  rgba(255, 255, 255, 0.28);
    --sw-glass-edge-dark:   rgba(96, 107, 130, 0.22);
    --sw-glass-shadow:      rgba(0, 0, 0, 0.34);

    /* Typography */
    --sw-text:      #ffffff;
    --sw-text-soft: rgba(255, 255, 255, 0.9);
    --sw-text-danger: #F28C96;

    /* Button */
    --sw-button-border-soft: rgba(255, 255, 255, 0.5);
    --sw-button-glow: rgba(236, 64, 214, 0.94);
    --sw-button-shadow:       rgba(2, 10, 28, 0.46);
    --sw-button-inner-shadow: rgba(75, 17, 98, 0.68);

    /* Shell geometry */
    --sw-shell-design-width:      790px;
    --sw-shell-max-width:         395px;
    --sw-shell-ratio:             920 / 790;

    /* Spacing */
    --sw-viewport-gap: clamp(25.2px, 5.4vw, 43.2px);
    --sw-radius-base:  14px;
}

@media (max-width: 1023px) {
    :root {
        --sw-viewport-gap: clamp(41.6px, 8.9vw, 71.3px);
    }
}


/* ==========================================================================
   2. Base Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ==========================================================================
   3. Background & Body
   ========================================================================== */

html {
    min-height: 100%;
    background-color: #050a2e;
}

body.sw-body {
    margin: 0;
    min-height: 100%;
    font-family: "Trebuchet MS", "Segoe UI Variable", "Segoe UI", sans-serif;
    color: var(--sw-text);
    overflow-x: hidden;
    background: #050a2e url("./images/bg-1280.35e65a3fd692.webp") center / cover no-repeat;
    background-image: image-set(
        url("./images/bg-1280.3e1e4047cab4.avif") type("image/avif") 1x,
        url("./images/bg-2048.91f13e92fdd8.avif") type("image/avif") 2x,
        url("./images/bg-1280.35e65a3fd692.webp") type("image/webp") 1x,
        url("./images/bg-2048.5b1a2e9aa8a2.webp") type("image/webp") 2x
    );
}

@media (max-width: 1023px) {
    body.sw-body {
        background-position: 45% center;
    }
}


/* ==========================================================================
   4. Layout: App Container
   ========================================================================== */

.sw-app {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--sw-viewport-gap) / 2);
}


/* ==========================================================================
   5. Layout: Shell (Main Device Frame)
   ========================================================================== */

.sw-shell {
    /* Derived scale tokens — computed from actual shell width */
    --sw-shell-width:        min(var(--sw-shell-max-width), calc(100vw - var(--sw-viewport-gap)));
    --sw-shell-width:        min(var(--sw-shell-max-width), calc(100dvw - var(--sw-viewport-gap)));
    --sw-shell-base-height:  calc(var(--sw-shell-width) * var(--sw-shell-ratio));
    --sw-scale-base:         calc(var(--sw-shell-width) / var(--sw-shell-design-width));
    --sw-scale:              var(--sw-scale-base);
    --sw-shell-frame-width:  calc(22px * var(--sw-scale));
    --sw-shell-accent-width: calc(12px * var(--sw-scale));
    --sw-shell-radius:       calc(34px * var(--sw-scale));

    /* Scaled spacing scale */
    --sw-radius:    calc(var(--sw-radius-base) * var(--sw-scale));
    --sw-space-2xs: calc(8px  * var(--sw-scale));
    --sw-space-xs:  calc(10px * var(--sw-scale));
    --sw-space-sm:  calc(14px * var(--sw-scale));
    --sw-space-md:  calc(18px * var(--sw-scale));
    --sw-space-lg:  calc(22px * var(--sw-scale));
    --sw-space-xl:  calc(28px * var(--sw-scale));

    position: relative;
    display: flex;
    width: var(--sw-shell-width);
    min-height: max(calc(100vh - var(--sw-viewport-gap)), var(--sw-shell-base-height));
    min-height: max(calc(100dvh - var(--sw-viewport-gap)), var(--sw-shell-base-height));
    padding: var(--sw-space-md);
    overflow: hidden;
}

/* ==========================================================================
   6. Shell Decoration — outer frame border & inner accent stripe
   ========================================================================== */

.sw-shell::before,
.sw-shell::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* Outer metallic border */
.sw-shell::before {
    inset: calc(-0.6 * var(--sw-shell-frame-width));
    border-radius: calc(var(--sw-shell-radius) + var(--sw-shell-frame-width));
    border: calc(1.2 * var(--sw-shell-frame-width)) solid rgba(66, 72, 82, 0.98);
    box-shadow:
        0 0 0 calc(2.4px * var(--sw-scale)) rgba(128, 136, 148, 0.42),
        0 0 calc(18px  * var(--sw-scale))   rgba(43, 47, 55, 0.36);
}

/* Inner purple-to-blue gradient accent stripe */
.sw-shell::after {
    inset: calc(var(--sw-shell-frame-width) - var(--sw-shell-accent-width));
    border-radius: calc(
        var(--sw-shell-radius) - (var(--sw-shell-frame-width) - var(--sw-shell-accent-width))
    );
    padding: var(--sw-shell-accent-width);
    background: linear-gradient(to bottom right, #b868ff, #7a84ff);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.sw-shell > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   7. Content Card
   ========================================================================== */

.sw-card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 100%;
    padding: var(--sw-space-xl);
}

/* Standard location screen keeps one consistent rhythm for all key vertical gaps.
   The same token is used for top/bottom and side insets inside the gradient frame. */
.sw-location-screen {
    --sw-location-flow-gap: var(--sw-space-xl);
    gap: var(--sw-location-flow-gap);
    padding: var(--sw-location-flow-gap);
}

/* Auth screens keep the same vertical rhythm concept as location screens. */
.sw-auth-screen {
    --sw-auth-flow-gap: calc(var(--sw-space-xl) * 1.5);
    --sw-auth-field-gap: calc(var(--sw-auth-flow-gap) * 0.6666667);
    --sw-auth-panel-border-width: calc(2px * var(--sw-scale));
    --sw-auth-panel-edge-gap: calc(
        var(--sw-space-md) +
        var(--sw-space-xl) -
        var(--sw-shell-frame-width) -
        var(--sw-auth-panel-border-width)
    );
    --sw-auth-panel-content-gap: max(
        calc(2px * var(--sw-scale)),
        calc(var(--sw-auth-panel-edge-gap) - (8px * var(--sw-scale)))
    );
    gap: var(--sw-auth-flow-gap);
    width: 100%;
    margin: 0;
    padding-bottom: var(--sw-auth-flow-gap);
}

.sw-auth-screen > .sw-form,
.sw-auth-screen > .sw-form-errors,
.sw-auth-screen > .sw-auth-note,
.sw-auth-screen > .sw-auth-actions,
.sw-auth-screen > .sw-footer-row {
    margin: 0;
}

.sw-auth-screen > :not(.sw-auth-panel) {
    width: 100%;
    max-width: calc(620px * var(--sw-scale));
    margin-left: auto;
    margin-right: auto;
}

.sw-auth-screen > .sw-auth-panel {
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: var(--sw-auth-panel-edge-gap);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sw-auth-panel-content-gap);
}

.sw-auth-image {
    --sw-location-frame-width: 0px;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: var(--sw-radius);
    background: none !important;
}

.sw-auth-image::before {
    display: none;
}

.sw-auth-logo-media {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    overflow: hidden;
}

.sw-auth-logo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.sw-auth-panel-description p {
    margin: 0;
}

.sw-auth-panel-description p + p {
    margin-top: var(--sw-space-md);
}

.sw-auth-screen .sw-form {
    gap: var(--sw-auth-flow-gap);
}

.sw-auth-screen .sw-form > .sw-field + .sw-field {
    margin-top: calc(var(--sw-auth-field-gap) - var(--sw-auth-flow-gap));
}

/* Match auth primary submit buttons to interaction buttons (80% centered width). */
.sw-auth-screen .sw-form > .sw-interaction-btn {
    width: 80%;
    align-self: center;
}

.sw-auth-note {
    border-radius: var(--sw-radius);
    padding: calc(12px * var(--sw-scale)) calc(16px * var(--sw-scale));
    background: rgba(24, 46, 94, 0.5);
    border: 1px solid rgba(150, 220, 255, 0.34);
    color: rgba(237, 246, 255, 0.96);
    font-size: calc(14px * var(--sw-scale));
    line-height: 1.4;
    text-align: center;
}

.sw-auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sw-space-sm);
    width: 100%;
    max-width: calc(520px * var(--sw-scale));
    margin: 0 auto;
}

.sw-auth-logout-form {
    width: 100%;
    margin: 0;
}


/* ==========================================================================
   8. Flash Messages
   ========================================================================== */

.sw-messages {
    display: flex;
    flex-direction: column;
    gap: var(--sw-space-xs);
    margin: 0 var(--sw-space-xl) var(--sw-space-2xs);
}

.sw-message {
    border-radius: var(--sw-radius);
    padding: calc(12px * var(--sw-scale)) calc(16px * var(--sw-scale));
    background: rgba(70, 116, 173, 0.72);
    border: 1px solid rgba(162, 220, 255, 0.45);
    box-shadow: 0 calc(10px * var(--sw-scale)) calc(18px * var(--sw-scale)) rgba(0, 0, 0, 0.22);
    font-size: calc(14px * var(--sw-scale));
}


/* ==========================================================================
   9. Glass Panel — shared glassmorphism component
   ========================================================================== */

.sw-shell,
.sw-panel {
    position: relative;
    border-radius: var(--sw-radius);
    background: var(--sw-glass-bg);
    border: calc(2px * var(--sw-scale)) solid var(--sw-button-border-soft);
    border-right-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(calc(6.89px * var(--sw-scale))) brightness(76.5%);
    -webkit-backdrop-filter: blur(calc(6.89px * var(--sw-scale))) brightness(76.5%);
    box-shadow:
        0 0 calc(24px * var(--sw-scale)) calc(1px * var(--sw-scale)) var(--sw-glass-shadow),
        inset 0  1px 0 var(--sw-glass-edge-light),
        inset 1px 0  0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 var(--sw-glass-edge-dark),
        inset -1px 0 0 rgba(80, 92, 115, 0.2);
    overflow: hidden;
}

/* Shell overrides — different radius, no own edge, visible overflow */
.sw-shell {
    border-radius: var(--sw-shell-radius);
    border: none;
    overflow: visible;
    box-shadow: 0 0 calc(22px * var(--sw-scale)) calc(1px * var(--sw-scale)) rgba(0, 0, 0, 0.48);
}


/* ==========================================================================
   10. Panel Edge Refinements
       Header and location panel edges aligned with button edge style.
   ========================================================================== */

.sw-header.sw-panel,
.sw-location-panel.sw-panel {
    border: calc(2px * var(--sw-scale)) solid var(--sw-button-border-soft);
    border-right-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   11. Element «Потолок» — player nickname panel
   ========================================================================== */

.sw-header {
    --sw-header-inner-gap: calc(18px * var(--sw-scale));
    --sw-header-chip-height: calc(54px * var(--sw-scale));
    --sw-header-badge-border-width: calc(1px * var(--sw-scale));
    --sw-header-energy-height: calc(var(--sw-header-chip-height) * 0.9);
    --sw-header-energy-badge-padding: calc(5px * var(--sw-scale));
    --sw-header-badge-radius: calc(18px * var(--sw-scale));
    --sw-header-badge-text-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sw-header-inner-gap);
    min-height: calc(
        var(--sw-header-chip-height) +
        var(--sw-header-chip-height) +
        (var(--sw-header-inner-gap) * 3)
    );
    padding: var(--sw-header-inner-gap);
    margin-bottom: var(--sw-space-xl);
    text-align: left;
}

.sw-location-screen > .sw-header {
    margin-bottom: 0;
}

.sw-header-energy-badge {
    padding: var(--sw-header-energy-badge-padding);
}

.sw-header-energy {
    --sw-header-energy-border-width: 0px;
    --sw-header-energy-gap: 0px;
    --sw-header-energy-radius: calc(
        var(--sw-header-badge-radius) - var(--sw-header-energy-badge-padding)
    );
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: var(--sw-header-energy-height);
    border: var(--sw-header-energy-border-width) solid rgba(127, 218, 255, 0.78);
    border-radius: calc(
        var(--sw-header-energy-radius) + var(--sw-header-energy-border-width)
    );
    background: transparent;
    box-shadow:
        inset 0 0 0 calc(1px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        0 calc(2px * var(--sw-scale)) calc(8px * var(--sw-scale)) rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.sw-header-energy-track {
    position: absolute;
    inset: var(--sw-header-energy-gap);
    display: block;
    line-height: 0;
    border-radius: var(--sw-header-energy-radius);
    background: rgba(19, 35, 67, 0.4);
    overflow: hidden;
}

.sw-header-energy-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sw-energy-fill);
    background: linear-gradient(90deg, #8FDFFF 0%, #9FCEFF 52%, #C7A1FF 100%);
    box-shadow:
        inset 0 0 calc(10px * var(--sw-scale)) rgba(255, 255, 255, 0.24),
        0 0 calc(14px * var(--sw-scale)) rgba(143, 195, 255, 0.28);
}

.sw-header-energy-text {
    color: var(--sw-header-badge-text-color);
    position: relative;
    z-index: 1;
    font-size: calc(27px * var(--sw-scale));
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-shadow:
        0 0 calc(5px * var(--sw-scale)) rgba(10, 20, 36, 0.81),
        0 0 calc(10px * var(--sw-scale)) rgba(10, 20, 36, 0.61);
}

.sw-header-player {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: calc(18px * var(--sw-scale));
    width: 100%;
    min-width: 0;
}

.sw-header-player-badge {
    color: var(--sw-header-badge-text-color);
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: var(--sw-header-chip-height);
    padding: calc(10px * var(--sw-scale)) calc(24px * var(--sw-scale));
    border: var(--sw-header-badge-border-width) solid rgba(196, 220, 255, 0.16);
    border-radius: var(--sw-header-badge-radius);
    background: linear-gradient(
        180deg,
        rgba(140, 190, 235, 0.07),
        rgba(140, 190, 235, 0.03)
    );
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.16),
        0 0 calc(8px * var(--sw-scale)) rgba(140, 190, 235, 0.06);
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}

.sw-header-player-badge.sw-header-energy-badge {
    padding: var(--sw-header-energy-badge-padding);
}

.sw-header-player-name {
    justify-content: flex-start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 600;
    line-height: 1.1;
}

.sw-header-player-credits {
    justify-content: flex-end;
    white-space: nowrap;
    text-align: right;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 600;
    line-height: 1.1;
}


/* ==========================================================================
   12. Element «Локация» — location image panel
   ========================================================================== */

.sw-location-panel {
    padding: var(--sw-space-lg);
    margin-bottom: var(--sw-space-xl);
}

.sw-location-screen > .sw-location-panel {
    padding: var(--sw-location-flow-gap) var(--sw-location-flow-gap) var(--sw-space-lg);
    margin-bottom: 0;
}

/* Square image area — location photo with gradient frame */
.sw-location-image {
    --sw-location-photo: none;
    --sw-location-frame-width: calc(7.5px * var(--sw-scale));
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: var(--sw-space-md);
    padding: var(--sw-location-frame-width);
    border-radius: var(--sw-radius);
    background: var(--sw-location-photo) center / cover no-repeat content-box;
    overflow: hidden;
}

/* Gradient frame only (no extra image effects). */
.sw-location-image::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: var(--sw-location-frame-width);
    border-radius: inherit;
    background: linear-gradient(
        to bottom right,
        #b868ff,
        #7a84ff
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* Auth image must not inherit extra bottom margin from base location image,
   otherwise gap (image -> text) becomes larger than top/bottom panel insets. */
.sw-auth-panel .sw-location-image.sw-auth-image {
    margin-bottom: 0;
}

.sw-location-title {
    font-size: calc(48px * var(--sw-scale));
    font-weight: 500;
    line-height: 1.05;
    text-align: center;
}


/* ==========================================================================
   13. Element «Описание» — location description text
   ========================================================================== */

.sw-location-description {
    max-width: calc(660px * var(--sw-scale));
    margin: 0 auto var(--sw-space-xl);
    font-size: calc(28px * var(--sw-scale));
    line-height: 1.28;
    text-align: center;
    color: var(--sw-text-soft);
}

.sw-location-screen > .sw-location-description {
    margin-bottom: 0;
}

.sw-auth-panel > .sw-auth-panel-description {
    margin: 0 auto;
}


/* ==========================================================================
   14. Element «Кнопки перемещения» — movement button grid
   ========================================================================== */

.sw-button-list {
    --sw-move-group-gap: var(--sw-space-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sw-space-sm);
    width: 100%;
    max-width: calc(600px * var(--sw-scale));
    flex: 1 1 auto;
    min-height: calc(200px * var(--sw-scale));
    margin: 0 auto;
}

.sw-location-screen > .sw-button-list {
    gap: 0;
    flex: 0 0 auto;
    min-height: 0;
    justify-content: flex-start;
}

.sw-location-screen > .sw-button-list > * + * {
    margin-top: var(--sw-location-flow-gap);
}

.sw-location-screen > .sw-button-list > .sw-interaction-btn + .sw-interaction-btn {
    margin-top: var(--sw-move-group-gap);
}

.sw-location-screen > .sw-button-list > .sw-location-default-actions + * {
    margin-top: var(--sw-move-group-gap);
}

.sw-button-list form {
    margin: 0;
    width: 100%;
}

.sw-button-list form > .sw-btn {
    width: 100%;
}

/* Non-grid items (interaction buttons, admin button) default to 80% width */
.sw-button-list > :not(.sw-move-grid) {
    width: 80%;
    align-self: center;
}

.sw-move-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        ".    north  ."
        "west center east"
        ".    south  .";
    gap: var(--sw-move-group-gap);
    width: 100%;
}

.sw-move-slot       { width: 100%; }
.sw-move-slot-north { grid-area: north;  }
.sw-move-slot-west  { grid-area: west;   }
.sw-move-slot-center{ grid-area: center; }
.sw-move-slot-east  { grid-area: east;   }
.sw-move-slot-south { grid-area: south;  }

.sw-move-btn,
.sw-interaction-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center button — decorative placeholder, always disabled */
.sw-move-btn-center {
    cursor: default;
    opacity: 0.55;
}

.sw-move-empty {
    display: block;
    width:  calc(34px * var(--sw-scale));
    height: calc(34px * var(--sw-scale));
}

.sw-move-arrow {
    font-size: calc(34px * var(--sw-scale));
    line-height: 1;
    color: #f4ffff;
    text-shadow: 0 calc(1px * var(--sw-scale)) 0 rgba(0, 9, 18, 0.45);
}


/* ==========================================================================
   15. Element «Кнопки взаимодействия» — interaction buttons

   Same visual design as movement buttons, but width is managed independently.
   Placed as direct children of .sw-button-list, so they inherit the 80% width
   rule — override here when a different width is needed.
   ========================================================================== */

/* .sw-interaction-btn shares strict centering with .sw-move-btn above. */

.sw-button-list > .sw-location-default-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sw-move-group-gap);
    width: 100%;
    align-self: stretch;
}

.sw-location-default-actions > .sw-btn {
    width: 100%;
}


/* ==========================================================================
   16. Captain's Bridge Screen
   ========================================================================== */

.sw-captains-bridge-screen {
    --sw-bridge-ship-panel-min-height: calc(760px * var(--sw-scale));
    --sw-bridge-side-panel-min-height: calc(302px * var(--sw-scale));
    --sw-bridge-panel-inline-padding: var(--sw-location-flow-gap);
    justify-content: flex-start;
}

.sw-bridge-screen-title {
    color: #c4dcff;
    font-weight: 500;
    width: 100%;
    margin: 0 auto;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}

.sw-bridge-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--sw-location-flow-gap);
    width: 100%;
}

.sw-bridge-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sw-space-md);
    padding: var(--sw-space-lg) var(--sw-bridge-panel-inline-padding, var(--sw-space-lg));
}

.sw-bridge-ship-panel {
    min-height: var(--sw-bridge-ship-panel-min-height);
}

.sw-bridge-character-panel,
.sw-bridge-achievements-panel {
    min-height: var(--sw-bridge-side-panel-min-height);
}

.sw-bridge-panel-title {
    color: #c4dcff;
    position: relative;
    align-self: center;
    width: fit-content;
    max-width: 100%;
    padding: calc(10px * var(--sw-scale)) calc(28px * var(--sw-scale));
    margin: 0 auto;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    border: calc(1px * var(--sw-scale)) solid rgba(196, 220, 255, 0.16);
    border-radius: calc(18px * var(--sw-scale));
    background: linear-gradient(
        180deg,
        rgba(140, 190, 235, 0.07),
        rgba(140, 190, 235, 0.03)
    );
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.16),
        0 0 calc(8px * var(--sw-scale)) rgba(140, 190, 235, 0.06);
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
    z-index: 1;
}

.sw-bridge-panel-title::before,
.sw-bridge-panel-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(96px * var(--sw-scale));
    height: calc(5px * var(--sw-scale));
    border-radius: calc(999px * var(--sw-scale));
    background: rgba(140, 190, 235, 0.08);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.18);
    transform: translateY(-50%);
    pointer-events: none;
}

.sw-bridge-panel-title::before {
    right: calc(100% + 14px * var(--sw-scale));
}

.sw-bridge-panel-title::after {
    left: calc(100% + 14px * var(--sw-scale));
}

.sw-bridge-ship-frame {
    height: auto;
    min-height: 0;
    margin-bottom: 0;
    background: var(--sw-location-photo) center / contain no-repeat content-box;
    background-color: rgba(12, 21, 40, 0.54);
}

.sw-bridge-stat-list {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--sw-scale));
    margin: 0;
}

.sw-bridge-stat-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(8px * var(--sw-scale)) var(--sw-space-md);
    margin: 0;
    padding-top: calc(18px * var(--sw-scale));
}

.sw-bridge-stat-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(8px * var(--sw-scale));
    right: calc(8px * var(--sw-scale));
    height: calc(5px * var(--sw-scale));
    border-radius: calc(999px * var(--sw-scale));
    background: rgba(140, 190, 235, 0.08);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.18);
}

.sw-bridge-stat-row:first-child {
    padding-top: 0;
}

.sw-bridge-stat-row:first-child::before {
    display: none;
}

.sw-bridge-stat-row dt,
.sw-bridge-stat-row dd {
    margin: 0;
}

.sw-bridge-stat-row dt {
    color: #c4dcff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 500;
    padding-left: calc(5px * var(--sw-scale));
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}

.sw-bridge-stat-row dd {
    color: #ffffff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 600;
    padding-right: calc(5px * var(--sw-scale));
    text-align: right;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}

.sw-critical-energy-value {
    color: var(--sw-text-danger) !important;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 0, 0, 0.45);
}

.sw-bridge-achievement-list {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--sw-scale));
    margin: 0;
    padding-left: calc(5px * var(--sw-scale));
    list-style-position: inside;
    color: #ffffff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 600;
    line-height: 1.35;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}

.sw-bridge-button-list {
    gap: 0;
    flex: 0 0 auto;
    min-height: 0;
    justify-content: flex-start;
}

.sw-captains-bridge-screen > .sw-bridge-button-list > * + * {
    margin-top: var(--sw-space-sm);
}


/* ==========================================================================
   16A. Engineering Bay Screen
   ========================================================================== */

.sw-engineering-screen {
    --sw-engineering-flow-gap: calc(var(--sw-space-md) + var(--sw-space-xs));
    --sw-engineering-panel-padding: calc(24px * var(--sw-scale));
    --sw-engineering-module-gap: var(--sw-engineering-panel-padding);
    --sw-engineering-upgrade-action-width: calc(216px * var(--sw-scale));
    --sw-engineering-module-radius: calc(var(--sw-radius) + calc(6px * var(--sw-scale)));
    --sw-engineering-module-shield-inset: calc(11px * var(--sw-scale));
    --sw-engineering-module-photo-inset: calc(5px * var(--sw-scale));
    --sw-engineering-module-overlay-size: calc(104px * var(--sw-scale));
    justify-content: flex-start;
    gap: var(--sw-engineering-flow-gap);
    min-height: 0;
    overflow-y: auto;
}

.sw-engineering-panel {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    padding: var(--sw-engineering-panel-padding);
}

.sw-engineering-modules-panel {
    padding-top: calc(var(--sw-engineering-panel-padding) * 1.3);
}

.sw-engineering-upgrade-panel {
    padding-top: calc(var(--sw-engineering-panel-padding) * 1.3);
    padding-bottom: calc(var(--sw-engineering-panel-padding) * 1.3);
    gap: calc(22px * var(--sw-scale));
    min-height: calc(560px * var(--sw-scale));
}

.sw-engineering-stat-list {
    gap: calc(14px * var(--sw-scale));
}

.sw-engineering-upgrade-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(12px * var(--sw-scale));
    width: 100%;
}

.sw-btn.sw-engineering-upgrade-action {
    width: var(--sw-engineering-upgrade-action-width);
    min-width: var(--sw-engineering-upgrade-action-width);
    max-width: 100%;
    min-height: calc(58px * var(--sw-scale));
    padding: calc(6px * var(--sw-scale)) calc(12px * var(--sw-scale));
    font-size: calc(24px * var(--sw-scale));
    font-weight: 300;
    white-space: nowrap;
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.24),
        inset 0 calc(-8px * var(--sw-scale)) calc(12px * var(--sw-scale)) rgba(22, 40, 74, 0.26),
        0 calc(6px * var(--sw-scale)) calc(14px * var(--sw-scale)) rgba(2, 10, 28, 0.24);
}

.sw-btn.sw-engineering-upgrade-action.sw-engineering-upgrade-action-primary {
    width: min(100%, calc(420px * var(--sw-scale)));
    min-width: 0;
    white-space: normal;
    line-height: 1.15;
}

.sw-btn.sw-engineering-upgrade-action:hover {
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.28),
        inset 0 calc(-8px * var(--sw-scale)) calc(12px * var(--sw-scale)) rgba(22, 40, 74, 0.3),
        0 calc(8px * var(--sw-scale)) calc(18px * var(--sw-scale)) rgba(1, 8, 24, 0.3);
}

.sw-btn.sw-engineering-upgrade-action:active {
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.2),
        inset 0 calc(-6px * var(--sw-scale)) calc(10px * var(--sw-scale)) rgba(20, 34, 62, 0.28),
        0 calc(3px * var(--sw-scale)) calc(9px * var(--sw-scale)) rgba(2, 8, 22, 0.22);
}

.sw-engineering-modules-panel {
    gap: calc(30px * var(--sw-scale));
}

.sw-engineering-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sw-engineering-module-gap);
    width: 100%;
}

.sw-engineering-module-slot {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    aspect-ratio: 1 / 1;
    width: 100%;
    padding: calc(16px * var(--sw-scale));
    min-height: 0;
}

.sw-engineering-module-shield {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: calc(1px * var(--sw-scale)) solid rgba(196, 220, 255, 0.16);
    border-radius: calc(var(--sw-engineering-module-radius) - calc(8px * var(--sw-scale)));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(40, 60, 114, 0.24);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.16);
}

.sw-engineering-module-media-photo {
    position: absolute;
    inset: var(--sw-engineering-module-photo-inset);
    border-radius: calc(
        var(--sw-engineering-module-radius) - calc(13px * var(--sw-scale))
    );
    background:
        var(--sw-location-photo) center / cover no-repeat,
        radial-gradient(circle at 50% 35%, rgba(132, 188, 255, 0.24), rgba(16, 26, 52, 0.34));
    pointer-events: none;
}

.sw-engineering-module-toggle {
    position: absolute;
    inset: var(--sw-engineering-module-photo-inset);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: calc(
        var(--sw-engineering-module-radius) - calc(12px * var(--sw-scale))
    );
    padding: 0;
    color: rgba(233, 243, 255, 0.4);
    text-decoration: none;
    font-family: inherit;
    font-size: var(--sw-engineering-module-overlay-size);
    font-weight: 200;
    line-height: 1;
    background: rgba(5, 12, 24, 0.1);
    cursor: pointer;
    text-shadow: 0 calc(2px * var(--sw-scale)) calc(8px * var(--sw-scale)) rgba(0, 0, 0, 0.44);
    transition: background 180ms ease, color 180ms ease, transform 140ms ease;
}

.sw-engineering-module-toggle-icon {
    position: relative;
    z-index: 1;
    width: calc(71px * var(--sw-scale));
    height: calc(71px * var(--sw-scale));
    fill: none;
    stroke: currentColor;
    stroke-width: 1.83;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.sw-engineering-module-toggle-icon-eye circle {
    fill: none;
    stroke: currentColor;
}

.sw-engineering-module-toggle:hover {
    color: rgba(244, 250, 255, 0.56);
    background: rgba(5, 12, 24, 0.18);
    transform: scale(1.02);
}

.sw-engineering-module-toggle:active {
    transform: scale(0.99);
}

.sw-engineering-module-toggle:focus-visible {
    outline: calc(2px * var(--sw-scale)) solid rgba(196, 220, 255, 0.72);
    outline-offset: calc(3px * var(--sw-scale));
}

.sw-engineering-module-slot-installed .sw-engineering-module-toggle {
    color: rgba(244, 250, 255, 0.5);
    background: linear-gradient(180deg, rgba(7, 14, 28, 0.06), rgba(7, 14, 28, 0.18));
}

.sw-engineering-module-slot-installed .sw-engineering-module-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(96px * var(--sw-scale));
    height: calc(96px * var(--sw-scale));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(2, 6, 14, 0.52) 0%,
        rgba(2, 6, 14, 0.38) 42%,
        rgba(2, 6, 14, 0.12) 70%,
        rgba(2, 6, 14, 0) 100%
    );
    filter: blur(calc(10px * var(--sw-scale)));
    pointer-events: none;
}

.sw-engineering-module-slot-installed .sw-engineering-module-toggle:hover {
    color: rgba(255, 255, 255, 0.61);
    background: linear-gradient(180deg, rgba(7, 14, 28, 0.08), rgba(7, 14, 28, 0.26));
}

.sw-engineering-module-slot-placeholder {
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
        rgba(5, 12, 24, 0.265);
    backdrop-filter: blur(calc(6.89px * var(--sw-scale))) brightness(53%);
    -webkit-backdrop-filter: blur(calc(6.89px * var(--sw-scale))) brightness(53%);
}

.sw-engineering-module-toggle > span {
    transform: translateY(calc(-4px * var(--sw-scale)));
    pointer-events: none;
}

.sw-engineering-pagination-row {
    padding-top: calc(2px * var(--sw-scale));
}

.sw-engineering-pagination {
    width: 100%;
}

.sw-engineering-page-indicator {
    min-width: calc(106px * var(--sw-scale));
}

.sw-engineering-button-list {
    gap: 0;
    flex: 0 0 auto;
    min-height: 0;
}

.sw-engineering-button-list > * + * {
    margin-top: var(--sw-space-sm);
}


/* ==========================================================================
   16B. Upgrade Requirements Screen
   ========================================================================== */

.sw-upgrade-requirements-screen {
    justify-content: flex-start;
    min-height: 0;
    overflow-y: auto;
}

.sw-upgrade-requirements-panel {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    padding: var(--sw-location-flow-gap);
    gap: calc(26px * var(--sw-scale));
}

.sw-upgrade-requirements-ship-frame {
    margin-bottom: 0;
}

.sw-upgrade-requirements-stat-list,
.sw-upgrade-requirements-item-list {
    gap: calc(14px * var(--sw-scale));
}

.sw-upgrade-requirements-value {
    color: #ffffff;
}

.sw-upgrade-requirements-missing-value {
    color: var(--sw-text-danger) !important;
}

.sw-upgrade-requirements-items {
    display: flex;
    flex-direction: column;
    gap: calc(16px * var(--sw-scale));
}

.sw-upgrade-requirements-items-title {
    margin: 0;
}

.sw-upgrade-requirements-note {
    margin: 0;
    padding-left: calc(5px * var(--sw-scale));
    color: rgba(242, 250, 255, 0.92);
    font-size: calc(24px * var(--sw-scale));
    line-height: 1.35;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}

.sw-upgrade-requirements-button-list {
    gap: 0;
    flex: 0 0 auto;
    min-height: 0;
}

.sw-upgrade-requirements-action-form {
    width: 100%;
}

.sw-upgrade-requirements-button-list > * + * {
    margin-top: var(--sw-space-sm);
}


/* ==========================================================================
   16C. Hold Screen
   ========================================================================== */

.sw-hold-screen {
    --sw-hold-card-side-gap: calc(6px * var(--sw-scale));
    --sw-hold-card-inner-gap: calc(10px * var(--sw-scale));
    --sw-hold-rhythm-gap: calc(var(--sw-space-md) + var(--sw-hold-card-side-gap));
    --sw-hold-divider-height: calc(5px * var(--sw-scale));
    --sw-hold-row-padding-inline: 0;
    --sw-hold-row-padding-top: var(--sw-location-flow-gap);
    --sw-hold-row-padding-bottom: calc(
        var(--sw-hold-row-padding-top) + var(--sw-hold-divider-height)
    );
    --sw-hold-height-scale: 1.35;
    --sw-hold-row-height: calc(116px * var(--sw-scale) * var(--sw-hold-height-scale));
    --sw-hold-pagination-height: calc(58px * var(--sw-scale) * var(--sw-hold-height-scale));
    --sw-hold-slot-summary-height: calc(52px * var(--sw-scale));
    --sw-hold-text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
    justify-content: flex-start;
    min-height: 0;
    overflow-y: auto;
}

.sw-hold-manifest-panel {
    display: grid;
    grid-template-rows:
        calc(var(--sw-hold-manifest-row-count, 10) * var(--sw-hold-row-height))
        var(--sw-hold-pagination-height)
        var(--sw-hold-slot-summary-height);
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    padding: 0 var(--sw-location-flow-gap) var(--sw-hold-rhythm-gap);
}

.sw-hold-manifest-list {
    display: flex;
    flex-direction: column;
    align-self: start;
    min-height: 0;
}

.sw-hold-row {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 0 0 var(--sw-hold-row-height);
    min-height: var(--sw-hold-row-height);
    padding:
        var(--sw-hold-row-padding-top)
        var(--sw-hold-row-padding-inline)
        var(--sw-hold-row-padding-bottom);
}

.sw-hold-row::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(8px * var(--sw-scale));
    right: calc(8px * var(--sw-scale));
    height: var(--sw-hold-divider-height);
    border-radius: calc(999px * var(--sw-scale));
    background: rgba(140, 190, 235, 0.08);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.18);
}

.sw-hold-row-empty {
    justify-content: center;
}

.sw-hold-item-card {
    --sw-hold-item-shield-gap: calc(13px * var(--sw-scale));
    --sw-hold-item-card-height: calc(
        var(--sw-hold-row-height) -
        var(--sw-hold-row-padding-top) -
        var(--sw-hold-row-padding-bottom)
    );
    --sw-hold-item-action-width: calc(184px * var(--sw-scale));
    --sw-hold-item-action-height: calc(58px * var(--sw-scale));
    --sw-hold-item-shield-size: calc(
        var(--sw-hold-item-card-height) - (2 * var(--sw-hold-item-shield-gap))
    );
    display: grid;
    grid-template-columns:
        var(--sw-hold-item-shield-size)
        minmax(0, 1fr)
        var(--sw-hold-item-action-width);
    align-items: center;
    column-gap: calc(10px * var(--sw-scale));
    height: 100%;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0 var(--sw-hold-card-inner-gap);
}

.sw-hold-item-card-view {
    --sw-hold-item-action-width: calc(192px * var(--sw-scale));
}

.sw-hold-item-media {
    --sw-hold-item-shield-radius: calc(var(--sw-radius) - calc(2px * var(--sw-scale)));
    --sw-hold-item-image-inset: calc(4px * var(--sw-scale));
    --sw-hold-item-image-radius: calc(
        var(--sw-hold-item-shield-radius) - var(--sw-hold-item-image-inset)
    );
    align-self: center;
    justify-self: start;
    width: var(--sw-hold-item-shield-size);
    height: var(--sw-hold-item-shield-size);
    padding: 0;
    margin: 0;
    border: calc(1px * var(--sw-scale)) solid rgba(196, 220, 255, 0.16);
    border-radius: var(--sw-hold-item-shield-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(32, 54, 108, 0.28);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.16),
        0 0 calc(8px * var(--sw-scale)) rgba(140, 190, 235, 0.06);
    overflow: hidden;
}

.sw-hold-item-media::before {
    display: none;
}

.sw-hold-item-media::after {
    display: none;
}

.sw-hold-item-media-photo {
    position: absolute;
    inset: var(--sw-hold-item-image-inset);
    border-radius: var(--sw-hold-item-image-radius);
    background:
        var(--sw-location-photo) center / cover no-repeat,
        rgba(46, 70, 130, 0.18);
    pointer-events: none;
}

.sw-hold-item-body {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: flex-start;
    gap: calc(2px * var(--sw-scale));
    min-width: 0;
    padding-top: var(--sw-hold-item-shield-gap);
}

.sw-hold-item-name {
    margin: 0;
    color: #ffffff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 400;
    line-height: 1;
    letter-spacing: calc(1px * var(--sw-scale));
    text-shadow: 0 calc(1px * var(--sw-scale)) 0 rgba(0, 9, 18, 0.46);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-hold-item-name-common {
    color: #b7c1cf;
}

.sw-hold-item-name-rare {
    color: #22c55e;
}

.sw-hold-item-name-unique {
    color: #3b82f6;
}

.sw-hold-item-name-epic {
    color: #d27cff;
}

.sw-hold-item-name-legendary {
    color: #ffb161;
}

.sw-hold-item-quantity {
    margin: 0;
    color: #c4dcff;
    font-size: calc(24px * var(--sw-scale));
    font-weight: 500;
    line-height: 1.2;
    text-shadow: var(--sw-hold-text-shadow);
}

.sw-hold-item-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sw-hold-card-inner-gap);
    width: 100%;
}

.sw-hold-item-action-group > .sw-hold-item-action {
    flex: 1 1 0;
    min-width: 0;
}

.sw-btn.sw-hold-item-action {
    width: 100%;
    height: var(--sw-hold-item-action-height);
    min-height: var(--sw-hold-item-action-height);
    align-self: center;
    margin-top: 0;
    padding: calc(6px * var(--sw-scale)) calc(12px * var(--sw-scale));
    font-size: calc(24px * var(--sw-scale));
    font-weight: 300;
    white-space: nowrap;
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.24),
        inset 0 calc(-8px * var(--sw-scale)) calc(12px * var(--sw-scale)) rgba(22, 40, 74, 0.26),
        0 calc(6px * var(--sw-scale)) calc(14px * var(--sw-scale)) rgba(2, 10, 28, 0.24);
}

.sw-btn.sw-hold-item-action:hover {
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.28),
        inset 0 calc(-8px * var(--sw-scale)) calc(12px * var(--sw-scale)) rgba(22, 40, 74, 0.3),
        0 calc(8px * var(--sw-scale)) calc(18px * var(--sw-scale)) rgba(1, 8, 24, 0.3);
}

.sw-btn.sw-hold-item-action:active {
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.2),
        inset 0 calc(-6px * var(--sw-scale)) calc(10px * var(--sw-scale)) rgba(20, 34, 62, 0.28),
        0 calc(3px * var(--sw-scale)) calc(9px * var(--sw-scale)) rgba(2, 8, 22, 0.22);
}

.sw-btn.sw-hold-item-action-view {
    padding-inline: calc(8px * var(--sw-scale));
    color: #c4dcff;
}

.sw-hold-item-action-icon {
    width: calc(44.8px * var(--sw-scale));
    height: calc(44.8px * var(--sw-scale));
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.sw-hold-item-action-icon-eye circle {
    fill: none;
    stroke: currentColor;
}

.sw-hold-item-action-icon-trash {
    width: calc(51.2px * var(--sw-scale));
    height: calc(44.8px * var(--sw-scale));
}

.sw-hold-item-action-icon-install {
    width: calc(44.8px * var(--sw-scale));
    height: calc(44.8px * var(--sw-scale));
}

.sw-btn.sw-hold-item-action-delete:disabled,
.sw-btn.sw-hold-item-action-delete:disabled:hover {
    opacity: 1;
    filter: none;
    color: #c4dcff;
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.14),
        inset 0 calc(-8px * var(--sw-scale)) calc(11px * var(--sw-scale)) rgba(22, 40, 74, 0.2),
        0 calc(6px * var(--sw-scale)) calc(12px * var(--sw-scale)) rgba(0, 0, 0, 0.2);
}

.sw-hold-item-action-form {
    display: contents;
    margin: 0;
}

.sw-hold-pagination-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--sw-hold-pagination-height);
    min-height: 0;
    padding-top: var(--sw-hold-rhythm-gap);
    padding-bottom: var(--sw-hold-rhythm-gap);
}

.sw-hold-pagination {
    width: 100%;
    min-height: 0;
    transform: translateY(calc(5px * var(--sw-scale)));
}

.sw-hold-slot-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--sw-hold-slot-summary-height);
    min-height: var(--sw-hold-slot-summary-height);
    gap: calc(12px * var(--sw-scale));
    color: #c4dcff;
    font-size: calc(26px * var(--sw-scale));
    font-weight: 500;
    line-height: 1.2;
    text-shadow: var(--sw-hold-text-shadow);
}

.sw-hold-slot-summary::before {
    content: "";
    width: calc(120px * var(--sw-scale));
    height: var(--sw-hold-divider-height);
    border-radius: calc(999px * var(--sw-scale));
    background: rgba(140, 190, 235, 0.08);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.18);
}

.sw-hold-button-list {
    gap: 0;
    flex: 0 0 auto;
    min-height: 0;
}

.sw-hold-button-list > * + * {
    margin-top: var(--sw-space-sm);
}


/* ==========================================================================
   16DA. PvP Arena Screen
   ========================================================================== */

.sw-pvp-arena-screen {
    --sw-pvp-arena-row-count: 7;
    --sw-pvp-arena-entry-card-height: calc(160px * var(--sw-scale));
    --sw-hold-row-height: calc(
        var(--sw-pvp-arena-entry-card-height) +
        var(--sw-hold-row-padding-top) +
        var(--sw-hold-row-padding-bottom)
    );
}

.sw-pvp-arena-screen .sw-pvp-arena-manifest-panel {
    grid-template-rows:
        calc(var(--sw-hold-manifest-row-count, 7) * var(--sw-hold-row-height))
        var(--sw-hold-pagination-height);
    padding-bottom: var(--sw-hold-rhythm-gap);
}

.sw-pvp-arena-entry-card {
    --sw-pvp-arena-entry-action-size: calc(85.333px * var(--sw-scale));
    --sw-hold-item-action-width: var(--sw-pvp-arena-entry-action-size);
    grid-template-columns:
        minmax(0, 1fr)
        var(--sw-hold-item-action-width);
    column-gap: calc(14px * var(--sw-scale));
    padding: calc(24px * var(--sw-scale));
}

.sw-pvp-arena-entry-body {
    align-self: center;
    justify-content: flex-start;
    gap: calc(14px * var(--sw-scale));
    padding-top: 0;
}

.sw-pvp-arena-entry-detail {
    color: #c4dcff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 500;
    line-height: 1;
}

.sw-pvp-arena-entry-name {
    display: flex;
    align-items: baseline;
    gap: calc(6px * var(--sw-scale));
    line-height: 1;
}

.sw-pvp-arena-entry-nickname {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sw-pvp-arena-entry-countdown-wrap {
    flex: 0 0 auto;
}

.sw-pvp-arena-entry-level {
    color: #8fdfff;
    font-weight: 700;
}

.sw-pvp-arena-entry-stake {
    color: #f3c550;
    font-weight: 600;
}

.sw-pvp-arena-entry-stake-line {
    color: #c4dcff;
}

.sw-pvp-arena-entry-countdown {
    color: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.sw-pvp-arena-entry-action-group {
    justify-content: center;
}

.sw-pvp-arena-entry-action-form {
    display: block;
    width: var(--sw-pvp-arena-entry-action-size);
    height: var(--sw-pvp-arena-entry-action-size);
}

.sw-btn.sw-pvp-arena-entry-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sw-pvp-arena-entry-action-size);
    height: var(--sw-pvp-arena-entry-action-size);
    min-width: var(--sw-pvp-arena-entry-action-size);
    min-height: var(--sw-pvp-arena-entry-action-size);
    padding: 0;
    margin-top: 0;
    line-height: 1;
}

.sw-pvp-arena-entry-action-icon {
    width: calc(50.667px * var(--sw-scale));
    height: calc(50.667px * var(--sw-scale));
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}


/* ==========================================================================
   16D. Warning Screen
   ========================================================================== */

.sw-warning-screen {
    justify-content: center;
    min-height: 0;
}

.sw-challenge-screen {
    justify-content: center;
    gap: var(--sw-space-xl);
}

.sw-warning-panel {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    width: 100%;
    padding: var(--sw-location-flow-gap);
}

.sw-warning-panel-body {
    --sw-warning-stack-gap: calc(18px * var(--sw-scale));
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: calc(620px * var(--sw-scale));
    margin: 0 auto;
    gap: var(--sw-warning-stack-gap);
}

.sw-warning-question {
    margin: 0;
    color: #f6fbff;
    font-size: calc(36px * var(--sw-scale));
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(3px * var(--sw-scale)) rgba(0, 9, 18, 0.5);
}

.sw-warning-detail-list {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--sw-scale));
    margin: 0;
}

.sw-warning-requirements-list {
    width: 100%;
    gap: calc(14px * var(--sw-scale));
    padding-top: calc(12px * var(--sw-scale));
}

.sw-warning-detail-line {
    margin: 0;
    color: rgba(242, 250, 255, 0.92);
    font-size: calc(24px * var(--sw-scale));
    line-height: 1.35;
    text-align: left;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}

.sw-warning-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}

.sw-warning-form > * + * {
    margin-top: var(--sw-warning-stack-gap);
}

.sw-warning-field {
    width: 25%;
    min-width: calc(128px * var(--sw-scale));
    margin: 0;
    gap: calc(10px * var(--sw-scale));
}

.sw-warning-input {
    width: 100%;
    text-align: center;
}

.sw-warning-form-actions {
    display: flex;
    justify-content: center;
    width: 25%;
    min-width: calc(128px * var(--sw-scale));
    margin: 0;
}

.sw-warning-field + .sw-warning-form-actions {
    margin-top: calc(var(--sw-warning-stack-gap) - (1px * var(--sw-scale)));
}

.sw-btn.sw-warning-max-action {
    margin-top: 0;
    width: 100%;
    min-width: 0;
}

.sw-warning-button-list {
    flex: 0 0 auto;
    min-height: 0;
}

.sw-pvp-waiting-screen .sw-warning-detail-list {
    width: 100%;
    gap: calc(10px * var(--sw-scale));
}

.sw-pvp-notice-stat-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(8px * var(--sw-scale)) var(--sw-space-md);
    margin: 0;
    padding-top: calc(18px * var(--sw-scale));
}

.sw-pvp-notice-stat-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(5px * var(--sw-scale));
    border-radius: calc(999px * var(--sw-scale));
    background: rgba(140, 190, 235, 0.08);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.18);
}

.sw-pvp-notice-stat-row:first-child {
    padding-top: 0;
}

.sw-pvp-notice-stat-row:first-child::before {
    display: none;
}

.sw-pvp-notice-stat-row dt,
.sw-pvp-notice-stat-row dd {
    margin: 0;
}

.sw-pvp-notice-stat-row dt {
    color: #c4dcff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 500;
    padding-left: 0;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}

.sw-pvp-notice-stat-row dd {
    color: #ffffff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 600;
    padding-right: 0;
    text-align: right;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}

.sw-pvp-notice-credits-value {
    color: #f3c550;
    font-weight: 600;
}


/* ==========================================================================
   16C. Hold Item View Screen
   ========================================================================== */

.sw-item-view-screen {
    --sw-item-view-flow-gap: calc(var(--sw-space-sm) + var(--sw-space-xs));
    --sw-item-view-description-gap: calc(16px * var(--sw-scale));
    --sw-item-view-attributes-gap: calc(32px * var(--sw-scale));
    --sw-item-view-hero-gap: calc(24px * var(--sw-scale));
    --sw-item-view-frame-gap: calc(26px * var(--sw-scale));
    --sw-item-view-hero-padding-bottom: calc(14px * var(--sw-scale));
    --sw-item-view-divider-height: calc(5px * var(--sw-scale));
    --sw-item-view-hero-radius: calc(var(--sw-radius) + calc(2px * var(--sw-scale)));
    --sw-item-view-photo-inset: calc(5px * var(--sw-scale));
    --sw-item-view-photo-radius: calc(
        var(--sw-item-view-hero-radius) - var(--sw-item-view-photo-inset)
    );
    --sw-item-view-attribute-gap: calc(18px * var(--sw-scale));
    justify-content: flex-start;
    gap: var(--sw-item-view-flow-gap);
    min-height: 0;
    overflow-y: auto;
}

.sw-item-view-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    padding:
        var(--sw-item-view-frame-gap)
        var(--sw-item-view-frame-gap)
        var(--sw-space-md);
}

.sw-item-view-hero {
    --sw-location-photo: none;
    display: grid;
    grid-template-rows: auto auto;
    gap: var(--sw-item-view-hero-gap);
    width: 100%;
    padding: 0;
}

.sw-item-view-hero-photo {
    margin-bottom: 0;
    min-width: 0;
    min-height: 0;
}

.sw-item-view-title {
    align-self: end;
    color: #ffffff;
    text-align: center;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 600;
    line-height: 1.05;
    white-space: normal;
    text-wrap: balance;
}

.sw-item-view-description {
    margin-top: var(--sw-item-view-description-gap);
    color: #ffffff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 500;
    line-height: 1.35;
    padding-left: calc(5px * var(--sw-scale));
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}

.sw-item-view-attributes {
    margin: 0;
    margin-top: var(--sw-item-view-attributes-gap);
}

.sw-bridge-stat-row dd.sw-item-view-rarity-common {
    color: #b7c1cf;
}

.sw-bridge-stat-row dd.sw-item-view-rarity-rare {
    color: #22c55e;
}

.sw-bridge-stat-row dd.sw-item-view-rarity-unique {
    color: #3b82f6;
}

.sw-bridge-stat-row dd.sw-item-view-rarity-epic {
    color: #d27cff;
}

.sw-bridge-stat-row dd.sw-item-view-rarity-legendary {
    color: #ffb161;
}

.sw-item-view-attribute {
    margin: 0;
}

.sw-item-view-button-list {
    gap: 0;
    flex: 0 0 auto;
    min-height: 0;
}

.sw-item-view-action-form {
    width: 100%;
    margin: 0;
}

.sw-item-view-screen > .sw-item-view-button-list > * + * {
    margin-top: var(--sw-space-sm);
}


/* ==========================================================================
   17. Battle Screen
   ========================================================================== */

.sw-battle-screen {
    --sw-battle-flow-gap: calc(var(--sw-space-sm) + var(--sw-space-xs));
    --sw-battle-ship-card-inset: var(--sw-location-flow-gap);
    --sw-battle-text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
    gap: var(--sw-battle-flow-gap);
    justify-content: flex-start;
}

.sw-battle-screen .sw-bridge-screen-title,
.sw-battle-screen .sw-battle-ship-caption,
.sw-battle-screen .sw-battle-status-side strong,
.sw-battle-screen .sw-battle-status-side span,
.sw-battle-screen .sw-battle-status-clock,
.sw-battle-screen .sw-battle-status-timer,
.sw-battle-screen .sw-battle-controls-chip,
.sw-battle-screen .sw-battle-radio-pill,
.sw-battle-screen .sw-battle-log-chip,
.sw-battle-screen .sw-battle-log-list,
.sw-battle-screen .sw-battle-log-page-indicator {
    text-shadow: var(--sw-battle-text-shadow);
}

.sw-pvp-battle-submit-state {
    margin: 0;
    color: #c4dcff;
    font-size: calc(24px * var(--sw-scale));
    line-height: 1.3;
    text-align: center;
    text-shadow: var(--sw-battle-text-shadow);
}

.sw-battle-ship-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--sw-battle-flow-gap);
    width: 100%;
}

.sw-battle-ship-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    padding: var(--sw-battle-ship-card-inset);
}

.sw-battle-ship-card-player {
    order: 1;
}

.sw-battle-ship-card-enemy {
    order: 2;
}

.sw-battle-ship-image {
    width: 100%;
    max-width: none;
    margin: 0;
    margin-bottom: 0;
    background-color: rgba(12, 21, 40, 0.54);
    background: none;
}

.sw-battle-ship-photo {
    position: absolute;
    inset: var(--sw-location-frame-width);
    border-radius: calc(var(--sw-radius) - var(--sw-location-frame-width));
    background:
        var(--sw-location-photo) center / cover no-repeat,
        rgba(12, 21, 40, 0.54);
}

.sw-battle-ship-image::after {
    content: "";
    position: absolute;
    inset: var(--sw-location-frame-width);
    border-radius: calc(var(--sw-radius) - var(--sw-location-frame-width));
    background:
        radial-gradient(circle at top, rgba(124, 198, 255, 0.24), transparent 54%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(3, 10, 20, 0.28));
    pointer-events: none;
}

.sw-battle-ship-image-player .sw-battle-ship-photo {
    transform: scaleX(-1);
}

.sw-battle-ship-image-enemy .sw-battle-ship-photo {
    transform: none;
}

.sw-battle-ship-caption {
    margin-top: var(--sw-space-md);
    color: #c4dcff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}

.sw-battle-status-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sw-space-sm);
    padding: var(--sw-space-md);
}

.sw-battle-status-side {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--sw-scale));
    min-width: 0;
}

.sw-battle-status-row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(34px * var(--sw-scale));
}

.sw-battle-status-side-left .sw-battle-status-row {
    justify-content: flex-start;
}

.sw-battle-status-side-right .sw-battle-status-row {
    justify-content: flex-end;
}

.sw-battle-status-row + .sw-battle-status-row {
    margin-top: calc(10px * var(--sw-scale));
    padding-top: calc(18px * var(--sw-scale));
}

.sw-battle-status-row + .sw-battle-status-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(8px * var(--sw-scale));
    right: calc(8px * var(--sw-scale));
    height: calc(5px * var(--sw-scale));
    border-radius: calc(999px * var(--sw-scale));
    background: rgba(140, 190, 235, 0.08);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.18);
}

.sw-battle-status-side strong {
    color: #ffffff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 700;
    line-height: 1.1;
}

.sw-battle-status-side span {
    color: #c4dcff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 500;
    line-height: 1.15;
}

.sw-battle-status-side-right {
    text-align: right;
}

.sw-battle-status-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
}

.sw-battle-status-badge {
    color: #c4dcff;
    position: relative;
    align-self: center;
    width: fit-content;
    max-width: 100%;
    padding: calc(10px * var(--sw-scale)) calc(28px * var(--sw-scale));
    margin: 0 auto;
    border: calc(1px * var(--sw-scale)) solid rgba(196, 220, 255, 0.16);
    border-radius: calc(18px * var(--sw-scale));
    background: linear-gradient(
        180deg,
        rgba(140, 190, 235, 0.07),
        rgba(140, 190, 235, 0.03)
    );
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.16),
        0 0 calc(8px * var(--sw-scale)) rgba(140, 190, 235, 0.06);
    z-index: 1;
}

.sw-battle-status-clock,
.sw-battle-status-timer {
    display: block;
    color: #eff7ff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 700;
    line-height: 1.1;
}

.sw-battle-status-timer {
    margin-top: calc(4px * var(--sw-scale));
}

.sw-battle-status-clock {
    letter-spacing: calc(1px * var(--sw-scale));
}

.sw-battle-status-timer {
    color: #c4dcff;
}

.sw-battle-controls-panel {
    --sw-battle-controls-top-gap: calc(25px * var(--sw-scale));
    --sw-battle-controls-side-gap: calc(25px * var(--sw-scale));
    --sw-battle-controls-title-gap: calc(20px * var(--sw-scale));
    --sw-battle-controls-column-gap: calc(25px * var(--sw-scale));
    --sw-battle-controls-rhythm-gap: calc(20px * var(--sw-scale));
    --sw-battle-controls-bottom-gap: calc(25px * var(--sw-scale));
    --sw-battle-radio-offset-x: calc(25px * var(--sw-scale));
    display: flex;
    flex-direction: column;
    gap: var(--sw-battle-controls-title-gap);
    padding:
        var(--sw-battle-controls-top-gap)
        var(--sw-battle-controls-side-gap)
        var(--sw-battle-controls-bottom-gap);
}

.sw-battle-action-form {
    display: flex;
    flex-direction: column;
    gap: var(--sw-battle-flow-gap, var(--sw-space-md));
    width: 100%;
    margin: 0;
}

.sw-battle-controls-head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--sw-battle-controls-column-gap);
}

.sw-battle-controls-head-slot {
    display: flex;
    justify-content: center;
}

.sw-battle-controls-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(176px * var(--sw-scale));
    max-width: 100%;
    padding: calc(8px * var(--sw-scale)) calc(20px * var(--sw-scale));
    color: #c4dcff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 600;
    line-height: 1;
    border: calc(1px * var(--sw-scale)) solid rgba(196, 220, 255, 0.16);
    border-radius: calc(16px * var(--sw-scale));
    background: linear-gradient(
        180deg,
        rgba(140, 190, 235, 0.1),
        rgba(140, 190, 235, 0.04)
    );
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.08),
        inset 0 calc(-1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(8, 16, 30, 0.16),
        0 0 calc(8px * var(--sw-scale)) rgba(140, 190, 235, 0.05);
}

.sw-battle-controls-chip-label {
    display: block;
}

.sw-battle-controls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sw-battle-controls-column-gap);
}

.sw-battle-controls-column {
    display: flex;
    flex-direction: column;
    gap: var(--sw-battle-controls-rhythm-gap);
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.sw-battle-controls-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sw-battle-radio-row {
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.sw-battle-radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sw-battle-radio-pill {
    display: grid;
    grid-template-columns: calc(20px * var(--sw-scale)) minmax(0, 1fr);
    align-items: center;
    column-gap: calc(14px * var(--sw-scale));
    width: 95%;
    min-height: calc(70px * var(--sw-scale));
    padding-top: calc(16px * var(--sw-scale));
    padding-bottom: calc(16px * var(--sw-scale));
    padding-left: calc((18px * var(--sw-scale)) + var(--sw-battle-radio-offset-x));
    padding-right: calc((18px * var(--sw-scale)) - var(--sw-battle-radio-offset-x));
    border-radius: calc(999px * var(--sw-scale));
    border: calc(1.5px * var(--sw-scale)) solid rgba(214, 236, 255, 0.32);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        rgba(8, 18, 38, 0.26);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.16),
        inset 0 calc(-8px * var(--sw-scale)) calc(10px * var(--sw-scale)) rgba(6, 14, 29, 0.26),
        0 calc(6px * var(--sw-scale)) calc(14px * var(--sw-scale)) rgba(0, 0, 0, 0.2);
    color: #f2fbff;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 500;
    line-height: 1.15;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}

.sw-battle-radio-indicator {
    justify-self: center;
    width: calc(20px * var(--sw-scale));
    height: calc(20px * var(--sw-scale));
    border-radius: 50%;
    border: calc(2px * var(--sw-scale)) solid rgba(202, 231, 255, 0.56);
    background: rgba(201, 226, 255, 0.08);
    box-shadow: inset 0 0 calc(6px * var(--sw-scale)) rgba(255, 255, 255, 0.08);
    transition: transform 140ms ease, background 180ms ease, box-shadow 180ms ease;
}

.sw-battle-radio-label {
    display: block;
    min-width: 0;
    text-align: left;
}

.sw-battle-radio-input:checked + .sw-battle-radio-pill {
    border-color: rgba(187, 228, 255, 0.76);
    background:
        linear-gradient(180deg, rgba(159, 218, 255, 0.24), rgba(255, 255, 255, 0.08)),
        rgba(9, 25, 49, 0.34);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.22),
        inset 0 calc(-8px * var(--sw-scale)) calc(10px * var(--sw-scale)) rgba(6, 14, 29, 0.32),
        0 calc(8px * var(--sw-scale)) calc(16px * var(--sw-scale)) rgba(0, 0, 0, 0.22),
        0 0 calc(16px * var(--sw-scale)) rgba(132, 206, 255, 0.2);
}

.sw-battle-radio-input:checked + .sw-battle-radio-pill .sw-battle-radio-indicator {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, #c5ecff, #7fc3ff);
    box-shadow:
        0 0 calc(12px * var(--sw-scale)) rgba(122, 197, 255, 0.45),
        inset 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(255, 255, 255, 0.44);
}

.sw-battle-fire-btn,
.sw-battle-back-btn {
    width: 80%;
    max-width: calc(480px * var(--sw-scale));
    align-self: center;
}

.sw-battle-refresh-btn {
    width: 80%;
    max-width: calc(480px * var(--sw-scale));
    align-self: center;
}

.sw-battle-log-panel {
    display: flex;
    flex-direction: column;
    gap: calc(20px * var(--sw-scale));
    height: calc(582px * var(--sw-scale));
    padding: var(--sw-space-md);
}

.sw-battle-log-head {
    display: flex;
    justify-content: center;
}

.sw-battle-log-chip {
    margin: 0;
    width: calc(176px * var(--sw-scale));
    max-width: 100%;
    font-size: calc(28px * var(--sw-scale));
}

.sw-mission-reward-log-panel {
    height: auto;
    padding: var(--sw-location-flow-gap);
}

.sw-mission-reward-log-panel .sw-battle-log-body {
    overflow: visible;
}

.sw-mission-reward-screen {
    justify-content: center;
}

.sw-mission-reward-log-chip {
    width: auto;
    max-width: none;
    white-space: nowrap;
    font-size: calc(24px * var(--sw-scale));
}

.sw-battle-log-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.sw-battle-log-list {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--sw-scale));
    margin: 0;
    padding-left: 0;
    list-style: none;
    color: #f0f8ff;
    font-size: calc(26px * var(--sw-scale));
    line-height: 1.4;
}

.sw-battle-log-entry {
    white-space: pre-line;
}

.sw-battle-log-credits-value {
    color: #f3c550;
    font-weight: 600;
}

.sw-battle-log-injury-value {
    color: var(--sw-text-danger);
    font-weight: 600;
}

.sw-battle-log-cargo-overflow {
    color: var(--sw-text-danger);
    font-weight: 600;
}

.sw-battle-log-rarity-common {
    color: #b7c1cf;
}

.sw-battle-log-rarity-rare {
    color: #22c55e;
}

.sw-battle-log-rarity-unique {
    color: #3b82f6;
}

.sw-battle-log-rarity-epic {
    color: #d27cff;
}

.sw-battle-log-rarity-legendary {
    color: #ffb161;
}

.sw-battle-log-entry[hidden] {
    display: none;
}

.sw-battle-log-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(12px * var(--sw-scale));
}

.sw-btn.sw-battle-log-page-btn {
    width: calc(56px * var(--sw-scale));
    min-width: calc(56px * var(--sw-scale));
    min-height: calc(48px * var(--sw-scale));
    padding: 0;
    border-width: calc(1.5px * var(--sw-scale));
    border-radius: calc(999px * var(--sw-scale));
    color: #deeeff;
    font-size: calc(18px * var(--sw-scale));
    font-weight: 500;
    letter-spacing: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
        rgba(8, 18, 38, 0.2);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.18),
        inset 0 calc(-6px * var(--sw-scale)) calc(8px * var(--sw-scale)) rgba(16, 28, 54, 0.28),
        0 calc(4px * var(--sw-scale)) calc(10px * var(--sw-scale)) rgba(0, 0, 0, 0.16),
        0 0 calc(10px * var(--sw-scale)) rgba(126, 182, 255, 0.12);
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.34);
}

.sw-battle-log-page-arrow {
    position: relative;
    display: inline-block;
    width: calc(28px * var(--sw-scale));
    height: calc(28px * var(--sw-scale));
    font-size: 0;
    line-height: 0;
    color: transparent;
}

.sw-battle-log-page-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 calc(1px * var(--sw-scale)) 0 rgba(0, 9, 18, 0.45));
}

.sw-battle-log-pagination [data-sw-log-prev] .sw-battle-log-page-arrow::before {
    border-top: calc(11px * var(--sw-scale)) solid transparent;
    border-bottom: calc(11px * var(--sw-scale)) solid transparent;
    border-right: calc(17px * var(--sw-scale)) solid #f4ffff;
}

.sw-battle-log-pagination [data-sw-log-next] .sw-battle-log-page-arrow::before {
    border-top: calc(11px * var(--sw-scale)) solid transparent;
    border-bottom: calc(11px * var(--sw-scale)) solid transparent;
    border-left: calc(17px * var(--sw-scale)) solid #f4ffff;
}

.sw-btn.sw-battle-log-page-btn::before {
    inset: 0 0 58% 0;
    background: rgba(255, 255, 255, 0.12);
}

.sw-btn.sw-battle-log-page-btn::after {
    display: none;
}

.sw-btn.sw-battle-log-page-btn:hover {
    transform: translateY(calc(-1px * var(--sw-scale)));
    filter: brightness(1.03);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.2),
        inset 0 calc(-6px * var(--sw-scale)) calc(8px * var(--sw-scale)) rgba(16, 28, 54, 0.32),
        0 calc(6px * var(--sw-scale)) calc(12px * var(--sw-scale)) rgba(0, 0, 0, 0.18),
        0 0 calc(12px * var(--sw-scale)) rgba(126, 182, 255, 0.18);
}

.sw-btn.sw-battle-log-page-btn:disabled {
    opacity: 0.42;
    cursor: default;
    transform: none;
    filter: none;
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.12),
        inset 0 calc(-4px * var(--sw-scale)) calc(6px * var(--sw-scale)) rgba(16, 28, 54, 0.2),
        0 calc(3px * var(--sw-scale)) calc(8px * var(--sw-scale)) rgba(0, 0, 0, 0.12);
}

.sw-battle-log-page-indicator {
    min-width: calc(88px * var(--sw-scale));
    color: #dcecff;
    font-size: calc(24px * var(--sw-scale));
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 9, 18, 0.42);
}


/* ==========================================================================
   18. Button Component — shared base
       Applied to both <button> (.sw-btn) and <a> (.sw-link-btn) elements.
   ========================================================================== */

.sw-btn,
.sw-link-btn {
    position: relative;
    isolation: isolate;
    width: 100%;
    border-radius: var(--sw-radius);
    padding: calc(22px * var(--sw-scale)) calc(26px * var(--sw-scale));
    border: calc(2px * var(--sw-scale)) solid var(--sw-button-border-soft);
    border-right-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    font-family: inherit;
    font-size: calc(28px * var(--sw-scale));
    font-weight: 400;
    letter-spacing: calc(1px * var(--sw-scale));
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    color: #f2ffff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
        rgba(6, 18, 38, 0.22);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.28),
        inset 0 calc(-10px * var(--sw-scale)) calc(14px * var(--sw-scale)) var(--sw-button-inner-shadow),
        0 calc(8px * var(--sw-scale)) calc(18px * var(--sw-scale)) var(--sw-button-shadow),
        0 0 calc(10px * var(--sw-scale)) rgba(236, 64, 214, 0.55),
        0 0 calc(30px * var(--sw-scale)) rgba(236, 64, 214, 0.29);
    text-shadow: 0 calc(1px * var(--sw-scale)) 0 rgba(0, 9, 18, 0.46);
    transition: transform 140ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.sw-btn,
.sw-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sw-btn.sw-interaction-btn-mob-normal,
.sw-link-btn.sw-interaction-btn-mob-normal {
    color: #f2ffff;
}

.sw-btn.sw-interaction-btn-mob-dangerous,
.sw-link-btn.sw-interaction-btn-mob-dangerous {
    color: #f3c550;
}

.sw-btn.sw-interaction-btn-mob-fatal,
.sw-link-btn.sw-interaction-btn-mob-fatal {
    color: var(--sw-text-danger);
}

.sw-btn::before,
.sw-link-btn::before {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    border-radius: inherit;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.2);
}

.sw-btn::after,
.sw-link-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.42) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
}

@media (hover: none), (pointer: coarse) {
    .sw-btn::after,
    .sw-link-btn::after {
        transition-duration: 0.167s;
    }
}


/* ==========================================================================
   19. Button States — hover, active, disabled
   ========================================================================== */

.sw-btn:hover,
.sw-link-btn:hover {
    filter: brightness(1.05);
    transform: translateY(calc(-1px * var(--sw-scale)));
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.3),
        inset 0 calc(-10px * var(--sw-scale)) calc(14px * var(--sw-scale)) var(--sw-button-inner-shadow),
        0 calc(10px * var(--sw-scale)) calc(22px * var(--sw-scale)) rgba(1, 8, 24, 0.5),
        0 0 calc(14px * var(--sw-scale)) var(--sw-button-glow),
        0 0 calc(44px * var(--sw-scale)) rgba(236, 64, 214, 0.42);
}

.sw-btn:hover::after,
.sw-link-btn:hover::after {
    left: 120%;
}

.sw-btn:active,
.sw-link-btn:active {
    transform: translateY(calc(1px * var(--sw-scale)));
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.24),
        inset 0 calc(-8px * var(--sw-scale)) calc(10px * var(--sw-scale)) rgba(69, 14, 91, 0.62),
        0 calc(4px * var(--sw-scale)) calc(10px * var(--sw-scale)) rgba(2, 8, 22, 0.38),
        0 0 calc(10px * var(--sw-scale)) rgba(236, 64, 214, 0.47);
}

.sw-btn-disabled,
.sw-btn:disabled,
.sw-link-btn:disabled {
    opacity: 0.44;
    filter: grayscale(1);
    cursor: default;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(9, 17, 31, 0.2);
    box-shadow:
        inset 0 calc(1px * var(--sw-scale)) 0 rgba(255, 255, 255, 0.14),
        inset 0 calc(-8px * var(--sw-scale)) calc(11px * var(--sw-scale)) rgba(57, 13, 76, 0.51),
        0 calc(6px * var(--sw-scale)) calc(12px * var(--sw-scale)) rgba(0, 0, 0, 0.28);
}

.sw-btn-disabled:hover,
.sw-btn:disabled:hover,
.sw-link-btn:disabled:hover,
.sw-move-btn-center:hover {
    opacity: 0.44;
    filter: grayscale(1);
    transform: none;
}

.sw-btn-disabled::after,
.sw-btn:disabled::after,
.sw-link-btn:disabled::after {
    display: none;
}


/* ==========================================================================
   20. Form Components — used on login and register screens
   ========================================================================== */

.sw-form {
    display: flex;
    flex-direction: column;
    gap: calc(14px * var(--sw-scale));
}

.sw-field {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--sw-scale));
    font-size: calc(14px * var(--sw-scale));
    color: rgba(255, 255, 255, 0.88);
}

.sw-input {
    border-radius: var(--sw-radius);
    border: calc(3.5px * var(--sw-scale)) solid #CF4FFF;
    padding: calc(14px * var(--sw-scale)) calc(16px * var(--sw-scale));
    min-height: calc(78px * var(--sw-scale));
    background:
        rgba(112, 23, 144, 0.52);
    color: inherit;
    font-size: calc(28px * var(--sw-scale));
    transition: border-color 140ms ease, box-shadow 180ms ease;
}

.sw-input::placeholder {
    color: rgba(239, 208, 255, 0.65);
    font-size: inherit;
    opacity: 1;
    transition: opacity 120ms ease;
}

.sw-input:focus {
    outline: none;
    border-color: #E195FF;
    box-shadow:
        0 0 0 calc(5.5px * var(--sw-scale)) rgba(199, 106, 255, 0.3),
        0 0 calc(22px * var(--sw-scale)) rgba(199, 106, 255, 0.28);
}

.sw-input:focus::placeholder {
    opacity: 0;
}

.sw-form-errors {
    color: var(--sw-text-danger);
    font-size: calc(13px * var(--sw-scale));
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 0, 0, 0.45);
}

.sw-form-errors {
    margin-bottom: calc(14px * var(--sw-scale));
}

.sw-field-error {
    margin-left: calc(5px * var(--sw-scale));
    color: var(--sw-text-danger);
    font-size: calc(26px * var(--sw-scale));
    line-height: 1.15;
    text-shadow: 0 calc(1px * var(--sw-scale)) calc(2px * var(--sw-scale)) rgba(0, 0, 0, 0.45);
}

.sw-footer-row {
    margin-top: calc(16px * var(--sw-scale));
    font-size: calc(28px * var(--sw-scale));
    opacity: 0.92;
    text-align: center;
}

.sw-footer-row a {
    color: #8fdfff;
    text-decoration: none;
}