/* Live price board for in-store screens: 16:9, readable from across a room, dark by default. */
:root { --bg: #0b1a30; --panel: #12264a; --line: #24406e; --ink: #ffffff; --ink-2: #c9d6ea; --muted: #8fa3c4; --gold: #e3b341; --up: #3fd16b; --down: #ff6b6b; }
.theme-light { --bg: #f4f6f9; --panel: #ffffff; --line: #d7dde6; --ink: #0f1c2e; --ink-2: #3a4a60; --muted: #6b7a90; --gold: #a5700a; --up: #0a8a2a; --down: #c0161a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body { overflow: hidden; }
/* Everything scales with the viewport so the board fills any screen, from a phone to a 75" TV. */
.board { position: relative; width: 100vw; height: 100vh; padding: 2.2vh 2.2vw; display: grid; grid-template-rows: auto 1fr auto; gap: 1.8vh; font-size: min(1.35vw, 2.35vh); transition: transform 2s ease; }
.b-head { display: flex; justify-content: space-between; align-items: center; }
.b-brand { display: flex; align-items: center; gap: 1.2vw; }
.b-mark { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--gold); color: var(--bg); font-weight: 800; font-size: 1.1em; }
.b-brand h1 { margin: 0; font-size: 2.1em; line-height: 1.1; }
.b-brand p { margin: .2em 0 0; color: var(--ink-2); font-size: 1em; }
.b-clock { display: flex; align-items: baseline; gap: .6em; }
.b-clock time { white-space: nowrap; font-size: 2.6em; font-weight: 800; font-variant-numeric: tabular-nums; }
.b-tz { color: var(--muted); font-weight: 700; }
.b-status { align-self: center; padding: .25em .8em; border-radius: 999px; font-weight: 700; font-size: .9em; }
.b-status.is-open { background: rgba(63, 209, 107, .15); color: var(--up); }
.b-status.is-closed { background: rgba(255, 107, 107, .15); color: var(--down); }
.b-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr auto; gap: 1.8vh 1.6vw; min-height: 0; }
.b-grid section { background: var(--panel); border: 1px solid var(--line); border-radius: .6em; padding: 1.4vh 1.4vw; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.b-grid h2 { margin: 0 0 .4em; font-size: 1.05em; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.b-grid h2 small { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 600; margin-left: .4em; }
.b-spot { grid-row: 1; }
.b-gold { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3em 1em; padding-bottom: .6em; border-bottom: 1px solid var(--line); }
.b-gold .b-label { width: 100%; color: var(--ink-2); font-weight: 700; }
.b-big { font-size: 3.9em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.b-metals, .b-coins ul { list-style: none; margin: 0; padding: 0; }
.b-metals { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.b-metals li { display: grid; grid-template-columns: 1fr auto 6.5em; align-items: baseline; gap: 1em; padding: .3em 0; border-bottom: 1px solid var(--line); }
.b-metals li:last-child { border-bottom: 0; }
.b-label { color: var(--ink-2); font-weight: 600; }
.b-val { font-size: 1.55em; font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }
.chg { font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; }
.b-gold .chg { font-size: 1.6em; }
.chg.up { color: var(--up); } .chg.down { color: var(--down); } .chg.flat { color: var(--muted); }
.chg.up::before { content: '▲ '; } .chg.down::before { content: '▼ '; }
.b-karat table { width: 100%; flex: 1; border-collapse: collapse; }
.b-karat th, .b-karat td { padding: .2em 0; border-bottom: 1px solid var(--line); text-align: start; }
.b-karat tr:last-child th, .b-karat tr:last-child td { border-bottom: 0; }
.b-karat th { font-size: 1.35em; font-weight: 800; }
.b-karat th span { margin-left: .5em; font-size: .6em; color: var(--muted); font-weight: 600; }
.b-karat td { text-align: end; font-size: 1.85em; font-weight: 800; font-variant-numeric: tabular-nums; }
.b-note { margin: .6em 0 0; color: var(--muted); font-size: .85em; }
.b-coins { grid-column: 1 / -1; }
.b-coins ul { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1vw; }
.b-coins li { display: flex; flex-direction: column; gap: .2em; }
.b-coins .b-val { text-align: start; font-size: 1.45em; }
.b-foot { display: flex; justify-content: space-between; align-items: center; gap: 1em; color: var(--muted); font-size: .85em; }
.b-powered strong { color: var(--ink-2); }
.b-stale { color: var(--down); font-weight: 700; }
.b-fs { position: fixed; right: 1vw; bottom: 5vh; padding: .5em 1em; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink-2); font: inherit; cursor: pointer; opacity: .85; }
:fullscreen .b-fs, .b-fs.hide { display: none; }
/* Live ticks */
.tick-up { animation: tUp 1.8s ease-out; } .tick-down { animation: tDown 1.8s ease-out; }
@keyframes tUp { 0% { color: var(--up); text-shadow: 0 0 .4em rgba(63, 209, 107, .6); } 100% { color: inherit; text-shadow: none; } }
@keyframes tDown { 0% { color: var(--down); text-shadow: 0 0 .4em rgba(255, 107, 107, .6); } 100% { color: inherit; text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .tick-up, .tick-down { animation: none; } .board { transition: none; } }
/* Portrait screens and phones: stack the panels */
@media (orientation: portrait) {
  body { overflow: auto; }
  .board { height: auto; min-height: 100vh; font-size: min(3.4vw, 2.2vh); }
  .b-grid { grid-template-columns: 1fr; }
  .b-coins { grid-column: auto; }
  .b-coins ul { grid-template-columns: repeat(2, 1fr); }
  .b-foot { flex-direction: column; align-items: flex-start; }
  .b-head { flex-wrap: wrap; gap: .6em; }
  .b-status { white-space: nowrap; }
}