.mj-app{max-width:1100px;margin:auto;padding:20px;color:#fff4d6}.mj-app h1{font-family:Georgia,serif;font-size:clamp(30px,5vw,48px);margin:0 0 8px}.mj-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0}.mj-controls button,.mj-controls select{font:inherit;min-height:44px;padding:8px 16px;border-radius:9px;border:1px solid #cfb675;background:#fff4d6;color:#134c39}.mj-controls label{display:flex;align-items:center;gap:8px}.mj-controls :disabled{opacity:.5}.mj-scroll{overflow:auto;max-width:100%;border-radius:14px;background:#093e2e;box-shadow:inset 0 0 35px #001c1780;padding:8px;overscroll-behavior-x:contain}.mj-board{position:relative;margin:auto}.mj-tile{position:absolute;width:50px;height:65px;border:1px solid #b09b68;border-radius:6px;background:#fff8dd;box-shadow:2px 4px 0 #b5a57b;color:#13553f;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;padding:2px;touch-action:manipulation}.mj-face{font:bold 28px Georgia,serif;line-height:32px}.mj-label{font:9px Arial,sans-serif;line-height:11px;max-width:46px;overflow-wrap:anywhere}.mj-tile[data-suit=Characters],.mj-tile[data-suit="Red dragon"]{color:#a62732}.mj-tile[data-suit=Dots],.mj-tile[data-suit=Seasons]{color:#1a5189}.mj-tile.blocked{background:#d8d0b7;color:#555849;cursor:default}.mj-tile.selected{background:#ffe599;outline:3px solid #f7b832;outline-offset:-3px}.mj-tile.hint{outline:3px dashed #a14bc6;outline-offset:-4px;background:#f8dcff}.mj-app button:focus-visible,.mj-app select:focus-visible,.mj-scroll:focus-visible{outline:3px solid #fdba39;outline-offset:3px}#mj-status{min-height:3em;line-height:1.5}#mj-count{font-weight:bold}.mj-help{font-size:14px;line-height:1.6}@media(max-width:600px){.mj-app{padding:12px 4px}.mj-controls{gap:8px}.mj-controls button{flex:1}.mj-controls label{width:100%}}
body{margin:0;background:#06452f;font-family:Arial,sans-serif;color:#fff4d6}.mj-app>p{margin:8px 0}.mj-app #mj-status{min-height:2.8em}.mj-controls{margin:14px 0}.mj-app .mj-help{font-size:14px}

/* Blueeyedrat pixel tiles: 64px cells, 42 × 58px tile faces. */
.mj-face{display:block;width:42px;height:58px;flex:none;background-image:url("mahjong-tiles.png");background-repeat:no-repeat;image-rendering:pixelated}.mj-tile{padding:2px;border-radius:4px}.mj-tile.blocked .mj-face{filter:brightness(.72) saturate(.7)}.mj-tile.selected{outline-offset:0}.mj-tile.hint{outline-offset:0}