.is-mahjong .account-wallet { display:none!important; }
.mj-game-shell { min-width:0; }

/* A compact table leaves the hand and its actions in view. */
.mj-arena { height:390px; position:relative; overflow:hidden; background:radial-gradient(ellipse at center,#edf2e7,#e1e9dc); }
.mj-felt { position:absolute; inset:64px 104px 55px; border:7px solid #557260; border-radius:28px; background:radial-gradient(ellipse at center,#2a624e,#1b493b); box-shadow:0 0 0 4px #bacbb0,0 9px 18px #20382522; display:grid; place-items:center; }
.mj-felt:before { content:''; position:absolute; inset:11px; border:1px solid #adc49d35; border-radius:17px; pointer-events:none; }
.mj-felt .mp-felt-logo { top:16px; font-size:14px; }
.mj-center { text-align:center; color:#c7d8bf; padding:30px 0 10px; transform:translateY(27px); }
.mj-center>span { font-size:8px; font-weight:600; letter-spacing:1.2px; }
#mj-last-discard { display:flex; justify-content:center; margin:12px 0; }
.mj-center p { font-size:9px; line-height:1.6; margin:8px 0; }
.mj-guide-mark { font:700 38px Georgia,serif; color:#a6bf91; }

.mj-seat { position:absolute; width:146px; text-align:center; z-index:2; }
.mj-seat-top { left:calc(50% - 73px); top:12px; }
.mj-seat-bottom { left:calc(50% - 73px); bottom:12px; }
.mj-seat-left { left:14px; top:133px; }
.mj-seat-right { right:14px; top:133px; }
.mj-player-heading { display:flex; align-items:center; gap:8px; padding:7px 9px; background:#fffefa; border:1px solid #d4deca; border-radius:8px; box-shadow:0 2px 5px #28441e10; text-align:left; }
.mj-player-heading>div:last-child { flex:1; min-width:0; }
.mj-seat .mp-avatar { margin:0; width:30px; height:30px; flex-shrink:0; border:2px solid #edf2e6; font-size:10px; }
.mj-seat .mp-avatar em { right:-5px; top:-4px; width:12px; height:12px; font-size:6px; }
.mj-seat .mp-nameplate { background:none; box-shadow:none; padding:0; margin:0; gap:5px; border:0; outline:0; }
.mj-seat .mp-nameplate strong { font-size:10px; }
.mj-seat .mp-nameplate span { font-size:6px; letter-spacing:.6px; }
.mj-seat .mp-player-status { margin:4px 0 0; font-size:7px; letter-spacing:0; min-height:0; color:#718266; }
.mj-seat.current-turn .mj-player-heading { border-color:#c79348; background:#fff7e6; box-shadow:0 0 0 2px #e4b86c30; }
.mj-seat.current-turn .mp-player-status { color:#91642d; font-weight:700; }
.mj-seat.won-seat .mj-player-heading { border-color:#caa153; background:#fff0bd; }
.mj-hidden-hand { display:flex; align-items:center; justify-content:center; gap:3px; margin:7px 0; }
.mj-hidden-hand>small { margin-left:4px; font-size:8px; color:#647957; white-space:nowrap; }
.mj-bonus-preview { display:flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:5px; background:#f4f7eed9; padding:4px 5px; margin:4px auto; color:#667b59; max-width:100%; }
.mj-bonus-preview>span:last-child { font-size:8px; white-space:nowrap; }
.mj-bonus-tiles { display:flex; gap:2px; }
.mj-seat-melds { display:flex; justify-content:center; align-items:center; gap:4px; flex-wrap:nowrap; margin-top:5px; }
.mj-seat-melds .mj-meld { padding:2px; gap:1px; border:0; background:#ffffffe6; }

.mj-player-dock { background:#f8faf4; border-top:1px solid #d8e3ce; }
.mj-turn-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px 10px; }
.mj-turn-row>div:first-child { flex:1; min-width:0; }
.mj-turn-row strong { font-size:14px; font-weight:600; color:#294a35; }
.mj-turn-row p { font-size:11px; color:#788971; line-height:1.6; margin:4px 0 0; }
.mj-turn-row .mp-actions { width:auto; flex-shrink:0; }
.mj-turn-row .mp-actions button { min-width:94px; font-size:12px; padding:12px 17px; }
.mj-turn-row .mp-actions .call { background:#285940; color:#fff; border-color:#285940; }
.mj-hand-area { padding:10px 18px 18px; }
.mj-hand-heading { display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; align-items:center; }
.mj-hand-heading .eyebrow { font-size:8px; letter-spacing:1px; color:#718367; }
.mj-hand-heading>span:last-child { font-size:9px; color:#7d8d70; text-align:right; line-height:1.5; }
.mj-hand { display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:5px; padding:7px 2px 2px; min-height:70px; max-width:760px; }
#mj-own-melds { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
#mj-own-melds:empty { display:none; }
.mj-meld { display:flex; align-items:center; gap:3px; padding:7px; border:1px solid #d8e2ce; border-radius:5px; background:#fffefa; }
.mj-meld>small { font-size:7px; letter-spacing:.5px; color:#7c8f6b; margin-right:5px; }
.mj-own-bonus { display:flex; align-items:center; gap:15px; margin-top:16px; padding-top:13px; border-top:1px solid #e0e7d9; }
.mj-own-bonus>div:first-child { width:138px; flex-shrink:0; }
.mj-own-bonus strong { display:block; font-size:8px; font-weight:600; letter-spacing:1px; color:#7d8b72; }
.mj-own-bonus small { display:block; font-size:8px; color:#93a085; line-height:1.5; margin-top:4px; }
.mj-bonus-rack { display:flex; gap:4px; flex-wrap:wrap; }

.mj-guide-body { padding:17px; }
.mj-guide-body p { font-size:12px; color:#7b8b70; line-height:1.8; margin:0 0 13px; }
.mj-guide-body b { color:#415d35; }
.mj-guide-body .outline-button { width:100%; justify-content:center; margin-top:20px; font-size:10px; }
.mj-example { display:flex; gap:5px; flex-wrap:wrap; margin:10px 0 20px; }
.mj-chow-options { display:flex; gap:9px; flex-wrap:wrap; padding:0 18px 18px; }
.mj-chow-choice { display:flex; align-items:center; gap:4px; background:#fffefa; border:1px solid #cedbc2; border-radius:6px; padding:9px; color:#43633b; }
.mj-chow-choice>span:first-child { font-size:11px; margin-right:4px; }

.mj-discard-area { padding:18px; border-top:1px solid #e5eadc; background:#fcfdf9; }
.mj-discard-area h3 { font-size:12px; font-weight:600; margin:0 0 15px; }
.mj-river { display:grid; grid-template-columns:70px 1fr; gap:12px; margin-top:13px; align-items:start; }
.mj-river>strong { font-size:9px; color:#6f8262; overflow-wrap:anywhere; padding-top:8px; }
.mj-river>div { display:flex; gap:3px; flex-wrap:wrap; }
.mj-river small { font-size:9px; color:#97a18d; }
.mj-revealed-player>strong { font-size:11px; }
.mj-revealed-player .mj-example { gap:3px; margin:8px 0 18px; }
.mj-winning-layout { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0; }
.mj-winning-set { padding:9px; border:1px solid #dbbf72; border-radius:6px; background:#fffaf0; }
.mj-winning-set>small { font-size:8px; color:#9a803e; letter-spacing:1px; }
.mj-winning-set .mj-example { gap:3px; margin:7px 0 0; }
#mj-clock { display:inline-block; font-size:10px; font-weight:700; color:#ac683d; margin-right:12px; }
#mahjong-page .room-setup .create-controls { margin-top:17px; }
.mj-game-shell .mp-announcement { min-height:44px; padding:11px 18px; font-size:12px; line-height:1.6; border-top-width:2px; }

@media(max-width:1250px) {
  .mj-guide-body { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
  .mj-guide-body p { margin-bottom:0; }
  .mj-guide-body .mj-example { margin:0; }
  .mj-guide-body .outline-button { margin:0; }
}
@media(max-width:760px) {
  .mj-hand { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px 5px; max-width:380px; }
}
@media(max-width:680px) {
  .mj-arena { height:355px; }
  .mj-felt { inset:79px 61px 59px; border-width:5px; border-radius:22px; }
  .mj-felt .mp-felt-logo { top:14px; font-size:11px; }
  .mj-seat { width:101px; }
  .mj-seat-top,.mj-seat-bottom { left:calc(50% - 58px); width:116px; }
  .mj-seat-left { left:5px; top:120px; }
  .mj-seat-right { right:5px; top:120px; }
  .mj-player-heading { gap:5px; padding:6px 5px; }
  .mj-seat .mp-avatar { width:25px; height:25px; font-size:8px; }
  .mj-seat .mp-nameplate strong { font-size:9px; }
  .mj-seat .mp-nameplate span { font-size:5px; }
  .mj-seat .mp-player-status { font-size:6px; }
  .mj-hidden-hand { gap:2px; margin:6px 0; }
  .mj-hidden-hand>small { font-size:7px; margin-left:2px; }
  .mj-bonus-preview { gap:3px; padding:3px; }
  .mj-bonus-preview>span:last-child { font-size:7px; }
  .mj-bonus-tiles { gap:1px; }
  .mj-seat-melds { gap:3px; }
  .mj-center { padding-top:34px; }
  .mj-center>span { font-size:6px; letter-spacing:.7px; }
  .mj-center p { font-size:7px; max-width:110px; line-height:1.7; }
  .mj-turn-row { padding:13px 12px 8px; gap:10px; flex-wrap:wrap; }
  .mj-turn-row strong { font-size:13px; }
  .mj-turn-row p { font-size:10px; }
  .mj-turn-row .mp-actions { flex-wrap:wrap; }
  .mj-turn-row .mp-actions button { min-width:72px; padding:10px 12px; font-size:11px; }
  .mj-hand-area { padding:10px 12px 15px; }
  .mj-hand-heading { align-items:start; }
  .mj-hand-heading .eyebrow { white-space:nowrap; }
  .mj-hand-heading>span:last-child { font-size:8px; }
  .mj-own-bonus { align-items:start; gap:10px; flex-direction:column; }
  .mj-own-bonus>div:first-child { width:auto; display:flex; align-items:baseline; gap:10px; }
  .mj-own-bonus small { font-size:7px; margin:0; }
  .mj-river { grid-template-columns:48px 1fr; gap:7px; }
  .mj-discard-area { padding:15px 12px; }
  .mj-guide-body { display:block; }
  .mj-guide-body p { margin-bottom:13px; }
  .mj-guide-body .mj-example { margin:10px 0 20px; }
  .mj-guide-body .outline-button { margin-top:15px; }
}
/* Keep the top player's exposed sets in one centered row, clear of the discard. */
.mj-seat-top .mj-seat-melds { position:relative; left:50%; transform:translateX(-50%); width:max-content; flex-wrap:nowrap; }

.mj-game-shell .mp-table-bar { font-size:9px; color:#6d8260; padding:14px 18px; }

/* The hand scales the entire component; face artwork keeps its proportions. */
.mj-hand > .mj-tile--hand { width:100%; height:auto; aspect-ratio:2 / 3; }

.mj-more-sets { padding:4px; background:#edf3e7; color:#49643c; border:1px solid #cbdac0; border-radius:4px; font-size:8px; white-space:nowrap; }