/* ============================================================
   No Man's Land — Digital Playtest
   Palette drawn from the printed playmat and rules sheets:
   dark dungeon stone, ember lava seams, parchment, uncial headers.
   Signature element: the shared NML row burns as a living seam
   between the two territories.
   ============================================================ */

:root {
    --ink:        #14100c;   /* page background            */
    --stone:      #241b12;   /* board frame                */
    --zone:       #362a1c;   /* normal zone                */
    --zone-edge:  #55402a;
    --parchment:  #e9dcbe;   /* primary text               */
    --parch-dim:  #a5946f;   /* secondary text             */
    --nml-gold:   #d4af4e;   /* No Man's Land glow         */
    --ember:      #c8501e;   /* attack / lava seam         */
    --moss:       #7fa03e;   /* legal move / summon        */
    --arcane:     #9a5fd0;
    --primal:     #c43c2a;
    --refined:    #a8b545;
    --tech:       #e0842f;
    --font-display: 'Uncial Antiqua', serif;
    --font-body:    'Alegreya Sans', sans-serif;
    --font-accent:  'Ebonflare', var(--font-display);
}

@font-face {
    font-family: 'Ebonflare';
    src: url('/ui/Ebonflare%20Thin.otf') format('opentype');
    font-weight: 100 400;
    font-display: swap;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background:
        radial-gradient(ellipse 120% 60% at 50% 42%, #241b12 0%, var(--ink) 70%),
        var(--ink);
    color: var(--parchment);
    font-family: var(--font-body);
    font-size: 15px;
}

.boot {
    display: grid;
    place-items: center;
    height: 100vh;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--nml-gold);
}

.table {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 12px;
}

/* ---------------- HUD ---------------- */
.hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 6px 6px;
    border-bottom: 1px solid var(--zone-edge);
}

.hud-title-img {
    display: block;
    height: 30px;
    width: auto;
    margin: 0 auto;
    filter: drop-shadow(0 0 10px rgba(200, 80, 30, 0.3));
}

.hud-phase {
    display: block;
    text-align: center;
    color: var(--parch-dim);
    font-size: 0.85rem;
}

.hud-player {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 14px;
    border: 1px solid transparent;
    border-radius: 3px;
}

.hud-player.active {
    border-color: var(--nml-gold);
    background: rgba(212, 175, 78, 0.07);
}

.hud-name { color: var(--parch-dim); font-weight: 500; }

.hud-life {
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: var(--parchment);
}

/* ---------------- HANDS ---------------- */
.hand {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 8px 0;
    min-height: 172px;
    flex-wrap: wrap;
}

.hand-top .card { transform: scale(0.88); transform-origin: top center; }

.card {
    position: relative;
    width: 120px;
    aspect-ratio: 1185 / 1665; /* matches the card art's native proportions */
    padding: 8px 9px 7px;
    text-align: left;
    background: linear-gradient(170deg, #efe3c4, #d9c99f);
    color: #241b12;
    border: 1px solid #8a744c;
    border-top-width: 4px;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.card:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(0,0,0,0.5); }
.card.selected { outline: 2px solid var(--nml-gold); transform: translateY(-6px); }
.card.inactive { filter: saturate(0.55) brightness(0.8); cursor: default; }
.card.inactive:hover { transform: none; box-shadow: none; }

.card.aff-arcane  { border-top-color: var(--arcane); }
.card.aff-primal  { border-top-color: var(--primal); }
.card.aff-refined { border-top-color: var(--refined); }
.card.aff-tech    { border-top-color: var(--tech); }

.card-cost {
    position: absolute;
    top: 5px; right: 7px;
    font-weight: 800;
    font-size: 1.05rem;
}

.card-name {
    display: block;
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.15;
    padding-right: 18px;
}

.card-type {
    display: block;
    font-size: 0.72rem;
    color: #6b5a3a;
    margin-top: 2px;
}

.card-stats {
    display: block;
    margin-top: 5px;
    font-weight: 800;
    font-size: 0.84rem;
}

/* ---------------- MID: BOARD + SIDEBAR ---------------- */
.mid {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
}

.battlefield {
    background: var(--stone);
    border: 1px solid var(--zone-edge);
    border-radius: 6px;
    padding: 12px 12px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.board-row {
    display: grid;
    grid-template-columns: 84px 96px repeat(5, 96px);
    gap: 7px;
    align-items: stretch;
}

.row-label {
    align-self: center;
    justify-self: end;
    padding-right: 8px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--parch-dim);
    text-align: right;
}

.row-nml .row-label {
    color: var(--nml-gold);
    font-family: var(--font-display);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.03em;
}

/* Field Terrain: sits just left of each player's own frontline row, off-grid (not part of the
   5-column creature grid) and stackable - every terrain played there stays visible, newest on
   top and shown as its card art, same size as every other zone on the board. Rendered as an
   invisible placeholder on every other row so the 5 real zone columns stay aligned across rows. */
.field-terrain-slot {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 4px;
    border-style: dashed;
    background-color: var(--zone);
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    cursor: default;
}

.field-terrain-slot.hidden { visibility: hidden; }
/* Same physical-table flip as .token.enemy. */
.field-terrain-slot.enemy { transform: rotate(180deg); }

.field-terrain-hint {
    align-self: center;
    text-align: center;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--parch-dim);
}

.field-terrain-name {
    width: 100%;
    text-align: center;
    padding-bottom: 2px;
}

.zone {
    position: relative;
    aspect-ratio: 1185 / 1665; /* matches the card art's native proportions */
    background: var(--zone);
    border: 1px solid var(--zone-edge);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.zone.field:hover { border-color: var(--parch-dim); }

/* The signature: NML burns as the seam between territories */
.zone.nml {
    background:
        linear-gradient(180deg, rgba(200, 80, 30, 0.16), rgba(212, 175, 78, 0.10)),
        var(--zone);
    border-color: var(--nml-gold);
    box-shadow: inset 0 0 14px rgba(200, 80, 30, 0.28);
    animation: seam 3.2s ease-in-out infinite;
}

@keyframes seam {
    0%, 100% { box-shadow: inset 0 0 12px rgba(200, 80, 30, 0.22); }
    50%      { box-shadow: inset 0 0 20px rgba(212, 175, 78, 0.38); }
}

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

.zone.void {
    background: #0e0b08;
    border-color: #1d1712;
    cursor: default;
}

.zone.hl-summon { border-color: var(--moss); box-shadow: 0 0 0 2px var(--moss) inset; }
.zone.hl-move   { border-color: var(--moss); box-shadow: 0 0 0 2px var(--moss) inset; }
.zone.hl-attack { border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember) inset, 0 0 12px rgba(200,80,30,0.5); }
.zone.hl-target { border-color: var(--arcane); box-shadow: 0 0 0 2px var(--arcane) inset; }

.terrain-chip {
    position: absolute;
    bottom: 3px; left: 4px; right: 4px;
    font-size: 0.62rem;
    color: var(--refined);
    border-top: 1px dashed rgba(168, 181, 69, 0.5);
    padding-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------- UNIT TOKENS ----------------
   Full card art, no owner color-coding - which side a unit belongs to is
   already unambiguous from its row (each player's rows are labeled and
   spatially separate), so the border/tint was redundant decoration on
   top of the card. Every row (frontline/backline/NML) shares the same
   .zone sizing already, so tokens end up the same size everywhere too. */
.token {
    position: absolute;
    inset: 4px 4px 16px 4px;
    padding: 4px 5px;
    border-radius: 3px;
    background-color: var(--stone);
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    color: var(--parchment);
    border: 1px solid rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.72rem;
    transition: transform 130ms ease;
}

.token.selected { outline: 2px solid var(--nml-gold); }
.token.exhausted { transform: rotate(6deg); filter: saturate(0.6) brightness(0.85); }
/* Opponent's cards face you upside-down, same as sitting across a physical table. */
.token.enemy { transform: rotate(180deg); }
.token.enemy.exhausted { transform: rotate(186deg); filter: saturate(0.6) brightness(0.85); }

.token-name {
    font-weight: 700;
    line-height: 1.05;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85);
}

.token-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.05rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85);
}
.token-stats .atk { color: #ff9166; display: inline-flex; align-items: center; }
.token-stats .hp  { color: #8fd66a; }

/* Range icon next to Attack on every creature - crossed swords for melee (Range 1), a bow with
   one arrow per Range point for ranged (2/3). See MatchView.razor's RangeIconPath. */
.rng-icon {
    width: 0.85em;
    height: 0.85em;
    margin-left: 3px;
    filter: invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.badge {
    position: absolute;
    top: -6px; right: -5px;
    min-width: 16px; height: 16px;
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    color: var(--parchment);
}

.badge.exh  { background: var(--ember); }
.badge.sick { background: #55617a; right: auto; left: -5px; }

/* ---------------- SIDEBAR ---------------- */
.sidebar {
    width: 230px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel {
    background: rgba(36, 27, 18, 0.85);
    border: 1px solid var(--zone-edge);
    border-radius: 5px;
    padding: 10px 12px;
}

.panel h3 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--nml-gold);
}

.panel p { margin: 4px 0; font-size: 0.82rem; }
.dim { color: var(--parch-dim); }

.stack-list { margin: 0; padding-left: 18px; font-size: 0.82rem; }
.stack-list li:first-child { color: var(--nml-gold); font-weight: 700; }

.log-list {
    margin: 0;
    padding-left: 18px;
    max-height: 220px;
    overflow-y: auto;
    font-size: 0.82rem;
    color: var(--parchment);
}

.log-list li { margin: 2px 0; }
.log-list li:first-child { color: var(--nml-gold); font-weight: 700; }

.btn {
    display: block;
    width: 100%;
    margin: 5px 0;
    padding: 8px 10px;
    background: var(--zone);
    color: var(--parchment);
    border: 1px solid var(--zone-edge);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 100ms ease;
}

.btn:hover:not(:disabled) { border-color: var(--nml-gold); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-ember { background: linear-gradient(170deg, #a34018, #7e3011); border-color: var(--ember); }

/* Armed/active state - e.g. Move while waiting for a destination click, Attack while its
   declaration is resolving. Without this the "selected" class landed on the button but did
   nothing visually, so there was no way to tell which action (if any) was currently armed. */
.btn.selected {
    background: rgba(212, 175, 78, 0.18);
    border-color: var(--nml-gold);
    color: var(--nml-gold);
    box-shadow: 0 0 0 1px var(--nml-gold) inset;
}

.btn:focus-visible, .card:focus-visible, .zone:focus-visible, .res:focus-visible {
    outline: 2px solid var(--nml-gold);
    outline-offset: 1px;
}

/* ---------------- RESOURCES ---------------- */
.resources {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 4px;
    border-top: 1px solid var(--zone-edge);
    flex-wrap: wrap;
}

.res-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--parch-dim);
    margin-right: 6px;
}

.res {
    width: 30px; height: 42px;
    border-radius: 3px;
    border: 1px solid var(--zone-edge);
    background: var(--zone);
    color: var(--parchment);
    font-weight: 800;
    cursor: pointer;
    transition: transform 110ms ease;
}

.res.res-arcane  { background: var(--arcane); }
.res.res-primal  { background: var(--primal); }
.res.res-refined { background: var(--refined); color: #241b12; }
.res.res-tech    { background: var(--tech); color: #241b12; }
.res.spent { transform: rotate(90deg); opacity: 0.45; cursor: default; }

.pool { margin-left: 12px; font-size: 0.82rem; color: var(--parch-dim); }

.pool-chip {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin: 0 2px;
    border-radius: 9px;
    text-align: center;
    font-weight: 800;
    color: var(--parchment);
    background: var(--zone-edge);
}

.pool-chip.arcane  { background: var(--arcane); }
.pool-chip.primal  { background: var(--primal); }
.pool-chip.refined { background: var(--refined); color: #241b12; }
.pool-chip.tech    { background: var(--tech); color: #241b12; }
.pool-chip.unconverted { background: #55402a; }

/* ---------------- MODALS ---------------- */
.modal-veil {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 5, 0.72);
    display: grid;
    place-items: center;
    z-index: 20;
}

.modal {
    background: var(--stone);
    border: 1px solid var(--nml-gold);
    border-radius: 6px;
    padding: 18px 22px;
    max-width: 640px;
    width: min(92vw, 640px);
}

.modal h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--nml-gold);
}

.modal .btn { width: auto; min-width: 120px; margin-top: 12px; }

.modal-cards {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 2px;
}

.oracle-preview {
    width: 160px;
    height: 220px;
    border-radius: 6px;
    border: 1px solid var(--nml-gold);
    background-size: cover;
    background-position: center 22%;
    background-color: rgba(0, 0, 0, 0.25);
    margin: 0 auto;
}

.oracle-name {
    text-align: center;
    margin: 10px 0 0;
    font-family: var(--font-display);
    color: var(--parchment);
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.resource-choice-modal { min-width: 340px; }

.resource-choice-picker-rows { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }

.resource-choice-picker-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px;
    background: rgba(20, 16, 12, 0.4);
    border: 1px solid var(--zone-edge);
    border-radius: 6px;
}
.resource-choice-picker-row img { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.resource-choice-picker-name { flex: 1; font-family: var(--font-display); color: var(--parchment); }
.resource-choice-picker-controls { display: flex; align-items: center; gap: 8px; }
.resource-choice-picker-count { min-width: 1.4em; text-align: center; font-weight: 800; color: var(--nml-gold); }

.pitch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    flex-wrap: wrap;
}

.target-picker-modal { max-width: 420px; }

.mini-board {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 10px auto 4px;
    width: fit-content;
}

.mini-row { display: flex; gap: 3px; }
.mini-row.mini-row-nml { padding: 3px 0; background: rgba(212, 175, 78, 0.1); border-radius: 3px; }

.mini-zone {
    position: relative;
    width: 44px;
    height: 58px;
    border-radius: 3px;
    border: 1px solid var(--zone-edge);
    background: var(--zone);
}

.mini-zone.nml { border-color: var(--nml-gold); }
.mini-zone.void { background: #0e0b08; border-color: #1d1712; }
.mini-zone.mini-legal { cursor: pointer; }

.mini-token {
    position: absolute;
    inset: 2px;
    border-radius: 2px;
    background-color: var(--stone);
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.5);
    transition: outline-color 110ms ease;
}

.mini-zone.mini-legal .mini-token {
    outline: 2px solid var(--nml-gold);
    box-shadow: 0 0 8px rgba(212, 175, 78, 0.65);
}

.mini-zone.mini-legal:hover .mini-token { outline-color: #fff; }
.mini-token.mini-illegal { filter: grayscale(0.85) brightness(0.5); }
.mini-token.enemy { transform: rotate(180deg); }

.gameover { text-align: center; }
.gameover h3 { font-size: 1.5rem; }

/* ---------------- TURN BANNER ---------------- */
.turn-banner {
    position: fixed;
    top: 16%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 90;
    pointer-events: none;
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--nml-gold);
    background: rgba(20, 16, 12, 0.88);
    border: 2px solid var(--nml-gold);
    border-radius: 8px;
    padding: 14px 36px;
    text-shadow: 0 0 20px rgba(212, 175, 78, 0.6);
    box-shadow: 0 0 40px rgba(200, 80, 30, 0.5);
    animation: turnBannerFlash 2.6s ease forwards;
}

@keyframes turnBannerFlash {
    0%   { opacity: 0; transform: translate(-50%, -65%) scale(0.9); }
    12%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    78%  { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .turn-banner { animation: none; opacity: 1; }
}

/* ---------------- CARD HOVER PREVIEW ---------------- */
.card-preview-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 95;
    pointer-events: none;
    animation: previewFadeIn 150ms ease;
}

.card-preview-popup img {
    display: block;
    width: min(46vw, 340px);
    height: auto;
    aspect-ratio: 1185 / 1665;
    border-radius: 10px;
    border: 3px solid var(--nml-gold);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(212, 175, 78, 0.35);
    background: var(--stone);
}

@keyframes previewFadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1080px) {
    .mid { flex-direction: column; align-items: center; }
    .sidebar { width: 100%; max-width: 590px; flex-direction: row; flex-wrap: wrap; }
    .sidebar .panel { flex: 1 1 180px; }
}

@media (max-width: 640px) {
    .board-row { grid-template-columns: 0 0 repeat(5, minmax(52px, 1fr)); }
    .row-label { display: none; }
    .field-terrain-slot { display: none; }
    .token { font-size: 0.6rem; inset: 2px 2px 12px 2px; }
    .card { width: 100px; }
}

/* ---------------- MENU & LOBBIES ---------------- */
.menu {
    max-width: 640px;
    margin: 0 auto;
    padding: 9vh 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.menu-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 3rem;
    color: var(--nml-gold);
    margin: 0;
    text-shadow: 0 0 26px rgba(200, 80, 30, 0.35);
}

.menu-title.small { font-size: 1.9rem; }

.menu-title-img {
    width: min(100%, 480px);
    height: auto;
    filter: drop-shadow(0 0 26px rgba(200, 80, 30, 0.35));
}
.menu-tag { color: var(--parch-dim); margin: 0 0 16px; }
.menu-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--parch-dim); }

.menu-input {
    width: min(320px, 90%);
    padding: 9px 12px;
    background: var(--zone);
    border: 1px solid var(--zone-edge);
    border-radius: 4px;
    color: var(--parchment);
    font-family: var(--font-body);
    font-size: 0.95rem;
    text-align: center;
}

.menu-input:focus { outline: none; border-color: var(--nml-gold); }

.menu-choices { display: flex; gap: 16px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }

.menu-card {
    width: 250px;
    padding: 20px 18px;
    background: linear-gradient(170deg, #efe3c4, #d9c99f);
    color: #241b12;
    border: 1px solid #8a744c;
    border-top: 4px solid var(--nml-gold);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: transform 130ms ease, box-shadow 130ms ease;
}

.menu-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.menu-card-title { display: block; font-family: var(--font-accent); font-size: 1.3rem; margin-bottom: 6px; }
.menu-card-sub { display: block; font-size: 0.83rem; color: #5d4d31; line-height: 1.35; }

/* ---------------- HOME MENU (art-backed) ----------------
   Shared by every lightweight "menu-style" screen (main menu, lobby list,
   lobby waiting room, deck list) - anywhere a `.menu` div is the whole
   page. `.deckbuilder` (the deck editor's own wrapper, further down) gets
   the same jungle art with a lighter overlay so the busy card catalog
   underneath stays legible.

   Both use a position:fixed ::before layer rather than a plain background
   so the art always fills the full viewport - including when the element
   itself sits inside a width-capped ancestor (`.deckbuilder` caps at
   1280px for its own content), which a plain `background` would have
   been cropped to. */
/* position + z-index (not just position alone) is what actually establishes a new
   stacking context here - without it, the ::before's z-index:-1 below escapes all the
   way to the root stacking context instead of being scoped behind just this element's
   own content, which is what made the background vanish entirely in some cases. */
.home-menu, .deckbuilder { position: relative; z-index: 0; }

.home-menu::before, .deckbuilder::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}

.home-menu::before {
    background-image:
        radial-gradient(ellipse 70% 45% at 50% 20%, rgba(14,11,8,0.55) 0%, rgba(14,11,8,0) 100%),
        linear-gradient(180deg, rgba(14,11,8,0.5) 0%, rgba(14,11,8,0.68) 55%, var(--ink) 100%),
        url('/ui/optimized/menu_bg.jpg');
}

.home-menu {
    min-height: 100vh;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8vh 20px 60px;
}

/* Deck picker is short, fixed-length content (unlike the lobby list/waiting room/deck catalog
   that also use .home-menu) - centering it vertically in the viewport avoids the huge dead space
   below it that top-aligned .home-menu padding leaves for short screens. Scoped to this page only
   so the other .home-menu screens keep their normal top-aligned flow. */
.deck-picker-page { justify-content: center; }

.home-menu .menu-title-img {
    filter: drop-shadow(0 0 30px rgba(200, 80, 30, 0.55)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}

:is(.home-menu, .deckbuilder) .menu-title { font-family: var(--font-accent); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95); }
:is(.home-menu, .deckbuilder) .menu-tag { font-family: var(--font-accent); font-size: 1.05rem; letter-spacing: 0.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95); }
:is(.home-menu, .deckbuilder) .menu-label { font-family: var(--font-accent); letter-spacing: 0.12em; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95); }

.home-menu .menu-input {
    background: rgba(16, 13, 9, 0.85);
    border-color: rgba(212, 175, 78, 0.45);
}

.home-menu .menu-choices { margin-top: 34px; gap: 22px; }

.home-menu .menu-card {
    width: 220px;
    height: 300px;
    padding: 0;
    background-color: var(--stone);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(212, 175, 78, 0.4);
    border-radius: 8px;
    color: var(--parchment);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.home-menu .menu-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 16, 12, 0) 40%, rgba(20, 16, 12, 0.85) 78%, rgba(20, 16, 12, 0.96) 100%);
}

.home-menu .menu-card-title, .home-menu .menu-card-sub { position: relative; z-index: 1; padding: 0 16px; }
.home-menu .menu-card-title { color: var(--nml-gold); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); }
.home-menu .menu-card-sub { color: var(--parchment); padding-bottom: 16px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }

.home-menu .menu-card:hover {
    transform: translateY(-6px);
    border-color: var(--nml-gold);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 22px rgba(212, 175, 78, 0.35);
}

@media (max-width: 720px) {
    .home-menu .menu-card { width: 44vw; height: 240px; }
}

.lobby-create { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lobby-create .menu-input { width: 200px; }
.lobby-create .btn { width: auto; }

.lobby-list { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.lobby-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(36, 27, 18, 0.85);
    border: 1px solid var(--zone-edge);
    border-radius: 5px;
    color: var(--parchment);
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color 120ms ease;
}

.lobby-row:hover { border-color: var(--nml-gold); }
.lobby-name { font-weight: 700; }
.lobby-info { font-size: 0.8rem; color: var(--parch-dim); }

.seats { display: flex; gap: 18px; margin: 8px 0; flex-wrap: wrap; justify-content: center; }

.seat-box {
    width: 190px;
    padding: 16px;
    background: var(--stone);
    border: 1px dashed var(--zone-edge);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.seat-box.filled { border-style: solid; border-color: var(--nml-gold); }
.seat-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--parch-dim); }
.seat-holder { font-family: var(--font-display); font-size: 1.05rem; color: var(--parchment); }
.seat-box .btn { width: auto; }

.seat-deck { font-size: 0.72rem; }
.lobby-deck-picker { margin: 10px 0; }

.start-btn { width: auto; min-width: 220px; margin-top: 4px; }
.members-panel { width: min(420px, 100%); margin-top: 18px; text-align: left; }

/* ---------------- DECKBUILDER ---------------- */
.deckbuilder { max-width: 1280px; min-height: 100vh; margin: 0 auto; padding: 24px 16px 60px; }

/* Lighter/more-transparent than .home-menu's overlay - the catalog grid
   underneath is busy, so the art stays visible without competing for
   attention (every card tile and panel is already opaque enough to read
   over it regardless). */
.deckbuilder::before {
    background-image:
        linear-gradient(180deg, rgba(14, 11, 8, 0.35) 0%, rgba(14, 11, 8, 0.5) 100%),
        url('/ui/optimized/menu_bg.jpg');
}

.deck-list { display: flex; flex-direction: column; gap: 8px; max-width: 640px; margin: 20px auto 0; }

.deck-list-new-buttons { display: flex; justify-content: center; gap: 14px; margin: 4px 0 8px; }
.deck-list-section-title {
    font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--nml-gold);
    max-width: 640px; margin: 26px auto 8px; text-align: left;
    border-bottom: 1px solid rgba(212, 175, 78, 0.25); padding-bottom: 4px;
}

.deck-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.deck-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.deck-row-actions .btn { width: auto; }

.format-toggle { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.format-toggle .btn { width: auto; min-width: 130px; }

.pack-flow-page { max-width: 1100px; }

.resource-choice-row { display: flex; justify-content: center; gap: 48px; margin-top: 28px; flex-wrap: wrap; }
.resource-choice-btn {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 8px; transition: transform 0.15s ease;
}
.resource-choice-btn:hover { transform: translateY(-4px); }
.resource-choice-label {
    font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--nml-gold);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}
.resource-choice-circle {
    width: 130px; height: 130px; border-radius: 50%;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}

.pack-reveal-page { max-width: none; padding: 20px 28px; }
.pack-reveal-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 18px; flex-wrap: wrap;
}
.pack-reveal-title { text-align: center; flex: 1; }
.pack-reveal-title .menu-title { margin: 0; }
.pack-reveal-body { max-height: 76vh; overflow-y: auto; padding-right: 6px; }

.pack-section { margin-bottom: 26px; }
.pack-section-title {
    font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--nml-gold);
    text-align: center; margin: 0 0 12px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.pack-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}
.pack-card-full {
    width: 100%; height: auto; display: block; border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease;
}
.pack-card-full:hover { transform: translateY(-6px) scale(1.03); }

.deck-catalog-hint { text-align: center; margin: 4px 0 10px; }

.deck-catalog-pool-count {
    position: absolute; top: 6px; right: 6px; z-index: 1;
    background: rgba(20, 16, 12, 0.85); color: var(--nml-gold); font-weight: 800; font-size: 0.78rem;
    padding: 2px 7px; border-radius: 10px; border: 1px solid rgba(212, 175, 78, 0.4);
}

.deck-editor { display: flex; flex-direction: column; gap: 14px; }

.deck-editor-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--zone-edge);
}

.deck-editor-header .menu-input { text-align: left; }
.deck-editor-spacer { flex: 1; }

.deck-count { font-family: var(--font-display); color: var(--ember); font-size: 1.1rem; }
.deck-count.ok { color: var(--moss); }
.deck-count-error { color: var(--ember); font-size: 0.82rem; }

.deck-editor-body { display: flex; gap: 16px; align-items: flex-start; }
.deck-catalog { flex: 1; min-width: 0; }

.catalog-size-slider {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px; padding: 8px 12px;
    background: rgba(36, 27, 18, 0.55);
    border: 1px solid var(--zone-edge);
    border-radius: 5px;
}
.catalog-size-slider .filter-label { margin: 0; white-space: nowrap; }
.catalog-size-slider input[type="range"] { flex: 1; accent-color: var(--ember); }

.deck-filters {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(36, 27, 18, 0.55);
    border: 1px solid var(--zone-edge);
    border-radius: 5px;
}

.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group-wide { flex: 1; min-width: 160px; }
.filter-label { font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--parch-dim); }

.deck-filters .menu-input { width: auto; min-width: 110px; text-align: left; }
.filter-group-wide .menu-input { width: 100%; }

.filter-toggles { display: flex; gap: 4px; }

.filter-icon-btn {
    width: 30px;
    height: 30px;
    padding: 3px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color 100ms ease, background 100ms ease;
}

.filter-icon-btn img { width: 100%; height: 100%; object-fit: contain; }
.filter-icon-btn.active { border-color: var(--nml-gold); background: rgba(212, 175, 78, 0.16); }
.filter-icon-btn:hover { border-color: var(--parch-dim); }

.filter-count-group { flex-direction: row; align-items: center; gap: 10px; margin-left: auto; }
.filter-count { color: var(--parch-dim); font-size: 0.85rem; white-space: nowrap; }

.deck-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* Art-forward catalog tile: no parchment base, just the full card art with the copy-count
   controls overlaid on a bottom scrim - name/cost/type text is dropped from the tile itself
   (hover already pops the full card preview, and the title attribute covers a quick native
   tooltip) so nothing competes with the art. */
.deck-catalog-card {
    cursor: default;
    background: var(--stone);
    width: 100%;
}

.deck-catalog-card .card-art { opacity: 1; }

.deck-catalog-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 38%;
    background: linear-gradient(180deg, rgba(20, 16, 12, 0) 0%, rgba(20, 16, 12, 0.85) 65%, rgba(20, 16, 12, 0.95) 100%);
    pointer-events: none;
}

.deck-card-controls {
    position: absolute;
    bottom: 4px; left: 4px; right: 4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.deck-card-btn {
    width: 22px; height: 22px;
    border-radius: 3px;
    border: 1px solid #8a744c;
    background: rgba(36, 27, 18, 0.85);
    color: var(--parchment);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.deck-card-btn:disabled { opacity: 0.35; cursor: default; }
.deck-card-btn.plus:not(:disabled):hover { border-color: var(--moss); }
.deck-card-btn.minus:not(:disabled):hover { border-color: var(--ember); }
.deck-card-count { font-weight: 800; color: #241b12; background: rgba(239, 227, 196, 0.85); border-radius: 3px; padding: 1px 6px; }

.deck-current { width: 320px; flex-shrink: 0; max-height: 78vh; overflow-y: auto; position: sticky; top: 12px; }

.deck-current-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 6px;
    margin: 5px 0;
    border-radius: 8px;
    font-size: 0.92rem;
    transition: background-color 100ms ease;
}
.deck-current-row:hover { background: rgba(212, 175, 78, 0.1); }

.deck-current-cost-badge {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1rem;
    color: #1c150c;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) inset, 0 2px 4px rgba(0, 0, 0, 0.5);
}

.deck-current-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-current-count { flex: none; font-weight: 800; color: var(--nml-gold); }

@media (max-width: 900px) {
    .deck-editor-body { flex-direction: column; }
    .deck-current { width: 100%; position: static; max-height: none; }
}

/* ---------------- DECK OVERVIEW MODAL (mana curve) ---------------- */
.deck-overview-modal {
    max-width: 95vw;
    width: 1150px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.deck-overview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.deck-overview-header h3 { margin: 0; }

.deck-overview-columns {
    display: flex;
    gap: 10px;
    flex: 1;
    overflow: auto;
    padding-bottom: 6px;
}

.deck-overview-column {
    flex: none;
    width: 130px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.deck-overview-col-header {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--nml-gold);
    padding-bottom: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--zone-edge);
}
.deck-overview-col-header .dim { font-size: 0.72rem; display: block; }

.deck-overview-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1185 / 1665;
    border-radius: 5px;
    overflow: hidden;
    background: var(--stone);
    border: 1px solid #8a744c;
}

.deck-overview-card .card-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 22%;
}

.deck-overview-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(20, 16, 12, 0) 0%, rgba(20, 16, 12, 0.9) 70%, rgba(20, 16, 12, 0.97) 100%);
    pointer-events: none;
}

.deck-overview-card-name {
    position: absolute;
    left: 4px; right: 4px; bottom: 16px;
    z-index: 1;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--parchment);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.deck-overview-card-count {
    position: absolute;
    left: 4px; bottom: 3px;
    z-index: 1;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--nml-gold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.deck-overview-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--zone-edge);
    text-align: center;
    color: var(--parchment);
    font-weight: 600;
}

.deck-picker { max-width: 900px; margin: 0 auto; text-align: center; }
.deck-picker h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; color: var(--nml-gold); margin: 0 0 28px; text-shadow: 0 0 26px rgba(200, 80, 30, 0.35); }

.deck-picker-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.deck-picker-option {
    width: 230px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 22px 20px;
    background: linear-gradient(170deg, #efe3c4, #d9c99f);
    color: #241b12;
    border: 1px solid #8a744c;
    border-top: 4px solid var(--nml-gold);
    border-radius: 6px;
    text-align: left;
    transition: transform 130ms ease, box-shadow 130ms ease;
}
.deck-picker-option:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
.deck-picker-option .dim { color: #5d4d31; }

.deck-picker-name { font-weight: 700; font-family: var(--font-accent); font-size: 1.25rem; color: #241b12; }
.deck-picker-hint { margin-top: 20px; }

/* ---------------- SHARED WIDGETS ---------------- */
.cardback {
    width: 64px;
    height: 88px;
    border-radius: 5px;
    background:
        radial-gradient(circle at 50% 42%, rgba(212, 175, 78, 0.28) 0 18%, transparent 20%),
        repeating-linear-gradient(45deg, #3a2c1c 0 6px, #322618 6px 12px);
    border: 1px solid #55402a;
}

.hand-top .cardback { transform: scale(0.8); transform-origin: top center; }

.res.mini { width: 14px; height: 22px; pointer-events: none; display: inline-block; }
.res-label.opp { margin-left: auto; }

.res.refundable {
    outline: 2px dashed var(--nml-gold);
    outline-offset: 1px;
    cursor: pointer;
    animation: refund 1.6s ease-in-out infinite;
}

@keyframes refund {
    0%, 100% { outline-color: var(--nml-gold); }
    50%      { outline-color: rgba(212, 175, 78, 0.35); }
}

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

.res:disabled { cursor: default; }

.setup-bar {
    position: fixed;
    left: 50%;
    bottom: 132px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 18px;
    background: var(--stone);
    border: 1px solid var(--nml-gold);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    z-index: 15;
    max-width: 92vw;
}

.setup-bar .btn { width: auto; margin: 0; }
.res-pick.pick-arcane  { border-color: var(--arcane); }
.res-pick.pick-primal  { border-color: var(--primal); }
.res-pick.pick-refined { border-color: var(--refined); }
.res-pick.pick-tech    { border-color: var(--tech); }

.toast {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 9px 18px;
    background: #6e2a12;
    border: 1px solid var(--ember);
    border-radius: 5px;
    color: var(--parchment);
    font-size: 0.88rem;
    z-index: 40;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

.corner-btn {
    position: fixed;
    top: 10px;
    left: 10px;
    padding: 6px 14px;
    background: var(--zone);
    color: var(--parch-dim);
    border: 1px solid var(--zone-edge);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
    z-index: 30;
}

.corner-btn:hover { color: var(--parchment); border-color: var(--nml-gold); }

/* ---------------- CARD ART ---------------- */
.card { overflow: hidden; }

.card-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 22%;
    opacity: 0.5;
    pointer-events: none;
}

.card-cost, .card-name, .card-type, .card-stats { position: relative; text-shadow: 0 1px 2px rgba(239, 227, 196, 0.85); }

.card-manual {
    position: absolute;
    bottom: 4px; right: 6px;
    font-size: 0.7rem;
    color: #7a2f14;
    opacity: 0.85;
}