:root {
  --bg-dark: #0a2e1c;
  --table-green: #0b5c3b;
  --table-light: #127a4f;
  --wood-dark: #4a2c1b;
  --wood-light: #8b5a2b;
  --wood-border: #2e1a0f;
  --tile-face: #fdf5e6;
  --tile-back: #1f6b4a;
  --tile-border: #d2b48c;
  --tile-shadow: rgba(0, 0, 0, .4);
  --text-main: #fff;
  --text-gold: #f5c542;
  --text-red: #e63946;
  --text-blue: #4dabf7;
  --text-gray: #a0a0a0;
  --wild-glow: #ff4d4f;
  --btn-shadow: 0 4px 0 rgba(0, 0, 0, .3);
  --board-scale: 1;
  --lobby-glow: #236542;
  --lobby-mid: #103e2b;
  --room-start: #104a33;
  --room-center: #19734a;
  --room-end: #0a422e;
  --smart-start: #234e3c;
  --smart-center: #527138;
  --smart-end: #1a4733;
  --table-base: #315f60;
  --felt-tint: #315f6000;
  --bottom-start: #174d37;
  --bottom-end: #09281f;
  --top-start: #5a3a23;
  --top-end: #20170f;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: var(--bg-dark);
  color: var(--text-main);
}
:root[data-theme="ocean"] {
  --bg-dark: #0b2337; --wood-light: #568fa8; --text-gold: #8ee5ff;
  --lobby-glow: #28698d; --lobby-mid: #122f50;
  --room-start: #103952; --room-center: #17698a; --room-end: #0d304b;
  --smart-start: #183957; --smart-center: #336f93; --smart-end: #14283c;
  --table-base: #183e63; --felt-tint: #117fcee0;
  --bottom-start: #184b67; --bottom-end: #0a243b;
  --top-start: #3b5670; --top-end: #132c43;
}
:root[data-theme="vermilion"] {
  --bg-dark: #341d24; --wood-light: #b77445; --text-gold: #ffcd85;
  --lobby-glow: #9a4e3e; --lobby-mid: #532923;
  --room-start: #652e2b; --room-center: #a04c3d; --room-end: #512629;
  --smart-start: #62422c; --smart-center: #a3663e; --smart-end: #542c24;
  --table-base: #693b3a; --felt-tint: #be553ccc;
  --bottom-start: #713f34; --bottom-end: #361d24;
  --top-start: #8b5537; --top-end: #34201c;
}
:root[data-theme="violet"] {
  --bg-dark: #19152f; --wood-light: #926ca6; --text-gold: #e7c2ff;
  --lobby-glow: #634687; --lobby-mid: #302347;
  --room-start: #30234e; --room-center: #654587; --room-end: #261c44;
  --smart-start: #40305b; --smart-center: #8560a4; --smart-end: #281e46;
  --table-base: #463365; --felt-tint: #8560bacc;
  --bottom-start: #4b376d; --bottom-end: #201830;
  --top-start: #584069; --top-end: #241b38;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, select, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
#app { min-height: 100vh; }
.orientation-gate { display: none; }

/* The lobby is a separate, naturally scrolling room-selection screen. */
.arcade-lobby {
  min-height: 100vh;
  padding: 24px max(28px, calc((100vw - 1320px) / 2));
  background:
    radial-gradient(ellipse at 51% 29%, var(--lobby-glow) 0, transparent 55%),
    repeating-linear-gradient(40deg, #ffffff06 0 1px, transparent 1px 8px),
    linear-gradient(120deg, var(--bg-dark), var(--lobby-mid) 55%, var(--bg-dark));
}
.lobby-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.lobby-tools { display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 10px; }
.rules-button { flex: none; padding: 7px 11px; border: 1px solid #e8bb69;
  border-radius: 6px; background: linear-gradient(#7c562e, #4b311d);
  color: #fff1c7; font-size: 12px; font-weight: bold; }
.rules-button:hover, .rules-button:focus-visible { filter: brightness(1.2); }
.reset-button { flex: none; padding: 7px 11px; border: 1px solid #c19a69;
  border-radius: 6px; background: #493023; color: #ffe2bb; font-size: 12px; font-weight: bold; }
.reset-button:hover, .reset-button:focus-visible { background: #69412b; }
.audio-toggle { flex: none; padding: 7px 11px; border: 1px solid #d3ad62;
  border-radius: 6px; background: #23422e; color: #ffdf91; font-size: 12px; font-weight: bold; }
.audio-toggle:hover, .audio-toggle:focus-visible { background: #396649; }
.audio-toggle[aria-pressed="false"] { color: #c9c9c1; border-color: #8d907e; }
.arcade-logo { display: flex; align-items: center; gap: 17px; }
.logo-stamp {
  display: grid; place-items: center; width: 70px; height: 70px; border: 4px ridge #f7d57d;
  border-radius: 14px; color: #ffdf86; background: linear-gradient(140deg, #9b301e, #5e1e16);
  box-shadow: inset 0 0 0 3px #6a211a, 0 5px 0 #32160f;
  font: 900 43px "STXingkai", "KaiTi", serif;
}
.arcade-logo small, .board-kicker, .overlay-kicker {
  display: block; font: 700 10px Arial, sans-serif; letter-spacing: .24em; color: #e9c878;
}
.arcade-logo h1 {
  margin: 2px 0 -3px; font: 900 40px "STXingkai", "KaiTi", serif; letter-spacing: .15em;
  color: #ffdf83; text-shadow: 1px 2px #4b2615, 2px 4px 5px #06170e;
  -webkit-text-stroke: .35px #fff1b6;
}
.arcade-logo div > span { color: #d1d7b0; font-size: 12px; letter-spacing: .25em; }
.local-badge { color: #b9e1ac; border: 1px solid #83a678; border-radius: 20px;
  padding: 9px 16px; background: #123924cc; font-size: 12px; }
.lobby-layout { display: grid; grid-template-columns: minmax(640px, 1fr) 325px; gap: 23px; }
.ornament-heading { display: flex; justify-content: space-between; align-items: end;
  color: #ffdf91; border-bottom: 2px solid #ac854a; margin-bottom: 12px; padding: 0 2px 7px; }
.ornament-heading span { font: bold 21px "KaiTi", serif; letter-spacing: .13em; }
.ornament-heading small { color: #b0bd97; font: 700 10px Arial, sans-serif; letter-spacing: .16em; }
.room-list { display: grid; gap: 10px; }
.arcade-room {
  display: grid; grid-template-columns: 86px minmax(0, 1fr) 142px; gap: 18px;
  align-items: center; width: 100%; height: 108px; padding: 8px 17px; text-align: left;
  border: 5px ridge var(--wood-light); border-radius: 11px;
  background:
    linear-gradient(90deg, var(--room-start), var(--room-center) 44%, var(--room-end)),
    var(--table-green);
  color: white; box-shadow: inset 0 0 0 2px #c69a52, 0 6px 0 #26190f, 0 11px 18px #06160f88;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.arcade-room:hover, .arcade-room:focus-visible {
  transform: translateY(-4px); filter: brightness(1.16);
  box-shadow: inset 0 0 0 2px #ffe8a1, 0 9px 0 #26190f, 0 13px 23px #f5c54250;
}
.room-smart { background: linear-gradient(90deg, var(--smart-start), var(--smart-center) 48%, var(--smart-end)); }
:root[data-theme="violet"] .arcade-room { border-radius: 3px; }
:root[data-theme="vermilion"] .arcade-room { border-radius: 18px; }
.room-avatar { display: grid; place-items: center; width: 75px; height: 75px; border-radius: 50%;
  border: 3px solid #f4ce76; background: radial-gradient(#bfddbd, #3f7859);
  box-shadow: 0 3px 8px #051d16aa; overflow: hidden; }
.room-avatar .portrait { width: 74px; height: 74px; border: 0; box-shadow: none; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.room-avatar .portrait img { object-position: center 18%; }
.room-copy { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.room-copy small { font: 700 10px Arial, sans-serif; color: #efd087; letter-spacing: .08em; }
.room-copy strong { font: bold 26px "KaiTi", "Microsoft YaHei", sans-serif; color: #fff0c1; }
.room-copy > span { font-size: 11px; color: #cfdec4; white-space: nowrap; }
.room-copy em { font-size: 10px; color: #f8d88c; font-style: normal; margin-top: 3px; }
.enter-room {
  justify-self: end; text-align: center; min-width: 122px; padding: 10px 9px; color: #543211;
  border-radius: 7px; border: 2px solid #ffe39b; background: linear-gradient(#ffe8a4, #d79b3e);
  font-weight: 900; font-size: 13px; box-shadow: 0 4px 0 #895621;
}
.enter-room b { padding-left: 3px; }
.secret-room { display: flex; align-items: center; gap: 12px; min-height: 62px; width: 100%;
  margin-top: 12px; padding: 10px 17px; border: 2px dashed #9f864e; border-radius: 8px;
  background: #183b2bd9; color: #eed18a; font-size: 13px; font-weight: bold; text-align: left; }
.secret-room > span { font-size: 23px; }
.secret-room small { color: #b0bfaa; font-size: 11px; font-weight: 400; }
.secret-room b { margin-left: auto; }
.secret-room.unlocked { border-style: solid; }
.secret-room.unlocked:hover { background: #286246; }
.settings-scroll { padding-top: 33px; }
.settings-board, .custom-dialog {
  color: #513821; border: 9px ridge #8c5b30; border-radius: 12px; padding: 19px;
  background: repeating-linear-gradient(0deg, #f9edc8 0 3px, #f5e8c3 3px 6px);
  box-shadow: inset 0 0 0 2px #ad8648, 0 10px 0 #2e1b10, 0 17px 27px #071a10aa;
}
.board-kicker { color: #976c35; }
.settings-board h2, .custom-dialog h2 { margin: 5px 0 22px; font: bold 26px "KaiTi", serif; }
.setting-field { margin-bottom: 20px; }
.setting-field label { display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: bold; }
.setting-field strong { color: #9d4b24; }
.setting-field input { display: block; width: 100%; margin: 15px 0 7px; accent-color: #c68a2f; }
.range-ends { display: flex; justify-content: space-between; color: #94785c; font-size: 10px; }
.theme-setting { margin: 15px 0 8px; border-top: 1px solid #baaa80; padding-top: 12px; }
.theme-setting > strong { display: block; margin-bottom: 9px; font-size: 13px; }
.theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.theme-option { display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 6px; border: 2px solid #c6b38c; border-radius: 7px;
  color: #493927; background: #fff9e9; text-align: left; }
.theme-option[aria-pressed="true"] { border-color: #9a502a; background: #ffe8b0;
  box-shadow: inset 0 0 0 1px #a45c33; }
.theme-option:focus-visible, .theme-cycle:focus-visible { outline: 3px solid #ffd76f; }
.theme-option i { flex: none; width: 27px; height: 27px; border: 2px solid #ffebc7;
  border-radius: 50%; background: var(--theme-swatch); box-shadow: 0 1px 4px #0005; }
.theme-preview-jade { --theme-swatch: linear-gradient(135deg, #1d6943, #e5be73); }
.theme-preview-ocean { --theme-swatch: linear-gradient(135deg, #17698a, #8ee5ff); }
.theme-preview-vermilion { --theme-swatch: linear-gradient(135deg, #a04c3d, #ffcd85); }
.theme-preview-violet { --theme-swatch: linear-gradient(135deg, #654587, #e7c2ff); }
.theme-option span { font-size: 11px; font-weight: bold; line-height: 1.2; }
.theme-option small { display: block; color: #806d53; font-size: 9px; font-weight: normal; }
.settings-row { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0;
  border-top: 1px solid #baaa80; font-size: 11px; }
.settings-row b { color: #4a5d39; }
.rule-note { margin: 15px 0 0; padding: 12px; background: #e6dbb2; border-left: 3px solid #ba7c29;
  font-size: 11px; line-height: 1.65; }
.lobby-foot { text-align: center; color: #99b594; padding-top: 23px; font-size: 11px; letter-spacing: .16em; }
.modal-scrim { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; background: #06190fe8; }
.custom-dialog { width: 430px; padding: 25px; }
.custom-dialog p { font-size: 12px; margin: 0 0 18px; }
.custom-dialog label { display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid #b7a47d; padding: 10px 0; font-size: 13px; }
.custom-dialog select { border: 1px solid #a2885c; border-radius: 4px; padding: 6px 15px;
  background: #fff9e5; color: #4e3822; }
.dialog-actions { display: flex; justify-content: end; gap: 12px; margin-top: 18px; }
.dialog-actions button { padding: 10px 14px; border-radius: 6px; border: 1px solid #9e8654; }
.reset-dialog { max-width: calc(100vw - 32px); }
.reset-dialog h2 { color: #853f2d; }
.reset-dialog p { line-height: 1.7; }
.reset-dialog .reset-error { color: #9d2929; font-weight: bold; }
.reset-confirm { border-color: #9e4233 !important; color: #fff8e8;
  background: linear-gradient(#c66a4e, #8e352f); font-weight: bold; }
.reset-confirm:hover { filter: brightness(1.12); }
.rules-scrim { z-index: 60; padding: 16px; }
.rules-dialog { display: flex; flex-direction: column; width: min(850px, 100%);
  max-height: min(90vh, 860px); max-height: min(90dvh, 860px); padding: 22px 28px; }
.rules-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.rules-heading h2 { margin-bottom: 10px; color: #673d26; }
.rules-close { flex: none; width: 36px; height: 36px; border: 1px solid #a38b61;
  border-radius: 6px; background: #f0dbac; color: #694329; font-size: 24px; line-height: 1; }
.rules-content { overflow-y: auto; min-height: 0; padding: 0 12px 0 2px;
  overscroll-behavior: contain; line-height: 1.7; }
.rules-dialog .rules-lead { padding: 12px 14px; border-left: 4px solid #b88032;
  border-radius: 4px; background: #e8d8aa; font-size: 14px; font-weight: bold; }
.rules-content section { padding: 11px 0; border-top: 1px solid #bfa67c; }
.rules-content h3 { margin: 0 0 7px; color: #773f28; font-size: 17px; }
.rules-dialog .rules-content p { margin: 0 0 9px; font-size: 13px; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rules-grid > div { padding: 10px 12px; border: 1px solid #cfb786;
  border-radius: 6px; background: #fff4d5; font-size: 12px; }
.rules-grid strong, .rules-grid span { display: block; }
.rules-grid strong { margin-bottom: 4px; color: #853f2d; }
.rules-example { padding: 10px 12px; border-radius: 6px; background: #e8d8aa; }
.rules-dialog .dialog-actions { flex: none; margin-top: 12px; }
.rules-dialog button:focus-visible { outline: 3px solid #a35927; outline-offset: 2px; }
.gold-button { padding: 12px 27px !important; color: #523015; font-weight: 900;
  border: 2px solid #ffdc86 !important; border-radius: 7px;
  background: linear-gradient(#fff0b0, #d99e43); box-shadow: 0 5px 0 #8d5b27; }
.gold-button:hover { filter: brightness(1.12); }

/* The table is a fixed design canvas, scaled around its center by arcade-main.js. */
.game-viewport { display: flex; align-items: center; justify-content: center;
  width: 100vw; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
  background: radial-gradient(var(--lobby-glow), var(--bg-dark) 75%); }
.arcade-game { display: flex; flex-direction: column; position: relative; flex: none;
  width: 1280px; height: 720px; transform: scale(var(--board-scale));
  background: var(--bg-dark); box-shadow: 0 0 100px #020e09; }
#top-bar { display: flex; align-items: center; gap: 16px; height: 64px; flex: none;
  padding: 0 21px; border-bottom: 4px solid #8a5627;
  background: linear-gradient(var(--top-start), var(--top-end)); }
.theme-cycle { flex: none; padding: 7px 10px; border: 1px solid var(--wood-light);
  border-radius: 6px; color: #fff2d6; background: #202530aa; font-size: 12px; }
.theme-cycle:hover { filter: brightness(1.3); }
.table-rules { background: #202530aa; }
.leave-button { color: #fff0c4; border: 2px solid #a98b54; background: linear-gradient(#765133, #49301f);
  border-radius: 7px; padding: 8px 17px; font-weight: bold; box-shadow: var(--btn-shadow); }
.leave-button:hover { filter: brightness(1.2); }
.top-brand { font: bold 26px "STXingkai", "KaiTi", serif; color: #ffe19a; letter-spacing: .1em; }
.top-brand span { margin-left: 12px; color: #d4c7a7; font: normal 13px "Microsoft YaHei", sans-serif; letter-spacing: 0; }
.top-progress { display: flex; gap: 16px; margin-left: auto; font-size: 12px; color: #e1d7b8; }
.top-progress b { font: bold 18px Impact, "Arial Black", sans-serif; color: var(--text-gold); }
#table-area { position: relative; flex: 1; overflow: hidden; border: 13px ridge var(--wood-light);
  background-color: var(--table-base);
  background-image: linear-gradient(var(--felt-tint), var(--felt-tint)), url("../images/table-felt.webp");
  background-position: center; background-size: 100% 100%; background-blend-mode: color, normal;
  box-shadow: inset 0 0 0 2px #2b231d, 0 3px 10px #04170e; }
.felt-grain { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(#093e3218, transparent 45%, #04251f20); }
#bottom-bar { position: relative; height: 174px; flex: none; border: 9px ridge var(--wood-light);
  background: linear-gradient(var(--bottom-start), var(--bottom-end)); }

.portrait { --hair: #493025; --coat: #4d7194; --skin: #f4c39c; position: relative;
  display: block; width: 58px; height: 58px; flex: none; overflow: hidden;
  border: 3px solid #f5d482; border-radius: 50%; background: linear-gradient(#b5d8a4, #5d9368);
  box-shadow: 0 2px 6px #06180f88; }
.portrait-1 { --hair: #ad372f; --coat: #f0a278; --skin: #f8c69e; }
.portrait-2 { --hair: #2f2929; --coat: #746aab; --skin: #ecc19a; }
.portrait-3 { --hair: #292a32; --coat: #398582; --skin: #f2c8ad; }
.portrait-body { position: absolute; width: 55px; height: 27px; bottom: -9px; left: 50%;
  transform: translateX(-50%); border-radius: 45% 45% 0 0; background: var(--coat); }
.portrait-neck { position: absolute; left: 25px; top: 39px; width: 10px; height: 12px; background: var(--skin); }
.portrait-ear { position: absolute; width: 7px; height: 12px; top: 27px; border-radius: 50%; background: var(--skin); }
.ear-left { left: 11px; } .ear-right { right: 10px; }
.portrait-face { position: absolute; z-index: 1; left: 15px; top: 11px; width: 30px; height: 37px;
  border-radius: 48% 48% 48% 48%; background: linear-gradient(125deg, #ffe1bc, var(--skin));
  box-shadow: inset -3px -2px 0 #b9675235; }
.portrait-eye { position: absolute; top: 17px; width: 4px; height: 5px; border-radius: 50%; background: #493026; }
.eye-left { left: 6px; } .eye-right { right: 6px; }
.portrait-nose { position: absolute; top: 20px; left: 14px; width: 2px; height: 5px; background: #dc997e; }
.portrait-smile { position: absolute; bottom: 7px; left: 11px; width: 10px; height: 4px;
  border-bottom: 2px solid #ad574a; border-radius: 0 0 50% 50%; }
.portrait-hair { position: absolute; z-index: 2; left: 10px; top: 5px; width: 42px; height: 18px;
  border-radius: 70% 60% 25% 30%; background: var(--hair); transform: rotate(-8deg);
  box-shadow: -3px 8px 0 -4px var(--hair); }
.portrait-1 .portrait-hair, .portrait-3 .portrait-hair { height: 14px; }
.portrait-2 .portrait-hair { box-shadow: -7px 12px 0 0 var(--hair), 5px 12px 0 0 var(--hair); }
.room-avatar .portrait-face { left: 20px; top: 15px; width: 34px; height: 43px; }
.room-avatar .portrait-hair { left: 15px; top: 8px; width: 47px; height: 22px; }
.room-avatar .portrait-body { width: 68px; height: 29px; }
.room-avatar .portrait-neck { left: 33px; top: 48px; }
.room-avatar .ear-left { left: 16px; top: 34px; }
.room-avatar .ear-right { right: 14px; top: 34px; }
.mood-beginner .portrait-smile { border-bottom-width: 3px; }
.mood-advanced .portrait-smile { border-bottom: 2px solid #63443c; border-radius: 0; }
.mood-smart .portrait-hair { background: #303035; }

.seat { position: absolute; z-index: 3; width: 182px; }
.seat-art { position: absolute; z-index: -1; width: 148px; height: 178px;
  object-fit: contain; object-position: center bottom; pointer-events: none;
  filter: drop-shadow(0 4px 4px #05221db3); }
.seat-west .seat-art { left: 5px; top: -82px; }
.seat-east .seat-art { right: 5px; top: -82px; }
.seat-north .seat-art { left: -122px; top: -4px; width: 112px; height: 100px; }
.seat-north { left: 50%; top: 2px; transform: translateX(-50%); width: 225px; }
.seat-west { left: 13px; top: 91px; }
.seat-east { right: 13px; top: 91px; }
.seat-identity { display: flex; align-items: center; gap: 8px; position: relative;
  padding: 6px; border: 2px solid #b49150; border-radius: 34px 10px 10px 34px;
  background: #292821 url("../images/cutouts/score-plaque.webp") center / 100% 100% no-repeat;
  box-shadow: 0 4px 7px #05281988; }
.seat-turn .seat-identity { border-color: #ffeb9e; box-shadow: 0 0 18px #f5c542bd; }
.seat-details { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.seat-details strong { font-size: 12px; }
.seat-details small { font-size: 10px; color: #d6d9ae; }
.seat-details b { color: var(--text-gold); font: bold 19px Impact, "Arial Black", sans-serif; }
.seat-details em { margin-left: 4px; font: normal 10px "Microsoft YaHei", sans-serif; }
.dealer-seal { position: absolute; z-index: 4; left: 46px; top: -9px; display: grid; place-items: center;
  width: 26px; height: 26px; border: 2px solid #ffe1bb; border-radius: 50%;
  background: #c13230; color: white; font-weight: 900; font-size: 13px;
  box-shadow: 0 3px 5px #1f1918aa; }
.opponent-tiles { display: flex; flex-wrap: wrap; justify-content: center; position: relative;
  gap: 2px; width: 176px; margin-top: 8px; }
.seat-north .opponent-tiles { width: 230px; flex-wrap: nowrap; }
.tile-count { position: absolute; right: -2px; bottom: -17px; color: #e1d5ac; font-size: 10px; }
.seat-melds { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px;
  max-width: 255px; margin-top: 18px; }
.seat-north .opponent-tiles { width: 300px; margin: 0 0 0 50%; transform: translateX(-50%); }
.seat-north .seat-melds { position: absolute; top: 0; left: calc(100% + 10px);
  width: 330px; max-width: 330px; justify-content: flex-start; margin: 0; }
.seat-west .seat-melds, .seat-east .seat-melds { position: absolute; top: 0;
  width: 112px; max-width: 112px; justify-content: flex-start; margin: 0; }
.seat-west .seat-melds { left: calc(100% + 9px); }
.seat-east .seat-melds { right: calc(100% + 9px); }
.seat:not(.seat-south) .seat-melds .tile-meld { width: 27px; height: 39px; }
.seat:not(.seat-south) .seat-melds .wan-number { font-size: 16px; }
.seat:not(.seat-south) .seat-melds .wan-mark { font-size: 12px; }
.seat:not(.seat-south) .seat-melds .character { font-size: 19px; }
.seat:not(.seat-south) .seat-melds .tile-back { width: 26px; height: 39px; }
.seat-west .seat-melds .tile-meld, .seat-east .seat-melds .tile-meld,
.seat-west .seat-melds .tile-back, .seat-east .seat-melds .tile-back {
  width: 22px; height: 32px;
}
.seat-west .seat-melds .meld, .seat-east .seat-melds .meld { gap: 1px; padding: 1px; }
.seat-west .seat-melds .meld-title, .seat-east .seat-melds .meld-title {
  margin: 0; font-size: 8px;
}
.meld { position: relative; display: flex; align-items: center; gap: 2px; padding: 2px 3px;
  border: 1px solid #be9b5b; border-radius: 5px; background: #082e22da; }
.meld-title { color: #ffdf8d; font-size: 9px; margin-right: 2px; }
.meld-concealed .meld-title { position: absolute; z-index: 1; top: -12px; left: 2px;
  padding: 0 2px; border-radius: 2px; background: #082e22; white-space: nowrap; }
.meld-concealed .tile-meld { outline: 2px solid #ffdb77; outline-offset: -2px; }
.tile-back { position: relative; display: inline-grid; place-items: center; width: 20px; height: 29px;
  flex: none; border: 2px solid #b7c9a8; border-bottom: 4px solid #153f32; border-radius: 3px;
  background: #163c3d url("../images/cutouts/tile-back.webp?v=blue2") center / 100% 100% no-repeat;
  box-shadow: 1px 2px 1px #051d15; }
.tile-back i { display: none; }
.meld .tile-back { width: 23px; height: 32px; }
/* A traditional four-sided wall: each player owns one wall segment, discards drop into the court. */
.wall-frame { position: absolute; top: 92px; left: 50%; transform: translateX(-50%);
  width: 616px; height: 312px; border-radius: 8px; }
.wall-stack { position: relative; display: block; width: 26px; height: 22px; flex: none; }
.wall-stack::before, .wall-stack::after { content: ""; position: absolute; left: 0; width: 26px; height: 16px;
  border: 1px solid #b7c9a8; border-radius: 3px;
  background: #163c3d url("../images/cutouts/tile-back.webp?v=blue2") center / 100% 100% no-repeat;
  box-shadow: 1px 1px 0 #0a392a; }
.wall-stack::before { top: 5px; }
.wall-stack::after { top: 0; }
.stack-used { opacity: .14; }
.wall-caption { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  white-space: nowrap; color: #e1d4ac; font: normal 11px "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px 2px #052218; }
.wall-caption b { color: var(--text-gold); font: bold 13px Impact, "Arial Black", sans-serif; }
.wall-side { position: absolute; display: flex; gap: 2px; }
.wall-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.wall-top { top: 0; left: 50%; transform: translateX(-50%); }
.wall-left { left: 0; top: 50%; flex-direction: column; width: 26px;
  transform: translateY(-50%); }
.wall-right { right: 0; top: 50%; flex-direction: column; width: 26px;
  transform: translateY(-50%); }
.wall-left .wall-stack, .wall-right .wall-stack { transform: rotate(90deg); }
.wall-court { position: absolute; inset: 34px 70px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; }
.indicator-tray { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px;
  width: 380px; height: 64px; border: 5px ridge #986735; border-radius: 12px;
  background: linear-gradient(#4d3020, #291b14);
  box-shadow: inset 0 0 0 2px #d1a050, 0 5px 12px #052a1c9c; }
.indicator-slot { display: flex; align-items: center; gap: 8px; }
.indicator-slot small { color: #dfcf9f; font-size: 10px; white-space: nowrap; }
.tray-arrow { color: #ffe6a2; font-size: 24px; }
.wild-slot .tile { border-color: #ffd34d; box-shadow: 0 0 14px #ffdf72, 2px 4px 0 #8c7545; }
/* 指示牌/百搭展示区为静态信息：不加入场动画，避免每次重绘时闪烁。 */
.wild-slot .tile, .indicator-slot .tile { animation: none !important; }
.river { position: relative; width: 440px; height: 128px; padding: 5px 10px; border-radius: 10px;
  border: 1px dashed #d9d1a77c; background: #0539244c; }
.river-heading { display: flex; justify-content: space-between;
  color: #ffebbd; font: bold 12px "KaiTi", sans-serif; letter-spacing: .2em; }
.river-heading span { color: #e1d4ac; letter-spacing: 0; font: normal 11px "Microsoft YaHei", sans-serif; }
.river-tiles { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px 7px;
  height: 92px; overflow-y: auto; padding: 5px 3px; scrollbar-width: thin; }
.river-item { display: inline-block; flex: none; transform: rotate(var(--scatter)); }
.flower-well { position: absolute; left: 12px; bottom: 9px; width: 240px; height: 183px;
  padding: 10px 12px; border: 6px ridge #8b5a2b; border-radius: 10px; color: #f9e7b1;
  background: linear-gradient(100deg, #221c14f2, #493021ed);
  box-shadow: inset 0 0 10px #0a150e, 0 5px 9px #052317b8;
  overflow-y: auto; scrollbar-width: thin; }
.well-head { display: flex; justify-content: space-between; font: bold 14px "KaiTi", serif; }
.well-head small { font: normal 10px "Microsoft YaHei", sans-serif; color: #d6bd87; }
.flower-group { padding-top: 5px; border-top: 1px solid #b599686b; margin-top: 5px; }
.flower-group > span { display: block; font-size: 10px; }
.flower-group > div { display: flex; gap: 2px; margin-top: 4px; overflow-x: auto; scrollbar-width: thin; }
.flower-group i { color: #aaa18e; font-size: 10px; font-style: normal; }
.beginner-assistant { position: absolute; z-index: 6; right: 9px; bottom: 8px;
  width: 292px; max-height: 210px; overflow-y: auto; scrollbar-width: thin;
  border: 5px ridge #b78a45; border-radius: 10px; color: #f9eecf;
  background: #162c24f2; box-shadow: 0 6px 18px #031a13bd; }
.assistant-toggle { position: sticky; z-index: 1; top: 0; display: flex;
  align-items: center; justify-content: space-between; gap: 7px; width: 100%;
  padding: 8px 9px; border: 0; border-bottom: 1px solid #9c875b; text-align: left;
  color: #ffe4a1; background: #3b3322; font-size: 14px; font-weight: bold; }
.assistant-toggle small { display: block; margin-top: 2px; color: #c0d2b5;
  font-size: 9px; font-weight: normal; }
.assistant-toggle b { font-size: 11px; white-space: nowrap; }
.assistant-toggle:focus-visible { outline: 2px solid #ffe4a1; outline-offset: -2px; }
.assistant-details { padding: 9px 10px 11px; font-size: 11px; line-height: 1.55; }
.assistant-action { margin: 0 0 7px; padding: 7px 8px;
  border-left: 3px solid #f5c542; border-radius: 3px; background: #b78a452e; font-weight: bold; }
.assistant-details dl { margin: 0; }
.assistant-details dt { margin-top: 6px; color: #ffda8b; font-weight: bold; }
.assistant-details dd { margin: 1px 0 0; color: #e7e7d5; }
.assistant-closed { overflow: hidden; }

/* Every visible face uses a local 95x128 image; CSS supplies the physical tile edge. */
.tile { position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: bottom;
  width: 52px; height: 72px; padding: 2px; border: 2px solid var(--tile-border);
  border-bottom: 6px solid #92aaa0; border-radius: 5px; color: #344b3e;
  background: linear-gradient(#fffefa, var(--tile-face) 35%, #eee4d4);
  box-shadow: 2px 3px 0 #345b48, 3px 6px 5px var(--tile-shadow); }
.tile::before { content: ""; position: absolute; top: 3px; left: 5px; right: 5px; height: 3px;
  background: #ffffff94; border-radius: 50%; }
.tile-image { padding: 0; border: 0; border-bottom: 4px solid #92aaa0; background: #fff;
  overflow: visible; }
.tile-image::before { display: none; }
.tile-art { position: relative; display: block; width: 100%; height: 100%;
  overflow: hidden; border-radius: 4px 4px 1px 1px; }
.tile-art img { display: block; width: 100%; height: 100%; object-fit: fill;
  user-select: none; pointer-events: none; }
.tile-clickable:hover { transform: translateY(-10px); box-shadow: 2px 12px 8px #051d15b0; }
.tile-wild { border-color: #ff4d4f; background: linear-gradient(#fff8eb, #ffd3d0);
  box-shadow: 0 0 15px var(--wild-glow), 0 0 0 2px #fd5958, 2px 5px 0 #923d35; }
.tile-image.tile-wild { border: 2px solid #ff4d4f; border-bottom: 4px solid #af4a49; }
.tile-image.tile-wild .tile-art::after { content: ""; position: absolute; inset: 0;
  background: #ff4d4f22; pointer-events: none; }
.wild-lock { position: absolute; top: -9px; right: -7px; color: white; background: #d43139;
  border: 1px solid #ffd3ca; border-radius: 5px; padding: 2px 3px; font-size: 10px; font-weight: 900; }
.tile-river { width: 38px; height: 52px; border-bottom-width: 4px; }
.tile-meld { width: 40px; height: 56px; border-bottom-width: 4px; }
.tile-indicator { width: 38px; height: 52px; border-bottom-width: 4px; }
.tile-flower { width: 34px; height: 48px; border-bottom-width: 3px; }
.tile-placeholder { width: 38px; height: 52px; font-weight: 900; font-size: 20px; }

#player-south { width: 191px; left: 12px; top: 14px; }
#player-south .seat-identity { border-radius: 35px 9px 9px 35px; }
#player-south .seat-melds { position: absolute; top: 0; left: 1013px;
  justify-content: flex-start; align-content: flex-start; gap: 3px;
  max-width: 230px; width: 230px; margin: 0; }
#player-south .seat-melds .meld { gap: 1px; padding: 1px; }
#player-south .seat-melds .tile-meld { width: 22px; height: 32px; }
#player-south .seat-melds .tile-back { width: 22px; height: 32px; }
#player-south .seat-melds .meld-title { font-size: 8px; margin-right: 0; }
#player-south .seat-melds .wan-number { font-size: 15px; }
#player-south .seat-melds .wan-mark { font-size: 10px; }
#player-south .seat-melds .character { font-size: 18px; }
.bottom-hand { position: absolute; top: 12px; left: 215px; right: 18px;
  display: flex; align-items: flex-end; height: 77px; gap: 4px; white-space: nowrap; }
.hand-position { display: inline-flex; }
.hand-position.deal-in { animation: deal-arrive .6s ease-out both;
  animation-delay: calc(var(--deal-order, 0) * 100ms); }
.drawn-position { margin-left: 20px; }
.drawn-position.draw-arrive { animation: drawn-arrive .3s ease-out both; }
.bottom-controls { position: absolute; bottom: 3px; left: 215px; right: 13px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; }
.game-notice { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  border-radius: 7px; color: #f5e8b9; padding: 7px 10px; background: #071d17bb;
  font-size: 11px; white-space: nowrap; }
.game-notice > i { flex: none; width: 7px; height: 7px; background: #eab549; border-radius: 50%; }
.game-notice small { margin-left: auto; color: #b9d5aa; font-size: 10px; }
.action-buttons { display: flex; gap: 8px; align-items: center; padding: 5px 14px;
  background: url("../images/cutouts/action-panel.webp") center / 100% 100% no-repeat; }
.action-buttons button { height: 50px; width: 80px; border-radius: 9px;
  font: 900 22px "KaiTi", sans-serif; color: white; text-shadow: 1px 2px #302b26b0;
  box-shadow: var(--btn-shadow); transition: transform .15s, filter .15s; }
.action-buttons button:not(:disabled):hover { transform: translateY(-3px); filter: brightness(1.18); }
.action-buttons button:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 #0004; }
.action-buttons .act-pong { border: 2px solid #fff1ad; background: linear-gradient(#f6d87d, #b67527); }
.action-buttons .act-kong { border: 2px solid #abdcff; background: linear-gradient(#60b8e7, #2d5da7); }
.action-buttons .act-hu { border: 2px solid #ffb6a2; background: linear-gradient(#f9786c, #ae272b); }
.action-buttons .act-hu:not(:disabled) { animation: hu-breathe 1.4s ease-in-out infinite; }
.action-buttons .act-pass { border: 2px solid #bfc5b6; background: linear-gradient(#849388, #526057); }
.action-buttons button:disabled { opacity: .5; filter: grayscale(1); box-shadow: none; }
.kong-container { position: relative; }
.kong-menu { position: absolute; z-index: 5; bottom: 60px; right: 0; display: grid; gap: 5px;
  background: #2b311d; padding: 7px; border: 2px solid #dcc073; border-radius: 8px; }
.kong-menu button { width: 120px; height: 36px; font-size: 13px; }
.arcade-warning { position: absolute; z-index: 10; top: -33px; left: 52%;
  padding: 8px 20px; border: 2px solid #ff7b73; border-radius: 8px; background: #85272b;
  box-shadow: 0 0 18px var(--wild-glow); font-weight: 900; font-size: 15px;
  animation: warning-appear 2.3s both; pointer-events: none; }

.turn-countdown { display: inline-flex; align-items: baseline; gap: 3px; flex: none;
  padding: 6px 12px; border: 2px solid #e8b34b; border-radius: 999px;
  background: #141c10dd; color: #ffd98a; font: 900 22px "KaiTi", sans-serif;
  box-shadow: 0 0 12px #e8b34b55; white-space: nowrap; }
.turn-countdown b { font: 900 24px Impact, sans-serif; }
.turn-countdown small { font-size: 11px; color: #d9c287; }
.turn-countdown-low { border-color: #ff6b5e; color: #ff9b90;
  box-shadow: 0 0 16px #ff6b5e88; animation: countdown-pulse .5s ease-in-out infinite; }
@keyframes countdown-pulse { 50% { transform: scale(1.12); } }

.preload-overlay { position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center; background: #06180fdd; }
.preload-card { width: min(420px, 90vw); padding: 28px; border: 2px solid #d8b25e;
  border-radius: 14px; background: linear-gradient(#1d4a34, #0f2c1e); text-align: center;
  color: #f4e6bb; }
.preload-card strong { display: block; font-size: 20px; color: #ffe0a1; margin-bottom: 8px; }
.preload-card p { font-size: 13px; color: #d8c8a2; margin: 0 0 18px; }
.preload-bar { height: 12px; border-radius: 999px; background: #0a231a;
  border: 1px solid #c9a75e; overflow: hidden; }
.preload-bar i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #f3d37c, #d89b3d); transition: width .18s ease; }
.preload-card small { display: block; margin-top: 8px; color: #bfd3ad; font-size: 12px; }

.game-overlay { position: absolute; z-index: 20; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(#214d37ed, #092318f5 68%); }
.game-overlay h2 { color: #ffdf94; font: 900 44px "STXingkai", "KaiTi", serif;
  margin: 17px 0 4px; text-shadow: 2px 4px #24170d; }
.game-overlay p { color: #ead9b4; font-size: 14px; }
.spin-wheel { display: grid; grid-template-columns: 1fr 1fr; place-items: center;
  width: 175px; height: 175px; margin-top: 26px; border-radius: 50%; border: 10px ridge #e3b86c;
  color: #ffe7b0; font: 900 34px "KaiTi", serif;
  background: conic-gradient(#286b4a 0 25%, #174e37 25% 50%, #286b4a 50% 75%, #174e37 75%);
  box-shadow: 0 8px 0 #6f4627, 0 18px 30px #061c1188;
  animation: spin-three 3s cubic-bezier(.08, .65, .12, 1) both; }
.rolling-dice { display: flex; gap: 20px; margin-top: 26px; perspective: 400px; }
.rolling-dice i { display: grid; place-items: center; width: 80px; height: 80px;
  border-radius: 14px; border: 5px solid #d2c5a7; background: #fff9e8;
  color: #c53439; font: 900 48px Impact, sans-serif;
  box-shadow: 5px 8px 0 #a6a38b; animation: dice-roll 1.2s ease-out both; }
.rolling-dice i:nth-child(2) { animation-delay: .12s; }
.result-dialog { width: 690px; border: 10px ridge #ac7135; border-radius: 16px; padding: 30px;
  background: linear-gradient(#356a43, #173d2c); box-shadow: inset 0 0 0 3px #ddb76d, 0 30px 50px #03190f;
  animation: result-open 1s cubic-bezier(.18, 1.3, .3, 1) both; }
.results-overlay { padding: 12px; overflow-y: auto; }
.results-overlay .result-dialog { width: min(820px, 100%); max-height: 100%;
  overflow-y: auto; padding: 18px 24px; scrollbar-width: thin; }
.results-overlay .result-dialog h2 { font-size: 30px; margin: 4px 0 10px; }
.settlement-detail { display: grid; gap: 8px; text-align: left; }
.settlement-detail section { padding: 9px 12px; border: 1px solid #d9bd785c;
  border-radius: 8px; background: #082e2494; }
.settlement-detail h3 { margin: 0 0 7px; color: #ffe3a1; font-size: 14px; }
.settlement-hand, .settlement-melds, .settlement-melds > div { display: flex;
  flex-wrap: wrap; align-items: center; gap: 4px; }
.settlement-hand > span { position: relative; display: inline-flex; }
.settlement-win-tile { outline: 2px solid #f9c956; border-radius: 4px; }
.settlement-win-tile small { position: absolute; bottom: -10px; left: 0;
  color: #fff0b8; font-size: 9px; white-space: nowrap; }
.settlement-melds { margin-top: 9px; gap: 7px; }
.settlement-melds > div { padding: 3px; border: 1px solid #b9ad7a73; border-radius: 5px; }
.settlement-melds b { color: #ffe4a2; font-size: 11px; padding: 0 4px; }
.settlement-groups { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.settlement-groups span { padding: 3px 6px; border-radius: 4px;
  background: #9e84423d; color: #f5e9d2; font-size: 11px; }
.settlement-line, .settlement-total { display: flex; justify-content: space-between; gap: 10px;
  padding: 3px 0; color: #eee2c9; font-size: 12px; }
.settlement-line b { color: #ffe3a1; }
.settlement-total { margin-top: 3px; border-top: 1px solid #d9bd78;
  color: #ffdf94; font-weight: bold; }
.settlement-detail .settlement-hint { margin: 5px 0 0; font-size: 11px; }
.result-dialog h2 { margin: 12px 0 6px; }
.result-dialog p { line-height: 1.6; }
.result-players { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; }
.result-players > div { display: grid; justify-items: center; gap: 5px; padding: 10px 3px;
  border: 1px solid #94a877; border-radius: 8px; background: #0b3528; font-size: 11px; }
.result-players .result-winner { border-color: #ffe08a; box-shadow: 0 0 14px #f5c54288; }
.result-players strong { color: #ffde90; font: bold 24px Impact, sans-serif; }
.result-players small { color: #e6d6a6; font-size: 10px; }
.final-verdict { color: #ffdc87 !important; font-weight: 900; }
.table-exhausted .wall-stack { opacity: .12; transition: opacity .8s; }

@keyframes spin-three { from { transform: rotate(0); } to { transform: rotate(1410deg); } }
@keyframes dice-roll { from { transform: translateY(-80px) rotateX(440deg) rotateZ(140deg); opacity: .1; }
  to { transform: translateY(0) rotateX(0) rotateZ(0); opacity: 1; } }
@keyframes deal-arrive { from { transform: translate(-65px, -70px) rotate(-12deg); opacity: .2; }
  to { transform: translate(0, 0) rotate(0); opacity: 1; } }
@keyframes drawn-arrive { from { transform: translate(30px, -40px) rotate(10deg); opacity: .2; }
  to { transform: translate(0, 0) rotate(0); opacity: 1; } }
@keyframes hu-breathe { 50% { box-shadow: 0 0 19px #ff5252, 0 4px 0 #0006; } }
@keyframes warning-appear { 0% { opacity: 0; transform: scale(.8); }
  15%, 76% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes shake-wild { 20%, 60% { transform: translateX(-6px) rotate(-5deg); }
  40%, 80% { transform: translateX(6px) rotate(5deg); } }
@keyframes result-open { from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; } }
.tile-shake { animation: shake-wild .3s linear both !important; }
/* 中央百搭牌是静态展示牌，禁止叠加任何抖动动画。 */
.wild-slot .tile-shake { animation: none !important; }
.river-item:last-child { animation: drawn-arrive .4s ease-out both; }
@media (max-width: 1050px) {
  .lobby-layout { grid-template-columns: 1fr; }
  .settings-scroll { padding-top: 0; }
  .settings-board { max-width: 520px; margin: auto; }
}
@media (max-width: 670px) {
  .arcade-lobby { padding: 16px; }
  .lobby-top { flex-wrap: wrap; gap: 12px; }
  .local-badge { display: none; }
  .lobby-tools { width: 100%; justify-content: flex-start; }
  .arcade-logo h1 { font-size: 30px; }
  .lobby-layout { display: block; }
  .arcade-room { grid-template-columns: 62px 1fr; height: 112px; padding: 6px; gap: 10px; }
  .room-avatar, .room-avatar .portrait { width: 58px; height: 58px; }
  .enter-room { grid-column: 2; justify-self: start; font-size: 11px; padding: 4px 8px; min-width: 0; }
  .room-copy strong { font-size: 20px; }
  .room-copy > span { white-space: normal; }
  .settings-scroll { margin-top: 22px; }
  .secret-room { flex-wrap: wrap; }
  .rules-dialog { max-height: calc(100dvh - 24px); padding: 14px; }
  .rules-grid { grid-template-columns: 1fr; }
  .rules-heading h2 { font-size: 22px; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .arcade-game { height: 600px; }
  #top-bar { height: 54px; }
  #bottom-bar { height: 156px; }
  .wall-frame { top: 44px; }
  .seat-west, .seat-east { top: 62px; }
  .flower-well { height: 145px; }
  .beginner-assistant { max-height: 155px; }
  .action-buttons button { height: 62px; }
  .bottom-hand { top: 7px; }
  .bottom-controls { bottom: 1px; }
}
@media (pointer: coarse) and (orientation: portrait) and (max-width: 900px) {
  body.table-active .orientation-gate {
    position: fixed; z-index: 100; inset: 0; display: flex;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: max(24px, env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
    background: #09281ff5; color: #ffebb6; text-align: center;
  }
  .orientation-gate strong { font: bold 30px "KaiTi", sans-serif; }
  .orientation-gate p { max-width: 360px; margin: 0; line-height: 1.6; }
  .orientation-gate button { min-height: 48px; padding: 8px 20px; border: 2px solid #ffdc86;
    border-radius: 9px; color: #51351b; background: #f5c542; font-weight: bold; }
  #orientation-status { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}