#eg-surface.mahjong-surface{touch-action:auto}
.mj-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0;font-size:13px;color:#5d4031}
.mj-wrap{width:100%;overflow-x:auto;padding:4px 0 10px}
.mj-board{position:relative;width:100%;margin:0 auto}
.mj-board .mj-tile{position:absolute;box-sizing:border-box;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:9%/7%;background:linear-gradient(135deg,#d9c29b,#b89667);box-shadow:1px 2px 3px #3d241440;cursor:pointer;touch-action:manipulation}
.mj-board .mj-face{position:absolute;left:0;top:0;width:90%;height:92%;box-sizing:border-box;border:1px solid #c3a57a;border-radius:9%/7%;background:linear-gradient(160deg,#fffdf6,#f6ecd8);overflow:hidden}
.mj-board .mj-face svg{display:block;width:100%;height:100%}
.mj-board .mj-tile[data-free=false]{cursor:default}
.mj-board .mj-tile[data-free=false] .mj-face{background:#ece2cc}.mj-board .mj-tile[data-free=false] svg{opacity:.72}
.mj-board .mj-tile.is-selected .mj-face{background:#ffe19a;border-color:#c96c0e;box-shadow:inset 0 0 0 2px #c96c0e}
.mj-board .mj-tile.is-hint .mj-face{background:#d8f1ff;border-color:#1f6fb2;box-shadow:inset 0 0 0 2px #1f6fb2;animation:mj-hint 1s ease-in-out infinite alternate}
.mj-board .mj-tile.is-removing{opacity:0;transform:scale(.85);transition:opacity .17s,transform .17s}
.mj-board .mj-tile:focus-visible{outline:3px solid #6751a1;outline-offset:1px;z-index:1000}
.mj-board .mj-tile:disabled{opacity:1}
@media(hover:hover){.mj-board .mj-tile[data-free=true]:not(:disabled):hover .mj-face{background:#fff3cf}}
@keyframes mj-hint{to{background:#b9e3fb}}
@media(prefers-reduced-motion:reduce){.mj-board .mj-tile.is-hint .mj-face{animation:none}.mj-board .mj-tile.is-removing{transition:none}}
/* Mahjong layouts are wide: use the whole play area on desktop instead of the shared 600px column. */
.eg-game:has(#eg-surface.mahjong-surface){max-width:880px}