:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #f7f3e8;
  background: #0d201d;
  --felt: #173c35;
  --felt-deep: #102d28;
  --paper-2: #fffaf0;
  --ink: #20221f;
  --muted: #a9bbb5;
  --line: rgb(255 255 255 / 14%);
  --gold: #ddb96c;
  --red: #b94a43;
  --shadow: 0 18px 50px rgb(0 0 0 / 32%);
  --table-info-inset: 11px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100dvh; background: radial-gradient(circle at 50% 12%, #28584d 0, #102823 50%, #0a1917 100%); }
button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .35; }
[hidden] { display: none !important; }

.app-shell { min-height: 100dvh; }
.setup-screen { width: min(100%, 520px); min-height: 100dvh; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: 1fr auto; gap: 10px; }
.setup-content { min-width: 0; display: grid; align-content: center; gap: 10px; }
.home-prototype-version { justify-self: center; text-align: center; }
.setup-help { min-height: 44px; width: 100%; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: #d2e0d9; padding: 8px 12px; text-align: start; font-size: 13px; }
.setup-help:hover { border-color: #a9bbb5; background: rgb(255 255 255 / 4%); }
.setup-help span { float: right; color: var(--muted); }
.setup-help-area h2 { font-size: 12px; font-weight: 500; color: var(--muted); margin: 0 0 8px; }
.setup-help-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#view-last-result { margin-bottom: 8px; }
#home-help-status { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; }
.continue-match-area { padding: 10px 16px; border: 1px solid rgb(221 185 108 / 28%); border-radius: 24px; background: rgb(10 31 27 / 72%); text-align: center; }
.continue-match-area h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.continue-match-area small { display: block; color: var(--muted); font-size: 12px; }
.continue-match-area .setup-start { margin-top: 10px; }
.setup-start.new-match-secondary { margin-top: 8px; background: transparent; color: inherit; border: 1px solid var(--line); box-shadow: none; }
.match-confirm { padding: 0; border: 0; background: transparent; color: var(--text); width: min(calc(100% - 36px), 350px); }
.match-confirm::backdrop { background: rgb(3 14 12 / 76%); }
.match-confirm .modal-card { width: 100%; }
.match-confirm .direction-actions button { min-height: 44px; }
.drawer #abandon-match { margin-top: 8px; }
.setup-preference-row { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.sfx-switch { min-height: 44px; min-width: 76px; display: flex; align-items: center; justify-content: end; gap: 8px; border: 0; background: transparent; color: #d2e0d9; padding: 0; }
.sfx-switch i { width: 34px; height: 20px; padding: 3px; border-radius: 12px; background: #33544c; }
.sfx-switch i::before { content: ""; display: block; width: 14px; height: 14px; background: #c2d1ca; border-radius: 50%; }
.sfx-switch[aria-checked="true"] i { background: #6c7145; }
.sfx-switch[aria-checked="true"] i::before { transform: translateX(14px); background: #f1d999; }
.home-development { border-top: 1px solid var(--line); color: #9bc6ba; font-size: 12px; }
.home-development summary { min-height: 44px; padding-block: 13px; cursor: pointer; }
.home-development label { display: grid; gap: 6px; }
.home-development input { min-height: 44px; border-radius: 11px; border: 1px solid var(--line); background: rgb(255 255 255 / 7%); color: #fff; padding: 9px 11px; width: 100%; }
@media (max-height: 960px) {
  /* Metadata owns a safe-area row; content scrolls without covering actions. */
  .setup-screen { height: 100dvh; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .setup-content { min-height: 0; overflow-y: auto; align-content: start; }
}
.rules-panel { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: linear-gradient(155deg, #123b32, #051e19); color: var(--ivory, #f3e7c8); overflow: hidden; }
.rules-panel[open] { display: flex; flex-direction: column; }
.rules-panel::backdrop { background: rgb(0 12 9 / 85%); }
.rules-header, .rules-scroll { box-sizing: border-box; width: 100%; max-width: 720px; margin-inline: auto; }
.rules-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 20px 12px; border-bottom: 1px solid rgb(204 171 91 / 25%); }
.rules-header h2 { margin: 0; font-size: 22px; }
.rules-header button { min-width: 44px; min-height: 44px; font-size: 26px; padding: 0; color: #f3e7c8; background: rgb(3 25 20 / 60%); border: 1px solid rgb(204 171 91 / 32%); border-radius: 12px; }
.rules-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 20px max(24px, env(safe-area-inset-bottom)); font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.rules-scroll h3 { margin: 10px 0 14px; font-size: 18px; color: #e3bd69; }
.rules-scroll h4 { margin: 18px 0 4px; font-size: 15px; }
.rules-scroll p { margin: 0 0 12px; color: #cadcd3; }
.rules-scroll .rules-tip { font-size: 12px; color: #9ab6aa; }
.rules-card-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 24px; pointer-events: none; }
.rules-card-examples figure { min-width: 0; margin: 0; text-align: center; }
.rules-card-examples .game-card { display: inline-block; vertical-align: top; }
.rules-card-examples figcaption { margin-top: 10px; font-size: 13px; }
.rules-card-examples figcaption strong, .rules-function-effect { display: block; }
.rules-function-effect { margin: 3px 0 6px; color: #e3bd69; font-weight: 500; }
.rules-card-examples figcaption p { text-align: start; }
.rules-scroll .rules-intro { color: #f3e7c8; font-weight: 500; }
.rules-advanced { border-inline-start: 2px solid rgb(204 171 91 / 28%); padding-inline-start: 12px; margin-block: 18px; }
.rules-advanced h4 { margin-top: 0; }
.rules-advanced h4 span { display: block; font-size: 11px; color: #b7c9be; font-weight: 400; margin-bottom: 3px; }
.rules-section { border-top: 1px solid rgb(204 171 91 / 22%); }
.rules-section summary { min-height: 44px; padding-block: 11px; box-sizing: border-box; cursor: pointer; font-size: 15px; color: #f3e7c8; }
.rules-section p { padding-inline: 2px; }
.rules-version { margin-top: 24px; text-align: center; }
.setup-brand { text-align: center; }
.setup-brand h1 { margin: 4px 0 2px; font: 700 46px/1.05 ui-serif, "Songti SC", serif; letter-spacing: .14em; text-indent: .14em; }
.setup-brand > p:last-child { margin: 4px 0 0; color: var(--muted); }
.eyebrow { margin: 0; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.setup-card { padding: 14px; border: 1px solid var(--line); border-radius: 24px; background: rgb(10 31 27 / 72%); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.setup-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.setup-title span { font-weight: 700; font-size: 18px; }
.setup-title small { color: var(--muted); font-size: 11px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.settings-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.settings-grid input, .settings-grid select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; color: #fff; background: rgb(255 255 255 / 7%); font-size: 13px; }
.settings-grid option { color: #111; }
.settings-grid label small { color: #8fa89e; font-size: 11px; line-height: 1.5; }
.wide-field { grid-column: 1 / -1; }
.setup-start { width: 100%; min-height: 50px; margin-top: 12px; }
.primary { border: 1px solid #e7ca8c; border-radius: 12px; color: #1a231f; background: linear-gradient(145deg, #f1d999, #c99d49); font-weight: 800; }
.dev-entry { width: 100%; min-height: 44px; margin-top: 9px; border: 1px dashed rgb(139 190 176 / 38%); border-radius: 11px; color: #9bc6ba; background: rgb(4 28 24 / 52%); font-size: 10px; letter-spacing: .12em; }

.game-screen { position: relative; width: min(100%, 460px); min-height: 100dvh; height: 100dvh; margin: 0 auto; overflow: hidden; background: radial-gradient(ellipse at 50% 36%, #285a4e 0, var(--felt) 43%, var(--felt-deep) 100%); box-shadow: 0 0 70px rgb(0 0 0 / 38%); }
.game-screen::before { content: ""; position: absolute; inset: 58px 13px 225px; border: 1px solid rgb(226 195 127 / 16%); border-radius: 46% 46% 39% 39% / 30% 30% 52% 52%; pointer-events: none; }
.mobile-hud { position: absolute; inset: 0 0 auto; z-index: 20; height: calc(56px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) 12px 8px; display: grid; grid-template-columns: 48px 1fr 70px; align-items: center; background: linear-gradient(#0b211ed9, #0b211e00); }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: #fff; background: rgb(5 18 16 / 52%); font-size: 20px; }
.hud-round { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.hud-center { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.hud-title { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.prototype-version { max-width: 100%; color: rgb(172 196 188 / 72%); font-size: 9px; font-weight: 400; line-height: 11px; white-space: nowrap; }
.hud-deck { min-height: 38px; display: flex; gap: 7px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: rgb(5 18 16 / 48%); font-size: 13px; }
.deck-icon { color: var(--gold); font-size: 18px; transform: rotate(90deg); }

.table-shell { position: absolute; inset: calc(50px + env(safe-area-inset-top)) 0 215px; }
.opponents-area { position: absolute; inset: 0; }
.opponent-seat { position: absolute; z-index: 5; width: 92px; min-height: 55px; padding: 7px 7px 6px; border: 1px solid var(--line); border-radius: 13px; color: #f5f4ee; background: rgb(8 29 25 / 76%); box-shadow: 0 7px 16px rgb(0 0 0 / 20%); text-align: center; transition: border-color .18s, transform .18s, opacity .18s; }
.opponents-area.compact .opponent-seat { width: 76px; min-height: 50px; padding: 6px 5px 5px; }
.opponent-seat.current-player { border-color: #f5ce72; transform: scale(1.04); box-shadow: 0 0 0 2px rgb(245 206 114 / 18%), 0 8px 18px rgb(0 0 0 / 24%); }
.opponent-seat.exited-player { opacity: .65; filter: grayscale(.35); }
.seat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; }
.seat-stats { margin-top: 3px; display: flex; justify-content: center; gap: 7px; color: var(--muted); font-size: 10px; }
.seat-badges { position: absolute; top: -8px; left: 50%; display: flex; gap: 3px; transform: translateX(-50%); }
.seat-badge { padding: 2px 5px; border-radius: 999px; color: #241b09; background: var(--gold); font-size: 8px; font-weight: 900; white-space: nowrap; }
.seat-badge.turn { color: #fff; background: #b76c31; }
.seat-badge.out { color: #fff; background: #754742; }
.seat-left-middle { left: 8px; top: 39%; transform-origin: left center; }
.seat-left-top { left: 28px; top: 11%; }
.seat-top { left: 50%; top: 3%; transform: translateX(-50%); }
.seat-right-top { right: 28px; top: 11%; }
.seat-right-middle { right: 8px; top: 39%; transform-origin: right center; }
.seat-top.current-player { transform: translateX(-50%) scale(1.04); }
.arena { position: absolute; z-index: 4; left: 50%; top: 53%; width: min(74vw, 288px); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.arena-status-row { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.direction-indicator { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; color: #c8d9d4; font-size: 10px; white-space: nowrap; }
.direction-indicator b { overflow: hidden; text-overflow: ellipsis; }
.direction-arrow { color: #f3cb72; font-size: 17px; line-height: 1; }
.phase-banner { min-width: 0; max-width: 128px; overflow: hidden; border: 1px solid rgb(238 196 101 / 42%); border-radius: 999px; padding: 3px 8px; color: #ffdc88; background: rgb(65 41 12 / 64%); font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.phase-banner.normal { color: #bcd0ca; border-color: rgb(191 216 207 / 22%); background: rgb(15 48 42 / 56%); }
.phase-banner.endgame { color: #ffdc88; border-color: rgb(238 196 101 / 55%); }
.current-turn { min-width: 0; overflow: hidden; color: #eff7f4; font-size: 11px; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.target-area { width: 100%; min-width: 0; min-height: 105px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 9px 12px; border: 1px solid rgb(241 211 148 / 34%); border-radius: 18px; background: linear-gradient(145deg, rgb(6 27 23 / 86%), rgb(10 37 32 / 72%)); box-shadow: 0 13px 30px rgb(0 0 0 / 25%); text-align: center; }
.target-eyebrow { max-width: 100%; overflow: hidden; color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.target-title { max-width: 100%; overflow: hidden; font-size: 15px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.target-owner { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.target-cards { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.free-target { max-width: 100%; min-height: 32px; display: grid; place-items: center; overflow: hidden; color: #f8e7bb; font: 700 14px/1.2 ui-serif, "Songti SC", serif; text-overflow: ellipsis; white-space: nowrap; }
.risk-area { position: relative; width: 100%; display: grid; grid-template-columns: minmax(88px, auto) minmax(54px, 1fr) auto; grid-template-rows: auto auto; align-items: center; padding: 7px var(--table-info-inset); border-radius: 12px; color: #f4e8c8; background: rgb(3 20 17 / 53%); }
.risk-label { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; font-size: 9px; color: #b9ccc5; text-overflow: ellipsis; white-space: nowrap; }
.risk-total { grid-column: 1; grid-row: 2; font-size: 20px; font-weight: 900; line-height: 1; }
.table-feedback-zone { position: relative; grid-column: 2; grid-row: 1 / span 2; align-self: stretch; min-width: 0; pointer-events: none; }
.risk-formula { grid-column: 3; grid-row: 1 / span 2; color: #d8bd7e; font-size: 11px; white-space: nowrap; }
.risk-area.empty .risk-label, .risk-area.empty .risk-total, .risk-area.empty .risk-formula { opacity: .55; }
.recent-actions { width: 100%; height: 72px; min-height: 72px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 7px; overflow: hidden; border: 1px solid rgb(255 255 255 / 8%); border-radius: 11px; padding: 6px var(--table-info-inset); color: #c9d9d4; background: rgb(2 22 18 / 52%); text-align: left; }
.recent-actions-heading { min-width: 0; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgb(217 174 91 / 13%); }
.recent-actions-heading b { color: #e3c579; font: 800 10px/1.2 "Songti SC", serif; }
.recent-actions-heading small { margin-top: 4px; color: #78998f; font-size: 7px; white-space: nowrap; }
.recent-actions ol, .action-popover ol { min-width: 0; margin: 0; padding: 0; list-style: none; }
.recent-actions li { height: 18px; overflow: hidden; color: #b5c9c2; font-size: 8px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.recent-actions li::before { content: attr(data-step); display: inline-block; width: 15px; color: #688b80; font-size: 7px; }
.recent-actions.empty ol::before { content: "尚无行动记录"; color: #708f86; font-size: 8px; line-height: 54px; }

.human-dock { position: absolute; z-index: 15; inset: auto 0 0; min-height: 220px; padding: 8px 12px max(10px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgb(11 31 27 / 8%), rgb(8 24 21 / 92%) 18%, #081916 100%); }
.human-meta { min-height: 24px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #c8d7d2; font-size: 10px; }
.human-meta strong { color: #fff; font-size: 12px; }
.human-meta .dealer { padding: 2px 5px; border-radius: 999px; color: #251a06; background: var(--gold); font-size: 8px; font-weight: 900; }
.hand-area { --hand-overlap: -15px; height: 103px; display: flex; align-items: flex-end; justify-content: center; padding: 16px 0 3px; }
.hand-card { transition: transform .13s ease, border-color .13s; }
.hand-card + .hand-card { margin-left: var(--hand-overlap); }
.hand-card small { max-width: 100%; overflow: hidden; color: #727069; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.game-card.red-card { color: var(--red); }
.hand-card.selected { z-index: 12 !important; transform: translateY(-14px); border: 2px solid #e6bd60; padding: 6px 5px 5px; box-shadow: -3px 7px 12px rgb(0 0 0 / 30%); }
.turn-prompt { height: 20px; display: grid; place-items: center; color: #cfddd8; font-size: 10px; }
.controls { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 8px; }
.action-button { min-height: 48px; border: 1px solid var(--line); border-radius: 13px; color: #fff; background: rgb(255 255 255 / 8%); font-weight: 900; }
.action-button.collect { color: #f0c6bd; border-color: rgb(212 118 98 / 36%); }
.action-button.hint { color: #d9e6e1; }
.action-button.play { border-color: #e4c374; color: #1c241f; background: linear-gradient(145deg, #f0d28a, #c7963e); }
.controls.waiting .action-button { visibility: hidden; }
.message { position: absolute; z-index: 18; left: 50%; bottom: 220px; max-width: calc(100% - 40px); transform: translate(-50%, -16px); border-radius: 999px; padding: 5px 11px; font-size: 9px; white-space: nowrap; pointer-events: none; }
.message.info { color: #cfe1db; background: rgb(8 27 23 / 72%); }
.message.error { color: #ffe4df; background: rgb(121 38 31 / 90%); }
.message.success { color: #f6dfac; background: rgb(74 54 18 / 86%); }
.effect-toast { position: absolute; z-index: 2; left: 50%; top: 50%; width: max-content; max-width: calc(100% - 4px); overflow: hidden; transform: translate(-50%, -50%); border: 1px solid rgb(255 218 131 / 48%); border-radius: 999px; padding: 4px 8px; color: #fff0c8; background: rgb(22 39 31 / 94%); box-shadow: 0 3px 10px rgb(0 0 0 / 24%); font-size: 9px; line-height: 1.15; text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; animation: toast-in .18s ease-out; }
.effect-toast.nine { border-color: rgb(222 173 230 / 60%); color: #f5dcf7; background: rgb(57 25 61 / 91%); }
.effect-toast.kill { border-color: rgb(224 105 84 / 62%); color: #ffe2da; background: rgb(85 27 20 / 92%); }
.effect-toast.multiplier { border-color: rgb(235 173 70 / 70%); color: #ffedb8; background: rgb(86 43 12 / 94%); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -42%) scale(.96); } }

.modal-backdrop, .drawer-backdrop { position: absolute; z-index: 60; inset: 0; display: grid; place-items: center; padding: 18px; background: rgb(3 14 12 / 76%); backdrop-filter: blur(8px); }
.modal-card { width: min(100%, 350px); border: 1px solid var(--line); border-radius: 22px; padding: 24px; background: #102d28; box-shadow: var(--shadow); text-align: center; }
.modal-kicker { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.modal-card h2 { margin: 7px 0; }
.modal-card p { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.direction-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.direction-actions button { min-height: 72px; border: 1px solid var(--line); border-radius: 15px; color: #fff; background: rgb(255 255 255 / 7%); }
.direction-actions b { display: block; color: var(--gold); font-size: 26px; }
.drawer-backdrop { place-items: stretch start; padding: 0; }
.drawer { width: min(88%, 360px); height: 100%; overflow: auto; padding: max(72px, calc(64px + env(safe-area-inset-top))) 18px 24px; border-right: 1px solid var(--line); background: #0d2823; box-shadow: 16px 0 45px rgb(0 0 0 / 35%); animation: drawer-in .2s ease-out; }
@keyframes drawer-in { from { transform: translateX(-100%); } }
.game-screen.menu-open .mobile-hud { z-index: 70; }
.game-screen.menu-open .hud-center, .game-screen.menu-open .hud-deck { opacity: 0; pointer-events: none; }
.game-screen.menu-open #menu-toggle { border-color: rgb(225 190 112 / 46%); background: rgb(9 48 40 / 96%); }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; }
.drawer-heading small { color: var(--gold); }
.drawer-heading h2 { margin: 3px 0 0; }
.detail-grid { margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-item { min-height: 52px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: rgb(255 255 255 / 4%); }
.detail-item small { display: block; color: var(--muted); font-size: 9px; }
.detail-item b { font-size: 12px; }
.drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer button { min-height: 44px; border: 1px solid var(--line); border-radius: 11px; color: #fff; background: rgb(255 255 255 / 7%); }
.scenario-controls { margin-top: 14px; padding: 11px; border: 1px solid rgb(105 181 163 / 24%); border-radius: 12px; background: rgb(4 40 33 / 46%); }
.scenario-controls small, .scenario-controls strong { display: block; }
.scenario-controls small { color: #82b8aa; font-size: 8px; letter-spacing: .08em; }
.scenario-controls strong { margin: 4px 0 9px; color: #d8eee8; font-size: 11px; }
.scenario-controls > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.scenario-panel { position: fixed; z-index: 100; }
.scenario-card { max-height: min(640px, calc(100dvh - 28px)); overflow: auto; text-align: left; }
.scenario-card > h2, .scenario-card > p, .scenario-card > .modal-kicker { text-align: center; }
.scenario-picker { display: grid; gap: 6px; margin-top: 18px; color: #a9c4bb; font-size: 10px; }
.scenario-picker select { width: 100%; min-height: 46px; border: 1px solid rgb(217 174 91 / 25%); border-radius: 11px; padding: 8px 10px; color: #f6ead0; background: #082a24; }
.scenario-picker option { color: #111; background: #fff; }
.scenario-description { min-height: 54px; margin-top: 10px; padding: 10px; border-radius: 10px; color: #bfd3cd; background: rgb(0 15 12 / 38%); font-size: 10px; line-height: 1.55; }
.scenario-description strong, .scenario-description span, .scenario-description small { display: block; }
.scenario-description strong { color: #f0d28c; }
.scenario-description small { margin-top: 5px; color: #80aa9f; }
.scenario-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; margin-top: 14px; }
.scenario-actions button { min-height: 46px; border: 1px solid rgb(217 174 91 / 23%); border-radius: 11px; color: #f5ebd8; background: rgb(3 26 22 / 62%); }
.scenario-actions .primary {
  color: #1b241f;
  border-color: #e4c374;
  background: linear-gradient(145deg, #f0d38e, #c6953c);
  box-shadow: inset 0 1px rgb(255 255 255 / 38%), 0 5px 16px rgb(202 153 64 / 15%);
}
.capture-tools { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.capture-tools h3 { font-size: 12px; color: var(--gold); }
.capture-tools input, .capture-tools textarea { width: 100%; margin-bottom: 7px; border: 1px solid var(--line); border-radius: 8px; padding: 7px; color: #fff; background: rgb(255 255 255 / 6%); }
.capture-tools textarea { height: 42px; resize: none; }
.capture-tools button { width: 100%; }
.danger-ghost { width: 100%; margin-top: 22px; color: #f0b8ae !important; border-color: rgb(210 105 87 / 35%) !important; }
.action-popover-layer { position: absolute; z-index: 50; inset: 0; display: grid; place-items: center; padding: 74px 18px 226px; background: rgb(1 13 11 / 42%); backdrop-filter: blur(2px); }
.action-popover { width: min(100%, 330px); max-height: min(390px, 58dvh); overflow: hidden; border: 1px solid rgb(217 174 91 / 32%); border-radius: 16px; padding: 15px; background: linear-gradient(150deg, rgb(13 58 49 / 98%), rgb(5 30 26 / 99%)); box-shadow: 0 18px 45px rgb(0 0 0 / 46%); }
.action-popover-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgb(217 174 91 / 16%); }
.action-popover-heading small { color: #9dbab1; font-size: 8px; }
.action-popover-heading h2 { margin: 2px 0 0; color: #f1d38a; font: 800 17px/1.1 "Songti SC", serif; }
.action-popover-heading > span { color: #76988e; font-size: 7px; white-space: nowrap; }
.action-popover ol { max-height: 290px; overflow-y: auto; padding-top: 6px; overscroll-behavior: contain; }
.action-popover li { position: relative; min-height: 34px; padding: 8px 5px 7px 25px; border-bottom: 1px solid rgb(255 255 255 / 6%); color: #cfddd8; font-size: 9px; line-height: 1.45; }
.action-popover li::before { content: "#" attr(data-step); position: absolute; left: 2px; color: #789b90; font-size: 7px; }
.result-card { max-height: 86vh; overflow: auto; text-align: left; }
.result-card > h2, .result-card > .modal-kicker, .result-card > p { display: block; text-align: center; }
.result-table { margin: 14px 0 18px; }
.result-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.result-row > :nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-row.header { padding-top: 2px; color: var(--muted); font-size: 9px; }
.result-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-row small { color: var(--muted); }
.result-version { display: block; margin-top: 14px; text-align: center; }
.result-rank { grid-template-columns: minmax(0, 1fr) auto; }
.result-actions { display: grid; gap: 9px; margin-top: 16px; }
.result-actions.two { grid-template-columns: 1fr 1fr; }
.result-actions button { min-height: 46px; border: 1px solid var(--line); border-radius: 12px; color: #fff; background: rgb(255 255 255 / 7%); font-weight: 800; }
.result-actions .primary-result { border-color: #e4c374; color: #1c241f; background: linear-gradient(145deg, #f0d28a, #c7963e); }

@media (min-width: 520px) {
  .game-screen { height: min(100dvh, 900px); min-height: 760px; margin-top: max(0px, calc((100dvh - 900px) / 2)); border-radius: 24px; }
}

@media (max-height: 760px) {
  .table-shell { bottom: 200px; }
  .human-dock { min-height: 202px; }
  .hand-area { height: 89px; padding-top: 11px; }
  .arena { top: 53%; gap: 4px; }
  .target-area { min-height: 90px; padding: 7px 10px; }
  .message { bottom: 202px; }
}

@media (max-width: 350px) {
  .arena { width: min(72vw, 245px); gap: 4px; }
  .arena-status-row { gap: 4px; }
  .phase-banner { max-width: 105px; padding-inline: 6px; }
  .opponents-area.compact .opponent-seat { width: 70px; }
  .seat-left-top { left: 20px; }
  .seat-right-top { right: 20px; }
  .target-area { padding-inline: 9px; }
  .result-actions.two { grid-template-columns: 1fr; }
}



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Phase 3A · Visual Implementation V0.1
   Code-native ink table, ivory cards and restrained gold accents. */
:root {
  color-scheme: dark;
  font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  --night: #041613;
  --felt: #0d3b33;
  --felt-deep: #061f1b;
  --paper: #f2e8d1;
  --paper-2: #f8f0df;
  --ink: #17241f;
  --muted: #9eb8af;
  --line: rgb(222 188 112 / 21%);
  --gold: #d9ae5b;
  --gold-soft: #f0d28c;
  --red: #aa4436;
  --cyan: #5fa5a0;
  --shadow: 0 18px 54px rgb(0 0 0 / 42%);
}

body {
  background:
    radial-gradient(circle at 50% -10%, #276457 0, transparent 38%),
    linear-gradient(155deg, #061c18, #020e0c 72%);
}

.setup-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(ellipse at 18% 22%, transparent 0 9%, rgb(218 179 98 / 8%) 9.5% 10%, transparent 10.5%),
    radial-gradient(ellipse at 83% 71%, transparent 0 13%, rgb(104 159 145 / 8%) 13.5% 14%, transparent 14.5%),
    repeating-linear-gradient(112deg, transparent 0 35px, rgb(255 255 255 / 1.2%) 36px 37px, transparent 38px 62px);
}

.setup-brand h1 {
  color: var(--gold-soft);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-weight: 900;
  text-shadow: 0 2px 18px rgb(217 174 91 / 24%);
}

.setup-brand > p:last-child { letter-spacing: .22em; }
/* Restore the approved bright Home atmosphere; only an explicit dev A removes it. */
.setup-screen { background: transparent; }
.setup-screen[data-home-visual=GLOW_OFF] { background: linear-gradient(155deg, #061c18, #020e0c 72%); }
.setup-screen[data-home-visual=BASELINE], .setup-screen[data-home-visual=STATUS_SOLID], .setup-screen[data-home-visual=TITLE_ONLY] { background: transparent; }
.setup-screen[data-home-visual=TITLE_ONLY] .setup-brand h1 { text-shadow: 0 1px 3px rgb(217 174 91 / 12%); }
.home-development pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 10px; }
.setup-screen.standalone-home { padding-top: max(16px, calc(env(safe-area-inset-top) + 16px)); }
@media (display-mode: standalone) {
  .setup-screen { padding-top: max(16px, calc(env(safe-area-inset-top) + 16px)); }
}
.setup-card { border-color: rgb(217 174 91 / 25%); background: linear-gradient(150deg, rgb(11 48 41 / 91%), rgb(4 25 22 / 94%)); }
.setup-title span { font-family: "Songti SC", serif; letter-spacing: .08em; }
.settings-grid input, .settings-grid select { border-color: rgb(217 174 91 / 20%); background: rgb(0 13 11 / 36%); }
.primary, .action-button.play, .result-actions .primary-result { background: linear-gradient(145deg, #f0d38e, #c6953c); box-shadow: inset 0 1px rgb(255 255 255 / 38%), 0 5px 16px rgb(202 153 64 / 15%); }

.game-screen {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 35%, rgb(34 99 84 / 82%) 0, rgb(12 60 51 / 86%) 38%, rgb(5 29 25 / 98%) 73%),
    linear-gradient(#0c4036, #061e1a);
}

.game-screen::before {
  z-index: -1;
  inset: 58px 10px 215px;
  border: 1px solid rgb(229 190 103 / 25%);
  border-radius: 49% 49% 39% 39% / 25% 25% 53% 53%;
  background:
    radial-gradient(ellipse at 49% 42%, transparent 0 31%, rgb(2 27 23 / 20%) 32% 54%, transparent 55%),
    repeating-radial-gradient(ellipse at 50% 10%, transparent 0 28px, rgb(232 205 146 / 2.5%) 29px 30px, transparent 31px 44px);
  box-shadow: inset 0 0 55px rgb(0 0 0 / 18%), 0 0 24px rgb(217 174 91 / 4%);
}

.game-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 198px;
  height: 122px;
  pointer-events: none;
  opacity: .24;
  background:
    radial-gradient(85px 34px at 5% 100%, #020f0d 0 58%, transparent 60%),
    radial-gradient(130px 58px at 35% 112%, #020f0d 0 59%, transparent 61%),
    radial-gradient(110px 44px at 75% 105%, #020f0d 0 59%, transparent 61%),
    radial-gradient(78px 30px at 105% 100%, #020f0d 0 59%, transparent 61%);
}

.mobile-hud { grid-template-columns: 48px 1fr 72px; background: linear-gradient(#041b17f2 0, #041b17a8 58%, transparent); }
.icon-button, .hud-deck { border-color: rgb(217 174 91 / 24%); background: rgb(2 19 16 / 62%); }
.icon-button { color: var(--gold-soft); }
.hud-round { font-family: "Songti SC", serif; color: #f3e9d3; }
.hud-deck { color: #e7ddc8; }
.deck-icon {
  position: relative;
  width: 20px;
  height: 27px;
  flex: 0 0 auto;
  border: 1px solid #cba14e;
  border-radius: 3px;
  color: transparent;
  background: #06372e;
  transform: none;
  box-shadow: 2px 2px 0 #081f1b, 3px 3px 0 rgb(203 161 78 / 55%);
}
.deck-icon::before, .deck-icon::after { content: "☁"; position: absolute; left: 50%; color: #d4aa55; font-size: 7px; transform: translateX(-50%); }
.deck-icon::before { top: 1px; }
.deck-icon::after { bottom: 1px; transform: translateX(-50%) rotate(180deg); }
.deck-icon i { position: absolute; inset: 8px 5px; border: 1px solid #ddb65f; border-radius: 50%; }

.opponents-area {
  --seat-card-width: 78px;
  --seat-avatar-size: 36px;
  --seat-avatar-overlap: -6px;
}
.opponent-seat {
  width: var(--seat-card-width);
  min-height: 62px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  justify-items: center;
  align-content: start;
}
.opponents-area.compact .opponent-seat { width: var(--seat-card-width); min-height: 62px; padding: 0; }
.opponents-area.compact .seat-left-middle { left: 4px; }
.opponents-area.compact .seat-right-middle { right: 4px; }
.opponents-area.player-count-4 .seat-left-middle,
.opponents-area.player-count-4 .seat-right-middle { top: 8.5%; }
.opponents-area.player-count-6 .seat-left-top { left: 18px; }
.opponents-area.player-count-6 .seat-right-top { right: 18px; }
.opponents-area.player-count-6 .seat-left-top,
.opponents-area.player-count-6 .seat-right-top { top: calc(11% + 10px); }
.opponents-area.player-count-6 .seat-left-middle,
.opponents-area.player-count-6 .seat-right-middle { top: calc(39% - 20px); }
.seat-avatar, .human-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid #c9a254;
  border-radius: 50%;
  color: #f5e8c8;
  background:
    radial-gradient(circle at 50% 38%, rgb(227 194 121 / 24%), transparent 34%),
    linear-gradient(145deg, #28594d, #081d19);
  box-shadow: inset 0 0 0 2px rgb(3 23 19 / 65%), 0 4px 11px rgb(0 0 0 / 38%);
  font: 800 13px/1 "Songti SC", serif;
}
.portrait-tone-1 .seat-avatar { background: linear-gradient(145deg, #72513d, #201c18); }
.seat-avatar { width: var(--seat-avatar-size); height: var(--seat-avatar-size); }
.portrait-tone-2 .seat-avatar { background: linear-gradient(145deg, #34506c, #101c24); }
.portrait-tone-3 .seat-avatar { background: linear-gradient(145deg, #5f3e50, #20151b); }
.seat-avatar::after, .human-avatar::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgb(239 209 145 / 18%); border-radius: inherit; }
.seat-panel {
  width: 100%;
  margin-top: var(--seat-avatar-overlap);
  padding: 8px 6px 5px;
  border: 1px solid rgb(221 188 117 / 18%);
  border-radius: 8px;
  background: linear-gradient(180deg, rgb(3 30 25 / 88%), rgb(2 19 16 / 84%));
  box-shadow: 0 5px 12px rgb(0 0 0 / 24%);
}
.opponent-seat.current-player { border: 0; transform: scale(1.04); box-shadow: none; }
.opponent-seat.current-player .seat-avatar { border-color: #f4d17d; box-shadow: inset 0 0 0 2px rgb(3 23 19 / 65%), 0 0 0 3px rgb(236 190 92 / 18%), 0 0 17px rgb(236 190 92 / 52%); }
.opponent-seat.current-player .seat-panel { border-color: rgb(244 209 125 / 52%); color: #fff2cc; }
.seat-name { font-size: 11px; }
.seat-stats { margin-top: 2px; gap: 6px; color: #a9c2ba; font-size: 9px; }
.seat-badges { z-index: 4; top: -3px; left: calc(50% + 24px); }
.seat-badge { min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border: 1px solid #f3d58d; color: #241807; background: #d9ad58; }
.seat-badge.turn { color: #201605; background: #efca76; }
.seat-badge.out { color: #f2ddd8; background: #74443e; border-color: #a66b61; }
.seat-top.current-player { transform: translateX(-50%) scale(1.04); }

.arena { top: 53%; width: min(74vw, 288px); gap: 5px; }
.arena-status-row { gap: 3px; flex-wrap: nowrap; }
.round-multiplier { display: flex; align-items: center; gap: 3px; flex-shrink: 0; padding: 3px 5px; border: 1px solid rgb(217 174 91 / 15%); border-radius: 999px; color: #dce9e4; background: rgb(2 23 19 / 38%); font-size: 9px; white-space: nowrap; }
.round-multiplier b { color: var(--gold-soft); }
.direction-indicator { padding: 2px 7px; border: 1px solid rgb(217 174 91 / 15%); border-radius: 999px; color: #dce9e4; background: rgb(2 23 19 / 38%); }
.direction-arrow { color: var(--gold-soft); text-shadow: 0 0 11px rgb(217 174 91 / 40%); }
.direction-indicator.reversed .direction-arrow { color: #84c6c1; text-shadow: 0 0 12px rgb(92 174 168 / 52%); }
.phase-banner { color: #f1d387; border-color: rgb(223 178 85 / 46%); background: rgb(71 44 13 / 58%); }
.phase-banner.normal { color: #b9d1ca; border-color: rgb(143 189 175 / 22%); background: rgb(3 39 32 / 56%); }
.current-turn { color: #fff3d3; font-family: "Songti SC", serif; font-size: 12px; letter-spacing: .08em; text-shadow: 0 1px 9px #000; }
.current-turn.human-turn-enter { animation: human-turn-emphasis 600ms ease-out; }
.card-motion-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.pwa-tools { margin-top: 6px; text-align: center; }
.pwa-tools button { min-height: 44px; font-size: 12px; }
.pwa-note { margin: 4px 0; color: #b9c9c2; font-size: 11px; line-height: 1.5; }
.pwa-update-note { display: none; color: #b9c9c2; font-size: 11px; }
:root[data-pwa-update="ready"] .pwa-update-note { display: block; }
[data-pwa-install] { display: none; }
:root[data-pwa-install-mode="ios"] [data-pwa-install], :root[data-pwa-install-mode="prompt"] [data-pwa-install] { display: block; }
.event-feedback-frame { pointer-events: none; border: 1px solid rgb(229 195 123 / 75%); border-radius: 16px; box-shadow: 0 0 0 2px rgb(217 174 91 / 9%); }
.event-feedback-frame.feedback-active_seat, .event-feedback-frame.feedback-relay { border-radius: 14px; }
.event-feedback-frame.feedback-multiplier { border-radius: 999px; }
.event-feedback-frame.feedback-rocket { border-color: rgb(217 150 88 / 85%); box-shadow: 0 0 0 3px rgb(185 74 67 / 8%); }
.event-feedback-frame.feedback-super_rocket { border-color: #e9bd76; box-shadow: 0 0 0 4px rgb(185 74 67 / 13%); }
.event-feedback-frame.feedback-seal { border-color: rgb(185 74 67 / 80%); background: rgb(66 19 15 / 20%); box-shadow: inset 0 0 15px rgb(185 74 67 / 12%); }
.human-meta.exited-player { opacity: .38; filter: grayscale(.7); }
.human-exit { color: #cda79e; font-size: 9px; }
@keyframes human-turn-emphasis { 40% { color: #ffe0a1; text-shadow: 0 0 6px rgb(217 174 91 / 50%); } }
@media (prefers-reduced-motion: reduce) { .current-turn.human-turn-enter { animation: none; } }

.target-area {
  position: relative;
  width: clamp(164px, calc(100vw - 168px), 100%);
  height: 134px;
  min-height: 134px;
  max-height: 134px;
  align-self: center;
  display: grid;
  grid-template-rows: 12px 18px 56px 14px;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  border-color: rgb(232 196 116 / 38%);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 16%, rgb(218 174 84 / 8%), transparent 46%),
    linear-gradient(145deg, rgb(3 28 24 / 92%), rgb(8 48 40 / 81%));
  box-shadow: inset 0 0 24px rgb(0 0 0 / 20%), 0 12px 25px rgb(0 0 0 / 26%);
}
.target-area::before, .target-area::after { content: "◆"; position: absolute; top: 7px; color: rgb(221 178 89 / 46%); font-size: 6px; }
.target-area::before { left: 8px; }
.target-area::after { right: 8px; }
.target-area.high-stakes { border-color: rgb(228 119 76 / 65%); box-shadow: inset 0 -15px 30px rgb(122 38 18 / 22%), 0 0 22px rgb(201 79 40 / 20%); }
.target-eyebrow { color: #cda75c; font-family: "Songti SC", serif; letter-spacing: .14em; }
.target-title { color: #fff2d2; font-family: "Songti SC", serif; font-size: 14px; letter-spacing: .03em; }
.target-owner { color: #9ebbb1; }
.target-content-slot { width: 100%; height: 56px; min-height: 56px; display: grid; place-items: center; overflow: hidden; }
.free-target { width: 100%; height: 100%; min-height: 0; color: #ebd49b; font-size: 13px; }
.target-cards { width: 100%; height: 56px; min-height: 56px; gap: 3px; overflow: hidden; }

.game-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #d1c29e;
  color: var(--ink);
  background:
    radial-gradient(circle at 74% 33%, rgb(255 255 255 / 66%), transparent 24%),
    linear-gradient(150deg, #fbf4e5, #e9ddc3);
}
.game-card::after { content: ""; position: absolute; inset: auto 5px 3px; height: 2px; border-radius: 9px; background: #728f8b; opacity: .75; }
.category-disciple::after { background: #b78343; }
.category-function::after { background: #3b9c9a; }
.category-deity::after { background: #d1ae61; }
.card-index { position: absolute; z-index: 3; left: 6px; top: 5px; display: grid; justify-items: center; color: inherit; line-height: .9; }
.card-index b { font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 800; }
.card-index i { margin-top: 2px; font: 700 13px/1 Georgia, serif; }
.card-illustration { position: absolute; z-index: 1; inset: 16px 5px 17px 18px; display: grid; place-items: center; overflow: hidden; border-radius: 42% 50% 36% 48%; color: #143c36; background: radial-gradient(circle, rgb(45 99 88 / 23%), transparent 68%); }
.card-illustration::before { content: ""; position: absolute; inset: 12% -18%; transform: rotate(-14deg); border-top: 5px solid currentColor; border-radius: 50%; opacity: .08; }
.card-illustration span { position: relative; z-index: 2; font: 800 23px/1 "STKaiti", "KaiTi", serif; text-shadow: 0 1px #fff; }
.art-monster { color: #254f4b; background: radial-gradient(ellipse, rgb(47 94 88 / 30%), transparent 68%); }
.art-disciple { color: #8b532a; background: radial-gradient(ellipse, rgb(190 126 57 / 26%), transparent 68%); }
.art-function { color: #307d7f; background: radial-gradient(ellipse, rgb(72 159 163 / 29%), transparent 68%); }
.art-deity { color: #a77c32; background: radial-gradient(ellipse, rgb(213 174 92 / 27%), transparent 68%); }
.art-rank-7 span { font-size: 30px; transform: translateY(2px); }
.art-rank-7::before { inset: 33% -8%; border-top: 7px solid #4a9695; opacity: .24; }
.art-rank-9 { border: 3px double rgb(50 127 131 / 42%); border-radius: 50%; }
.art-rank-9 span { font-size: 30px; }
.art-rank-black_joker, .art-rank-red_joker { border: 1px solid rgb(191 151 71 / 35%); border-radius: 50% 50% 44% 44%; }
.art-rank-scripture { background: linear-gradient(90deg, transparent, rgb(218 181 102 / 26%), transparent); }
.card-caption { position: absolute; z-index: 3; left: 5px; right: 5px; bottom: 9px; overflow: hidden; color: #202a25; font: 800 9px/1 "Songti SC", serif; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.card-category { position: absolute; z-index: 3; right: 4px; bottom: 3px; color: #667069; font-size: 6px; line-height: 1; }
.red-card .card-index { color: var(--red); }
.hand-card.selected { transform: translateY(-14px); border: 2px solid #e8be64; padding: 0; box-shadow: 0 0 0 2px rgb(232 190 100 / 15%), -3px 8px 16px rgb(0 0 0 / 38%); }
.hand-card:disabled { cursor: default; opacity: 1; filter: none; }

.risk-area { border: 1px solid rgb(215 176 94 / 20%); background: linear-gradient(90deg, rgb(3 23 20 / 73%), rgb(31 51 36 / 62%)); }
.risk-area.high-risk { border-color: rgb(210 128 72 / 42%); background: linear-gradient(90deg, rgb(45 21 13 / 74%), rgb(68 42 15 / 68%)); }
.risk-total { color: #f0c96f; font-family: "Songti SC", serif; text-shadow: 0 1px 8px rgb(236 180 69 / 22%); }
.risk-formula { color: #d9b568; }

.human-dock {
  height: calc(234px + env(safe-area-inset-bottom));
  min-height: calc(234px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: 26px 20px 48px minmax(112px, 1fr);
  gap: 4px;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(217 174 91 / 9%);
  background: linear-gradient(180deg, transparent, rgb(5 25 21 / 92%) 19%, #031512 100%);
}
.human-meta { gap: 5px; white-space: nowrap; }
.human-meta strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.human-avatar { width: 28px; height: 28px; margin-right: 1px; font-size: 10px; }
.human-meta .dealer { width: 17px; height: 17px; display: grid; place-items: center; padding: 0; border: 1px solid #f0ce7b; }
.hand-area { height: auto; min-height: 112px; align-items: flex-end; padding: 16px 0 2px; overflow: visible; }
.turn-prompt { color: #b5cbc4; }
.onboarding-coach { position: fixed; z-index: 18; left: 50%; transform: translateX(-50%); width: min(310px, calc(100vw - 24px)); padding: 5px 9px; border-radius: 10px; background: rgb(13 40 33 / 94%); color: #d7dfcf; pointer-events: none; }
.coach-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 32px; }
.coach-heading strong { font-size: 11px; line-height: 1.3; font-weight: 500; color: #d6bd86; }
.coach-heading button { flex: 0 0 auto; min-width: 52px; min-height: 32px; padding: 0 2px; border: 0; background: none; color: #9eb3a8; font-size: 10px; font-weight: 400; pointer-events: auto; }
.onboarding-coach p { margin: 0; font-size: 10px; line-height: 1.5; }
.game-screen.coach-visible > .message { visibility: hidden; }
.action-button { border-color: rgb(218 184 111 / 19%); border-radius: 10px; background: linear-gradient(180deg, rgb(12 53 45 / 84%), rgb(4 30 25 / 94%)); box-shadow: inset 0 1px rgb(255 255 255 / 5%); }
.action-button.collect { color: #dfb0a5; border-color: rgb(166 75 56 / 45%); }
.action-button.hint { color: #d2e5df; border-color: rgb(105 160 145 / 34%); }
.action-button.play { color: #1d251f; }
.effect-toast { font-family: "Songti SC", serif; border-color: rgb(231 190 96 / 62%); background: linear-gradient(145deg, rgb(44 34 13 / 95%), rgb(14 45 36 / 96%)); }
.effect-toast.nine { color: #d9f4f0; border-color: rgb(107 190 187 / 62%); background: rgb(8 61 55 / 95%); }
.effect-toast.kill { color: #ffe0d5; border-color: rgb(192 78 56 / 68%); background: rgb(81 27 18 / 96%); }
.effect-toast.multiplier { color: #ffe5a2; border-color: rgb(226 160 60 / 72%); background: linear-gradient(145deg, rgb(91 43 10 / 97%), rgb(42 26 10 / 97%)); }

.modal-backdrop, .drawer-backdrop { background: rgb(1 13 11 / 82%); }
.modal-card, .drawer { border-color: rgb(217 174 91 / 27%); background: linear-gradient(150deg, #0d3a31, #051e1a); }
.modal-card { position: relative; overflow: hidden; }
.modal-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgb(223 186 108 / 10%); border-radius: 16px; pointer-events: none; }
.modal-kicker { color: #dfb963; }
.modal-card h2 { color: #f5e6c2; font-family: "Songti SC", serif; letter-spacing: .08em; }
.direction-actions button, .drawer button, .result-actions button { border-color: rgb(217 174 91 / 23%); background: rgb(3 26 22 / 52%); }
.result-row { border-color: rgb(217 174 91 / 15%); }
.result-rank:first-child { color: #f2d17b; }

@media (max-height: 760px) {
  .human-dock {
    height: calc(220px + env(safe-area-inset-bottom));
    min-height: calc(220px + env(safe-area-inset-bottom));
    grid-template-rows: 24px 18px 46px minmax(104px, 1fr);
    padding: 7px 10px max(7px, env(safe-area-inset-bottom));
  }
  .hand-area { height: auto; min-height: 104px; padding-top: 14px; }
  .target-area { height: 123px; min-height: 123px; max-height: 123px; grid-template-rows: 11px 17px 48px 13px; padding-block: 7px; }
  .target-content-slot, .target-cards { height: 48px; min-height: 48px; }
  .card-index b { font-size: 15px; }
  .card-illustration span { font-size: 20px; }
}

@media (max-width: 350px) {
  .opponents-area { --seat-card-width: 68px; --seat-avatar-size: 32px; }
  .arena-status-row { gap: 2px; }
  .direction-indicator { gap: 3px; padding-inline: 4px; }
  .round-multiplier, .phase-banner { padding-inline: 4px; }
  .opponents-area.compact .seat-left-middle { left: 3px; }
  .opponents-area.compact .seat-right-middle { right: 3px; }
  .opponents-area.player-count-6 .seat-left-top { left: 10px; }
  .opponents-area.player-count-6 .seat-right-top { right: 10px; }
  .seat-panel { padding-inline: 3px; }
  .arena { width: min(71vw, 242px); }
  .target-card + .target-card { margin-left: -6px; }
  .target-cards { height: 48px; min-height: 48px; }
  .target-owner { max-width: 210px; }
}

/* Playable Integration · layered illustration assets and actionable hand states. */
.card-illustration.has-asset {
  inset: 0;
  border-radius: 7px;
  background: #d9d0bc;
}
.card-art {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 120ms ease-out;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.card-illustration.has-asset .art-fallback { opacity: 1; }
.card-illustration.asset-loaded .card-art { opacity: 1; }
.card-illustration.asset-loaded .art-fallback { opacity: 0; }
.card-illustration.asset-failed .art-fallback { opacity: 1; }
.card-index {
  min-width: 21px;
  padding: 2px 3px 3px;
  border-radius: 5px 2px 7px 2px;
  background: linear-gradient(135deg, rgb(250 242 221 / 96%), rgb(250 242 221 / 72%));
  box-shadow: 1px 1px 5px rgb(0 0 0 / 12%);
  text-shadow: 0 1px rgb(255 255 255 / 82%);
}
.card-caption {
  left: 3px;
  right: 3px;
  bottom: 4px;
  padding: 5px 2px 3px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, transparent, rgb(248 239 216 / 90%) 40%);
  text-shadow: 0 1px rgb(255 255 255 / 75%);
}
.card-category {
  right: 3px;
  bottom: 2px;
  padding: 1px 2px;
  border-radius: 3px;
  background: rgb(245 235 210 / 76%);
}
.hand-card.selectable { cursor: pointer; }
.hand-card.selected {
  opacity: 1;
  filter: none;
}
.hand-card.hinted {
  border-color: #f0ca75;
  box-shadow: 0 0 0 2px rgb(232 190 100 / 20%), -3px 8px 16px rgb(0 0 0 / 38%);
}
.hand-card.hinted::before {
  content: "提示";
  position: absolute;
  z-index: 8;
  top: 3px;
  right: 3px;
  padding: 2px 3px;
  border: 1px solid rgb(239 207 135 / 72%);
  border-radius: 4px;
  color: #2d210d;
  background: rgb(239 201 112 / 92%);
  font-size: 6px;
  font-weight: 900;
}
.turn-prompt { height: 26px; display: flex; gap: 8px; align-items: center; justify-content: center; }

/* ACTIVE content only: retain the approved outer frame and all table positions. */
.target-area.target-play { --target-frame-height: 134px; --target-card-height: min(var(--game-card-height), calc(var(--target-frame-height) - 36px)); grid-template-columns: minmax(0, 1fr); grid-template-rows: 16px var(--target-card-height); gap: 4px; align-content: center; padding-block: 7px; }
.target-play .target-title { width: 100%; height: 16px; font-size: 11px; line-height: 16px; white-space: nowrap; letter-spacing: 0; }
.target-play .target-content-slot, .target-play .target-cards { height: 100%; min-height: 0; }
.target-play .target-cards { gap: 0; align-items: flex-start; }
.target-card { --card-render-height: var(--target-card-height, var(--game-card-height)); --card-render-width: calc(var(--card-render-height) * .75); }
.target-area.target-empty, .target-area.target-free { grid-template-rows: 18px 56px 14px; }
.human-meta { column-gap: clamp(6px, 2vw, 8px); }
.target-play .target-card + .target-card { margin-left: calc(-1 * max(0px, (var(--target-count) * var(--card-render-width) - 100%) / (var(--target-count) - 1))); }

@media (max-height: 760px) {
  .turn-prompt { height: 24px; }
  .target-area.target-play { --target-frame-height: 123px; }
}

@media (max-width: 350px) {
  .hand-area { --hand-overlap: -20px !important; }
  .card-index { left: 4px; top: 4px; }
}

/* One visual specification; contexts only arrange cards and handle interaction. */
:root { --game-card-width: 72px; --game-card-height: 96px; --corner-rank-base: 17px; }
@media (max-height: 760px), (max-width: 350px) {
  :root { --game-card-width: 66px; --game-card-height: 88px; --corner-rank-base: 15px; }
}
.game-card {
  width: var(--card-render-width, var(--game-card-width));
  height: var(--card-render-height, var(--game-card-height));
  flex: 0 0 var(--card-render-width, var(--game-card-width));
  display: block; padding: 0; border-radius: 8px;
  box-shadow: -3px 7px 15px rgb(0 0 0 / 35%);
  font-size: inherit; font-weight: 900;
}
.game-card .card-index b { font-size: calc(var(--corner-rank-base) * .87); line-height: 1; white-space: nowrap; }
.game-card .card-index i { font-size: calc(13px * .87); }
.game-card .card-index-joker { width: calc(100% - 12px); text-align: center; }
.game-card .card-index-joker b { font-size: calc(var(--corner-rank-base) * .84); letter-spacing: -.025em; }