/* =========================================================
   HELIX PUBLIC WORLD STATUS PAGES
   low.php / sfc.php
   Uses the same flat navy + cyan visual language as the current site.
   ========================================================= */

.world-page {
    min-height: calc(100vh - 56px);
    padding-top: 104px;
    padding-bottom: 64px;

    /*
     * LOW / SFC / WBR are information boards. Keep the page surface solid
     * so the site's decorative body background does not show through the
     * content area. Internal cards may still use subtle layered shading,
     * but they now blend against this opaque navy surface instead of the
     * main website background.
     */
    background: #081722;
}

.world-heading {
    position: relative;
    margin-bottom: 26px;
    padding: 0 5px 16px 16px;
    border-left: 2px solid #38bdff;
    border-bottom: 1px solid rgba(83,104,125,.42);
}

.world-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 220px;
    height: 1px;
    background: #38bdff;
}

.world-kicker,
.world-eyebrow {
    display: block;
    color: #56c6ff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.world-heading h1 {
    margin: 6px 0 3px;
    color: #edf5ff;
    font-size: 34px;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 2px;
}

.world-heading p {
    margin: 0;
    color: #8195a8;
    font-size: 11px;
    letter-spacing: 2.4px;
}

.world-hero {
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 28px 32px;
    border-top: 1px solid #29465d;
    border-bottom: 1px solid #29465d;
    background:
        linear-gradient(100deg, rgba(12,34,50,.94), rgba(7,21,32,.78) 58%, rgba(5,15,24,.72));
    overflow: hidden;
}

.world-hero-copy {
    max-width: 650px;
}

.world-hero-copy h2 {
    margin: 8px 0 8px;
    color: #e3eef8;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: .8px;
}

.world-hero-copy p {
    margin: 0;
    color: #8297a9;
    font-size: 12px;
    line-height: 1.75;
}

.period-box {
    min-width: 300px;
    padding: 18px 20px;
    border: 1px solid #276b91;
    border-left: 3px solid #38bdff;
    background: rgba(6,19,29,.68);
}

.period-box span,
.sfc-deadline span {
    display: block;
    margin-bottom: 8px;
    color: #5fcaff;
    font-size: 9px;
    letter-spacing: 1.7px;
}

.period-box strong {
    display: block;
    color: #c9d9e6;
    font-size: 11px;
    font-weight: 500;
}

.period-box i {
    display: block;
    margin: 5px 0;
    color: #3e7898;
    font-style: normal;
}

.world-switch {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 20px;
    border: 1px solid #29465d;
}

.world-switch a {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    padding: 16px 20px;
    border-right: 1px solid #29465d;
    background: rgba(6,18,28,.55);
}

.world-switch a:last-child {
    border-right: 0;
}

.world-switch a:hover,
.world-switch a.active {
    background: rgba(19,61,86,.42);
}

.world-switch a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #38bdff;
}

.world-switch span {
    grid-row: 1 / 3;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #276b91;
    color: #64cbff;
    font-size: 10px;
}

.world-switch b {
    align-self: end;
    color: #dce9f5;
    font-size: 11px;
    letter-spacing: 1.4px;
}

.world-switch small {
    margin-top: 3px;
    color: #71879a;
    font-size: 10px;
}

.low-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.lord-card {
    position: relative;
    padding: 22px;
    border: 1px solid #29465d;
    border-left: 3px solid #38bdff;
    background: linear-gradient(110deg, rgba(11,29,42,.90), rgba(6,18,28,.72));
}

.lord-card.nation-capella {
    border-left-color: #d64e5e;
}

.lord-card.nation-procyon {
    border-left-color: #3e9fe0;
}

.lord-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lord-order {
    color: #416b84;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.nation-tag {
    padding: 5px 8px;
    border: 1px solid #315a73;
    color: #83d6ff;
    font-size: 8px;
    letter-spacing: 1.3px;
}

.nation-capella .nation-tag {
    border-color: rgba(214,78,94,.65);
    color: #ef8c97;
}

.nation-procyon .nation-tag {
    border-color: rgba(62,159,224,.65);
    color: #83c9f5;
}

.lord-title {
    padding: 22px 0 18px;
}

.lord-title small,
.sfc-player small {
    color: #5fcaff;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.lord-title h2,
.sfc-player h2 {
    margin: 5px 0;
    color: #edf5ff;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: .5px;
}

.lord-title p {
    margin: 0;
    color: #8398aa;
    font-size: 10px;
    letter-spacing: .8px;
}

.lord-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(62,87,106,.55);
}

.lord-stats div {
    padding: 15px 0 0;
}

.lord-stats div + div {
    padding-left: 18px;
    border-left: 1px solid rgba(62,87,106,.55);
}

.lord-stats span {
    display: block;
    color: #687f91;
    font-size: 8px;
    letter-spacing: 1.4px;
}

.lord-stats strong {
    display: block;
    margin-top: 5px;
    color: #74d3ff;
    font-size: 17px;
    font-weight: 400;
}

.sfc-symbol {
    position: relative;
    display: grid;
    flex: 0 0 116px;
    width: 116px;
    height: 116px;
    place-items: center;
}

.sfc-symbol::before,
.sfc-symbol::after,
.sfc-symbol span,
.sfc-symbol i {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid #2e8cba;
    transform: rotate(45deg);
}

.sfc-symbol::after {
    inset: 30px;
    border-color: #38bdff;
}

.sfc-symbol span {
    inset: 8px 52px;
    border-width: 0 1px;
    transform: none;
}

.sfc-symbol i {
    inset: 52px 8px;
    border-width: 1px 0;
    transform: none;
}

.sfc-symbol b {
    position: relative;
    color: #9be0ff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
}

.sfc-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.sfc-card {
    display: grid;
    grid-template-columns: 90px minmax(220px, 1fr) minmax(260px, .8fr);
    align-items: stretch;
    border: 1px solid #29465d;
    border-left: 3px solid #38bdff;
    background: linear-gradient(100deg, rgba(11,29,42,.90), rgba(6,18,28,.72));
}

.sfc-card.is-received {
    border-left-color: #69c895;
}

.sfc-rank {
    display: grid;
    place-content: center;
    text-align: center;
    border-right: 1px solid #29465d;
}

.sfc-rank span {
    color: #637e91;
    font-size: 7px;
    letter-spacing: 1.3px;
}

.sfc-rank strong {
    margin-top: 4px;
    color: #69cfff;
    font-size: 20px;
    font-weight: 300;
}

.sfc-player {
    padding: 21px 24px;
}

.sfc-state {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 7px;
    border: 1px solid #2c789e;
    color: #70d2ff;
    font-size: 8px;
    letter-spacing: 1.2px;
}

.is-received .sfc-state {
    border-color: #3e8a63;
    color: #83d7a8;
}

.sfc-deadline {
    display: grid;
    align-content: center;
    padding: 18px 24px;
    border-left: 1px solid #29465d;
    background: rgba(3,13,21,.26);
}

.sfc-deadline strong {
    color: #d8e7f2;
    font-size: 13px;
    font-weight: 500;
}

.sfc-deadline small {
    margin-top: 5px;
    color: #71889a;
    font-size: 9px;
}

.world-status,
.world-footnote {
    margin-top: 20px;
    padding: 15px 18px;
    border: 1px solid #2b607d;
    border-left: 3px solid #38bdff;
    color: #a9c5d6;
    background: rgba(18,51,71,.30);
    font-size: 11px;
}

.world-status-error {
    border-color: #7c3b43;
    border-left-color: #d85b68;
    color: #d7a6ac;
}

.world-footnote {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    border-left-width: 1px;
    color: #71899a;
}

.world-footnote > span {
    color: #42bfff;
}

.world-footnote strong {
    color: #9fb6c7;
    font-size: 9px;
    letter-spacing: 1.3px;
}

.world-footnote small {
    font-size: 9px;
}

@media (max-width: 780px) {
    .world-page {
        padding-top: 86px;
    }

    .world-hero {
        align-items: stretch;
        flex-direction: column;
        gap: 24px;
    }

    .period-box {
        min-width: 0;
    }

    .world-switch,
    .low-grid {
        grid-template-columns: 1fr;
    }

    .world-switch a {
        border-right: 0;
        border-bottom: 1px solid #29465d;
    }

    .world-switch a:last-child {
        border-bottom: 0;
    }

    .sfc-card {
        grid-template-columns: 68px 1fr;
    }

    .sfc-deadline {
        grid-column: 1 / -1;
        border-top: 1px solid #29465d;
        border-left: 0;
    }

    .sfc-symbol {
        align-self: center;
    }

    .world-footnote {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    .world-heading h1 {
        font-size: 28px;
    }

    .world-hero {
        padding: 24px 20px;
    }

    .lord-stats {
        grid-template-columns: 1fr;
    }

    .lord-stats div + div {
        margin-top: 12px;
        padding-left: 0;
        border-left: 0;
    }

    .sfc-card {
        grid-template-columns: 1fr;
    }

    .sfc-rank {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 18px;
        border-right: 0;
        border-bottom: 1px solid #29465d;
    }

    .sfc-rank strong {
        margin: 0;
    }

    .sfc-deadline {
        grid-column: auto;
    }
}

/* =========================================================
   V2 - FIXED LORD OF WAR / SAINT'S FORCE CALIBUR CHARACTER CARDS
   These rules intentionally override the generic v1 list presentation while
   leaving the shared heading, hero, switch and status styling untouched.
   ========================================================= */

/* ---------- LORD OF WAR ---------- */
.low-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    margin-top: 20px;
}

.low-nation-head {
    position: relative;
    padding: 18px 22px;
    border: 1px solid #29465d;
    background: rgba(6,18,28,.72);
    text-align: center;
}

.low-nation-head::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -1px;
    height: 2px;
}

.low-nation-head.nation-capella::after {
    background: #d64e5e;
}

.low-nation-head.nation-procyon::after {
    background: #3e9fe0;
}

.low-nation-head span {
    display: block;
    color: #71899a;
    font-size: 8px;
    letter-spacing: 2px;
}

.low-nation-head h2 {
    margin: 4px 0 0;
    color: #e5eff8;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 2px;
}

.low-nation-head.nation-capella h2 {
    color: #f19aa4;
}

.low-nation-head.nation-procyon h2 {
    color: #8ed2ff;
}

.low-board-label {
    padding: 20px 0 8px;
    color: #8299aa;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.low-board-label-right {
    text-align: right;
}

.low-board-label span {
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 1px solid #31576e;
}

.low-board-cell {
    min-width: 0;
    margin-bottom: 10px;
}

.low-char-card {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 108px;
    border: 1px solid #29465d;
    background: linear-gradient(105deg, rgba(10,29,43,.92), rgba(5,17,27,.72));
    overflow: hidden;
}

.low-char-card.nation-capella {
    border-left: 3px solid #d64e5e;
    background: linear-gradient(105deg, rgba(66,26,34,.72), rgba(10,22,31,.80) 72%);
}

.low-char-card.nation-procyon {
    border-right: 3px solid #3e9fe0;
    background: linear-gradient(255deg, rgba(17,48,76,.74), rgba(10,22,31,.80) 72%);
}

.low-card-role {
    grid-row: 1 / 3;
    display: grid;
    align-content: center;
    padding: 15px 13px;
    border-right: 1px solid rgba(60,88,108,.55);
}

.nation-procyon .low-card-role {
    border-right: 0;
    border-left: 1px solid rgba(60,88,108,.55);
}

.low-card-role span {
    color: #d7e8f5;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.4px;
}

.low-bringer-card .low-card-role span {
    color: #f0d88b;
    font-size: 11px;
}

.low-card-role small {
    margin-top: 5px;
    color: #68cfff;
    font-size: 8px;
    line-height: 1.35;
    letter-spacing: .7px;
}

.low-card-main {
    min-width: 0;
    padding: 16px 17px 8px;
}

.low-card-main h3 {
    margin: 0;
    overflow: hidden;
    color: #edf5ff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.low-bringer-card .low-card-main h3 {
    font-size: 18px;
}

.low-card-main p {
    margin: 5px 0 0;
    color: #75cfff;
    font-size: 9px;
    letter-spacing: .7px;
}

.low-card-stats {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
    padding: 0 17px 14px;
    color: #a9bdcc;
    font-size: 9px;
}

.low-card-stats span {
    white-space: nowrap;
}

.low-card-stats b {
    margin-right: 4px;
    color: #617d90;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: .7px;
}

.low-bringer-card {
    min-height: 132px;
    border-top-color: #806f3b;
    border-bottom-color: #806f3b;
}

.low-bringer-card::after {
    content: "";
    position: absolute;
    top: 0;
    width: 84px;
    height: 1px;
    background: #d6b958;
}

.low-bringer-card.nation-capella::after {
    left: 0;
}

.low-bringer-card.nation-procyon::after {
    right: 0;
}

.low-char-card.is-empty {
    opacity: .64;
    background: rgba(6,17,26,.62);
}

.low-char-card.is-empty .low-card-main h3 {
    color: #9cb0be;
    font-size: 12px;
    letter-spacing: 1px;
}

.low-bringer-card.is-empty .low-card-main h3 {
    color: #c9b66f;
    font-size: 14px;
}

.low-char-card.is-empty .low-card-main p {
    color: #61798a;
    font-size: 8px;
    line-height: 1.45;
    letter-spacing: .3px;
}

/* ---------- SAINT'S FORCE CALIBUR ---------- */
.sfc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.sfc-char-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 190px;
    border: 1px solid #29465d;
    border-top: 2px solid #38bdff;
    background: linear-gradient(145deg, rgba(11,31,45,.94), rgba(5,17,27,.76));
    overflow: hidden;
}

.sfc-char-card.is-claimed {
    border-top-color: #69c895;
}

.sfc-char-card.is-unclaimed {
    border-top-color: #d2ad55;
}

.sfc-card-style {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(55,83,103,.55);
    background: rgba(4,15,24,.30);
}

.sfc-card-style span {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #2b7196;
    color: #67ccff;
    font-size: 8px;
}

.sfc-card-style strong {
    color: #a9dfff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
}

.sfc-card-player {
    min-width: 0;
    padding: 20px 17px 15px;
}

.sfc-card-player h2 {
    margin: 0;
    overflow: hidden;
    color: #edf5ff;
    font-size: 18px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sfc-card-player p {
    margin: 6px 0 0;
    color: #6fcfff;
    font-size: 9px;
    letter-spacing: .7px;
}

.sfc-card-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 12px;
    padding: 13px 17px;
    border-top: 1px solid rgba(55,83,103,.55);
    background: rgba(3,13,21,.25);
    color: #a9bdcc;
    font-size: 9px;
}

.sfc-card-meta span {
    min-width: 0;
}

.sfc-card-meta b {
    margin-right: 5px;
    color: #617d90;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: .7px;
}

.sfc-card-deadline {
    grid-column: 1 / -1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.is-claimed .sfc-claim-state {
    color: #83d7a8;
}

.is-unclaimed .sfc-claim-state {
    color: #e0c477;
}

.sfc-char-card.is-empty {
    opacity: .62;
}

.sfc-char-card.is-empty .sfc-card-player h2 {
    color: #8297a7;
    font-size: 14px;
    letter-spacing: .6px;
}

@media (max-width: 980px) {
    .low-char-card {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .low-card-stats {
        flex-wrap: wrap;
        gap: 7px 12px;
    }

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

@media (max-width: 780px) {
    /* On narrow screens each nation becomes a complete section instead of
       forcing two unreadably narrow columns. The fixed slots are preserved. */
    .low-board {
        display: flex;
        flex-direction: column;
    }

    .low-nation-head:nth-of-type(1) {
        order: 1;
    }

    .low-nation-head:nth-of-type(2) {
        order: 14;
        margin-top: 22px;
    }

    /* Mobile fallback uses the natural DOM order for cards. Keeping every
       slot visible matters more than desktop side-by-side pairing here. */
    .low-board-label,
    .low-board-cell {
        order: 2;
    }

    .low-board-label-right {
        text-align: left;
    }
}

@media (max-width: 620px) {
    .sfc-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .low-char-card {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .low-card-main {
        padding-right: 12px;
        padding-left: 12px;
    }

    .low-card-stats {
        padding-right: 12px;
        padding-left: 12px;
    }
}


/* =========================================================
   DAILY EVENT SCHEDULES
   Mission War is embedded in low.php because it directly belongs to the
   Lord of War system. World Boss Raid uses the same visual language on its
   own public /wbr.php page. Both schedules are static and require no DB.
   ========================================================= */
.world-switch {
    grid-template-columns: repeat(3, 1fr);
}

.schedule-panel {
    margin-top: 20px;
    border: 1px solid #29465d;
    border-top: 2px solid #38bdff;
    background: rgba(6,18,28,.62);
}

.schedule-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid #29465d;
}

.schedule-heading h2 {
    margin: 5px 0 0;
    color: #e7f1f9;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1.5px;
}

.schedule-heading > small {
    padding: 6px 9px;
    border: 1px solid #2b6d91;
    color: #72d1ff;
    font-size: 8px;
    letter-spacing: 1.3px;
    white-space: nowrap;
}

.schedule-grid {
    display: grid;
}

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

.schedule-slot {
    min-width: 0;
    padding: 16px 18px;
    border-right: 1px solid rgba(55,83,103,.55);
    border-bottom: 1px solid rgba(55,83,103,.55);
    background: rgba(4,15,24,.22);
}

.schedule-slot:nth-child(4n) {
    border-right: 0;
}

.schedule-slot:nth-last-child(-n+4) {
    border-bottom: 0;
}

.schedule-slot time,
.wbr-boss time {
    display: block;
    color: #69d0ff;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .4px;
}

.schedule-slot strong,
.wbr-boss strong {
    display: block;
    margin-top: 5px;
    color: #8ea5b6;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.1px;
}

.schedule-slot-special {
    background: rgba(31,65,86,.34);
}

.schedule-slot-special strong {
    color: #b6d9e9;
}

.wbr-summary {
    min-width: 245px;
    padding: 18px 20px;
    border: 1px solid #276b91;
    border-left: 3px solid #38bdff;
    background: rgba(6,19,29,.68);
}

.wbr-summary span {
    display: block;
    color: #5fcaff;
    font-size: 9px;
    letter-spacing: 1.7px;
}

.wbr-summary strong {
    display: block;
    margin-top: 7px;
    color: #dceaf4;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .8px;
}

.wbr-summary small {
    display: block;
    margin-top: 4px;
    color: #728a9c;
    font-size: 9px;
}

.wbr-window-list {
    display: grid;
}

.wbr-window {
    display: grid;
    grid-template-columns: 58px repeat(2, minmax(0, 1fr));
    min-height: 84px;
    border-bottom: 1px solid rgba(55,83,103,.55);
}

.wbr-window:last-child {
    border-bottom: 0;
}

.wbr-window-no {
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(55,83,103,.55);
    color: #3f7695;
    font-size: 11px;
    letter-spacing: 1px;
}

.wbr-boss {
    display: grid;
    align-content: center;
    padding: 14px 20px;
}

.wbr-boss + .wbr-boss {
    border-left: 1px solid rgba(55,83,103,.55);
    background: rgba(19,50,69,.22);
}

@media (max-width: 780px) {
    .world-switch {
        grid-template-columns: 1fr;
    }

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

    .schedule-slot:nth-child(4n) {
        border-right: 1px solid rgba(55,83,103,.55);
    }

    .schedule-slot:nth-child(2n) {
        border-right: 0;
    }

    .schedule-slot:nth-last-child(-n+4) {
        border-bottom: 1px solid rgba(55,83,103,.55);
    }

    .schedule-slot:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .wbr-summary {
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .schedule-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-schedule-grid {
        grid-template-columns: 1fr;
    }

    .schedule-slot,
    .schedule-slot:nth-child(2n),
    .schedule-slot:nth-child(4n),
    .schedule-slot:nth-last-child(-n+2) {
        border-right: 0;
        border-bottom: 1px solid rgba(55,83,103,.55);
    }

    .schedule-slot:last-child {
        border-bottom: 0;
    }

    .wbr-window {
        grid-template-columns: 46px 1fr;
    }

    .wbr-window-no {
        grid-row: 1 / 3;
    }

    .wbr-boss + .wbr-boss {
        border-top: 1px solid rgba(55,83,103,.55);
        border-left: 0;
    }
}

/* =========================================================
   V3 - COMPACT MMORPG CHARACTER CARDS
   Visual-only upgrade for LOW + SFC.
   Keeps all PHP / DB / ranking / selection logic untouched.
   Goal: less dead space, larger readable data, stronger game-card hierarchy.
   ========================================================= */

/* ---------- LORD OF WAR: compact nation roster ---------- */
.low-board {
    gap: 0 14px;
}

.low-nation-head {
    padding: 13px 18px 12px;
    background:
        linear-gradient(120deg, rgba(12,31,45,.94), rgba(5,17,27,.82));
}

.low-nation-head span {
    font-size: 9px;
    font-weight: 600;
}

.low-nation-head h2 {
    margin-top: 3px;
    font-size: 23px;
    font-weight: 600;
}

.low-board-label {
    padding: 14px 0 6px;
    font-size: 10px;
}

.low-board-cell {
    margin-bottom: 7px;
}

.low-char-card {
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 82px;
    border-color: #31536b;
    background:
        linear-gradient(105deg, rgba(10,29,43,.97), rgba(5,17,27,.88));
}

.low-char-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 54px;
    height: 2px;
    background: rgba(83,190,244,.48);
}

.low-char-card.nation-capella {
    border-left-width: 3px;
    border-left-color: #ef5368;
    background:
        linear-gradient(105deg, rgba(72,23,35,.82), rgba(12,24,34,.94) 68%);
}

.low-char-card.nation-capella::before {
    background: #ef5368;
}

.low-char-card.nation-procyon {
    border-right-width: 3px;
    border-right-color: #38baff;
    background:
        linear-gradient(255deg, rgba(15,58,91,.84), rgba(10,24,35,.94) 68%);
}

.low-char-card.nation-procyon::before {
    background: #38baff;
}

.low-card-role {
    padding: 10px 11px;
    background: rgba(3,12,19,.20);
}

.low-card-role span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.25px;
}

.low-bringer-card .low-card-role span {
    color: #ffe071;
    font-size: 12px;
}

.low-card-role small {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 600;
}

.low-card-main {
    padding: 11px 14px 3px;
}

.low-card-main h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.05;
}

.low-bringer-card .low-card-main h3 {
    font-size: 21px;
}

.low-card-main p {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
}

.low-card-stats {
    gap: 13px;
    padding: 0 14px 10px;
    color: #d1e1ec;
    font-size: 10px;
    font-weight: 600;
}

.low-card-stats b {
    margin-right: 4px;
    color: #66889e;
    font-size: 8px;
    letter-spacing: .8px;
}

.low-bringer-card {
    min-height: 94px;
    border-top-color: #a88d39;
    border-bottom-color: #a88d39;
    box-shadow: inset 0 0 0 1px rgba(212,181,74,.08);
}

.low-bringer-card::after {
    width: 112px;
    height: 2px;
    background: #e2c04d;
}

/* ---------- SFC: 3 x 3 collectible-style class cards ---------- */
.sfc-grid {
    gap: 9px;
}

.sfc-char-card {
    grid-template-rows: auto auto auto;
    min-height: 132px;
    border-color: #31536b;
    border-top-width: 2px;
    background:
        linear-gradient(145deg, rgba(10,32,46,.98), rgba(4,16,25,.90));
}

.sfc-char-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58px;
    height: 2px;
    background: #38bdff;
    opacity: .75;
}

.sfc-char-card.is-claimed {
    border-top-color: #5fd39a;
    box-shadow: inset 0 1px 0 rgba(95,211,154,.08);
}

.sfc-char-card.is-claimed::after {
    background: #5fd39a;
}

.sfc-char-card.is-unclaimed {
    border-top-color: #e3b743;
    box-shadow: inset 0 1px 0 rgba(227,183,67,.10);
}

.sfc-char-card.is-unclaimed::after {
    background: #e3b743;
}

.sfc-card-style {
    gap: 9px;
    padding: 9px 12px;
    background: rgba(3,13,21,.46);
}

.sfc-card-style span {
    flex-basis: 31px;
    width: 31px;
    height: 31px;
    border-color: #3284ad;
    color: #78d8ff;
    font-size: 10px;
    font-weight: 700;
}

.sfc-card-style strong {
    color: #c2eaff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.15px;
}

.sfc-card-player {
    padding: 12px 14px 9px;
}

.sfc-card-player h2 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.05;
}

.sfc-card-player p {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
}

.sfc-card-meta {
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 5px 15px;
    padding: 9px 14px 10px;
    color: #d2e1eb;
    font-size: 10px;
    font-weight: 600;
    background: rgba(2,10,17,.42);
}

.sfc-card-meta b {
    margin-right: 5px;
    color: #66889e;
    font-size: 8px;
    letter-spacing: .75px;
}

.sfc-card-deadline {
    grid-column: 1 / -1;
    padding-top: 1px;
}

.is-claimed .sfc-claim-state {
    color: #70e2a6;
    font-weight: 700;
}

.is-unclaimed .sfc-claim-state {
    color: #ffd05a;
    font-weight: 700;
}

/* Keep empty slots compact too, without making placeholder copy dominant. */
.low-char-card.is-empty,
.sfc-char-card.is-empty {
    min-height: 82px;
}

/* ---------- Responsive refinements for the denser cards ---------- */
@media (max-width: 980px) {
    .low-char-card {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .low-card-stats {
        gap: 6px 11px;
    }

    .sfc-card-player h2 {
        font-size: 19px;
    }
}

@media (max-width: 620px) {
    .sfc-char-card {
        min-height: 0;
    }
}

@media (max-width: 520px) {
    .low-char-card {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .low-card-main h3 {
        font-size: 16px;
    }

    .low-bringer-card .low-card-main h3 {
        font-size: 18px;
    }

    .low-card-stats {
        font-size: 9px;
    }

    .sfc-card-player h2 {
        font-size: 19px;
    }
}

/* =========================================================
   PHASE 2 - BATTLE STYLE EMBLEMS
   Decorative only: server BattleStyle values still control all data/placement.
   ========================================================= */
.battle-style-emblem {
    display: block;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* LOW: emblem sits in the role rail without increasing card height. */
.low-card-role .battle-style-emblem {
    width: 38px;
    height: 38px;
    margin: 0 auto 3px;
    filter: drop-shadow(0 0 4px rgba(56,189,255,.18));
}

.low-bringer-card .low-card-role .battle-style-emblem {
    width: 44px;
    height: 44px;
    margin-bottom: 2px;
}

.low-card-role {
    justify-items: center;
    text-align: center;
}

/* SFC: number + emblem + Battle Style name form one compact identity strip. */
.sfc-card-style {
    grid-template-columns: 31px 38px minmax(0, 1fr);
}

.sfc-card-style .battle-style-emblem {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin: -4px 0;
}

.sfc-char-card.is-claimed .battle-style-emblem {
    filter: drop-shadow(0 0 4px rgba(95,211,154,.18));
}

.sfc-char-card.is-unclaimed .battle-style-emblem {
    filter: drop-shadow(0 0 4px rgba(227,183,67,.18));
}

@media (max-width: 520px) {
    .low-card-role .battle-style-emblem {
        width: 34px;
        height: 34px;
    }

    .sfc-card-style .battle-style-emblem {
        width: 34px;
        height: 34px;
    }
}

/* =========================================================
   PHASE 3 - REFERENCE GAME BOARD
   Visual-only upgrade based on the approved HELIX mockup.
   LOW ranking and SFC selection logic remain unchanged.
   ========================================================= */

/* ---------- Mission War: two complete nation panels ---------- */
.low-battle-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.low-nation-panel {
    min-width: 0;
    padding: 8px;
    border: 1px solid #29465d;
    background: rgba(3, 14, 23, .78);
}

.low-nation-panel.nation-capella {
    border-color: rgba(229, 67, 87, .72);
    background: linear-gradient(145deg, rgba(52, 13, 24, .42), rgba(3, 14, 23, .88) 42%);
}

.low-nation-panel.nation-procyon {
    border-color: rgba(52, 173, 255, .72);
    background: linear-gradient(215deg, rgba(9, 48, 76, .48), rgba(3, 14, 23, .88) 42%);
}

.low-battle-board .low-nation-head {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    text-align: left;
    overflow: hidden;
}

.low-battle-board .low-nation-head .nation-emblem {
    width: 54px;
    height: 48px;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: screen;
}

.low-battle-board .low-nation-head span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.low-battle-board .low-nation-head h2 {
    margin-top: 2px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

.low-battle-board .low-board-label {
    padding: 9px 2px 5px;
    color: #9bb0bf;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.low-battle-board .low-board-label span {
    padding: 0;
    border: 0;
}

.low-guardian-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.low-battle-board .low-board-cell {
    margin: 0;
}

/* Three-part card: role/emblem | representative class art | player HUD. */
.low-battle-board .low-char-card {
    grid-template-columns: 70px 86px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    min-height: 78px;
    border-width: 1px;
}

.low-battle-board .low-card-role {
    grid-column: 1;
    grid-row: 1 / 3;
    padding: 7px 5px;
}

.low-battle-board .low-card-role .battle-style-emblem {
    width: 30px;
    height: 30px;
    margin-bottom: 1px;
}

.low-battle-board .low-card-role span {
    font-size: 8px;
    letter-spacing: .8px;
}

.low-battle-board .low-card-role small {
    margin-top: 2px;
    font-size: 7px;
}

.low-card-portrait {
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid rgba(70, 102, 124, .44);
    background: #06131d;
}

.low-card-portrait::after,
.sfc-card-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 58%, rgba(4, 16, 25, .88));
}

.low-card-portrait img,
.sfc-card-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.low-battle-board .low-card-main {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    padding: 9px 10px 2px;
}

.low-battle-board .low-card-main h3 {
    font-size: 14px;
    font-weight: 700;
}

.low-battle-board .low-card-main p {
    margin-top: 3px;
    font-size: 8px;
    font-weight: 600;
}

.low-battle-board .low-card-stats {
    grid-column: 3;
    grid-row: 2;
    gap: 8px;
    padding: 3px 10px 8px;
    font-size: 8px;
    font-weight: 700;
}

.low-battle-board .low-card-stats b {
    margin-right: 2px;
    font-size: 6px;
}

/* Bringer stretches across the nation panel and gets the premium gold frame. */
.low-battle-board .low-bringer-card {
    grid-template-columns: 82px 126px minmax(0, 1fr);
    min-height: 94px;
    border-color: #b9922d;
    box-shadow: inset 0 0 0 1px rgba(255, 211, 82, .12);
}

.low-battle-board .low-bringer-card .low-card-role {
    border-color: rgba(193, 151, 44, .50);
}

.low-battle-board .low-bringer-card .low-card-role .battle-style-emblem {
    width: 38px;
    height: 38px;
}

.low-battle-board .low-bringer-card .low-card-role span {
    color: #ffd95b;
    font-size: 10px;
}

.low-battle-board .low-bringer-card .low-card-main h3 {
    font-size: 20px;
}

.low-battle-board .low-bringer-card .low-card-main p {
    font-size: 10px;
}

.low-battle-board .low-bringer-card .low-card-stats {
    gap: 14px;
    font-size: 10px;
}

.low-battle-board .nation-capella.low-char-card {
    border-left: 2px solid #ef4960;
    background: linear-gradient(100deg, rgba(76, 19, 32, .76), rgba(8, 20, 30, .92) 74%);
}

.low-battle-board .nation-procyon.low-char-card {
    border-right: 2px solid #35b8ff;
    background: linear-gradient(260deg, rgba(10, 61, 94, .76), rgba(8, 20, 30, .92) 74%);
}

.low-battle-board .low-char-card.is-empty .low-card-portrait {
    display: none;
}

.low-battle-board .low-char-card.is-empty .low-card-main,
.low-battle-board .low-char-card.is-empty .low-card-stats {
    grid-column: 2 / 4;
}

/* ---------- SFC: portrait-led 3 x 3 class cards ---------- */
.sfc-grid {
    gap: 10px;
}

.sfc-char-card {
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    min-height: 126px;
    border-top-width: 1px;
}

.sfc-card-portrait {
    grid-column: 1;
    grid-row: 1 / 4;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid rgba(67, 101, 124, .50);
    background: #06131d;
}

.sfc-card-portrait::after {
    background: linear-gradient(90deg, transparent 54%, rgba(4, 16, 25, .90));
}

.sfc-card-style,
.sfc-card-player,
.sfc-card-meta {
    grid-column: 2;
}

.sfc-card-style {
    grid-row: 1;
    grid-template-columns: 31px 32px minmax(0, 1fr);
    gap: 7px;
    padding: 7px 9px;
}

.sfc-card-style .battle-style-emblem {
    width: 32px;
    height: 32px;
}

.sfc-card-player {
    grid-row: 2;
    padding: 8px 10px 5px;
}

.sfc-card-player h2 {
    font-size: 19px;
    font-weight: 700;
}

.sfc-card-meta {
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 11px;
    padding: 6px 10px 7px;
    font-size: 9px;
}

.sfc-card-deadline {
    grid-column: auto;
    padding: 0;
}

/* Individual Battle Style accent identities, matching the reference board. */
.sfc-grid .sfc-char-card:nth-child(1) { border-color: #53d47e; }
.sfc-grid .sfc-char-card:nth-child(2) { border-color: #3ed9aa; }
.sfc-grid .sfc-char-card:nth-child(3) { border-color: #9d59f2; }
.sfc-grid .sfc-char-card:nth-child(4) { border-color: #e4b437; }
.sfc-grid .sfc-char-card:nth-child(5) { border-color: #42d6c9; }
.sfc-grid .sfc-char-card:nth-child(6) { border-color: #3bafff; }
.sfc-grid .sfc-char-card:nth-child(7) { border-color: #e64b55; }
.sfc-grid .sfc-char-card:nth-child(8) { border-color: #4ad79a; }
.sfc-grid .sfc-char-card:nth-child(9) { border-color: #ad5cf2; }

.sfc-char-card.is-empty .sfc-card-portrait {
    opacity: .22;
    filter: grayscale(1);
}

@media (max-width: 1180px) {
    .low-guardian-grid {
        grid-template-columns: 1fr;
    }

    .low-battle-board .low-char-card {
        grid-template-columns: 70px 96px minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .low-battle-board {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 780px) {
    .low-guardian-grid {
        grid-template-columns: 1fr;
    }

    .sfc-char-card {
        grid-template-columns: 105px minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .low-battle-board .low-char-card,
    .low-battle-board .low-bringer-card {
        grid-template-columns: 66px 82px minmax(0, 1fr);
    }

    .low-battle-board .low-bringer-card .low-card-main h3 {
        font-size: 17px;
    }

    .sfc-char-card {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .sfc-card-style {
        grid-template-columns: 28px 28px minmax(0, 1fr);
    }

    .sfc-card-style .battle-style-emblem {
        width: 28px;
        height: 28px;
    }
}

/* =========================================================
   HELIX PATCH - CAPELLA PURPLE IDENTITY
   Visual-only nation color correction.
   Procyon, layout, portraits and all LOW/SFC logic are untouched.
   ========================================================= */

/* Legacy/shared LOW selectors retained for responsive fallbacks. */
.low-nation-head.nation-capella::after {
    background: #b84dce;
}

.low-nation-head.nation-capella h2 {
    color: #d989e8;
}

.low-char-card.nation-capella {
    border-left-color: #b84dce;
    background: linear-gradient(105deg, rgba(67, 25, 78, .82), rgba(12, 24, 34, .94) 68%);
}

.low-char-card.nation-capella::before {
    background: #c45ad8;
}

/* Reference V1 Mission War nation panel. */
.low-nation-panel.nation-capella {
    border-color: rgba(184, 77, 206, .78);
    background: linear-gradient(145deg, rgba(56, 18, 68, .52), rgba(3, 14, 23, .88) 42%);
}

.low-battle-board .low-nation-head.nation-capella {
    border-color: rgba(184, 77, 206, .62);
    background: linear-gradient(105deg, rgba(62, 21, 75, .72), rgba(6, 20, 30, .92) 72%);
}

.low-battle-board .low-nation-head.nation-capella::after {
    background: #c45ad8;
}

.low-battle-board .low-nation-head.nation-capella h2 {
    color: #d989e8;
}

.low-battle-board .nation-capella.low-char-card {
    border-left-color: #b84dce;
    background: linear-gradient(100deg, rgba(70, 24, 83, .78), rgba(8, 20, 30, .92) 74%);
}

.low-battle-board .nation-capella.low-char-card::before {
    background: #c45ad8;
}

/* =========================================================
   HELIX PATCH - COMPACT MISSION WAR SCHEDULE
   The Lord of War roster is the primary content. Mission War timing is now
   a compact utility strip inside the hero, immediately before Current Period.
   Lord of War character cards and SFC/WBR presentation are untouched.
   ========================================================= */
.low-hero {
    gap: 24px;
}

.low-hero .world-hero-copy {
    flex: 1 1 auto;
    min-width: 280px;
}

.low-hero-info {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 10px;
}

.low-hero .mission-war-mini {
    width: 360px;
    padding: 11px 12px;
    border: 1px solid #276b91;
    border-left: 3px solid #38bdff;
    background: rgba(6,19,29,.68);
}

.low-hero .mission-war-mini > span {
    display: block;
    margin-bottom: 7px;
    color: #5fcaff;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.6px;
}

.low-hero .mission-war-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.low-hero .mission-war-mini-grid > div {
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid rgba(55,83,103,.48);
    background: rgba(4,15,24,.26);
}

.low-hero .mission-war-mini-grid time,
.low-hero .mission-war-mini-grid small {
    display: block;
    white-space: nowrap;
}

.low-hero .mission-war-mini-grid time {
    color: #d9e9f4;
    font-size: 9px;
    font-weight: 600;
}

.low-hero .mission-war-mini-grid small {
    margin-top: 2px;
    overflow: hidden;
    color: #68879a;
    font-size: 6px;
    font-weight: 600;
    letter-spacing: .7px;
    text-overflow: ellipsis;
}

.low-hero .mission-war-mini-grid .is-special {
    border-color: rgba(56,189,255,.56);
    background: rgba(22,71,98,.32);
}

.low-hero .mission-war-mini-grid .is-special time {
    color: #70d2ff;
}

.low-hero .mission-war-mini-grid .is-special small {
    color: #9bcde3;
}

.low-hero .period-box {
    min-width: 230px;
    padding: 11px 14px;
}

.low-hero .period-box span {
    margin-bottom: 6px;
}

@media (max-width: 1180px) {
    .low-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .low-hero-info {
        width: 100%;
    }

    .low-hero .mission-war-mini {
        width: auto;
        flex: 1 1 auto;
    }

    .low-hero .period-box {
        flex: 0 0 250px;
    }
}

@media (max-width: 780px) {
    .low-hero-info {
        flex-direction: column;
    }

    .low-hero .period-box {
        flex-basis: auto;
    }
}

@media (max-width: 520px) {
    .low-hero .mission-war-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   WORLD BOSS RAID - RAID WINDOW CARD BOARD
   WBR-only presentation. LOW and SFC are intentionally untouched.
   ========================================================= */

.wbr-page {
    /* Match the exact shared LOW / SFC page canvas. */
    background: #081722;
}

.wbr-page .wbr-hero {
    position: relative;

    /* Match the shared LOW / SFC hero height. */
    min-height: 180px;

    /*
     * IMPORTANT: Do not set the `background` shorthand here.
     * The WBR feature artwork is applied later by `.wbr-hero`.
     * A shorthand background here would reset/override that image.
     */
}

.wbr-page .wbr-summary {
    border-left-color: #ff5b32;
}

.wbr-raid-board {
    margin-top: 20px;
    border: 1px solid #29465d;
    border-top: 2px solid #38bdff;
    background: rgba(4,15,24,.26);
}

.wbr-raid-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    border-bottom: 1px solid #29465d;
}

.wbr-raid-heading span {
    color: #58caff;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.8px;
}

.wbr-raid-heading h2 {
    margin: 5px 0 0;
    color: #edf5ff;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1.2px;
}

.wbr-raid-heading > small {
    padding: 6px 9px;
    border: 1px solid #2b6d91;
    color: #72d1ff;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.2px;
    white-space: nowrap;
}

.wbr-raid-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
}

.wbr-raid-card {
    position: relative;
    min-width: 0;
    border: 1px solid #7b3528;
    border-top: 2px solid #ff5935;
    border-bottom: 2px solid #e34828;
    background: linear-gradient(155deg, rgba(18,28,37,.98), rgba(4,15,24,.98));
    overflow: hidden;
}

.wbr-raid-card::before,
.wbr-raid-card::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.wbr-raid-card::before {
    top: -1px;
    left: -1px;
    border-top: 3px solid #ff5b32;
    border-left: 3px solid #ff5b32;
}

.wbr-raid-card::after {
    right: -1px;
    bottom: -1px;
    border-right: 3px solid #ff5b32;
    border-bottom: 3px solid #ff5b32;
}

.wbr-raid-card-head {
    display: flex;
    height: 50px;
    align-items: center;
    border-bottom: 1px solid rgba(83,104,125,.45);
    background: rgba(7,18,27,.88);
}

.wbr-raid-card-head strong {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-right: 1px solid #7b3528;
    color: #ff7857;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .5px;
}

.wbr-raid-card-head span {
    padding-left: 12px;
    color: #e7edf2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.wbr-raid-art {
    height: 92px;
    overflow: hidden;
    border-bottom: 1px solid #713126;
    background: #08131b;
}

.wbr-raid-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wbr-raid-time {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 72px;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(55,83,103,.55);
}

.wbr-raid-time:last-child {
    border-bottom: 0;
}

.wbr-raid-time i {
    position: relative;
    width: 25px;
    height: 25px;
    border: 2px solid #4baedb;
    border-radius: 50%;
}

.wbr-raid-time i::before,
.wbr-raid-time i::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 5px;
    width: 1px;
    height: 7px;
    background: #75d4ff;
    transform-origin: bottom center;
}

.wbr-raid-time i::after {
    transform: rotate(120deg);
}

.wbr-raid-time time {
    display: block;
    color: #6bd2ff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.05;
    white-space: nowrap;
}

.wbr-raid-time small {
    display: block;
    margin-top: 5px;
    color: #8ca8b9;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 1px;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .wbr-raid-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .wbr-raid-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .wbr-raid-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .wbr-raid-grid {
        grid-template-columns: 1fr;
    }

    .wbr-raid-art {
        height: 110px;
    }
}

/* =========================================================
   HELIX EVENT FEATURE BACKGROUNDS V1

   Presentation-only enhancement for the three public event pages.
   The existing hero content, LOW roster, SFC Saint cards, WBR raid
   windows, navigation, and all PHP/database logic remain unchanged.

   Artwork is intentionally strongest on the center/right. A dark
   left-to-right overlay keeps the existing copy readable and lets the
   picture act as atmosphere rather than competing with the interface.
   ========================================================= */

.low-hero,
.sfc-hero,
.wbr-hero {
    position: relative;
    isolation: isolate;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.low-hero {
    background-image:
        linear-gradient(90deg,
            rgba(6,18,28,.96) 0%,
            rgba(6,18,28,.88) 35%,
            rgba(6,18,28,.48) 66%,
            rgba(6,18,28,.34) 100%),
        url('/assets/event-feature-bg/low-mission-war.jpg');
}

.sfc-hero {
    background-image:
        linear-gradient(90deg,
            rgba(6,18,28,.97) 0%,
            rgba(6,18,28,.88) 34%,
            rgba(6,18,28,.42) 65%,
            rgba(6,18,28,.30) 100%),
        url('/assets/event-feature-bg/sfc-forcecalibur.jpg');
}

.wbr-hero {
    background-image:
        linear-gradient(90deg,
            rgba(6,18,28,.97) 0%,
            rgba(6,18,28,.87) 35%,
            rgba(6,18,28,.44) 65%,
            rgba(6,18,28,.30) 100%),
        url('/assets/event-feature-bg/wbr-world-boss.jpg');
}

/* Keep hero content above the artwork layer and preserve current sizing. */
.low-hero > *,
.sfc-hero > *,
.wbr-hero > * {
    position: relative;
    z-index: 1;
}

/* On narrow screens the copy needs more protection because the artwork
   has less horizontal room to sit beside it. */
@media (max-width: 760px) {
    .low-hero,
    .sfc-hero,
    .wbr-hero {
        background-position: 62% center;
    }

    .low-hero {
        background-image:
            linear-gradient(90deg, rgba(6,18,28,.97), rgba(6,18,28,.76)),
            url('/assets/event-feature-bg/low-mission-war.jpg');
    }

    .sfc-hero {
        background-image:
            linear-gradient(90deg, rgba(6,18,28,.97), rgba(6,18,28,.76)),
            url('/assets/event-feature-bg/sfc-forcecalibur.jpg');
    }

    .wbr-hero {
        background-image:
            linear-gradient(90deg, rgba(6,18,28,.97), rgba(6,18,28,.76)),
            url('/assets/event-feature-bg/wbr-world-boss.jpg');
    }
}

/* =========================================================
   HELIX PATCH - GENDER PORTRAIT CARD CONTAINMENT

   The male/female portrait PNGs are intentionally tall source artwork.
   They are decorative only and must never contribute their intrinsic
   dimensions to the LOW or SFC CSS Grid row sizing.

   Positioning the image absolutely removes its natural image height from
   grid sizing while preserving the existing card dimensions and layout.
   LOW/SFC PHP, ranking/selection logic and card structure are untouched.
   ========================================================= */
.low-battle-board .low-card-portrait,
.sfc-card-portrait {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.low-battle-board .low-card-portrait img,
.sfc-card-portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* HELIX FINAL 240x160 FACE CARD PORTRAITS */
.low-card-portrait,
.sfc-card-portrait {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.low-card-portrait img,
.sfc-card-portrait img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
}

/* Bringer cards are wider; keep the full face prominent. */
.low-bringer-card .low-card-portrait img {
    object-position: 50% 30%;
}


/* =========================================================
   HELIX WORLD STATUS POLISH V1
   - Page canvas: between original dark and previous lighter patch.
   - Feature boxes: slightly lighter overlay so the left/text side has definition.
   - Portrait placeholders: fill their allotted frame completely.
   ========================================================= */

.low-page .low-hero,
.sfc-page .sfc-hero,
.wbr-page .wbr-hero {
    background-color: rgba(10, 29, 43, .72);
}

/* The feature artwork already supplies the image.
   Reduce the darkness of the overlay on top of it. */
.low-page .low-hero::before,
.sfc-page .sfc-hero::before,
.wbr-page .wbr-hero::before {
    opacity: .72;
}

/* Fill the portrait frame. The JPGs are already 240x160,
   so cover is preferable here to leaving a dark strip/gap. */
.low-card-portrait img,
.sfc-card-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}