.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,.mj-toolbar-label{font-weight:700;margin:0}.mj-toolbar button{margin:0}.mj-count{font-weight:700;white-space:nowrap}.mj-size-row{display:flex;flex-wrap:wrap;gap:.6rem}.mj-size-btn{margin:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:48px;padding:.5rem 1.1rem;font-size:1.1rem;font-weight:800;line-height:1.15;background:var(--fgs-surface, #fff);color:var(--fgs-ink, #161616);border:3px solid var(--fgs-accent, #16692f);border-radius:12px;cursor:pointer}.mj-size-btn .mj-size-sub{font-size:.8rem;font-weight:600;opacity:.8}.mj-size-btn:hover{background:var(--fgs-accent-soft, #e6f1e9)}.mj-size-btn[aria-pressed=true],.mj-size-btn.mj-size-active{background:var(--fgs-accent, #16692f);color:var(--fgs-on-accent, #fff);border-color:var(--fgs-accent, #16692f);box-shadow:0 0 0 3px var(--fgs-surface, #fff),0 0 0 6px var(--fgs-accent, #16692f)}.mj-size-btn[aria-pressed=true]:hover,.mj-size-btn.mj-size-active:hover{background:var(--fgs-accent-deep, #0f4e22);border-color:var(--fgs-accent-deep, #0f4e22)}.mj-size-btn:focus-visible{outline:4px solid var(--fgs-focus, #15549e);outline-offset:2px}.mj-howto{text-align:center;font-size:1.1rem;font-weight:600;color:var(--fgs-ink-soft, #3a3a3a);max-width:60ch;margin:0 auto .85rem}.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{position:absolute;inset:7%;width:auto;height:auto;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;align-items:stretch;margin-bottom:1rem}.mj-actions button{margin:0;min-height:56px;font-size:1.15rem;font-weight:800;padding-inline:1.4rem}.mj-actions .mj-hint-btn{order:-1;min-height:64px;font-size:1.35rem;padding-inline:2rem;background:#b45309;border:3px solid #b45309;color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 6px #b45309}.mj-actions .mj-hint-btn:hover{background:#92400e;border-color:#92400e;box-shadow:0 0 0 3px #fff,0 0 0 6px #92400e}.mj-actions .mj-hint-btn:focus-visible{outline:4px solid var(--fgs-focus, #15549e);outline-offset:3px}.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-size-btn{background:#fff!important;color:#000!important;border:3px solid #000!important}[data-contrast=high] .mj-size-btn[aria-pressed=true],[data-contrast=high] .mj-size-btn.mj-size-active{background:#000!important;color:#fff!important;border-color:#000!important;box-shadow:0 0 0 3px #fff,0 0 0 6px #000!important}[data-contrast=high] .mj-howto{color:#000!important}[data-contrast=high] .mj-actions .mj-hint-btn{background:#7a3d00!important;border-color:#000!important;color:#fff!important;box-shadow:0 0 0 3px #fff,0 0 0 6px #000!important}[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}}