/* 500-point games (g500.js): lobby, running score, per-hand scoreboard, final result, drop-out vote. Black/chrome. */
.mode500 { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; }
.mode500 small { font-weight: 400; color: var(--muted); font-size: 12px; }
#screen-g500 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
#screen-g500[hidden] { display: none; }
@media (max-width: 760px) { #screen-g500 { grid-template-columns: 1fr; } }
.g5-tabs { display: flex; gap: 8px; margin: 12px 0; }
.g5-tab { flex: 1; padding: 12px 8px; border-radius: 12px; border: 1px solid #3a3d44; background: #17181b; color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer; }
.g5-tab.on { background: var(--chrome); color: #111; border-color: #fff; }
.g5-pane { display: flex; flex-direction: column; gap: 10px; }
.g5-pane label select { margin-left: 0; } /* the Bots pick lines up with the Start button (was 8 px right, past the card edge) */
.g5-invite { display: flex; gap: 8px; flex-wrap: wrap; }
.g5-invite input { flex: 1 1 180px; min-width: 0; }
.g5-inv, .g5-look { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin: 6px 0; border-radius: 12px; background: #17181b; border: 1px solid #3a3d44; }
.g5-inv.out { opacity: .85; }
.g5-live { padding: 12px; border-radius: 12px; border: 1px solid var(--gold); background: #17181b; margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.g5-rec td, .g5-rec th { text-align: center; } .g5-rec th:first-child { text-align: left; }
.g5-hist { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.g5-hist li { padding: 6px 0; border-bottom: 1px solid #2a2c31; } .g5-hist li.won b { color: #fff; } .g5-hist li.lost b { color: var(--neg); }
.g5-rules ul { padding-left: 18px; margin: 6px 0; }
.bot-tag { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--chrome); color: #111; font-weight: 800; font-size: .8em; letter-spacing: .03em; }
.seat .standin-tag { font-size: 12px; color: var(--gold); margin-top: 2px; }
.seat.stand-in .avatar { filter: grayscale(.7); }
.g5-sheet { max-width: 640px; width: min(96vw, 640px); max-height: 92vh; overflow: auto; }
.g5-big { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0 14px; }
.g5-big > div:not(.vs) { flex: 1; text-align: center; padding: 10px; border-radius: 14px; background: #17181b; border: 1px solid #3a3d44; }
.g5-big > div.win { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.g5-big > div > span { display: block; font-size: 13px; color: var(--muted); }
.g5-big .bot-tag { font-size: 10px; vertical-align: 1px; }
.g5-big b { display: block; font-size: 40px; line-height: 1.1; }
.g5-big small { color: var(--muted); }
.g5-big .vs { color: var(--muted); font-size: 13px; }
.g5-hands { font-size: 13px; width: 100%; }
.g5-hands td, .g5-hands th { padding: 4px 6px; text-align: center; }
.g5-vote { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0 4px; }
#g5FinalTitle { font-size: 30px; margin: 4px 0; }
@media (max-width: 420px) { .g5-big b { font-size: 30px; } .g5-hands { font-size: 11px; } .g5-hands td, .g5-hands th { padding: 3px 2px; } .g5-tab { font-size: 13px; } }
.seat .nameRow .bot-tag { margin-left: 6px; font-size: 11px; padding: 1px 6px; }
.g5-bonus { margin: 6px auto 4px; padding: 6px 14px; display: inline-block; border-radius: 10px; background: linear-gradient(90deg, #f7c948, #ffe08a); color: #3a2a00; font-weight: 900; font-size: 22px; letter-spacing: .06em; box-shadow: 0 2px 10px rgba(247, 201, 72, .45); }
.g5-bonus small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.g5-bonus-tag { color: #f7c948; }
.g5-bonus-count { margin: 6px 0 0; }
/* start score picker (any whole number −199…499, quick picks) */
.g5-start { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: #17181b; border: 1px solid #3a3d44; }
.g5-start label { font-weight: 700; }
.g5-start input { width: 84px; padding: 6px 8px; border-radius: 8px; }
.g5-start input.bad { outline: 2px solid var(--neg); }
.g5-picks { display: inline-flex; gap: 4px; }
.g5-pick { padding: 5px 10px; border-radius: 8px; border: 1px solid #3a3d44; background: #222428; color: var(--ink); font-weight: 700; cursor: pointer; }
.g5-pick.on { background: var(--chrome); color: #111; border-color: #fff; }
#g5StartHelp { flex-basis: 100%; }
#g5StartErr:empty { display: none; }
.g5s-from { color: var(--gold); }