:root {
  --blue: #1683e7;
  --blue-dark: #0a63b7;
  --blue-soft: #eaf5ff;
  --text: #142031;
  --muted: #7b8794;
  --line: #e5eaf0;
  --surface: #ffffff;
  --canvas: #f4f6f9;
  --danger: #d94452;
  --success: #14945f;
  --shadow: 0 8px 28px rgba(19, 49, 83, .09);
}

* { box-sizing: border-box; }
html { background: var(--canvas); color: var(--text); font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { margin: 0; min-width: 0; overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
.app { width: min(100%, 760px); min-height: 100vh; margin: 0 auto; background: var(--canvas); padding-bottom: 74px; }
.app.is-game-view { height: 100dvh; min-height: 0; padding-bottom: 0; overflow: hidden; }
.app-header { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 7px 14px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.game-header-panel { display: none; }
.app.is-game-view .app-header { height: 54px; padding: 4px 8px; border-bottom: 0; color: white; background: linear-gradient(110deg,#1761a3,#05aeb4); backdrop-filter: none; }
.app.is-game-view .brand-lockup, .app.is-game-view #headerProfile { display: none; }
.app.is-game-view #backButton { flex: 0 0 29px; width: 29px; height: 34px; padding: 0; color: white; font-size: 27px; }
.app.is-game-view .game-header-panel { display: grid; flex: 1; min-width: 0; grid-template-columns: minmax(78px,1fr) auto auto; align-items: center; gap: clamp(7px,2.4vw,18px); }
.game-header-title { min-width: 0; }
.game-header-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(14px,4.1vw,18px); }
.game-metric-pair { min-width: 72px; }
.game-metric-pair span { display: block; white-space: nowrap; font-size: clamp(8px,2.5vw,11px); line-height: 1.35; }
.game-metric-pair i { font-style: normal; }
.game-metric-pair b { font-weight: 500; }
.metric-link { display: block; padding: 0; border: 0; color: inherit; background: transparent; font-size: clamp(8px,2.5vw,11px); line-height: 1.35; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 2px; }
.game-metric-pair #headerWinLoss.is-negative { color: #ff7078; }
.game-metric-pair #headerWinLoss.is-positive { color: #c7ffdb; }
.brand-lockup { display: flex; align-items: center; gap: 9px; }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup strong { font-size: 16px; }
.brand-lockup small { margin-top: 1px; font-size: 9px; color: var(--muted); letter-spacing: .12em; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: white; background: linear-gradient(145deg, #20a4ff, #1464d2); box-shadow: 0 5px 12px rgba(22,131,231,.25); font-weight: 700; }
.icon-button { width: 38px; height: 38px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font-size: 25px; }
.page { display: none; padding: 12px 12px 18px; }
.page.is-active { display: block; }
.page[data-page="game"] { padding-bottom: 122px; }
.page[data-page="game"].is-active { height: calc(100dvh - 54px); padding-top: 7px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
.page[data-page="game"].is-active::-webkit-scrollbar { display: none; }
.carousel { position: relative; width: 100%; min-height: 0; aspect-ratio: 71 / 26; overflow: hidden; border-radius: 16px; background: #061d53; box-shadow: var(--shadow); }
.slide { position: absolute; inset: 0; display: none; min-height: 0; padding: 0; color: white; flex-direction: column; justify-content: center; background-position: center; background-size: cover; background-repeat: no-repeat; }
.slide.is-active { display: flex; }
.slide span { margin-bottom: 3px; font-size: 10px; opacity: .88; letter-spacing: .13em; }
.slide strong { max-width: 420px; font-size: clamp(18px, 4.5vw, 24px); font-weight: 700; }
.slide small { margin-top: 5px; font-size: 10px; opacity: .86; }
.slide-one { background-image: url('/assets/banner-minjian-blue-v1.png'); }
.slide-two { background-image: url('/assets/banner-checkin-7days-blue-v1.png'); }
.slide-three { background-image: url('/assets/banner-three-card-friends-blue-v1.png'); }
.carousel-dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 5px; }
.carousel-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.55); }
.carousel-dots button.is-active { width: 16px; background: white; }
.notice-line { display: flex; width: 100%; min-height: 28px; align-items: center; gap: 6px; margin: 6px 0; padding: 4px 9px; overflow: hidden; border: 0; border-radius: 9px; color: var(--text); background: var(--surface); box-shadow: 0 1px 5px rgba(19,49,83,.035); text-align: left; }
.notice-line > span:first-child { flex: 0 0 auto; font-size: 12px; }
.notice-copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.account-card { padding: 7px 10px 6px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.account-main { display: flex; align-items: center; gap: 7px; }
.avatar, .profile-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; color: var(--blue-dark); background: #dceeff; }
.account-card .avatar { width: 34px; height: 34px; font-size: 14px; }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy small, .balance small, .balance strong { display: block; }
.account-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.account-copy small, .balance small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.balance { margin-left: auto; text-align: right; }
.balance strong { margin-top: 0; font-size: 17px; }
.account-actions { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--line); }
.account-actions button { min-height: 30px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 9px; }
.account-actions span { display: block; margin-bottom: 0; color: var(--blue); font-size: 13px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 17px 2px 10px; }
.section-heading strong { font-size: 16px; }
.section-heading span { color: var(--muted); font-size: 11px; }
.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.game-card {
  --game-a: #38a9f3;
  --game-b: #167ce0;
  --game-soft: #eaf5ff;
  --game-shadow: rgba(22,124,224,.20);
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: 112px;
  padding: 8px 6px 9px;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(43,86,128,.09);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% -22%, rgba(255,255,255,.96) 0 36%, transparent 37%),
    linear-gradient(180deg,#fff 0%,var(--game-soft) 100%);
  box-shadow: 0 5px 13px rgba(19,49,83,.07);
}
.game-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -25px;
  right: -23px;
  width: 66px;
  height: 66px;
  border: 10px solid var(--game-a);
  border-radius: 50%;
  opacity: .07;
}
.game-card::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 0;
  left: 13px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg,transparent,var(--game-a),transparent);
  opacity: .5;
}
.game-card:active { transform: scale(.98); }
.game-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 5px;
}
.game-icon svg { display: block; width: 100%; height: 100%; overflow: visible; filter: none; shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
.game-card strong { position: relative; z-index: 1; width: 100%; max-width: 100%; padding-inline: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #182333; font-size: 12px; line-height: 1.15; text-align: center; }
.game-card[data-game-id="hong-kong-mark-six"] { --game-a: #ed4f55; --game-b: #2188dc; --game-soft: #fff0f0; --game-shadow: rgba(237,79,85,.20); }
.game-card[data-game-id="france-loto"] { --game-a: #2157c8; --game-b: #ed4b55; --game-soft: #edf3ff; --game-shadow: rgba(33,87,200,.22); }
.game-card[data-game-id="eurodreams"] { --game-a: #7b55dd; --game-b: #3a78d8; --game-soft: #f1edff; --game-shadow: rgba(93,71,200,.22); }
.game-card[data-game-id="euro-lucky-4"] { --game-a: #23a567; --game-b: #24282d; --game-soft: #eff9f4; --game-shadow: rgba(35,165,103,.22); }
.game-card[data-game-id="euro-lucky-4"] .game-icon { width: 66px; height: 64px; }
.game-card[data-game-id="euro-lucky-4"] strong { overflow: visible; text-overflow: clip; font-size: clamp(9.5px,3.2vw,11px); letter-spacing: -.28px; }
.game-card[data-game-id="speed-shishicai"] { --game-a: #f0a127; --game-b: #e65c32; --game-soft: #fff6e9; --game-shadow: rgba(230,111,44,.23); }
.game-card[data-game-id="speed-racing"] { --game-a: #253d65; --game-b: #0b9aaa; --game-soft: #edf5f7; --game-shadow: rgba(21,82,103,.23); }
.friend-room-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 11px; }
.friend-room-card { display: flex; width: 100%; min-width: 0; align-items: center; gap: 8px; margin-top: 0; padding: 11px 9px; border: 0; border-radius: 15px; color: white; background: linear-gradient(135deg,#17294b,#3972b7); text-align: left; box-shadow: var(--shadow); }
.friend-room-card strong, .friend-room-card small { display: block; }
.friend-room-card strong { font-size: 12px; }
.friend-room-card small { margin-top: 3px; overflow: hidden; opacity: .75; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.friend-room-card.mahjong-entry { background: linear-gradient(135deg,#075b49,#0e9b73); }
.friend-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.13); font-size: 21px; font-weight: 800; }
.chevron { margin-left: auto; font-size: 20px; opacity: .75; }
.page[data-page="three-room"].is-active { height: calc(100dvh - 54px); padding: 8px 9px 10px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
.page[data-page="three-room"].is-active::-webkit-scrollbar { display: none; }
.three-room-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 3px 8px; }
.three-room-head small, .three-room-head strong { display: block; }
.three-room-head small { color: var(--muted); font-size: 9px; }
.three-room-head strong { margin-top: 1px; font-size: 16px; }
.three-room-head b { font-family: ui-monospace,Consolas,monospace; letter-spacing: .08em; }
.three-room-head button { min-height: 28px; padding: 4px 10px; border: 1px solid #cce1f5; border-radius: 999px; color: #1475c6; background: #eef8ff; font-size: 10px; }
.three-status-card { display: grid; grid-template-columns: 1fr .8fr 1.15fr; align-items: center; gap: 5px; padding: 9px 10px; border-radius: 13px; color: white; background: linear-gradient(120deg,#135b93,#079e9d); box-shadow: 0 7px 18px rgba(10,79,116,.18); }
.three-status-card > div { min-width: 0; }
.three-status-card > div:nth-child(2) { padding-inline: 6px; border-right: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); text-align: center; }
.three-status-card > div:last-child { text-align: right; }
.three-status-card small, .three-status-card strong { display: block; }
.three-status-card small { opacity: .75; font-size: 9px; }
.three-status-card strong { margin-top: 2px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.three-countdown strong { font-family: ui-monospace,Consolas,monospace; font-size: 18px; letter-spacing: .05em; }
.three-table { position: relative; min-height: 300px; margin-top: 8px; overflow: hidden; border: 5px solid #17364e; border-radius: 42% / 20%; background: radial-gradient(ellipse at center,#1b9f72 0%,#087052 67%,#07543f 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12),0 8px 22px rgba(12,45,49,.18); }
.three-table::after { content: ""; position: absolute; inset: 28px 36px; border: 1px solid rgba(255,255,255,.16); border-radius: 45%; pointer-events: none; }
.three-table-felt { position: absolute; z-index: 1; inset: 50% auto auto 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,.3); text-align: center; }
.three-table-felt span, .three-table-felt small { display: block; }
.three-table-felt span { font-size: 33px; font-weight: 800; letter-spacing: .16em; }
.three-table-felt small { margin-top: 2px; font-size: 9px; letter-spacing: .1em; }
.three-seat-grid { position: absolute; z-index: 2; inset: 8px; }
.three-seat { position: absolute; width: 44%; max-width: 155px; min-height: 94px; padding: 6px; border-radius: 12px; color: #173044; background: rgba(255,255,255,.95); box-shadow: 0 4px 13px rgba(0,0,0,.14); text-align: center; }
.three-seat[data-seat="1"] { top: 0; left: 50%; transform: translateX(-50%); }
.three-seat[data-seat="2"] { top: 50%; left: 0; transform: translateY(-35%); }
.three-seat[data-seat="3"] { right: 0; bottom: 0; }
.three-seat[data-seat="4"] { bottom: 0; left: 0; }
.three-seat.is-me { outline: 2px solid #ffdb67; box-shadow: 0 0 0 4px rgba(255,219,103,.22); }
.three-seat.is-empty { display: grid; place-items: center; min-height: 68px; color: rgba(255,255,255,.75); border: 1px dashed rgba(255,255,255,.45); background: rgba(4,59,45,.45); box-shadow: none; font-size: 10px; }
.three-seat-head { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 3px; }
.three-seat-head strong { max-width: 84px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.three-banker-badge { padding: 2px 4px; border-radius: 999px; color: white; background: #e49b16; font-size: 8px; }
.three-seat-meta { display: flex; justify-content: center; gap: 5px; min-height: 14px; margin-top: 2px; color: #71808d; font-size: 8px; }
.three-seat-meta .agreed { color: var(--success); }
.three-seat-meta .pending { color: #c1841c; }
.three-seat-meta .rejected { color: var(--danger); }
.three-seat-meta .three-gold-balance { color: #ad7311; }
.three-cards { display: flex; height: 45px; align-items: center; justify-content: center; margin-top: 2px; }
.three-card { position: relative; display: grid; width: 30px; height: 42px; margin-left: -5px; place-items: center; border: 1px solid #d9dfe7; border-radius: 5px; color: #182333; background: white; box-shadow: 0 2px 5px rgba(20,37,55,.1); font-family: ui-monospace,Consolas,monospace; font-size: 12px; font-weight: 800; }
.three-card:first-child { margin-left: 0; }
.three-card.is-red { color: #d93643; }
.three-card.is-back { border-color: #d7e2ed; background: repeating-linear-gradient(45deg,#1979bd 0 3px,#ecf6ff 3px 5px); }
.three-delta { margin-top: 1px; font-size: 9px; font-weight: 700; }
.three-delta.win { color: var(--success); }
.three-delta.lose { color: var(--danger); }
.three-action-card { margin-top: 8px; padding: 9px; border-radius: 13px; background: white; box-shadow: var(--shadow); }
.three-gold-manager { display: grid; gap: 7px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.three-gold-manager[hidden] { display: none; }
.three-gold-manager-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.three-gold-manager-head strong { font-size: 11px; }
.three-gold-manager-head small { color: var(--muted); font-size: 8px; }
.three-gold-manager-row { display: grid; grid-template-columns: minmax(0,1fr) 78px; gap: 6px; }
.three-gold-manager select, .three-gold-manager input { min-width: 0; min-height: 34px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 10px; }
.three-gold-manager button { min-height: 34px; padding: 5px; border: 0; border-radius: 8px; color: white; background: #078fb1; font-size: 11px; font-weight: 650; }
.three-gold-manager button.secondary { color: #286076; border: 1px solid #cfe0e7; background: #f3f8fa; }
.three-action-note { min-height: 17px; color: #566a7d; font-size: 11px; font-weight: 500; line-height: 1.55; text-align: center; }
.three-action-content { display: grid; gap: 7px; margin-top: 7px; }
.three-action-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.three-action-row.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.three-action-content button, .three-action-content input { min-height: 38px; border-radius: 9px; }
.three-action-content button { padding: 5px 7px; border: 0; color: white; background: #078fb1; font-size: 12px; font-weight: 600; line-height: 1.25; }
.three-action-content button.secondary { color: #1f5870; border: 1px solid #c7dae3; background: #f4f9fb; font-weight: 600; }
.three-action-content button.danger { background: #ef4f59; }
.three-action-content button:disabled { color: #97a3ad; background: #e8edf1; cursor: not-allowed; }
.three-action-field { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.three-action-field input { min-width: 0; padding: 7px 9px; border: 1px solid var(--line); outline: none; }
.three-action-field button { min-width: 106px; }
.three-queue { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); color: #667483; font-size: 9px; line-height: 1.55; }
.three-queue[hidden] { display: none; }
.three-rules { margin-top: 8px; padding: 9px 11px; border-radius: 12px; color: #657486; background: white; font-size: 10px; line-height: 1.55; }
.three-rules summary { color: #26435c; font-weight: 700; cursor: pointer; }
.three-rules p { margin: 7px 0 0; }
.three-lobby-card { gap: 10px; }
.three-lobby-block { display: grid; gap: 9px; }
.three-lobby-block > strong { font-size: 14px; }
.three-lobby-block > small { margin-top: -5px; color: var(--muted); font-size: 9px; }
.three-mode-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.three-mode-picker button { min-height: 36px; border: 1px solid #d8e2ec; border-radius: 9px; color: #637181; background: #f7f9fb; }
.three-mode-picker button.is-active { color: white; border-color: #1683e7; background: #1683e7; box-shadow: 0 3px 8px rgba(22,131,231,.18); }
.three-bankroll-shortcuts { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.three-bankroll-shortcuts button { min-height: 31px; border: 1px solid #cfe0eb; border-radius: 8px; color: #1677bd; background: #f3f9fd; }
.three-lobby-divider { position: relative; height: 13px; border-top: 1px solid var(--line); text-align: center; }
.three-lobby-divider span { position: relative; top: -9px; padding: 0 8px; color: var(--muted); background: white; font-size: 10px; }

/* 传统麻将好友房：大厅竖屏，牌桌横屏；底部操作区不随牌墙滚动。 */
.page[data-page="mahjong-room"].is-active { position: relative; display: grid; height: calc(100dvh - 54px); min-height: 0; padding: 4px 6px max(5px,env(safe-area-inset-bottom)); grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; background: #e9eff1; }
.mahjong-room-bar { display: grid; min-height: 34px; grid-template-columns: minmax(105px,1fr) auto auto; align-items: center; gap: 8px; padding: 2px 5px 4px; }
.mahjong-room-bar strong, .mahjong-room-bar small { display: block; }
.mahjong-room-bar strong { color: #17313b; font-size: 13px; font-weight: 800; line-height: 1.2; }
.mahjong-room-bar small { color: #526873; font-size: 9px; font-weight: 600; line-height: 1.35; }
.mahjong-room-rule { display: flex; align-items: center; gap: 4px; color: #234b5a; font-size: 9px; font-weight: 650; white-space: nowrap; }
.mahjong-room-rule > * { padding: 2px 4px; border-radius: 5px; background: rgba(255,255,255,.72); }
.mahjong-room-bar > button { min-height: 25px; padding: 2px 8px; border: 1px solid #a8cec9; border-radius: 7px; color: #066b55; background: #f3fffb; font-size: 9px; font-weight: 700; }
.mahjong-rotate-hint { position: absolute; z-index: 60; inset: 0; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; color: white; background:
  radial-gradient(circle at 50% 42%,rgba(43,128,108,.34),transparent 36%),
  linear-gradient(145deg,rgba(10,57,55,.99),rgba(4,35,39,.99));
  text-align: center; }
.mahjong-rotate-hint[hidden] { display: none; }
.mahjong-rotate-hint span { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: 0 8px 22px rgba(0,0,0,.18); font-size: 32px; line-height: 1; }
.mahjong-rotate-hint strong { font-size: 17px; letter-spacing: .08em; }
.mahjong-rotate-hint small { opacity: .78; font-size: 10px; line-height: 1.7; }
.page[data-page="mahjong-room"].is-portrait-locked > :not(.mahjong-rotate-hint) { pointer-events: none; user-select: none; }
.mahjong-table { position: relative; min-height: 0; overflow: hidden; border: 5px solid #102d2c; border-radius: 18px; background:
  radial-gradient(ellipse at 50% 44%,rgba(39,104,91,.28) 0 24%,transparent 56%),
  linear-gradient(145deg,#173f3b 0%,#102f30 100%);
  box-shadow: inset 0 0 0 2px rgba(214,241,226,.12),inset 0 0 48px rgba(0,25,25,.3),0 5px 14px rgba(5,54,45,.24); }
.mahjong-table::after { position: absolute; z-index: 0; inset: 5px; border: 1px solid rgba(204,232,216,.08); border-radius: 11px; box-shadow: inset 0 0 18px rgba(0,0,0,.16); content: ""; pointer-events: none; }
.mahjong-square-surface { position: absolute; z-index: 1; top: 48%; left: 50%; width: min(94%,calc(100dvh - 135px)); aspect-ratio: 1; overflow: hidden; transform: translate(-50%,-50%); border: 2px solid rgba(12,52,47,.9); border-radius: 8px; background:
  repeating-linear-gradient(118deg,rgba(255,255,255,.018) 0 1px,transparent 1px 6px),
  radial-gradient(circle at center,#377d6f 0%,#27695f 54%,#1c554d 100%);
  box-shadow: inset 0 0 0 1px rgba(208,238,221,.09),inset 0 0 30px rgba(5,36,33,.22),0 5px 14px rgba(0,0,0,.2); }
.mahjong-square-surface::before { content: "民间彩世界"; position: absolute; z-index: 0; top: 67%; left: 50%; padding: 5px 12px; transform: translate(-50%,-50%) rotate(-2deg); border: 2px solid rgba(221,239,229,.07); color: rgba(221,239,229,.09); font-family: "Noto Serif SC","Songti SC","SimSun",serif; font-size: clamp(10px,2.3vw,15px); font-weight: 900; letter-spacing: .12em; white-space: nowrap; }
.mahjong-auto-gate { position: absolute; z-index: 1; top: 50%; left: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 2px solid rgba(9,55,51,.58); border-radius: 7px; background:
  linear-gradient(45deg,transparent 49.4%,rgba(8,52,49,.28) 49.6% 50.4%,transparent 50.6%),
  linear-gradient(-45deg,transparent 49.4%,rgba(8,52,49,.28) 49.6% 50.4%,transparent 50.6%),
  rgba(39,104,95,.25);
  box-shadow: inset 0 0 0 2px rgba(182,222,203,.05),inset 0 0 13px rgba(3,33,32,.18),0 2px 5px rgba(0,35,32,.15); }
.mahjong-auto-gate::before { position: absolute; inset: 10%; border: 1px solid rgba(9,55,51,.34); border-radius: 5px; content: ""; }
.mahjong-auto-gate i,.mahjong-auto-gate b { position: absolute; display: block; border-radius: 6px; background: rgba(9,55,51,.34); box-shadow: 0 1px 0 rgba(198,231,214,.08); }
.mahjong-auto-gate i { top: 50%; right: 7%; left: 7%; height: 2px; transform: translateY(-50%); }
.mahjong-auto-gate b { top: 7%; bottom: 7%; left: 50%; width: 2px; transform: translateX(-50%); }
.mahjong-wall { position: absolute; z-index: 2; filter: drop-shadow(0 3px 3px rgba(0,24,20,.32)); }
.mahjong-wall::before,.mahjong-wall span { position: absolute; border: 1px solid rgba(23,78,47,.4); border-radius: 2px; background-color: #65b84f; box-shadow: inset 0 2px 0 rgba(210,248,181,.38),inset 0 -3px 0 rgba(24,115,62,.45); content: ""; }
.mahjong-wall.wall-top,.mahjong-wall.wall-bottom { left: 50%; width: 24px; height: 18px; transform: translateX(-50%); }
.mahjong-wall.wall-top { top: 11%; }
.mahjong-wall.wall-bottom { bottom: 11%; }
.mahjong-wall.wall-top::before,.mahjong-wall.wall-bottom::before,.mahjong-wall.wall-top span,.mahjong-wall.wall-bottom span { top: 0; width: 24px; height: 12px; box-shadow: inset 0 2px 0 rgba(210,248,181,.38),inset 0 -3px 0 rgba(24,115,62,.45),3px 4px 0 rgba(52,149,68,.9); }
.mahjong-wall.wall-top::before,.mahjong-wall.wall-bottom::before { left: 0; }
.mahjong-wall.wall-top span,.mahjong-wall.wall-bottom span { right: 0; }
.mahjong-wall.wall-left,.mahjong-wall.wall-right { top: 50%; width: 18px; height: 24px; transform: translateY(-50%); }
.mahjong-wall.wall-left { left: 11%; }
.mahjong-wall.wall-right { right: 11%; }
.mahjong-wall.wall-left::before,.mahjong-wall.wall-right::before,.mahjong-wall.wall-left span,.mahjong-wall.wall-right span { left: 0; width: 12px; height: 24px; box-shadow: inset 2px 0 0 rgba(210,248,181,.3),inset -3px 0 0 rgba(24,115,62,.45),4px 3px 0 rgba(52,149,68,.9); }
.mahjong-wall.wall-left::before,.mahjong-wall.wall-right::before { top: 0; }
.mahjong-wall.wall-left span,.mahjong-wall.wall-right span { bottom: 0; }
.mahjong-wall span { display: none; }
.mahjong-seat { position: absolute; z-index: 4; color: white; font-size: 9px; }
.mahjong-seat.seat-top { top: 4px; left: 50%; width: 42%; transform: translateX(-50%); text-align: center; }
.mahjong-seat.seat-left { top: 50%; left: 4px; width: 21%; transform: translateY(-55%); }
.mahjong-seat.seat-right { top: 50%; right: 4px; width: 21%; transform: translateY(-55%); text-align: right; }
.mahjong-seat.seat-bottom { bottom: 48px; left: 4px; width: 28%; }
.mahjong-player { display: inline-flex; max-width: 100%; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid rgba(195,233,210,.24); border-radius: 7px; background: linear-gradient(145deg,rgba(4,51,46,.96),rgba(2,31,33,.94)); box-shadow: 0 3px 7px rgba(0,0,0,.25); }
.mahjong-player.is-turn { outline: 2px solid #ffd85c; box-shadow: 0 0 0 3px rgba(255,216,92,.2); }
.mahjong-player.is-empty { color: rgba(255,255,255,.68); border: 1px dashed rgba(255,255,255,.35); background: rgba(3,42,36,.35); }
.mahjong-opponent-hand { position: absolute; z-index: 4; display: flex; gap: 0; overflow: visible; filter: drop-shadow(0 3px 2px rgba(0,31,22,.28)); pointer-events: none; }
.mahjong-opponent-hand span { position: relative; display: block; flex: 0 0 15px; width: 15px; height: 23px; border: 1px solid rgba(28,104,60,.72); border-top: 3px solid #ebe9dc; border-radius: 2px 2px 1px 1px; background:
  linear-gradient(90deg,rgba(16,96,52,.24),transparent 25% 72%,rgba(12,78,43,.28)),
  linear-gradient(180deg,#58c568 0%,#32a75b 60%,#21824d 100%);
  box-shadow: inset 0 1px 0 rgba(226,255,218,.28),0 2px 0 rgba(22,111,58,.88); }
.seat-top .mahjong-opponent-hand { top: 35px; left: 50%; width: 195px; height: 23px; transform: translateX(-50%); }
.seat-top .mahjong-opponent-hand span + span { border-left-color: rgba(20,83,49,.46); }
.seat-left .mahjong-opponent-hand,.seat-right .mahjong-opponent-hand { top: 50%; width: 23px; height: 156px; flex-direction: column; transform: translateY(-50%); }
.seat-left .mahjong-opponent-hand span,.seat-right .mahjong-opponent-hand span { flex-basis: 12px; width: 23px; height: 12px; border-top: 1px solid rgba(28,104,60,.72); border-radius: 2px 1px 1px 2px; background:
  linear-gradient(180deg,rgba(16,96,52,.24),transparent 25% 72%,rgba(12,78,43,.28)),
  linear-gradient(90deg,#58c568 0%,#32a75b 60%,#21824d 100%);
  box-shadow: inset 0 1px 0 rgba(226,255,218,.28),2px 0 0 rgba(22,111,58,.88); }
.seat-left .mahjong-opponent-hand span { border-right: 1px solid rgba(28,104,60,.72); border-left: 3px solid #ebe9dc; }
.seat-right .mahjong-opponent-hand span { border-right: 3px solid #ebe9dc; border-left: 1px solid rgba(28,104,60,.72); background:
  linear-gradient(180deg,rgba(16,96,52,.24),transparent 25% 72%,rgba(12,78,43,.28)),
  linear-gradient(270deg,#58c568 0%,#32a75b 60%,#21824d 100%); box-shadow: inset 0 1px 0 rgba(226,255,218,.28),-2px 0 0 rgba(22,111,58,.88); }
.seat-left .mahjong-opponent-hand span + span,.seat-right .mahjong-opponent-hand span + span { border-top-color: rgba(20,83,49,.46); }
.seat-left .mahjong-opponent-hand { left: calc(100% - 20px); }
.seat-right .mahjong-opponent-hand { right: calc(100% - 20px); }
.mahjong-avatar { display: grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; border: 2px solid rgba(255,223,106,.9); border-radius: 5px; color: #fff7ce; background: linear-gradient(145deg,#297c75,#0b4644); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: 11px; font-weight: 900; }
.mahjong-player-copy { min-width: 0; }
.mahjong-player-copy strong, .mahjong-player-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mahjong-player-copy strong { max-width: 92px; font-size: 10px; font-weight: 800; line-height: 1.18; }
.mahjong-player-copy small { margin-top: 1px; color: #d8ebe5; font-size: 8px; font-weight: 650; line-height: 1.15; }
.mahjong-ready-badge { flex: 0 0 auto; padding: 2px 4px; border-radius: 4px; color: #063d32; background: #8af1be; font-size: 8px; font-weight: 800; }
.mahjong-mini-melds { display: flex; min-height: 14px; margin-top: 2px; gap: 1px; }
.mahjong-mini-tile { position: relative; display: grid; width: 15px; height: 21px; place-items: center; overflow: hidden; border: 1px solid rgba(123,132,116,.55); border-bottom: 2px solid rgba(84,143,96,.72); border-radius: 2px 2px 1px 1px; color: #162a25; background:
  linear-gradient(90deg,rgba(70,75,66,.08),transparent 20% 80%,rgba(70,75,66,.1)),
  linear-gradient(180deg,#fffff8 0%,#fffdf0 68%,#e8e7dc 100%);
  box-shadow: inset 0 1px 0 #fff,0 1px 0 rgba(57,121,77,.48),0 2px 3px rgba(0,0,0,.2); font-size: 7px; }
.mahjong-mini-tile.is-back { background: repeating-linear-gradient(45deg,#2d80b8 0 2px,#d7f4ff 2px 3px); }
.mahjong-discards { display: grid; width: 125px; grid-template-columns: repeat(auto-fit,20px); justify-content: center; gap: 1px; margin-top: 2px; }
.seat-top .mahjong-discards { position: absolute; top: 72px; left: 50%; transform: translateX(-50%) rotate(180deg); }
.seat-left .mahjong-discards,.seat-right .mahjong-discards { position: absolute; top: 50%; width: 62px; }
.seat-left .mahjong-discards { left: calc(100% + 80px); transform: translateY(-50%) rotate(90deg); }
.seat-right .mahjong-discards { right: calc(100% + 80px); transform: translateY(-50%) rotate(-90deg); }
.seat-bottom .mahjong-discards { position: absolute; right: -126px; bottom: 50px; }
.mahjong-discard-tile { position: relative; display: grid; width: 20px; height: 27px; place-items: center; overflow: hidden; border: 1px solid rgba(123,132,116,.58); border-bottom: 3px solid rgba(76,139,91,.76); border-radius: 2px 2px 1px 1px; color: #192921; background:
  linear-gradient(90deg,rgba(70,75,66,.08),transparent 20% 80%,rgba(70,75,66,.1)),
  linear-gradient(180deg,#fffff8 0%,#fffdf0 68%,#e8e7dc 100%);
  box-shadow: inset 0 1px 0 #fff,0 1px 0 rgba(57,121,77,.52),0 2px 3px rgba(0,0,0,.2); font-size: 7px; font-weight: 650; }
.mahjong-center { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 48%; min-height: 82px; place-items: center; transform: translate(-50%,-50%); color: white; text-align: center; }
.mahjong-center-console { position: relative; display: grid; width: clamp(108px,78%,126px); aspect-ratio: 1.25; place-items: center; border: 2px solid rgba(4,35,34,.78); border-radius: 8px; background: linear-gradient(145deg,rgba(41,93,87,.97),rgba(8,49,49,.98)); box-shadow: inset 0 0 0 2px rgba(175,224,204,.12),0 5px 11px rgba(0,25,24,.25); }
.mahjong-center-console > i { position: absolute; color: #dceee8; font-family: "Microsoft YaHei UI","Microsoft YaHei","PingFang SC",sans-serif; font-size: 9px; font-style: normal; font-weight: 800; }
.mahjong-center-console .wind-north { top: 2px; left: 50%; transform: translateX(-50%); }
.mahjong-center-console .wind-east { top: 50%; right: 4px; transform: translateY(-50%); }
.mahjong-center-console .wind-south { bottom: 2px; left: 50%; transform: translateX(-50%); }
.mahjong-center-console .wind-west { top: 50%; left: 4px; transform: translateY(-50%); }
.mahjong-wall-status { display: grid; width: 82%; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; gap: 3px; padding: 5px 4px; border: 1px solid rgba(207,236,222,.2); border-radius: 5px; color: #edf8f4; background: rgba(1,27,29,.84); font-size: 8px; font-weight: 700; white-space: nowrap; }
.mahjong-wall-status strong { color: #fff0a8; font-size: 12px; font-weight: 900; }
.mahjong-center-message { margin-top: 4px; color: #e5f2ed; font-size: 9px; font-weight: 650; }
.mahjong-last-tile { display: grid; width: 29px; height: 39px; margin-top: 4px; place-items: center; overflow: hidden; padding: 2px 2px 4px; border: 2px solid #ffd84e; border-bottom: 4px solid rgba(76,139,91,.78); border-radius: 3px; color: #153128; background: linear-gradient(180deg,#fffff8,#fffdf1 68%,#e7e5d8); box-shadow: inset 0 1px 0 #fff,0 2px 0 rgba(57,121,77,.5),0 4px 8px rgba(0,0,0,.23); font-size: 10px; font-weight: 800; }
.mahjong-last-tile .mahjong-face { transform: scale(.88); }
.mahjong-last-tile[hidden] { display: none; }
.mahjong-hand-zone { position: absolute; z-index: 7; right: 5px; bottom: 3px; left: 24%; display: grid; grid-template-rows: 26px minmax(46px,auto); }
.mahjong-meld-row { display: flex; align-items: end; gap: 3px; overflow: hidden; }
.mahjong-meld-group { display: flex; gap: 1px; }
.mahjong-hand { display: flex; min-width: 0; align-items: end; justify-content: flex-end; gap: 0; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0,21,18,.22)); }
.mahjong-tile { position: relative; display: grid; flex: 0 1 42px; width: clamp(23px,4.9vw,42px); max-width: 42px; height: auto; aspect-ratio: 5 / 8; place-items: center; overflow: hidden; padding: 1px; border: 1px solid rgba(147,151,136,.72); border-bottom: 3px solid rgba(181,195,180,.78); border-radius: 4px 4px 2px 2px; color: #172d26; background:
  linear-gradient(90deg,rgba(71,76,67,.1),transparent 18% 82%,rgba(71,76,67,.12)),
  linear-gradient(180deg,#fffffb 0%,#fffef4 68%,#e9e7dc 100%);
  box-shadow: inset 0 1px 1px #fff,inset 1px 0 0 rgba(255,255,255,.72),inset -1px 0 0 rgba(63,71,62,.08),0 2px 0 rgba(102,151,113,.42),0 4px 5px rgba(0,0,0,.19); font-size: clamp(10px,1.9vw,14px); font-weight: 800; transition: transform .12s,border-color .12s,box-shadow .12s; }
.mahjong-hand .mahjong-tile { border-right-color: rgba(132,137,123,.62); border-bottom-color: rgba(181,195,180,.72); border-radius: 4px 4px 1px 1px; box-shadow: inset 0 1px 1px #fff,inset 1px 0 0 rgba(255,255,255,.72),inset -1px 0 0 rgba(63,71,62,.08),0 2px 0 rgba(102,151,113,.36),0 4px 5px rgba(0,0,0,.17); }
.mahjong-meld-row .mahjong-tile { flex: 0 0 18px; width: 18px; height: 24px; padding: 0; border-bottom: 3px solid rgba(76,139,91,.76); border-radius: 2px 2px 1px 1px; box-shadow: inset 0 1px 0 #fff,0 1px 0 rgba(57,121,77,.52),0 2px 3px rgba(0,0,0,.2); }
.mahjong-tile.is-selected { transform: translateY(-8px); border-color: #ffd447; box-shadow: 0 0 0 2px rgba(255,212,71,.45),0 4px 7px rgba(0,0,0,.22); }
.mahjong-face { display: grid; width: 100%; height: 100%; place-items: center; line-height: 1; }
.mahjong-face-image { display: block; width: calc(100% - 4px); height: calc(100% - 5px); object-fit: contain; filter: saturate(1.1) contrast(1.16); image-rendering: auto; pointer-events: none; user-select: none; }
.mahjong-face-fallback { color: #1e2b35; font-family: "Noto Serif SC","Songti SC","SimSun",serif; font-size: 1.35em; font-weight: 900; }
.mahjong-characters { grid-template-rows: 1fr .95fr; padding-top: 1px; font-family: "Noto Serif SC","Songti SC","SimSun",serif; }
.mahjong-characters b { align-self: end; color: #173d85; font-size: 1.45em; font-weight: 900; }
.mahjong-characters i { align-self: start; color: #d52f34; font-size: 1.28em; font-style: normal; font-weight: 900; }
.mahjong-honor { font-family: "Noto Serif SC","Songti SC","SimSun",serif; font-size: 2em; font-weight: 900; text-shadow: 0 .4px 0 currentColor; }
.mahjong-honor.honor-E,.mahjong-honor.honor-S,.mahjong-honor.honor-W,.mahjong-honor.honor-N { color: #203e76; }
.mahjong-honor.honor-C { color: #d82231; }
.mahjong-honor.honor-F { color: #138652; }
.mahjong-honor.honor-B { width: 64%; height: 58%; border: 2px solid #2c81b8; border-radius: 1px; color: transparent; box-shadow: inset 0 0 0 1px rgba(44,129,184,.22); text-shadow: none; }
.mahjong-dots,.mahjong-bamboos { grid-template-columns: repeat(3,1fr); grid-auto-rows: 1fr; gap: 1px; padding: 2px; }
.mahjong-dots.dots-1,.mahjong-bamboos.bamboos-1 { grid-template-columns: 1fr; padding: 6px; }
.mahjong-dots.dots-2,.mahjong-bamboos.bamboos-2 { grid-template-columns: repeat(2,1fr); padding: 5px 3px; }
.mahjong-dots.dots-3,.mahjong-bamboos.bamboos-3 { grid-template-columns: repeat(3,1fr); padding: 6px 2px; }
.mahjong-dots.dots-4,.mahjong-bamboos.bamboos-4 { grid-template-columns: repeat(2,1fr); padding: 3px 4px; }
.mahjong-dots.dots-5,.mahjong-bamboos.bamboos-5,.mahjong-dots.dots-6,.mahjong-bamboos.bamboos-6 { grid-template-columns: repeat(3,1fr); padding: 3px 2px; }
.mahjong-dot { display: block; width: min(8px,78%); aspect-ratio: 1; justify-self: center; border: 1px solid rgba(11,62,108,.15); border-radius: 50%; background: radial-gradient(circle at 40% 38%,#fff 0 12%,#1b8cc3 15% 36%,#0e477d 40% 55%,#39a968 59% 72%,#126849 76%); box-shadow: 0 .5px 1px rgba(0,0,0,.22); }
.mahjong-dot:nth-child(2n) { background: radial-gradient(circle at 40% 38%,#fff 0 12%,#ef4a50 15% 36%,#a61925 40% 55%,#ef783a 59% 72%,#b63322 76%); }
.mahjong-dot:nth-child(3n) { background: radial-gradient(circle at 40% 38%,#fff 0 12%,#31ac6d 15% 36%,#117244 40% 55%,#54c993 59% 72%,#19734e 76%); }
.mahjong-dots.dots-1 .mahjong-dot { width: 90%; background: radial-gradient(circle,#d9323c 0 14%,#f7efe3 16% 25%,#147a5b 28% 42%,#f7efe3 45% 54%,#1678a8 57% 72%,#0d456c 75%); }
.mahjong-bamboo { position: relative; display: block; width: min(7px,72%); height: 88%; justify-self: center; border-radius: 3px 3px 2px 2px; background: linear-gradient(90deg,#17714c 0 20%,#42bd76 21% 44%,#e9f5bd 45% 56%,#32a765 57% 80%,#126340 81%); box-shadow: 0 .5px 1px rgba(0,0,0,.2); }
.mahjong-bamboo::before,.mahjong-bamboo::after,.mahjong-bamboo b { position: absolute; right: -18%; left: -18%; height: 2px; border-radius: 3px; background: #176ba0; content: ""; }
.mahjong-bamboo::before { top: 23%; }
.mahjong-bamboo b { top: 49%; }
.mahjong-bamboo::after { top: 74%; }
.mahjong-bamboo:nth-child(2n) { filter: hue-rotate(108deg) saturate(1.2); }
.mahjong-bamboos.bamboos-1 .mahjong-bamboo { width: 72%; height: 100%; border-radius: 50% 50% 42% 42%; transform: rotate(9deg); background: linear-gradient(135deg,#168762 0 32%,#1a6fa4 33% 52%,#df3f43 53% 66%,#37a966 67%); }
.mahjong-mini-tile .mahjong-face,.mahjong-discard-tile .mahjong-face { transform: scale(.84); }
.mahjong-mini-tile .mahjong-honor,.mahjong-discard-tile .mahjong-honor { font-size: 1.75em; }
.mahjong-mini-tile .mahjong-dots,.mahjong-mini-tile .mahjong-bamboos,.mahjong-discard-tile .mahjong-dots,.mahjong-discard-tile .mahjong-bamboos { gap: 0; padding: 1px; }
.mahjong-mini-tile .mahjong-dot,.mahjong-discard-tile .mahjong-dot { width: 4px; border-width: 0; }
.mahjong-mini-tile .mahjong-bamboo,.mahjong-discard-tile .mahjong-bamboo { width: 3px; }
.mahjong-mini-tile .mahjong-bamboo::before,.mahjong-mini-tile .mahjong-bamboo::after,.mahjong-mini-tile .mahjong-bamboo b,.mahjong-discard-tile .mahjong-bamboo::before,.mahjong-discard-tile .mahjong-bamboo::after,.mahjong-discard-tile .mahjong-bamboo b { height: 1px; }
.mahjong-control-panel { display: grid; gap: 3px; padding: 4px 3px 0; background: #e9eff1; }
.mahjong-action-note { min-height: 14px; overflow: hidden; color: #3c5662; font-size: 9px; font-weight: 650; line-height: 1.35; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.mahjong-action-row, .mahjong-room-actions { display: flex; min-height: 30px; justify-content: center; gap: 5px; }
.mahjong-action-row:empty { min-height: 0; }
.mahjong-action-row button, .mahjong-room-actions button { min-width: 62px; min-height: 29px; padding: 3px 9px; border: 0; border-radius: 8px; color: white; background: #078e76; box-shadow: 0 2px 5px rgba(8,101,83,.17); font-size: 10px; font-weight: 700; }
.mahjong-action-row button.primary { background: #e39b18; }
.mahjong-action-row button.danger, .mahjong-room-actions button.danger { background: #e64e58; }
.mahjong-action-row button.secondary, .mahjong-room-actions button.secondary { color: #365b62; border: 1px solid #bfd0d2; background: #f7fbfb; box-shadow: none; }
.mahjong-action-row button:disabled, .mahjong-room-actions button:disabled { color: #9aa8ab; background: #dce3e4; box-shadow: none; }
.mahjong-gold-manager { display: grid; grid-template-columns: auto minmax(80px,1fr) 70px auto auto; align-items: center; gap: 4px; }
.mahjong-gold-manager[hidden] { display: none; }
.mahjong-gold-manager strong { font-size: 9px; font-weight: 800; }
.mahjong-gold-manager select, .mahjong-gold-manager input { min-width: 0; height: 28px; padding: 3px 5px; border: 1px solid #c2d1d4; border-radius: 6px; color: #203943; background: white; font-size: 9px; font-weight: 650; }
.mahjong-gold-manager button { min-height: 28px; padding: 3px 6px; border: 0; border-radius: 6px; color: white; background: #078e76; font-size: 9px; font-weight: 750; }
.mahjong-result { position: absolute; z-index: 50; inset: 38px 7px 5px; overflow-y: auto; padding: 10px; border-radius: 13px; color: #203139; background: rgba(255,255,255,.98); box-shadow: 0 15px 45px rgba(9,42,48,.3); }
.mahjong-result[hidden] { display: none; }
.mahjong-result-head { display: flex; align-items: center; justify-content: space-between; }
.mahjong-result-head strong { color: #08785d; font-size: 15px; }
.mahjong-result-head button { border: 0; color: #60727c; background: transparent; font-size: 20px; }
.mahjong-result-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 8px; }
.mahjong-result-grid > div { padding: 6px; border-radius: 8px; background: #f2f6f6; font-size: 9px; font-weight: 650; text-align: center; }
.mahjong-result-grid b { display: block; margin-top: 2px; font-size: 11px; }
.mahjong-result-horses { display: flex; gap: 4px; margin-top: 7px; }
.mahjong-result-horses span { padding: 4px 6px; border-radius: 5px; background: #edf2f3; font-size: 9px; }
.mahjong-result-horses span.is-hit { color: #78540a; border: 1px solid #f2ca4b; background: #fff5bf; }
.mahjong-result-proof { margin-top: 7px; padding-top: 6px; border-top: 1px solid #e2e8e9; color: #566b75; font-family: ui-monospace,Consolas,monospace; font-size: 8px; font-weight: 600; word-break: break-all; }
.mahjong-lobby-card { gap: 9px; }
.mahjong-create-form, .mahjong-join-form { display: grid; gap: 8px; }
.mahjong-form-block > strong { display: block; margin-bottom: 5px; font-size: 11px; }
.mahjong-picker { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.mahjong-picker button { min-height: 32px; border: 1px solid #d6e0e3; border-radius: 8px; color: #617077; background: #f7f9f9; font-size: 10px; }
.mahjong-picker button.is-active { color: white; border-color: #0b9875; background: #0b9875; }
.mahjong-form-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.mahjong-base-shortcuts { display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; }
.mahjong-base-shortcuts button { min-height: 28px; border: 1px solid #cae0da; border-radius: 7px; color: #087a60; background: #f2fbf8; font-size: 9px; }
.mahjong-base-shortcuts button.is-active { color: white; background: #0b9875; }
.mahjong-create-help { color: #687a82; font-size: 10px; font-weight: 500; line-height: 1.55; }
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; display: grid; width: min(100%, 760px); height: 66px; padding-bottom: env(safe-area-inset-bottom); grid-template-columns: repeat(5, 1fr); transform: translateX(-50%); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.bottom-nav[hidden] { display: none; }
.bottom-nav button { border: 0; color: #8c98a6; background: transparent; }
.bottom-nav button span, .bottom-nav button small { display: block; }
.bottom-nav button span { font-size: 20px; }
.bottom-nav button small { margin-top: 2px; font-size: 10px; }
.bottom-nav button.is-active { color: var(--blue); }
.page-title { display: flex; align-items: end; justify-content: space-between; margin: 5px 2px 14px; }
.page-title strong { font-size: 21px; }
.page-title small { color: var(--muted); }
.game-topline { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 9px; }
.game-topline strong, .game-topline small { display: block; }
.game-topline strong { font-size: 20px; }
.game-topline small { margin-top: 2px; color: var(--muted); }
.app.is-game-view .game-topline { min-height: 23px; margin-bottom: 3px; }
.app.is-game-view .game-topline strong { display: none; }
.app.is-game-view .game-topline small { margin-top: 0; font-size: 10px; }
.round-status { display: flex; min-width: 0; flex: 1; align-items: center; gap: 6px; }
.round-status #gameIssue { color: #647386; font-size: 12px; font-weight: 600; }
.round-status #gameCountdown { min-width: 46px; padding: 3px 5px; border-radius: 6px; color: white; background: #0794b7; font-size: 12px; line-height: 1; text-align: center; letter-spacing: .06em; }
.order-toggle, .text-button { border: 0; color: var(--blue); background: transparent; }
.order-toggle { padding: 3px 2px; font-size: 12px; }
.plate-picker { position: relative; flex: 0 0 auto; }
.plate-toggle { min-height: 22px; padding: 2px 3px; border: 0; color: #176fbf; background: transparent; font-size: 11px; white-space: nowrap; }
.plate-menu { position: absolute; z-index: 45; top: calc(100% + 4px); right: 0; width: 112px; overflow: hidden; border: 1px solid #dbe4ee; border-radius: 9px; background: white; box-shadow: 0 8px 24px rgba(22,50,82,.17); }
.plate-menu[hidden] { display: none; }
.plate-menu button { display: flex; width: 100%; min-height: 34px; align-items: center; justify-content: space-between; padding: 5px 8px; border: 0; border-bottom: 1px solid #edf0f4; color: var(--text); background: white; font-size: 11px; }
.plate-menu button:last-child { border-bottom: 0; }
.plate-menu button span { color: #697789; font-size: 10px; }
.plate-menu button.is-active { color: #126fc3; background: #eef7ff; font-weight: 700; }
.text-button { font-size: 11px; }
.order-preview { max-height: 155px; margin-bottom: 9px; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.compact-order { display: flex; align-items: center; gap: 6px; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 11px; }
.compact-order:last-child { border: 0; }
.compact-order span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-order .win { color: var(--success); }
.compact-order .loss { color: var(--danger); }
.draw-strip { display: flex; min-width: 0; align-items: center; gap: 5px; padding: 6px 7px; border-radius: 12px; background: var(--surface); box-shadow: 0 2px 8px rgba(19,49,83,.05); cursor: pointer; }
.draw-strip small { color: var(--muted); }
.draw-issue { flex: 0 0 auto; color: #6e7884; font-size: 11px; font-weight: 500; }
.draw-numbers { display: flex; flex: 1; min-width: 0; flex-wrap: nowrap; gap: 3px; margin-top: 0; overflow: hidden; }
.draw-numbers span { display: grid; flex: 1 1 24px; min-width: 17px; max-width: 30px; height: 24px; padding: 0 2px; place-items: center; border: 0; border-radius: 4px; color: white; background: #1688d2; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); font-size: 10px; font-weight: 650; }
.draw-numbers span.official-ball, .draw-numbers span.official-ring { flex-basis: 24px; max-width: 24px; border-radius: 50%; }
.draw-numbers span.official-square { border-radius: 3px; }
.draw-actions { display: flex; flex: 0 0 auto; gap: 2px; }
.draw-actions button { width: 27px; height: 27px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 12px; }
.draw-actions #videoButton, .draw-actions #scratchButton { color: var(--blue); }
.draw-actions #scratchButton { font-size: 9px; font-weight: 700; letter-spacing: -.08em; }
.draw-history { margin: 3px 0 5px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; }
.draw-history[hidden] { display: none; }
.history-row { display: grid; min-height: 29px; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 5px; padding: 3px 6px; border-bottom: 1px solid #edf0f3; }
.history-row:last-child { border-bottom: 0; }
.history-row.history-head { min-height: 26px; color: #6f7883; background: #fafbfc; font-size: 10px; }
.history-issue { white-space: nowrap; color: #66717d; font-size: 11px; }
.history-result-numbers { display: grid; min-width: 0; grid-template-columns: repeat(var(--result-count),minmax(0,1fr)); gap: 3px; }
.history-result-numbers span { display: grid; min-width: 0; height: 23px; place-items: center; border-radius: 3px; color: white; font-size: 10px; font-weight: 650; }
.history-result-numbers span.official-ball, .history-result-numbers span.official-ring, .full-result-numbers span.official-ball, .full-result-numbers span.official-ring { border-radius: 50%; }
.history-result-numbers span.official-square, .full-result-numbers span.official-square { border-radius: 3px; }
.history-head .history-result-numbers span { height: 18px; color: #6f7883; background: transparent !important; font-weight: 500; }
.history-more { display: block; width: min(70%,290px); min-height: 34px; margin: 8px auto; border: 0; border-radius: 7px; color: white; background: #0794b7; font-size: 13px; }
.draw-history .empty { padding: 18px 10px; }
.results-page { position: fixed; z-index: 80; inset: 0 auto 0 50%; display: grid; width: min(100%,760px); height: 100dvh; grid-template-rows: 54px auto auto auto minmax(0,1fr); transform: translateX(-50%); background: #f7f8fa; }
.results-page[hidden] { display: none; }
.results-header { display: grid; grid-template-columns: 76px 1fr 105px; align-items: center; padding: 0 10px; color: white; background: linear-gradient(110deg,#1761a3,#05aeb4); }
.results-header strong { font-size: 19px; text-align: center; }
.results-header button { min-height: 34px; border: 0; color: white; background: transparent; }
.results-header #resultsBack { width: 36px; padding: 0; font-size: 32px; text-align: left; }
.results-header #officialResults { border: 1px solid rgba(255,255,255,.9); border-radius: 999px; font-size: 12px; }
.results-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); background: white; }
.results-filter select, .results-filter input { width: 100%; height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: white; }
.results-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: white; }
.results-tabs button { min-height: 32px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; color: #8b949f; background: #f4f5f7; font-size: 12px; }
.results-tabs button.is-active { color: white; border-color: #0794b7; background: #0794b7; }
.full-results-head { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 7px; padding: 8px 12px; color: #56616d; border-bottom: 1px solid var(--line); background: #fafbfc; font-size: 12px; }
.full-results-list { min-height: 0; overflow-y: auto; background: white; overscroll-behavior: contain; }
.full-result-row { display: grid; min-height: 54px; grid-template-columns: 82px minmax(0,1fr); align-items: center; gap: 7px; padding: 7px 12px; border-bottom: 1px solid #edf0f3; }
.full-result-meta strong, .full-result-meta small { display: block; }
.full-result-meta strong { font-size: 13px; font-weight: 500; }
.full-result-meta small { margin-top: 3px; color: #7d8791; font-size: 11px; }
.full-result-numbers { display: grid; min-width: 0; grid-template-columns: repeat(var(--result-count),minmax(0,1fr)); gap: 4px; }
.full-result-numbers span { display: grid; min-width: 0; height: 28px; place-items: center; border-radius: 3px; color: white; font-size: 11px; font-weight: 650; }
.full-results-list .empty { padding: 42px 12px; }
.play-tabs { display: flex; gap: 5px; margin: 4px 0; overflow-x: auto; scrollbar-width: none; }
.play-tabs[hidden] { display: none; }
.play-tabs button { flex: 0 0 auto; min-height: 24px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 12px; line-height: 1.15; }
.play-tabs button.is-active { color: white; border-color: var(--blue); background: var(--blue); }
.selection-section { margin-top: 12px; }
.selection-title { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }
.selection-title strong { font-size: 14px; }
.lucky4-number-section .selection-title { margin-bottom: 22px; }
.compact-position-section .selection-title { display: none; }
.selection-section.compact-position-section { margin-top: 7px; }
.compact-number-section .selection-title { display: none; }
.selection-section.compact-number-section { margin-top: 7px; }
.position-grid, .number-grid { display: grid; gap: 7px; }
.position-grid { grid-template-columns: repeat(5, 1fr); }
.position-grid.lottery-subplay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.number-grid { grid-template-columns: repeat(7, 1fr); }
.number-grid[hidden] { display: none; }
.number-grid.zodiac-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.secondary-selection-section[hidden] { display: none; }
.number-grid.lucky4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lucky4-grid .choice { min-height: 72px; border-radius: 14px; font-size: 22px; font-weight: 700; }
.lucky4-grid .choice small { margin-top: 5px; font-size: 13px; font-weight: 500; }
.lucky4-option-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.lucky4-option-grid[hidden] { display: none; }
.lucky4-option-grid .choice { min-height: 54px; font-size: 17px; font-weight: 650; }
.lucky4-option-grid .choice small { margin-top: 3px; font-size: 11px; font-weight: 500; }
.position-grid.speed-position-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.position-grid.racing-position-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.racing-position-grid .choice {
  min-height: 26px;
  padding: 1px;
  border-color: #dfe5ec;
  border-radius: 6px;
  color: var(--text);
  background: white;
  font-size: 10px;
  line-height: 1.05;
}
.racing-position-grid .choice.is-selected {
  color: white;
  border-color: #17a36b;
  background: #17a36b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
}
.number-grid.speed-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.number-grid.racing-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.speed-choice-grid .choice { min-height: 45px; font-size: 16px; }
.speed-action-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.speed-action-grid.racing-action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.speed-action-grid[hidden], .sum-grid[hidden], .quick-stake-grid[hidden] { display: none; }
.speed-action-grid .choice { min-height: 45px; font-size: 16px; }
.sum-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.sum-grid.racing-sum-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sum-grid .choice { min-height: 47px; font-size: 15px; font-weight: 600; }
.sum-grid .choice small { font-size: 9px; }
.quick-stake-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.quick-stake-grid button { min-height: 30px; padding: 2px; border: 0; border-radius: 6px; color: white; background: #0794b7; font-size: 13px; }
.quick-stake-grid button.is-active { background: #047796; box-shadow: inset 0 0 0 2px rgba(255,255,255,.38); }
.order-dock { position: fixed; z-index: 30; left: 50%; bottom: 0; width: min(100%, 760px); padding: 6px 12px max(6px, env(safe-area-inset-bottom)); transform: translateX(-50%); border-top: 1px solid #d9dee5; background: rgba(255,255,255,.98); backdrop-filter: blur(12px); touch-action: none; overscroll-behavior: contain; user-select: none; }
.order-dock .quick-stake-grid { margin-top: 0; }
.choice { min-height: 38px; padding: 5px 2px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface); }
.choice small { display: block; margin-top: 1px; color: #c62828; font-size: 9px; }
.choice.number-choice { position: relative; min-height: 46px; padding: 2px 2px 11px; color: var(--text); border-color: #dfe5ec; background: white; box-shadow: none; }
.choice-number { position: absolute; top: 8px; right: 0; left: 0; display: grid; width: 25px; height: 25px; margin: 0 auto; place-items: center; transform: none; border-radius: 50%; color: var(--number-ink); background: var(--number-color); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); font-size: 13px; font-weight: 700; line-height: 1; }
.choice.is-racing-number { min-height: 50px; }
.choice.is-racing-number .choice-number { width: 28px; height: 28px; border-radius: 5px; }
.choice.number-choice.is-shishicai-number { border-color: #dfe5ec; background: white; box-shadow: none; }
.choice.is-shishicai-number .choice-number { color: var(--number-color); border: 3px solid var(--number-color); background: white; box-shadow: none; }
.choice.number-choice.is-shishicai-number small { color: #c62828; }
.choice.number-choice small { position: absolute; right: 0; bottom: 2px; left: 0; margin: 0; color: #c62828; font-size: 9px; font-weight: 600; line-height: 1; opacity: 1; }
.choice.number-choice.is-selected { color: var(--text); border-color: var(--number-color); background: color-mix(in srgb, var(--number-color) 18%, white); box-shadow: inset 0 0 0 2px var(--number-color); filter: none; }
.choice.number-choice.is-selected .choice-number { color: var(--number-ink); background: var(--number-color); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transform: none; }
.choice.number-choice.is-shishicai-number.is-selected { border-color: color-mix(in srgb, var(--number-color) 45%, white); background: color-mix(in srgb, var(--number-color) 7%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--number-color) 35%, white); }
.choice.is-shishicai-number.is-selected .choice-number { color: white; border-color: var(--number-color); background: var(--number-color); }
.choice.number-choice.is-shishicai-number.is-selected small { color: #c62828; }
.choice.number-choice.is-selected small { color: #c62828; opacity: 1; }
.lucky4-grid .choice-number { top: 15px; width: 44px; height: 44px; font-size: 23px; }
.lucky4-grid .choice.number-choice { min-height: 84px; }
.lucky4-grid .choice small { bottom: 3px; font-size: 10px; }
.choice.is-selected { color: white; border-color: var(--blue); background: var(--blue); }
.choice.is-selected small { color: #c62828; }
.bet-bar { position: sticky; bottom: 67px; z-index: 10; display: grid; grid-template-columns: minmax(90px, .8fr) minmax(105px, 1fr) auto; gap: 8px; align-items: end; margin-top: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 -4px 20px rgba(19,49,83,.08); }
.bet-bar label span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.bet-bar input { width: 100%; height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; outline: none; }
.bet-summary small, .bet-summary strong { display: block; }
.bet-summary small { color: var(--muted); font-size: 10px; }
.bet-summary strong { margin-top: 4px; font-size: 13px; }
.bet-bar.speed-bet-bar { position: static; grid-template-columns: minmax(0, 1fr) clamp(68px, 21vw, 88px) clamp(68px, 21vw, 88px); gap: 7px; align-items: center; margin-top: 5px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.speed-bet-bar .bet-summary { display: flex; grid-column: 1 / -1; grid-row: 1; min-height: 20px; align-items: center; justify-content: flex-start; gap: 28px; }
.speed-bet-bar .bet-summary small, .speed-bet-bar .bet-summary strong { color: var(--text); font-size: 13px; font-weight: 500; line-height: 1.2; }
.speed-bet-bar .bet-summary small em { color: #f04e57; font-style: normal; }
.speed-bet-bar .bet-summary strong { margin-top: 0; }
.speed-bet-bar label span { display: none; }
.speed-bet-bar label { grid-column: 1; grid-row: 2; }
.speed-bet-bar label input { height: 40px; border: 0; border-radius: 7px; background: #f3f4f6; font-size: 13px; }
.speed-bet-bar .primary-button, .speed-bet-bar .secondary-button { min-width: 0; min-height: 40px; padding-inline: 6px; border-radius: 7px; font-size: 15px; }
.speed-bet-bar .primary-button { grid-column: 2; grid-row: 2; background: #0794b7; }
.speed-bet-bar .secondary-button { grid-column: 3; grid-row: 2; color: white; border-color: #ff4f55; background: #ff4f55; }
.primary-button, .secondary-button { min-height: 39px; padding: 8px 14px; border-radius: 10px; }
.primary-button { border: 0; color: white; background: var(--blue); }
.secondary-button { border: 1px solid var(--blue); color: var(--blue); background: white; }
.wide { width: 100%; }
.demo-tools { display: flex; align-items: center; justify-content: space-between; margin: 12px 2px 0; padding: 9px 0; color: var(--muted); font-size: 11px; }
.demo-tools button { border: 0; color: var(--blue); background: transparent; }
.checkin-card, .wallet-balance-card, .chat-panel, .profile-card, .security-list { border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.checkin-card { padding: 16px; }
.checkin-head { display: flex; justify-content: space-between; }
.checkin-head span, .checkin-head strong { display: block; }
.checkin-head span { color: var(--muted); }
.checkin-head strong { margin-top: 3px; font-size: 20px; }
.gift-mark { font-size: 38px; }
.checkin-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; margin: 17px 0; }
.checkin-day { padding: 8px 1px; border-radius: 10px; color: var(--muted); background: var(--canvas); text-align: center; }
.checkin-day strong, .checkin-day small { display: block; }
.checkin-day small { margin-top: 2px; font-size: 9px; }
.checkin-day.is-current { color: white; background: var(--blue); }
.checkin-card > small { display: block; margin-top: 9px; color: var(--muted); line-height: 1.6; }
.wallet-balance-card { padding: 19px; text-align: center; }
.wallet-balance-card span, .wallet-balance-card strong { display: block; }
.wallet-balance-card span { color: var(--muted); }
.wallet-balance-card strong { margin: 5px 0 14px; font-size: 32px; }
.wallet-balance-card div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.record-list { overflow: hidden; border-radius: 16px; background: var(--surface); }
.record-row { display: flex; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); }
.record-row.has-payment { flex-wrap: wrap; }
.record-row:last-child { border: 0; }
.record-row strong, .record-row small { display: block; }
.record-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.record-status { margin-left: auto; padding: 4px 7px; border-radius: 999px; color: var(--blue-dark); background: var(--blue-soft); font-size: 10px; }
.record-amount { min-width: 70px; margin-left: 10px; text-align: right; }
.record-amount.minus { color: var(--danger); }
.wallet-payment-code { width: 100%; padding-top: 10px; text-align: center; }
.wallet-payment-code img { display: block; width: min(190px,70vw); max-height: 230px; margin: 0 auto 5px; border-radius: 10px; object-fit: contain; background: #fff; }
.wallet-payment-code small { color: var(--danger); }
.empty { padding: 25px; color: var(--muted); text-align: center; }
.chat-panel { min-height: 460px; display: flex; flex-direction: column; overflow: hidden; }
.chat-messages { flex: 1; padding: 15px; background: linear-gradient(180deg,#f7fbff,#f1f5f9); }
.chat-bubble { width: fit-content; max-width: 82%; margin: 8px 0; padding: 10px 12px; border-radius: 14px; background: white; box-shadow: 0 2px 9px rgba(19,49,83,.06); }
.chat-bubble.player { margin-left: auto; color: white; background: var(--blue); }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; min-width: 0; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; }
.profile-card { display: flex; align-items: center; gap: 11px; padding: 14px; }
.profile-card strong, .profile-card small { display: block; }
.profile-card small { margin-top: 3px; color: var(--muted); }
.profile-points { margin-left: auto; text-align: right; }
.profile-points strong { font-size: 20px; }
.security-list { margin-top: 12px; overflow: hidden; }
.security-list button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 14px; border: 0; border-bottom: 1px solid var(--line); color: var(--text); background: white; text-align: left; }
.security-list button:last-child { border: 0; }
.security-list b, .security-list small { display: block; font-style: normal; }
.security-list small { margin-top: 4px; color: var(--muted); }
.security-list i { color: var(--muted); font-size: 22px; font-style: normal; }
.modal { width: min(calc(100% - 24px), 430px); padding: 0; border: 0; border-radius: 20px; background: transparent; }
.modal::backdrop { background: rgba(9,22,39,.5); backdrop-filter: blur(3px); }
.modal-card { display: grid; gap: 13px; padding: 17px; border-radius: 20px; background: white; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head strong { font-size: 18px; }
.modal-head button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: var(--canvas); font-size: 23px; }
.rebate-card { max-height: min(82dvh, 660px); grid-template-rows: auto auto auto minmax(0,1fr) auto; }
.ledger-card { max-height: min(82dvh, 660px); grid-template-rows: auto minmax(0,1fr) auto; }
.access-dialog { background: rgba(15,35,55,.5); }
.access-card { width: min(92vw,360px); padding: 20px; }
.access-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.access-brand > div { display: grid; }
.access-brand strong { font-size: 18px; }
.access-brand small,.access-message,.recovery-result small { color: var(--muted); }
.access-message { margin: 0 0 14px; text-align: center; }
.access-telegram { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.access-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--muted); font-size: 12px; }
.access-divider::before,.access-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.recovery-login { margin-top: 12px; }
.recovery-login summary { cursor: pointer; color: var(--blue); text-align: center; font-size: 13px; }
.recovery-login form,.recovery-result { margin-top: 12px; }
.recovery-result { display: grid; gap: 10px; text-align: center; }
.recovery-result[hidden] { display: none; }
.access-error { display: block; min-height: 18px; margin-top: 10px; text-align: center; color: #d9363e; }
.rebate-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.rebate-summary div { min-width: 0; padding: 9px 6px; border-radius: 10px; background: #f2f7fb; text-align: center; }
.rebate-summary small, .rebate-summary strong { display: block; }
.rebate-summary small { overflow: hidden; color: #758292; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.rebate-summary strong { margin-top: 4px; color: #126fc3; font-size: 16px; }
.rebate-rate-note { padding: 8px 9px; border-radius: 9px; color: #586779; background: #f7f8fa; font-size: 10px; line-height: 1.45; }
.rebate-record-list { min-height: 80px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; }
.rebate-record-row { display: flex; align-items: center; gap: 8px; padding: 9px; border-bottom: 1px solid var(--line); }
.rebate-record-row:last-child { border-bottom: 0; }
.rebate-record-row > div { flex: 1; min-width: 0; }
.rebate-record-row strong, .rebate-record-row small, .rebate-record-row span, .rebate-record-row b { display: block; }
.rebate-record-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.rebate-record-row small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.rebate-record-row > span { flex: 0 0 58px; color: #a36d16; font-size: 9px; text-align: right; }
.rebate-record-row > span.is-settled { color: var(--success); }
.ledger-record-row > span.is-credit { color: var(--success); }
.ledger-record-row > span.is-debit { color: #d94452; }
.rebate-record-row b { margin-top: 2px; font-size: 13px; }
.rebate-retention { color: var(--muted); font-size: 9px; text-align: center; }
.scratch-card { gap: 11px; }
.scratch-stage { position: relative; min-height: 116px; overflow: hidden; border-radius: 14px; background: linear-gradient(145deg,#eef8ff,#dceeff); }
.scratch-numbers { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(46px,1fr)); gap: 8px; align-content: center; padding: 16px; }
.scratch-numbers span { display: grid; min-height: 38px; place-items: center; border-radius: 50%; color: white; background: #1688d2; box-shadow: 0 3px 10px rgba(8,74,118,.18); font-size: 17px; font-weight: 700; }
#scratchCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.scratch-tip { color: var(--muted); text-align: center; }
.method-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.method-row button { padding: 9px 5px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: white; }
.method-row button.is-active { color: white; border-color: var(--blue); background: var(--blue); }
.field { display: grid; gap: 6px; }
.field[hidden] { display: none; }
.field span { color: var(--muted); font-size: 12px; }
.field input { min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; outline: none; }
.form-message { min-height: 18px; margin: 0; color: var(--danger); font-size: 12px; }
.recovery-code { padding: 13px; border-radius: 12px; color: var(--blue-dark); background: var(--blue-soft); font-family: ui-monospace, Consolas, monospace; text-align: center; letter-spacing: .08em; overflow-wrap: anywhere; }
.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 82px;
  max-width: calc(100% - 42px);
  padding: 6px 10px;
  transform: translate(-50%,20px);
  border: 1px solid #e1e6ec;
  border-radius: 8px;
  color: #5f6b78;
  background: rgba(248,250,252,.97);
  box-shadow: 0 3px 10px rgba(30,45,62,.10);
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}
.toast.is-visible { transform: translate(-50%,0); opacity: 1; }

@media (max-width: 430px) {
  .page { padding-inline: 9px; }
  .game-grid { gap: 7px; }
  .game-card { min-height: 108px; padding-top: 7px; }
  .game-icon { width: 59px; height: 59px; margin-bottom: 4px; }
  .game-card[data-game-id="euro-lucky-4"] .game-icon { width: 64px; height: 61px; }
  .number-grid { grid-template-columns: repeat(7,1fr); gap: 5px; }
  .choice { min-height: 36px; font-size: 12px; }
  .position-grid { grid-template-columns: repeat(4,1fr); }
  .bet-bar { grid-template-columns: 86px 1fr; }
  .bet-bar .primary-button { grid-column: 1 / -1; }
  .bet-bar.speed-bet-bar .primary-button { grid-column: 2; }
  .checkin-days { grid-template-columns: repeat(4,1fr); }
  .three-table { min-height: 292px; }
  .three-seat { width: 46%; }
  .friend-room-card { padding-inline: 7px; }
  .friend-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 18px; }
}

@media (min-width: 650px) {
  .game-grid { grid-template-columns: repeat(6,1fr); }
  .carousel, .slide { min-height: 0; }
  .number-grid { grid-template-columns: repeat(10,1fr); }
}

@media (orientation: portrait) and (max-width: 650px) {
  .page[data-page="mahjong-room"].is-active { padding-inline: 3px; }
  .mahjong-room-bar { grid-template-columns: 1fr auto; }
  .mahjong-room-rule { display: none; }
  .mahjong-table { border-radius: 12px; }
  .mahjong-seat.seat-left, .mahjong-seat.seat-right { width: 32%; }
  .mahjong-seat.seat-left > .mahjong-player, .mahjong-seat.seat-right > .mahjong-player { position: absolute; top: -80px; }
  .mahjong-seat.seat-left > .mahjong-player { left: 0; }
  .mahjong-seat.seat-right > .mahjong-player { right: 0; }
  .seat-top .mahjong-opponent-hand { top: 73px; width: 156px; height: 20px; }
  .seat-top .mahjong-opponent-hand span { flex-basis: 12px; width: 12px; height: 20px; }
  .seat-left .mahjong-opponent-hand,.seat-right .mahjong-opponent-hand { top: calc(50% + 26px); width: 20px; height: 156px; }
  .seat-left .mahjong-opponent-hand span,.seat-right .mahjong-opponent-hand span { flex-basis: 12px; width: 20px; height: 12px; }
  .seat-left .mahjong-opponent-hand { left: 8px; }
  .seat-right .mahjong-opponent-hand { right: 8px; }
  .seat-top .mahjong-discards { top: 127px; }
  .seat-left .mahjong-discards,.seat-right .mahjong-discards { top: calc(50% - 10px); }
  .seat-left .mahjong-discards { left: 44px; }
  .seat-right .mahjong-discards { right: 44px; }
  .seat-bottom .mahjong-discards { right: -62px; bottom: 82px; }
  .mahjong-hand-zone { right: 0; bottom: 7px; left: 0; grid-template-rows: 18px minmax(46px,auto); }
  .mahjong-hand { justify-content: center; gap: 0; }
  .mahjong-tile { flex: 0 0 calc(100% / 14); width: calc(100% / 14); max-width: 22px; min-width: 0; height: auto; aspect-ratio: 5 / 8; padding: 0; border-radius: 2px 2px 1px 1px; font-size: 10px; }
  .mahjong-meld-row .mahjong-tile { flex-basis: 14px; width: 14px; height: 18px; }
  .mahjong-hand .mahjong-face-image { width: calc(100% - 2px); height: calc(100% - 3px); object-position: center; }
  .mahjong-seat.seat-bottom { bottom: 50px; width: 45%; }
  .mahjong-center { width: 48%; }
  .mahjong-gold-manager { grid-template-columns: minmax(90px,1fr) 64px auto auto; }
  .mahjong-gold-manager strong { display: none; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .app.is-mahjong-view .app-header { height: 38px; }
  .app.is-mahjong-view #backButton { height: 29px; }
  .app.is-mahjong-view .game-header-title strong { font-size: 13px; }
  .app.is-mahjong-view .game-metric-pair span, .app.is-mahjong-view .metric-link { font-size: 9px; font-weight: 650; }
  .page[data-page="mahjong-room"].is-active { height: calc(100dvh - 38px); }
  .mahjong-room-bar { min-height: 29px; }
  .mahjong-tile { height: auto; aspect-ratio: 5 / 8; }
  .mahjong-hand-zone { bottom: 2px; grid-template-rows: 14px minmax(36px,auto); }
  .mahjong-seat.seat-bottom { bottom: 42px; }
  .mahjong-control-panel { padding-top: 2px; }
  .mahjong-action-row, .mahjong-room-actions { min-height: 27px; }
  .mahjong-action-row button, .mahjong-room-actions button { min-height: 26px; }
}