:root {
  color-scheme: dark;
  --ink: #f5eddd;
  --muted: #aebcb4;
  --gold: #e6bd68;
  --felt: #145448;
  --felt-light: #1f6958;
  --deep: #071d1a;
  --panel: rgba(13, 47, 41, .9);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 50% 10%, #1b574a, var(--deep) 72%); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .12; background-image: repeating-linear-gradient(45deg, transparent 0 18px, #fff 19px, transparent 20px); }
main { width: min(1180px, calc(100% - 24px)); margin: auto; padding: 24px 0 44px; position: relative; }
header { display: flex; align-items: center; gap: 15px; margin: 0 auto 26px; width: fit-content; }
.brand-mark { display: grid; place-items: center; width: 60px; height: 60px; border: 2px solid var(--gold); color: var(--gold); font: 32px serif; transform: rotate(3deg); }
h1, h2, p { margin: 0; } h1 { letter-spacing: .15em; font-family: serif; } header p { color: var(--muted); margin-top: 5px; font-size: 13px; }
.panel { max-width: 700px; margin: 0 auto; padding: 28px; border: 1px solid rgba(224,184,102,.3); border-radius: 18px; background: var(--panel); box-shadow: 0 25px 70px #00100d80; backdrop-filter: blur(12px); }
.hidden { display: none !important; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.history-card { grid-column: 1 / -1; min-height: 105px; }.history-list { display: grid; gap: 10px; }.history-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #496f65; border-radius: 10px; background: #082a24aa; }.history-item small { display: block; margin-top: 5px; color: var(--muted); }.history-pending { color: #80968e; font-size: 12px; white-space: nowrap; }.replay-controls { position: absolute; left: 50%; top: 0; display: flex; align-items: center; gap: 6px; transform: translateX(-50%); pointer-events: auto; }.replay-controls button { padding: 6px 9px; }.replay-controls span { min-width: 70px; text-align: center; color: var(--gold); }
.rules-form { display: grid; gap: 16px; }.rules-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; padding: 15px; border: 1px solid #496f65; border-radius: 12px; }.rules-form legend { padding: 0 8px; color: var(--gold); font-weight: 700; }.rules-form .check-row { display: flex; align-items: center; gap: 9px; color: var(--ink); }.rules-form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); }.rules-form input[type="number"] { text-transform: none; }.rules-form .wide-field { grid-column: 1 / -1; }.rules-actions { display: flex; gap: 10px; }
.account-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: var(--gold); }.account-profile { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 8px 5px 5px; border: 1px solid transparent; border-radius: 14px; color: var(--gold); background: transparent; text-align: left; }.account-profile:hover { border-color: #e6bd6855; background: #082a2488; transform: translateY(-1px); }.account-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; overflow: hidden; border-radius: 10px; color: #382718; background: linear-gradient(145deg, #f6d890, #b9873b); box-shadow: inset 0 0 0 2px #fff5, 0 5px 14px #00120c80; font: 900 17px serif; }.account-avatar-img, .player-avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; }.account-profile small { color: var(--muted); white-space: nowrap; }.home-top-actions, .account-actions, .settings-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }.auth-panel { display: grid; gap: 24px; max-width: 780px; padding: 42px 48px; color: #22302c; background: linear-gradient(180deg, #eaf7ff, #dff2fc); border-color: #b8d9eb; box-shadow: 0 26px 70px #00100d70; }.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 26px; }.auth-intro { color: #5c716c; font-size: 14px; }.auth-modes { flex: 0 0 auto; }.auth-mode { padding: 8px 0; color: #1769e8; background: transparent; border: 0; font-size: 20px; box-shadow: none; }.auth-mode:hover { transform: none; filter: brightness(1.05); }.auth-methods { display: flex; align-items: center; gap: 42px; }.auth-method { position: relative; padding: 8px 0 14px; color: #1f2a2c; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 22px; font-weight: 900; }.auth-method.active { color: #1769e8; background: transparent; border: 0; }.auth-method.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #1769e8; }.auth-field { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 64px; padding: 0 24px; border: 1px solid #cfd7dc; background: #fff; color: #20292b; }.auth-field span { color: #20292b; font-size: 20px; }.auth-field input { width: 100%; padding: 0; border: 0; border-radius: 0; color: #20292b; background: transparent; text-transform: none; font-size: 20px; outline: none; }.auth-field input::placeholder { color: #9b9fa2; }.verification-row { grid-template-columns: 132px minmax(0, 1fr) auto; gap: 14px; }.verification-row button { padding: 8px 0; color: #303638; background: transparent; border: 0; white-space: nowrap; font-size: 18px; box-shadow: none; }.auth-submit { min-height: 62px; border-radius: 0; color: #fff; background: #1769e8; font-size: 22px; box-shadow: none; }.auth-anonymous { justify-self: end; padding: 8px 0; color: #1769e8; background: transparent; border: 0; box-shadow: none; }.auth-agreement { display: flex; align-items: flex-start; gap: 10px; color: #233538; font-size: 18px; }.auth-agreement input { width: 22px; height: 22px; flex: 0 0 22px; padding: 0; margin-top: 2px; accent-color: #1769e8; }.auth-agreement a { color: #1769e8; text-decoration: none; }.auth-agreement a:hover { text-decoration: underline; }.auth-divider { display: none; }
.resume-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }.resume-rooms::before { content: "继续联网牌局"; grid-column: 1 / -1; color: var(--gold); font-weight: 700; }.resume-room { width: 100%; color: #2b281e; background: linear-gradient(90deg, #f0c973, #d9a94d); box-shadow: 0 0 18px #e6bd6844; }
button, input { font: inherit; }
button { border: 0; border-radius: 10px; padding: 11px 18px; background: var(--gold); color: #17251f; cursor: pointer; font-weight: 700; transition: transform .15s, filter .15s; }
button:hover { filter: brightness(1.08); transform: translateY(-1px); } button:disabled { opacity: .45; cursor: default; transform: none; }
.mode-card { min-height: 160px; text-align: left; padding: 24px; color: var(--ink); background: linear-gradient(145deg, #1b594b, #103c33); border: 1px solid #467465; }
.mode-card span { display: block; color: var(--gold); font: 26px serif; margin-bottom: 10px; }.mode-card small { color: var(--muted); }
.section-title { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }.quiet { padding: 7px 11px; background: #082a24aa; color: var(--muted); border: 1px solid #5a7b72; }button.account-profile { padding: 5px 8px 5px 5px; border: 1px solid transparent; border-radius: 14px; color: var(--gold); background: transparent; box-shadow: none; }button.account-profile:hover { border-color: #e6bd6855; background: #082a2488; }
label { display: grid; gap: 8px; color: var(--muted); } input { background: #071d1a; color: var(--ink); border: 1px solid #41675d; border-radius: 9px; padding: 11px 12px; text-transform: uppercase; }
.lobby-room-types { display: grid; gap: 14px; margin-top: 18px; }.lobby-room-card { display: grid; gap: 12px; padding: 15px; border: 1px solid #496f65; border-radius: 15px; background: #082a24aa; box-shadow: inset 0 1px #fff1; }.lobby-room-card strong { display: block; color: var(--gold); font-size: 18px; }.lobby-room-card small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.55; }.quick-room-card button { justify-self: start; min-width: 138px; }.lobby-actions { display: flex; gap: 12px; flex-wrap: wrap; }.join-row { display: flex; flex: 1; min-width: min(100%, 260px); gap: 8px; }.join-row input { min-width: 0; width: 100%; }
.players-list { display: grid; gap: 8px; }.player-row { display: flex; justify-content: space-between; background: #082620; padding: 12px 15px; border-radius: 9px; }.room-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }.rules-button-right { margin-left: auto; }.hint { color: var(--muted); margin-top: 15px; font-size: 13px; }
.seat-picker { position: relative; display: block; width: min(100%, 470px); height: 330px; margin: 4px auto 14px; border: 1px solid #446c62; border-radius: 24px; background: radial-gradient(circle, #155448 0 42%, #092d27 70%); box-shadow: inset 0 0 35px #001b16aa; }.seat-table { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 176px; height: 116px; transform: translate(-50%, -50%); border: 7px solid #6a4328; border-radius: 42px; color: var(--gold); background: linear-gradient(145deg, #176353, #0d443a); box-shadow: inset 0 0 22px #001c16aa, 0 8px 18px #001b16aa; }.seat-table span { font: 24px serif; }.seat-table small { color: #b9cbc4; font-size: 10px; }.seat-table.countdown-table { border-color: #f4d17f; color: #fff0b8; background: radial-gradient(circle, #8b382c 0 18%, #174f43 64%); box-shadow: inset 0 0 22px #001c16aa, 0 0 0 4px #f3c96833, 0 0 30px #e6bd6888, 0 8px 18px #001b16aa; animation: room-countdown-pulse .85s ease-in-out infinite alternate; }.seat-table.countdown-table small { padding: 4px 8px; border-radius: 10px; color: #2d1e10; background: #ffe39a; font-size: 13px; font-weight: 900; box-shadow: 0 0 14px #ffd86c99; }.seat-table.countdown-table.urgent { border-color: #ffd2c4; background: radial-gradient(circle, #b8271f 0 22%, #6d231d 68%); animation-duration: .45s; }.seat-chair { position: absolute; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto auto; align-items: center; width: 132px; min-height: 62px; padding: 7px 8px; border: 2px solid #52796f; border-radius: 12px; color: var(--ink); background: #082a24; box-shadow: 0 6px 15px #001a15aa; }.seat-chair b { grid-row: 1 / 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #263028; background: var(--gold); }.seat-chair span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.seat-chair small { color: var(--muted); font-size: 9px; }.seat-actions { grid-column: 1 / -1; display: flex; justify-content: center; gap: 4px; margin-top: 4px; }.seat-action { min-height: 0; padding: 2px 6px; border-radius: 7px; font-size: 9px; line-height: 1.2; white-space: nowrap; }.seat-action.danger { border-color: #d48b76; color: #fff3ed; background: #8b382c; }.seat-action:disabled { opacity: .55; cursor: default; }.seat-chair.available { border-color: #e6bd68; color: #2b281e; background: linear-gradient(#f0cc7c, #c99b4b); cursor: pointer; }.seat-chair.available.seat-locked { cursor: default; filter: saturate(.7) brightness(.86); }.seat-chair.available b { color: #f5e7bd; background: #174a3f; }.seat-chair.available small { color: #55452d; }.seat-chair.current-seat { border-color: #fff0b8; box-shadow: 0 0 0 3px #e6bd6844, 0 0 20px #e6bd6866; }.seat-north { left: 50%; top: 14px; transform: translateX(-50%); }.seat-south { left: 50%; bottom: 14px; transform: translateX(-50%); }.seat-west { left: 12px; top: 50%; transform: translateY(-50%); }.seat-east { right: 12px; top: 50%; transform: translateY(-50%); }
.host-badge { display: inline-grid; place-items: center; min-width: 32px; padding: 2px 6px; border: 1px solid #fff0b8; border-radius: 999px; color: #33230f; background: linear-gradient(135deg, #fff1a8, #e2ab42); box-shadow: 0 3px 8px #001b16aa, 0 0 12px #e6bd6866; font-size: 10px; font-weight: 900; line-height: 1.1; letter-spacing: .05em; }
.seat-chair.host-seat { border-color: #ffe27a; box-shadow: 0 0 0 2px #ffe27a33, 0 6px 17px #001a15aa, 0 0 16px #e6bd6844; }
.seat-host-badge { position: absolute; z-index: 3; right: -8px; top: -11px; }
.player-host-badge { position: absolute; z-index: 3; right: -7px; top: -10px; transform: scale(.92); }
.player-card.host-player { border-color: #e6bd68; box-shadow: 0 0 0 2px #e6bd6828, 0 6px 18px #001c17aa; }
.seat-north:hover, .seat-north:active { transform: translateX(-50%); }.seat-south:hover, .seat-south:active { transform: translateX(-50%); }.seat-west:hover, .seat-west:active { transform: translateY(-50%); }.seat-east:hover, .seat-east:active { transform: translateY(-50%); }
.seat-chair { transform: none !important; transition: filter .15s, border-color .15s, box-shadow .15s; }.seat-north, .seat-south { translate: -50% 0; }.seat-west, .seat-east { translate: 0 -50%; }
.seat-chair.current-seat { border: 3px solid #ffe27a; color: #fff7d7; background: linear-gradient(145deg, #22745f, #0f4f43); box-shadow: 0 0 0 4px #ffe27a55, 0 0 24px #ffd65faa, inset 0 0 14px #5bd4a733; }
.seat-chair.current-seat b { color: #173b31; background: #ffe27a; }.seat-chair.current-seat small { color: #ffe99d; font-weight: 700; }
.room-rule-summary { margin: -10px 0 18px; padding: 10px 12px; border-left: 3px solid var(--gold); color: #ead59f; background: #082a24aa; font-size: 13px; }

body.game-active { overflow-x: hidden; }
body.game-active header { display: none; }
body.game-active main { width: min(1240px, calc(100% - 16px)); padding-top: 8px; }
.landscape-guard { display: none; }
#table { position: relative; min-height: min(820px, calc(100vh - 16px)); overflow: hidden; border: 8px solid #4a2c1c; border-radius: 34px; background: radial-gradient(circle at center, var(--felt-light), var(--felt) 62%, #0d3d35); box-shadow: inset 0 0 80px #001a1488, 0 24px 70px #0009; }
#table::before { content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 8px, #fff 9px, transparent 10px); }
.table-top { position: absolute; z-index: 20; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.table-top > * { pointer-events: auto; }.table-top strong { padding: 7px 13px; border-radius: 20px; color: #e8ded0; background: #082a24bb; font-size: 13px; letter-spacing: .06em; }
.table-top .open-hand-toggle { position: absolute; right: 118px; }.table-top .open-hand-toggle[aria-pressed="true"] { color: #213128; border-color: #f3d083; background: var(--gold); box-shadow: 0 0 14px #e6bd6877; }
.game-board { position: relative; z-index: 1; display: grid; grid-template: 132px minmax(350px, 1fr) 192px / 145px minmax(410px, 1fr) 145px; min-height: min(804px, calc(100vh - 32px)); padding: 18px; }

.seat { display: flex; align-items: center; justify-content: center; z-index: 4; }.seat-top { grid-area: 1 / 2; }.seat-left { grid-area: 2 / 1; }.seat-right { grid-area: 2 / 3; }
.player-card { position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 8px; min-width: 112px; max-width: 132px; border: 1px solid #51776d; border-radius: 12px; background: #082b25df; box-shadow: 0 6px 18px #001c17aa; }
.player-card.active { border-color: var(--gold); box-shadow: 0 0 0 2px #e6bd6833, 0 6px 18px #001c17aa; }
@keyframes turn-arrow-pulse { to { filter: drop-shadow(0 0 13px #fff0a8) drop-shadow(0 3px 3px #000b); opacity: .72; } }
.melds, .flowers { display: flex; gap: 5px; }.melds > span { display: flex; gap: 1px; padding: 2px; border-radius: 4px; background: #08221d99; }.melds i, .flowers i { display: grid; place-items: center; width: 21px; height: 29px; overflow: hidden; border: 1px solid #eee8da; border-radius: 3px; color: #22352e; background: linear-gradient(145deg,#fffef7 0%,#eee9da 68%,#d5cdbb 100%); box-shadow: inset -2px -2px 0 #c8bfac, 0 3px 0 #17634f, 0 4px 3px #0008; font-style: normal; }.exposed { display: flex; align-items: flex-start; gap: 5px; white-space: nowrap; }.opponent-hand { position: absolute; display: flex; align-items: flex-start; gap: 7px; }.opponent-hand-top { top: calc(100% + 7px); left: 50%; flex-direction: row-reverse; transform: translateX(-50%); }.opponent-hand-left { left: calc(100% + 7px); top: 50%; flex-direction: column; transform: translateY(-50%); }.opponent-hand-right { right: calc(100% + 7px); top: 50%; flex-direction: column-reverse; transform: translateY(-50%); }.opponent-hand-left .exposed, .opponent-hand-right .exposed, .opponent-hand-left .melds, .opponent-hand-right .melds, .opponent-hand-left .melds > span, .opponent-hand-right .melds > span { flex-direction: column; }.opponent-hand-left .flowers, .opponent-hand-right .flowers { flex-flow: column nowrap; }.opponent-hand-top .exposed i, .opponent-hand-top .revealed-tile { rotate: 180deg; }.opponent-hand-left .exposed i, .opponent-hand-left .revealed-tile { rotate: 90deg; }.opponent-hand-right .exposed i, .opponent-hand-right .revealed-tile { rotate: -90deg; }.self-player .melds, .self-player .flowers { margin-left: 5px; }.flowers { padding-left: 5px; border-left: 1px solid #d9b96966; }
.avatar { display: grid; place-items: center; flex: 0 0 30px; height: 30px; overflow: hidden; border-radius: 8px; color: #382718; background: linear-gradient(145deg, #f2d18a, #b9873b); font: 700 14px serif; box-shadow: inset 0 0 0 2px #fff3; }
.player-copy { display: grid; min-width: 0; }.player-copy strong { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.player-copy small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.concealed { display: flex; gap: 0; }.concealed i { display: block; width: 8px; height: 14px; border: 1px solid #e7d6a888; border-radius: 2px; background: linear-gradient(135deg, #326f62, #174b41); }.opponent-hand-left .concealed, .opponent-hand-right .concealed { flex-direction: column; }.opponent-hand-left .concealed i, .opponent-hand-right .concealed i { width: 14px; height: 8px; }.concealed i.revealed-tile { display: grid; place-items: center; width: 21px; height: 29px; overflow: hidden; border-color: #eee8da; color: #22352e; background: linear-gradient(145deg,#fffef7,#e7e0d2); box-shadow: inset -2px -2px 0 #c8bfac, 0 3px 0 #17634f; }.concealed .revealed-tile .mahjong-glyph { font-size: 28px; }.player-card.winner { border-color: #ffe29a; box-shadow: 0 0 18px #ffd87899; }.player-card.winner::before { content: "胡"; position: absolute; z-index: 2; left: -9px; top: -12px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #fff7da; background: #a52e24; border: 2px solid #f3ce78; font-weight: 800; }

.table-center { grid-area: 2 / 2; position: relative; min-height: 370px; border: 1px solid #ffffff0f; border-radius: 24px; background: #0b40372c; }
.turn-pointer { position: absolute; z-index: 7; display: block; border-radius: 5px; background: linear-gradient(#fff3a8, #ffc83d); filter: drop-shadow(0 0 8px #ffd766) drop-shadow(0 3px 3px #000b); animation: turn-arrow-pulse .55s ease-in-out infinite alternate; }
.turn-pointer::after { content: ""; position: absolute; width: 0; height: 0; }
.turn-pointer-top { left: 50%; bottom: calc(50% + 70px); width: 9px; height: 48px; transform: translateX(-50%); }
.turn-pointer-top::after { left: 50%; top: -16px; transform: translateX(-50%); border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 20px solid #ffd45f; }
.turn-pointer-self { left: 50%; top: calc(50% + 70px); width: 9px; height: 48px; transform: translateX(-50%); }
.turn-pointer-self::after { left: 50%; bottom: -16px; transform: translateX(-50%); border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 20px solid #ffd45f; }
.turn-pointer-left { top: 50%; right: calc(50% + 88px); width: 54px; height: 9px; transform: translateY(-50%); }
.turn-pointer-left::after { left: -16px; top: 50%; transform: translateY(-50%); border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 20px solid #ffd45f; }
.turn-pointer-right { top: 50%; left: calc(50% + 88px); width: 54px; height: 9px; transform: translateY(-50%); }
.turn-pointer-right::after { right: -16px; top: 50%; transform: translateY(-50%); border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 20px solid #ffd45f; }
.center-console { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template: auto auto / 48px 58px; width: 126px; min-height: 92px; padding: 10px; border: 2px solid #c69a52; border-radius: 15px; color: var(--gold); background: linear-gradient(145deg, #0a2924, #041a17); box-shadow: 0 10px 25px #001d18aa; }
.center-console .round-mark { grid-row: 1 / 3; display: grid; place-items: center; border-right: 1px solid #886b3e; font: 32px serif; }.center-console strong { align-self: end; text-align: center; font-size: 23px; }.center-console small { text-align: center; color: var(--muted); font-size: 10px; }.center-console b { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 62px; height: 62px; border: 4px solid #ffe39a; border-radius: 50%; color: #fff8d8; background: radial-gradient(circle, #a7432e, #711c18); font-size: 30px; font-weight: 900; box-shadow: 0 0 0 5px #e6bd6830, 0 0 28px #e6bd68aa, 0 5px 12px #000a; text-shadow: 0 2px 3px #000b; }.center-console b.warning { color: #321d0f; background: radial-gradient(circle, #ffe08a, #e28622); border-color: #fff4c7; animation: timer-warning-pulse .75s infinite alternate; }.center-console b.urgent { color: #fff7e8; background: radial-gradient(circle, #ff523d, #a91714); border-color: #ffe2d7; animation: timer-pulse .38s infinite alternate; }.center-console i { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); min-width: 42px; padding: 2px 8px; border-radius: 8px; color: #203027; background: var(--gold); font: normal 10px sans-serif; text-align: center; }
.center-console .center-again { position: absolute; top: calc(100% + 32px); left: 50%; min-width: 104px; padding: 8px 14px; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 5px 16px #001712aa; }
@keyframes timer-warning-pulse { to { transform: translateX(-50%) scale(1.08); box-shadow: 0 0 0 7px #f3b24138, 0 0 34px #ffc857cc, 0 5px 12px #000a; } }
@keyframes timer-pulse { to { transform: translateX(-50%) scale(1.18); box-shadow: 0 0 0 9px #ff5c4538, 0 0 42px #ff513ddd, 0 5px 12px #000a; } }
@keyframes room-countdown-pulse { to { box-shadow: inset 0 0 22px #001c16aa, 0 0 0 6px #f3c96844, 0 0 38px #e6bd68aa, 0 8px 18px #001b16aa; } }
.river { --river-count: 1; --river-step: 43px; position: absolute; z-index: 2; display: grid; gap: 0; min-height: 44px; }
.river-top, .river-self { left: 5px; width: calc(100% - 10px); grid-template-columns: repeat(var(--river-count), 31px); justify-content: center; align-items: start; }.river-top { top: 72px; }.river-self { bottom: 10px; }.river-left, .river-right { top: 40px; bottom: 40px; width: 43px; grid-template-rows: repeat(var(--river-count), var(--river-step)); align-content: center; align-items: start; }.river-left { left: 58px; }.river-right { right: 58px; }.river-top .tile { rotate: 180deg; }.river-left .tile { rotate: 90deg; }.river-right .tile { rotate: -90deg; }

.player-zone { grid-area: 3 / 1 / 4 / 4; position: relative; display: grid; grid-template-rows: 26px 28px 82px 44px; align-content: end; justify-items: center; z-index: 8; }
.self-player { position: relative; display: flex; align-items: center; gap: 8px; padding: 3px 12px; border-radius: 12px; background: #082a24bb; font-size: 13px; }.seat-wind { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #213128; background: var(--gold); font-size: 11px; font-weight: 800; }
.status { color: #ffe09b; font-weight: 700; font-size: 14px; text-align: center; text-shadow: 0 2px 4px #000; }
.hand { display: flex; justify-content: center; align-items: end; gap: 0; width: 100%; min-height: 86px; overflow-x: auto; padding: 20px 8px 8px; scrollbar-width: none; }.hand::-webkit-scrollbar { display: none; }.hand .tile.drawn { margin-left: 0; outline: 2px solid #e6bd68; box-shadow: inset 1px 1px 0 #fff, inset -3px -3px 0 #c8bfad, 0 5px 0 #17634f, 0 0 14px #f2c96aaa; }.hand .tile.selected { transform: translateY(-13px); outline: 3px solid #fff0bd; box-shadow: inset 1px 1px 0 #fff, inset -3px -3px 0 #c8bfad, 0 5px 0 #17634f, 0 11px 16px #001a14cc; }.hand-melds { display: flex; align-items: end; gap: 7px; flex: 0 0 auto; margin-right: 7px; padding-right: 10px; border-right: 2px solid #e6bd6899; }.hand-meld { display: flex; align-items: end; gap: 0; }.tile.meld-tile { width: 38px; height: 54px; pointer-events: none; }.tile.meld-tile .mahjong-glyph { font-size: 46px; }.tile.meld-tile:hover { transform: none; }.winning-tile { margin-left: 0; outline: 3px solid #efc767; }
.actions { display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 44px; }.action-command { width: 62px; min-width: 62px; height: 40px; padding: 0; border: 1px solid #55746b; color: #81948d; background: linear-gradient(#183c35, #0b2924); box-shadow: inset 0 1px #ffffff0c; font: 700 16px serif; }.action-command:disabled { opacity: 1; color: #71837d; cursor: default; filter: saturate(.35); }.action-command.available { border-color: #ffe0a3; color: #2c281d; background: linear-gradient(#f1ca78, #c8943e); box-shadow: 0 0 16px #e6bd6855, inset 0 1px #fff8; }.action-command.available:hover { filter: brightness(1.08); }.action-pass.available { color: #eef5f1; border-color: #759b90; background: linear-gradient(#406e62, #275247); box-shadow: 0 0 12px #b8d8cf22; }
.action-choices { position: absolute; z-index: 12; bottom: 47px; left: 50%; display: none; transform: translateX(-50%); align-items: center; justify-content: center; gap: 7px; min-width: 210px; padding: 8px 10px; border: 1px solid #cda95f; border-radius: 12px; background: #071f1bdc; box-shadow: 0 8px 24px #00110dcc; backdrop-filter: blur(8px); }.action-choices.visible { display: flex; }.action-choices button { padding: 7px 11px; color: #2b291f; border: 1px solid #ffe4a9; background: #e9c574; white-space: nowrap; font-size: 12px; }

.tile { flex: 0 0 auto; width: 44px; height: 61px; border: 1px solid #eee8da; border-radius: 6px; padding: 1px; display: inline-grid; place-items: center; overflow: hidden; color: #22352e; background: linear-gradient(145deg,#fffef8 0%,#f4f0e6 58%,#d8cfbc 100%); box-shadow: inset 1px 1px 0 #fff, inset -3px -3px 0 #c8bfad, 0 5px 0 #17634f, 0 7px 5px #0008; }.mahjong-glyph { display: block; font-family: "Noto Sans Symbols 2", "Apple Symbols", "Segoe UI Symbol", sans-serif; font-size: 53px; font-weight: 400; line-height: 1; transform-origin: 50% 100%; transform: translateX(-2.5px) scaleX(1.08) scaleY(1.057); }.tile-m { color: #bd302b; }.tile-s { color: #167047; }.tile-p { color: #2263a0; }.tile-honor { color: #28342f; }.tile-flower { color: #b14478; }.tile:hover { transform: translateY(-8px); }.tile:disabled:hover { transform: none; }.tile.selected:hover { transform: translateY(-13px); }
.tile.discard { width: 31px; height: 43px; border-radius: 4px; box-shadow: inset 1px 1px 0 #fff, inset -2px -2px 0 #c4baa7, 0 3px 0 #17634f, 0 4px 3px #0007; }.tile.discard .mahjong-glyph { font-size: 39px; }.tile.discard:hover { transform: none; }.melds .mahjong-glyph, .flowers .mahjong-glyph { font-size: 28px; }
.mahjong-glyph { display: block; width: 100%; height: 100%; object-fit: contain; transform: none; transform-origin: center; pointer-events: none; user-select: none; filter: drop-shadow(0 3px 2px #0006); }
.tile, .tile.discard, .tile.meld-tile, .melds i, .flowers i, .concealed i.revealed-tile { padding: 0; overflow: visible; border: 0; color: inherit; background: transparent; box-shadow: none; }
.hand .tile.drawn { box-shadow: 0 0 14px #f2c96aaa; }.hand .tile.selected { box-shadow: 0 11px 16px #001a14cc; }.winning-tile { position: relative; z-index: 6; outline: 4px solid #ffd45f !important; border-radius: 5px; filter: drop-shadow(0 0 8px #ffbd32) brightness(1.12); box-shadow: 0 0 22px #ffc640dd; animation: winning-tile-pulse .8s ease-in-out infinite alternate; }
@keyframes winning-tile-pulse { to { filter: drop-shadow(0 0 13px #ffe69a) brightness(1.22); } }
#toast { position: fixed; z-index: 260; bottom: 32px; left: 50%; max-width: min(520px, calc(100% - 32px)); transform: translate(-50%, 20px); padding: 10px 16px; border: 1px solid #f0ce7f; border-radius: 10px; color: #fff4d1; background: #2a1713f2; box-shadow: 0 12px 28px #0009; opacity: 0; pointer-events: none; text-align: center; transition: .2s; }#toast.show { opacity: 1; transform: translate(-50%,0); }
.result-modal { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 20px; background: #00130fbb; backdrop-filter: blur(7px); }
.result-card { position: relative; width: min(390px, 100%); padding: 38px 28px 28px; border: 2px solid #e1b960; border-radius: 22px; text-align: center; color: var(--ink); background: linear-gradient(145deg, #164d42, #092b25); box-shadow: 0 28px 80px #000b, inset 0 1px #fff2; }
.result-mark { position: absolute; top: -31px; left: 50%; display: grid; place-items: center; width: 62px; height: 62px; transform: translateX(-50%); border: 3px solid #f0ce7f; border-radius: 50%; color: #fff4d1; background: #a52e24; box-shadow: 0 8px 22px #0008; font: 800 31px serif; }
.result-card h2 { color: #f2d084; font: 28px serif; letter-spacing: .08em; }.result-card p { min-height: 24px; margin-top: 12px; color: var(--muted); line-height: 1.7; }
.result-actions { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }.result-actions button { min-width: 118px; }
.rules-view-card { width: min(680px, 100%); max-height: min(82vh, 760px); overflow: auto; text-align: left; }.rules-view-card h2 { text-align: center; }.rules-view-note { min-height: 0 !important; text-align: center; }.modal-close { position: absolute; top: 12px; right: 12px; min-width: 34px; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 24px; line-height: 1; }.rules-view-content { display: grid; gap: 8px; margin-top: 18px; }.rules-view-row { display: grid; grid-template-columns: 128px 1fr; gap: 12px; padding: 10px 12px; border: 1px solid #41675d; border-radius: 11px; background: #071f1aaa; }.rules-view-row strong { color: var(--gold); }.rules-view-row span { color: #e9eee9; line-height: 1.55; }
.avatar-crop-card { width: min(420px, 100%); padding-top: 34px; }.avatar-crop-card p { min-height: 0; margin-bottom: 14px; }.avatar-crop-frame { position: relative; width: 240px; height: 240px; margin: 14px auto 16px; overflow: hidden; touch-action: none; cursor: grab; border: 2px solid #e6bd68; border-radius: 18px; background: #061b17; box-shadow: inset 0 0 0 999px #0000, 0 12px 26px #00140faa; }.avatar-crop-frame:active { cursor: grabbing; }.avatar-crop-frame img { position: absolute; max-width: none; user-select: none; pointer-events: none; }.avatar-crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 18px; box-shadow: inset 0 0 0 2px #fff4, inset 0 0 0 999px #00000022; }.avatar-crop-mask::after { content: ""; position: absolute; inset: 17px; border: 2px dashed #fff4; border-radius: 16px; }.avatar-crop-zoom { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; margin: 0 auto; width: min(280px, 100%); color: var(--muted); }.avatar-crop-zoom input { padding: 0; accent-color: var(--gold); }
.profile-card, .settings-card, .service-card, .avatar-preview-card { width: min(460px, 100%); padding-top: 34px; }.profile-overview { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; padding: 12px; border: 1px solid #496f65; border-radius: 14px; background: #082a24aa; }.profile-overview .account-avatar { width: 52px; height: 52px; flex-basis: 52px; border-radius: 13px; font-size: 22px; }.profile-overview strong { display: block; color: var(--gold); font-size: 18px; }.profile-overview small { display: block; margin-top: 4px; color: var(--muted); }.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.profile-stats div { padding: 12px 8px; border: 1px solid #496f65; border-radius: 13px; background: #071f1bcc; text-align: center; }.profile-stats strong { display: block; color: var(--gold); font-size: 22px; }.profile-stats small { color: var(--muted); }.settings-list { display: grid; gap: 12px; }.settings-row, .settings-block, .settings-version { padding: 13px; border: 1px solid #496f65; border-radius: 14px; background: #082a24aa; }.settings-row, .settings-version { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.settings-row small, .settings-block small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }.settings-actions { justify-content: flex-start; margin-top: 10px; }.settings-actions button { padding: 8px 11px; }.settings-version span { color: var(--muted); }.settings-version strong { color: var(--gold); }.sound-toggle-group { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }.account-settings-list { display: grid; gap: 10px; margin-top: 10px; }.account-settings-avatar-row, .account-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px; border: 1px solid #31574f; border-radius: 13px; background: #071f1bcc; }.settings-avatar-button { display: grid; place-items: center; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }.settings-avatar-button:hover { transform: translateY(-1px); filter: brightness(1.08); }.settings-avatar-button .account-avatar { width: 62px; height: 62px; flex-basis: 62px; border-radius: 15px; font-size: 26px; }.account-settings-row span { color: var(--muted); }.account-settings-row strong { color: var(--gold); }.account-settings-row.anonymous-compact button { display: none; }.account-logout { justify-self: stretch; }.avatar-preview-content { display: grid; place-items: center; margin-top: 12px; }.avatar-preview-content img { max-width: min(100%, 360px); max-height: min(62vh, 420px); border-radius: 16px; background: #fff; box-shadow: 0 14px 34px #00140faa; image-rendering: auto; }.avatar-preview-letter { display: grid; place-items: center; width: 220px; height: 220px; border-radius: 24px; color: #382718; background: linear-gradient(145deg, #f6d890, #b9873b); box-shadow: inset 0 0 0 4px #fff5, 0 14px 34px #00140faa; font: 900 96px serif; }.service-contact { display: grid; justify-items: center; gap: 13px; margin-top: 12px; }.service-contact img { width: min(260px, 100%); border-radius: 16px; background: #fff; box-shadow: 0 12px 28px #00140faa; }.service-contact p { color: var(--muted); line-height: 1.65; text-align: center; }.service-contact a { color: var(--gold); font-weight: 800; text-decoration: none; }.service-contact a:hover { text-decoration: underline; }
.post-game-room { position: absolute; z-index: 18; left: 50%; top: 50%; width: min(calc(100% - 22px), 680px); max-height: calc(100% - 18px); margin: 0; overflow: auto; transform: translate(-50%, -50%); padding: 12px; border: 1px solid #e6bd68; border-radius: 18px; background: #061d19f2; box-shadow: 0 18px 46px #000c, inset 0 1px #fff1; }.post-game-title { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin: 0 4px 8px; }.post-game-title strong { color: var(--gold); font-size: 18px; }.post-game-title span { color: var(--muted); font-size: 12px; }.post-game-room .seat-picker { width: 100%; height: 235px; margin-bottom: 10px; }.post-game-room .seat-table { width: 130px; height: 88px; }.post-game-room .seat-chair { width: 118px; min-height: 56px; padding: 6px 7px; }.post-game-room .seat-north { top: 8px; }.post-game-room .seat-south { bottom: 8px; }.post-game-room .seat-west { left: 8px; }.post-game-room .seat-east { right: 8px; }.post-game-actions { margin-top: 8px; }
.chat-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; overflow: hidden; border: 1px solid #52796f; border-radius: 16px; background: #061f1bdc; box-shadow: inset 0 1px #fff1, 0 10px 28px #00140faa; backdrop-filter: blur(8px); }.room-chat { height: 190px; margin-top: 16px; padding: 12px; }.game-chat { position: absolute; z-index: 28; right: 16px; bottom: 66px; width: min(310px, calc(100% - 32px)); height: min(330px, calc(100% - 110px)); padding: 10px; }.game-chat-toggle { position: absolute; z-index: 29; right: 16px; bottom: 16px; min-width: 74px; padding: 10px 16px; border: 1px solid #ffe0a3; border-radius: 999px; color: #2b261a; background: linear-gradient(#f3cf7d, #c99841); box-shadow: 0 7px 18px #001a14aa, 0 0 14px #e6bd6840; }.game-chat-toggle .chat-count { position: absolute; right: -7px; top: -8px; display: none; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid #fff0c9; border-radius: 999px; color: #fff; background: #e42a1f; box-shadow: 0 0 9px #ff3d32cc; font-size: 11px; font-weight: 900; line-height: 15px; text-align: center; }.game-chat-toggle.has-unread .chat-count { display: block; }.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--gold); font-size: 13px; }.chat-head span { color: var(--muted); font-size: 11px; }.chat-messages { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; padding: 3px 2px; scrollbar-width: thin; }.chat-message { align-self: stretch; padding: 6px 8px; border: 1px solid #31574f; border-radius: 10px; color: #edf5ef; background: #0b3029; box-shadow: 0 3px 8px #00120e80; }.chat-message.system { color: #dfd4b5; border-color: #6d6547; background: #2d2a1f99; }.chat-message p { margin: 0; overflow-wrap: anywhere; line-height: 1.45; font-size: 12px; }.chat-message strong { color: var(--gold); font-weight: 800; }.chat-message.system strong { color: #f2d084; }.chat-empty { display: grid; place-items: center; min-height: 80px; color: var(--muted); font-size: 12px; text-align: center; }.chat-form { display: flex; gap: 6px; }.chat-form input { min-width: 0; flex: 1; padding: 8px 10px; border-radius: 12px; font-size: 12px; text-transform: none; }.chat-form button { min-width: 54px; padding: 8px 10px; border-radius: 12px; font-size: 12px; }.chat-disabled { opacity: .72; }
.audio-controls { position: fixed; z-index: 90; right: 16px; bottom: 14px; display: flex; gap: 7px; }.audio-controls button, #settings-music-toggle, #settings-effects-toggle { min-width: 86px; padding: 7px 10px; border: 1px solid #7e9c92; border-radius: 18px; color: #e9eee9; background: #082a24e8; box-shadow: 0 4px 12px #00110d88; font-size: 12px; }.audio-controls button[aria-pressed="false"], #settings-music-toggle[aria-pressed="false"], #settings-effects-toggle[aria-pressed="false"] { color: #879991; border-color: #49645c; background: #071e1acc; }.audio-controls button:hover { transform: translateY(-2px); }body:not(.game-active) .audio-controls { display: none; }
body.game-active .audio-controls { top: 14px; bottom: auto; }body.game-active .table-top { right: 235px; }
.account-inline-editor { display: grid; gap: 8px; padding: 10px; border: 1px solid #31574f; border-radius: 13px; background: #061b17dd; box-shadow: inset 0 1px #fff1; }
.account-inline-editor input { width: 100%; text-transform: none; }
.account-inline-editor > div { display: flex; gap: 8px; flex-wrap: wrap; }
.account-inline-editor button { padding: 8px 12px; }
.account-code-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.auth-register-methods { display: grid; gap: 22px; }
.auth-register-tabs { display: flex; align-items: center; gap: 42px; }
.auth-register-tab { position: relative; padding: 8px 0 14px; border: 0; border-radius: 0; color: #1f2a2c; background: transparent; box-shadow: none; font-size: 22px; font-weight: 900; }
.auth-register-tab.active { color: #1769e8; }
.auth-register-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #1769e8; }
.auth-register-tab:hover { transform: none; filter: brightness(1.05); }
.auth-register-panels, .auth-register-panel { display: grid; gap: 16px; }

@media (max-width: 760px) {
  main { width: min(100% - 12px, 700px); }
  .auth-panel { padding: 24px 18px; gap: 18px; }.auth-top { align-items: flex-start; flex-direction: column; gap: 12px; }.auth-methods { gap: 22px; flex-wrap: wrap; }.auth-method { font-size: 19px; }.auth-mode { font-size: 17px; }.auth-field { grid-template-columns: 72px minmax(0, 1fr); min-height: 56px; padding: 0 14px; }.auth-field span, .auth-field input { font-size: 17px; }.verification-row { grid-template-columns: 72px minmax(0, 1fr) auto; }.verification-row button { font-size: 15px; }.auth-agreement { font-size: 14px; }.auth-submit { min-height: 56px; font-size: 19px; }
  .auth-register-tabs { gap: 22px; flex-wrap: wrap; }.auth-register-tab { font-size: 19px; }.auth-register-panel { gap: 12px; }
  .home-grid { grid-template-columns: 1fr; }.lobby-actions { flex-direction: column; }.panel { padding: 20px; }
  body.game-active main { width: 100%; padding: 0; }
  #table { min-height: 100svh; border-width: 4px; border-radius: 0; }
  .game-board { min-height: calc(100svh - 8px); grid-template: 112px minmax(330px, 1fr) 190px / 100px minmax(210px, 1fr) 100px; padding: 12px 5px 5px; }
  .table-top { top: 8px; left: 8px; right: 8px; gap: 5px; }.table-top strong { font-size: 11px; }
  .player-card { min-width: 92px; max-width: 100px; padding: 6px; gap: 6px; border-radius: 12px; }.avatar { flex-basis: 30px; height: 30px; font-size: 14px; }.player-copy strong { max-width: 52px; font-size: 11px; }.player-copy small { font-size: 9px; }.concealed i { width: 5px; height: 10px; }.concealed-left i, .concealed-right i { width: 10px; height: 5px; }
  .melds i, .flowers i { width: 17px; height: 24px; }.melds .mahjong-glyph, .flowers .mahjong-glyph { font-size: 24px; }.opponent-hand { gap: 4px; }.opponent-hand-top { top: calc(100% + 5px); }.opponent-hand-left { left: calc(100% + 5px); }.opponent-hand-right { right: calc(100% + 5px); }.concealed i.revealed-tile { width: 17px; height: 24px; }.concealed .revealed-tile .mahjong-glyph { font-size: 24px; }
  .table-center { min-height: 340px; }.center-console { width: 104px; min-height: 78px; grid-template-columns: 38px 46px; }.center-console .round-mark { font-size: 25px; }.center-console strong { font-size: 19px; }
  .river-top { top: 48px; }.river-left, .river-right { top: 32px; bottom: 32px; width: 34px; }.river-left { left: 25px; }.river-right { right: 25px; }
  .river-top, .river-self { grid-template-columns: repeat(var(--river-count), 25px); }
  .tile { width: 35px; height: 50px; }.tile .mahjong-glyph { font-size: 42px; }.tile.discard { width: 25px; height: 34px; }.tile.discard .mahjong-glyph { font-size: 31px; }
  .player-zone { grid-template-rows: 25px 27px 72px 42px; }.hand { gap: 2px; min-height: 72px; padding-top: 15px; }.tile.meld-tile { width: 30px; height: 45px; }.tile.meld-tile .mahjong-glyph { font-size: 37px; }.hand-melds { gap: 4px; margin-right: 4px; padding-right: 6px; }.status { font-size: 12px; }
  .actions { gap: 4px; width: 100%; }.action-command { width: 50px; min-width: 50px; height: 38px; font-size: 14px; }.action-choices { bottom: 43px; max-width: calc(100vw - 20px); overflow-x: auto; justify-content: flex-start; }
  .seat-picker { height: 300px; }.seat-table { width: 120px; height: 92px; }.seat-chair { width: 104px; min-height: 58px; padding: 6px; grid-template-columns: 25px 1fr; }.seat-west { left: 4px; }.seat-east { right: 4px; }
  .game-chat { top: auto; right: 8px; bottom: 58px; width: min(220px, calc(100% - 16px)); height: 170px; }.chat-panel { grid-template-rows: auto minmax(70px, 1fr) auto; }.chat-messages { min-height: 70px; }.chat-message p { font-size: 11px; }
}

@media (max-width: 760px) and (orientation: portrait) {
  body.game-active { overflow: hidden; }
  body.game-active .landscape-guard {
    position: fixed;
    z-index: 999;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 16px;
    padding: 28px;
    color: #fff6d8;
    background:
      radial-gradient(circle at 50% 18%, #1b6a58 0 18%, transparent 46%),
      linear-gradient(160deg, #051a16 0%, #0c322b 55%, #061c18 100%);
    text-align: center;
  }
  body.game-active .landscape-guard::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    pointer-events: none;
    background-image: repeating-linear-gradient(45deg, transparent 0 18px, #fff 19px, transparent 20px);
  }
  .landscape-guard > * { position: relative; z-index: 1; }
  .landscape-guard strong {
    color: var(--gold);
    font: 900 30px/1.1 serif;
    letter-spacing: .08em;
  }
  .landscape-guard p {
    max-width: 280px;
    color: #d7e3dd;
    line-height: 1.7;
  }
  .landscape-phone {
    width: 72px;
    height: 112px;
    border: 5px solid #f0cd7c;
    border-radius: 18px;
    box-shadow: inset 0 0 0 3px #ffffff22, 0 0 24px #e6bd6866;
    animation: rotate-phone 1.8s ease-in-out infinite;
  }
  .landscape-phone::after {
    content: "";
    display: block;
    width: 18px;
    height: 4px;
    margin: 92px auto 0;
    border-radius: 999px;
    background: #f0cd7c;
  }
}

@keyframes rotate-phone {
  0%, 28% { transform: rotate(0deg); }
  58%, 100% { transform: rotate(90deg); }
}

@media (max-width: 430px) {
  .game-board { grid-template-columns: 74px minmax(190px, 1fr) 74px; grid-template-rows: 104px minmax(320px, 1fr) 188px; }
  .player-card { min-width: 70px; max-width: 74px; display: grid; justify-items: center; gap: 2px; }.player-copy { text-align: center; }.player-copy strong { max-width: 62px; }.player-copy small { display: none; }.avatar { display: none; }
  .concealed-left, .concealed-right { display: none; }.center-console { transform: translate(-50%, -50%) scale(.85); }
  .river { gap: 0; }.river-top, .river-self { grid-template-columns: repeat(var(--river-count), 22px); }.tile.discard { width: 22px; height: 30px; }.tile.discard .mahjong-glyph { font-size: 28px; }
  .tile { width: 31px; height: 47px; }.tile .mahjong-glyph { font-size: 38px; }.hand { justify-content: flex-start; padding-inline: 6px; }
  .actions { gap: 3px; }.action-command { width: 47px; min-width: 47px; }
  .game-chat { right: 6px; bottom: 48px; width: calc(100% - 12px); height: 138px; }.chat-head { font-size: 12px; }.chat-form input, .chat-form button { padding: 6px 8px; font-size: 11px; }
  .audio-controls { right: 7px; bottom: 5px; gap: 4px; }.audio-controls button { min-width: 0; padding: 6px 8px; font-size: 10px; }body.game-active .audio-controls { top: 7px; bottom: auto; }body.game-active .table-top { right: 140px; }
}

/* Discard order follows each seated player's own left-to-right direction. */
.river-left, .river-right { top: 40px; bottom: 40px; display: grid; width: 43px; height: auto; grid-template-columns: none; grid-template-rows: repeat(var(--river-count), var(--river-step)); align-content: center; align-items: start; }
.river-left { left: 58px; right: auto; }.river-right { right: 58px; left: auto; }
.river-top .tile { rotate: 180deg; }.river-left .tile { rotate: 90deg; }.river-right .tile { rotate: -90deg; }

/* Melds use the same full-size tile art as the player's hand. */
.meld-group, .hand-meld { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; background: transparent; }
.meld-tiles { display: flex; align-items: end; gap: 0; }
.melds i, .flowers i, .tile.meld-tile { width: 44px; height: 61px; }
.concealed i.revealed-tile { width: 44px; height: 61px; }
.opponent-hand-left .exposed i, .opponent-hand-right .exposed i, .opponent-hand-left .concealed i.revealed-tile, .opponent-hand-right .concealed i.revealed-tile { position: relative; width: 61px; height: 44px; margin: 0; rotate: none; }
.opponent-hand-left .exposed i .mahjong-glyph, .opponent-hand-right .exposed i .mahjong-glyph, .opponent-hand-left .concealed i.revealed-tile .mahjong-glyph, .opponent-hand-right .concealed i.revealed-tile .mahjong-glyph { position: absolute; top: -8.5px; left: 8.5px; width: 44px; height: 61px; }
.opponent-hand-left .exposed i .mahjong-glyph, .opponent-hand-left .concealed i.revealed-tile .mahjong-glyph { rotate: 90deg; }
.opponent-hand-right .exposed i .mahjong-glyph, .opponent-hand-right .concealed i.revealed-tile .mahjong-glyph { rotate: -90deg; }
.hand-melds .flowers { align-items: end; padding-left: 7px; }
.meld-tile-view, .tile.meld-tile { position: relative; }
.meld-tile-view.tile-back, .tile.meld-tile.tile-back {
  box-sizing: border-box;
  overflow: hidden;
  border: 3px solid #f5eedb;
  border-radius: 5px;
  background:
    linear-gradient(45deg, transparent 42%, #d6b86255 43% 57%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #d6b86255 43% 57%, transparent 58%),
    repeating-linear-gradient(0deg, #17634f 0 4px, #145746 4px 8px);
  box-shadow: inset 0 0 0 2px #0f4438, inset 0 0 0 4px #d9c47b;
}
.meld-arrow { position: absolute; z-index: 5; top: -18px; left: 50%; display: grid; place-items: center; width: 17px; height: 17px; transform: translateX(-50%); border: 1px solid #f6d98d; border-radius: 50%; color: #2b281d; background: #f1c86e; box-shadow: 0 2px 5px #0008; font: 900 13px/1 sans-serif; }
.claimed-tile { z-index: 1; outline: 2px solid #f1c86e; border-radius: 5px; filter: drop-shadow(0 0 5px #f1c86e88); }
.opponent-hand-left .meld-tiles, .opponent-hand-right .meld-tiles { flex-direction: column; }
.opponent-hand-left .meld-group, .opponent-hand-right .meld-group { padding: 0; }
.opponent-hand-top .meld-arrow { rotate: 180deg; }
.opponent-hand-left .meld-arrow { top: 50%; right: -18px; left: auto; transform: translateY(-50%); }
.opponent-hand-right .meld-arrow { top: 50%; left: -18px; transform: translateY(-50%); }

.result-close { position: absolute; z-index: 2; top: 9px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #76998f; border-radius: 50%; color: #e8eee9; background: #082a24cc; font: 25px/1 sans-serif; }

@media (max-width: 760px) {
  .river-left, .river-right { top: 32px; bottom: 32px; width: 34px; height: auto; grid-template-columns: none; grid-template-rows: repeat(var(--river-count), var(--river-step)); }
  .river-left { left: 25px; }.river-right { right: 25px; }
  .melds i, .flowers i, .tile.meld-tile { width: 35px; height: 50px; }
  .concealed i.revealed-tile { width: 35px; height: 50px; }
  .opponent-hand-left .exposed i, .opponent-hand-right .exposed i, .opponent-hand-left .concealed i.revealed-tile, .opponent-hand-right .concealed i.revealed-tile { width: 50px; height: 35px; }
  .opponent-hand-left .exposed i .mahjong-glyph, .opponent-hand-right .exposed i .mahjong-glyph, .opponent-hand-left .concealed i.revealed-tile .mahjong-glyph, .opponent-hand-right .concealed i.revealed-tile .mahjong-glyph { top: -7.5px; left: 7.5px; width: 35px; height: 50px; }
  .meld-arrow { width: 15px; height: 15px; font-size: 11px; }
  .opponent-hand-left .meld-arrow { right: -16px; }.opponent-hand-right .meld-arrow { left: -16px; }
}