.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}.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-scroll{overflow-x:auto;overflow-y:hidden;padding:.5rem .5rem .75rem;-webkit-overflow-scrolling:touch}.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-face.mj-sprite.mj-bonus{background-image:url(/games/mahjong/bonus.webp);background-size:800% 100%;background-position:calc(var(--mj-col) / 7 * 100%) 0}.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-firsttip{text-align:center;font-size:1.15rem;font-weight:700;color:var(--fgs-ink, #161616);background:color-mix(in srgb,var(--fgs-hint, #b06a00) 12%,var(--fgs-surface, #fff));border:2px solid var(--fgs-hint, #b06a00);border-radius:var(--fgs-radius, 14px);max-width:46ch;margin:0 auto .9rem;padding:.6rem 1rem}.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:calc(var(--fgs-unit) * 1.4)}.mj-actions .mj-hint-btn{order:-1;min-height:64px;font-size:1.35rem;padding-inline:calc(var(--fgs-unit) * 2);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:var(--fgs-ink)!important}[data-contrast=high] .mj-firsttip{background:var(--fgs-surface)!important;color:var(--fgs-ink)!important;border-color:var(--fgs-line)!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}}.mj-size-note{display:none;margin:.4rem 0 0;font-size:.95rem;line-height:1.45;color:var(--fgs-muted, #555);max-width:46ch}@media(max-width:720px){.mj-scroll{padding-inline:0;margin-inline:calc(var(--fgs-unit) * -.75)}.mj-board{--mj-tw: clamp(2.2rem, 11vw, 2.8rem)}.mj-size-note{display:block}}@supports (container-type: inline-size){.mj-scroll{container-type:inline-size}.mj-board{--mj-cap: 3.9rem;--mj-fit: calc((100cqw - var(--mj-maxlayer) * var(--mj-lift) - .6rem) * 2 / var(--mj-cols));--mj-tw: clamp(2.2rem, var(--mj-fit), var(--mj-cap))}@media(max-width:720px){.mj-board{--mj-cap: 2.8rem}}@supports (width: calc(sign(1px)*1px)){.mj-board{--mj-tw: min( var(--mj-cap), calc(2.2rem + max(0, sign(var(--mj-fit) - 44px)) * (var(--mj-fit) - 2.2rem)) )}}}body.game-page.focus-mode .mj-howto,body.game-page.focus-mode .mj-firsttip,body.game-page.focus-mode .mj-size-note,body.game-page.focus-mode .mj-toolbar-label,body.game-page.focus-mode .mj-size-sub{display:none}body.game-page.focus-mode .mj-game{display:flex;flex-direction:column;min-height:var(--fm-h)}body.game-page.focus-mode .mj-toolbar{order:0;flex:none;gap:.4rem .75rem;margin:0 0 .25rem;padding:0;border:0}body.focus-mode .mj-toolbar [data-new]{order:-1}body.focus-mode .mj-toolbar .mj-count{order:0}body.focus-mode .mj-toolbar .mj-size-row{order:1}body.focus-mode .mj-size-btn{min-height:48px;padding:.3rem .9rem}body.game-page.focus-mode .mj-status{order:2;flex:none;min-height:1.7rem;margin:0;padding:.15rem .5rem;font-size:1.05rem;line-height:1.3}body.game-page.focus-mode .mj-actions{order:3;flex:none;gap:.6rem;margin:.2rem 0 0;padding:.3rem 0 .5rem;position:sticky;bottom:0;z-index:3;background:var(--fgs-paper, #fff)}body.focus-mode .mj-actions button{min-height:48px}body.focus-mode .mj-actions .mj-hint-btn{min-height:52px}body.game-page.focus-mode .mj-scroll{order:1;flex:1 1 0;min-height:200px;display:flex;overflow:auto;padding:4px;margin-inline:0}body.game-page.focus-mode .mj-board{flex:none;margin:auto;--mj-tw: clamp(44px, min(11vw, calc((var(--fm-h) - 9rem) / (var(--mj-rows) * .6945))), 3.9rem)}@supports (container-type: size){body.game-page.focus-mode .mj-scroll{container-type:size}body.game-page.focus-mode .mj-board{--mj-cap: 3.9rem;--mj-fit-w: calc((100cqw - var(--mj-maxlayer) * var(--mj-lift) - .6rem) * 2 / var(--mj-cols));--mj-fit-h: calc((100cqh - var(--mj-maxlayer) * var(--mj-lift) - .6rem) / (var(--mj-rows) * .6945));--mj-tw: min(var(--mj-cap), max(44px, min(var(--mj-fit-w), var(--mj-fit-h))))}@media(min-width:1000px)and (min-height:700px){body.game-page.focus-mode .mj-board{--mj-cap: 5rem}}}@media(max-width:700px),(max-height:500px){body.game-page.focus-mode .mj-toolbar{padding-right:60px}}body.focus-mode .mj-size-row{flex-wrap:nowrap;max-width:100%;overflow-x:auto;padding:3px 6px 6px}body.focus-mode .mj-size-btn,body.focus-mode .mj-toolbar [data-new]{flex:none;white-space:nowrap}