.mj-game{max-width:100%;margin-inline:auto}.mj-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:center;margin-bottom:1rem}.mj-toolbar label{font-weight:700;margin:0}.mj-toolbar select{width:auto;margin:0}.mj-toolbar button{margin:0}.mj-count{font-weight:700;white-space:nowrap}.mj-board{--mj-tw: clamp(2.2rem, 6vw, 3.9rem);--mj-th: calc(var(--mj-tw) * 1.389);--mj-hc: calc(var(--mj-tw) / 2);--mj-vc: calc(var(--mj-th) / 2);--mj-cols: 14;--mj-rows: 8;--mj-lift: .32rem;--mj-maxlayer: 5;position:relative;margin:0 auto 1rem;width:calc(var(--mj-cols) * var(--mj-hc) + var(--mj-maxlayer) * var(--mj-lift) + .6rem);height:calc(var(--mj-rows) * var(--mj-vc) + var(--mj-maxlayer) * var(--mj-lift) + .6rem);max-width:100%}.mj-tile{--mj-x: 0;--mj-y: 0;--mj-layer: 0;position:absolute;margin:0;padding:0;left:calc(var(--mj-x) * var(--mj-hc) + (var(--mj-maxlayer) - var(--mj-layer)) * var(--mj-lift));top:calc(var(--mj-y) * var(--mj-vc) + (var(--mj-maxlayer) - var(--mj-layer)) * var(--mj-lift));width:var(--mj-tw);height:var(--mj-th);min-height:0;min-width:0;box-sizing:border-box;display:grid;place-items:center;border:2px solid #5b4636;border-radius:calc(var(--mj-hc) * .32);background:#fbf6ea;color:#1b1b1b;cursor:pointer;box-shadow:inset .12rem .12rem #ffffffd9,inset -.12rem -.18rem #785f468c,.18rem .22rem .35rem #00000059;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.mj-board button.mj-tile{width:var(--mj-tw);height:var(--mj-th)}.mj-face{font-size:calc(var(--mj-hc) * 1.65);line-height:1;pointer-events:none}.mj-face.mj-sprite{width:90%;height:90%;background-image:url(/games/mahjong/tiles.webp);background-repeat:no-repeat;background-size:900% 400%;background-position:calc(var(--mj-col) / 8 * 100%) calc(var(--mj-row) / 3 * 100%)}.mj-tile.mj-free{background:#fffdf6}.mj-tile.mj-free:hover{transform:translateY(-2px)}.mj-tile.mj-blocked{background:#cfc6b4;color:#6b6357;cursor:not-allowed;filter:grayscale(.5);box-shadow:inset 0 0 0 2px #50463759,.1rem .12rem .2rem #0000004d}.mj-tile.mj-selected{background:#dbeafe;box-shadow:inset 0 0 0 4px #1d4ed8,.18rem .22rem .35rem #00000059;transform:translateY(-3px) scale(1.04)}.mj-tile.mj-selected:after{content:"✓";position:absolute;top:-.35rem;right:-.35rem;width:1.3rem;height:1.3rem;display:grid;place-items:center;font-size:.9rem;font-weight:900;color:#fff;background:#1d4ed8;border:2px solid #fff;border-radius:50%}.mj-tile.mj-hinted{background:color-mix(in srgb,#f59e0b 30%,#fffdf6);box-shadow:inset 0 0 0 4px #b45309,.18rem .22rem .35rem #00000059;animation:mj-pulse 1.1s ease-in-out infinite}.mj-tile.mj-hinted:before{content:"★";position:absolute;top:-.4rem;left:-.35rem;width:1.3rem;height:1.3rem;display:grid;place-items:center;font-size:.85rem;color:#fff;background:#b45309;border:2px solid #fff;border-radius:50%}@keyframes mj-pulse{0%,to{box-shadow:inset 0 0 0 4px #b45309,.18rem .22rem .35rem #00000059}50%{box-shadow:inset 0 0 0 7px #b45309,.18rem .22rem .35rem #00000059}}.mj-tile:focus-visible{outline:4px solid var(--fgs-focus, #1d4ed8);outline-offset:2px;z-index:9999!important}.mj-status{text-align:center;font-size:1.2rem;font-weight:700;min-height:3rem;padding:.5rem;max-width:60ch;margin-inline:auto}.mj-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-bottom:1rem}.mj-actions button{margin:0;font-size:1.15rem;font-weight:800;padding-inline:1.4rem}.mj-actions .mj-hint-btn{background:#b45309;border-color:#b45309;color:#fff}.mj-actions .mj-hint-btn:hover{background:#92400e;border-color:#92400e}.mj-game.mj-won .mj-board{outline:4px solid var(--fgs-good, #15803d);outline-offset:6px;border-radius:12px}[data-theme=dark] .mj-tile{background:#efe7d6;color:#161616;border-color:#3a2d20}[data-theme=dark] .mj-tile.mj-blocked{background:#8c8474;color:#2c2820}[data-contrast=high] .mj-tile{background:#fff!important;color:#000!important;border:3px solid #000!important;box-shadow:.18rem .22rem #000!important}[data-contrast=high] .mj-tile.mj-blocked{background:#e6e6e6!important;color:#000!important;border-style:dashed!important;filter:none}[data-contrast=high] .mj-tile.mj-selected{background:#cfe0ff!important;box-shadow:inset 0 0 0 4px #00339c,.18rem .22rem #000!important}[data-contrast=high] .mj-tile.mj-hinted{background:#ffe9b0!important;box-shadow:inset 0 0 0 4px #7a3d00,.18rem .22rem #000!important}[data-contrast=high] .mj-tile.mj-selected:after{background:#00339c}[data-contrast=high] .mj-tile.mj-hinted:before{background:#7a3d00}@media(prefers-reduced-motion:reduce){.mj-tile{transition:none}.mj-tile.mj-hinted{animation:none;box-shadow:inset 0 0 0 6px #b45309,.18rem .22rem .35rem #00000059}.mj-tile.mj-free:hover,.mj-tile.mj-selected{transform:none}}@media(max-width:720px){.mj-board{--mj-tw: clamp(1.8rem, 9vw, 2.8rem)}.mj-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}}