/* Shared table composition and visual system.
   Reusable card geometry and interaction contracts live in the layout layer. */
:root {
  --felt-deep: #0b1411;
  --felt: #13251d;
  --felt-light: #1a372b;
  --paper: #18251f;
  --ink: #eaf1e8;
  --gold: #c7ef87;
  --gold-dark: #355044;
  --control-surface: #1c3026;
  --control-border: #35483e;
  --control-text: #ecf3eb;
  --control-muted: #a5b8ab;
  --control-gold: #c7ef87;
  --control-reaction: #8bddd1;
  --control-error: #ffabac;
  --surface: #122019;
  --line: #ffffff12;
  --muted: #a0b3a5;
  --accent: #c7ef87;
}

body { background: radial-gradient(ellipse at 50% 30%, #18332666, transparent 65%), #0b1411; color: #ecf3eb; }
body::before { display: none; }
button { letter-spacing: -.02em; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.app-shell { max-width: 1360px; }
.game-toolbar { border-bottom: 1px solid var(--line); }
.game-brand { display: inline-flex; align-items: center; gap: 10px; color: #f3f7ef; font-size: 19px; font-weight: 800; letter-spacing: -.06em; }
.brand-mark { position: relative; display: inline-block; flex-shrink: 0; width: 30px; height: 29px; }
.brand-mark i { position: absolute; top: 3px; left: 1px; display: grid; place-items: center; width: 19px; height: 25px; border: 1px solid #f6f8ef; border-radius: 4px; background: #eef4e8; color: #d75463; font-size: 12px; font-style: normal; transform: rotate(-16deg); }
.brand-mark i + i { left: 10px; transform: rotate(12deg); box-shadow: -2px 1px 3px #0b141144; }
.round-label { color: #97ab9d; font-weight: 500; font-variant-numeric: tabular-nums; }
.game-settings-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 66px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: #bdcec0; font-weight: 550; }
.game-settings-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
#action-announcement { color: #abc5b4; font-weight: 500; letter-spacing: -.02em; }
#action-announcement[data-kind="declaration"], #action-announcement[data-kind="ting"] { color: var(--accent); }

/* Seats are people around a table, not panels stacked inside panels. */
.player, .player.active { min-height: 0; overflow: visible; border: 0; padding: 6px 2px; border-radius: 0; background: transparent; box-shadow: none; gap: 6px; }
.player.seat-1, .player.seat-3 { min-height: 0; }
.player.seat-2 { width: auto; min-width: 132px; min-height: 60px; gap: 12px; padding: 4px; }
.avatar-frame, .player.seat-1 .avatar-frame, .player.seat-3 .avatar-frame { width: 48px; height: 48px; border: 0; border-radius: 50%; background: #24372d; box-shadow: 0 3px 10px #0003; }
.avatar-frame img { filter: none; }
.player:has(.current-turn-tag) .avatar-frame { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 7px #c7ef8710; }
.player strong { color: #e9f2e9; font-size: 13px; font-weight: 650; line-height: 1.3; }
.player small, .player span { color: #9aafa1; font-size: 11px; font-weight: 500; line-height: 1.4; }
.player-card-copy { gap: 2px; }
.current-turn-tag, .player-one-hand-title .current-turn-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 3px 7px; border: 0; border-radius: 20px; background: #c7ef8714; color: var(--accent); font-size: 10px; font-weight: 650; box-shadow: none; }
.current-turn-tag:not(:empty)::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.current-turn-tag:empty { display: none; }
.player-status-tags em, .player-one-hand-title em, .ju-tag, .declaration-tag { border: 1px solid var(--tag-border, #53675b); border-radius: 5px; padding: 3px 6px; background: var(--tag-bg, #24382c); color: var(--tag-text, #e1eadb); font-size: 10px; font-weight: 650; font-style: normal; box-shadow: none; }
/* Color describes the public role; the text still identifies it without color. */
.pig-tag { --tag-bg: #542639; --tag-border: #c76e94; --tag-text: #ffcfdf; }
.pig-declared-tag { --tag-bg: #752d4e; --tag-border: #ef9dc3; --tag-text: #ffe5ef; }
.ju-tag { --tag-bg: #664018; --tag-border: #da994a; --tag-text: #ffe0ae; }
.ju-team-tag { --tag-bg: #343020; --tag-border: #a78d52; --tag-text: #eddda7; }
.liang-tag { --tag-bg: #194867; --tag-border: #6bb7e3; --tag-text: #ccecff; }
.liang-team-tag { --tag-bg: #183b3b; --tag-border: #65aaa8; --tag-text: #bce8e2; }
.red-ten-tag { --tag-bg: #572f2b; --tag-border: #c8796e; --tag-text: #ffd4ca; }
.red-team-tag { --tag-bg: #3c2d2a; --tag-border: #a17269; --tag-text: #ecc8c0; }
.ting-tag { --tag-bg: #493161; --tag-border: #b697da; --tag-text: #eddbff; }
.ting-team-tag { --tag-bg: #30283e; --tag-border: #8974a9; --tag-text: #d6c8ec; }
.seat-hand, .bot-hand { border: 0; background: transparent; box-shadow: none; }
.hand-seat-1, .hand-seat-3 { min-height: 58px; }
.bot-hand .seat-hand-cards .card { border: 1px solid #688f74; border-radius: 4px; background: #173e2d url("assets/card-back.svg") center / cover; box-shadow: 0 2px 5px #0006; }

/* One shared playing surface, with seats on its perimeter and a separate HUD. */
.board { position: relative; isolation: isolate; width: min(100%, 1040px); margin-inline: auto; grid-template-columns: 64px minmax(0, 1fr) 64px; grid-template-rows: 72px minmax(220px, auto) 44px auto; grid-template-areas: "top top top" "left center right" "status status status" "tip tip tip"; gap: 6px; }
.table-surface { grid-column: 1 / -1; grid-row: 1 / 3; z-index: -1; min-width: 0; margin: 32px 4px 0; border: 6px solid #283d32; border-radius: 46% / 28%; background: radial-gradient(ellipse at 50% 35%, #28533f, #173c2b 75%); box-shadow: inset 0 0 0 1px #b7d6bc24, inset 0 12px 32px #081a1245, 0 10px 25px #0003; pointer-events: none; }
.bot-three-zone, .side-seat-zone { z-index: 3; }
.side-seat-main { gap: 0; }
.top-seat-main { padding-inline: 9px; border-radius: 16px; background: #111f19; gap: 2px; }
.game-grid { min-height: 220px; }
.table-panel { height: 100%; min-height: 220px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #d5e5d9; box-shadow: none; overflow: visible; }
.table-panel::before { display: none; }
.table-layout { padding: 54px 0 12px; }
.table-state { display: flex; flex-direction: column; }
.table-cards { display: flex; flex: 1; justify-content: center; min-height: 150px; }
.table-pile { min-height: 150px; }
.table-pile.empty-pile { flex-direction: column; justify-content: center; color: #9bbdaa; font-size: 12px; font-weight: 500; }
.table-pile.empty-pile::before { content: "연변훙쓰"; font-size: 18px; letter-spacing: .12em; font-weight: 700; color: #c2dec22b; transform: translateY(-12px); }
.board-footer { grid-area: status; display: grid; grid-template-columns: 48px minmax(0, 1fr) 60px; align-items: center; gap: 6px; min-height: 44px; padding-inline: 8px; }
.table-meta { grid-area: 1 / 1; min-height: 0; border: 0; padding: 0; margin: 0; color: #a9c5b4; font-size: 12px; }
.table-meta strong { border: 0; border-radius: 5px; padding: 4px 8px; background: #d0f29b12; color: #d5ecb4; box-shadow: none; font-size: 11px; font-weight: 650; }
.table-status { grid-area: 1 / 2; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; }
#table-label { min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c2d4c0; font-size: 11px; }
#table-label:not([hidden])::after { content: "·"; margin-left: 7px; color: #799e84; }
.turn-label { min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #adc4b5; font-size: 12px; font-weight: 550; white-space: nowrap; }
.turn-label[data-flow-state="play"], .turn-label[data-flow-state="declare"], .turn-label[data-flow-state="response"] { background: transparent; color: #dcf3b8; }
.turn-label[data-flow-state="reaction"] { background: transparent; color: #b6f1e1; }
.history-toggle { grid-area: 1 / 3; display: inline-flex; justify-content: center; align-items: center; gap: 5px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: #abc2ad; font-size: 11px; }
.history-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.history-toggle:hover:not(:disabled) { background: #ffffff08; }
.history-dialog { width: min(90vw, 400px); padding: 22px; }
.history-dialog .panel-kicker { color: #a6ba97; font-size: 11px; text-align: left; }
.history-dialog h2 { margin: 5px 0 18px; font-size: 22px; letter-spacing: -.04em; }
.history-dialog ol { max-height: min(50dvh, 360px); overflow: auto; padding: 0; margin: 0; list-style: none; }
.history-dialog li { padding: 11px 0; border-top: 1px solid #ffffff0a; color: #b8ccba; font-size: 13px; line-height: 1.5; }
.history-dialog li:first-child { color: #e0edcf; }
.history-dialog .settings-close { width: 100%; margin-top: 18px; min-height: 44px; }
.recent-play-label { border: 0; padding: 3px 6px; border-radius: 5px; background: #0b1b15d9; color: #bcd4c3; font-size: 10px; font-weight: 600; }
.inline-log { border-color: #ffffff0b; background: #091d151f; }
.inline-log > .panel-kicker { color: #8caa97; font-size: 10px; font-weight: 500; text-align: left; letter-spacing: .02em; }
.inline-log ol { padding-left: 0; list-style: none; color: #a3bdac; font-size: 11px; scrollbar-width: thin; scrollbar-color: #5f88736b transparent; }
.inline-log li + li { margin-top: 3px; }
.inline-log li.log-declaration, .inline-log li.log-ting, .inline-log li.log-interrupt, .inline-log li.log-multiplier, .inline-log li.log-result { color: #d5e5d4; font-weight: 550; }
.inline-log li::first-letter { color: inherit; }
.rule-tip { grid-area: tip; position: static; min-height: 44px; margin: 0 8px; border: 1px solid #537c6344; border-radius: 10px; background: #203e2d; color: #d3e7c9; }
.rule-tip button { color: #ddedc5; font-weight: 600; }

.hand-panel { border: 1px solid #2c4435; border-radius: 22px; background: #111f17; color: #e2eddf; box-shadow: 0 8px 24px #0002; }
.hand-panel.my-turn { border-color: #bedb873d; box-shadow: inset 0 1px 0 #d6ed9e09; }
.hand-panel[data-flow-state="reaction"] { border-color: #83c8b753; }
#selection-count { color: #afc0b0; font-size: 12px; font-weight: 500; }
.hand-panel[data-selection-count]:not([data-selection-count="0"]) #selection-count { color: #dff2b6; }
.clear-selection { color: #b3c6b3; font-weight: 500; }
.hand .card, .table-play-card { border: 1px solid #d8e1d5; background: #f6f8f0; box-shadow: -1px 3px 6px #06100955; }
.hand .card { border-radius: 8px; }
.card-corner { background: #f6f8f0; }
.card.red, .table-play-card.red { color: #ca4357; }
.card.black, .table-play-card.black { color: #23392f; }
.hand .card.selected, .hand .card[aria-pressed="true"] { border-color: #c7ef87; box-shadow: 0 0 0 2px #c7ef87, -1px 5px 12px #0005; }
.hand .card.reaction-candidate { border-color: #91ded0; box-shadow: 0 0 0 2px #91ded0, 0 4px 10px #0004; }
.court-art-svg { filter: saturate(.72); }
.seat-actions { border-color: #ffffff0c; }
.seat-action-hint, .seat-actions[data-action-state="play"] .seat-action-hint { color: #b4c8b4; font-size: 12px; font-weight: 450; }
.seat-action-hint.error, .seat-actions[data-action-state="blocked"] .seat-action-hint { color: #f2a7a5; }
.seat-action-buttons button { border: 1px solid #3b5140; border-radius: 12px; background: #22372a; color: #cfddcc; box-shadow: none; font-size: 14px; font-weight: 650; }
.seat-action-buttons button.primary { border-color: #c7ef87; background: #c7ef87; color: #20351b; box-shadow: 0 3px 10px #bed98c12; }
.seat-actions[data-action-state="reaction"] button.primary { border-color: #9bdfcf; background: #9bdfcf; color: #11372b; }
.seat-action-buttons button:disabled { border-color: #344239; background: #1a2a20; color: #7f9584; box-shadow: none; }
.seat-action-buttons button:not(:disabled):active { transform: translateY(1px); }
.reaction-meter { border-radius: 3px; }

/* The same calm surfaces carry through entry, settings and settlement. */
dialog { border: 1px solid #394b3b; border-radius: 24px; background: #142019; color: #edf3e7; box-shadow: 0 28px 90px #0008; }
dialog::backdrop { background: #050d09c9; backdrop-filter: blur(9px); }
.mode-dialog { width: min(92vw, 420px); padding: 28px; text-align: center; }
.mode-art { position: relative; width: 132px; height: 114px; margin: 0 auto 10px; }
.welcome-card { position: absolute; top: 8px; left: 21px; display: flex; flex-direction: column; align-items: flex-start; width: 63px; height: 88px; padding: 10px; border-radius: 9px; background: #edf4df; color: #d45466; box-shadow: 0 12px 20px #0003; transform: rotate(-17deg); }
.welcome-card b { font-size: 20px; line-height: 1; letter-spacing: -.06em; }
.welcome-card i { font-size: 31px; font-style: normal; align-self: center; }
.welcome-card + .welcome-card { top: 15px; left: 58px; transform: rotate(13deg); background: #fcfcf3; }
.mode-eyebrow { color: #b9db94; font-size: 12px; font-weight: 650; letter-spacing: .05em; margin-bottom: 8px; }
.mode-dialog h2 { color: #f4f7ef; font-size: 25px; line-height: 1.3; letter-spacing: -.05em; font-weight: 750; }
.mode-description { margin-top: 10px; color: #a2b19f; font-size: 13px; line-height: 1.65; }
.mode-options { grid-template-columns: 1fr; margin-top: 24px; gap: 9px; }
.mode-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; border: 1px solid #40543b; border-radius: 13px; padding: 14px 16px; background: #1a2d20; text-align: left; box-shadow: none; }
.mode-option.selected { border-color: #b9da7b80; background: #b9da7b0b; box-shadow: none; }
.mode-option strong { color: #ebf3de; font-size: 15px; font-weight: 650; }
.mode-option span { margin: 0; }
.mode-option-copy > span { margin-top: 5px; color: #a3b29d; font-size: 12px; }
.mode-option .mode-option-state { flex-shrink: 0; color: #d1e8aa; font-size: 10px; font-weight: 600; }
.mode-option:disabled { opacity: 1; border: 1px solid #ffffff0c; background: #ffffff02; }
.mode-option:disabled strong, .mode-option:disabled span { color: #859280; }
.mode-note { display: none; }
.mode-start, .resume-primary, .result-actions button { min-height: 48px; border: 0; border-radius: 12px; background: #c7ef87; color: #20351b; font-size: 15px; font-weight: 700; box-shadow: none; }
.mode-start::after { content: "→"; margin-left: 12px; }
.mode-settings-open { min-height: 44px; margin-top: 10px; border: 0; background: transparent; color: #b2c1a9; font-size: 12px; font-weight: 500; }
.resume-panel { border-color: #49623d; border-radius: 12px; padding: 12px; background: #20311e; gap: 8px; }
.resume-panel strong { color: #dbeebc; font-size: 13px; }
.resume-panel p { color: #b4c4a6; font-size: 12px; }
.resume-secondary, .settings-reset, .settings-close, .settings-reference { border: 1px solid #3b4e36; border-radius: 10px; background: #21311e; color: #d5e1ca; font-size: 13px; font-weight: 550; }
.settings-dialog, .rules-reference-dialog { padding: 24px; }
.settings-dialog h2, .rules-reference-dialog h2 { color: #f0f5e8; font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.settings-check { flex-direction: row-reverse; justify-content: space-between; min-height: 56px; gap: 12px; border-color: #ffffff0b; color: #c9d6bf; font-size: 14px; }
.settings-check input { appearance: none; position: relative; flex-shrink: 0; width: 40px; height: 24px; border: 1px solid #536149; border-radius: 20px; background: #293821; cursor: pointer; }
.settings-check input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #b7c4a8; }
.settings-check input:checked { border-color: #c7ef87; background: #c7ef87; }
.settings-check input:checked::before { left: 19px; background: #21351b; }
.rules-reference-dialog .panel-kicker { color: #a7b89b; text-align: left; font-size: 11px; }
.rules-reference-item { border-left: 2px solid #90ad68; padding: 9px 12px; border-radius: 0 8px 8px 0; background: #ffffff03; }
.rules-reference-item h3 { color: #e1ebd4; font-size: 14px; }
.rules-reference-item p { color: #b4c3a7; line-height: 1.6; font-size: 13px; }
.result-dialog { color-scheme: dark; padding: 24px; }
.result-header .panel-kicker { color: #a6ba97; font-size: 11px; letter-spacing: .04em; font-weight: 550; }
.result-header h2 { color: #eef5e5; font-size: 27px; font-weight: 700; letter-spacing: -.04em; }
.result-summary { padding: 22px 0 18px; gap: 7px; }
#result-change, .result-dialog[data-outcome="win"] #result-change { color: #c7ef87; font-size: 52px; font-weight: 650; }
.result-dialog[data-outcome="loss"] #result-change { color: #f8a9b5; }
.result-dialog[data-outcome="tie"] #result-change { color: #c8d7bf; }
#result-total { color: #adc0a0; font-size: 12px; }
.result-message { color: #c2d3b6; font-size: 13px; line-height: 1.6; }
.result-section { border-color: #ffffff0c; }
.result-section > .panel-kicker { color: #96ac88; font-size: 11px; font-weight: 500; }
.result-teams, .result-declarations { color: #d3dfca; font-size: 13px; }
.result-scores li { padding: 9px; font-size: 13px; }
.result-scores .own-result { background: #bdd98f0d; font-weight: 600; }
.result-scores small { color: #9fb191; font-size: 11px; }
.gain { color: #c7ef87; }
.loss { color: #f5a3ad; }
.result-actions { background: #142019; }

@media (hover: hover) {
  .game-settings-toggle:hover, .clear-selection:not(:disabled):hover { background: #ffffff07; }
  .seat-action-buttons button.secondary:not(:disabled):hover { background: #2b4432; }
  .mode-start:hover, .resume-primary:hover, .result-actions button:hover { background: #d5f6a0; }
}
@media (min-width: 768px) {
  .event-strip { margin-left: 270px; }
  .board { grid-template-columns: minmax(96px, .7fr) minmax(0, 3fr) minmax(96px, .7fr); }
  .table-surface { margin-inline: 22px; border-width: 8px; border-radius: 42% / 32%; }
  .hand-panel { padding-inline: 18px; }
}
@media (max-width: 767px) {
  .game-brand { gap: 8px; font-size: 17px; }
  .round-label { font-size: 10px; }
  .game-toolbar { gap: 9px; }
  .player.seat-2 { min-width: 118px; }
  .avatar-frame, .player.seat-1 .avatar-frame, .player.seat-3 .avatar-frame { width: 44px; height: 44px; }
  .player strong { font-size: 12px; }
  .player small, .player span { font-size: 10px; }
  .player-status-tags em { padding-inline: 4px; font-size: 9px; }
  .hand-panel { border-radius: 19px; }
  .mode-dialog { padding: 22px; }
  .mode-dialog h2 { font-size: 23px; }
  .mode-art { height: 103px; }
  .result-dialog { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  button, .hand .card, .reaction-meter span { transition: none; }
}
html[data-reduced-motion="true"] button,
html[data-reduced-motion="true"] .hand .card,
html[data-reduced-motion="true"] .reaction-meter span { transition: none; }