:root {
  color-scheme: light;
  font: 14px "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
  --display: "Noto Serif CJK SC", "Songti SC", SimSun, serif;
  --dark: #321d18;
  --walnut: #57372a;
  --ink: #44261c;
  --gold: #f5c36e;
  --paper: #ffe5ac;
  --cream: #fff2d0;
  --red: #962f24;
  --line: #a06937;
  --toolbar: 43px;
  color: var(--cream);
  background: #311f19;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 300px; min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid #ffde85; outline-offset: 3px; }
img { display: block; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; }
.topbar {
  height: var(--toolbar);
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  display: flex; justify-content: space-between; align-items: center; gap: 9px;
  background: linear-gradient(#634235, #402820);
  border-bottom: 2px solid #ad7544;
  box-shadow: 0 2px 0 #261815;
}
.brand {
  color: #ffe8b9; text-decoration: none; font: 900 1.18rem var(--display);
  display: inline-flex; align-items: center; gap: 7px;
}
.brand img { width: 27px; border-radius: 7px; border: 1px solid #dda55b; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.utility {
  min-height: 31px; border: 1px solid #aa7853; border-radius: 7px;
  padding: 0 10px; background: #4d3025; font-size: .8rem;
}
.takeover-toggle { display: flex; align-items: center; gap: 4px; }
.takeover-toggle img { width: 16px; height: 16px; object-fit: contain; }
.takeover-toggle[aria-pressed=true] { background: #f4c574; color: var(--ink); border-color: #ffd78c; }
.connection { font-size: .76rem; color: #edd6ac; white-space: nowrap; }
.connection::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px;
  vertical-align: 2px; border-radius: 50%; background: #bba183;
}
.connection.online::before { background: #acd37d; box-shadow: 0 0 5px #98c872; }
.connection.offline::before { background: #ff9276; }
.scene {
  min-height: calc(100vh - var(--toolbar));
  min-height: calc(100dvh - var(--toolbar));
  padding: 12px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse at 36% 12%, #4c7660, transparent 62%),
    repeating-linear-gradient(45deg, #e9c27a06 0 1px, transparent 1px 12px),
    #253e34;
}
.parchment, dialog {
  color: var(--ink); background: radial-gradient(ellipse at 45% 12%, #fff1ca, #ecd09a);
  border: 2px solid #af7741; border-radius: 12px;
  box-shadow: inset 0 0 0 2px #fff0bb85, 0 3px 0 #3b2219, 0 12px 26px #24181065;
}
.primary, .secondary {
  min-height: 40px; padding: 5px 12px;
  font-weight: 800; border: 1px solid #5e3926; border-radius: 8px;
  box-shadow: inset 0 1px 0 #ffffff45, 0 2px 0 #462d21;
}
.primary { background: linear-gradient(#ffd886, #e4a751); color: #462719; }
.secondary { background: linear-gradient(#75483a, #563328); color: #fff0cc; }
.primary:active, .secondary:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #ffffff45; }
.primary:disabled, .secondary:disabled { opacity: .65; }
.home { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(255px, .85fr); align-items: center; gap: 22px; padding-inline: clamp(16px, 7vw, 105px); }
.cover { min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.cover-illustration {
  position: relative; width: min(54vw, 420px); height: clamp(124px, 49vh, 310px);
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #ffce7260, transparent 67%);
}
.cover-illustration img { position: absolute; object-fit: cover; box-shadow: 0 5px 0 #1c211c, 0 12px 23px #1c211c85; }
.cover-card { width: 32%; height: 74%; border: 2px solid #d99552; border-radius: 9px; }
.cover-card-left { left: 12%; transform: rotate(-15deg); object-position: center 26%; }
.cover-card-right { right: 12%; transform: rotate(15deg); object-position: center 21%; }
.cover-mascot { height: 94%; aspect-ratio: 1; max-width: 64%; border: 3px solid #ffc978; border-radius: 24%; }
.cover-title { text-align: center; margin-top: -2px; position: relative; }
.cover-title h1 {
  font-size: clamp(35px, 9vh, 75px); line-height: 1.13; letter-spacing: .12em;
  padding-left: .12em; color: #ffde91; text-shadow: 0 2px #92532a, 0 5px #342016;
}
.cover-title p { color: #ffebbb; letter-spacing: .08em; font-size: .85rem; margin-top: 6px; }
.tutorial-entry { margin-top: 10px; min-height: 33px; }
.room-practice-mode .cover-illustration { height: clamp(100px, 32vh, 230px); }
.cover .room-practice { margin: 9px 0 0; width: 100%; max-width: 420px; }
.entry { padding: clamp(12px, 2.5vw, 28px); width: min(100%, 420px); justify-self: center; }
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; margin-bottom: 12px;
  border: 1px solid #d5ab75; border-radius: 9px; background: #a66c3a22;
}
.tabs button { background: transparent; color: #684636; border: 1px solid transparent; border-radius: 6px; min-height: 36px; white-space: nowrap; }
.tabs button[aria-pressed=true] { background: #774135; color: #fff2d0; border-color: #603627; font-weight: 800; }
form label { display: block; margin: 0 0 4px; font-size: .86rem; font-weight: 700; }
input, .size-value {
  display: block; width: 100%; min-height: 38px; padding: 5px 9px;
  border: 1px solid #aa7746; border-radius: 7px; color: var(--ink); background: #fff8df;
}
.size-picker { position: relative; }
.size-value { display: flex; align-items: center; justify-content: space-between; }
.size-value::after {
  content: ""; width: 6px; height: 6px; margin-right: 3px;
  border: solid #67422d; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg);
}
.size-value[aria-expanded=true]::after { transform: translateY(2px) rotate(225deg); }
.size-options {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  max-height: min(146px, 30vh); overflow-y: auto; padding: 3px;
  border: 1px solid #a87948; border-radius: 7px; background: #fff0ca;
  box-shadow: 0 5px 12px #43292157; scrollbar-width: thin; scrollbar-color: #ad7646 #efd4a0;
}
.size-options button {
  display: block; width: 100%; min-height: 32px; padding: 4px 3px; text-align: center;
  border: 0; border-radius: 4px; color: var(--ink); background: transparent;
}
.size-options.above { top: auto; bottom: calc(100% + 4px); }
.size-options button[aria-selected=true] { background: #eed09a; font-weight: 800; }
.size-options button:focus-visible { outline: 1px solid #a65e37; outline-offset: -2px; }
input::placeholder { color: #805f4d; }
.field { margin-top: 9px; }
#room-code { text-transform: uppercase; letter-spacing: .14em; }
.check-label { display: flex; align-items: center; gap: 6px; width: fit-content; }
.check-label input { width: 16px; min-height: 16px; height: 16px; margin: 0; accent-color: #774135; }
#room-password { letter-spacing: .12em; }
.browsing .entry {
  width: min(100%, 550px); display: grid; gap: 0 12px;
  grid-template-columns: minmax(120px, 1fr) minmax(110px, 1fr);
}
.browsing .entry .tabs { grid-column: 1 / -1; }
.home.browsing { grid-template-columns: minmax(0, .85fr) minmax(318px, 1.15fr); }
.browsing .cover-illustration { width: min(100%, 420px); }
.public-rooms { min-width: 0; padding-left: 10px; border-left: 1px solid #bc8b56; }
.public-rooms h2 { margin: 0 0 5px; font-size: 1rem; }
.room-list { display: grid; gap: 5px; max-height: clamp(132px, 52vh, 315px); overflow-y: auto; scrollbar-width: thin; }
.public-room {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px;
  align-items: center; min-width: 0; width: 100%; padding: 5px;
  color: var(--ink); text-align: left; background: #fff2cc;
  border: 1px solid #bd8b58; border-radius: 6px;
}
.public-room.selected { border-color: #844329; background: #efd095; }
.public-room:disabled { background: #e9d4aa; }
.public-room-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.public-room-code, .public-room-count, .public-room-status { white-space: nowrap; font-size: .7rem; }
.public-room-status { color: #79412d; }
.no-rooms { color: #754639; font-size: .85rem; }
.room-members { display: grid; gap: 6px; }
.room-member { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.room-member strong { overflow-wrap: anywhere; }
#enter { margin-top: 13px; width: 100%; }
.room { display: grid; align-items: center; }
.room-board {
  width: min(100%, 1040px); margin: auto; display: grid; grid-template-columns: 1fr minmax(146px, 24%);
  align-items: stretch; gap: 16px; padding: 13px 16px;
}
.room-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; }
.room-head h1 { font-size: 1.45rem; }
.room-head span { color: #694637; font-size: .84rem; }
.seats { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: 7px; }
.seat {
  min-width: 0; padding: 4px; border: 1px solid #6d452c; border-radius: 8px;
  background: linear-gradient(#785040, #4f3329); color: #fff1c9;
  box-shadow: inset 0 0 0 1px #cd966a70; text-align: center;
}
.seat:not(:disabled):hover, .seat.mine { border-color: #e4ad56; box-shadow: inset 0 0 0 1px #ffd374; }
.seat-art {
  display: grid; position: relative; place-items: center; height: clamp(48px, 14vh, 114px);
  border-radius: 5px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #688269, #29453b);
}
.seat-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 33%; }
.seats:not(.compact) .seat-art { height: clamp(62px, 28vh, 160px); }
.seat-mark { position: absolute; left: 4px; top: 4px; background: #7e3028; color: #ffe7a9; border: 1px solid #ddaa65; border-radius: 4px; padding: 0 3px; font-size: .68rem; }
.seat-mark.ready { background: #37634c; }
.seat-empty { color: #d5c990; font: 800 1.75rem var(--display); }
.seat-name, .seat-character { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-name { margin-top: 3px; font-size: .8rem; }
.seat-character { color: #e9c690; font-size: .72rem; }
.room-controls { display: flex; flex-direction: column; justify-content: center; gap: 9px; border-left: 1px solid #bd9059; padding-left: 13px; }
.room-controls p { font-size: .8rem; line-height: 1.35; }
.room-options, .setting-choices, .swap-request { display: flex; flex-wrap: wrap; gap: 6px; }
.setting-field { border: 1px solid #bd9059; border-radius: 7px; padding: 7px 9px 9px; margin: 0 0 9px; }
.setting-field legend { padding: 0 5px; font-size: .86rem; }
.setting-choices .secondary[aria-pressed="true"] { background: #76372a; color: #fff2cf; }
.setting-choices .suggested-setting { outline: 2px solid #94723e; outline-offset: 2px; }
.practice-recommendation { margin-bottom: 8px; font-size: .85rem; }
.room-practice {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; margin-bottom: 8px;
  padding: 6px 8px; border: 1px solid #bd9059; border-radius: 8px;
  color: var(--ink); background: #fff1cc;
}
.room-practice-copy { flex: 1 1 140px; }
.room-practice-copy strong { font-family: var(--display); }
.room-practice-copy p { font-size: .8rem; line-height: 1.35; }
.room-practice .secondary { min-height: 30px; }
.guide-link {
  min-height: 30px; padding: 0 3px; border: none; background: transparent;
  color: #713729; font-size: .8rem; text-decoration: underline;
}
.swap-request { border: 1px solid #bd9059; border-radius: 7px; padding: 6px; }
.swap-request p { flex-basis: 100%; }
.room-code { color: #663725; background: #fff3cd; border: 1px dashed #a7703d; padding: 6px; border-radius: 7px; text-align: center; }
.room-code strong { display: block; font: 800 1.15rem ui-monospace, monospace; letter-spacing: .12em; }
.room-code small { font-size: .72rem; }
.game {
  height: calc(100vh - var(--toolbar)); height: calc(100dvh - var(--toolbar));
  min-height: 275px; padding-block: 7px;
  padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right));
}
.battle-table {
  position: relative; isolation: isolate; height: 100%; max-width: 1320px; margin: auto;
  display: grid; grid-template-rows: minmax(79px, 33%) minmax(75px, 1fr) minmax(78px, 29%);
  padding: 6px 8px; border: 4px solid #754b31; border-radius: 15px;
  box-shadow: inset 0 0 0 2px #c59053, inset 0 0 0 5px #214238, 0 0 0 1px #d8a15f, 0 3px 8px #22171299;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, #f6d89206 11px 12px),
    radial-gradient(ellipse at 50% 45%, #789269 0, #4d7561 50%, #2d5447 100%);
}
.battle-table::before {
  content: ""; position: absolute; z-index: -1; inset: 14% 13% 12%;
  border: 1px solid #ffe6a62b; border-radius: 50%;
  box-shadow: 0 0 0 5px #ffdb9720, 0 0 0 7px #ffdb9717;
}
.tutorial-coach {
  position: absolute; z-index: 2; top: 10px; left: 10px; width: min(25%, 235px);
  border: 1px solid #e2b773; border-radius: 8px; padding: 7px 9px;
  background: linear-gradient(#653e31, #492d24); color: #fff1cd;
  box-shadow: 0 2px 5px #211a15a0;
}
.tutorial-coach small { display: block; color: #e9bc7a; font-size: .75rem; }
.tutorial-coach strong { display: block; color: #ffdd91; font-family: var(--display); }
.tutorial-coach p { margin-top: 3px; font-size: .82rem; line-height: 1.35; }
.tutorial-focus { outline: 2px solid #ffe28a; outline-offset: 2px; }
.tutorial-lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lesson-tile {
  position: relative; display: grid; gap: 3px; justify-items: start; text-align: left;
  min-height: 70px; padding: 7px 9px; border: 1px solid #b4794b; border-radius: 8px;
  background: linear-gradient(#fff6db, #f1d7a1);
}
.lesson-tile strong { font-family: var(--display); }
.lesson-tile span { font-size: .82rem; line-height: 1.35; }
.lesson-done { color: #395535; }
.tutorial-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tutorial-roles { margin-block: 8px 0; }
.rivals { display: flex; justify-content: center; gap: clamp(4px, 2.3vw, 38px); min-height: 0; }
.player {
  position: relative; width: clamp(57px, 11vw, 104px); height: 100%; min-width: 0;
  padding: 2px 2px 0; border: 2px solid #774827; border-radius: 9px;
  background: #593728; color: #fff0c8;
  box-shadow: inset 0 0 0 1px #d5a666, 0 2px 2px #1e342c80;
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; align-content: end;
}
.player.turn { border-color: #ffcb63; box-shadow: 0 0 0 1px #af6933, 0 0 12px #ffcf72b0; }
.player.target { border-color: #ffde75; box-shadow: 0 0 0 2px #a33c29, 0 0 14px 2px #ffde8c; }
.player.dim-target { opacity: .75; }
.player.dead .portrait { filter: grayscale(.9) brightness(.55); }
.portrait { position: relative; min-height: 0; overflow: hidden; border-radius: 5px 5px 2px 2px; background: #314c3d; }
.portrait > img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.identity {
  position: absolute; z-index: 1; top: 2px; left: 2px;
  min-width: 18px; min-height: 18px; padding: 0 2px; display: grid; place-items: center;
  border: 1px solid #e2b774; border-radius: 5px; background: #493c39; color: #ffedbe;
  font: 900 .75rem var(--display); line-height: 1;
}
.identity[data-role=主公] { background: #9b352b; }
.identity[data-role=忠臣] { background: #9b6729; }
.identity[data-role=反贼] { background: #476645; }
.identity[data-role=内奸] { background: #624968; }
.player.dead .portrait::after {
  content: "阵亡"; position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%) rotate(-13deg);
  padding: 1px 4px; white-space: nowrap; color: #ffe1b9; background: #8b3125d9;
  border: 1px solid #cc865d; border-radius: 3px; font-size: .77rem; font-weight: 900;
}
.hand-count {
  position: absolute; z-index: 1; top: 3px; right: 2px; display: flex; gap: 2px; align-items: center;
  background: #302920e8; border-radius: 5px; border: 1px solid #b88d60; padding: 0 3px;
  font: 800 10px ui-monospace, monospace;
}
.hand-count::before { content: ""; width: 6px; height: 9px; border: 1px solid #f1d6a2; border-radius: 1px; background: #885143; transform: rotate(-10deg); }
.takeover-mark {
  position: absolute; left: 2px; bottom: 2px; padding: 1px 4px; color: #392218;
  background: #f5c777; border: 1px solid #88502f; border-radius: 4px;
  font: 800 10px/1.2 sans-serif;
}
.player-caption { display: block; padding: 0 2px; font: 900 clamp(10px, 1.65vh, 13px) var(--display); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-foot { min-height: 14px; display: flex; gap: 2px; justify-content: center; align-items: center; }
.hp { display: inline-flex; justify-content: center; align-items: center; gap: 2px; font-family: sans-serif; white-space: nowrap; }
.hp i {
  width: 7px; height: 9px; border: 1px solid #b3ce73; border-radius: 75% 35% 75% 35%;
  background: #84a74c; box-shadow: inset 0 1px #c6dc93;
}
.hp i.empty { background: #403529; border-color: #7d6d50; box-shadow: none; }
.gear-dot, .status-dot { font: 700 8px sans-serif; padding: 1px 2px; background: #986842; color: #fff2cb; border-radius: 2px; line-height: 1; }
.status-dot { background: #8e332b; }
.battle-middle {
  display: grid; align-items: center; justify-items: center;
  grid-template-columns: minmax(38px, .65fr) minmax(150px, 1.6fr) minmax(38px, .65fr);
  width: min(64%, 555px); min-height: 0; margin: 0 auto; gap: 7px;
}
.battle-middle.with-chat {
  width: 100%; max-width: 850px;
  grid-template-columns: minmax(106px, 21%) minmax(38px, .65fr) minmax(124px, 1.6fr) minmax(38px, .65fr);
}
.table-chat {
  align-self: center; width: 100%; min-width: 0; padding: 4px 6px;
  border: 1px solid #c9965c; border-radius: 8px; background: #302b21e8;
  color: #fff1cf; box-shadow: 0 2px 4px #251f186b; text-align: left;
}
.table-chat:focus-visible { outline: 2px solid #ffe399; outline-offset: 2px; }
.table-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.table-chat-head strong { color: #ffd88b; font: 800 .75rem var(--display); white-space: nowrap; }
.chat-open {
  display: grid; place-items: center; min-height: 26px; padding: 2px 5px; border: 1px solid #a77a4f; border-radius: 5px;
  color: #fff1cf; background: #724939; font-size: .72rem; white-space: nowrap;
}
.chat-preview { display: block; padding: 3px 0 0; min-height: 3.65em; font-size: .76rem; line-height: 1.25; }
.chat-preview > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview strong { margin-right: 5px; color: #edbe7c; }
.chat-empty { color: #cfc0a4; }
.pile { border: 0; background: transparent; color: #ffebbc; display: grid; justify-items: center; gap: 3px; padding: 0; font: 800 .7rem var(--display); text-shadow: 0 1px #30291c; }
.pile > img, .discard-card { width: clamp(32px, 8vh, 69px); aspect-ratio: 2/3; border-radius: 4px; }
.pile > img { object-fit: cover; border: 1px solid #e9c381; box-shadow: 2px 2px 0 #6a442c, 4px 4px 0 #ce9f5b, 5px 5px 0 #593d2b; }
.discard-card { background: #213d30a0; border: 1px dashed #bda878; display: grid; place-items: center; }
.discard-card > .card-face { width: 100%; height: 100%; }
.table-center { display: grid; place-items: center; min-width: 0; min-height: 0; width: 100%; }
.played-cards {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; height: clamp(44px, 19vh, 139px); border: 1px solid #f4dd9f50;
  border-radius: 13px; background: #1b433426;
}
.played-cards::before { content: "豬"; position: absolute; color: #f8e0a733; font: 900 clamp(25px, 8vh, 59px) var(--display); }
.played-cards .card-face { height: 96%; position: relative; z-index: 1; box-shadow: 0 2px 5px #231d19b0; }
.played-cards .context-card { opacity: .78; transform: rotate(-7deg) scale(.92); }
.played-cards.revealed-hand {
  justify-content: flex-start; gap: 4px; padding: 3px 5px; overflow-x: auto;
  border-color: #f5c36e; background: #304339; scrollbar-width: thin;
}
.played-cards.revealed-hand::before { display: none; }
.revealed-hand > .card-face { flex: 0 0 auto; }
.revealed-hand > span:not(.card-face) { margin: auto; }
.table-callout { font-size: clamp(10px, 2.6vh, 14px); min-height: 1.35em; margin-top: 2px; color: #fff0c6; text-align: center; line-height: 1.25; text-shadow: 0 1px #2c3327; }
.battle-dock {
  display: grid; grid-template-columns: minmax(56px, 13%) minmax(0, 1fr) minmax(103px, 22%);
  min-height: 0; gap: 6px; border: 1px solid #a7774b; border-radius: 9px;
  background: linear-gradient(#694438, #4a3028); padding: 3px; box-shadow: 0 2px 0 #3d2a23;
}
#self-seat { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; }
#self-seat .player { max-width: 100%; height: 100%; }
.hand { display: flex; align-items: flex-end; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 2px; scrollbar-width: thin; }
.card-face {
  position: relative; display: block; width: auto; aspect-ratio: 2/3;
  overflow: hidden; padding: 0; color: #2a1c17; background: #d3af6f;
  border: 1px solid #edc58d; border-radius: 5px;
}
.card-face > img { width: 100%; height: 100%; object-fit: cover; }
.card-rank {
  position: absolute; top: 2px; left: 2px; min-width: 12px; padding: 1px 2px;
  color: #251c19; background: #fff4dce8; border-radius: 3px;
  font: 800 clamp(9px, 2.3vh, 13px)/1.13 ui-monospace, monospace;
  text-align: center; white-space: pre-line;
}
.card-rank.red { color: #a32424; }
.hand .card-face {
  flex: 0 0 auto; height: 100%; max-height: 155px;
  margin-left: var(--overlap, 3px); box-shadow: -2px 1px 3px #2e201d75;
}
.hand .card-face:first-child { margin-left: 0; }
.hand .card-face:disabled { filter: brightness(.83) saturate(.80); }
.hand .card-face.available { outline: 1px solid #ffdc73; outline-offset: -2px; }
.hand .card-face.selected { translate: 0 -5px; border-color: #ffdf73; box-shadow: 0 0 0 2px #ffcf6c, 0 0 12px #ffb23d; z-index: 1; }
.battle-command {
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; min-width: 0;
  gap: 3px; padding: 3px 3px 1px; text-align: center;
}
.command-label { font-size: clamp(10px, 2.65vh, 13px); line-height: 1.15; color: #fff0ca; }
.command-actions { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.command-actions button { min-height: 34px; padding-inline: clamp(4px, 1.4vw, 12px); font-size: .83rem; }
.turn-clock { display: flex; align-items: center; gap: 4px; margin: 0 3px; color: #ffe8af; font-size: 9px; }
.turn-clock i { position: relative; flex: 1; height: 5px; background: #2e2520; border-radius: 4px; overflow: hidden; }
.turn-clock b { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, #e49c42, #ffdf7f); }
.effects { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; border-radius: 10px; }
.effects .moving-card { position: absolute; height: clamp(40px, 18vh, 132px); transform: translate(-50%, -50%); box-shadow: 1px 3px 7px #231b16a0; }
.effect-figure { position: absolute; transform: translate(-50%, -50%); height: clamp(43px, 19vh, 130px); object-fit: contain; filter: drop-shadow(0 1px 3px #251712a0); }
.effect-arrow {
  position: absolute; height: 3px; transform-origin: left center; border-radius: 3px;
  background: #ec503a; box-shadow: 0 0 0 1px #ffdfa5, 0 0 8px #f95739;
}
.effect-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border-block: 6px solid transparent; border-left: 10px solid #f05237; }
.effect-skill { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
.skill-banner {
  position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%);
  border: 2px solid #f0be69; border-radius: 7px; padding: 7px 26px;
  background: linear-gradient(#87483b, #523022); color: #ffe4ab; white-space: nowrap;
  font: 900 clamp(19px, 6vh, 42px) var(--display); box-shadow: 0 3px 12px #311c13aa;
}
.effect-value { position: absolute; transform: translate(-50%, -50%); color: #fff3d1; font: 900 clamp(20px, 7vh, 43px) var(--display); text-shadow: 0 2px #9c3324, 0 0 4px #9c3324; }
.effect-value.heal { text-shadow: 0 2px #356941, 0 0 4px #356941; }
dialog { width: min(94vw, 800px); max-height: 91vh; max-height: 91dvh; overflow: auto; padding: 11px 14px; }
dialog::backdrop { background: #261913b8; }
dialog h2 { font-size: 1.36rem; margin-bottom: 7px; }
dialog p { font-size: .86rem; line-height: 1.45; }
dialog .modal-close { display: flex; justify-content: flex-end; gap: 7px; margin-top: 9px; }
.practice-complete { width: min(90vw, 410px); }
.practice-complete p { font-size: 1rem; }
.match-chat { width: min(94vw, 510px); }
.chat-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; }
.chat-title h2 { margin: 0; }
.chat-title button { min-height: 32px; }
.chat-log {
  height: clamp(82px, 43dvh, 300px); overflow: auto; overscroll-behavior: contain;
  padding: 7px 9px; border: 1px solid #bd9059; border-radius: 7px; background: #86573518;
  scrollbar-width: thin; scrollbar-color: #aa7345 #edcf96;
}
.chat-log ul { list-style: none; padding: 0; }
.chat-log ul:empty::before { content: "暂无消息"; color: #6a4b39; font-size: .82rem; }
.chat-message { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 7px; }
.chat-message:last-child { margin-bottom: 0; }
.chat-sender { font-size: .74rem; color: #784836; word-break: break-all; }
.chat-bubble {
  padding: 4px 7px; border: 1px solid #ceaa76; border-radius: 6px; background: #fff3ce;
  font-size: .9rem; overflow-wrap: anywhere;
}
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; margin-top: 8px; }
.chat-form input, .chat-form button { min-height: 36px; }
.chat-feedback { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; color: #694531; font-size: .78rem; }
#chat-count { white-space: nowrap; }
.chat-feedback .over-limit { color: #932c20; font-weight: 800; }
.character-picker {
  display: grid; grid-template-columns: minmax(0, 2.3fr) 13px minmax(155px, 1fr);
  align-items: stretch; gap: 7px;
}
.character-gallery, .character-picker .character-detail {
  height: clamp(132px, calc(88dvh - 105px), 360px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #aa7345 #edcf96;
}
.character-gallery { padding: 3px; scrollbar-width: none; }
.character-gallery::-webkit-scrollbar { display: none; }
.gallery-scroll {
  writing-mode: vertical-lr; direction: ltr; width: 13px; height: 100%; min-height: 0;
  padding: 0; margin: 0; border: 0; background: transparent; accent-color: #a36b44; cursor: ns-resize;
}
.gallery-scroll:disabled { visibility: hidden; }
.character-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 7px; align-content: start; }
.character-option { min-width: 0; border: 1px solid #8a5537; background: #593729; color: #ffebc1; padding: 2px; border-radius: 6px; font-size: .72rem; font-weight: 700; }
.character-option[aria-pressed=true] { outline: 2px solid #bd552b; outline-offset: 0; background: #844329; }
.character-option .seat-art { height: auto; aspect-ratio: 2 / 3; }
.character-option .seat-art img { object-fit: contain; object-position: center; }
.character-option .seat-name { font-size: inherit; }
.character-detail { border-left: 1px solid #bd9059; padding-left: 11px; }
.character-detail h3 { font-size: 1.25rem; }
.character-detail .skill + .skill { margin-top: 6px; }
.character-detail .portrait-large { width: 48px; aspect-ratio: 2 / 3; margin: 0 8px 4px 0; object-fit: contain; border: 1px solid #93613d; border-radius: 5px; float: left; }
.character-detail .skill { clear: both; }
.character-detail .hp { margin-top: 5px; }
.character-detail .hp i { border-color: #577241; }
.rules-dialog { width: min(93vw, 730px); }
.rules-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rules-header h2 { margin: 0; }
.rules-header button { min-height: 34px; }
.rules-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.rules-nav button {
  min-height: 35px; padding: 3px 9px; color: var(--ink);
  border: 1px solid #b68851; border-radius: 5px; background: #f5dfa9;
}
.rules-nav button[aria-pressed=true] { background: #754639; color: #fff1ce; }
.rules-content {
  height: clamp(137px, calc(84dvh - 93px), 460px); overflow-y: auto; padding: 0 6px 0 1px;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #aa7345 #edcf96;
}
.rules-content h3 { margin: 9px 0 4px; }
.rules-content p + p { margin-top: 6px; }
.rules-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 0; }
.rules-roles div { display: flex; align-items: baseline; gap: 6px; font-size: .86rem; }
.rules-roles dt { flex: 0 0 auto; font-weight: 800; color: #8b4030; }
.rules-roles dd { margin: 0; }
.identity-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.identity-table th, .identity-table td { text-align: left; padding: 3px 6px; border-bottom: 1px solid #b986504f; }
.rules-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.rules-cards > p { grid-column: 1 / -1; }
.rules-cards article { min-height: 65px; padding: 5px; border-top: 1px solid #b986504f; }
.rules-cards article img { width: 40px; height: 60px; float: left; margin: 0 7px 2px 0; border-radius: 4px; }
.rules-cards article h3 { margin: 0 0 2px; }
.log { list-style: none; padding: 0; margin: 0; max-height: 62vh; overflow-y: auto; }
.log li { padding: 5px 0; border-bottom: 1px solid #c398664f; font-size: .85rem; }
.result-layout { text-align: center; }
.result-ribbon {
  margin: -1px auto 9px; width: min(320px, 92%); padding: 7px 12px;
  background: linear-gradient(#a94a32, #7f3026); color: #ffe8af;
  border: 1px solid #b47a44; border-radius: 8px; box-shadow: 0 2px #703d2b;
}
.result-ribbon h2 { margin: 0; font-size: clamp(19px, 6.8vh, 36px); }
.result-ribbon p { color: #ffdab0; margin-top: 2px; }
.result-seats { display: flex; justify-content: center; gap: 5px; }
.result-seats .seat { width: min(12vw, 92px); }
.result-seats .seat-art { height: clamp(43px, 16vh, 105px); }
.result-layout > .primary { margin-top: 10px; }
.toast {
  position: fixed; z-index: 6; left: 50%; bottom: max(9px, env(safe-area-inset-bottom));
  transform: translateX(-50%); background: #fff0c9; color: var(--ink);
  border: 1px solid #a86e3e; border-radius: 7px; box-shadow: 0 3px 8px #321d1860;
  padding: 6px 10px; max-width: 90vw;
}
@media (max-height: 390px) {
  :root { --toolbar: 36px; }
  .setting-field { padding-block: 4px 6px; margin-bottom: 6px; }
  .setting-choices .secondary { min-height: 34px; padding-block: 4px; }
  .scene { padding-top: 7px; padding-bottom: 7px; }
  .room-board { padding-block: 9px; }
  .player-foot { min-height: 12px; }
  .hp i { width: 6px; height: 8px; }
  .entry.has-password { padding-block: 9px; }
  .entry.has-password .tabs { margin-bottom: 6px; }
  .entry.has-password .field { margin-top: 5px; }
  .entry.has-password #enter { margin-top: 7px; }
}
@media (max-width: 690px) {
  .home { padding-inline: 16px; gap: 12px; }
  .rivals { gap: 5px; }
  .battle-table { padding-inline: 4px; }
  .room-board { gap: 9px; padding-inline: 10px; }
  .tutorial-coach { width: 25%; padding: 5px 6px; }
  .tutorial-coach p { font-size: .76rem; }
}
@media (max-height: 340px) {
  .entry.has-password .tabs button { min-height: 29px; }
  .entry.has-password form label { margin-bottom: 2px; }
  .entry.has-password form input:not([type=checkbox]),
  .entry.has-password .size-value, .entry.has-password #enter { min-height: 32px; }
}
@media (orientation: portrait) and (max-width: 580px) {
  .home, .home.browsing { grid-template-columns: 1fr; align-content: center; padding-block: 14px; }
  .cover-illustration { width: 85vw; height: 170px; }
  .room-board { grid-template-columns: 1fr; }
  .room-controls { border: 0; padding: 0; }
  .game { min-width: 570px; }
}

@media (min-width: 1024px) and (min-height: 640px) and (hover: hover) and (pointer: fine) {
  :root { font-size: 16px; --toolbar: 62px; }
  .topbar {
    padding-inline: max(30px, calc((100vw - 1360px) / 2));
    background: linear-gradient(110deg, #40271f, #32221b 58%, #432a21);
    border-bottom-color: #ac7948;
  }
  .brand { gap: 11px; font-size: 1.25rem; }
  .brand img { width: 38px; border-radius: 9px; }
  .header-actions { gap: 10px; }
  .connection { margin-right: 5px; }
  .utility { min-height: 36px; padding-inline: 13px; }
  .utility:not([aria-pressed=true]):hover, .secondary:not(:disabled):hover { background: #855341; }
  .primary:not(:disabled):hover { background: linear-gradient(#ffe0a0, #edb75d); }

  .scene {
    background:
      radial-gradient(ellipse at 35% 24%, #3d6351, transparent 63%),
      repeating-linear-gradient(135deg, #e8bd7a08 0 1px, transparent 1px 12px),
      #172f28;
  }
  .home, .home.browsing {
    grid-template-columns: minmax(0, 600px) minmax(0, 430px);
    justify-content: center; gap: clamp(28px, 5vw, 80px); padding: 28px clamp(30px, 5vw, 86px);
  }
  .home.browsing { grid-template-columns: minmax(0, 480px) minmax(0, 600px); }
  .cover-illustration, .browsing .cover-illustration {
    width: min(100%, 520px); height: clamp(248px, 39dvh, 385px); isolation: isolate;
    background: radial-gradient(ellipse at 50% 50%, #d7ad5840, transparent 70%);
  }
  .cover-illustration::before {
    content: ""; position: absolute; z-index: -1; width: min(83%, 41dvh); aspect-ratio: 1;
    border: 1px solid #d9bc6c55; border-radius: 50%;
    box-shadow: 0 0 0 10px #e5c67310, 0 0 0 11px #e5c67323;
  }
  .cover-card { width: 29%; height: 78%; border-radius: 13px; }
  .cover-card-left { left: 8%; }
  .cover-card-right { right: 8%; }
  .cover-mascot { height: 88%; max-width: 60%; }
  .cover-title { margin-top: 6px; }
  .cover-title h1 { font-size: clamp(56px, 8.4dvh, 80px); }
  .cover-title p { margin-top: 11px; font-size: .95rem; }
  .tutorial-entry { margin-top: 20px; min-height: 41px; padding-inline: 19px; }
  .room-practice-mode .cover-illustration { height: clamp(166px, 29dvh, 272px); }
  .cover .room-practice { margin-top: 16px; }
  .home .entry { width: 100%; padding: clamp(23px, 2.5vw, 35px); border-radius: 16px; }
  .home.browsing .entry { gap: 0 18px; }
  .entry .tabs { gap: 5px; margin-bottom: 21px; padding: 5px; }
  .entry .tabs button { min-height: 42px; }
  .entry .tabs button:not([aria-pressed=true]):hover { background: #e7c58b; }
  .entry label { margin-bottom: 7px; }
  .entry input:not([type=checkbox]), .size-value { min-height: 44px; padding-inline: 12px; }
  .entry .field { margin-top: 15px; }
  #enter { min-height: 45px; margin-top: 19px; }
  .public-rooms { padding-left: 16px; }
  .public-rooms h2 { margin-bottom: 10px; }
  .public-room { gap: 4px 7px; padding: 9px; }
  .public-room:not(:disabled):hover { border-color: #8e4d31; background: #ffedbd; }

  .room { padding: 28px clamp(26px, 5vw, 80px); }
  .room-board {
    width: min(100%, 1190px); grid-template-columns: minmax(0, 1fr) clamp(202px, 22vw, 264px);
    gap: clamp(16px, 2.5vw, 32px); padding: clamp(20px, 2.65vw, 35px); border-radius: 16px;
  }
  .room-head { gap: 15px; padding-bottom: 17px; }
  .room-head h1 { font-size: 1.85rem; }
  .seats { grid-template-columns: repeat(var(--columns), minmax(0, 154px)); justify-content: center; gap: 10px; }
  .seats .seat { padding: 5px; border-radius: 10px; }
  .seats .seat-art { grid-template-rows: minmax(0, 1fr); height: clamp(86px, 15dvh, 142px); }
  .seats:not(.compact) .seat-art { height: clamp(135px, 23dvh, 202px); }
  .seats .seat-art img { object-fit: contain; object-position: center; }
  .seats .seat-name { margin-top: 6px; }
  .seats .seat-mark { left: 6px; top: 6px; padding: 2px 5px; }
  .room-controls {
    gap: 12px; padding: 14px; border: 1px solid #c49a66; border-radius: 11px; background: #98653714;
  }
  .room-code { padding: 11px 6px; }
  .room-code strong { margin-top: 3px; font-size: 1.5rem; }
  .room-code:hover { background: #fff8de; }
  .room-options { gap: 8px; }
  .room-options button { flex: 1; white-space: nowrap; }

  .game { padding: 18px clamp(19px, 3vw, 56px) 24px; }
  .battle-table {
    max-width: 1440px; height: min(100%, 920px); padding: 14px clamp(12px, 1.55vw, 23px);
    grid-template-rows: clamp(124px, 23dvh, 205px) minmax(0, 1fr) clamp(136px, 23dvh, 204px);
    gap: 12px; border-radius: 21px;
    box-shadow: inset 0 0 0 2px #c59053, inset 0 0 0 6px #214238, 0 0 0 1px #d8a15f, 0 9px 30px #0f211b;
    background:
      repeating-linear-gradient(135deg, transparent 0 11px, #f6d89207 11px 12px),
      radial-gradient(ellipse at 52% 46%, #64886b 0, #386354 58%, #224339 100%);
  }
  .battle-table::before { inset: 16% 8% 13%; }
  .rivals { align-items: stretch; gap: clamp(10px, 1.5vw, 22px); }
  .player { width: clamp(91px, 9.35vw, 136px); padding: 4px 4px 2px; border-radius: 11px; }
  .player:not(.dead):hover { border-color: #f4c47a; }
  .identity { top: 4px; left: 4px; min-width: 22px; min-height: 22px; }
  .hand-count { top: 4px; right: 4px; padding: 2px 4px; font-size: 12px; }
  .player-caption { padding: 4px 2px 1px; font-size: clamp(12px, 1.12vw, 15px); }
  .player-foot { min-height: 20px; gap: 4px; }
  .hp { gap: 3px; }
  .hp i { width: 9px; height: 12px; }
  .gear-dot, .status-dot { font-size: 10px; }

  .battle-middle { width: min(78%, 865px); gap: 15px; }
  .battle-middle.with-chat {
    width: 100%; max-width: 1120px;
    grid-template-columns: minmax(167px, 19%) minmax(56px, 10%) minmax(0, 1fr) minmax(115px, 29%);
  }
  .table-chat { padding: 11px 13px; border-color: #cd9d60; border-radius: 11px; background: #282820e8; }
  .table-chat:hover .chat-open { background: #8e5841; }
  .table-chat-head strong { font-size: .92rem; }
  .chat-open { min-height: 29px; padding-inline: 8px; }
  .chat-preview { min-height: 4.2em; padding-top: 8px; font-size: .82rem; line-height: 1.45; }
  .pile { gap: 6px; font-size: .83rem; }
  .pile > img, .discard-card { width: clamp(46px, 8dvh, 71px); }
  .discard-pile:hover .discard-card { border-color: #ffe4a1; }
  .played-cards {
    height: clamp(100px, 19dvh, 174px); border-radius: 17px; background: #173c3040;
    box-shadow: inset 0 1px 12px #203c314a;
  }
  .table-callout { margin-top: 9px; font-size: .93rem; }
  .battle-dock {
    grid-template-columns: clamp(106px, 12vw, 160px) minmax(0, 1fr) clamp(158px, 18vw, 230px);
    padding: 9px 12px; gap: 12px; border-radius: 12px;
    background: linear-gradient(110deg, #573b30, #3b2822);
  }
  .hand { padding-top: 11px; }
  .hand .card-face { max-height: 172px; border-radius: 7px; }
  .hand .card-face.available:hover { z-index: 1; box-shadow: 0 0 0 2px #ffcf6c; }
  .card-rank { top: 4px; left: 4px; font-size: 14px; }
  .battle-command { gap: 9px; border-left: 1px solid #c391624d; padding: 5px 0 5px 10px; }
  .command-label { font-size: .91rem; }
  .command-actions { gap: 6px; }
  .command-actions button { min-height: 39px; }
  .turn-clock { font-size: .72rem; }
  .turn-clock i { height: 7px; }
  .tutorial-coach { left: 20px; top: 19px; padding: 12px; width: min(23%, 260px); }

  dialog { padding: 20px 23px; border-radius: 15px; }
  dialog h2 { font-size: 1.65rem; margin-bottom: 13px; }
  dialog p { line-height: 1.6; }
  .match-chat { width: min(90vw, 620px); }
  .chat-title { margin-bottom: 12px; }
  .chat-title h2, .rules-header h2, .result-ribbon h2 { margin: 0; }
  .chat-log { height: clamp(235px, 40dvh, 360px); padding: 11px 13px; }
  .chat-message { margin-bottom: 10px; }
  .chat-form { margin-top: 13px; gap: 7px; }
  .chat-form input, .chat-form button { min-height: 41px; }
  .lesson-tile { padding: 12px; min-height: 90px; }
  #modal:has(.character-picker) { width: min(92vw, 940px); }
  .character-picker { grid-template-columns: minmax(0, 2.25fr) 13px minmax(180px, 1fr); gap: 10px; }
  .character-gallery, .character-picker .character-detail { height: clamp(360px, 61dvh, 570px); }
  .character-list { grid-template-columns: repeat(auto-fit, minmax(91px, 1fr)); gap: 9px; }
  .character-option { padding: 4px; }
  .character-detail .portrait-large { width: 70px; }
  .rules-nav { margin-block: 13px; gap: 7px; }
  .rules-content { height: clamp(360px, 62dvh, 570px); }
}