/* ============================================================
   NVIDIAddict — VLACKJACK, Arena sound control, and landscape /
   aspect-ratio board sizing.
   Append this whole block to the end of frontend/styles.css.
   ============================================================ */

/* ---- Spectral card taxonomy -------------------------------
   Four kinds of print, ordered red through green by how much
   they can hurt you: crush, sweep, catalyst, tape. */
:root {
  --vl-crush: #E0483F;   /* red    — premium evaporating */
  --vl-sweep: #E07B2A;   /* orange — institutional aggression */
  --vl-cat:   #D9A21B;   /* gold   — a binary event */
  --vl-tape:  #4F8A00;   /* green  — ordinary flow */
  --vl-felt:  #10301C;
  --vl-felt2: #0B2416;
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --vl-crush: #E85C5C; --vl-sweep: #E9904A; --vl-cat: #E3B34A; --vl-tape: #7FBF1A;
  --vl-felt: #0E2A1A; --vl-felt2: #081C11;
}

/* ---- Felt ---- */
.vl-felt {
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--vl-felt) 88%, #fff 12%) 0%, var(--vl-felt) 45%, var(--vl-felt2) 100%);
  border: 1px solid color-mix(in srgb, var(--vl-felt) 60%, var(--line));
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 14px;
  min-height: 0;
}
.vl-felt .eyebrow { color: #9FBE93; }
.vl-seat { display: grid; gap: 8px; min-width: 0; }
.vl-seat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vl-seat-head .vl-total { font-family: var(--mono); font-size: 13px; color: #CFE3C2; font-variant-numeric: tabular-nums; }

.vl-cards { display: flex; gap: 8px; flex-wrap: wrap; min-height: 96px; align-items: flex-start; }
.vl-hand { display: grid; gap: 6px; padding: 8px; border-radius: 10px; border: 1px solid transparent; }
.vl-hand.on { border-color: var(--accent); background: rgba(143, 209, 26, .07); }
.vl-hand.done { opacity: .82; }
.vl-hand-meta { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; color: #B9CFAE; }
.vl-hand-meta .vl-t { font-family: var(--display); font-weight: 800; font-size: 20px; color: #EAF3E2; font-variant-numeric: tabular-nums; }
.vl-hand-meta .muted { color: #8AA47E; }

/* ---- Cards ---- */
.vl-card {
  width: 62px; height: 88px; border-radius: 7px; flex: 0 0 auto;
  background: #FBFBF5; color: #14180F; border: 1px solid #C9CBBE;
  display: grid; grid-template-rows: auto 1fr auto; padding: 6px 7px;
  font-family: var(--mono); font-weight: 700; font-size: 15px; line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.07);
  position: relative; overflow: hidden;
}
.vl-card.red { color: #BF2F2A; }
.vl-card .vl-r { display: block; }
.vl-card .vl-r.b { align-self: end; justify-self: end; transform: rotate(180deg); }
.vl-card .vl-k {
  align-self: center; justify-self: center; text-align: center;
  font-size: 8px; letter-spacing: .1em; font-weight: 700;
  padding: 2px 5px; border-radius: 3px; color: #fff;
}
.vl-card.k-tape  .vl-k { background: var(--vl-tape); }
.vl-card.k-sweep .vl-k { background: var(--vl-sweep); }
.vl-card.k-catalyst .vl-k { background: var(--vl-cat); color: #201703; }
.vl-card.k-crush .vl-k { background: var(--vl-crush); }
.vl-card.k-crush { background: linear-gradient(170deg, #FBF0EF 0%, #F3DAD8 100%); border-color: #D8B3B0; color: #8E2A25; }
.vl-card.k-sweep::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(224,123,42,.18) 50%, transparent 60%);
}
.vl-card.back {
  background:
    repeating-linear-gradient(45deg, #24451A 0 7px, #2F5D1F 7px 14px);
  border-color: #1B3413;
}

/* ---- Gamma meter: the count, told honestly ---- */
.vl-gamma { display: grid; gap: 6px; }
.vl-gamma-bar {
  position: relative; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #5A46B8 0%, #2A78D6 25%, #1F8F6A 50%, #C4850F 75%, #E0483F 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.vl-gamma-bar i {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--ink);
  transform: translate(-50%, -50%); transition: left .35s cubic-bezier(.2,.8,.2,1);
}
.vl-gamma-lab { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.vl-gamma-lab b { color: var(--ink); letter-spacing: .04em; }
.vl-gamma.hot .vl-gamma-lab b { color: var(--crit); }
.vl-gamma.cold .vl-gamma-lab b { color: var(--s5); }
.vl-gamma.hot .vl-gamma-bar { box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 2px color-mix(in srgb, var(--crit) 26%, transparent); }

/* ---- House rules card ---- */
.vl-house { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.vl-house li { padding-left: 14px; position: relative; color: var(--muted); }
.vl-house li b { color: var(--ink); font-weight: 600; }
.vl-house li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---- Controls ---- */
.vl-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.vl-controls .f { max-width: 130px; }
#game-vlack[data-friday="1"] .vl-felt { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
#game-vlack[data-friday="1"] .vl-felt::after { content: none; }
#vl-friday[aria-pressed="true"] { background: var(--gold); color: #1A1305; border-color: transparent; }

/* ============================================================
   Landscape and aspect-ratio presets.
   arena-fx.js measures the space a board really has and writes
   --board-max on <html>; every square board honours it.
   ============================================================ */
.board, .nboard { max-width: min(520px, var(--board-max, 520px)); }
.nvidy-wrap { max-width: min(580px, calc(var(--board-max, 520px) + 60px)); }

/* Landscape on a phone or a short window: the board and its sidebar sit
   side by side, and the board never grows past the space measured above. */
:root[data-orient="landscape"][data-short="1"] main { padding-bottom: 72px; }
:root[data-orient="landscape"][data-short="1"] .screen-head { margin-bottom: 10px; }
:root[data-orient="landscape"][data-short="1"] .screen-head h2 { font-size: 20px; }
:root[data-orient="landscape"][data-short="1"] .screen-head p { display: none; }
:root[data-orient="landscape"][data-short="1"] .panel { padding: 12px; }
:root[data-orient="landscape"][data-short="1"] .arena-nav { margin-bottom: 10px; }
:root[data-orient="landscape"][data-short="1"] .arena-nav button { padding: 6px 11px; font-size: 12px; }
:root[data-orient="landscape"][data-short="1"] .moves { max-height: 56px; }
:root[data-orient="landscape"][data-short="1"] .vl-cards { min-height: 78px; }
:root[data-orient="landscape"][data-short="1"] .vl-card { width: 50px; height: 71px; font-size: 13px; }

/* Under 900px the grid collapses to one column, which in landscape wastes
   the whole right half of the screen. Put the board back beside its panel. */
@media (max-width: 900px) and (orientation: landscape) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { padding: 2px; }
  .rail button { font-size: 10px; padding: 5px 2px; }
  .rail button svg { width: 17px; height: 17px; }
  main { padding: 12px 14px 68px; }
  .grid { grid-template-columns: repeat(12, 1fr); }
  .c8 { grid-column: span 7; }
  .c6 { grid-column: span 6; }
  .c4 { grid-column: span 5; }
  .c3 { grid-column: span 4; }
  .top { padding: 5px 12px; gap: 10px; }
  .brand { font-size: 16px; }
  .ticker { order: 0; flex: 1 1 auto; width: auto; }
  .mkt { order: 0; width: auto; }
}

/* Very wide, very short: ultrawide desktop and 20:9 phones on their side. */
:root[data-aspect="21-9"] main { max-width: 1560px; }
:root[data-aspect="21-9"] .grid { gap: 18px; }
:root[data-aspect="20-9"][data-orient="landscape"] .vl-card,
:root[data-aspect="19.5-9"][data-orient="landscape"] .vl-card { width: 48px; height: 68px; font-size: 12.5px; padding: 5px; }
:root[data-aspect="20-9"][data-orient="landscape"] .vl-cards,
:root[data-aspect="19.5-9"][data-orient="landscape"] .vl-cards { min-height: 74px; gap: 6px; }

/* 4:3 and 3:2 have height to spare: let the boards breathe. */
:root[data-aspect="4-3"] .board, :root[data-aspect="4-3"] .nboard,
:root[data-aspect="3-2"] .board, :root[data-aspect="3-2"] .nboard { max-width: min(560px, var(--board-max, 560px)); }

/* Portrait phones keep the old behaviour, just bounded. */
:root[data-orient="portrait"] .board,
:root[data-orient="portrait"] .nboard { max-width: min(520px, var(--board-max, 520px), 100%); }

/* ---- Sound toggle ---- */
#fx-sound { min-width: 32px; font-size: 13px; line-height: 1; padding: 5px 9px; }
:root[data-sound="off"] #fx-sound { opacity: .55; }

/* ---- Motion: cards deal in, the felt reacts ---- */
@media (prefers-reduced-motion: reduce) {
  .vl-card { transition: none !important; transform: none !important; opacity: 1 !important; }
  .vl-gamma-bar i { transition: none; }
}