.mahjong-stage{width:100%;max-width:100%;color:#193347;container-type:inline-size;text-align:left}
.mj-scorebar{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin:0 0 .5rem;font-size:.94rem}.mj-scorebar strong{font-size:1.15rem}.mj-scorebar strong span{display:block;font-size:.72rem;font-weight:500;color:#526878}.mj-scorebar b{font-size:1.2rem}.mj-status{min-height:2.7em;text-align:center;margin:.4rem auto;max-width:64ch;font-size:.94rem;line-height:1.4}.mj-tools{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap}.mj-tools button{font:inherit;min-height:38px;padding:.4rem .75rem;border:1px solid #9dabb3;border-radius:6px;background:#fffaf0;color:#193347;cursor:pointer}.mj-tools button:disabled{opacity:.5;cursor:default}.mj-tools button:hover:not(:disabled){background:#f9dfae}.mj-view{display:flex;gap:.35rem;justify-content:center;align-items:center;flex-wrap:wrap;border:0;padding:.4rem;margin:0;font-size:.8rem}.mj-view legend{float:left;padding:.3rem;font-weight:600}.mj-view label{display:flex;align-items:center;gap:.25rem;min-height:32px;border:1px solid #b5c0c5;border-radius:5px;padding:0 .4rem;background:#fffdf7;cursor:pointer}.mj-view label:has(input:checked){border-color:#175d7c;background:#dcebf1}.mj-view input{accent-color:#175d7c;margin:0}.mj-scroll{max-width:100%;overflow:auto;overscroll-behavior-x:contain;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#315b70,#1d3c50);border:1px solid #214558;scrollbar-color:#7b9aa8 #1d3c50;outline-offset:3px}.mj-board{--mj-w:min(calc((100cqw - 26px)/15.25),max(18px,calc((100svh - 270px)/12.036)));--mj-h:calc(var(--mj-w)*1.36);position:relative;width:calc(var(--mj-w)*15.25);height:calc(var(--mj-h)*8.85);margin:0 auto;min-height:160px;isolation:isolate}.mahjong-stage:has(input[value="large"]:checked) .mj-board{--mj-w:max(48px,calc((100cqw - 26px)/15.25));margin-inline:auto}.mahjong-stage:has(input[value="largest"]:checked) .mj-board{--mj-w:max(64px,calc((100cqw - 26px)/15.25));margin-inline:auto}.mj-board .mj-tile{position:absolute;left:calc(var(--mj-x)*var(--mj-w) + 4px);top:calc(var(--mj-y)*var(--mj-h));width:var(--mj-w);height:var(--mj-h);min-width:0;min-height:0;display:block;padding:1px;margin:0;border:1px solid #afad9b;border-radius:calc(var(--mj-w)*.09);box-shadow:2px 3px 0 #afa387,3px 5px 1px #132e3bb0;background:linear-gradient(130deg,#fffef6,#f5edd9);color:#17465c;cursor:pointer;touch-action:manipulation;transition:filter .1s,outline .1s;overflow:visible}.mj-tile svg{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}.mj-tile.is-blocked{background:linear-gradient(130deg,#e1dece,#c9c4b4);box-shadow:2px 3px 0 #827c6e,3px 5px 1px #132e3bb0}.mj-tile.is-covered{background:#c2bcaa}.mj-tile.is-free:hover{filter:brightness(1.08);outline:2px solid #b9dfed;outline-offset:-3px}.mj-tile.is-selected{background:#ffe195;outline:3px solid #f2a329;outline-offset:-3px;box-shadow:2px 3px 0 #a77933,3px 5px 1px #132e3bb0}.mj-tile.is-hint{outline:3px dashed #c86b1d;outline-offset:-3px;background:#ffebbb}.mj-tile:focus-visible{outline:3px solid #73d8ff;outline-offset:-3px}.mj-badge{font:700 9px Arial,sans-serif;fill:#304e5a}.mj-family{font:700 6.5px Arial,sans-serif;text-anchor:middle;fill:#425b66;letter-spacing:.1px}.mj-number{font:700 28px Georgia,serif;fill:#1e4d6b;text-anchor:middle}.mj-character{font:700 31px 'Microsoft YaHei',serif;fill:#b92f46;text-anchor:middle}.mj-wind{font:700 28px Georgia,serif;fill:#1e4d6b;text-anchor:middle}.mj-wind-glyph{font:24px 'Microsoft YaHei',serif;fill:#1e4d6b;text-anchor:middle}.mj-dragon{font:700 43px 'Microsoft YaHei',serif;text-anchor:middle}.mj-help{font-size:.8rem;line-height:1.5;text-align:center;max-width:76ch;margin:.6rem auto;color:#526878}.mj-help span{display:block}.mj-finished{position:absolute;inset:30% 10% auto;background:#fff9e9;border:2px solid #d2a14a;border-radius:12px;text-align:center;padding:2rem 1rem;color:#173b4e}.mj-finished strong,.mj-finished span{display:block}.mj-finished strong{font-size:1.6rem;margin-bottom:.7rem}@media(max-width:600px){.mj-scorebar{gap:.5rem 1rem;font-size:.8rem}.mj-scorebar strong{font-size:1rem}.mj-status{font-size:.85rem;min-height:4.2em}.mj-tools button{font-size:.85rem;min-height:40px}.mj-help{font-size:.75rem}.mj-view{font-size:.75rem}.mj-view legend{width:100%;text-align:center}.mj-scroll{border-radius:8px}.mj-board .mj-tile{padding:0}.mj-finished{padding:1rem .4rem}.mj-finished strong{font-size:1.1rem}}@media(prefers-reduced-motion:reduce){.mj-tile{transition:none}}
