/*
 * LDM Live theme: felt table green, metallic gold, ivory tiles.
 * Loaded after the original styles. Layout rules from the original page are
 * untouched; this file only changes colour, type and surfaces.
 */
:root {
  --felt-black: #05140d;
  --felt-darker: #081c13;
  --felt-dark: #0e2b1d;
  --felt-surface: #123624;
  --felt: #1b4d32;
  --gold: #d4af37;
  --gold-light: #f7e7a9;
  --gold-dark: #997b1e;
  --ivory: #f7f3ea;
  --ivory-edge: #ded6c5;
  --tile-ink: #1d1a14;

  --ink: #eef2ea;
  --muted: #a9bcae;
  --line: rgba(212, 175, 55, 0.2);
  --paper: var(--felt-black);
  --green: #2f8f55;
  --panel: rgba(14, 43, 29, 0.72);
  --panel-solid: #0f2e1f;
  --field: #0a2217;
  --field-line: rgba(212, 175, 55, 0.32);
  --soft: rgba(212, 175, 55, 0.09);
  --pos: #57c27f;
  --neg: #f07a6e;
  --gold-gradient: linear-gradient(135deg, #e6c665 0%, #d4af37 50%, #aa820a 100%);
  --gold-text: linear-gradient(135deg, #fff8dc 0%, #f7e7a9 20%, #d4af37 50%, #e6c665 75%, #997b1e 100%);
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
}

/* ---------- page ---------- */
html { background: var(--felt-black); }
body {
  background-color: var(--felt-black);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(27, 77, 50, 0.55) 0%, transparent 60%),
    radial-gradient(circle at 85% 60%, rgba(212, 175, 55, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(14, 43, 29, 0.7) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold); color: var(--felt-black); }

/* ---------- brand header ---------- */
header .sun {
  width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 36px;
  background: linear-gradient(145deg, #ffffff 0%, var(--ivory) 80%, var(--ivory-edge) 100%);
  color: #b8860b;
  box-shadow: 0 5px 0 var(--felt-surface), 0 10px 20px rgba(0, 0, 0, 0.6), inset 0 1px 2px #fff;
}
h1 {
  font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 900; letter-spacing: 0.12em;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}
header > div:not(.sun):not(.tagline) { color: var(--gold-light); font-size: 1.05em; letter-spacing: .08em; }
.tagline { letter-spacing: 0.04em; }
h2, h3 { color: var(--ink); letter-spacing: 0.01em; }
h2 { font-weight: 800; }

/* ---------- surfaces ---------- */
.panel, .card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.home-card {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s, box-shadow .3s;
  position: relative; overflow: hidden;
}
.home-card::after {
  content: '\203A'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 34px; color: var(--gold); opacity: .7; transition: transform .3s, opacity .3s;
}
.home-card strong { color: var(--gold-light); padding-right: 28px; }
.home-card span { color: var(--muted); padding-right: 28px; display: block; }
@media (hover: hover) {
  .home-card:hover { transform: translateY(-3px); border-color: rgba(212, 175, 55, 0.5); box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.14); }
  .home-card:hover::after { opacity: 1; transform: translate(4px, -50%); }
}
.stat { background: var(--soft); border: 1px solid var(--line); }
.stat small { color: var(--muted); }
.badge { background: var(--soft); color: var(--gold-light); border: 1px solid var(--line); }
.record { border-top-color: var(--line); }
.status { color: var(--gold); letter-spacing: .03em; }
.notice { border-left-color: var(--gold); color: var(--ink); }
.small, .muted, .build { color: var(--muted); }
.build { opacity: .7; }

/* ---------- forms ---------- */
label { color: var(--gold-light); letter-spacing: .02em; }
input, select, textarea {
  background: var(--field); color: var(--ink);
  border: 1px solid var(--field-line);
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: rgba(169, 188, 174, .6); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, .22); }
select option, select optgroup { background: var(--panel-solid); color: var(--ink); }
input[type=checkbox], input[type=radio] { accent-color: var(--gold); }

/* ---------- buttons ---------- */
button {
  background: var(--gold-gradient); color: var(--felt-black);
  box-shadow: 0 6px 18px -8px rgba(212, 175, 55, .55);
  transition: transform .12s ease, filter .2s, box-shadow .2s;
  letter-spacing: .01em;
}
button:active:not(:disabled) { transform: translateY(1px) scale(.99); }
@media (hover: hover) { button:hover:not(:disabled) { filter: brightness(1.08); } }
button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.secondary, .desk-tabs button {
  background: rgba(212, 175, 55, .08); color: var(--gold-light);
  border: 1px solid var(--line); box-shadow: none;
}
.desk-tabs button.active { background: var(--gold-gradient); color: var(--felt-black); border-color: transparent; }
.danger { background: linear-gradient(135deg, #a23a32, #742d2b); color: #fff; box-shadow: none; }
.confirm { background: linear-gradient(135deg, #3aa866, #23703f); color: #fff; box-shadow: 0 6px 18px -8px rgba(58, 168, 102, .6); }
.link { background: none; color: var(--gold); box-shadow: none; text-underline-offset: 3px; }
.link:hover { filter: none; color: var(--gold-light); }

/* ---------- messages ---------- */
.message { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.message.error, .error { background: rgba(240, 122, 110, .12); color: #ffb4aa; border-color: rgba(240, 122, 110, .35); }
.message.success, .success { background: rgba(87, 194, 127, .12); color: #a6e8bd; border-color: rgba(87, 194, 127, .35); }
#scoreMessage:not(.error) { background: none; border: 0; }

/* ---------- tables & standings ---------- */
th, td { border-bottom-color: var(--line); }
th { color: var(--gold); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
td { font-variant-numeric: tabular-nums; }
details { border-top: 1px solid var(--line); padding-top: 4px; }
summary { color: var(--gold-light); }
summary::marker { color: var(--gold); }
.assignment { border-bottom-color: var(--line); }

/* ---------- HKTW payment math ---------- */
.hktw-payment { background: var(--soft); border-color: var(--line); }
.hktw-total { background: rgba(212, 175, 55, .2); border-left-color: var(--line); }

/* ---------- score desk & table board ---------- */
.score-overlay { background: rgba(3, 12, 8, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.score-overlay > .panel, .table-entry-overlay > .panel { background: var(--panel-solid); }
.desk-context, .dealer-chip { color: var(--muted); }

/* Players are ivory mahjong tiles around the felt. */
.table-player-cards {
  background: radial-gradient(ellipse at center, rgba(27, 77, 50, .9) 0%, rgba(18, 54, 36, .85) 55%, rgba(8, 28, 19, .6) 100%);
  border: 1px solid var(--line); border-radius: 28px; padding: 8px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .45);
}
.table-player-card {
  background: linear-gradient(145deg, #ffffff 0%, var(--ivory) 78%, var(--ivory-edge) 100%);
  border: 1px solid #e5dec9; color: var(--tile-ink);
  box-shadow: 0 5px 0 var(--felt-surface), 0 9px 16px rgba(0, 0, 0, .5), inset 0 1px 2px #fff;
}
.table-player-card .seat-label { color: #6f6447; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.table-player-card .player-total { font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.player-total.positive { color: #1f7a43; }
.player-total.negative { color: #b02f2f; }
.table-player-card.is-dealer { border: 2px solid var(--gold); background: linear-gradient(145deg, #fffdf3 0%, #f7eccb 100%); box-shadow: 0 5px 0 var(--gold-dark), 0 9px 18px rgba(0, 0, 0, .5), 0 0 18px rgba(212, 175, 55, .45); }
.board-center { color: var(--gold-light); }
.review-delta { background: var(--soft); border: 1px solid var(--line); }
.table-stat-card { background: var(--panel); border-color: var(--line); }
.table-stat-grid strong { color: var(--gold-light); font-family: 'Space Grotesk', system-ui, sans-serif; }
.table-record-label { color: var(--muted); }

/* ---------- house rules ---------- */
.rules-pages { background: transparent; }
.rule-group > h3 { background: var(--gold-gradient); color: var(--felt-black); border-radius: 12px 12px 0 0; }
.rule-entry { color: var(--ink); border-bottom-color: var(--line); background: rgba(14, 43, 29, .55); }
.rule-entry:nth-child(odd) { background: rgba(212, 175, 55, .07); }
.rule-fan { color: var(--gold-light); }
.compact-house-rules { background: var(--panel); border-color: var(--line); }
.rules-conversion { color: var(--ink); }
.rules-conversion td, .rules-conversion th { border-color: var(--line); }
.rules-conversion th, .rules-conversion tbody tr:nth-child(even) { background: rgba(212, 175, 55, .16); }
.rules-conversion tbody tr:nth-child(odd) { background: rgba(14, 43, 29, .6); }
.watch-reference-links button { background: var(--gold-gradient); color: var(--felt-black); }

/* ---------- projector view ---------- */
.projector body, body.projector { background-attachment: fixed; }
.projector table { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

/* ---------- polish: spacing & layout ---------- */

/* Felt lighting on a fixed layer (iOS Safari ignores background-attachment: fixed). */
body { background-image: none; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--felt-black);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(27, 77, 50, 0.55) 0%, transparent 60%),
    radial-gradient(circle at 85% 60%, rgba(212, 175, 55, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(14, 43, 29, 0.7) 0%, transparent 50%);
}

/* A comfortable reading column on desktop; projector view stays wide. */
.wrap { max-width: 860px; }
.projector .wrap { max-width: 1240px; }

/* Header rhythm */
header { margin-bottom: 26px; }
header h1 { margin-top: 2px; line-height: 1.15; }
header .tagline { color: var(--muted); margin-top: 6px; }

/* Even spacing between stacked blocks */
.home-card { margin: 0 0 12px; }
.home-card + .actions, .public-rules { margin-top: 4px; }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
button + h2, button + h3, .wide + h2, .wide + h3 { margin-top: 22px; }
.actions { gap: 10px; }
.topbar { align-items: center; margin-bottom: 14px; }
.rules-pages, #houseRulesViewer { margin-top: 12px; }
#houseRulesScreen .actions, .rules-tabs { margin-top: 10px; }
.message:not(:empty) { margin: 12px 0; }

/* Tables: never break words mid-way; rank column stays tight. */
td, th { overflow-wrap: normal; word-break: normal; hyphens: none; }
th { line-height: 1.25; vertical-align: bottom; }
td:first-child, th:first-child { width: 1%; white-space: nowrap; padding-right: 12px; }
tbody tr:first-child td:first-child { color: var(--gold-light); font-weight: 800; }
.panel, .card { overflow-x: auto; }

/* Table board: action buttons share the row evenly. */
.board-actions { display: flex; gap: 6px; }
.board-actions > button { flex: 1 1 0; min-width: 0; }
.board-actions > button[hidden] { display: none !important; }

/* Score entry popup: the "multiple winners" section spans the full width. */
#tablePayerField { grid-column: 1 / -1; }
#tablePayerField details { margin-top: 12px; }
.table-entry-overlay summary { line-height: 1.3; }

/* Disabled buttons read as clearly inactive. */
button:disabled { opacity: 1; filter: none; background: rgba(169, 188, 174, .1); color: rgba(169, 188, 174, .55); border: 1px solid rgba(169, 188, 174, .14); box-shadow: none; }

/* Player names stay on one line; wide tables scroll inside their card. */
td:nth-child(2) { white-space: nowrap; }
#refreshHouseRules { margin-bottom: 12px; }
#refreshHouseRules + .message:empty + .grid, #refreshHouseRules ~ .grid { margin-top: 0; }

/* Phones: a consistent side gutter and tables that fit. */
@media (max-width: 600px) {
  body:not(.playing-layout) { padding-left: 14px; padding-right: 14px; }
  header .sun { width: 56px; height: 56px; font-size: 31px; border-radius: 14px; }
  h1 { font-size: 32px; }
  .panel, .card { padding: 18px 14px; }
  table { font-size: 15px; }
  th { font-size: 11px; letter-spacing: .04em; }
  td, th { padding: 9px 5px; }
  td:first-child, th:first-child { padding-right: 8px; }
  .public-rules button { font-size: 17px; line-height: 1.3; padding: 12px 10px; }
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}