:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #081712; color: #f2f6ef; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { width: min(1200px, calc(100% - 2rem)); margin: 2rem auto 4rem; }
.topbar, .table-head, .panel-title, .seat-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar { align-items: start; }
.topbar-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.eyebrow { color: #91d5a5; font-size: .74rem; font-weight: 800; letter-spacing: .16em; }
.live-label { display: inline-flex; align-items: center; gap: .5rem; }
.live-status-dot { width: .65rem; height: .65rem; border-radius: 50%; background: #f4434b; box-shadow: 0 0 9px #f4434b; animation: live-pulse 1.8s ease-in-out infinite; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: .2rem 0; }
h2 { margin: .15rem 0 .8rem; font-size: 1.25rem; }
p { line-height: 1.5; }
.muted { color: #aebfb2; }
.badge, .mini-badge { background: #d9b66f; color: #172019; border-radius: 999px; padding: .35rem .65rem; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.mini-badge { padding: .18rem .42rem; }
.table-legend { text-align: center; color: #d8e5d9; font-size: .82rem; margin: .7rem 0 0; }
.role-tip { display: inline-block; position: relative; cursor: help; }
.role-tip:hover::after, .role-tip:focus::after { content: attr(data-help); position: absolute; z-index: 10; left: 50%; bottom: calc(100% + .45rem); transform: translateX(-50%); width: min(15rem, 75vw); padding: .55rem .7rem; border-radius: .45rem; background: #f3e3b7; color: #172019; box-shadow: 0 5px 18px #0008; white-space: normal; font-size: .78rem; line-height: 1.35; text-align: left; }
.role-tip:focus { outline: 2px solid #fff; }
.table-panel { padding: 2rem; background: radial-gradient(ellipse at center, #22553d, #103323 72%); border: 7px solid #5e412e; border-radius: 3rem; box-shadow: 0 20px 55px #0008; }
@keyframes live-pulse { 50% { opacity: .45; box-shadow: 0 0 3px #ff4545; } }
.pot { font-size: .9rem; color: #c2d9c9; }
.pot strong { display: block; font-size: 2rem; color: #fff; }
.board, .hole { display: flex; gap: .45rem; }
.board { justify-content: center; padding: 1.2rem 0; min-height: 6.5rem; }
.card { display: block; width: 4.5rem; height: 6.3rem; flex: none; border-radius: .35rem; overflow: hidden; background: #f5f2e9; box-shadow: 0 3px 8px #0004; }
.card-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.turn { text-align: center; font-weight: 700; min-height: 1.5rem; }
.players { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.seat { background: #0b241bdc; border: 1px solid #4d715b; border-radius: .9rem; padding: 1rem; }
.seat.acting { outline: 3px solid #e5c477; }
.seat.my-seat { border-color: #91d5a5; }
.seat.empty-seat { border-style: dashed; opacity: .7; min-height: 7rem; }
.seat.folded { opacity: .6; }
.seat-title { justify-content: start; flex-wrap: wrap; }
.seat p { margin: .5rem 0; color: #bbd2c0; font-size: .86rem; }
.hole .card { width: 3.2rem; height: 4.5rem; }
.seat-controls { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.result { margin-top: 1.4rem; padding: 1rem; border: 1px solid #d7b36e; border-radius: .8rem; background: #18372a; }
.result p { margin: .3rem 0; }
#show-results { display: block; margin: 1rem auto 0; }
#show-results[hidden] { display: none; }
#spectator-show-winners { display: block; margin: 1rem auto 0; }
#spectator-show-winners[hidden] { display: none; }
.results-dialog { width: min(850px, calc(100% - 1rem)); }
.results-players { display: grid; gap: .8rem; }
#results-summary { white-space: pre-line; }
.result-player { border: 1px solid #52735a; border-radius: .8rem; padding: .85rem; background: #193426; }
.result-player.winner { border-color: #d9b66f; }
.result-player h3 { margin: 0 0 .5rem; }
.result-player p { margin: .35rem 0; }
.result-cards { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .7rem; }
.result-cards .card { width: 2.7rem; height: 3.78rem; }
.result-cards .matching-card { outline: 3px solid #ffd166; outline-offset: 2px; }
.medal { margin-right: .35rem; }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1rem; margin-top: 1.3rem; }
.panel { background: #14271e; border: 1px solid #345b41; border-radius: .9rem; padding: 1.3rem; }
.start-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.panel-title { flex-wrap: wrap; }
.odds-info { width: 2rem; min-height: 2rem; padding: 0; border-radius: 50%; background: #d9b66f; font-family: Georgia, serif; font-style: italic; }
.odds-list { display: grid; gap: .45rem; }
.odds-row { display: grid; grid-template-columns: minmax(7rem, 1fr) 3.5rem; gap: .15rem .6rem; align-items: center; font-size: .88rem; }
.odds-row strong { text-align: right; }
.odds-bar { grid-column: 1 / -1; height: .35rem; border-radius: 1rem; overflow: hidden; background: #294837; }
.odds-bar span { display: block; height: 100%; background: #d9b66f; }
.panel[hidden], .result[hidden] { display: none; }
.admin-grid[hidden] { display: none; }
.inline-form { display: flex; gap: .7rem; flex-wrap: wrap; align-items: end; margin-top: 1rem; }
label { display: grid; gap: .3rem; color: #b9cbbd; font-size: .85rem; }
input, select, button { font: inherit; border-radius: .45rem; min-height: 2.6rem; }
input, select { color: #fff; background: #0a1b13; border: 1px solid #5c8064; padding: .5rem; max-width: 190px; }
button { color: #102017; background: #a7d5a6; border: 0; padding: .5rem .9rem; font-weight: 700; cursor: pointer; }
button:hover:not(:disabled) { filter: brightness(1.1); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary { background: #d5dfcf; }
button.danger { background: #e2aa76; }
.text-button { color: #b7dabe; background: transparent; border: 1px solid #5d8165; min-height: 1.8rem; font-size: .78rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.room-actions, .room-links { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.room-actions { margin-top: .8rem; }
.link-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: .5rem .9rem; color: #102017; background: #a7d5a6; border-radius: .45rem; font-weight: 700; text-decoration: none; }
.link-button.secondary { background: #d5dfcf; }
.room-list { display: grid; gap: .7rem; }
.lobby-list { margin-top: 1rem; }
.room-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px solid #4d715b; border-radius: .7rem; padding: 1rem; background: #0b241b; }
.room-card h3 { margin: 0; }
.room-card p { margin: .35rem 0 0; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; overflow: hidden; color: #fff; font-size: 1.4rem; font-weight: 900; background: #326956; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-color-1 { background: #884b68; }.avatar-color-2 { background: #51719c; }.avatar-color-3 { background: #8b653c; }.avatar-color-4 { background: #6260a0; }
.spectator-shell { width: min(1500px, calc(100% - 2rem)); }
.spectator-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; align-items: start; }
.spectator-seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
.spectator-seats .seat { min-width: 0; }
.spectator-sidebar { position: sticky; top: 1rem; }
.spectator-players { display: grid; gap: .7rem; }
.spectator-person { display: flex; align-items: center; gap: .65rem; border-bottom: 1px solid #345b41; padding-bottom: .55rem; }
.spectator-person div { display: grid; gap: .2rem; min-width: 0; }
.spectator-person strong { overflow-wrap: anywhere; }
.spectator-person small { color: #aebfb2; }
.spectator-history-title { margin-top: 1.4rem; }
.spectator-table { border-width: 6px; }
.my-hand-panel, .player-roster-panel { display: none; }
.fullscreen-player .normal-player-layout { display: none; }
.fullscreen-player .my-hand-panel, .fullscreen-player .player-roster-panel { display: block; }
.candidate-list { display: flex; flex-wrap: wrap; gap: .7rem; margin: .8rem 0; }
.candidate { display: grid; justify-items: center; gap: .3rem; padding: .5rem; border: 1px solid #4d715b; border-radius: .5rem; }
.candidate img { width: 3rem; height: 4.2rem; object-fit: contain; }
.reader-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .45rem; padding: 0; list-style: none; }
.reader-binding-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; padding: .45rem .55rem; border: 1px solid #345b41; border-radius: .55rem; background: #0b241b; }
.reader-binding-row button { flex: none; margin-left: .5rem; min-height: 2.15rem; padding: .35rem .65rem; }
.compact-help { margin: .35rem 0; font-size: .82rem; line-height: 1.35; }
summary { cursor: pointer; margin-bottom: .5rem; }
@media (min-width: 1200px) and (min-height: 850px) {
  .admin-shell { width: min(1800px, calc(100% - 1.5rem)); margin: .65rem auto 1rem; }
  .admin-shell .topbar { min-height: 4.5rem; align-items: center; }
  .admin-shell .topbar h1 { font-size: 2rem; }
  .admin-shell .topbar p { margin: .15rem 0; }
  .admin-grid { display: grid; grid-template-columns: 1.05fr 1.35fr .9fr; gap: .65rem; align-items: start; }
  .admin-grid .panel { padding: .8rem; min-width: 0; }
  .admin-grid h2 { font-size: 1.05rem; margin-bottom: .35rem; }
  .admin-grid .inline-form { margin-top: .45rem; gap: .45rem; }
  .admin-grid input, .admin-grid select, .admin-grid button { min-height: 2.2rem; }
  .admin-status { grid-column: 1 / 3; }
  .admin-table-controls { grid-column: 3; }
  .admin-players { grid-column: 1 / 3; }
  .admin-action { grid-column: 3; }
  .admin-reveal { grid-column: 1; }
  .admin-readers { grid-column: 2 / 4; }
  .admin-status .board { min-height: 4.4rem; padding: .35rem 0; }
  .admin-status .card { width: 3rem; height: 4.2rem; }
  .admin-players .room-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-top: .5rem; }
  .admin-players .room-card { padding: .45rem .6rem; gap: .4rem; }
  .admin-readers .inline-form { margin-top: .35rem; }
  .admin-readers .reader-list { margin: .5rem 0 0; }
}
@media (min-width: 1400px) and (min-height: 800px) {
  .player-shell, .lobby-shell { width: min(1880px, calc(100% - 1.5rem)); margin: .6rem auto 1rem; }
  .fullscreen-player .player-page { height: 100vh; height: 100dvh; overflow: hidden; }
  .fullscreen-player .player-shell { width: 100%; height: 100%; margin: 0; padding: .5rem; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: 3.6rem auto minmax(0, 1fr); grid-template-areas: "header header" "message message" "table controls"; gap: .4rem; align-items: stretch; }
  .fullscreen-player .player-shell > .topbar { grid-area: header; }
  .fullscreen-player .player-shell > #message { grid-area: message; margin: 0; }
  .fullscreen-player .player-shell > .table-panel { grid-area: table; height: 100%; min-height: 0; padding: 1rem 1.4rem; border-width: 6px; border-radius: 2rem; overflow: hidden; display: flex; flex-direction: column; }
  .fullscreen-player .player-shell > .controls { grid-area: controls; display: flex; flex-direction: column; gap: .45rem; margin: 0; min-height: 0; overflow-y: auto; padding-right: .15rem; }
  .fullscreen-player .player-shell .topbar { min-height: 0; align-items: center; padding: 0 .25rem; }
  .fullscreen-player .player-heading { display: flex; align-items: baseline; gap: 1rem; min-width: 0; }
  .fullscreen-player .player-heading h1 { margin: 0; font-size: 1.65rem; white-space: nowrap; }
  .fullscreen-player .player-heading p { margin: 0; white-space: nowrap; }
  .fullscreen-player .player-heading .muted { font-size: .82rem; }
  .fullscreen-player .player-shell .topbar-actions { flex-wrap: nowrap; gap: .4rem; }
  .fullscreen-player .player-shell .topbar-actions :is(button, .link-button) { min-height: 2.25rem; padding: .35rem .7rem; font-size: .84rem; }
  .fullscreen-player .player-shell > #message { padding: .35rem .7rem; }
  .fullscreen-player .player-shell .table-head h2 { margin-bottom: .25rem; }
  .fullscreen-player .player-shell .table-head .eyebrow { margin: .15rem 0; }
  .fullscreen-player .player-shell .board { min-height: 8.8rem; padding: .65rem 0; gap: .65rem; }
  .fullscreen-player .player-shell .board .card { width: 5.6rem; height: 7.84rem; }
  .fullscreen-player .my-hand-panel { width: min(560px, 80%); margin: auto auto .4rem; padding: .85rem 1rem; text-align: center; border: 2px solid #91d5a5; border-radius: 1rem; background: #0b241be8; box-shadow: 0 10px 35px #0005; }
  .fullscreen-player .my-hand-panel h2 { margin: .1rem 0 .55rem; }
  .fullscreen-player .my-hand-panel p { margin: 0 0 .2rem; }
  .fullscreen-player .my-hand { display: flex; justify-content: center; gap: .75rem; }
  .fullscreen-player .my-hand .card { width: 6.6rem; height: 9.24rem; }
  .fullscreen-player .player-roster-panel { flex: none; }
  .fullscreen-player .player-roster-panel .panel-title h2 { margin: 0; }
  .fullscreen-player .player-shell .player-roster { display: grid; grid-template-columns: 1fr; gap: .25rem; margin-top: .5rem; }
  .fullscreen-player .player-shell .player-roster .seat { position: relative; min-height: 3.45rem; padding: .35rem 4.15rem .35rem .45rem; border-radius: .55rem; }
  .fullscreen-player .player-shell .player-roster .seat-title { flex-wrap: nowrap; gap: .35rem; }
  .fullscreen-player .player-shell .player-roster .seat-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fullscreen-player .player-shell .player-roster .avatar { width: 1.65rem; height: 1.65rem; font-size: .9rem; }
  .fullscreen-player .player-shell .player-roster .seat p { margin: .12rem 0 0; font-size: .75rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fullscreen-player .player-shell .player-roster .hole { display: flex; position: absolute; right: .35rem; top: .35rem; gap: .18rem; }
  .fullscreen-player .player-shell .player-roster .hole .card { width: 1.35rem; height: 1.89rem; border-radius: .15rem; }
  .fullscreen-player .player-shell .panel { padding: .85rem; }
  .fullscreen-player .player-shell .inline-form { margin-top: .5rem; gap: .45rem; }
  .fullscreen-player .player-shell .history { max-height: 155px; }
  .spectator-page { height: 100vh; height: 100dvh; overflow: hidden; }
  .spectator-shell { width: 100%; height: 100%; margin: 0; padding: .5rem; display: grid; grid-template-rows: 3.6rem auto minmax(0, 1fr); gap: .4rem; }
  .spectator-shell > .topbar { min-height: 0; align-items: center; padding: 0 .25rem; }
  .spectator-heading { display: flex; align-items: baseline; gap: 1rem; min-width: 0; }
  .spectator-heading h1 { margin: 0; font-size: 1.65rem; white-space: nowrap; }
  .spectator-heading p { margin: 0; white-space: nowrap; }
  .spectator-heading .muted { font-size: .82rem; }
  .spectator-shell .topbar-actions { flex-wrap: nowrap; gap: .4rem; }
  .spectator-shell .topbar-actions :is(button, .link-button) { min-height: 2.25rem; padding: .35rem .7rem; font-size: .84rem; }
  .spectator-shell > #message { margin: 0; padding: .35rem .7rem; }
  .spectator-layout { min-height: 0; grid-template-columns: minmax(0, 1fr) 310px; gap: .5rem; align-items: stretch; }
  .spectator-table { height: 100%; min-height: 0; padding: .7rem 1rem; border-width: 5px; border-radius: 1.7rem; overflow: hidden; }
  .spectator-table .table-head h2 { margin-bottom: .25rem; }
  .spectator-table .table-head .eyebrow { margin: .15rem 0; }
  .spectator-table .board { min-height: 4.8rem; padding: .35rem 0; }
  .spectator-table .board .card { width: 3.3rem; height: 4.62rem; }
  .spectator-seats { gap: .45rem; margin-top: .55rem; }
  .spectator-seats .seat { min-height: 6.4rem; padding: .6rem .75rem; }
  .spectator-seats .seat p { margin: .25rem 0; }
  .spectator-seats .hole .card { width: 2.35rem; height: 3.29rem; }
  .spectator-sidebar { position: static; height: 100%; min-height: 0; overflow: hidden; padding: .75rem; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); align-content: start; }
  .spectator-sidebar h2 { font-size: 1.05rem; margin-bottom: .4rem; }
  .spectator-sidebar .muted { margin: .25rem 0 .6rem; }
  .spectator-players { gap: .4rem; }
  .spectator-person { padding-bottom: .35rem; }
  .spectator-history-title { margin-top: .8rem; }
  .spectator-sidebar .history { max-height: none; min-height: 0; margin: 0; overflow-y: auto; }
  .lobby-shell .panel { padding: 1rem; }
  .lobby-shell .lobby-list { max-height: calc(100vh - 15rem); overflow-y: auto; }
}
.action-bilingual { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; gap: .18rem; }
.action-bilingual small { font-size: .72em; font-weight: 500; }
.history { max-height: 240px; overflow: auto; padding-left: 1.5rem; color: #c8d7c9; }
.history li { margin-bottom: .35rem; }
.message { margin: 1rem 0; padding: .7rem 1rem; border-radius: .5rem; background: #285d39; }
.message.error { background: #733434; }
.message:empty { display: none; }
.card-choice { display: grid; gap: .3rem; }
.field-caption { color: #b9cbbd; font-size: .85rem; }
.pick-button { background: #d9b66f; }
.selected-card { display: flex; align-items: center; gap: .6rem; min-height: 1.8rem; color: #e7efdf; font-size: .9rem; }
.selected-card img { width: 2.2rem; height: 3.08rem; border-radius: .2rem; }
dialog { width: min(900px, calc(100% - 1.5rem)); max-height: min(90vh, 850px); padding: 1.4rem; border: 1px solid #709776; border-radius: 1rem; background: #11251b; color: #f2f6ef; box-shadow: 0 24px 70px #000c; }
dialog:not([open]) { display: none; }
dialog::backdrop { background: #000b; }
.picker-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.card-groups { display: grid; gap: 1.4rem; }
.card-group h3 { margin: .3rem 0 .7rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: .65rem; }
.card-option { display: grid; justify-items: center; gap: .35rem; padding: .4rem; height: auto; background: #234331; color: #eef5eb; border: 2px solid transparent; }
.card-option:hover:not(:disabled), .card-option:focus-visible { border-color: #d9b66f; }
.card-option img { width: 100%; max-width: 80px; aspect-ratio: 5 / 7; object-fit: contain; border-radius: .2rem; }
.card-option span { font-size: .72rem; line-height: 1.2; text-align: center; }
.card-option:disabled { opacity: .25; }
@media (max-width: 1050px) { .players { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .spectator-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 850px) { .spectator-layout { grid-template-columns: 1fr; } .spectator-sidebar { position: static; } }
@media (max-width: 650px) { .shell { width: min(100% - 1rem, 1200px); margin-top: 1rem; } .table-panel { padding: 1rem; border-radius: 1.5rem; } .board .card { width: 2.5rem; height: 3.5rem; } .players { grid-template-columns: 1fr; } .controls { grid-template-columns: 1fr; } .topbar { display: block; } }
@media (max-width: 650px) { .spectator-seats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .live-status-dot { animation: none; } }