.mj-game{max-width:1240px;margin:auto}.mj-toolbar,.mj-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.mj-toolbar{justify-content:space-between;margin-bottom:18px}.mj-select-label{display:flex;gap:10px;align-items:center;font-size:14px}.mj-select-label select{background:var(--panel,#242d25);color:inherit;border:1px solid #7d896344;border-radius:10px;padding:10px;font:inherit}.mj-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}.mj-stats>div{padding:14px;background:#8ba07113;border:1px solid #8897732b;border-radius:13px;display:flex;flex-direction:column;gap:5px}.mj-stats strong{font-size:24px;font-variant-numeric:tabular-nums;color:#c7dda5}.mj-stats span{font-size:13px;opacity:.7}.mj-status{min-height:28px;margin:15px 0;font-size:15px}.mj-table-wrap{position:relative;padding:20px;border-radius:22px;background:radial-gradient(ellipse at 50% 30%,#486e5c,#243d34);border:1px solid #889b6d66;box-shadow:inset 0 0 80px #081d2360}.mj-night .mj-table-wrap{background:radial-gradient(ellipse at 50% 30%,#3c5268,#192d40)}.mj-board{position:relative;width:100%;max-width:1000px;margin:auto;isolation:isolate}.mj-tile{position:absolute;padding:0;border:1px solid #ab9f7f;border-radius:8%;background:linear-gradient(130deg,#fffdf0,#e9e0c3);box-shadow:2px 3px 0 #ac9c6b,3px 5px 5px #0006;cursor:pointer;touch-action:manipulation;transition:filter .15s,box-shadow .15s;min-width:0;min-height:0}.mj-tile svg{width:100%;height:100%;display:block;pointer-events:none}.mj-tile.mj-locked{filter:brightness(.76) saturate(.6)}.mj-tile.mj-selected{background:#e4f5b1;box-shadow:0 0 0 3px #cde898,2px 4px 0 #728553,0 0 20px #cce68877}.mj-tile.mj-hint{background:#ffe6a0;box-shadow:0 0 0 3px #e7b959,0 0 20px #e7b959aa}.mj-tile:focus-visible{outline:3px solid #fa9b83;outline-offset:2px}.mj-tile:not(.mj-locked):hover{filter:brightness(1.07)}.mj-tile[hidden],.mj-overlay[hidden]{display:none}.mj-overlay{position:absolute;inset:0;z-index:1000;border-radius:22px;background:#17312ff2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;text-align:center;padding:24px}.mj-overlay h3{font-size:clamp(22px,3vw,38px);margin:0}.mj-overlay p{margin:0}.mj-win-symbol{font-size:55px;color:#d4eab1}.mj-rules{margin-top:20px;padding:18px;border:1px solid #899b7140;border-radius:14px;font-size:15px;line-height:1.7}.mj-rules summary{cursor:pointer;font-weight:600}.mj-rules p{max-width:850px}.mj-controls button{font-size:14px}.mahjong-pro #game-content{width:100%}@media(max-width:650px){.mj-table-wrap{padding:10px 5px;border-radius:14px}.mj-stats{grid-template-columns:repeat(3,1fr);gap:6px}.mj-stats>div{padding:9px}.mj-stats strong{font-size:20px}.mj-stats span{font-size:11px}.mj-toolbar{gap:8px}.mj-select-label{width:100%;justify-content:space-between}.mj-controls{gap:6px}.mj-controls button{padding:9px;font-size:12px}.mj-status{font-size:13px}.mj-tile{box-shadow:1px 2px 0 #aa9969,2px 3px 3px #0006}.mj-overlay{gap:8px;padding:10px}.mj-overlay p{font-size:12px}.mj-win-symbol{font-size:30px}}@media(prefers-reduced-motion:reduce){.mj-tile{transition:none}}
.game-page.mahjong-pro{max-width:1240px}.game-page.mahjong-pro #game-content{max-width:none}.mj-tile svg{stroke:none;fill:none}.mj-tile svg text{stroke:none}

.mj-board{max-width:none;flex-shrink:0}.mahjong-pro [data-guide="mahjong"]{display:none}
.mj-table-wrap{overflow:auto;overscroll-behavior-x:contain;scrollbar-width:thin}

/* Ivory faces over a jade base; depth stays inside the existing board geometry. */
.mj-tile{
 --mj-depth:5px;
 border:1px solid #b9ad88;
 border-radius:9%;
 background:linear-gradient(135deg,#fffff8 0%,#faf4df 52%,#dfd1ad 100%);
 box-shadow:inset 1px 1px 1px #fff,inset -2px -2px 2px #b4a17470,
  1px 1px 0 #d1c39f,2px 2px 0 #b3a27c,
  2px 3px 0 #5e8976,3px var(--mj-depth) 0 #355f50,
  4px calc(var(--mj-depth) + 3px) 5px #071c2290;
 transition:filter .16s,box-shadow .16s,background .16s;
}
.mj-tile::before{
 content:"";position:absolute;inset:4% 6% 6%;border-radius:7%;
 border:1px solid #c8b98c65;border-top-color:#ffffffd9;border-left-color:#ffffffb0;
 box-shadow:inset 0 1px 2px #fff9;pointer-events:none;
}
.mj-tile svg{position:relative;filter:drop-shadow(0 1px .3px #fff) drop-shadow(0 -.45px .25px #243a3940)}
.mj-tile.mj-locked{filter:brightness(.86) saturate(.72)}
.mj-tile.mj-selected{
 background:linear-gradient(135deg,#ffffee,#ecf4cb 55%,#c5d496);
 box-shadow:inset 1px 1px 2px #fff,inset -2px -2px 2px #7b965e70,
  0 0 0 2px #dcf3a9,2px 3px 0 #739556,3px var(--mj-depth) 0 #36573e,
  4px 8px 7px #071c2290,0 0 15px #d5f5a54d;
}
.mj-tile.mj-hint{
 background:linear-gradient(135deg,#fffbea,#ffe4a1 55%,#d9b665);
 box-shadow:inset 1px 1px 2px #fff,inset -2px -2px 2px #af823e66,
  0 0 0 2px #ffdc78,2px 3px 0 #b69346,3px var(--mj-depth) 0 #796437,
  4px 8px 7px #071c2290,0 0 18px #f9d87566;
}
.mj-tile:not(.mj-locked):hover{filter:brightness(1.055)}
@media(max-width:650px){.mj-tile{--mj-depth:3px}.mj-tile::before{border-width:.7px}}
@media(prefers-reduced-motion:reduce){.mj-tile{transition:none}}