/*
 * 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); }

/* ---------- headings ---------- */
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);
}
.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 { color: var(--muted); }

/* ---------- 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); }

/* ---------- 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; }

/* Even spacing between stacked blocks */
.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; }
  .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; }
}

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

/* ================= simplified design ================= */

/* ---------- icons ---------- */
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }

/* ---------- slim top bar ---------- */
header.topnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; margin: 0 0 18px; padding: 0 2px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; background: none; box-shadow: none; color: var(--ink); text-align: left; border-radius: 12px; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #9a7410;
  background: linear-gradient(145deg, #ffffff 0%, var(--ivory) 80%, var(--ivory-edge) 100%);
  box-shadow: 0 3px 0 var(--felt-surface), 0 6px 12px rgba(0, 0, 0, .5), inset 0 1px 2px #fff; }
.brand-mark .ico { width: 22px; height: 22px; stroke-width: 1.7; }
.brand-name { font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 900; font-size: 21px; letter-spacing: .12em; white-space: nowrap;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold); }
.brand-zh { color: var(--gold-light); font-size: 14px; letter-spacing: .08em; opacity: .85; white-space: nowrap; }
.account-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 56%; padding: 8px 14px; font-size: 16px; border-radius: 999px;
  background: rgba(212, 175, 55, .1); color: var(--gold-light); border: 1px solid var(--line); box-shadow: none; }
.account-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-btn.signed-in { background: var(--gold-gradient); color: var(--felt-black); border-color: transparent; }
@media (max-width: 420px) { .brand-zh { display: none; } }

/* ---------- segmented toggle & tabs ---------- */
.seg { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.seg button { min-height: 36px; padding: 6px 14px; font-size: 16px; border-radius: 9px; background: none; color: var(--muted); box-shadow: none; }
.seg button.active { background: var(--gold-gradient); color: var(--felt-black); }
.seg.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-bottom: 14px; }
.seg.tabs button { min-height: 44px; font-size: 17px; }
.seg.wide-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 12px 0; }

/* ---------- home ---------- */
.hero { padding: 26px 22px; border-color: rgba(212, 175, 55, .38); background: linear-gradient(160deg, rgba(27, 77, 50, .85), rgba(14, 43, 29, .8)); }
.eyebrow { margin: 0 0 6px; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hero h2 { margin: 0; font-size: 30px; line-height: 1.2; }
.hero-meta { margin: 6px 0 0; font-size: 17px; }
.hero-cta { min-height: 58px; font-size: 22px; margin-top: 20px; }
.hero-watch { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 6px; text-decoration: none; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.card-head h3 { margin: 0; }
.standings-card > .link { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; text-decoration: none; }
.standing-list { list-style: none; margin: 8px 0 0; padding: 0; }
.standing-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.standing-list .rank { width: 26px; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; color: var(--gold-light); }
.standing-list li:first-child .rank { color: var(--gold); }
.standing-list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standing-list .pts { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 14px 6px; font-size: 16px; line-height: 1.2; text-align: center;
  background: var(--panel); color: var(--gold-light); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.tile .ico { width: 28px; height: 28px; color: var(--gold); }
.home-row { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 16px; padding: 14px 16px; text-align: left; font-size: 18px;
  background: var(--panel); color: var(--gold-light); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.home-row .ico { color: var(--gold); }
.home-row span { flex: 1; }
.blessing { text-align: center; margin: 8px 0 0; }
@media (hover: hover) {
  .tile:hover, .home-row:hover { border-color: rgba(212, 175, 55, .5); filter: none; box-shadow: var(--shadow), 0 0 22px rgba(212, 175, 55, .12); }
}

/* ---------- score desk ---------- */
.desk-spacer { min-width: 72px; }

/* ---------- admin desk ---------- */
.phase { margin: 28px 0 4px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
#adminControls { overflow: visible; }
#adminMessage { position: sticky; top: 8px; z-index: 6; background: var(--panel-solid); box-shadow: var(--shadow); }
#adminMessage.error { background: linear-gradient(rgba(240, 122, 110, .16), rgba(240, 122, 110, .16)), var(--panel-solid); }
#adminMessage.success { background: linear-gradient(rgba(87, 194, 127, .16), rgba(87, 194, 127, .16)), var(--panel-solid); }