/* ============================================================================
   Server Details — V0-faithful port of app/serverdetails/page.tsx.

   Two surfaces:
     1. Page = glass panel with title + server-card grid (cards open the modal).
     2. Modal = full overlay popup with the world's full config + stats.

   Card grid uses flex+wrap+justify-content:center so 1/2/3/4+ cards lay
   out cleanly without any per-count CSS branching.
   ============================================================================ */

/* ─── Page shell ─────────────────────────────────────────────────────────── */
.sd-page {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 4rem 1rem 5rem;
}
@media (min-width: 768px) {
    .sd-page { padding: 4.5rem 1.5rem 5rem; }
}

.sd-inner {
    max-width: 64rem;
    margin: 0 auto;
    width: 100%;
}

/* ─── Glass panel ────────────────────────────────────────────────────────── */
.sd-panel {
    position: relative;
    border-radius: 1rem;
    background: linear-gradient(170deg, rgba(22,16,10,0.88) 0%, rgba(12,9,6,0.92) 60%, rgba(18,13,8,0.90) 100%);
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(212, 175, 55, 0.06),
        inset 0 1px 0 rgba(212, 175, 55, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    overflow: visible;
}

.sd-panel-shimmer {
    position: absolute;
    inset-inline: 0;
    pointer-events: none;
}
.sd-panel-shimmer.top {
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        #D4AF37 20%,
        #FFF8DC 50%,
        #D4AF37 80%,
        transparent 100%);
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.7);
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
}
.sd-panel-shimmer.bottom {
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212, 175, 55, 0.25) 30%,
        rgba(212, 175, 55, 0.40) 50%,
        rgba(212, 175, 55, 0.25) 70%,
        transparent);
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.sd-panel-corner {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
}
.sd-panel-corner.tl {
    top: 1rem; right: 1rem;
    border-top: 1px solid rgba(212, 175, 55, 0.35);
    border-right: 1px solid rgba(212, 175, 55, 0.35);
    border-top-right-radius: 4px;
}
.sd-panel-corner.tr {
    top: 1rem; left: 1rem;
    border-top: 1px solid rgba(212, 175, 55, 0.35);
    border-left: 1px solid rgba(212, 175, 55, 0.35);
    border-top-left-radius: 4px;
}
.sd-panel-corner.bl {
    bottom: 1rem; right: 1rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    border-right: 1px solid rgba(212, 175, 55, 0.35);
    border-bottom-right-radius: 4px;
}
.sd-panel-corner.br {
    bottom: 1rem; left: 1rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    border-left: 1px solid rgba(212, 175, 55, 0.35);
    border-bottom-left-radius: 4px;
}

.sd-panel-body {
    padding: 2rem 1.5rem 2.5rem;
}
@media (min-width: 768px) {
    .sd-panel-body { padding: 2rem 2.5rem 2.5rem; }
}

/* ─── Page header ────────────────────────────────────────────────────────── */
.sd-page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
}

.sd-title-block {
    display: inline-block;
    position: relative;
    padding: 0.625rem 2.5rem;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(8, 5, 2, 0.82) 28%,
        rgba(8, 5, 2, 0.88) 50%,
        rgba(8, 5, 2, 0.82) 72%,
        transparent 100%);
}
.sd-title-block::before,
.sd-title-block::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.28) 35%,
        rgba(212, 175, 55, 0.28) 65%,
        transparent 100%);
}
.sd-title-block::before { top: 0; }
.sd-title-block::after  { bottom: 0; }

.sd-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #FFF8E7 0%, #F4E287 30%, #D4AF37 65%, #9A7515 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 14px rgba(212, 175, 55, 0.35));
}
@media (min-width: 768px) {
    .sd-title { font-size: 2.25rem; }
}

.sd-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.sd-divider .line {
    flex: 1 1 0;
    max-width: 6.25rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5));
}
.sd-divider .line + .line {
    background: linear-gradient(270deg, transparent, rgba(212, 175, 55, 0.5));
}
.sd-divider .glyph {
    color: rgba(212, 175, 55, 0.85);
    display: inline-flex;
    align-items: center;
}

/* ─── Card grid — flex-center for any count ─────────────────────────────── */
/*
 * Flex-wrap with justify-content:center means 1 card centers as a single
 * narrow card, 2 cards balance side-by-side, 3 cards fill the row, 4+
 * wrap to the next row centered. Each card has a soft min/max so the
 * shape stays consistent regardless of the count.
 */
.sd-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

/* ─── Server card ────────────────────────────────────────────────────────── */
.sd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 280px;
    min-width: 250px;
    max-width: 340px;
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    text-align: right;
    color: inherit;
    background: linear-gradient(165deg, rgba(38, 28, 18, 0.72) 0%, rgba(18, 14, 9, 0.80) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(212, 175, 55, 0.1);

    transition:
        transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.25s ease,
        box-shadow 0.25s ease;

    opacity: 0;
    transform: translateY(28px);
    animation: sdCardIn 0.45s ease-out forwards;
    animation-delay: calc(0.18s + var(--stagger, 0) * 0.1s);
}
@keyframes sdCardIn {
    to { opacity: 1; transform: translateY(0); }
}
.sd-card:hover,
.sd-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.55);
    outline: none;
}

/* Prime card variant (Round 1). */
.sd-card.is-prime {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow:
        0 0 20px rgba(245, 158, 11, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(245, 158, 11, 0.14);
}
/* Static soft halo — matches the toned-down prime treatment used on the
   landing widget and journey modal (no more infinite breathing blur). */
.sd-card-ambient {
    position: absolute;
    inset: -0.5rem;
    border-radius: 1rem;
    z-index: -1;
    pointer-events: none;
    filter: blur(36px);
    background: radial-gradient(ellipse at 50% 60%,
        rgba(245, 158, 11, 0.16) 0%,
        rgba(212, 175, 55, 0.07) 50%,
        transparent 80%);
    opacity: 0.45;
}

/* Card top shimmer (between the prime banner and the body). */
.sd-card-shimmer {
    position: absolute;
    top: 0;
    right: 2rem;
    left: 2rem;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45), transparent);
}

/* Prime banner (top strip with "Prime Realm" label). */
.sd-card-prime-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: #F59E0B;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(245, 158, 11, 0.18) 20%,
        rgba(245, 158, 11, 0.22) 50%,
        rgba(245, 158, 11, 0.18) 80%,
        transparent 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.25);
}
.sd-card-prime-banner .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #F59E0B;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
}

.sd-card-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    flex: 1 1 auto;
}

/* Identity row: status dot + name eyebrow + subtitle */
.sd-card-id {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    min-height: 4rem;
}
.sd-card-dot {
    position: relative;
    margin-top: 0.375rem;
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    display: inline-block;
}
.sd-card-dot .dot-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.sd-card-dot .dot-ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.6;
    animation: sdPing 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes sdPing {
    75%, 100% { transform: scale(2); opacity: 0; }
}
.sd-card-dot.is-online .dot-core { background: #34D399; }
.sd-card-dot.is-online .dot-ping { background: #34D399; }
.sd-card-dot.is-launching .dot-core { background: #F59E0B; }

.sd-card-id-text { flex: 1 1 auto; min-width: 0; }
.sd-card-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(212, 175, 55, 0.85);
    margin: 0 0 0.25rem;
}
.sd-card-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.35;
    color: #EDD98A;
    margin: 0;
}

/* Day / Phase pills row */
.sd-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
    min-height: 1.75rem;
}
.sd-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.5;
}
.sd-pill-day {
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #D4AF37;
}
.sd-pill-phase {
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: #34D399;
}
.sd-pill-launching {
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.32);
    color: #93C5FD;
}
/* Artifact phase — red pulsing glow. */
.sd-pill-artifact {
    background: linear-gradient(135deg, rgba(40, 10, 10, 0.95), rgba(60, 15, 15, 0.9));
    border: 1px solid rgba(248, 113, 113, 0.5);
    color: #FCA5A5;
    animation: sdArtifactGlow 2.4s ease-in-out infinite;
}
@keyframes sdArtifactGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(248, 113, 113, 0.3); }
    50%      { box-shadow: 0 0 14px rgba(248, 113, 113, 0.7), 0 0 28px rgba(200, 60, 60, 0.4); }
}


/* Tribe roster pill — how many tribes this round actually offers.
   Violet is the one hue the status pills (gold day / emerald phase / blue
   launching / red artifact) do not use, and it is already the tribe colour in
   the registration picker, so the roster reads as a property of the round
   rather than as another state. Drawn only when the world published a roster. */
.sd-pill-tribes {
    background: rgba(192, 132, 252, 0.09);
    border: 1px solid rgba(192, 132, 252, 0.32);
    color: #D8B4FE;
}
.sd-card-hr {
    display: block;
    height: 1px;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
}

/* 3-stat strip — Players (gold) / Online (green) / Speed (red) */
.sd-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    min-height: 5rem;
}
.sd-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
}
.sd-stat-icon {
    display: inline-flex;
    margin-bottom: 0.25rem;
}
.sd-stat-value {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.sd-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}
.sd-stat-players       { border: 1px solid rgba(212, 175, 55, 0.2); box-shadow: 0 0 12px rgba(212, 175, 55, 0.12); }
.sd-stat-players .sd-stat-icon  { color: #D4AF37; }
.sd-stat-players .sd-stat-value { color: #D4AF37; text-shadow: 0 0 14px rgba(212, 175, 55, 0.6); }
.sd-stat-players .sd-stat-label { color: rgba(212, 175, 55, 0.85); }

.sd-stat-online        { border: 1px solid rgba(52, 211, 153, 0.2); box-shadow: 0 0 12px rgba(52, 211, 153, 0.12); }
.sd-stat-online .sd-stat-icon  { color: #34D399; }
.sd-stat-online .sd-stat-value { color: #34D399; text-shadow: 0 0 14px rgba(52, 211, 153, 0.6); }
.sd-stat-online .sd-stat-label { color: rgba(52, 211, 153, 0.85); }

.sd-stat-speed         { border: 1px solid rgba(248, 113, 113, 0.2); box-shadow: 0 0 12px rgba(248, 113, 113, 0.12); }
.sd-stat-speed .sd-stat-icon   { color: #F87171; }
.sd-stat-speed .sd-stat-value  { color: #F87171; text-shadow: 0 0 14px rgba(248, 113, 113, 0.6); }
.sd-stat-speed .sd-stat-label  { color: rgba(248, 113, 113, 0.85); }

/* Launching card — countdown block in place of stats. */
.sd-card-launch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.18);
}
.sd-card-launch-label {
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(190, 170, 130, 0.85);
    margin-bottom: 0.375rem;
}
.sd-card-launch-val {
    font-family: 'Cinzel', serif;
    font-size: 1.1875rem;
    font-weight: 700;
    color: #93C5FD;
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
}

/* "View Details" hint */
.sd-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: rgba(154, 130, 85, 0.85);
    transition: color 0.25s ease;
}
.sd-card:hover .sd-card-cta,
.sd-card:focus-visible .sd-card-cta {
    color: #D4AF37;
}

/* ════════════════════════════════════════════════════════════════════════════
   MODAL
   ──────────────────────────────────────────────────────────────────────────── */

.sd-modal-root {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
@media (min-width: 768px) {
    .sd-modal-root { padding: 1.5rem; }
}

.sd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.sd-modal {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 64rem;
    max-height: 90vh;
    display: flex;
}

.sd-modal-panel {
    position: relative;
    width: 100%;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
    background: linear-gradient(170deg, rgba(22,16,10,0.97) 0%, rgba(12,9,6,0.98) 60%, rgba(18,13,8,0.97) 100%);
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(212, 175, 55, 0.06),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.sd-modal-enter        { transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                                     transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.sd-modal-enter-start  { opacity: 0; transform: translateY(32px) scale(0.97); }
.sd-modal-enter-end    { opacity: 1; transform: translateY(0)    scale(1);    }
.sd-modal-leave        { transition: opacity 0.22s ease, transform 0.22s ease; }
.sd-modal-leave-start  { opacity: 1; transform: translateY(0)    scale(1);    }
.sd-modal-leave-end    { opacity: 0; transform: translateY(24px) scale(0.97); }

.sd-modal-shimmer {
    position: absolute;
    inset-inline: 0;
    pointer-events: none;
}
.sd-modal-shimmer.top {
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        #D4AF37 20%,
        #FFF8DC 50%,
        #D4AF37 80%,
        transparent 100%);
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.7);
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
}
.sd-modal-shimmer.bottom {
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212, 175, 55, 0.25) 30%,
        rgba(212, 175, 55, 0.40) 50%,
        rgba(212, 175, 55, 0.25) 70%,
        transparent);
    border-radius: 0 0 1rem 1rem;
}

.sd-modal-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sd-modal-scroll {
    padding: 1.25rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
}
@media (min-width: 640px) {
    .sd-modal-scroll { padding: 1.75rem 2rem; }
}
.sd-modal-scroll::-webkit-scrollbar { width: 8px; }
.sd-modal-scroll::-webkit-scrollbar-track { background: transparent; }
.sd-modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.18);
    border-radius: 8px;
}

/* ─── Modal header ───────────────────────────────────────────────────────── */
.sd-modal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.sd-modal-head-left { flex: 1 1 auto; min-width: 0; }
.sd-modal-head-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: rgba(212, 175, 55, 0.85);
    margin: 0 0 0.25rem;
}
.sd-modal-head-title {
    font-family: 'Cinzel', serif;
    font-size: 1.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0;
    background: linear-gradient(180deg, #FFF8E7 0%, #F4E287 30%, #D4AF37 65%, #9A7515 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@media (min-width: 768px) {
    .sd-modal-head-title { font-size: 1.875rem; }
}

/* Stats card (live) — Players / Day / Online */
.sd-modal-statcard {
    display: flex;
    gap: 1.25rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(160deg, rgba(18, 13, 6, 0.7) 0%, rgba(10, 7, 3, 0.8) 100%);
    border: 1px solid rgba(212, 175, 55, 0.14);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.4);
}
.sd-modal-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.sd-modal-stat .lbl {
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(154, 130, 85, 0.85);
}
.sd-modal-stat .val {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'Cinzel', serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
}
.sd-modal-stat .val.gold        { color: #E8D9B0; text-shadow: 0 0 14px rgba(212, 175, 55, 0.35); }
.sd-modal-stat .val.gold-bright { color: #D4AF37; text-shadow: 0 0 14px rgba(212, 175, 55, 0.5); }
.sd-modal-stat .val.emerald     { color: #34D399; text-shadow: 0 0 14px rgba(52, 211, 153, 0.4); }
.sd-modal-stat .val .online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.8);
}
.sd-modal-statdivider {
    width: 1px;
    align-self: stretch;
    background: rgba(212, 175, 55, 0.12);
}

/* Launching chip (replaces stats card on launching servers). */
.sd-modal-launchchip {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.125rem;
    border-radius: 0.75rem;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.32);
    color: #93C5FD;
    font-family: 'Cinzel', serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.sd-modal-launchchip .lbl { color: rgba(190, 170, 130, 0.75); letter-spacing: 0.18em; }
.sd-modal-launchchip .val { color: #93C5FD; }


/* Roster strip under the round name in the modal header.
   Deliberately direction-neutral (flex + gap, no left/right) so the RTL twin
   keeps the same block: the count chip leads, the names follow, and in Hebrew
   the whole strip simply mirrors with the header. */
.sd-modal-tribes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.625rem;
    margin-top: 0.625rem;
}
.sd-modal-tribes-count {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    background: rgba(192, 132, 252, 0.09);
    border: 1px solid rgba(192, 132, 252, 0.32);
    color: #D8B4FE;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    line-height: 1.6;
    white-space: nowrap;
}
.sd-modal-tribes-names {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(232, 217, 176, 0.7);
}
.sd-modal-tribes-names .sep { color: rgba(212, 175, 55, 0.45); }
@media (max-width: 640px) {
    /* On a phone the header is already two stacked blocks; the names would
       wrap to three lines and push the stats card off the first screen. The
       count chip alone still answers "five tribes or three?". */
    .sd-modal-tribes-names { display: none; }
}
/* Red close X */
.sd-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
    border-radius: 50%;
    background: rgba(180, 30, 30, 0.25);
    border: 1px solid rgba(180, 30, 30, 0.5);
    color: rgba(250, 120, 120, 0.9);
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.sd-modal-close:hover {
    background: rgba(180, 30, 30, 0.45);
    box-shadow: 0 0 14px rgba(180, 30, 30, 0.4);
    transform: scale(1.1);
}
.sd-modal-close:active { transform: scale(0.88); }

.sd-modal-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.75rem;
}
.sd-modal-divider .line {
    flex: 1 1 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.25));
}
.sd-modal-divider .line + .line {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.25), transparent);
}
.sd-modal-divider .glyph {
    color: rgba(212, 175, 55, 0.85);
    display: inline-flex;
}

/* ─── Section box ────────────────────────────────────────────────────────── */
.sd-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sd-sections-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    /* Asymmetric: the data-rich Game Speeds card (first child) fills the left
       column full-height; Map & Protection + Hero & Adventures stack in the
       right column, so the heights line up and no card looks empty next to it. */
    .sd-sections-row {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
    .sd-sections-row > .sd-section:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
}

.sd-section {
    border-radius: 0.75rem;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(32, 24, 12, 0.85) 0%, rgba(22, 16, 8, 0.9) 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.35);
    border-right: 1px solid rgba(212, 175, 55, 0.08);
    border-left: 1px solid rgba(212, 175, 55, 0.08);
    border-bottom: 1px solid rgba(212, 175, 55, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(212, 175, 55, 0.08),
        inset 0 2px 12px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.3);
}
.sd-section-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(8, 6, 2, 0.4) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.sd-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 0.375rem;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.18);
    color: rgba(212, 175, 55, 0.85);
}
.sd-section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #C9A84C;
    margin: 0;
}
.sd-section-trail {
    flex: 1 1 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.2), transparent);
}
.sd-section-body {
    padding: 1rem;
}

/* Detail row (label-left, value-right with hairline divider) */
.sd-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.07);
}
.sd-detail-row:last-child { border-bottom: 0; }
.sd-detail-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(154, 130, 85, 0.85);
}
.sd-detail-value {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    color: #E8D9B0;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

/* ─── Free Gold Economy ──────────────────────────────────────────────────── */
.sd-econ-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
}
.sd-econ-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.sd-econ-stat .lbl {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(154, 130, 85, 0.85);
}
.sd-econ-stat .val {
    font-family: 'Cinzel', serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #E8D9B0;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.4);
}
/* Condition caption under a stat (e.g. the affiliate village trigger) — ties a
   secondary value to its parent reward instead of floating as a separate stat. */
.sd-econ-stat .sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-align: center;
    max-width: 9.5rem;
    margin-top: 0.05rem;
    color: rgba(196, 178, 142, 0.85);
}
.sd-econ-badge {
    margin-top: 1.25rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.2);
    color: #D4AF37;
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
}

/* ─── Server Timeline (horizontal) ───────────────────────────────────────── */
.sd-timeline {
    position: relative;
    padding: 0.5rem 0 0.25rem;
}
.sd-timeline-track {
    position: absolute;
    right: 1rem;
    left: 1rem;
    top: 1.5rem;
    height: 6px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.6);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.8),
        inset 0 2px 6px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sd-timeline-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
}

.sd-tl-event {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}
.sd-tl-node-wrap {
    position: relative;
    margin-bottom: 0.625rem;
}
.sd-tl-node {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(30, 24, 14, 0.95) 0%, rgba(18, 14, 6, 0.98) 100%);
    border: 1px solid rgba(212, 175, 55, 0.18);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sd-tl-node .inner {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.12);
}
.sd-tl-event.is-current .sd-tl-node {
    background: linear-gradient(135deg, #34D399 0%, #059669 100%);
    border: none;
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.5), 0 0 4px rgba(52, 211, 153, 0.7);
}
.sd-tl-event.is-current .sd-tl-node .inner { background: rgba(255, 255, 255, 0.9); }
.sd-tl-event.is-current .sd-tl-node-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #34D399;
    opacity: 0.4;
    animation: sdPing 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.sd-tl-event.is-past .sd-tl-node {
    background: linear-gradient(135deg, #D4AF37 0%, #9A7515 100%);
    border: none;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.45), 0 0 4px rgba(212, 175, 55, 0.6);
}
.sd-tl-event.is-past .sd-tl-node .inner { background: rgba(22, 16, 6, 0.7); }

.sd-tl-event:hover .sd-tl-node { transform: scale(1.25); }

.sd-tl-label {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin: 0 0 0.3rem;
    color: rgba(196, 178, 142, 0.78);
}
.sd-tl-event.is-current .sd-tl-label {
    color: #34D399;
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
}
.sd-tl-event.is-past .sd-tl-label {
    color: #D4AF37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.sd-tl-date {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    color: rgba(196, 178, 142, 0.85);
    margin: 0;
    line-height: 1.3;
}
.sd-tl-event.is-current .sd-tl-date,
.sd-tl-event.is-past .sd-tl-date {
    color: rgba(212, 192, 150, 0.82);
}
.sd-tl-badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: rgba(212, 175, 55, 0.08);
    color: rgba(212, 175, 55, 0.85);
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Per-node hover tooltip — appears above the node, plain CSS hover (no JS). */
.sd-tl-tooltip {
    position: absolute;
    right: 50%;
    bottom: calc(100% + 0.625rem);
    transform: translateX(50%);
    width: 14rem;
    max-width: min(14rem, 80vw);
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background: linear-gradient(160deg, rgba(18, 13, 6, 0.98), rgba(10, 7, 3, 0.99));
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 175, 55, 0.06);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 50;
    text-align: right;
}
.sd-tl-event:hover .sd-tl-tooltip,
.sd-tl-event:focus-visible .sd-tl-tooltip {
    opacity: 1;
}
.sd-tl-tooltip::before {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 50%;
    transform: translateX(50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: rgba(10, 7, 3, 0.99);
    border-left: 1px solid rgba(212, 175, 55, 0.28);
    border-bottom: 1px solid rgba(212, 175, 55, 0.28);
}
.sd-tl-tooltip-title {
    margin: 0 0 0.25rem;
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #D4AF37;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.sd-tl-tooltip-body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(200, 180, 145, 0.85);
}

/* ─── Oasis & Wildlife ───────────────────────────────────────────────────── */
.sd-oasis-desc {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    position: relative;
}
.sd-oasis-desc p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(190, 170, 130, 0.85);
}
.sd-oasis-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: rgba(212, 175, 55, 0.8);
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: default;
    user-select: none;
}
.sd-oasis-tip {
    position: absolute;
    bottom: calc(100% + 0.875rem);
    right: 50%;
    transform: translateX(50%);
    width: 18rem;
    max-width: min(18rem, 85vw);
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: linear-gradient(160deg, rgba(18, 13, 6, 0.98) 0%, rgba(10, 7, 3, 0.99) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(212, 175, 55, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    text-align: right;
}
.sd-oasis-info:hover .sd-oasis-tip,
.sd-oasis-info:focus-visible .sd-oasis-tip { opacity: 1; }
.sd-oasis-tip::before {
    content: '';
    position: absolute;
    inset: 0 0 -1px 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5) 40%, rgba(212, 175, 55, 0.5) 60%, transparent);
    border-radius: 0.75rem 0.75rem 0 0;
}
.sd-oasis-tip::after {
    content: '';
    position: absolute;
    bottom: -7px;
    right: 50%;
    transform: translateX(50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(10, 7, 3, 0.99);
    border-left: 1px solid rgba(212, 175, 55, 0.25);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
.sd-oasis-tip .grp {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.sd-oasis-tip .grp .t {
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #D4AF37;
}
.sd-oasis-tip .grp .b {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(200, 180, 145, 0.8);
}
.sd-oasis-tip .hr {
    display: block;
    height: 1px;
    background: rgba(212, 175, 55, 0.08);
}

.sd-oasis-timeline {
    position: relative;
    padding: 0.5rem 0 0.25rem;
}
.sd-oasis-phase {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.sd-oasis-node {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.625rem;
    background: linear-gradient(135deg, #34D399 0%, #059669 100%);
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.45), 0 0 4px rgba(52, 211, 153, 0.6);
}
.sd-oasis-node .inner {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
}
/*
 * Phase state. The base node/name above stay as they were, so a world with
 * no known day (pre-launch) renders exactly as before. Same vocabulary as the
 * Server Timeline directly above it: gold = done, green + ping = where the
 * round is now, muted = still to come.
 */
.sd-oasis-phase.is-past .sd-oasis-node {
    background: linear-gradient(135deg, #D4AF37 0%, #9A7515 100%);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.45), 0 0 4px rgba(212, 175, 55, 0.6);
}
.sd-oasis-phase.is-past .sd-oasis-node .inner { background: rgba(22, 16, 6, 0.7); }
.sd-oasis-phase.is-past .sd-oasis-name {
    color: #E8D48A;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
}
.sd-oasis-phase.is-future .sd-oasis-node {
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow: none;
}
.sd-oasis-phase.is-future .sd-oasis-node .inner { background: rgba(212, 175, 55, 0.45); }
.sd-oasis-phase.is-future .sd-oasis-name {
    color: rgba(214, 196, 158, 0.75);
    filter: none;
}
.sd-oasis-phase.is-current .sd-oasis-node {
    position: relative;
}
.sd-oasis-phase.is-current .sd-oasis-node::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #34D399;
    opacity: 0.4;
    animation: sdPing 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .sd-oasis-phase.is-current .sd-oasis-node::after { animation: none !important; }
}

.sd-oasis-name {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #34D399;
    filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.4));
    margin: 0;
}
.sd-oasis-day {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.14rem 0.55rem;
    border-radius: 0.3rem;
    background: rgba(212, 175, 55, 0.1);
    color: rgba(226, 200, 130, 0.92);
    font-family: 'Cinzel', serif;
    font-size: 0.8125rem;
}
.sd-oasis-stats {
    display: flex;
    gap: 1.4rem;
    margin-top: 0.65rem;
}
.sd-oasis-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
}
.sd-oasis-stat .lbl {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(196, 178, 142, 0.8);
}
.sd-oasis-stat .val {
    font-family: 'Cinzel', serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: #E8D9B0;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* ─── Reduced-motion safety ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sd-card,
    .sd-modal-enter,
    .sd-modal-leave,
    .sd-tl-tooltip,
    .sd-oasis-tip { animation: none !important; transition: none !important; }
    .sd-card { opacity: 1; transform: none; }
    .sd-modal-enter-start,
    .sd-modal-leave-end { opacity: 0; transform: none; }
    .sd-modal-enter-end,
    .sd-modal-leave-start { opacity: 1; transform: none; }
    .sd-card-ambient,
    .sd-pill-artifact,
    .sd-card-dot .dot-ping,
    .sd-tl-event.is-current .sd-tl-node-wrap::after { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════════════════════
   READABILITY PASS 2026-08-20 — mirrors the Manual modal treatment.

   Must stay at the FOOT of this file: these override base rules of equal
   specificity, so they only win by source order.
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── Type. Almost the entire modal was 11.7px. ──────────────────────────── */
.sd-section-title               { font-size: 0.9375rem; }   /* 13.5px */
.sd-detail-label                { font-size: 1rem; }        /* 14.4px */
.sd-detail-value                { font-size: 1.25rem; }     /* 18px */
.sd-modal-stat .lbl,
.sd-econ-stat .lbl              { font-size: 0.9375rem; }
.sd-tl-label                    { font-size: 0.9375rem; }
.sd-tl-date                     { font-size: 0.9375rem; }
.sd-oasis-name                  { font-size: 0.9375rem; }
.sd-oasis-day                   { font-size: 0.875rem; }    /* 12.6px, a chip */
.sd-oasis-desc p                { font-size: 1rem; }        /* 14.4px, body copy */
.sd-oasis-stat .lbl             { font-size: 0.875rem; }
.sd-oasis-stat .val             { font-size: 1.0625rem; }
.sd-econ-badge                  { font-size: 0.875rem; }
.sd-econ-stat .sub              { font-size: 0.875rem; }
.sd-modal-head-eyebrow          { font-size: 0.875rem; }
.sd-oasis-tip .grp .t           { font-size: 0.9375rem; }
.sd-oasis-tip .grp .b           { font-size: 0.9375rem; }

/* ─── Contrast. The label colour was the only thing under AA. ────────────── */
/* rgba(154,130,85,0.85) measured 4.00:1 against the composited panel; this is
   5.99:1. The value it labels is 13.39:1, so value-first still reads. */
.sd-detail-label,
.sd-modal-stat .lbl,
.sd-econ-stat .lbl,
.sd-oasis-stat .lbl             { color: rgba(178, 154, 104, 0.92); }
.sd-tl-date                     { color: rgba(219, 201, 163, 0.92); }
.sd-oasis-desc p                { color: rgba(214, 197, 160, 0.95); }
.sd-oasis-tip .grp .b           { color: rgba(214, 197, 160, 0.95); }
.sd-econ-stat .sub              { color: rgba(206, 188, 152, 0.92); }

/* ─── Corner brackets, gone. ─────────────────────────────────────────────── */
/*
 * The bracket motif was removed site-wide during the Hall of Fame rebuild
 * (manual panel, CTA, /halloffame) after the owner rejected it; Server Details
 * was the last place still drawing it. Replaced by the same etched rim the
 * Manual panel uses: a 1px gradient border via the two-layer mask trick, lit at
 * the top-left and fading out, which reads as a lip on the panel rather than as
 * four decals stuck on the corners.
 */
.sd-panel-corner { display: none !important; }

.sd-modal-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(145deg,
        rgba(255, 244, 214, 0.50) 0%,
        rgba(212, 175, 55, 0.28) 18%,
        rgba(212, 175, 55, 0.10) 46%,
        rgba(255, 255, 255, 0.03) 72%,
        rgba(255, 255, 255, 0.06) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

/* ─── Config rows: the numbers do the talking ────────────────────────────
 * Every value was one flat Cinzel string, so "x" carried the same weight and
 * colour as the 10 in front of it and eight rows read as eight equal blobs.
 * The unit is now its own demoted span (see sd_value_html in the page), the
 * figure is larger and set in tabular numerals so the right-hand column lines
 * up down the card, and the label is bigger and brighter but still clearly
 * subordinate. Measured: label 7.89:1, unit 6.99:1, figure 13.39:1.
 */
.sd-detail-row {
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.10);
    gap: 1rem;
}
.sd-detail-label {
    letter-spacing: 0.08em;
    color: rgba(196, 174, 124, 0.95);
    line-height: 1.3;
}
.sd-detail-value {
    /* tabular figures keep 200x200 and 10x on the same optical grid */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: 0.01em;
    line-height: 1.15;
    white-space: nowrap;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.28);
}
.sd-detail-value .u {
    font-size: 0.62em;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-right: 0.12em;
    color: rgba(186, 163, 112, 0.95);
    text-shadow: none;
    vertical-align: baseline;
}

/* ─── The running oasis phase says so in words ───────────────────────────
 * Colour alone carried this state, and gold (finished) is the brighter tone
 * in this theme, so the completed phases looked like the active one. WCAG
 * 1.4.1 as well: state must not be conveyed by colour alone.
 */
.sd-oasis-live {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.05rem 0.5rem;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6EE7B7;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
}


/* ════════════════════════════════════════════════════════════════════════════
   SPEC PANEL REDESIGN 2026-08-20
   Three separate cards become one panel of three equal groups. See the patch
   script header for the reasoning behind each block.
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── 1. One panel, three equal columns ──────────────────────────────────── */
@media (min-width: 768px) {
    /* Undo the old asymmetric span: the tall Game Speeds card no longer fills
       the left column on its own. */
    .sd-sections-row {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        align-items: stretch;
        gap: 0;
    }
    .sd-sections-row > .sd-section:first-child {
        grid-column: auto;
        grid-row: auto;
    }
}

/* The card chrome moves from each child up to the row, so the three groups sit
   inside a single frame instead of three competing ones. */
.sd-sections-row {
    border-radius: 0.75rem;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(32, 24, 12, 0.85) 0%, rgba(22, 16, 8, 0.9) 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.35);
    border-right: 1px solid rgba(212, 175, 55, 0.08);
    border-left: 1px solid rgba(212, 175, 55, 0.08);
    border-bottom: 1px solid rgba(212, 175, 55, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(212, 175, 55, 0.08),
        inset 0 2px 12px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.3);
}
.sd-sections-row > .sd-section {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}
/* Hairline between columns, never after the last one. */
@media (min-width: 768px) {
    .sd-sections-row > .sd-section + .sd-section {
        border-right: 1px solid rgba(212, 175, 55, 0.10);
    }
}
@media (max-width: 767px) {
    .sd-sections-row > .sd-section + .sd-section {
        border-top: 1px solid rgba(212, 175, 55, 0.10);
    }
}
/* The group header keeps its icon + gold title + trailing rule, but loses the
   heavy panel-top gradient now that it is inside a shared frame. */
.sd-sections-row > .sd-section > .sd-section-head {
    background: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.10);
    padding: 0.85rem 1.1rem 0.7rem;
}
.sd-sections-row > .sd-section > .sd-section-body {
    flex: 1 1 auto;
    padding-inline: 1.1rem;
}

/* ─── 2. Rows: rhythm from spacing, not from seven rules ─────────────────── */
.sd-sections-row .sd-detail-row {
    border-bottom: 0;
    padding: 0.62rem 0;
}
.sd-sections-row .sd-detail-row + .sd-detail-row {
    border-top: 1px solid rgba(212, 175, 55, 0.055);
}

/* ─── 3. Labels read as words, not as an inscription ─────────────────────── */
.sd-detail-label {
    text-transform: none;
    letter-spacing: 0.005em;
    font-weight: 450;
    font-size: 1rem;
    color: rgba(196, 174, 124, 0.95);
}

/* ─── 4. Figures in the text face, with real tabular numerals ────────────── */
.sd-detail-value {
    font-family: 'Inter', sans-serif;
    font-weight: 650;
    font-size: 1.25rem;
    letter-spacing: 0.005em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv05' 1;
    color: #F2E6C4;
    /* the glow read as haze at this size; weight and scale carry it instead */
    text-shadow: none;
}
.sd-detail-value .u {
    font-family: 'Inter', sans-serif;
    font-size: 0.66em;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-right: 0.14em;
    color: rgba(190, 168, 118, 0.95);
    text-transform: lowercase;
}

/* ════════════════════════════════════════════════════════════════════════════
   OWNER ROUND 2 2026-08-20
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── Bigger figures ─────────────────────────────────────────────────────── */
.sd-detail-value { font-size: 1.5rem; }      /* 21.6px, was 18 */
.sd-detail-label { font-size: 1.0625rem; }   /* 15.3px, was 14.4 */

/* The multiplication sign leads the figure and stays quiet, the way
   .swcard-stat-value reads on the landing. */
.sd-detail-value .m {
    font-family: 'Inter', sans-serif;
    font-size: 0.62em;
    font-weight: 600;
    margin-left: 0.1em;
    color: rgba(190, 168, 118, 0.95);
    vertical-align: baseline;
}

/* ─── The ACTIVE chip now sits above the phase dot ───────────────────────── */
.sd-oasis-live {
    margin: 0 0 0.4rem;
}

/* ─── The oasis "i" tooltip was being clipped ────────────────────────────── */
/*
 * It opens upward (bottom: 100% + 0.875rem) straight into the section header,
 * and .sd-section carries overflow:hidden for its rounded corners - so the top
 * of the tooltip was cut off and the text ran under the header. The Manual hit
 * exactly this and solved it by flipping the tooltip DOWN; same fix here, into
 * the section body where there is room, plus overflow:visible on this one
 * section so nothing clips it on the way.
 */
.sd-section:has(.sd-oasis-timeline) { overflow: visible; }
.sd-section:has(.sd-oasis-timeline) > .sd-section-head {
    border-top-right-radius: 0.75rem;
    border-top-left-radius: 0.75rem;
}
.sd-oasis-tip {
    bottom: auto;
    top: calc(100% + 0.75rem);
}
/* the little pointer has to move to the other side with it */
.sd-oasis-tip::after {
    top: -5px;
    bottom: auto;
    transform: translateX(50%) rotate(225deg);
}

/* ════════════════════════════════════════════════════════════════════════════
   PHANTOM SCROLL FIX 2026-08-20
   ──────────────────────────────────────────────────────────────────────────── */
/*
 * The oasis tooltip is 614px tall and was hidden with opacity alone, so it kept
 * its place in the layout. Clipped upward it cost nothing; opening downward out
 * of an overflow:visible section it added 419px of empty scroll to the modal
 * (.sd-sections scrollHeight 1508 -> 1089 once display:none).
 *
 * display is discrete, so the fade needs transition-behavior + @starting-style.
 * Browsers without them simply show the tooltip instantly, which is fine.
 */
.sd-oasis-tip {
    display: none;
    transition: opacity 0.18s ease, display 0.18s allow-discrete;
}
.sd-oasis-info:hover .sd-oasis-tip,
.sd-oasis-info:focus-visible .sd-oasis-tip {
    display: flex;
    opacity: 1;
}
@starting-style {
    .sd-oasis-info:hover .sd-oasis-tip,
    .sd-oasis-info:focus-visible .sd-oasis-tip { opacity: 0; }
}

/* It is 596px of copy in four groups - a panel, not a tooltip. Even shown on
   demand that overflows .sd-modal-scroll and gets cut at the bottom, which is
   the clipping complaint reappearing in a new place. Cap it against the
   viewport and let it scroll inside itself, so it fits whatever the modal
   height happens to be. */
.sd-oasis-tip {
    max-height: min(22rem, 42vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}


/* ============================================================================
   2026-08-22 - /serverdetails brought in line with the journey modal
   ----------------------------------------------------------------------------
   These cards are a parallel implementation of the same object: .sd-card here,
   .jmcard in journey-modal.css, near-identical values in both. So none of the
   modal work reached this page and it kept every fault the modal had. Measured
   before this block:

       stat rows out of line by 62px   (the prime card carries a ribbon and a
                                        second pill; nothing was bottom-anchored)
       page  -> panel   1.056          (no visible edge between surfaces)
       panel -> card    1.093
       card  -> tile    1.051          (the stat boxes had no presence at all)
       speed printed as "1000000X"

   Same fixes, same reasoning, same numbers as the modal pass.
   ============================================================================ */

/* --- Alignment ------------------------------------------------------------
 * `margin-top: auto` on the rule, not on the CTA. That makes rule + stat strip
 * + CTA one bottom-anchored group, so all three line up across cards whatever
 * each card carries above them. Both middle blocks are already a fixed 5rem
 * (.sd-card-stats and .sd-card-launch), so pinning the top of the group pins
 * all of it - a live card and a launching card still agree.
 */
.sd-card-hr { margin-top: auto; }

/* --- Elevation ladder -----------------------------------------------------
 * Each surface is now a real step above the one behind it, and the stat chip
 * sits ABOVE its card rather than 1.05 below it. Same ladder the modal uses.
 */
.sd-panel {
    background: linear-gradient(170deg,
        rgba(30, 23, 15, 0.93) 0%,
        rgba(24, 18, 12, 0.94) 60%,
        rgba(28, 21, 14, 0.93) 100%);
}
.sd-card {
    background: linear-gradient(165deg,
        rgba(44, 34, 22, 0.78) 0%,
        rgba(30, 23, 15, 0.86) 100%);
}

/* --- Stat chips -----------------------------------------------------------
 * Raised, not sunk: a stat is a thing being displayed. Solved for a 1.28 step
 * off the card, the point where the box reads as an object while every label on
 * it still clears 7:1.
 */
.sd-card-stats {
    /* minmax(0,1fr), not 1fr: a grid item's default min-width is its content,
       so `1fr` alone lets one long value push the whole row wider than the
       card. The value is short now, but this is what stops it recurring. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sd-stat {
    background: rgba(92, 74, 46, 0.417);
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.10),
                0 2px 6px rgba(0, 0, 0, 0.35);
}
.sd-stat-value { max-width: 100%; }

/* --- Colour by role -------------------------------------------------------
 * The number and its caption used to be the same hue, so the caption read as a
 * smaller copy of the number rather than as a label - and gold on a warm chip
 * has almost no hue separation to help it. The VALUE keeps the meaning-colour
 * and is brightened; the CAPTION goes neutral warm.
 *
 *   value   8.0 - 8.3      caption  7.57
 *
 * Glow on the digits is cut 30% with the same reasoning as the modal: the
 * numbers sit on a raised chip now, so they have less bloom to do.
 */
.sd-stat-players { border-color: rgba(212, 175, 55, 0.42); }
.sd-stat-online  { border-color: rgba(52, 211, 153, 0.42); }
.sd-stat-speed   { border-color: rgba(248, 113, 113, 0.42); }

.sd-stat-players .sd-stat-icon  { color: #F0CE5E; }
.sd-stat-online  .sd-stat-icon  { color: #6EE7B7; }
.sd-stat-speed   .sd-stat-icon  { color: #FEBEBE; }

.sd-stat-players .sd-stat-value { color: #F0CE5E; text-shadow: 0 0 14px rgba(212, 175, 55, 0.42); }
.sd-stat-online  .sd-stat-value { color: #6EE7B7; text-shadow: 0 0 14px rgba(52, 211, 153, 0.42); }
.sd-stat-speed   .sd-stat-value { color: #FEBEBE; text-shadow: 0 0 14px rgba(248, 113, 113, 0.42); }

.sd-stat-players .sd-stat-label,
.sd-stat-online  .sd-stat-label,
.sd-stat-speed   .sd-stat-label { color: rgba(214, 199, 170, 1); }

/* ─── Server-details modal: readable surfaces (owner, 2026-08-23) ────────────
 * Same plate the manual popups got: warm brown instead of the near-black
 * sections, a 28% gold edge, a lit section head, lighter ink on labels/values.
 * Declared last so it wins over the rules above. */
.sd-section {
    background: linear-gradient(165deg, rgba(56, 43, 26, 0.92) 0%, rgba(34, 25, 14, 0.94) 100%);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-top-color: rgba(212, 175, 55, 0.42);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sd-section-head {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.06) 55%, rgba(212, 175, 55, 0.02) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.sd-section-title { color: #F4E287; }
.sd-detail-row { border-bottom-color: rgba(212, 175, 55, 0.12); }
.sd-detail-label { color: rgba(214, 190, 136, 0.92); }
.sd-detail-value { color: #F3EBD6; }
.sd-modal-statcard {
    background: linear-gradient(165deg, rgba(48, 37, 22, 0.9) 0%, rgba(30, 22, 12, 0.93) 100%);
    border: 1px solid rgba(212, 175, 55, 0.24);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sd-section-body p, .sd-section-body li, .sd-timeline-row, .sd-oasis-phase p { color: #EDE7D6; }
/* The head strip (eyebrow, round title, stat chips) sat straight on the dark panel;
 * it gets its own plate so the top of the popup matches the sections below. */
.sd-modal-head {
    padding: 1rem 1.1rem;
    border-radius: 0.75rem;
    background: linear-gradient(165deg, rgba(56, 43, 26, 0.92) 0%, rgba(34, 25, 14, 0.94) 100%);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-top-color: rgba(212, 175, 55, 0.42);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sd-modal-head-eyebrow { color: #E8D9B0; }
.sd-modal-stat .lbl, .sd-modal-stat .label { color: rgba(214, 190, 136, 0.92); }
.sd-modal-panel {
    background: linear-gradient(170deg, rgba(30, 22, 13, 0.97) 0%, rgba(18, 13, 8, 0.98) 60%, rgba(24, 18, 11, 0.97) 100%);
}
/* The three speed/map/hero columns share ONE frame (.sd-sections-row) whose
 * children are reset to background:none, so the plate goes on the frame. */
.sd-sections-row {
    background: linear-gradient(165deg, rgba(56, 43, 26, 0.92) 0%, rgba(34, 25, 14, 0.94) 100%);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-top-color: rgba(212, 175, 55, 0.42);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sd-sections-row > .sd-section > .sd-section-head {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.06) 55%, rgba(212, 175, 55, 0.02) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
@media (min-width: 768px) {
    .sd-sections-row > .sd-section + .sd-section { border-right: 1px solid rgba(212, 175, 55, 0.18); }
}
.sd-detail-row .sd-detail-value, .sd-detail-value { color: #F7F0DC; }
.sd-detail-label { color: rgba(222, 200, 150, 0.95); }

/* ============================================================================
   2026-08-29 - /serverdetails realm cards as ROWS, matching the journey picker
   ----------------------------------------------------------------------------
   Same job as `.journey-server-grid.is-rows` in journey-modal.css, on this
   page's parallel implementation of the same object (.sd-card here, .jmcard
   there). Everything learned in the picker applies unchanged:

     - the row is a GRID with DECLARED track widths, because each card is its
       own grid container and `auto` columns would settle at a different width
       per realm - so the figures would stop lining up down the stack, which is
       the only reason to make a list out of cards in the first place;
     - .sd-card-body and .sd-card-id dissolve with `display: contents` so their
       children become cells, and the padding they carried moves up to .sd-card;
     - the card's light-to-dark gradient reads as depth in a 380px column and
       reads as NOTHING in a 76px row, because a row shows mostly the dark end
       of the ramp - which sits at rgba(30,23,15,.86), i.e. the same value as
       .sd-panel behind it. The row takes the section step of the ladder as a
       flat fill instead, with the gradient demoted to a sheen.

   Below 768px every rule here is out of scope and the card returns to the
   stacked form it already had.
   ========================================================================== */

/* Ribbon colour variants. The banner used to be gold-only because only the
   prime world ever rendered one; now every world does, so it needs the same
   three variants the modal ribbon has, keyed off the registry's
   `ribbon_variant`. Identical silhouette, colour only. */
.sd-card-prime-banner.sd-banner--red {
    color: #F87171;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(239, 68, 68, 0.16) 20%,
        rgba(239, 68, 68, 0.20) 50%,
        rgba(239, 68, 68, 0.16) 80%,
        transparent 100%);
    border-bottom-color: rgba(239, 68, 68, 0.25);
}
.sd-card-prime-banner.sd-banner--red .dot {
    background: #F87171;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.8);
}
.sd-card-prime-banner.sd-banner--blue {
    color: #93C5FD;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(96, 165, 250, 0.14) 20%,
        rgba(96, 165, 250, 0.18) 50%,
        rgba(96, 165, 250, 0.14) 80%,
        transparent 100%);
    border-bottom-color: rgba(96, 165, 250, 0.25);
}
.sd-card-prime-banner.sd-banner--blue .dot {
    background: #93C5FD;
    box-shadow: 0 0 6px rgba(147, 197, 253, 0.8);
}

/* --- The list ------------------------------------------------------------ */

.sd-grid.is-rows {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.625rem;
}
.sd-grid.is-rows > .sd-card {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    width: 100%;
}

/* --- The row (desktop) --------------------------------------------------- */

@media (min-width: 1000px) {
    .sd-grid.is-rows .sd-card {
        display: grid;
        /* dot | identity | pills | figures | cta */
        grid-template-columns: 0.75rem minmax(9rem, 1fr) 13rem 17rem 11rem;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 1.25rem;
        row-gap: 0.1rem;
        /* .sd-card-body carried this; `display: contents` throws a box's own
           padding away, so it moves up to the card. */
        padding: 0.7rem 1.25rem;
        /* A live row is carried by a 2-line stat block and a launching row by a
           bordered countdown well, so their natural heights differ by ~16px and
           the stack visibly stutters. One floor, set above both, makes every row
           the same height whatever column 4 happens to hold. */
        min-height: 5.25rem;

        background:
            linear-gradient(165deg, rgba(255, 236, 190, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%),
            rgba(50, 39, 25, 0.80);
        border-color: rgba(212, 175, 55, 0.16);
    }
    .sd-grid.is-rows .sd-card.is-prime { border-color: rgba(245, 158, 11, 0.42); }
    /* A 4px lift is a card gesture; in a stack of rows it reads as a jolt. */
    .sd-grid.is-rows .sd-card:hover,
    .sd-grid.is-rows .sd-card:focus-visible { transform: translateY(-2px); }

    .sd-grid.is-rows .sd-card-body,
    .sd-grid.is-rows .sd-card-id { display: contents; }

    /* column 1 */
    .sd-grid.is-rows .sd-card-dot {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin-top: 0;
        justify-self: center;
    }

    /* column 2: ribbon over round. The banner stops being a full-width strip
       and becomes the row's eyebrow, the same shape the picker uses. */
    .sd-grid.is-rows .sd-card-prime-banner {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-start;
        gap: 0.4rem;
        padding: 0;
        background: none;
        border-bottom: 0;
        font-size: 0.6875rem;
        letter-spacing: 0.2em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sd-grid.is-rows .sd-card-prime-banner .dot:last-child { display: none; }

    .sd-grid.is-rows .sd-card-id-text {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
    }
    /* "Nexian Official" on every row, under a header that says Server Details
       and a logo that says Nexian. The ribbon above it is the realm's name and
       the round below it is its identity; the brand line is the one thing here
       that distinguishes nothing. */
    .sd-grid.is-rows .sd-card-eyebrow { display: none; }
    .sd-grid.is-rows .sd-card-subtitle {
        margin: 0;
        font-size: 1.0625rem;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* column 3 */
    .sd-grid.is-rows .sd-card-pills {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-content: center;
        margin-bottom: 0;
        gap: 0.3rem;
    }
    .sd-grid.is-rows .sd-pill {
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
        padding: 0.1rem 0.5rem;
    }

    /* column 4: the figures, in whichever form this realm has */
    .sd-grid.is-rows .sd-card-stats,
    .sd-grid.is-rows .sd-card-launch {
        grid-column: 4;
        grid-row: 1 / span 2;
        min-height: 0;
        margin-bottom: 0;
    }
    /* In a row the boxed tiles read as three buttons competing with the row
       itself, so the chrome comes off and the numerals carry it. */
    .sd-grid.is-rows .sd-card-stats { gap: 0.75rem; }
    .sd-grid.is-rows .sd-stat {
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    /* The label already says what the figure is; the icon only competed with
       the number for the same slot. */
    .sd-grid.is-rows .sd-stat-icon { display: none; }
    .sd-grid.is-rows .sd-stat-value {
        font-size: 1.375rem;
        margin-bottom: 0.15rem;
        font-variant-numeric: tabular-nums;
    }
    .sd-grid.is-rows .sd-stat-label {
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
    }
    .sd-grid.is-rows .sd-card-launch { padding: 0.3rem 0.5rem; }
    .sd-grid.is-rows .sd-card-launch-label {
        font-size: 0.6875rem;
        letter-spacing: 0.22em;
        margin-bottom: 0.1rem;
    }
    .sd-grid.is-rows .sd-card-launch-val { font-size: 1.1875rem; }

    /* column 5: the whole card is one button, so its CTA is the row's
       trailing affordance rather than a control of its own. */
    .sd-grid.is-rows .sd-card-cta {
        grid-column: 5;
        grid-row: 1 / span 2;
        justify-self: end;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        font-size: 0.75rem;
        letter-spacing: 0.14em;
        text-align: end;
    }

    /* The rule under the identity block only made sense in the stacked form,
       and `margin-top: auto` (which bottom-anchored the group) has nothing to
       anchor in a grid. */
    .sd-grid.is-rows .sd-card-hr { display: none; }
}

/* --- Narrow desktop / tablet landscape: 768-999px -------------------------
   The pills are the one column a reader can lose and still tell the realms
   apart, so they go and the row keeps identity, figures and the CTA. */

@media (min-width: 768px) and (max-width: 999px) {
    .sd-grid.is-rows .sd-card {
        display: grid;
        grid-template-columns: 0.75rem minmax(7rem, 1fr) 14rem 8.5rem;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 1rem;
        row-gap: 0.1rem;
        padding: 0.7rem 1rem;
        background:
            linear-gradient(165deg, rgba(255, 236, 190, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%),
            rgba(50, 39, 25, 0.80);
        border-color: rgba(212, 175, 55, 0.16);
    }
    .sd-grid.is-rows .sd-card.is-prime { border-color: rgba(245, 158, 11, 0.42); }
    .sd-grid.is-rows .sd-card:hover,
    .sd-grid.is-rows .sd-card:focus-visible { transform: translateY(-2px); }

    .sd-grid.is-rows .sd-card-body,
    .sd-grid.is-rows .sd-card-id { display: contents; }

    .sd-grid.is-rows .sd-card-dot {
        grid-column: 1; grid-row: 1 / span 2; margin-top: 0; justify-self: center;
    }
    .sd-grid.is-rows .sd-card-prime-banner {
        grid-column: 2; grid-row: 1;
        justify-content: flex-start; gap: 0.4rem; padding: 0;
        background: none; border-bottom: 0;
        font-size: 0.625rem; letter-spacing: 0.16em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sd-grid.is-rows .sd-card-prime-banner .dot:last-child { display: none; }
    .sd-grid.is-rows .sd-card-id-text { grid-column: 2; grid-row: 2; min-width: 0; }
    .sd-grid.is-rows .sd-card-eyebrow,
    .sd-grid.is-rows .sd-card-pills,
    .sd-grid.is-rows .sd-card-hr { display: none; }
    .sd-grid.is-rows .sd-card-subtitle {
        margin: 0; font-size: 0.9375rem; line-height: 1.2;
        overflow: hidden; text-overflow: ellipsis;
    }

    .sd-grid.is-rows .sd-card-stats,
    .sd-grid.is-rows .sd-card-launch {
        grid-column: 3; grid-row: 1 / span 2; min-height: 0; margin-bottom: 0;
    }
    .sd-grid.is-rows .sd-card-stats { gap: 0.5rem; }
    .sd-grid.is-rows .sd-stat { background: none; border: 0; box-shadow: none; padding: 0; }
    .sd-grid.is-rows .sd-stat-icon { display: none; }
    .sd-grid.is-rows .sd-stat-value { font-size: 1.125rem; margin-bottom: 0.1rem; font-variant-numeric: tabular-nums; }
    .sd-grid.is-rows .sd-stat-label { font-size: 0.625rem; letter-spacing: 0.06em; }
    .sd-grid.is-rows .sd-card-launch { padding: 0.35rem 0.4rem; }
    .sd-grid.is-rows .sd-card-launch-label { font-size: 0.625rem; letter-spacing: 0.16em; margin-bottom: 0.1rem; }
    .sd-grid.is-rows .sd-card-launch-val { font-size: 1rem; }

    .sd-grid.is-rows .sd-card-cta {
        grid-column: 4; grid-row: 1 / span 2; justify-self: end;
        margin-top: 0; padding-top: 0; border-top: 0;
        font-size: 0.6875rem; letter-spacing: 0.08em; text-align: end;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE OVERLAP FIX — 2026-09-13 (reported in Czech, affects every language)
   ────────────────────────────────────────────────────────────────────────────
   .sd-tl-event and .sd-oasis-phase are COLUMN flex containers with
   align-items: center. That makes each child size to its own max-content
   instead of stretching to the cell, so a label longer than the cell does not
   wrap or clip - it renders wider than its parent and paints over the
   neighbouring phase. `min-width: 0` on the cell does not help: it lets the
   CELL shrink, which is exactly what makes the children stick out further.

   Measured in the browser at 375px, Czech, before this block:
     timeline  6 cross-cell overlaps, worst 26px, all 5 cells escaping,
               20px spilling past the modal
     oasis    25 cross-cell overlaps, worst 29px,     3 cells escaping,
               17px spilling past the modal
   After: 0 / 0 / 0 / 0 on both. At >= 1280px the rendering is byte-identical,
   so nothing about the desktop layout moves.
   ══════════════════════════════════════════════════════════════════════════ */
.sd-tl-label,
.sd-tl-date,
.sd-tl-node-wrap,
.sd-oasis-name,
.sd-oasis-day,
.sd-oasis-stats {
    max-width: 100%;
}
.sd-oasis-stat {
    min-width: 0;
}
@media (max-width: 640px) {
    /* Two stats side by side need 145px; the phase cell is 112px on a 375px
       phone. Stacking them is the only honest way to fit both labels. */
    .sd-oasis-stats {
        flex-direction: column;
        gap: 0.4rem;
        width: 100%;
    }
    .sd-oasis-stat .lbl,
    .sd-tl-label {
        letter-spacing: 0.02em;
        overflow-wrap: break-word;
    }
}

/* Roster not announced yet (registry flag `tribes_tba`): the same badge with the
   colour drained out and a dashed edge — "pending", not "5 tribes in grey". The
   hue has to leave with the fact: a violet "?" reads as a value. */
.sd-pill-tribes.is-tba,
.sd-modal-tribes-count.is-tba,
.jmcard-pill-tribes.is-tba,
.swcard-tribes-pill.is-tba {
    background: rgba(232, 217, 176, 0.05);
    border: 1px dashed rgba(212, 175, 55, 0.38);
    color: rgba(232, 217, 176, 0.72);
    cursor: help;
}

/* ════════════════════════════════════════════════════════════════════════════
   OASIS EXPLAINER AS AN INLINE PANEL 2026-09-24
   ────────────────────────────────────────────────────────────────────────────
   Four groups of copy never fit a floating box in the LAST section of the
   modal: up, down, and capped-with-scroll were all still cut (owner report).
   The (i) is now a button that opens the text inside the section, in the page
   flow, so the modal simply grows and scrolls. Nothing can clip it any more.
   ════════════════════════════════════════════════════════════════════════════ */
button.sd-oasis-info {
    padding: 0;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button.sd-oasis-info:hover,
button.sd-oasis-info[aria-expanded="true"] {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.6);
    color: #E8D9B0;
}
button.sd-oasis-info:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.7);
    outline-offset: 2px;
}
.sd-oasis-panel {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: -0.25rem 0 1rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: linear-gradient(160deg, rgba(18, 13, 6, 0.98) 0%, rgba(10, 7, 3, 0.99) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.1);
    text-align: start;
}
.sd-oasis-panel .grp {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.sd-oasis-panel .grp .t {
    font-family: 'Cinzel', serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #D4AF37;
}
.sd-oasis-panel .grp .b {
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(214, 197, 160, 0.95);
}
.sd-oasis-panel .hr {
    display: block;
    height: 1px;
    background: rgba(212, 175, 55, 0.08);
}