/**
 * screens.css — the screens that mount into #deck
 *
 * Shell layout lives in next.css; this is everything inside it. Every value
 * comes from tokens.css, so retuning the palette or the motion feel is a
 * change to that file and not to this one.
 */

/* ---------- shared primitives ---------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r3);
    padding: var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.panel-title {
    font-size: var(--fs-title);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
}

.panel-sub { color: var(--ink-2); font-size: var(--fs-small); margin-top: calc(-1 * var(--s2)); }

.muted { color: var(--ink-3); }
.small { font-size: var(--fs-small); }
.tabular { font-variant-numeric: tabular-nums; }

.empty-state {
    padding: var(--s6) var(--s4);
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--r3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
}

.empty-title { font-size: var(--fs-lead); font-weight: var(--fw-medium); }
.empty-body { color: var(--ink-3); max-width: 46ch; }

.pending { padding: var(--s5); text-align: center; color: var(--ink-3); }

.screen-error {
    padding: var(--s4);
    border: 1px solid var(--down);
    border-radius: var(--r2);
    background: color-mix(in srgb, var(--down) 8%, transparent);
}

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    border-radius: var(--r2);
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink);
    font: inherit;
    font-weight: var(--fw-medium);
    cursor: pointer;
    /* .btn is worn by both <button> and <a>; without this the anchor keeps its
       underline and the two stop looking like the same control. */
    text-decoration: none;
    transition: background-color var(--t-micro) var(--e-move),
                border-color var(--t-micro) var(--e-move),
                transform var(--t-micro) var(--e-gain);
}

.btn:hover:not(:disabled) { border-color: var(--ink-3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--coin); outline-offset: 2px; }

.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
    background: var(--coin);
    border-color: var(--coin);
    /* The coin colour is light in every theme, so the label has to go dark. */
    color: var(--bg);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn-ghost { background: transparent; }

.btn-lg { padding: var(--s3) var(--s5); font-size: var(--fs-lead); }

.badge {
    display: inline-block;
    padding: 0 var(--s2);
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border: 1px solid var(--line);
    color: var(--ink-2);
}
.badge-joined { border-color: var(--up); color: var(--up); }
.badge-you { border-color: var(--coin); color: var(--coin); margin-left: var(--s2); }

/* ---------- tabs ---------- */

.tabs { display: flex; gap: var(--s1); flex-wrap: wrap; border-bottom: 1px solid var(--line); }

.tab {
    padding: var(--s2) var(--s3);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ink-3);
    font: inherit;
    cursor: pointer;
    transition: color var(--t-micro) var(--e-move), border-color var(--t-micro) var(--e-move);
}
.tab:hover { color: var(--ink-2); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--coin); }
.tab:focus-visible { outline: 2px solid var(--coin); outline-offset: -2px; }

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

.home { display: flex; flex-direction: column; gap: var(--s4); }

.hero { padding: var(--s7) var(--s4); text-align: center; }
.hero-title { font-size: var(--fs-hero); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
.hero-sub { color: var(--ink-2); max-width: 60ch; margin: var(--s3) auto 0; }
.hero-actions { display: flex; gap: var(--s3); justify-content: center; margin-top: var(--s5); flex-wrap: wrap; }

.pitch-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pitch-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s4); }
.pitch-card h3 { font-size: var(--fs-lead); margin-bottom: var(--s2); }
.pitch-card p { color: var(--ink-2); font-size: var(--fs-small); }

.greeting h1 { font-size: var(--fs-display); letter-spacing: var(--tracking-tight); }
.greeting-sub { color: var(--ink-3); }

.stat-row { display: flex; gap: var(--s5); flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: var(--s0); }
.stat-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-3); }
.stat-value { font-size: var(--fs-title); font-weight: var(--fw-semibold); }

/* ---------- seasons ---------- */

.season-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.season-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r3);
    padding: var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    transition: border-color var(--t-move) var(--e-move);
}
.season-card.is-joined { border-color: var(--up); }

.season-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.season-name { font-size: var(--fs-lead); font-weight: var(--fw-semibold); }

.season-status {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-3);
}
.season-status[data-status="Active"] { color: var(--up); }
.season-status[data-status="Blackout"] { color: var(--down); }

.season-facts { display: flex; gap: var(--s4); flex-wrap: wrap; }
.fact { display: flex; flex-direction: column; gap: var(--s0); }
.fact dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-3); }
.fact dd { font-size: var(--fs-lead); font-weight: var(--fw-medium); }

.season-actions { margin-top: auto; }

/* ---------- leaderboard ---------- */

/* The table is the one piece of content that cannot reflow, so it scrolls
   inside its own box rather than making the page scroll sideways. */
.table-scroll { overflow-x: auto; }

.lb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.lb-table th {
    text-align: left;
    padding: var(--s2) var(--s3);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.lb-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-2); }

.lb-row.is-me { background: color-mix(in srgb, var(--coin) 10%, transparent); }
.lb-rank { width: 1%; white-space: nowrap; color: var(--ink-3); }
.lb-handle { font-weight: var(--fw-medium); }
.lb-stars { text-align: right; white-space: nowrap; }
.lb-state { color: var(--ink-3); white-space: nowrap; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--r-pill); margin-right: var(--s1); background: var(--ink-3); }
.dot-active { background: var(--up); }
.dot-idle { background: var(--down); }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.pager-label { color: var(--ink-3); font-size: var(--fs-small); }

/* ---------- chat ---------- */

.chat { display: flex; flex-direction: column; gap: var(--s3); min-height: 0; flex: 1; }

.chat-log {
    list-style: none;
    overflow-y: auto;
    /* Bounded so the compose box stays reachable without scrolling the page. */
    max-height: min(60vh, 520px);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r3);
    /* Anchor growth to the bottom so arriving messages do not shove the
       backlog upward while someone is reading it. */
    overflow-anchor: auto;
}

.msg { display: flex; gap: var(--s2); align-items: baseline; font-size: var(--fs-small); line-height: var(--lh-snug); }
.msg-time { color: var(--ink-3); font-size: var(--fs-micro); flex: none; }
.msg-handle { color: var(--ink-2); font-weight: var(--fw-medium); flex: none; }
.msg-body { color: var(--ink); overflow-wrap: anywhere; }
.msg-removed .msg-body { font-style: italic; }
.msg-admin .msg-handle { color: var(--coin); }

.chat-compose { display: flex; gap: var(--s2); }

.input {
    flex: 1;
    min-width: 0;
    padding: var(--s2) var(--s3);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r2);
    color: var(--ink);
    font: inherit;
}
.input:focus { outline: 2px solid var(--coin); outline-offset: -1px; border-color: var(--coin); }
.input::placeholder { color: var(--ink-3); }

/* ---------- shop ---------- */

.shop-balance { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--fs-lead); }

.shop-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.shop-item {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r3);
    padding: var(--s3);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    transition: border-color var(--t-micro) var(--e-move);
}
.shop-item.is-equipped { border-color: var(--coin); }

.shop-preview {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: var(--r2);
    background: var(--bg-2);
    border: 1px solid var(--line-2);
}
.shop-preview-mark { font-size: var(--fs-display); color: var(--ink-3); }

.shop-name { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.shop-item .btn { margin-top: auto; }

/* ---------- toast ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--s5) + var(--rail-bottom, 0px) + var(--safe-bottom));
    transform: translateX(-50%);
    z-index: var(--z-toast);
    padding: var(--s3) var(--s4);
    border-radius: var(--r2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
    animation: toast-in var(--t-move) var(--e-gain);
    max-width: min(90vw, 480px);
}
.toast-error { border-color: var(--down); color: var(--down); }

@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
}

/* ================================================================== *
 * season detail
 * ================================================================== */

.season-detail { display: flex; flex-direction: column; gap: var(--s4); }

.season-header { display: flex; flex-direction: column; gap: var(--s3); }
.season-header-main { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.season-title { font-size: var(--fs-display); letter-spacing: var(--tracking-tight); }
.btn-back { padding: var(--s1) var(--s3); font-size: var(--fs-small); }

.season-header-facts { display: flex; gap: var(--s5); flex-wrap: wrap; }
.head-fact { display: flex; flex-direction: column; gap: var(--s0); }
.head-fact-label {
    font-size: var(--fs-micro); text-transform: uppercase;
    letter-spacing: var(--tracking-wide); color: var(--ink-3);
}
.head-fact-value { font-size: var(--fs-lead); font-weight: var(--fw-medium); }

/* The season name on a card is a button so it can open the season, but it has
   to keep reading as a heading rather than as a control. */
.season-open {
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
    font-size: var(--fs-lead); font-weight: var(--fw-semibold);
    text-align: left; cursor: pointer;
}
.season-open:hover { color: var(--coin); }
.season-open:focus-visible { outline: 2px solid var(--coin); outline-offset: 2px; }

/* ---------- income ---------- */

.rate-row { display: flex; flex-direction: column; gap: var(--s2); }
.rate-primary { display: flex; align-items: baseline; gap: var(--s2); }
.rate-value { font-size: var(--fs-hero); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.rate-unit { color: var(--ink-3); }
.rate-detail { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.down { color: var(--down); }

/* ---------- stars ---------- */

.buy-row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.input-qty { max-width: 110px; flex: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- forge ---------- */

.tier-row { display: flex; gap: var(--s2); flex-wrap: wrap; }

.tier {
    flex: 1 1 64px;
    display: flex; flex-direction: column; align-items: center; gap: var(--s0);
    padding: var(--s2);
    border: 1px solid var(--line);
    border-radius: var(--r2);
    background: var(--bg-2);
    color: var(--ink-3);
    transition: border-color var(--t-move) var(--e-move), color var(--t-move) var(--e-move);
}
.tier.has-some { color: var(--ink); border-color: var(--line-2); background: var(--surface-2); }

.tier-label { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); }
.tier-count { font-size: var(--fs-title); font-weight: var(--fw-semibold); }

.recipe-list { list-style: none; display: flex; flex-direction: column; gap: var(--s1); }
.recipe {
    display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
    padding: var(--s2) var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r2);
    color: var(--ink-3);
}
.recipe.is-ready { color: var(--ink); border-color: var(--coin); }
.recipe-text { flex: 1; min-width: 140px; }
.btn-sm { padding: var(--s1) var(--s3); font-size: var(--fs-small); }

/* ---------- verbs ---------- */

.verb-row { display: flex; gap: var(--s2); flex-wrap: wrap; }

.notice {
    padding: var(--s2) var(--s3);
    border-radius: var(--r2);
    border: 1px solid var(--line);
    background: var(--surface-2);
}
.notice-frozen { border-color: var(--down); color: var(--down); }

/* ---------- lock in ---------- */

.lockin-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }

.btn-danger { background: var(--down); border-color: var(--down); color: var(--bg); }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }

.spectating { display: flex; flex-direction: column; }

/* ================================================================== *
 * dialogs
 * ================================================================== */

.dialog-backdrop {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--s4);
    background: rgba(0, 0, 0, .6);
    animation: fade-in var(--t-micro) var(--e-move);
}

.dialog {
    width: min(100%, 440px);
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    padding: var(--s5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r3);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
    animation: dialog-in var(--t-move) var(--e-gain);
}
.dialog.is-danger { border-color: var(--down); }

.dialog-title { font-size: var(--fs-title); font-weight: var(--fw-semibold); }
.dialog-body { color: var(--ink-2); }

.dialog-ack { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--fs-small); cursor: pointer; }
.dialog-ack input { margin-top: 3px; flex: none; }

.dialog-actions { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }

.target-list { list-style: none; display: flex; flex-direction: column; gap: var(--s1); max-height: 40vh; overflow-y: auto; }

.target-btn {
    width: 100%;
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r2);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--t-micro) var(--e-move);
}
.target-btn:hover { border-color: var(--coin); }
.target-btn:focus-visible { outline: 2px solid var(--coin); outline-offset: 2px; }
.target-handle { font-weight: var(--fw-medium); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dialog-backdrop, .dialog { animation: none; }
}

/* ================================================================== *
 * auth
 * ================================================================== */

.auth { display: grid; place-items: center; padding: var(--s6) var(--s3); }

.auth-card {
    width: min(100%, 400px);
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    padding: var(--s5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r3);
}

.auth-form { display: flex; flex-direction: column; gap: var(--s3); }

.field { display: flex; flex-direction: column; gap: var(--s1); }
.field-label {
    font-size: var(--fs-micro); text-transform: uppercase;
    letter-spacing: var(--tracking-wide); color: var(--ink-3);
}
.field-hint { margin-top: calc(-1 * var(--s0)); }

.btn-full { width: 100%; }

.auth-error {
    padding: var(--s2) var(--s3);
    border: 1px solid var(--down);
    border-radius: var(--r2);
    background: color-mix(in srgb, var(--down) 10%, transparent);
    color: var(--down);
    font-size: var(--fs-small);
}

.auth-signed-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- user area ---------- */

.user-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s3);
}

.user-handle { font-weight: var(--fw-medium); color: var(--ink-2); }

/* ---------- construction gate ---------- */

.construction-shell { display: grid; place-items: start center; min-height: 100vh; padding: var(--s5) var(--s3); }

.construction {
    max-width: 40rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.construction-badge { font-size: 2.5rem; line-height: 1; }

.construction h1 { font-size: var(--fs-title, 1.6rem); }

.construction-lede { color: var(--ink-2); }

.construction-version { color: var(--ink-3); font-size: var(--fs-small); }

.construction-block {
    border: 1px solid var(--line);
    border-radius: var(--r2);
    background: var(--surface);
    padding: var(--s3) var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.construction-block h2 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }

.construction-block ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--s1); color: var(--ink-2); }

.construction-patch h3 { font-size: 1rem; color: var(--ink); margin-bottom: var(--s1); }

.construction-patch + .construction-patch { margin-top: var(--s2); }

.construction-foot { display: flex; justify-content: flex-end; }