/* ============================================
   ASHBORN - Field Station (activities wing)
   Shared styles: hub, daily games, games of
   chance, specimen crates, comms panel.
   Extends css/styles.css design tokens.
   ============================================ */

body.subpage .site-header {
    transform: none;
}

/* ============================================
   Shared: game hero, amber chip, back link
   ============================================ */
.game-hero {
    padding: calc(var(--nav-height) + var(--space-2xl)) 0 var(--space-xl);
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 165, 67, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #0f0d06 0%, var(--color-bg-primary) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
}

.game-hero__label {
    font-size: var(--fs-section-label);
    letter-spacing: var(--ls-label);
    color: var(--color-amber);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.game-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-heading);
    color: var(--color-text-primary);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.game-hero__subtitle {
    color: var(--color-text-secondary);
    max-width: 620px;
    margin: 0 auto var(--space-md);
}

.amber-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-amber);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-amber-light);
    letter-spacing: 0.04em;
}

.amber-chip::before {
    content: '';
    width: 0.7rem;
    height: 0.7rem;
    background: linear-gradient(135deg, var(--color-amber-light), var(--color-amber-dark));
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.fs-back {
    display: inline-block;
    margin-top: var(--space-sm);
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
}

.fs-back:hover { color: var(--color-amber); }

.fs-note {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    max-width: 560px;
    margin: var(--space-xl) auto 0;
    line-height: 1.6;
}

/* ============================================
   Hub: stats, rank bar, activity cards
   ============================================ */
.fs-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
    margin-top: var(--space-lg);
}

.fs-stat__value {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: var(--fw-black);
    color: var(--color-amber-light);
    line-height: 1.2;
}

.fs-stat__label {
    font-size: var(--fs-small);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.fs-rank {
    max-width: 520px;
    margin: var(--space-xl) auto 0;
    text-align: center;
}

.fs-rank__track {
    height: 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.fs-rank__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-amber-dark), var(--color-amber-light));
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fs-rank__label {
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.fs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.fs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    text-decoration: none;
    transition: border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.fs-card:hover {
    border-color: var(--color-amber);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(212, 165, 67, 0.10);
}

.fs-card__tag {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.fs-card__tag--daily   { border-color: rgba(212, 165, 67, 0.5); color: var(--color-amber-light); }
.fs-card__tag--arcade  { border-color: rgba(232, 224, 208, 0.35); }
.fs-card__tag--chance  { border-color: rgba(139, 37, 0, 0.8); color: #d98a6a; }

.fs-card__title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    color: var(--color-text-primary);
    text-transform: uppercase;
}

.fs-card__desc {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    flex-grow: 1;
}

.fs-card__status {
    font-size: var(--fs-small);
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.fs-card__status--done { color: #7dba6a; }
.fs-card__status--open { color: var(--color-amber-light); }

/* Live players/viewers, populated by field-hub.js via Presence.watchCounts
   — empty (and hidden) until a count actually loads, so cards don't show
   a placeholder dash while Realtime connects. */
.fs-card__live {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.fs-card__live:empty { display: none; }

.fs-card__live:not(:empty)::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7dba6a;
    box-shadow: 0 0 6px rgba(125, 186, 106, 0.6);
    flex-shrink: 0;
}

/* ---- Badge wall ---- */
.badge-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-sm);
}

.badge {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-sm) var(--space-md);
    opacity: 0.45;
}

.badge--earned {
    opacity: 1;
    border-color: rgba(212, 165, 67, 0.5);
}

.badge__icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-family: var(--font-heading);
}

.badge--earned .badge__icon {
    border-color: var(--color-amber);
    color: var(--color-amber);
}

.badge__title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--color-text-primary);
    text-transform: uppercase;
}

.badge__desc {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ---- Comms (Discord embed) ---- */
.fs-comms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
}

.fs-comms__panel {
    flex: 1 1 420px;
    max-width: 480px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    min-height: 380px;
}

.fs-comms__panel iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
}

.fs-comms__card {
    flex: 1 1 420px;
    max-width: 480px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm);
}

.fs-comms__title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: var(--color-amber-light);
    text-transform: uppercase;
}

.fs-comms__body {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: var(--lh-body);
}

/* ============================================
   Specimen Identification
   ============================================ */
.spec-wrap {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.spec-visual {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md);
    text-align: center;
}

.spec-visual img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    filter: blur(10px) grayscale(0.9) brightness(0.58) contrast(1.1);
    transition: filter 600ms ease;
}

.spec-visual[data-stage="1"] img { filter: blur(8px) grayscale(0.85) brightness(0.62) contrast(1.1); }
.spec-visual[data-stage="2"] img { filter: blur(6px) grayscale(0.7) brightness(0.7) contrast(1.05); }
.spec-visual[data-stage="3"] img { filter: blur(4.5px) grayscale(0.5) brightness(0.78); }
.spec-visual[data-stage="4"] img { filter: blur(3px) grayscale(0.3) brightness(0.87); }
.spec-visual[data-stage="5"] img { filter: blur(1.2px) grayscale(0.1) brightness(0.96); }
.spec-visual[data-stage="revealed"] img { filter: none; }

.spec-visual__note {
    margin-top: var(--space-sm);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.spec-form {
    position: relative;
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.spec-form .newsletter__input { flex: 1; }

.spec-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--color-bg-card);
    border: 1px solid var(--color-amber);
    border-radius: var(--border-radius);
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.spec-suggest button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.spec-suggest button:hover,
.spec-suggest button.is-active {
    background: rgba(212, 165, 67, 0.12);
    color: var(--color-amber-light);
}

.spec-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
}

.spec-table th {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: left;
    padding: 0 0.6rem 0.2rem;
    font-weight: var(--fw-medium);
}

.spec-table td {
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 0.55rem 0.6rem;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.spec-table td:first-child {
    border-left: 1px solid var(--color-border);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    color: var(--color-text-primary);
    font-weight: var(--fw-medium);
    white-space: normal;
}

.spec-table td:last-child {
    border-right: 1px solid var(--color-border);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.spec-cell--good { color: #7dba6a !important; }
.spec-cell--off  { color: #b8574a !important; }
.spec-cell--dir  { color: var(--color-amber-light) !important; }

.spec-remaining {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.spec-result {
    margin-top: var(--space-lg);
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 165, 67, 0.10) 0%, transparent 60%),
        var(--color-bg-card);
    border: 1px solid var(--color-amber);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
}

.spec-result__title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-amber-light);
    margin-bottom: var(--space-xs);
}

.spec-result__body {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

/* ============================================
   Sizing Up
   ============================================ */
.sz-scoreline {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2xl);
    margin-bottom: var(--space-lg);
}

/* Score value gets a warmer glow the longer a run's streak runs, purely
   visual escalation — same amber palette, just more intense. */
.sz-scoreline .fs-stat__value.sz-score--hot {
    color: var(--color-amber-light);
    text-shadow: 0 0 16px var(--color-amber-glow);
}

.sz-timer {
    max-width: 860px;
    height: 4px;
    margin: 0 auto var(--space-lg);
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.sz-timer__fill {
    height: 100%;
    width: 100%;
    background: var(--color-amber);
    box-shadow: 0 0 10px var(--color-amber-glow);
    transform-origin: left;
}

.sz-timer__fill--danger { background: #b8574a; box-shadow: 0 0 10px rgba(184, 87, 74, 0.5); }

.sz-arena {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-lg);
    align-items: stretch;
    max-width: 860px;
    margin: 0 auto;
}

.sz-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.sz-card:hover:not(:disabled) {
    border-color: var(--color-amber);
    transform: translateY(-3px);
}

.sz-card:disabled { cursor: default; }

.sz-card--correct { border-color: #7dba6a; box-shadow: 0 0 30px rgba(125, 186, 106, 0.15); }
.sz-card--wrong   { border-color: #b8574a; box-shadow: 0 0 30px rgba(184, 87, 74, 0.15); }

.sz-card img {
    width: 100%;
    height: 160px;
    object-fit: contain;
    margin-bottom: var(--space-sm);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

.sz-card__name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-primary);
}

.sz-card__latin {
    font-style: italic;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.sz-card__stat {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-amber-light);
    min-height: 1.5em;
}

.sz-vs {
    align-self: center;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-text-muted);
    letter-spacing: 0.1em;
}

.sz-prompt {
    text-align: center;
    font-size: 1.05rem;
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

.sz-prompt strong { color: var(--color-amber-light); }

.sz-over {
    max-width: 480px;
    margin: var(--space-lg) auto 0;
    text-align: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-amber);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
}

/* ============================================
   Migration Trail
   ============================================ */
.mig-wrap { max-width: 680px; margin: 0 auto; }

.mig-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: var(--space-lg);
}

.mig-dot {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
}

.mig-dot--done { background: var(--color-amber); border-color: var(--color-amber); }
.mig-dot--now  { border-color: var(--color-amber-light); box-shadow: 0 0 10px var(--color-amber-glow); }
.mig-dot--dead { background: #b8574a; border-color: #b8574a; }

.mig-meters { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }

.mig-meter__label {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
}

.mig-meter__track {
    height: 10px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.mig-meter__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 500ms ease;
}

.mig-meter__fill--energy    { background: linear-gradient(90deg, #8a5a2a, var(--color-amber)); }
.mig-meter__fill--hydration { background: linear-gradient(90deg, #2a5a72, #5aa0c0); }

.mig-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-amber);
    border-radius: var(--border-radius);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-md);
}

.mig-card__leg {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-amber);
    margin-bottom: var(--space-xs);
}

.mig-card__text {
    color: var(--color-text-primary);
    line-height: var(--lh-body);
}

.mig-choices { display: grid; gap: var(--space-xs); }

.mig-choice {
    text-align: left;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.mig-choice:hover:not(:disabled) {
    border-color: var(--color-amber);
    color: var(--color-text-primary);
}

.mig-log { margin-top: var(--space-lg); display: grid; gap: var(--space-xs); }

.mig-log__entry {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-sm);
    line-height: 1.55;
}

.mig-log__entry--ok   { border-left-color: #7dba6a; }
.mig-log__entry--bad  { border-left-color: #b8574a; color: #c08a80; }

.mig-end {
    text-align: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-amber);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    margin-top: var(--space-lg);
}

/* ============================================
   Games of chance — shared
   ============================================ */
.ch-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-xl);
    align-items: start;
}

/* The primary action button on each game of chance gets long dynamic
   labels at runtime ("Joined — waiting for round", "Bet placed —
   waiting for the deal"), not just its short static default — .btn's
   site-wide white-space: nowrap has nowhere for that to go but overflow
   the button. Let these three specifically wrap and grow instead. */
#roll-go, #crash-go, #bj-deal {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.ch-stage {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.ch-panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
}

.ch-panel__title {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.bet-input {
    width: 100%;
    padding: 0.7rem 1rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-amber-light);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    outline: none;
    margin-bottom: var(--space-xs);
}

.bet-input:focus { border-color: var(--color-amber); }

.bet-chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.bet-chips button {
    flex: 1;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
}

.bet-chips button:hover { border-color: var(--color-amber); color: var(--color-amber-light); }

.ch-history {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.ch-pill {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.ch-pill--amber    { border-color: var(--color-amber); color: var(--color-amber-light); }
.ch-pill--obsidian { border-color: #555; color: #bbb; }
.ch-pill--fire     { border-color: #b8574a; color: #d98a6a; background: rgba(139, 37, 0, 0.15); }
.ch-pill--good     { border-color: #7dba6a; color: #7dba6a; }
.ch-pill--bad      { border-color: #b8574a; color: #b8574a; }

.ch-msg {
    min-height: 1.6em;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin-top: var(--space-sm);
}

.ch-msg--win  { color: #7dba6a; }
.ch-msg--lose { color: #b8574a; }

.ch-disclaimer {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    max-width: 560px;
    margin: var(--space-xl) auto 0;
    line-height: 1.6;
}

/* ============================================
   Amber Roll
   ============================================ */
.roll-strip {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 4px;
    margin: var(--space-lg) 0;
}

.roll-slot {
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: var(--fw-bold);
    border: 1px solid transparent;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.roll-slot--amber    { background: linear-gradient(180deg, #6a4a16, #4a3410); color: var(--color-amber-light); }
.roll-slot--obsidian { background: linear-gradient(180deg, #232323, #161616); color: #999; border-color: #333; }
.roll-slot--fire     { background: linear-gradient(180deg, #7a2410, #4c1408); color: #e8a06a; }

.roll-slot--live {
    transform: scale(1.12);
    box-shadow: 0 0 22px var(--color-amber-glow);
    border-color: var(--color-amber-light);
    z-index: 2;
}

.roll-bets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }

.roll-bet {
    padding: var(--space-md);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    background: var(--color-bg-primary);
    cursor: pointer;
    text-align: center;
    font-family: var(--font-heading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.roll-bet__name { display: block; font-size: 0.95rem; margin-bottom: 0.2rem; }
.roll-bet__pays { display: block; font-size: 0.72rem; color: var(--color-text-muted); }

.roll-bet--amber .roll-bet__name    { color: var(--color-amber-light); }
.roll-bet--obsidian .roll-bet__name { color: #bbb; }
.roll-bet--fire .roll-bet__name     { color: #d98a6a; }

.roll-bet:hover:not(:disabled)  { border-color: var(--color-amber); }
.roll-bet.is-selected           { border-color: var(--color-amber); box-shadow: 0 0 18px var(--color-amber-glow); }

/* ============================================
   Ashfall (crash)
   ============================================ */
.crash-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    position: relative;
}

.crash-plume {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0%;
    background: linear-gradient(180deg, rgba(212, 165, 67, 0.16), rgba(139, 37, 0, 0.28));
    transition: height 120ms linear;
    pointer-events: none;
}

.crash-mult {
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 8vw, 4.5rem);
    font-weight: var(--fw-black);
    color: var(--color-amber-light);
    letter-spacing: 0.04em;
    z-index: 1;
}

.crash-mult--erupted { color: #b8574a; }
.crash-mult--cashed  { color: #7dba6a; }

.crash-state {
    z-index: 1;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

/* Shared round-state line for Ember Roll and Blackjack's automatic
   betting-window rounds — same look as .crash-state, generic name since
   it's no longer crash-specific. */
.ch-round-state {
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

/* ============================================
   Blackjack
   ============================================ */
.bj-table {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-height: 320px;
    justify-content: space-between;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    background:
        radial-gradient(ellipse at 50% 110%, rgba(212, 165, 67, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 0%, #1e190f 0%, #100d08 65%);
    border: 1px solid var(--color-border);
    border-radius: 28px;
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.55), 0 20px 50px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.bj-table::before {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 67, 0.35) 50%, transparent);
}

.bj-row { position: relative; z-index: 1; }

.bj-row__label {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-amber-light);
    opacity: 0.8;
    margin-bottom: var(--space-sm);
    text-align: center;
}

.bj-hand {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    min-height: 92px;
    flex-wrap: wrap;
    align-items: center;
}

.bj-hand:empty::before {
    content: '';
    width: 58px;
    height: 82px;
    border-radius: 8px;
    border: 1px dashed rgba(212, 165, 67, 0.2);
}

.bj-card {
    width: 58px;
    height: 82px;
    border-radius: 8px;
    background: linear-gradient(160deg, #f5efdf 0%, #e8dfc8 100%);
    color: #1a1a1a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 7px;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 1.05rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.08);
    animation: bj-deal 300ms ease;
}

@keyframes bj-deal {
    from { transform: translateY(-14px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.bj-card--red { color: #a02a20; }

.bj-card--down {
    background: repeating-linear-gradient(45deg, #2a2216, #2a2216 6px, #1d1810 6px, #1d1810 12px);
    border: 1px solid var(--color-amber-dark);
}

.bj-card__bottom { align-self: flex-end; transform: rotate(180deg); }

.bj-total {
    text-align: center;
    font-family: var(--font-heading);
    color: var(--color-text-secondary);
    font-size: 1rem;
    letter-spacing: 0.04em;
    margin-top: var(--space-sm);
    min-height: 1.3em;
}

.bj-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.bj-actions .btn {
    min-width: 108px;
    justify-content: center;
    padding: 0.7rem 1.4rem;
}

.btn--double {
    border-color: var(--color-amber);
    color: var(--color-amber-light);
    box-shadow: 0 0 14px rgba(212, 165, 67, 0.15);
}

.btn--double:hover {
    box-shadow: 0 0 20px rgba(212, 165, 67, 0.3);
}

.bj-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.bj-rules li { padding: 0.25rem 0; border-bottom: 1px solid var(--color-border-subtle); }
.bj-rules li:last-child { border-bottom: none; }

/* ============================================
   Specimen Crates
   ============================================ */
.crate-offer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    max-width: 760px;
    margin: 0 auto var(--space-2xl);
}

.crate-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    text-align: center;
    transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.crate-card:hover { border-color: var(--color-amber); transform: translateY(-3px); }

.crate-card__icon {
    width: 140px;
    height: 140px;
    margin: 0 auto var(--space-sm);
    display: block;
}

.crate-card__name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.crate-card__odds {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.crate-reel-wrap {
    position: relative;
    max-width: 760px;
    margin: 0 auto var(--space-2xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-card);
    padding: var(--space-md) 0;
}

.crate-reel-wrap::after {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 50%;
    width: 2px;
    background: var(--color-amber);
    box-shadow: 0 0 14px var(--color-amber-glow);
}

.crate-reel {
    display: flex;
    gap: 8px;
    will-change: transform;
}

.crate-cell {
    flex: 0 0 110px;
    height: 120px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    background: var(--color-bg-primary);
}

.crate-cell img { width: 74px; height: 64px; object-fit: contain; }

.crate-cell__name {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: center;
}

/* Ember-prize cells have no species image — a scaled-up version of the
   same diamond glyph used by .amber-chip (the site's one existing
   "Embers" icon) stands in for it, sized bigger for the rarer tiers. */
.crate-cell__gem {
    display: block;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--color-amber-light), var(--color-amber-dark));
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.crate-cell--embers .crate-cell__name {
    font-family: var(--font-heading);
    color: var(--color-amber-light);
    font-size: 0.68rem;
}

/* Card variant tiers (shared with archive wall) */
.tier--sepia    { border-color: #4a4238; }
.tier--sepia img { filter: sepia(0.9) brightness(0.75); }
.tier--amberset { border-color: var(--color-amber-dark); box-shadow: inset 0 0 18px rgba(212, 165, 67, 0.12); }
.tier--fireglass { border-color: #b8574a; box-shadow: inset 0 0 18px rgba(184, 87, 74, 0.18); }
.tier--holotype {
    border-color: var(--color-amber-light);
    box-shadow: 0 0 22px rgba(212, 165, 67, 0.35), inset 0 0 20px rgba(212, 165, 67, 0.2);
}

/* Ember prize tiers — escalating intensity matching their rarity, same
   amber palette as the rest of the site's Ember iconography. */
.tier--embers-small  { border-color: rgba(212, 165, 67, 0.45); }
.tier--embers-medium { border-color: var(--color-amber-dark); box-shadow: inset 0 0 18px rgba(212, 165, 67, 0.15); }
.tier--embers-large  {
    border-color: var(--color-amber);
    box-shadow: 0 0 18px rgba(212, 165, 67, 0.3), inset 0 0 18px rgba(212, 165, 67, 0.2);
}
.tier--embers-large .crate-cell__gem { width: 36px; height: 36px; }
.tier--embers-jackpot {
    border-color: var(--color-amber-light);
    box-shadow: 0 0 30px rgba(212, 165, 67, 0.5), inset 0 0 24px rgba(212, 165, 67, 0.3);
}
.tier--embers-jackpot .crate-cell__gem { width: 44px; height: 44px; }

/* Applied only to the cell the reel actually lands on, once resolved —
   overrides whichever tier color it rolled so the winner is unmistakable
   regardless of how precisely the marker line appears to line up. */
.crate-cell--winner {
    border-color: var(--color-amber-light) !important;
    box-shadow: 0 0 26px rgba(212, 165, 67, 0.55), inset 0 0 20px rgba(212, 165, 67, 0.28);
    transform: scale(1.08);
    z-index: 2;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.crate-result {
    max-width: 420px;
    margin: 0 auto var(--space-2xl);
    text-align: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-amber);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
}

.crate-result img { max-width: 200px; margin-bottom: var(--space-sm); }

/* Embers-prize result: no species image, so the same diamond glyph used
   in the reel cell (scaled up) fills that space instead. */
.crate-result--embers::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-sm);
    background: linear-gradient(135deg, var(--color-amber-light), var(--color-amber-dark));
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.crate-result--embers .dig-reveal__name { color: var(--color-amber-light); }

.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-sm);
}

.archive-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-xs);
    text-align: center;
}

.archive-card img { width: 100%; height: 74px; object-fit: contain; }

.archive-card__label {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.archive-card__count { color: var(--color-amber-light); }

/* ============================================
   Fossil Reels (slot machine)
   ============================================ */
.slot-machine {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.slot-reels {
    position: relative;
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.slot-reel {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.slot-reel img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

.slot-reel--spin img {
    animation: slot-blur 70ms linear infinite;
}

@keyframes slot-blur {
    0%   { transform: translateY(-6%); filter: blur(2px); opacity: 0.7; }
    50%  { transform: translateY(6%); filter: blur(3px); opacity: 0.5; }
    100% { transform: translateY(-6%); filter: blur(2px); opacity: 0.7; }
}

.slot-payline {
    position: absolute;
    left: var(--space-lg);
    right: var(--space-lg);
    top: 50%;
    height: 2px;
    background: var(--color-amber);
    box-shadow: 0 0 12px var(--color-amber-glow);
    opacity: 0.7;
    pointer-events: none;
}

.slot-payrow {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.slot-payrow:last-child { border-bottom: none; }

.slot-payrow img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.slot-payrow strong {
    color: var(--color-amber-light);
    font-family: var(--font-heading);
}

@media (max-width: 620px) {
    .slot-reel { width: 90px; height: 90px; }
}

/* ============================================
   Passive reward toast (hourly grant / daily login)
   ============================================ */
.fs-toast {
    position: fixed;
    top: var(--space-lg);
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 1200;
    background: rgba(12, 12, 12, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-amber-dark);
    border-radius: var(--border-radius);
    padding: 0.7rem 1.2rem;
    color: var(--color-amber-light);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    pointer-events: none;
}

.fs-toast--in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   Shared win celebration (every game of chance)
   ============================================ */
@keyframes fs-win-pulse-kf {
    0%   { transform: scale(1); text-shadow: none; }
    35%  { transform: scale(1.1); text-shadow: 0 0 18px var(--color-amber-glow); }
    100% { transform: scale(1); text-shadow: 0 0 6px var(--color-amber-glow); }
}

.fs-win-pulse {
    display: inline-block;
    animation: fs-win-pulse-kf 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fs-win-pulse-big-kf {
    0%   { transform: scale(1); text-shadow: none; }
    40%  { transform: scale(1.22); text-shadow: 0 0 30px var(--color-amber-glow); }
    70%  { transform: scale(0.97); }
    100% { transform: scale(1); text-shadow: 0 0 12px var(--color-amber-glow); }
}

.fs-win-pulse--big {
    animation: fs-win-pulse-big-kf 750ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   Sign-in gate (Field Station account requirement)
   ============================================ */
.fs-gate {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: rgba(8, 7, 5, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.fs-gate__card {
    max-width: 420px;
    width: 100%;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 165, 67, 0.1) 0%, transparent 60%),
        var(--color-bg-card);
    border: 1px solid var(--color-amber-dark);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.fs-gate__title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    color: var(--color-amber-light);
    margin-bottom: var(--space-sm);
}

.fs-gate__body {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.fs-gate__btn {
    width: 100%;
    justify-content: center;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 940px) {
    .fs-grid { grid-template-columns: 1fr 1fr; }
    .ch-layout, .spec-wrap { grid-template-columns: 1fr; }
    .crate-offer { grid-template-columns: 1fr; max-width: 460px; }
}

@media (max-width: 620px) {
    .fs-grid { grid-template-columns: 1fr; }
    .sz-arena { grid-template-columns: 1fr; }
    .sz-vs { justify-self: center; }
    .roll-strip { grid-template-columns: repeat(5, 1fr); }
    .roll-bets { grid-template-columns: 1fr; }
}