/* Marriage Score Keeper (2026-10-23). Everything is scoped to #mgApp and uses the site's colour tokens, so light and
   dark mode follow the rest of Sajha. Class names are mg-*; they avoid ad-blocker words on purpose. */
#mgApp {
  --mg-pos: #12803c; --mg-neg: #c42031; --mg-win: #9a6f00; --mg-seen: #12803c; --mg-unseen: #6a6a78; --mg-out: #3b3b46;
  --mg-chip: var(--muted, #efece4);
}
:root[data-bs-theme="dark"] #mgApp { --mg-pos: #4cc38a; --mg-neg: #ff7480; --mg-win: #a87a00; --mg-seen: #1f8f57; --mg-unseen: #70707f; --mg-out: #4a4a57; }

#mgApp .form-control, #mgApp .form-select, #mgApp .btn { min-height: 44px; }
#mgApp .btn-sm { min-height: 36px; }
#mgApp .mg-pos { color: var(--mg-pos); } #mgApp .mg-neg { color: var(--mg-neg); } #mgApp .mg-mut { color: var(--muted-foreground); }
#mgApp .mg-small { font-size: .8rem; }

/* tabs + save state */
#mgApp .mg-tabs { gap: .35rem; margin-bottom: .75rem; }
#mgApp .mg-tabs .nav-link { white-space: nowrap; border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
#mgApp .mg-tabs .nav-link.active { background: var(--primary-solid, #1a3a8a); border-color: var(--primary-solid, #1a3a8a); color: #fff; }
#mgApp .mg-sync { font-size: .8rem; color: var(--muted-foreground); text-align: right; min-height: 1.2rem; }
#mgApp .mg-sync.bad { color: var(--mg-neg); font-weight: 600; }
#mgApp .mg-note { background: var(--muted); border: 1px solid var(--border); border-radius: .6rem; padding: .6rem .8rem; margin-bottom: .75rem; font-size: .92rem; }
#mgApp .mg-note.gold { border-color: #b8860b; }

/* player rows on the deal screen */
#mgApp .mg-row { padding: .75rem 0; border-bottom: 1px solid var(--border); }
#mgApp .mg-row:last-of-type { border-bottom: 0; }
#mgApp .mg-rowhead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
#mgApp .mg-maalin { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
#mgApp .mg-pname { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mgApp .mg-maalbtn { min-height: 40px; padding: .15rem .8rem; border-radius: 99px; background: var(--mg-chip); border: 1px solid var(--border); color: var(--foreground); font-size: .95rem; white-space: nowrap; }
#mgApp .mg-maalbtn.open { border-color: var(--accent); }
#mgApp .mg-maalbtn:disabled { opacity: .4; }
#mgApp .mg-seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: .6rem; overflow: hidden; }
#mgApp .mg-seg button { border: 0; border-right: 1px solid var(--border); border-radius: 0; min-height: 44px; padding: .25rem; font-size: .9rem; background: var(--background); color: var(--foreground); }
#mgApp .mg-seg button:last-child { border-right: 0; }
#mgApp .mg-seg button:disabled { opacity: .35; }
#mgApp .mg-seg button.on { font-weight: 700; color: #fff; }
#mgApp .mg-seg button.on.winner { background: var(--mg-win); }
#mgApp .mg-seg button.on.seen { background: var(--mg-seen); }
#mgApp .mg-seg button.on.unseen { background: var(--mg-unseen); }
#mgApp .mg-seg button.on.out { background: var(--mg-out); }

/* card counters */
#mgApp .mg-stpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; }
#mgApp .mg-stp { display: flex; flex-direction: column; gap: .25rem; background: var(--background); border: 1px solid var(--border); border-radius: .6rem; padding: .5rem; }
#mgApp .mg-stp > span { font-size: .8rem; color: var(--muted-foreground); }
#mgApp .mg-stp > div { display: flex; align-items: center; justify-content: space-between; }
#mgApp .mg-stp b { font-size: 1.2rem; min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }
#mgApp .mg-stp button { width: 44px; padding: 0; font-size: 1.25rem; }
#mgApp .mg-bd { margin-top: .5rem; padding: .5rem .65rem; background: var(--background); border-radius: .6rem; font-size: .9rem; }

/* results */
#mgApp .mg-res { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; font-variant-numeric: tabular-nums; }
#mgApp .mg-res b { font-size: 1.05rem; }
#mgApp .mg-calc { font-size: .78rem; color: var(--muted-foreground); font-weight: 400; }
#mgApp .mg-ta { text-align: right; }
#mgApp .mg-tag { font-size: .7rem; padding: 1px 7px; border-radius: 99px; background: var(--mg-chip); color: var(--muted-foreground); text-transform: capitalize; }
#mgApp .mg-tag.winner { background: var(--mg-win); color: #fff; }
#mgApp .mg-savebar { position: sticky; bottom: .5rem; z-index: 5; padding: .5rem 0; }
@media (max-width: 575.98px) { #mgApp .mg-savebar { padding-right: 4.2rem; } }

/* scoreboard */
#mgApp .mg-it { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; margin-bottom: .5rem; background: var(--card); }
#mgApp .mg-it.lead { border-color: #b8860b; box-shadow: 0 0 0 1px #b8860b inset; }
#mgApp .mg-rank { width: 28px; height: 36px; border: 1px solid var(--border); border-radius: 6px; display: grid; place-items: center; font-weight: 700; background: var(--background); flex: 0 0 auto; }
#mgApp .mg-nm { flex: 1; min-width: 0; }
#mgApp .mg-nm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mgApp .mg-pts { text-align: right; font-variant-numeric: tabular-nums; }
#mgApp .mg-pts b { font-size: 1.4rem; display: block; line-height: 1.1; }
#mgApp .mg-badge { display: inline-block; font-size: .7rem; padding: 1px 7px; border-radius: 99px; background: var(--mg-chip); color: var(--muted-foreground); margin-right: .25rem; }
#mgApp .mg-badge.gold { background: #9a6f00; color: #fff; }
#mgApp .mg-table { border-collapse: collapse; width: 100%; font-size: .85rem; font-variant-numeric: tabular-nums; }
#mgApp .mg-table th, #mgApp .mg-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
#mgApp .mg-table th { color: var(--muted-foreground); font-weight: 600; }
#mgApp .mg-table td.w { font-weight: 700; }
#mgApp .mg-pay { padding: .5rem 0; border-bottom: 1px dashed var(--border); }
#mgApp .mg-pay:last-child { border: 0; }

/* start-of-game settings (the list that mirrors the table rules) */
#mgApp .mg-setgrid { display: grid; grid-template-columns: 1fr; gap: .15rem .75rem; }
@media (min-width: 576px) { #mgApp .mg-setgrid { grid-template-columns: 1fr 1fr; } }
#mgApp .mg-setgrid label { font-size: .8rem; color: var(--muted-foreground); margin: .6rem 0 .15rem; }
#mgApp .mg-setgrid .full { grid-column: 1 / -1; }
#mgApp .mg-ref { font-size: .7rem; color: var(--muted-foreground); font-style: italic; }
#mgApp details.mg-sec > summary { padding: .85rem 1rem; font-weight: 700; cursor: pointer; list-style: none; min-height: 44px; }
#mgApp details.mg-sec > summary::after { content: "\25BE"; float: right; color: var(--muted-foreground); }
#mgApp details.mg-sec[open] > summary::after { content: "\25B4"; }
#mgApp details.mg-sec > .mg-secbody { padding: 0 1rem 1rem; }
#mgApp table.mg-mt input { width: 64px; text-align: center; padding: .4rem .2rem; min-height: 40px; }
#mgApp table.mg-mt td.l { text-align: left; font-weight: 600; padding-left: 0; }
#mgApp input.mg-assumed { border-color: #b8860b; background: color-mix(in srgb, #b8860b 14%, var(--background)); }
#mgApp .mg-q { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #9a6f00; color: #fff; font-size: .7rem; font-weight: 700; cursor: help; }
#mgApp .mg-prow { display: flex; gap: .5rem; margin-bottom: .5rem; }
#mgApp .mg-prow input { flex: 1; }
#mgApp .mg-prow button { flex: 0 0 44px; padding: 0; }
#mgApp .mg-empty { text-align: center; color: var(--muted-foreground); padding: 1.5rem .5rem; }
/* ===== colour (2026-10-23): one colour per seat at the table, coloured tabs and card suits ===== */
/* A seat's hue is set inline as --ph; the shade below is picked for light or dark mode. */
#mgApp [style*="--ph"] { --pc: hsl(var(--ph) 62% 42%); --pt: hsl(var(--ph) 62% 42% / .09); --pi: #fff; }
:root[data-bs-theme="dark"] #mgApp [style*="--ph"] { --pc: hsl(var(--ph) 70% 64%); --pt: hsl(var(--ph) 70% 64% / .13); --pi: #101216; }
#mgApp .mg-av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pc, #888); color: var(--pi, #fff); font-weight: 700; font-size: .85rem; margin-right: .5rem; flex: none; vertical-align: middle; }
#mgApp .mg-prow .mg-av { margin-right: 0; align-self: center; width: 34px; height: 34px; }
#mgApp .mg-pn { color: var(--pc); font-weight: 700; }

/* player rows on the deal screen */
#mgApp .mg-row[style*="--ph"] { border-left: 5px solid var(--pc); background: var(--pt); border-radius: .6rem; padding: .7rem .75rem; margin-bottom: .6rem; border-bottom: 0; }
#mgApp .mg-row.is-win .mg-av { box-shadow: 0 0 0 3px #d4a017; }
#mgApp .mg-row.is-win .mg-pname::after { content: " \265B"; color: #d4a017; }
#mgApp .mg-row.is-win { background: linear-gradient(90deg, var(--pt), color-mix(in srgb, #d4a017 14%, transparent)); }

/* scoreboard */
#mgApp .mg-it[style*="--ph"] { border-left: 6px solid var(--pc); background: linear-gradient(90deg, var(--pt), transparent 55%), var(--card); }
#mgApp .mg-it.lead { border-color: #b8860b; border-left-color: var(--pc); }
#mgApp .mg-it .mg-rank { border-color: var(--pc); color: var(--pc); }
#mgApp .mg-nm b .mg-av { width: 26px; height: 26px; font-size: .75rem; }
#mgApp .mg-table th[style*="--ph"] { border-bottom: 3px solid var(--pc); color: var(--pc); }

/* tabs: each has its own colour */
#mgApp .mg-tabs .nav-link { border-top: 3px solid var(--tc, var(--border)); }
#mgApp .mg-tabs .nav-link[data-tab="new"] { --tc: hsl(215 70% 45%); }
#mgApp .mg-tabs .nav-link[data-tab="current"] { --tc: hsl(354 70% 45%); }
#mgApp .mg-tabs .nav-link[data-tab="board"] { --tc: hsl(40 90% 42%); }
#mgApp .mg-tabs .nav-link[data-tab="history"] { --tc: hsl(150 60% 33%); }
#mgApp .mg-tabs .nav-link[data-tab="defaults"] { --tc: hsl(280 50% 48%); }
#mgApp .mg-tabs .nav-link.active { background: var(--tc, var(--primary-solid)); border-color: var(--tc, var(--primary-solid)); color: #fff; }
:root[data-bs-theme="dark"] #mgApp .mg-tabs .nav-link[data-tab="new"] { --tc: hsl(215 75% 62%); }
:root[data-bs-theme="dark"] #mgApp .mg-tabs .nav-link[data-tab="current"] { --tc: hsl(354 75% 64%); }
:root[data-bs-theme="dark"] #mgApp .mg-tabs .nav-link[data-tab="board"] { --tc: hsl(42 90% 58%); }
:root[data-bs-theme="dark"] #mgApp .mg-tabs .nav-link[data-tab="history"] { --tc: hsl(150 55% 52%); }
:root[data-bs-theme="dark"] #mgApp .mg-tabs .nav-link[data-tab="defaults"] { --tc: hsl(280 60% 70%); }
:root[data-bs-theme="dark"] #mgApp .mg-tabs .nav-link.active { color: #101216; }

/* card suits: in the page heading and on the cards of the new-game form */
.mg-suits { font-size: .85em; letter-spacing: .12em; white-space: nowrap; }
.mg-suit, .mg-suits span { display: inline-block; }
.s-spade { color: hsl(215 70% 45%); } .s-heart { color: hsl(354 75% 48%); } .s-diamond { color: hsl(32 90% 48%); } .s-club { color: hsl(150 60% 35%); }
:root[data-bs-theme="dark"] .s-spade { color: hsl(215 80% 70%); } :root[data-bs-theme="dark"] .s-heart { color: hsl(354 85% 68%); }
:root[data-bs-theme="dark"] .s-diamond { color: hsl(35 95% 62%); } :root[data-bs-theme="dark"] .s-club { color: hsl(150 60% 58%); }

/* a little colour on the cards themselves */
#mgApp .card { border-top: 3px solid color-mix(in srgb, var(--accent, #b3202f) 55%, var(--border)); }
#mgApp .mg-note.gold { background: linear-gradient(90deg, color-mix(in srgb, #d4a017 22%, var(--muted)), var(--muted)); }
/* Deal by deal: players are rows, the first column is the player (stays in view while scrolling sideways), then the final tally, then the newest deal */
#mgApp .mg-flip .mg-stick { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; padding-left: .6rem; min-width: 7.5rem; }
#mgApp .mg-flip tr[style*="--ph"] .mg-stick { box-shadow: inset 4px 0 0 var(--pc); }
#mgApp .mg-flip thead th { vertical-align: bottom; }
#mgApp .mg-flip tbody td { vertical-align: middle; }
#mgApp .mg-flip .mg-av { width: 24px; height: 24px; font-size: .7rem; margin-right: .4rem; }
#mgApp .mg-flip td.w b { font-size: 1.05rem; }
#mgApp .mg-colact { margin-top: 4px; white-space: nowrap; }
#mgApp .mg-flip .mg-colact .btn { padding: 0 .4rem; min-height: 28px; font-size: .75rem; }
@media print { #mgApp .mg-tabs, #mgApp .noprint, #mgApp .btn { display: none !important; } }