:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --felt: #0c5a43;
  --felt-dark: #073c31;
  --gold: #ffd56a;
  --gold-soft: #d89a27;
  --ink: #14231e;
  --panel: rgba(24, 7, 6, 0.92);
  --line: rgba(255, 207, 92, 0.28);
  --danger: #e25745;
  --ok: #57ba78;
  --app-vw: 100vw;
  --app-vh: 100dvh;
  --stage-w: min(100vw,177.7778vh);
  --stage-h: min(56.25vw,100vh);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body, #app { width: 100%; min-height: 100%; margin: 0; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  color: #fff8df;
  background:
    radial-gradient(circle at 50% 28%, rgba(167, 34, 20, .42), transparent 34%),
    radial-gradient(circle at 16% 82%, rgba(111, 9, 7, .36), transparent 30%),
    repeating-linear-gradient(45deg, rgba(255,215,120,.022) 0 2px, transparent 2px 7px),
    #110504;
}
button, input, select { font: inherit; }
button { touch-action: manipulation; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: 58px; padding: env(safe-area-inset-top) 18px 0;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #32100c, #120605); border-bottom: 1px solid #d99b36aa;
  box-shadow: 0 4px 22px #000c; position: relative; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .08em; color: var(--gold); }
.topbar-logo { width: 39px; height: 39px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px #f4c85a, 0 4px 12px #000b; }
.status { display: flex; gap: 8px; align-items: center; color: #c9dcd3; font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #9b3b32; box-shadow: 0 0 8px currentColor; }
.dot.online { background: #54d983; }
.main { flex: 1; display: grid; place-items: center; padding: 26px 16px; }

.hero { width: min(950px, 100%); display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: stretch; }
.hero-title { min-height: 420px; padding: 24px; border-radius: 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; position: relative; border: 1px solid #dca43f88; box-shadow: 0 25px 70px #000c, inset 0 0 45px #5f0d0988; background: radial-gradient(circle at 50% 25%, #671a12, #210806 62%, #0d0303); }
.hero-title::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: #ffb52e22; filter: blur(35px); }
.hero-title h1 { margin: 0; color: #ffdb86; font: 900 clamp(37px, 6vw, 70px)/1.05 "STKaiti", "KaiTi", serif; text-shadow: 0 4px 0 #7a2e1c, 0 10px 24px #001d17; position: relative; }
.hero-title p { margin: 15px 0 0; max-width: 34em; line-height: 1.8; text-align: center; color: #f2dfbd; position: relative; }
.hero-logo { width: min(430px, 100%); aspect-ratio: 1; object-fit: cover; border-radius: 24px; position: relative; box-shadow: 0 0 0 2px #f1c35a99, 0 18px 40px #000b; }
.card { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(46,12,9,.96), var(--panel)); box-shadow: 0 18px 50px #000c, inset 0 1px #ffd77b22; backdrop-filter: blur(10px); }
.card h2 { margin: 0 0 20px; color: var(--gold); }
.stack { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; color: #d7e5dd; font-size: 14px; }
.field input, .field select { width: 100%; height: 48px; border: 1px solid #7d4d35; border-radius: 12px; padding: 0 14px; color: white; background: #160706; outline: none; }
.field input:focus, .field select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px #e7bd5f22; }
.room-code-input { font-size: 24px; letter-spacing: .32em; text-align: center; font-weight: 900; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { min-height: 44px; border: 1px solid #a84a32; border-radius: 12px; padding: 10px 18px; color: #fff3d4; background: linear-gradient(#7e251b, #4a100c); cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.16), 0 5px 14px #0009; transition: transform .12s, filter .12s; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(2px) scale(.99); }
.btn.primary { color: #3d1703; font-weight: 900; border-color: #ffe09a; background: linear-gradient(#ffe79c, #d99627); }
.btn.danger { background: #9d3c33; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checks { display: grid; gap: 9px; padding: 10px 0; }
.check { display: flex; gap: 9px; align-items: center; color: #e5eadf; }
.check input { accent-color: #dca84d; width: 18px; height: 18px; }
.muted { color: #91aaa0; font-size: 13px; line-height: 1.6; }

.room { width: min(900px, 100%); }
.room-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 18px; }
.code-box { color: var(--gold); }
.code-box small { display: block; color: #9fb7ac; font-size: 12px; letter-spacing: 0; }
.code-box strong { font-size: clamp(36px, 7vw, 64px); letter-spacing: .18em; }
.players { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin: 18px 0; }
.player { border-radius: 15px; border: 1px solid var(--line); background: #210a08; padding: 15px; display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #eccb7a, #a9712c); color: #3a2109; font-weight: 900; }
.player.offline { opacity: .58; }
.player .name { font-weight: 800; }
.badge { display: inline-block; margin-top: 5px; padding: 2px 7px; border-radius: 99px; background: #254d41; color: #bcd5ca; font-size: 11px; }
.badge.ready { background: #24683d; color: #d7ffe2; }
.rules-summary { padding: 13px 15px; border-radius: 12px; color: #ead9c3; background: #120504; line-height: 1.8; }

.table-page { min-height: calc(100vh - 58px); padding: 8px; display: grid; grid-template-rows: auto 1fr auto; gap: 5px; }
.game-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #d5e7df; }
.game-meta strong { color: var(--gold); }
.table-brand { display: flex; align-items: center; gap: 8px; }
.table-brand img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; box-shadow: 0 0 0 1px #efc45c, 0 3px 8px #0008; }
.table-brand b { color: #ffd366; }
.table-brand small { display: block; color: #b9cec5; font-size: 11px; }
.mahjong-table { width: min(1180px, 100%); height: min(690px, calc(100vh - 175px)); min-height: 500px; margin: auto; border: 10px solid #5f321d; border-radius: 38px; position: relative; overflow: hidden; background: radial-gradient(circle, #1b8964, var(--felt) 52%, var(--felt-dark)); box-shadow: inset 0 0 45px #00291f, 0 16px 35px #001c16; }
.mahjong-table::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 24px; pointer-events: none; }
.center-info { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 158px; height: 128px; border: 2px solid #d3a54b; border-radius: 18px; display: grid; place-items: center; text-align: center; background: #073c30dd; box-shadow: 0 8px 25px #001d18aa; z-index: 3; }
.center-info .wind { color: var(--gold); font-size: 25px; font-weight: 900; }
.center-info .remaining { font-size: 12px; color: #b8cec4; }
.seat { position: absolute; z-index: 4; }
.seat.self { left: 50%; bottom: 6px; width: min(94%, 900px); transform: translateX(-50%); }
.seat.top { left: 50%; top: 6px; width: 68%; transform: translateX(-50%); }
.seat.left { left: 6px; top: 50%; width: 220px; transform: translateY(-50%); }
.seat.right { right: 6px; top: 50%; width: 220px; transform: translateY(-50%); }
.seat-info { width: fit-content; min-width: 115px; padding: 5px 9px; border-radius: 9px; background: #04261fcc; border: 1px solid #ffffff16; font-size: 12px; }
.seat.self .seat-info { margin-bottom: 5px; }
.seat.top .seat-info { margin: 0 auto 4px; }
.seat.right .seat-info { margin-left: auto; }
.seat-info.active { outline: 2px solid var(--gold); box-shadow: 0 0 18px #ffcf6655; }
.dealer { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 5px; border-radius: 50%; background: #cf3b2d; color: white; font-size: 11px; }
.score { color: #f3d68e; }
.hand { min-height: 74px; display: flex; align-items: end; justify-content: center; gap: 2px; }
.opponent-hand { min-height: 34px; display: flex; justify-content: center; gap: 1px; margin: 4px; }
.back { width: 18px; height: 27px; border-radius: 3px; background: repeating-linear-gradient(45deg, #175f50 0 2px, #0e443a 2px 4px); border: 1px solid #d6c691; box-shadow: 1px 1px 2px #002018; }
.tile { width: clamp(29px, 4.4vw, 52px); height: clamp(44px, 6.8vw, 76px); border: 1px solid #b5aa80; border-radius: 7px; padding: 0; position: relative; overflow: visible; display: inline-flex; justify-content: center; align-items: center; user-select: none; color: #17201e; background: linear-gradient(110deg, #fffef2, #d6cda2); box-shadow: inset -3px -2px 0 #beb587, 0 5px 0 #9d9169, 1px 8px 8px #00251baa; cursor: pointer; transition: transform .14s, filter .14s; }
.tile:hover, .tile.selected { transform: translateY(-10px); }
.tile.selected { filter: brightness(1.08); box-shadow: inset -3px -2px 0 #c8bd8f, 0 5px 0 #9d9169, 0 0 15px #ffd663bb; }
.tile img { width: 100%; height: 100%; display: block; object-fit: fill; border-radius: 6px; pointer-events: none; }
.hand .tile.drawn { margin-left: 17px; }
.ting-marker { position: absolute; left: 50%; top: -24px; z-index: 8; min-width: 25px; height: 20px; padding: 1px 5px; transform: translateX(-50%); display: grid; place-items: center; border: 2px solid #fff0a0; border-radius: 8px 8px 8px 2px; color: #5a3000; background: linear-gradient(#ffe46f,#ffb51f); box-shadow: 0 0 13px #ffda36, 0 3px 5px #00251b99; font-size: 12px; font-weight: 900; animation: ting-pulse .85s ease-in-out infinite alternate; pointer-events: none; }
@keyframes ting-pulse { to { transform: translateX(-50%) translateY(-4px) scale(1.08); filter: brightness(1.15); } }
.discard-marker { position: absolute; left: 50%; top: -20px; z-index: 8; transform: translateX(-50%); color: #ffd84d; font-size: 18px; line-height: 1; text-shadow: 0 0 5px #ffb300, 0 2px 2px #442100; animation: discard-bounce .65s ease-in-out infinite alternate; pointer-events: none; }
@keyframes discard-bounce { to { transform: translateX(-50%) translateY(-5px); } }
.tile .rank { font: 900 clamp(16px, 2.5vw, 29px)/1 serif; }
.tile .suit { font: 700 clamp(10px, 1.4vw, 15px)/1.1 serif; }
.tile.wan { color: #b92720; }
.tile.bing { color: #165897; }
.tile.tiao { color: #087344; }
.tile.honor { color: #b72c22; }
.tile.honor[data-code="F"] { color: #087344; }
.tile.honor[data-code="BA"] { color: #186296; }
.mini-tiles { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.mini-tiles .tile { width: 27px; height: 38px; border-radius: 4px; cursor: default; }
.mini-tiles .tile:hover { transform: none; }
.discards { max-width: 310px; min-height: 55px; margin: 5px auto; display: flex; align-content: start; justify-content: center; flex-wrap: wrap; gap: 2px; }
.discards .tile { width: 25px; height: 35px; cursor: default; box-shadow: inset -2px -2px #bdb58e, 1px 2px 2px #003429; }
.discards .tile:hover { transform: none; }
.discards .tile.last-discard { outline: 2px solid #f6cf4c; outline-offset: 1px; filter: brightness(1.1); }
.seat.left .discards, .seat.right .discards { max-width: 160px; }
.action-bar { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 12; display: flex; gap: 8px; padding: 8px; border-radius: 15px; background: #031f1aca; box-shadow: 0 8px 24px #00161099; }
.action-btn { width: 58px; height: 58px; padding: 0; border-radius: 50%; color: #4f2607; font: 900 21px/1 "STKaiti", "KaiTi", serif; background: radial-gradient(circle at 35% 28%, #fff1a7, #d49a36); border: 2px solid #ffeaa2; box-shadow: 0 5px 10px #001e16aa; }
.action-btn.pass { color: white; background: radial-gradient(circle at 35% 28%, #5a7a70, #29483e); border-color: #789a8e; }
.claim-waiting { position: absolute; left: 50%; bottom: 105px; z-index: 12; transform: translateX(-50%); padding: 9px 14px; border: 1px solid #e4ba55; border-radius: 99px; color: #ffe7a2; background: #05271fe8; box-shadow: 0 5px 18px #001b15aa; font-size: 13px; }
.discard-control { position: absolute; right: 20px; bottom: 28px; z-index: 12; }
.bubble { position: absolute; z-index: 20; max-width: 220px; padding: 9px 12px; border-radius: 13px 13px 13px 3px; color: #26312e; background: #fff9da; box-shadow: 0 5px 16px #00261baa; animation: bubble 4s both; }
@keyframes bubble { 0% { opacity: 0; transform: translateY(6px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-5px); } }
.toolbar { display: flex; justify-content: center; gap: 8px; }
.quick-panel { position: fixed; right: 12px; bottom: 72px; z-index: 50; width: min(340px, calc(100vw - 24px)); padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #051f1bee; box-shadow: 0 15px 40px #001812cc; }
.quick-panel button { width: 100%; margin: 3px 0; text-align: left; }
.ting-popup { position: fixed; left: 50%; bottom: 96px; z-index: 45; width: min(520px, calc(100vw - 24px)); transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; padding: 13px 16px; border: 2px solid #e4b84f; border-radius: 16px; color: #fff7d6; background: linear-gradient(145deg, #092f27f5, #031b17f5); box-shadow: 0 15px 38px #001812dd, 0 0 22px #d7a93b33; }
.ting-popup small { display: block; margin-top: 4px; color: #9eb8ad; }
.ting-waits { display: flex; align-items: center; justify-content: flex-end; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; }
.ting-wait { display: flex; align-items: center; gap: 6px; min-width: max-content; color: #d6e7df; font-size: 12px; }
.ting-wait .tile { width: 35px; height: 49px; flex: 0 0 auto; cursor: default; }
.ting-wait b { display: block; color: #ffd35c; }
.settlement { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: #001a15bb; backdrop-filter: blur(5px); }
.settlement .card { width: min(620px, 100%); }
.score-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 12px; border-bottom: 1px solid var(--line); }
.positive { color: #77e596; font-weight: 900; }
.negative { color: #ff8f82; font-weight: 900; }
.toast { position: fixed; left: 50%; top: 74px; z-index: 200; transform: translate(-50%, -15px); max-width: min(520px, 90vw); padding: 10px 16px; border-radius: 12px; opacity: 0; pointer-events: none; color: white; background: #a33f35; box-shadow: 0 8px 25px #001812aa; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 商业化大厅与玩法入口 */
.topbar-tools, .game-tools { display: flex; align-items: center; gap: 10px; }
.sound-controls { display: flex; gap: 5px; }
.sound-toggle { width: 31px; height: 31px; padding: 0; border: 1px solid #8e5932; border-radius: 50%; color: #9d8f75; background: #130706; box-shadow: inset 0 1px #ffffff12; cursor: pointer; font-size: 13px; font-weight: 900; }
.sound-toggle.on { color: #2f1805; border-color: #ffe098; background: linear-gradient(#ffe8a0,#dba13b); box-shadow: 0 0 10px #efbb4b55; }
.hall-main { flex: 1; min-height: calc(100vh - 58px); padding: 34px clamp(16px,4vw,58px); background: radial-gradient(circle at 12% 18%,#7a1b142e,transparent 30%), radial-gradient(circle at 88% 72%,#d29b3520,transparent 28%); }
.hall-shell { width: min(1180px,100%); margin: 0 auto; }
.hall-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 30px; }
.hall-heading h1, .game-lobby-title h1 { margin: 5px 0 7px; color: #ffe195; font: 900 clamp(30px,4vw,52px)/1.05 "STKaiti","KaiTi",serif; text-shadow: 0 4px 16px #000b; }
.hall-heading p, .game-lobby-title p { margin: 0; color: #bcae9a; }
.eyebrow { color: #e6ae43; font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.profile-chip { min-width: 180px; padding: 10px 13px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: 1fr 1fr; column-gap: 10px; align-items: center; text-align: left; color: #f8e7bf; border: 1px solid #8f5432; border-radius: 15px; background: linear-gradient(145deg,#39100c,#180706); cursor: pointer; box-shadow: 0 8px 25px #0008; }
.profile-chip > span { grid-row: 1/3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #3a1b06; background: linear-gradient(145deg,#ffe499,#c88d2e); font-weight: 900; }
.profile-chip b { align-self: end; }.profile-chip small { color: #a9957a; align-self: start; }
.game-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(230px,.75fr); gap: 22px; }
.game-entry { min-height: 350px; position: relative; overflow: hidden; padding: 34px; display: grid; grid-template-columns: minmax(220px,43%) 1fr; gap: 28px; align-items: center; text-align: left; border: 1px solid #e5b24e99; border-radius: 28px; color: #fff5d6; background: radial-gradient(circle at 20% 20%,#9e271d,#3c0c09 48%,#130504); box-shadow: inset 0 1px #ffe7a433, inset 0 0 70px #5f090866, 0 25px 65px #000b; cursor: pointer; isolation: isolate; transition: transform .2s, box-shadow .2s; }
.game-entry::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.22; background: repeating-linear-gradient(125deg,transparent 0 14px,#f3c96c18 15px 16px); }
.game-entry:hover { transform: translateY(-5px); box-shadow: inset 0 1px #ffe7a455, inset 0 0 80px #8d160a88, 0 32px 75px #000d, 0 0 28px #e5a73b22; }
.game-entry img { width: min(300px,100%); aspect-ratio:1; object-fit:cover; border-radius: 23px; box-shadow: 0 0 0 2px #ffd87d99,0 20px 42px #000b; }
.game-entry-copy { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.game-entry-copy small { color:#e7af44; letter-spacing:.18em; }.game-entry-copy strong { color:#ffe6a5; font:900 clamp(38px,5vw,68px)/1 "STKaiti","KaiTi",serif; text-shadow:0 5px 0 #741e15,0 12px 28px #000; }.game-entry-copy em { color:#e4d3b5; font-style:normal; }
.rule-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }.rule-tags i { padding:5px 9px; color:#ffdfa0; border:1px solid #c67a38; border-radius:99px; background:#21070699; font-size:11px; font-style:normal; }
.enter-game { position:absolute; right:28px; bottom:25px; color:#341b05; padding:10px 16px; border-radius:99px; background:linear-gradient(#ffe69a,#d5982c); font-weight:900; box-shadow:0 5px 18px #0008; }
.entry-shine { position:absolute; top:-130%; left:-30%; width:35%; height:350%; transform:rotate(25deg); background:linear-gradient(90deg,transparent,#fff8d755,transparent); animation:entry-shine 4.5s ease-in-out infinite; pointer-events:none; }
@keyframes entry-shine { 0%,55%{left:-45%} 85%,100%{left:125%} }
.coming-entry { min-height:350px; padding:28px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border:1px dashed #7b5b3e; border-radius:28px; color:#897d6c; background:#16080799; }.coming-entry strong { margin:7px 0; color:#b49b74; font-size:25px; }.coming-entry small { max-width:15em; line-height:1.7; }
.hall-foot { margin-top:22px; display:flex; flex-wrap:wrap; justify-content:center; gap:28px; color:#917f69; font-size:12px; }.hall-foot span::before { content:"◆"; margin-right:7px; color:#c69031; }

/* 长岭麻将创建房与等候房 */
.game-lobby { background: radial-gradient(circle at 18% 50%,#8a211a25,transparent 33%); }
.game-lobby-shell { width:min(1050px,100%); display:grid; grid-template-columns:minmax(260px,.8fr) minmax(360px,1fr); gap:25px; align-items:stretch; position:relative; }
.back-hall { position:absolute; left:0; top:-46px; padding:8px 13px; color:#d7bd89; border:1px solid #735138; border-radius:99px; background:#160706aa; cursor:pointer; }
.game-lobby-title { min-height:520px; padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px solid #c78f3b66; border-radius:25px; background:radial-gradient(circle at 50% 30%,#741a13,#2a0907 58%,#100403); box-shadow:inset 0 0 55px #69110d55,0 22px 55px #000b; }
.game-lobby-title img { width:min(310px,88%); border-radius:22px; box-shadow:0 0 0 2px #efc66288,0 18px 36px #000c; }
.game-lobby-title h1 { font-size:44px; }.game-lobby-title .eyebrow { margin-top:22px; }
.room-maker { align-content:center; }
.create-room-trigger { width:100%; }
.create-room-panel { padding-top:14px; border-top:1px solid #6f3a2899; animation:panel-open .22s ease-out; }
@keyframes panel-open { from{opacity:0;transform:translateY(-8px)} }
.fixed-rules { padding:13px; display:flex; flex-wrap:wrap; gap:7px; border:1px solid #906334; border-radius:13px; background:#120504; }.fixed-rules b,.fixed-rules small { width:100%; }.fixed-rules b { color:#f3c767; }.fixed-rules span { padding:4px 8px; color:#e8d7b5; border-radius:99px; background:#472015; font-size:12px; }.fixed-rules small { color:#94816c; }
.room-page { background:radial-gradient(circle at 50% 30%,#731a142d,transparent 38%); }
.room-game-title { margin:-7px -7px 16px; padding:12px 15px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #7b4e30; color:#f4cb70; }.room-game-title span { font:900 24px/1 "STKaiti","KaiTi",serif; }.room-game-title small { color:#9f8c74; }

/* 牌桌动作、吃牌选择与动画 */
.seat-info { display:flex; align-items:center; gap:7px; }
.seat-avatar { width:31px; height:31px; flex:0 0 auto; display:grid; place-items:center; border:1px solid #e0bb65; border-radius:50%; color:#351b07; background:linear-gradient(145deg,#ffe6a0,#bd8130); font-weight:900; box-shadow:0 3px 7px #001b16aa; }
.seat-copy { display:grid; gap:2px; }.seat-copy b { white-space:nowrap; }.seat-copy small { display:block; }.seat-copy .dealer { width:18px;height:18px;font-size:10px;font-style:normal; }
.game-tools .btn { min-height:34px; padding:6px 11px; }
.discards .tile.last-discard { animation:discard-land .36s cubic-bezier(.2,1.5,.5,1),discard-glow 1s .36s ease-in-out infinite alternate; }
@keyframes discard-land { from { opacity:0; transform:translateY(-60px) scale(1.55) rotate(-8deg); } 70% { transform:translateY(5px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes discard-glow { to { filter:brightness(1.18); box-shadow:0 0 12px #ffd559; } }
.table-page.dealing .hand .tile { animation:deal-card .45s cubic-bezier(.2,.9,.3,1.2) both; }
.table-page.dealing .hand .tile:nth-child(2n) { animation-delay:.05s; }.table-page.dealing .hand .tile:nth-child(3n) { animation-delay:.1s; }
@keyframes deal-card { from { opacity:0; transform:translate(180px,-180px) rotate(12deg) scale(.55); } }
.action-bar { align-items:center; max-width:calc(100% - 20px); overflow-x:auto; }
.action-btn { cursor:pointer; transition:transform .14s,filter .14s; }.action-btn:hover { transform:translateY(-4px) scale(1.04); filter:brightness(1.08); }
.action-btn.chi-choice { width:auto; min-width:154px; height:72px; padding:6px 9px 6px 7px; display:flex; align-items:center; gap:7px; border-radius:16px; }
.chi-label { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#502508; background:#ffe69a; box-shadow:inset 0 1px #fff; font-size:20px; }
.chi-preview { display:flex; gap:2px; }.chi-preview-tile { width:31px; height:44px; overflow:hidden; display:block; border:1px solid #a08f63; border-radius:4px; background:#fffde9; box-shadow:0 3px 0 #8c7c57,0 5px 6px #0007; }.chi-preview-tile img { width:100%; height:100%; display:block; }

/* 进入房间、开局、吃碰杠胡特效 */
.operation-effect { position:fixed; left:50%; top:48%; z-index:180; min-width:220px; transform:translate(-50%,-50%); display:grid; place-items:center; text-align:center; pointer-events:none; animation:effect-life 1.35s both; }
.operation-effect strong { position:relative; z-index:2; color:#fff2b0; font:900 clamp(58px,10vw,112px)/1 "STKaiti","KaiTi",serif; text-shadow:0 3px 0 #9a311c,0 8px 0 #3f110b,0 0 18px #ffcc58,0 18px 40px #000; }
.operation-effect small { position:relative; z-index:2; margin-top:12px; padding:6px 13px; border:1px solid #e5b74f; border-radius:99px; color:#ffe7aa; background:#190806dd; box-shadow:0 6px 18px #000a; }
.effect-ring { position:absolute; width:190px; height:190px; border:3px solid #ffd768; border-radius:50%; box-shadow:0 0 24px #ffbf38,inset 0 0 24px #ffbf38; animation:ring-burst 1s ease-out both; }
.effect-sparks { position:absolute; width:310px; height:310px; background:repeating-conic-gradient(from 0deg,transparent 0 12deg,#ffda6522 13deg 15deg,transparent 16deg 30deg); animation:sparks-spin 1.35s ease-out both; }
.operation-effect.hu strong,.operation-effect.zimo strong { color:#fff5ad; text-shadow:0 3px 0 #d02016,0 9px 0 #6a0705,0 0 28px #ff3b23,0 20px 45px #000; }
.operation-effect.gang strong { color:#fff3d1; text-shadow:0 3px 0 #207463,0 9px 0 #073c33,0 0 25px #6ff0ce,0 20px 45px #000; }
.operation-effect.enter strong,.operation-effect.start strong { font-size:clamp(44px,8vw,82px); }
@keyframes effect-life { 0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-8deg)} 18%{opacity:1;transform:translate(-50%,-50%) scale(1.12)} 30%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-62%) scale(1.08)} }
@keyframes ring-burst { from{opacity:0;transform:scale(.25)} 35%{opacity:1} to{opacity:0;transform:scale(2.2)} }
@keyframes sparks-spin { from{opacity:0;transform:rotate(-25deg) scale(.45)} 30%{opacity:1} to{opacity:0;transform:rotate(25deg) scale(1.35)} }

/* 商业化单手结算 */
.settlement { background:radial-gradient(circle at 50% 35%,#5f1b1599,#080302e8 55%); }
.settlement-card { width:min(660px,100%); overflow:hidden; position:relative; padding:26px; border:1px solid #e1b05088; border-radius:25px; color:#f9edcf; background:linear-gradient(145deg,#48120e,#1b0705 60%,#100403); box-shadow:inset 0 1px #ffe8a733,inset 0 0 70px #7e170e44,0 28px 80px #000; animation:settlement-in .45s cubic-bezier(.2,1.1,.4,1) both; }
.settlement-ribbon { margin:-26px -26px 22px; padding:11px; text-align:center; color:#4a2106; background:linear-gradient(90deg,#b87823,#ffe49a,#b87823); font-weight:900; letter-spacing:.15em; }
.settlement-title { display:flex; align-items:center; gap:16px; }.settlement-title > span { width:72px;height:72px;display:grid;place-items:center;border-radius:50%;color:#4a2106;background:radial-gradient(circle at 35% 30%,#fff3b1,#d5972d);box-shadow:0 0 0 4px #7a2818,0 8px 20px #000a;font:900 42px/1 "STKaiti","KaiTi",serif; }.settlement-title h2 { margin:0;color:#ffe096;font-size:31px; }.settlement-title p { margin:6px 0 0;color:#af9d83; }
.score-tags { margin:18px 0 10px; display:flex; flex-wrap:wrap; gap:7px; }.score-tags span { padding:5px 9px;border:1px solid #9d6332;border-radius:99px;color:#f2d28b;background:#230907;font-size:12px; }
.score-board { margin-top:18px; border:1px solid #60331f; border-radius:15px; overflow:hidden; background:#100403aa; }
.settlement-card .score-row { padding:11px 14px; align-items:center; }.score-player { display:flex;align-items:center;gap:9px; }.score-player i { width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:#391c06;background:linear-gradient(#f7d98a,#b57a2d);font-style:normal;font-weight:900; }.score-player small { padding:2px 5px;border-radius:50%;color:white;background:#b52c20; }
.settlement-actions { margin-top:18px; justify-content:flex-end; }.settlement-actions .btn.primary { min-width:160px; }
@keyframes settlement-in { from { opacity:0;transform:translateY(35px) scale(.86); } }

@media (max-width: 720px) {
  .hall-main { padding:20px 11px; }.hall-heading { align-items:flex-start; }.hall-heading p { display:none; }.profile-chip { min-width:0; grid-template-columns:38px; padding:8px; }.profile-chip b,.profile-chip small { display:none; }.profile-chip > span { width:38px;height:38px; }
  .game-grid { grid-template-columns:1fr; }.game-entry { min-height:390px; padding:20px; grid-template-columns:1fr; gap:15px; text-align:center; }.game-entry img { width:min(220px,65vw); margin:auto; }.game-entry-copy { align-items:center; }.game-entry-copy strong { font-size:48px; }.enter-game { right:50%; transform:translateX(50%); }.coming-entry { min-height:150px; }
  .hall-foot { gap:10px 18px; }.game-lobby-shell { grid-template-columns:1fr; padding-top:32px; }.game-lobby-title { min-height:270px; }.game-lobby-title img { width:150px; }.game-lobby-title h1 { font-size:34px; }.game-lobby-title p { display:none; }.back-hall { top:-8px; }.room-maker { padding:18px; }
  .topbar-tools { gap:6px; }.topbar .status { font-size:0; }.topbar .status .dot { width:8px;height:8px; }.sound-toggle { width:29px;height:29px; }.game-tools > span { display:none; }
  .hero { grid-template-columns: 1fr; }
  .hero-title { min-height: 230px; padding: 28px; }
  .hero-logo { width: min(280px, 100%); }
  .main { padding: 14px 10px; }
  .topbar { height: 52px; padding-inline: 10px; }
  .mahjong-table { height: calc(100vh - 155px); min-height: 440px; border-width: 6px; border-radius: 24px; }
  .seat.left, .seat.right { width: 120px; }
  .discards { max-width: 210px; }
  .seat.left .discards, .seat.right .discards { max-width: 100px; }
  .center-info { width: 115px; height: 92px; }
  .action-bar { bottom: 80px; }
  .action-btn { width: 50px; height: 50px; font-size: 18px; }.action-btn.chi-choice { min-width:132px;height:62px;padding:5px; }.chi-preview-tile { width:26px;height:37px; }.chi-label { width:29px;height:29px;font-size:17px; }
  .discard-control { right: 8px; bottom: 18px; }
  .ting-popup { bottom: 82px; }
}

@media (orientation: portrait) and (max-width: 720px) {
  .table-page::before { content: "横屏体验更好"; position: fixed; right: 6px; top: 55%; z-index: 80; padding: 5px 8px; border-radius: 8px; color: #e9d296; background: #072a23cc; font-size: 11px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .table-page { min-height: 100vh; height: 100vh; padding: 3px 6px; grid-template-rows: 44px 1fr; overflow: hidden; }
  .game-meta { min-height: 42px; }
  .table-brand img { width: 34px; height: 34px; }
  .mahjong-table { width: 100%; height: 100%; min-height: 0; border-width: 5px; border-radius: 24px; }
  .center-info { width: 112px; height: 88px; border-radius: 12px; }
  .center-info .wind { font-size: 20px; }
  .seat.self { bottom: 2px; }
  .seat.top { top: 2px; }
  .seat.left, .seat.right { width: 135px; }
  .seat-info { min-width: 92px; padding: 3px 7px; font-size: 10px; }
  .hand { min-height: 52px; }
  .tile { width: clamp(28px, 4.2vw, 39px); height: clamp(41px, 6.1vw, 56px); }
  .tile .rank { font-size: clamp(15px, 2.5vw, 22px); }
  .tile .suit { font-size: 10px; }
  .discards { min-height: 32px; margin-block: 2px; }
  .discards .tile { width: 20px; height: 28px; }
  .action-bar { bottom: 60px; padding: 5px; }
  .action-btn { width: 44px; height: 44px; font-size: 16px; }
  .discard-control { right: 10px; bottom: 13px; min-height: 38px; padding: 7px 14px; }
  .hand .tile.drawn { margin-left: 11px; }
  .ting-marker { top: -18px; min-width: 21px; height: 17px; font-size: 10px; }
  .ting-popup { bottom: 61px; width: min(500px, calc(100vw - 120px)); padding: 8px 11px; }
  .ting-wait .tile { width: 28px; height: 39px; }
  .toolbar { display: none; }
}

/* 3.0 全屏商业牌桌、资料、桌布、战绩与白金结算 */
.avatar-image,.avatar,.seat-avatar,.rank-avatar { overflow:hidden; display:inline-grid; place-items:center; border-radius:50%; background:#183d35; }
.avatar-image img,.avatar img,.seat-avatar img,.rank-avatar img { width:100%;height:100%;display:block;object-fit:cover; }
.player .avatar { width:50px;height:50px;border:2px solid #e7bd66;box-shadow:0 5px 14px #0008; }
.player-id { display:block;margin-top:2px;color:#938873;font-size:10px; }
.profile-setup { align-content:center; }
.avatar-picker { margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(4,1fr);gap:9px; }
.avatar-picker legend { margin-bottom:9px;color:#d7e5dd;font-size:14px; }
.avatar-choice { cursor:pointer; }
.avatar-choice input { position:absolute;opacity:0;pointer-events:none; }
.avatar-choice span { padding:8px 5px;display:grid;justify-items:center;gap:6px;border:1px solid #6e4936;border-radius:13px;color:#ad9b81;background:#150605;transition:.18s; }
.avatar-choice img { width:54px;height:54px;border-radius:50%;object-fit:cover;box-shadow:0 4px 10px #0008; }
.avatar-choice b { font-size:10px;white-space:nowrap; }
.avatar-choice input:checked+span { color:#ffe49b;border-color:#f2c35d;background:#4e1710;box-shadow:0 0 0 2px #eab54f33,0 8px 17px #0007;transform:translateY(-2px); }
.profile-chip.refined { min-width:230px;grid-template-columns:58px 1fr;grid-template-rows:1fr;padding:9px 14px; }
.profile-chip.refined>.avatar-image { grid-row:auto;grid-column:1;width:58px;height:58px;border:2px solid #f2ca6d;box-shadow:0 4px 12px #0008; }
.profile-chip.refined>span:not(.avatar-image) { grid-column:2;width:auto;height:auto;display:grid;align-content:center;justify-items:start;background:none;color:inherit; }
.profile-chip.refined b { font-size:16px; }.profile-chip.refined small { margin-top:4px; }
.hall-heading { display:grid;grid-template-columns:auto 1fr auto; }
.hall-welcome { text-align:center; }.hall-welcome h1 { font-size:clamp(27px,3.4vw,46px); }
.hall-tools,.table-tools { display:flex;gap:13px; }
.round-tool { width:62px;padding:0;border:0;color:#f4dc9f;background:transparent;cursor:pointer;display:grid;justify-items:center;gap:4px;filter:drop-shadow(0 4px 6px #0008); }
.round-tool i { width:46px;height:46px;display:grid;place-items:center;border:1.5px solid #ddbd71;border-radius:50%;color:#ffe8a7;background:radial-gradient(circle at 35% 28%,#74501f,#17100b 68%);box-shadow:inset 0 0 0 3px #0007,0 0 0 1px #422c16;font-size:19px;font-style:normal;font-weight:900;transition:.16s; }
.round-tool span { font-size:11px;font-weight:800;text-shadow:0 2px 3px #000; }
.round-tool:hover i,.round-tool:active i { transform:scale(1.08) rotate(-4deg);filter:brightness(1.15); }
.hall-ornament { margin:22px auto 0;width:min(480px,80%);display:flex;align-items:center;gap:12px;color:#d8a94c;font:900 17px/1 "KaiTi",serif;opacity:.7; }
.hall-ornament i { height:1px;flex:1;background:linear-gradient(90deg,transparent,#b67e34,transparent); }

.table-page { position:fixed;left:0;top:0;z-index:30;width:var(--app-vw,100vw);height:var(--app-vh,100dvh);min-height:0;padding:0;display:block;overflow:hidden;background:#073e31; }
.table-page .mahjong-table { position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;border:0;border-radius:0;overflow:hidden;background-color:#073e31;background-image:linear-gradient(#00110b10,#00110b10),var(--table-image);background-size:cover;background-position:center;box-shadow:none; }
.table-page .mahjong-table::before { inset:1.8%;border:1px solid #ffdf8525;border-radius:5.3vw;box-shadow:inset 0 0 60px #00180f55; }
.table-hud-left { position:absolute;z-index:22;left:2.7%;top:2.5%;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border:1px solid #d9b75c88;border-radius:15px;color:#f8e8bb;background:linear-gradient(135deg,#13271fdc,#06120ed0);box-shadow:0 8px 24px #00130dbb,inset 0 1px #fff2b622;backdrop-filter:blur(5px); }
.table-hud-left img { width:58px;height:58px;object-fit:cover;border-radius:11px;box-shadow:0 0 0 1px #e3bd5c,0 4px 12px #0008; }
.table-hud-left div { display:grid;gap:2px; }.table-hud-left b { color:#ffe28d;font:900 21px/1.15 "STKaiti","KaiTi",serif; }.table-hud-left span { color:#d2cab7;font-size:11px; }
.device-strip { position:absolute;z-index:22;left:3%;top:13.3%;display:flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid #ba974f70;border-radius:9px;color:#f3e5bd;background:#081812c9;box-shadow:0 4px 12px #0008;font-size:10px; }
.network-state { color:#9de1b8; }.battery-icon { width:23px;height:11px;padding:1px;display:block;border:1px solid #d9c593;border-radius:2px;position:relative; }.battery-icon::after { content:"";position:absolute;right:-4px;top:3px;width:2px;height:5px;border-radius:0 1px 1px 0;background:#d9c593; }.battery-icon i { height:100%;display:block;border-radius:1px;background:#e5c55f;transition:width .3s; }
.table-tools { position:absolute;z-index:24;right:3%;top:2.7%; }.table-tools .round-tool.danger i { color:#ffd7c1;border-color:#d9986e;background:radial-gradient(circle at 35% 28%,#74331f,#210c09 68%); }
.center-info { left:50%;top:49%;width:184px;height:184px;border:0;border-radius:50%;background:radial-gradient(circle,#173d31ef 0 31%,#071f18ed 32% 57%,#c6a34c 58% 60%,#092219eb 61%);box-shadow:0 12px 34px #00130cb8,0 0 0 1px #e6c56aaa; }
.compass-face { position:relative;width:100%;height:100%;border-radius:50%; }
.compass-wind { position:absolute;z-index:3;width:34px;height:34px;display:grid;place-items:center;border:1px solid #9b8a5d88;border-radius:50%;color:#d6cdae;background:#0b261eaa;box-shadow:inset 0 1px #ffffff12;font:900 17px/1 "KaiTi",serif;transition:.2s; }
.compass-wind.top { left:50%;top:9px;transform:translateX(-50%); }.compass-wind.right { right:9px;top:50%;transform:translateY(-50%); }.compass-wind.bottom { left:50%;bottom:9px;transform:translateX(-50%); }.compass-wind.left { left:9px;top:50%;transform:translateY(-50%); }
.compass-wind i { display:none;position:absolute;color:#ffe16a;font:900 18px/1 sans-serif;text-shadow:0 0 8px #ffcf3b;animation:compass-arrow .65s ease-in-out infinite alternate; }.compass-wind.top i { top:29px; }.compass-wind.top i::before { content:"↑"; }.compass-wind.right i { right:29px; }.compass-wind.right i::before { content:"→"; }.compass-wind.bottom i { bottom:29px; }.compass-wind.bottom i::before { content:"↓"; }.compass-wind.left i { left:29px; }.compass-wind.left i::before { content:"←"; }
.compass-wind.active { color:#4d2805;border-color:#fff0a2;background:radial-gradient(circle at 35% 25%,#fff1a0,#e0a52f);box-shadow:0 0 0 3px #ffd75833,0 0 22px #ffd34f,0 4px 10px #00150d99;transform-origin:center; }.compass-wind.active i { display:block; }.compass-wind.top.active,.compass-wind.bottom.active { transform:translateX(-50%) scale(1.08); }.compass-wind.left.active,.compass-wind.right.active { transform:translateY(-50%) scale(1.08); }
.countdown-core { position:absolute;left:50%;top:50%;width:66px;height:66px;transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr auto;place-content:center;align-items:end;border:1px solid #d4ae55;border-radius:50%;background:#092b22e8;box-shadow:inset 0 0 17px #00130c,0 5px 13px #00130caa; }.countdown-core strong { color:#ffe393;font:900 36px/.9 "DIN Alternate","Arial",sans-serif;text-shadow:0 3px 7px #000; }.countdown-core strong.ending { color:#ff7d67;animation:countdown-ending .45s infinite alternate; }.countdown-core small { margin:0 0 3px 2px;color:#baa76e;font-size:9px; }
.center-info>.remaining { position:absolute;top:calc(100% + 8px);left:50%;width:max-content;transform:translateX(-50%);padding:5px 10px;border-radius:99px;color:#e7ddc6;background:#03140fbc;box-shadow:0 4px 10px #0007;font-size:11px; }.center-info>.remaining b { color:#ffe079;font-size:14px; }.center-info>.remaining.urgent b { color:#ff5548;animation:wall-warning 1.6s ease-in-out infinite; }
@keyframes compass-arrow { to{filter:brightness(1.3);transform:scale(1.22)} } @keyframes countdown-ending { to{transform:scale(1.08);filter:drop-shadow(0 0 8px #ff3b2d)} } @keyframes wall-warning { 50%{opacity:.35;text-shadow:0 0 10px #ff1c10} }

.table-page .seat { z-index:8; }
.table-page .seat-info { min-width:142px;padding:6px 9px;border:1px solid #daba6675;border-radius:13px;color:#f7edcf;background:linear-gradient(135deg,#0a211ada,#04100ddb);box-shadow:0 6px 16px #00130dad;backdrop-filter:blur(4px); }
.table-page .seat-info.active { outline:0;border-color:#ffe382;box-shadow:0 0 0 2px #ffd25e55,0 0 24px #ffc62d6b;animation:active-seat 1.4s ease-in-out infinite alternate; }
@keyframes active-seat { to{filter:brightness(1.15)} }
.table-page .seat-avatar { width:42px;height:42px;border:2px solid #e7c66f;box-shadow:0 3px 8px #0008; }
.table-page .seat-copy { gap:1px; }.table-page .seat-copy b { color:#fff2c8;font-size:12px; }.table-page .seat-copy small { color:#a9b9ae;font-size:9px; }.table-page .seat-copy .score { color:#f3cf6d;font-size:11px;font-style:normal;font-weight:900; }
.table-page .seat.self { left:50%;bottom:1.4%;width:87%;height:27%;transform:translateX(-50%); }
.table-page .seat.self .seat-info { position:absolute;left:0;bottom:7px;margin:0; }
.table-page .seat.self .hand { position:absolute;left:50%;bottom:0;width:82%;min-height:0;transform:translateX(-50%);gap:3px; }
.table-page .seat.self>.meld-area { position:absolute;left:1%;bottom:52%;width:47%;max-width:47%;flex-wrap:wrap; }
.table-page .seat.self>.discards { position:absolute;left:72%;top:-42%;bottom:auto;width:max-content;max-width:none;margin:0;transform:translateX(-50%); }
.table-page .seat.top { left:50%;top:2.7%;width:58%;height:27%;transform:translateX(-50%); }
.table-page .seat.top .seat-info { position:absolute;left:auto;right:-3%;top:3%; }
.table-page .seat.top .opponent-hand { position:absolute;left:50%;top:0;transform:translateX(-50%); }
.table-page .seat.top>.meld-area { position:absolute;right:-3%;top:72px;max-width:48%;justify-content:flex-end; }
.table-page .seat.top>.discards { position:absolute;left:50%;top:70%;width:max-content;max-width:none;margin:0;transform:translateX(-50%); }
.table-page .seat.left,.table-page .seat.right { top:50%;width:23%;height:60%;transform:translateY(-50%); }
.table-page .seat.left { left:2.2%; }.table-page .seat.right { right:2.2%; }
.table-page .seat.left .seat-info { position:absolute;left:0;top:4%; }.table-page .seat.right .seat-info { position:absolute;right:0;top:4%; }
.table-page .seat.left .opponent-hand,.table-page .seat.right .opponent-hand { position:absolute;top:50%;margin:0;display:flex;flex-direction:column;transform:translateY(-50%);gap:1px; }
.table-page .seat.left .opponent-hand { left:0; }.table-page .seat.right .opponent-hand { right:0; }
.table-page .seat.left>.meld-area,.table-page .seat.right>.meld-area { position:absolute;bottom:3%;max-width:190px; }.table-page .seat.left>.meld-area { left:0; }.table-page .seat.right>.meld-area { right:0;justify-content:flex-end; }
.table-page .seat.left>.discards,.table-page .seat.right>.discards { position:absolute;top:45%;width:max-content;max-width:none;margin:0;transform:translateY(-50%);grid-template-columns:repeat(5,max-content); }
.table-page .seat.left>.discards { left:31%;justify-content:flex-start; }.table-page .seat.right>.discards { right:31%;justify-content:flex-end; }
.table-page .opponent-hand .back { width:20px;height:30px;border:1px solid #e5dcb3;background:linear-gradient(100deg,#3e7656,#164d3c 55%,#0b352b);box-shadow:inset -2px -2px #0b3528,1px 3px 4px #00150e99; }
.table-page .seat.left .back,.table-page .seat.right .back { width:30px;height:17px; }
.table-page .hand .tile { width:clamp(35px,4.25vw,66px);height:clamp(52px,6.25vw,96px);border-radius:8px;box-shadow:inset -4px -3px 0 #c2ba91,0 6px 0 #8c835d,1px 10px 10px #00150dbb; }
.table-page .discards { display:grid;grid-template-columns:repeat(12,max-content);align-content:start;justify-content:start;gap:3px; }.table-page .discards .tile { width:clamp(30px,2.75vw,42px);height:clamp(42px,3.85vw,58px); }
.table-page .mini-tiles .tile { width:clamp(23px,2.35vw,36px);height:clamp(33px,3.35vw,50px); }
.meld-area { display:flex;align-items:flex-end;gap:9px;flex-wrap:nowrap;z-index:10; }
.meld-group { position:relative;flex:0 0 auto;padding:15px 5px 5px;border:1px solid #d5b66080;border-radius:8px;background:#061912d6;box-shadow:0 5px 12px #00120baa,inset 0 1px #fff2c21c; }
.meld-kind { position:absolute;left:6px;top:2px;color:#f4d476;font-size:9px;font-weight:900;line-height:1;white-space:nowrap; }
.meld-group .mini-tiles { margin:0;display:flex;flex-wrap:nowrap;gap:2px; }
.meld-tile-wrap { position:relative;display:inline-flex; }
.supplement-count { position:absolute;right:-5px;top:-14px;z-index:5;min-width:22px;height:17px;padding:1px 4px;display:grid;place-items:center;border:1px solid #fff0a4;border-radius:7px;color:#5a2d00;background:linear-gradient(#ffe77c,#e9aa2b);box-shadow:0 2px 7px #00150da8;font-size:10px;line-height:1; }
.table-page .action-bar { left:50%;bottom:18.5%;max-width:64%;padding:8px 12px;gap:10px;border:1px solid #d5b25a77;border-radius:18px;background:linear-gradient(180deg,#0b2e24e8,#03140fed);box-shadow:0 10px 28px #00120cbb,inset 0 1px #fff1b31f; }
.table-page .action-btn { width:68px;height:54px;border-radius:14px;border:1px solid #d6b25d;color:#fff0bd;background:linear-gradient(#38604e,#143c30);box-shadow:inset 0 0 0 2px #08241b,0 4px 0 #061b15,0 8px 14px #0008;font-size:24px; }
.table-page .action-btn.pass { color:#d1d7cf;border-color:#82968c;background:linear-gradient(#526961,#283f37); }
.table-page .action-btn.chi-choice { min-width:150px;height:62px;border-radius:14px; }
.ting-control { position:absolute;z-index:20;right:3.2%;bottom:3.3%;width:76px;height:76px;padding:0;display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;align-items:center;border:2px solid #d9b55b;border-radius:50%;color:#f9e8b0;background:radial-gradient(circle at 35% 28%,#466c59,#0a3026 65%);box-shadow:inset 0 0 0 4px #062219,0 6px 15px #00130cbb;cursor:pointer; }
.ting-control i { grid-row:1/3;margin-left:9px;font:900 29px/1 "KaiTi",serif;font-style:normal;color:#ffe17e; }.ting-control span { align-self:end;text-align:left;font-size:10px;font-weight:900; }.ting-control small { align-self:start;text-align:left;color:#9db4aa;font-size:7px; }.ting-control.has-hints { animation:ting-control-glow 1.3s infinite alternate; }
@keyframes ting-control-glow { to{box-shadow:inset 0 0 0 4px #062219,0 0 24px #ffd64f;transform:scale(1.04)} }
.table-page .discard-control { right:11%;bottom:4.1%;min-width:76px;height:50px;border:1px solid #ffe29a;border-radius:14px;color:#4b2506;background:linear-gradient(#ffeaa1,#d69c30);box-shadow:0 5px 0 #754416,0 9px 17px #00150da8;font-size:17px;font-weight:900;cursor:pointer; }.table-page .discard-control:disabled { opacity:.42;filter:grayscale(.4); }
.table-page .quick-panel { right:3%;top:14%;bottom:auto;max-height:72vh;overflow:auto;border-color:#d4b05788;background:#071a15f4; }
.table-page .ting-popup { bottom:18.5%; }

.modal-layer { position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;background:#00130db5;backdrop-filter:blur(6px); }
.settings-card,.history-card,.ting-assistant-card { position:relative;width:min(760px,96vw);max-height:88vh;overflow:auto;padding:24px;border:1px solid #e3c16c;border-radius:24px;color:#f7edcf;background:linear-gradient(145deg,#1c3129f5,#071711f8);box-shadow:inset 0 1px #fff4c933,0 25px 70px #000d;animation:modal-pop .28s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes modal-pop { from{opacity:0;transform:scale(.85) translateY(18px)} }
.settings-card h2,.history-card h2,.ting-assistant-card h2 { margin:5px 0 18px;color:#ffe18d; }.modal-close { position:absolute;right:14px;top:12px;width:34px;height:34px;padding:0;border:1px solid #b49555;border-radius:50%;color:#ffe9b1;background:#17261f;cursor:pointer;font-size:22px; }
.theme-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:13px; }.theme-choice { overflow:hidden;padding:0;border:2px solid transparent;border-radius:14px;color:#dfd2b4;background:#08130f;cursor:pointer;text-align:left; }.theme-choice img { width:100%;aspect-ratio:16/6;display:block;object-fit:cover; }.theme-choice span { display:block;padding:8px 11px; }.theme-choice.selected { border-color:#ffd569;box-shadow:0 0 18px #ffd05344; }.setting-switches { margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px; }.setting-switches button { padding:12px;display:flex;justify-content:space-between;border:1px solid #856b3e;border-radius:12px;color:#eee2c5;background:#0b1c16;cursor:pointer; }.setting-switches b { color:#f2c960; }
.ting-plan-list { display:grid;gap:10px; }.ting-plan { padding:10px;display:grid;grid-template-columns:auto 22px 1fr;gap:10px;align-items:center;border:1px solid #5d725f;border-radius:14px;background:#06130f88; }.ting-plan>i { color:#e3bc5d;font-style:normal;font-size:22px; }.discard-choice,.wait-choice { display:inline-flex;align-items:center;gap:6px; }.wait-choice { margin:3px 8px 3px 0; }.ting-plan .tile { width:34px;height:48px;cursor:default; }.ting-plan .tile:hover { transform:none; }.wait-choice small { color:#ffd064; }
.history-note { color:#9dad9f;font-size:12px; }.history-list { display:grid;gap:9px; }.history-list article { padding:12px;display:grid;grid-template-columns:auto 1fr auto;gap:5px 12px;align-items:center;border:1px solid #536859;border-radius:13px;background:#07150f99; }.history-list time { color:#9dad9f;font-size:10px; }.history-list article>span { color:#d1c9b6;font-size:12px; }.history-list article>b { color:#ffe089; }.history-list article>div { grid-column:1/4;display:flex;flex-wrap:wrap;gap:8px 16px;border-top:1px solid #ffffff0d;padding-top:6px; }.history-list small { color:#c7d0c5; }.empty-history { padding:40px;text-align:center;color:#9da99d;border:1px dashed #56685b;border-radius:14px; }

.settlement { background:#07150fb8;backdrop-filter:blur(8px); }
.settlement-card.ivory { width:min(920px,96vw);min-height:470px;padding:24px;display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;border:4px solid #f8edcf;border-radius:36px;color:#4e3326;background:linear-gradient(135deg,#fffdf3,#fff8df);box-shadow:inset 0 0 0 2px #b9a581,0 28px 80px #000b; }
.settlement-back { position:absolute;left:18px;top:18px;z-index:3;width:38px;height:38px;padding:0;border:1px solid #d89d32;border-radius:50%;color:white;background:linear-gradient(#ffd86e,#d88e20);box-shadow:0 4px 9px #98601955;cursor:pointer;font-size:25px; }
.settlement-hero { padding:18px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid #ead7ab;border-radius:20px;background:radial-gradient(circle at 50% 20%,#fffefa,#fff5d8);box-shadow:inset 0 0 25px #e4c67f35; }
.settlement-kicker { color:#b25220;font:900 27px/1.1 "KaiTi",serif; }.hero-score { margin-top:7px;color:#aa3c17!important;font:900 50px/1 "Arial",sans-serif; }.settlement-hero>small { margin-top:7px;padding:4px 12px;border-radius:99px;color:#8a5a2e;background:#f3e1b1; }
.coin-stage { position:relative;width:220px;height:150px;margin-top:8px; }.coin-stage i { position:absolute;bottom:20px;width:58px;height:25px;border:5px solid #d98e1c;border-radius:50%;background:#ffd858;box-shadow:0 6px 0 #c97b14,0 12px 0 #eca72e; }.coin-stage i:nth-child(1){left:22px;transform:rotate(8deg)}.coin-stage i:nth-child(2){right:19px;transform:rotate(-8deg)}.coin-stage i:nth-child(3){left:82px;bottom:5px}.hero-mahjong { position:absolute;left:50%;top:10px;width:72px;height:104px;padding:5px;transform:translateX(-50%) rotate(-5deg);display:block;border-radius:9px;background:#fffef0;box-shadow:inset -5px -4px #bbb286,0 7px 0 #378552,0 15px 18px #97641c66; }.hero-mahjong img { width:100%;height:100%; }
.result-meta { width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }.result-meta span { padding:8px 3px;border-right:1px solid #e6d6b3;color:#8c725e;font-size:10px; }.result-meta span:last-child { border:0; }.result-meta b { display:block;margin-top:3px;color:#6b311b;font-size:13px; }
.settlement-ranking { padding:10px 0;display:flex;flex-direction:column; }.settlement-ranking h3 { margin:3px 0 14px;text-align:center;color:#71503a;font-size:21px; }.rank-list { display:grid;gap:8px; }.rank-row { padding:8px 12px;display:grid;grid-template-columns:27px 42px 1fr auto;gap:9px;align-items:center;border:1px solid #ead8b0;border-radius:11px;background:#fffaf0;box-shadow:0 3px 8px #9e7b3c18; }.rank-row>em { color:#bd7a1c;font-style:normal;font-weight:900; }.rank-avatar { width:39px;height:39px;border:2px solid #dcba6b; }.rank-row>span { display:grid; }.rank-row>span b { color:#4b2f22; }.rank-row>span small { color:#9a806b; }.rank-row>strong { font-size:19px; }.settlement-card.ivory .positive { color:#b6491f; }.settlement-card.ivory .negative { color:#608174; }.settlement-summary { margin:auto 0 10px;text-align:center;color:#a28973;font-size:12px; }.settlement-actions { margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px; }.gold-btn { min-height:46px;border:1px solid #f3c04f;border-radius:99px;color:#69360d;background:linear-gradient(#ffe98d,#e59c28);box-shadow:inset 0 1px white,0 5px 10px #a46a1d4d;cursor:pointer;font-weight:900; }.gold-btn.secondary { color:#7b4a1d;background:linear-gradient(#fff3bd,#e5c36b); }

@media (max-width:900px) {
  .table-hud-left { left:1.3%;top:1.5%;padding:5px 7px; }.table-hud-left img { width:38px;height:38px; }.table-hud-left b { font-size:15px; }.table-hud-left span { font-size:8px; }.device-strip { left:1.5%;top:12.5%; }
  .table-tools { right:1.2%;top:1.5%;gap:4px; }.round-tool { width:48px; }.round-tool i { width:35px;height:35px;font-size:14px; }.round-tool span { font-size:9px; }
  .center-info { width:138px;height:138px; }.compass-wind { width:26px;height:26px;font-size:13px; }.compass-wind.top { top:6px; }.compass-wind.right { right:6px; }.compass-wind.bottom { bottom:6px; }.compass-wind.left { left:6px; }.compass-wind.top i { top:22px; }.compass-wind.right i { right:22px; }.compass-wind.bottom i { bottom:22px; }.compass-wind.left i { left:22px; }.countdown-core { width:51px;height:51px; }.countdown-core strong { font-size:28px; }.center-info>.remaining { top:calc(100% + 4px); }
  .table-page .seat-info { min-width:105px;padding:3px 5px; }.table-page .seat-avatar { width:30px;height:30px; }.table-page .seat-copy b { font-size:9px; }.table-page .seat-copy .score { font-size:8px; }
  .table-page .seat.top { top:1.5%; }.table-page .seat.top .seat-info { left:auto;right:-8%; }
  .table-page .seat.left,.table-page .seat.right { width:20%; }.table-page .seat.left { left:1%; }.table-page .seat.right { right:1%; }
  .table-page .seat.self { width:95%;bottom:.8%; }.table-page .seat.self .hand { width:83%; }.table-page .seat.self>.discards { left:72%;top:-36%;bottom:auto; }
  .table-page .seat.self>.meld-area { bottom:48%;width:48%;max-width:48%;gap:5px; }
  .meld-group { padding:13px 3px 3px; }.meld-kind { left:4px;font-size:8px; }.meld-area { gap:5px; }
  .table-page .hand .tile { width:clamp(29px,4.5vw,42px);height:clamp(43px,6.55vw,61px); }.table-page .opponent-hand .back { width:15px;height:23px; }.table-page .seat.left .back,.table-page .seat.right .back { width:23px;height:13px; }
  .table-page .discards { grid-template-columns:repeat(10,max-content); }.table-page .seat.left>.discards,.table-page .seat.right>.discards { grid-template-columns:repeat(4,max-content); }.table-page .discards .tile { width:27px;height:38px; }.table-page .action-bar { bottom:18%;max-width:70%;padding:5px; }.table-page .action-btn { width:52px;height:43px;font-size:18px; }.table-page .action-btn.chi-choice { min-width:125px;height:52px; }
  .ting-control { right:1.3%;bottom:2%;width:58px;height:58px;grid-template-columns:28px 1fr; }.ting-control i { margin-left:6px;font-size:21px; }.ting-control small { display:none; }.table-page .discard-control { right:9%;bottom:2.6%;min-width:58px;height:40px; }
  .settlement-card.ivory { min-height:0;padding:15px;gap:14px;border-radius:24px; }.settlement-hero { padding:10px; }.settlement-kicker { font-size:20px; }.hero-score { font-size:36px; }.coin-stage { height:95px;transform:scale(.75);margin:-5px 0; }.rank-row { padding:5px 8px; }.settlement-summary { display:none; }.gold-btn { min-height:38px; }
}

@media (orientation:portrait) and (max-width:720px) {
  .table-page { min-width:760px;transform-origin:top left; }
  .table-page::before { content:"请横屏游戏";right:auto;left:8px;top:50%;writing-mode:vertical-rl; }
  .avatar-picker { grid-template-columns:repeat(2,1fr); }
  .hall-heading { grid-template-columns:1fr auto; }.hall-welcome { display:none; }.profile-chip.refined { min-width:215px;grid-template-columns:50px 1fr; }.profile-chip.refined>.avatar-image { width:50px;height:50px; }.hall-tools { gap:4px; }
  .theme-grid { grid-template-columns:1fr; }.setting-switches { grid-template-columns:1fr; }
  .settlement-card.ivory { grid-template-columns:1fr;max-height:94vh;overflow:auto; }.settlement-hero { display:none; }
}

/* mahjong-master GameLayer.csd 1280x720 coordinate port */
@font-face { font-family:"MahjongSourceNumber"; src:url("/assets/source-ui/fonts/num.ttf") format("truetype"); font-display:swap; }
.table-page { min-width:0!important;transform:none!important; }
.source-stage {
  position:absolute;left:50%;top:50%;z-index:2;
  width:var(--stage-w,min(100vw,177.7778vh));height:var(--stage-h,min(56.25vw,100vh));
  transform:translate(-50%,-50%);container-type:inline-size;
}
.source-stage::before {
  content:"";position:absolute;left:30.1953%;top:14.8611%;z-index:1;
  width:39.6094%;height:70.2778%;pointer-events:none;
  background:url("/assets/source-ui/center/bg_center.png") center/100% 100% no-repeat;opacity:.24;
}
.source-stage>.table-hud-left,.source-stage>.device-strip,.source-stage>.table-tools,
.source-stage>.center-info,.source-stage>.seat,.source-stage>.action-bar,
.source-stage>.ting-control,.source-stage>.discard-control,.source-stage>.bubble { position:absolute; }

/* PlayerPanel_0..3: every seat uses the same source stage instead of independent CSS boxes. */
.source-stage .seat.self,.source-stage .seat.top,.source-stage .seat.left,.source-stage .seat.right {
  inset:0!important;width:100%!important;height:100%!important;transform:none!important;z-index:8;pointer-events:none;
}
.source-stage .seat-info { pointer-events:auto; }
.source-stage .rack,.source-stage .discards { pointer-events:none; }
.source-stage .hand .tile,.source-stage .action-btn { pointer-events:auto; }
.source-stage .seat-info,.source-stage .rack { position:absolute; }
.source-stage .seat-info { min-width:11.7188cqw;padding:.4688cqw .7031cqw;border-radius:.7813cqw; }
.source-stage .seat-avatar { width:3.5938cqw;height:3.5938cqw; }
.source-stage .seat-copy b { font-size:.9375cqw; }.source-stage .seat-copy small { font-size:.7031cqw; }
.source-stage .seat-copy .score { font-size:.8594cqw; }
.source-stage .seat.self .seat-info { left:1.8%;bottom:18.8%;margin:0; }
.source-stage .seat.top .seat-info { left:auto;right:2%;top:15%;width:9.375cqw;min-width:9.375cqw;margin:0;padding:.3906cqw .4688cqw; }
.source-stage .seat.top .seat-avatar { width:2.8125cqw;height:2.8125cqw; }
.source-stage .seat.top .seat-copy b { font-size:.7813cqw; }.source-stage .seat.top .seat-copy small { font-size:.5469cqw; }
.source-stage .seat.top .seat-copy .score { font-size:.7031cqw; }
.source-stage .seat.left .seat-info { left:1.8%;top:36%; }
.source-stage .seat.right .seat-info { left:auto;right:1.8%;top:36%; }

/* HandCard_0: x=120, y=10 within the bottom 160px player panel. */
.source-stage .seat.self .rack {
  left:9.375%;top:82.2222%;width:87.5%;height:16.3889%;
  display:flex;align-items:flex-end;justify-content:flex-start;overflow:visible;
}
.source-stage .seat.self .hand { position:static;width:auto;min-width:0;min-height:0;transform:none;display:flex;align-items:flex-end;justify-content:flex-start;gap:0;overflow:visible; }
.source-stage .seat.self .hand .tile { flex:0 0 auto;width:5.9375cqw;height:9.2188cqw; }
.source-stage .seat.self .hand .tile.drawn { margin-left:3.75cqw; }
.source-stage .seat.self .hand .tile:hover,.source-stage .seat.self .hand .tile.selected { transform:translateY(-1.4063cqw); }

/* Source back faces: top, left and right are the original hand_top/left/right art. */
.source-stage .seat.top .rack { left:21.875%;top:3.2%;width:61%;height:12%;display:flex;align-items:flex-start;justify-content:flex-start; }
.source-stage .seat.top .opponent-hand { position:static;margin:0;min-height:0;display:flex;justify-content:flex-start;gap:0;transform:none; }
.source-stage .seat.top .opponent-hand .back { flex:0 0 auto;width:3.4375cqw;height:5.3906cqw;border:0;border-radius:0;background:url("/assets/source-ui/mahjong/backs/hand_top.png") center/100% 100% no-repeat;box-shadow:none; }
.source-stage .seat.left .rack,.source-stage .seat.right .rack { inset:0;width:100%;height:100%; }
.source-stage .seat.left .opponent-hand,.source-stage .seat.right .opponent-hand { position:absolute;margin:0;min-height:0;display:flex;gap:0;transform:none; }
.source-stage .seat.left .opponent-hand { left:10.9375%;top:calc(17.7778% + var(--side-meld-shift));flex-direction:column; }
.source-stage .seat.right .opponent-hand { right:10.9375%;top:auto;bottom:calc(17.7778% + var(--side-meld-shift));flex-direction:column-reverse; }
.source-stage .seat.left .opponent-hand .back,.source-stage .seat.right .opponent-hand .back { flex:0 0 auto;width:2.1875cqw;height:3.9375cqw;border:0;border-radius:0;box-shadow:none; }
.source-stage .seat.left .opponent-hand .back { background:url("/assets/source-ui/mahjong/backs/hand_left.png") center/100% 100% no-repeat; }
.source-stage .seat.right .opponent-hand .back { background:url("/assets/source-ui/mahjong/backs/hand_right.png") center/100% 100% no-repeat; }
.source-stage .seat.left .opponent-hand .back+.back { margin-top:-1.9688cqw; }
.source-stage .seat.right .opponent-hand .back+.back { margin-bottom:-1.9688cqw; }

/* DiscardCard_0..3 and GameLayer.cpp use 12 horizontal / 11 vertical slots. */
.source-stage .discards { margin:0;min-height:0;max-width:none;display:grid;align-content:start;justify-content:start;gap:0;overflow:visible; }
.source-stage .seat.self>.discards,.source-stage .seat.top>.discards { left:25%;width:50%;height:20%;grid-template-columns:repeat(12,4.1563cqw);grid-auto-rows:4.9219cqw;transform:none; }
.source-stage .seat.self>.discards { top:60.1389%;bottom:auto; }
.source-stage .seat.top>.discards { top:18.8889%; }
.source-stage .seat.left>.discards,.source-stage .seat.right>.discards { top:19.0278%;width:14.0625%;height:60.1389%;grid-template-rows:repeat(11,2.8906cqw);grid-auto-columns:4.5313cqw;grid-auto-flow:column; }
.source-stage .seat.left>.discards { left:15.2344%;right:auto;justify-content:start;transform:none; }
.source-stage .seat.right>.discards { left:70.7031%;right:auto;justify-content:start;direction:rtl;transform:scaleY(-1); }
.source-stage .seat.right>.discards .tile { direction:ltr;transform:scaleY(-1); }
.source-stage .seat.right>.discards .tile.last-discard { animation:discard-glow 1s ease-in-out infinite alternate;transform:scaleY(-1); }
.source-stage .discards .tile.tile-face-front { width:4.1563cqw;height:6.4531cqw; }
.source-stage .discards .tile.tile-face-left,.source-stage .discards .tile.tile-face-right { width:4.6875cqw;height:4.4531cqw; }

/* Use the complete source tile bitmaps; the bevels and side faces are baked into the PNGs. */
.source-stage .tile { padding:0;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none;transition:transform .14s,filter .14s; }
.source-stage .tile img { width:100%;height:100%;border-radius:0;object-fit:fill; }
.source-stage .tile.last-discard { outline:0;filter:drop-shadow(0 0 .625cqw #ffd44e); }
.source-stage .discard-marker { top:-1.9531cqw;width:2.5cqw;height:3.0469cqw;color:transparent;background:url("/assets/source-ui/center/img_sign.png") center/contain no-repeat;text-shadow:none; }

/* The exposed groups stay separated while following the source rack direction. */
.source-stage .meld-area { position:static;display:flex;align-items:flex-end;gap:1.7813cqw;flex-wrap:nowrap; }
.source-stage .meld-group { padding:0;border:0;border-radius:0;background:none;box-shadow:none; }
.source-stage .meld-kind { display:none; }
.source-stage .meld-group .mini-tiles { display:flex;flex-wrap:nowrap;gap:0;margin:0; }
.source-stage .seat.self .meld-group .tile.tile-face-front { width:5.3438cqw;height:8.2969cqw; }
.source-stage .seat.top .meld-area { gap:1.2469cqw; }
.source-stage .seat.top .meld-group .tile.tile-face-front { width:3.7406cqw;height:5.8078cqw; }
.source-stage .seat.self .kind-kong_open .mini-tiles,.source-stage .seat.self .kind-kong_hidden .mini-tiles,
.source-stage .seat.top .kind-kong_open .mini-tiles,.source-stage .seat.top .kind-kong_hidden .mini-tiles { position:relative; }
.source-stage .seat.self .kind-kong_open .meld-tile-wrap:nth-child(4),.source-stage .seat.self .kind-kong_hidden .meld-tile-wrap:nth-child(4) { position:absolute;left:5.3438cqw;top:-2.0313cqw;z-index:2; }
.source-stage .seat.top .kind-kong_open .meld-tile-wrap:nth-child(4),.source-stage .seat.top .kind-kong_hidden .meld-tile-wrap:nth-child(4) { position:absolute;left:3.7406cqw;top:-1.4219cqw;z-index:2; }
.source-stage .supplement-count { right:-.3906cqw;top:-1.25cqw;min-width:1.7188cqw;height:1.3281cqw;padding:.0781cqw .3125cqw;border-radius:.4688cqw;font-size:.7813cqw; }
.source-stage .seat.top .meld-area { position:static;align-items:flex-start;margin-left:.7813cqw; }
.source-stage .seat.left .meld-area,.source-stage .seat.right .meld-area { position:absolute;display:flex;align-items:flex-start;gap:0; }
.source-stage .seat.left .meld-area { left:10.9375%;top:17.7778%;bottom:auto;flex-direction:column; }
.source-stage .seat.right .meld-area { left:86.0938%;right:auto;top:auto;bottom:17.7778%;flex-direction:column-reverse; }
.source-stage .seat.left .meld-group,.source-stage .seat.right .meld-group { width:3.125cqw;height:5.25cqw;overflow:visible; }
.source-stage .seat.left .meld-group .mini-tiles,.source-stage .seat.right .meld-group .mini-tiles { flex-direction:column; }
.source-stage .seat.left .meld-group .tile,.source-stage .seat.right .meld-group .tile { width:3.1188cqw;height:2.2219cqw; }
.source-stage .seat.left .meld-group .meld-tile-wrap+.meld-tile-wrap,.source-stage .seat.right .meld-group .meld-tile-wrap+.meld-tile-wrap { margin-top:-.7406cqw; }
.source-stage .seat.left .kind-whirlwind .meld-tile-wrap+.meld-tile-wrap,.source-stage .seat.left .kind-color_egg .meld-tile-wrap+.meld-tile-wrap,
.source-stage .seat.right .kind-whirlwind .meld-tile-wrap+.meld-tile-wrap,.source-stage .seat.right .kind-color_egg .meld-tile-wrap+.meld-tile-wrap { margin-top:-1.2344cqw; }
.source-stage .seat.left .kind-kong_open .mini-tiles,.source-stage .seat.left .kind-kong_hidden .mini-tiles,
.source-stage .seat.right .kind-kong_open .mini-tiles,.source-stage .seat.right .kind-kong_hidden .mini-tiles { position:relative; }
.source-stage .seat.left .kind-kong_open .meld-tile-wrap:nth-child(4),.source-stage .seat.left .kind-kong_hidden .meld-tile-wrap:nth-child(4),
.source-stage .seat.right .kind-kong_open .meld-tile-wrap:nth-child(4),.source-stage .seat.right .kind-kong_hidden .meld-tile-wrap:nth-child(4) { position:absolute;left:0;top:1.0156cqw;z-index:2;margin:0; }

/* Image_Wheel + time_bg: preserve four winds, current-turn glow and 20s reminder. */
.source-stage .center-info { left:50%;top:50%;z-index:12;width:10.3125cqw;height:10.2344cqw;transform:translate(-50%,-50%);border:0;border-radius:0;background:url("/assets/source-ui/center/time_bg.png") center/100% 100% no-repeat;box-shadow:none; }
.source-stage .compass-wind { width:2.1875cqw;height:2.1875cqw;border:1px solid #d9bf7399;color:#d9d2bb;background:#0b3d30e8;font-size:1.1719cqw; }
.source-stage .compass-wind.top { top:-1.4844cqw; }.source-stage .compass-wind.right { right:-1.4844cqw; }.source-stage .compass-wind.bottom { bottom:-1.4844cqw; }.source-stage .compass-wind.left { left:-1.4844cqw; }
.source-stage .compass-wind.active { color:#563000;background:radial-gradient(circle,#fff2a9,#dca32d);box-shadow:0 0 1.5625cqw #ffd247; }
.source-stage .compass-wind i { color:#ffe36d;font-size:1.4063cqw; }
.source-stage .compass-wind.top i { top:1.9531cqw; }.source-stage .compass-wind.right i { right:1.9531cqw; }.source-stage .compass-wind.bottom i { bottom:1.9531cqw; }.source-stage .compass-wind.left i { left:1.9531cqw; }
.source-stage .countdown-core { width:5.9375cqw;height:5.1563cqw;border:0;border-radius:0;background:none;box-shadow:none; }
.source-stage .countdown-core strong { color:#ffd852;font-family:"MahjongSourceNumber","Arial",sans-serif;font-size:3.2813cqw;line-height:1;text-shadow:0 .2344cqw .3125cqw #00160e; }
.source-stage .countdown-core small { margin:0 0 .3906cqw .1563cqw;font-size:.7031cqw; }
.source-stage .center-info>.remaining { left:calc(100% + 1.4063cqw);top:50%;transform:translateY(-50%);padding:.3906cqw .7813cqw;font-size:.8594cqw; }
.source-stage .center-info>.remaining b { font-size:1.25cqw; }

/* BtnHu/BtnGang/BtnPeng/BtnGuo.csd: original button plates and flag textures. */
.source-stage .action-bar { left:10%;top:47%;bottom:auto;width:80%;height:31%;max-width:none;padding:0;transform:none;display:block;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;pointer-events:none; }
.source-stage .action-buttons { position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:1.25cqw;pointer-events:none; }
.source-stage .action-btn.source-action { position:relative;flex:0 0 auto;width:10.3125cqw;height:10.3125cqw;padding:0;border:0;border-radius:0;color:white;background:url("/assets/source-ui/actions/btn_action1.png") center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 .5469cqw .5469cqw #00160eaa);pointer-events:auto;cursor:pointer; }
.source-stage .action-btn.source-action.source-hu { width:12.5625cqw;height:13.3125cqw;background-image:url("/assets/source-ui/actions/btn_action0.png"); }
.source-stage .action-btn.source-action:hover { transform:scale(1.06);filter:brightness(1.08) drop-shadow(0 .625cqw .625cqw #00160ebb); }
.source-stage .action-btn.source-action:active { transform:translateY(.3125cqw) scale(.97); }
.source-stage .action-flag { position:absolute;left:50%;top:50%;width:6.5625cqw;height:6.5625cqw;transform:translate(-50%,-50%);object-fit:contain; }
.source-stage .source-hu .action-flag { left:55%;top:52%;width:6.4063cqw;height:6.4063cqw; }
.source-stage .custom-action-flag { position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);color:#fff4cf;font:900 4.6875cqw/1 "STKaiti","KaiTi",serif;text-shadow:0 .2344cqw .1563cqw #184c24,-.1563cqw 0 #23733a,.1563cqw 0 #23733a; }
.source-stage .action-caption { position:absolute;left:50%;bottom:.625cqw;transform:translateX(-50%);padding:.1563cqw .4688cqw;border-radius:.7813cqw;color:#fff2bf;background:#08261dd9;font-size:.7031cqw;white-space:nowrap; }
.source-stage .action-tile-preview { position:absolute;right:-.7813cqw;top:-1.5625cqw;width:2.9688cqw;height:4.6094cqw;filter:drop-shadow(0 .2344cqw .2344cqw #00170e); }
.source-stage .action-tile-preview img { width:100%;height:100%; }
.source-stage .chi-options { position:absolute;left:50%;bottom:11.5625cqw;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:.9375cqw;pointer-events:none; }
.source-stage .chi-options-title { position:absolute;left:50%;top:-2.0313cqw;transform:translateX(-50%);padding:.3125cqw .9375cqw;border:1px solid #e1bf6b99;border-radius:1.25cqw;color:#ffe9a7;background:#06291fe8;box-shadow:0 .3125cqw .7813cqw #00150daa;font-size:.9375cqw;font-weight:900;white-space:nowrap; }
.source-stage .chi-choice { position:relative;flex:0 0 auto;width:20.625cqw;height:8.75cqw;padding:.4688cqw .625cqw;display:grid;grid-template-columns:6.875cqw 1fr;align-items:center;border:1px solid #f2d17f;border-radius:1.0156cqw;color:#fff1c2;background:linear-gradient(180deg,#0a4a39f2,#05261df5);box-shadow:inset 0 0 0 .1563cqw #062118,0 .5469cqw 1.0938cqw #00160ebd;pointer-events:auto;cursor:pointer; }
.source-stage .chi-choice:hover { transform:translateY(-.3125cqw) scale(1.025);filter:brightness(1.08);box-shadow:inset 0 0 0 .1563cqw #062118,0 0 1.4063cqw #ffd45799; }
.source-stage .chi-choice:active { transform:translateY(.2344cqw) scale(.98); }
.source-stage .chi-icon-plate { position:relative;width:6.5625cqw;height:6.5625cqw;display:grid;place-items:center;background:url("/assets/source-ui/actions/btn_action1.png") center/100% 100% no-repeat;filter:drop-shadow(0 .3125cqw .3906cqw #00160e99); }
.source-stage .chi-icon-plate img { width:5.1563cqw;height:5.1563cqw;object-fit:contain; }
.source-stage .chi-choice-content { min-width:0;display:grid;justify-items:center;gap:.1563cqw; }
.source-stage .chi-choice-content>b { color:#ffe8a0;font-size:.8594cqw;line-height:1;white-space:nowrap; }
.source-stage .chi-preview { position:static;transform:none;display:flex;align-items:flex-end;gap:0;padding:0;background:none; }
.source-stage .chi-preview-tile { width:4.1563cqw;height:6.4531cqw;display:block;filter:drop-shadow(0 .2344cqw .2344cqw #00150d99); }
.source-stage .chi-preview-tile img { width:100%;height:100%;display:block; }

.source-stage .ting-control { right:2%;bottom:18%;width:5.9375cqw;height:5.9375cqw; }
.source-stage .discard-control { right:8.5%;bottom:18.5%;min-width:5.9375cqw;height:3.9063cqw; }
.source-stage .claim-waiting { bottom:17%; }

/* Android landscape viewport: fit the complete lobby into short phone screens. */
@media (orientation: landscape) and (max-height: 600px) {
  html,body,#app { width:100%;height:100%;min-height:0;overflow:hidden; }
  body { min-height:var(--app-vh,100dvh); }
  .shell { width:100%;height:var(--app-vh,100dvh);min-height:0;overflow:hidden; }
  .topbar {
    flex:0 0 46px;height:46px;
    padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
  }
  .topbar-logo { width:32px;height:32px;border-radius:8px; }
  .brand { gap:7px;font-size:14px; }
  .topbar-tools { gap:5px; }
  .sound-toggle { width:28px;height:28px; }
  .status { font-size:10px; }

  .hall-main {
    flex:1;height:calc(var(--app-vh,100dvh) - 46px);min-height:0;overflow:hidden;
    padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));
  }
  .hall-shell { width:100%;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr); }
  .hall-heading { min-height:42px;margin:0 0 7px;grid-template-columns:auto minmax(0,1fr) auto;gap:10px; }
  .profile-chip.refined { min-width:160px;padding:5px 8px;grid-template-columns:38px 1fr;border-radius:11px; }
  .profile-chip.refined>.avatar-image { width:38px;height:38px; }
  .profile-chip.refined b { font-size:12px; }.profile-chip.refined small { margin-top:1px;font-size:8px; }
  .hall-welcome h1 { margin:2px 0;font-size:clamp(20px,3.2vw,32px); }
  .hall-welcome p { display:none; }.hall-welcome .eyebrow { font-size:8px; }
  .hall-tools { gap:4px; }.hall-tools .round-tool { width:42px; }
  .hall-tools .round-tool i { width:30px;height:30px;font-size:13px; }.hall-tools .round-tool span { font-size:8px; }
  .game-grid { min-height:0;grid-template-columns:minmax(0,3fr) minmax(128px,.72fr);gap:9px; }
  .game-entry { width:100%;height:100%;min-height:0;overflow:hidden;padding:12px 16px;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:14px;border-radius:18px; }
  .game-entry img { display:block;width:100%;max-width:100%;min-width:0;height:auto;max-height:100%;margin:auto;object-fit:contain;border-radius:15px; }
  .game-entry-copy { min-width:0;z-index:2;gap:5px;padding-bottom:32px; }.game-entry-copy small { font-size:8px; }
  .game-entry-copy strong { font-size:clamp(28px,5vw,48px); }.game-entry-copy em { font-size:10px; }
  .rule-tags { gap:4px;margin-top:2px; }.rule-tags i { padding:3px 6px;font-size:8px; }
  .enter-game { right:13px;bottom:10px;padding:7px 12px;font-size:11px;transform:none; }
  .coming-entry { height:100%;min-height:0;padding:10px;border-radius:18px; }
  .coming-entry span,.coming-entry small { font-size:9px; }.coming-entry strong { margin:3px 0;font-size:17px; }
  .hall-ornament,.hall-foot { display:none; }

  .main { min-height:0;height:calc(var(--app-vh,100dvh) - 46px);padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));overflow:hidden; }
  .hero { width:100%;height:100%;grid-template-columns:minmax(180px,.78fr) minmax(320px,1.22fr);gap:10px; }
  .hero-title { min-height:0;padding:12px;border-radius:16px; }.hero-logo { width:min(29vh,180px);border-radius:14px; }.hero-title p { margin-top:7px;font-size:9px;line-height:1.35; }
  .profile-setup { min-height:0;overflow-x:hidden;overflow-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:13px;gap:7px; }.profile-setup h2 { margin-bottom:4px;font-size:17px; }
  .profile-setup .field { gap:3px;font-size:10px; }.profile-setup .field input { height:36px; }
  .avatar-picker { grid-template-columns:repeat(4,1fr);gap:5px; }.avatar-picker legend { margin-bottom:4px;font-size:10px; }
  .avatar-choice span { padding:4px;gap:2px; }.avatar-choice img { width:36px;height:36px; }.avatar-choice b { font-size:8px; }
  .profile-setup .btn { min-height:36px;padding:6px 10px; }.profile-setup .muted { display:none; }

  .main.game-lobby { display:block;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y; }
  .game-lobby-shell { width:100%;height:auto;min-height:100%;overflow:visible;grid-template-columns:minmax(170px,.62fr) minmax(0,1.38fr);gap:10px;padding:0 0 max(18px,env(safe-area-inset-bottom)); }
  .back-hall { left:7px;top:7px;z-index:3;padding:5px 9px;font-size:10px; }
  .game-lobby-title { height:auto;min-height:calc(var(--app-vh,100dvh) - 62px);padding:12px;border-radius:17px; }
  .game-lobby-title img { width:min(25vh,120px);border-radius:13px; }.game-lobby-title .eyebrow { margin-top:8px;font-size:8px; }
  .game-lobby-title h1 { margin:3px 0;font-size:27px; }.game-lobby-title p { display:none; }
  .room-maker { width:100%;height:auto;max-height:none;min-width:0;min-height:calc(var(--app-vh,100dvh) - 62px);overflow:visible!important;padding:12px 12px max(18px,env(safe-area-inset-bottom));gap:7px;border-radius:16px; }
  .room-maker h2 { margin-bottom:2px;font-size:18px; }.room-maker .stack { gap:7px; }
  .room-maker .field { gap:3px;font-size:10px; }.room-maker .field input,.room-maker .field select { height:36px; }
  .room-code-input { font-size:18px; }.room-maker .btn { min-height:36px;padding:7px 10px; }
  .room-maker>.muted { display:none; }
  .room-maker>#join-form { display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:8px; }
  .room-maker>#join-form>.field { min-width:0; }
  .create-room-panel { padding-top:7px; }
  .create-room-panel:not([hidden]) { display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:8px;scroll-margin-top:8px; }
  .create-room-panel .split,.create-room-panel>.fixed-rules { min-width:0; }
  .fixed-rules { padding:7px;gap:4px; }.fixed-rules span { padding:3px 6px;font-size:8px; }.fixed-rules small { display:none; }

  .room-page { overflow:auto;place-items:start center; }.room-page .room { max-height:100%;overflow:auto;padding:12px; }
  .modal-layer { padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .settings-card,.history-card,.ting-assistant-card { max-height:96vh;max-height:96dvh;padding:15px; }
}

@media (orientation: landscape) and (max-height: 420px) and (max-width: 700px) {
  .profile-chip.refined { min-width:0;grid-template-columns:34px;padding:4px; }
  .profile-chip.refined>.avatar-image { width:34px;height:34px; }
  .profile-chip.refined>span:not(.avatar-image) { display:none; }
  .hall-welcome h1 { font-size:19px; }.hall-welcome .eyebrow { display:none; }
  .game-grid { grid-template-columns:minmax(0,1fr); }
  .coming-entry { display:none; }
  .game-entry { grid-template-columns:minmax(96px,31%) 1fr; }
  .game-lobby-shell { grid-template-columns:minmax(145px,.5fr) minmax(270px,1.5fr); }
  .room-maker>#join-form,.create-room-panel:not([hidden]) { grid-template-columns:1fr; }
}

/* Mobile browser viewport and install/fullscreen guidance. */
.orientation-guard { display:none; }
.standalone-display .table-tools>.fullscreen-trigger { display:none; }

@media (max-width:720px) {
  .main.game-lobby {
    display:block;height:calc(var(--app-vh,100dvh) - 52px);min-height:0;
    overflow-x:hidden!important;overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;
  }
  .game-lobby-shell { height:auto;min-height:100%;overflow:visible;padding-bottom:max(22px,env(safe-area-inset-bottom)); }
  .game-lobby-title,.room-maker { height:auto;max-height:none;overflow:visible!important; }
  .room-maker>#join-form,.create-room-panel:not([hidden]) { grid-template-columns:minmax(0,1fr); }
}

@media (orientation:portrait) and (max-width:900px) {
  .table-page::before { content:none!important;display:none!important; }
  .table-page .source-stage { visibility:hidden;pointer-events:none; }
  .orientation-guard {
    position:fixed;inset:0;z-index:150;display:grid;place-content:center;justify-items:center;gap:12px;
    padding:24px max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
    text-align:center;color:#fff0c4;background:linear-gradient(#05271fd9,#03130ff2);backdrop-filter:blur(7px);
  }
  .orientation-guard img { width:min(132px,32vw);aspect-ratio:1;object-fit:cover;border:2px solid #e7c56c;border-radius:24px;box-shadow:0 15px 40px #000a; }
  .orientation-guard strong { color:#ffe18a;font:900 clamp(30px,8vw,48px)/1.1 "STKaiti","KaiTi",serif; }
  .orientation-guard span { max-width:24em;color:#d5ddcf;font-size:14px;line-height:1.7; }
  .orientation-guard small { color:#aeb9ac;font-size:11px; }
  .orientation-guard .fullscreen-trigger { min-width:190px;min-height:48px;padding:10px 22px;border:1px solid #ffe5a0;border-radius:99px;color:#3e2106;background:linear-gradient(#ffe99f,#d99a2d);box-shadow:0 8px 20px #00120caa;font-weight:900; }
}