/* Keep the jade table; give real Mahjong faces and alternative decompositions room. */
.direction-wall{margin-top:15px;padding:14px 15px 10px;border:1px solid #8ea88150;border-radius:8px;background:#082b244f}
.direction-heading,.direction-heading>div{display:flex;align-items:center;gap:15px}.direction-heading{justify-content:space-between;margin-bottom:12px}.direction-heading b{font-size:12px;letter-spacing:2px;color:#d0ddbd}.direction-heading span{font-size:10px;color:#a8bba0}.direction-heading strong{font:700 16px var(--mono);color:#efdbab}.direction-heading small{font-size:9px;color:#a8bba0}
.direction-piles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.direction-pile{display:flex;align-items:center;gap:11px;min-width:0;position:relative;text-align:left;border:1px solid #718f736e;border-radius:6px;padding:10px 11px;background:linear-gradient(140deg,#30583f66,#153b30);transition:background .2s,border-color .2s}
.direction-pile:hover,.direction-pile:focus-visible{background:#375b40;border-color:#dac385;outline-offset:4px}.direction-pile.last-drawn{border-color:#c6ae70;background:linear-gradient(140deg,#685e3445,#28492f);box-shadow:inset 0 1px #e5d19620}.direction-pile.inspecting{outline:2px solid #ecd397;outline-offset:2px}.direction-pile.exhausted{background:#1a3529}
.direction-token{display:block;flex:0 0 31px;width:31px;height:43px;padding:2px;background:#f3e4be;border:1px solid #eee5cc;border-radius:3px;box-shadow:0 3px #ada88c,0 5px #09271f}.direction-token svg{width:100%;height:100%}
.pile-summary{min-width:0;flex:1}.pile-summary>b{display:flex;align-items:baseline;justify-content:space-between;gap:5px;font-size:10px;color:#c4d2b7;font-weight:400}.pile-summary strong{font:700 21px var(--mono);color:#e5d5ab}.pile-summary>small{display:block;font-size:8px;color:#a2b69b;margin-top:5px}.last-drawn .pile-summary>small{color:#f1d992}.pile-backs{display:flex;gap:2px;height:20px;margin:5px 0 1px}.pile-backs .wall-stack{height:11px;min-width:3px;max-width:12px}.pile-backs .wall-stack b{border-radius:2px;box-shadow:0 2px #c2bea2,0 3px #092b24}.pile-backs .wall-stack b:first-child{transform:translateY(3px)}.pile-backs .wall-stack b:last-child:after{inset:2px}
.draw-receipt{display:flex;align-items:center;gap:12px;min-height:43px;padding-top:11px;font-size:9px;color:#a8bba0}.draw-receipt>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.draw-receipt>div>i{font-style:normal;opacity:.6}.draw-direction{display:flex;align-items:center;gap:7px}.draw-direction>b{display:grid;place-items:center;width:23px;height:28px;border-radius:3px;background:#e8d6ac;color:#294c3b;font:700 18px 'Songti SC',serif;box-shadow:0 2px #8e9476}.draw-direction small{font-size:9px;color:#d8d7b3}.draw-receipt>span:first-child{flex-shrink:0}.direction-note{font-size:9px;line-height:1.7;color:#93ac92;margin-top:8px}
.direction-indicator{display:flex;align-items:center;gap:7px;margin-left:auto}.direction-indicator .hand-preview-tile{width:24px;height:34px;padding:2px}.direction-indicator .tile-top{display:none}.direction-indicator .tile-face{height:27px}.direction-indicator small{font-size:9px;color:#d5c695}
.pile-inspector{margin-top:13px;padding:15px 0 2px;border-top:1px solid #809d7163}.pile-inspector>header{display:flex;justify-content:space-between;align-items:center;gap:12px}.pile-inspector h3{font-size:13px;color:#e7d8b1;font-weight:500}.pile-inspector h3 strong{font:700 18px var(--mono)}.pile-inspector>p{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:9px;color:#b8c8aa;line-height:1.8;margin:8px 0 14px}.pile-inspector>p>b{font-weight:500;color:#e2cca1}.pile-inspector .mini-button{padding:5px 10px;font-size:9px}
.pile-suit{display:flex;align-items:center;gap:10px;margin-bottom:12px}.pile-suit>span{font:700 14px 'Songti SC',serif;color:#b9c6ab;flex:0 0 15px}.pile-face-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;flex:1;min-width:0}.pile-face{display:flex;align-items:center;flex-direction:column;padding:6px 3px 5px;min-width:0;border:1px solid #4f755650;border-radius:5px;background:#14392b5c}.pile-face.present{background:#41604466;border-color:#b4c28795}.pile-face-art{width:30px;height:40px;background:#eddfbd;border-radius:2px;padding:2px;box-shadow:0 2px #a5a58e}.pile-face-art svg{width:100%;height:100%}.pile-face.absent .pile-face-art{opacity:.24;filter:grayscale(1)}.copy-count{font:700 12px var(--mono);margin:7px 0 5px;color:#e6d4a8}.copy-count small{font-size:8px;color:#9db28d}.pile-face.absent .copy-count{color:#879a85}.copy-marks{display:flex;gap:3px}.copy-mark{display:inline-block;width:6px;height:8px;border:1px solid #78917a5c;border-radius:1px;background:#183b2e}.copy-mark.present{background:#efd092;border-color:#f1ddb0;box-shadow:0 0 4px #dec08030}.pile-inspector>p .copy-mark{flex-shrink:0}
.v4 .dealing-ghost{position:fixed!important;z-index:60;pointer-events:none!important;margin:0!important;max-width:none!important;min-width:0!important;transform-origin:center}
@media(max-width:1000px){.direction-pile{padding:9px 6px;gap:7px}.direction-token{width:25px;flex-basis:25px;height:36px}.pile-summary strong{font-size:18px}.direction-piles{gap:7px}.direction-wall{padding:11px 10px 8px}.pile-face-art{width:26px;height:35px}.pile-face-grid{gap:4px}}
@media(max-width:700px){.direction-pile{flex-direction:column;gap:5px;padding:8px 4px 6px}.pile-summary{width:100%}.pile-summary>b{justify-content:center;gap:4px;font-size:9px}.pile-summary strong{font-size:18px}.pile-summary>small{text-align:center;font-size:8px}.pile-backs{justify-content:center;height:13px;margin:3px 2px 1px}.pile-backs .wall-stack{max-width:10px;flex:0 1 10px;height:7px}.direction-heading{gap:7px;flex-wrap:wrap}.direction-heading small{font-size:8px}.direction-heading>div{gap:10px}.direction-heading b{font-size:11px}.direction-note{font-size:8px}.draw-receipt{gap:8px;font-size:8px}.draw-direction small{font-size:8px}.direction-wall{padding:11px 8px 8px}.direction-piles{gap:6px}.pile-suit{gap:4px}.pile-suit>span{font-size:12px;flex-basis:13px}.pile-face-grid{gap:3px}.pile-face{padding:4px 1px}.pile-face-art{width:22px;height:30px;padding:1px}.copy-count{font-size:11px}.copy-count small{font-size:7px}.copy-marks{gap:2px}.copy-mark{width:4px;height:7px}.pile-inspector>p{font-size:8px;display:block}.pile-inspector>p .copy-mark{margin-right:3px}.pile-inspector h3{font-size:11px}.direction-indicator{gap:4px}.direction-indicator small{font-size:8px;max-width:65px;line-height:1.5}}
.v4 .game-board{padding-top:18px}
.v4 .center-stage{min-height:230px;padding:17px 0 14px}
.v4 .hand-title h2{letter-spacing:1px}
.v4 .meld-board{grid-template-columns:repeat(var(--meld-columns,3),minmax(0,1fr));max-width:690px}
.v4 .mini-tile{display:inline-flex;width:27px;height:36px;padding:2px;flex-shrink:0}
.v4 .meld-slot>div{min-height:36px}
.v4 .meld-slot>span{font-size:10px}
.v4 .mahjong-tile .tile-face{height:56px}
.v4 .mahjong-tile{height:84px;max-width:63px}
.v4 .tile-rack{gap:28px 10px;max-width:650px;margin:auto;grid-template-columns:repeat(7,minmax(0,1fr));padding:28px 4px 22px}
.v4 .classic-rack{grid-template-columns:repeat(9,minmax(0,1fr));max-width:790px}
.v4 .tile-top{opacity:.78}
.v4 .recognition{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 13px;margin:10px auto 7px;font-size:10px;color:#d2dfc1}
.v4 .recognition>small{flex-basis:100%;font-size:9px;color:#a7bea0}
.v4 .recognition .mini-button{font-size:10px;padding:5px 9px;border-color:#c7ab70;color:#f1d69e}
.wall-area{display:flex;align-items:center;gap:24px;min-height:66px;margin-top:15px;padding:9px 15px;border:1px solid #97b18835;border-radius:7px;background:#082b2438}
.wall-heading{display:flex;flex-direction:column;gap:7px;flex-shrink:0}
.wall-heading b{font-size:11px;letter-spacing:2px;color:#b9cbb0}.wall-heading strong{font:700 17px var(--mono);letter-spacing:0;color:#efddab;margin-left:8px}
.wall-heading small{font-size:9px;color:#91aa91}
.wall-display{display:flex;align-items:center;gap:13px;min-width:0;flex:1}
.wall-stacks{display:flex;gap:3px;align-items:center;flex:1;min-width:0;height:34px;overflow:hidden;padding:3px 0 7px}
.wall-stack{position:relative;display:block;flex:1;max-width:20px;min-width:6px;height:23px}
.wall-stack b{position:absolute;inset:0;display:block;border:1px solid #5fa48a;border-radius:3px;background:linear-gradient(115deg,#398c75,#165346);box-shadow:0 3px #e2ddc4,0 5px #787e66}
.wall-stack b:first-child{transform:translateY(5px)}
.wall-stack b:last-child:after{content:'';position:absolute;inset:3px;border:1px solid #bdd5b23d;border-radius:1px}
.wall-source{flex:0 0 29px;width:29px;height:40px;filter:drop-shadow(0 4px 0 #082c24)}
.wall-unknown{flex-shrink:0;text-align:center;font-size:8px;line-height:1.6;color:#91aa91}
.wall-drawing .wall-source{animation:wall-glow .65s ease-out}
.indicator-tile{display:flex;gap:9px;align-items:center;max-width:150px}.indicator-tile .hand-preview-tile{width:31px;height:45px;padding:2px}.indicator-tile .tile-top{display:none}.indicator-tile .tile-face{height:36px}.indicator-tile small{font-size:9px;color:#e5ce90;line-height:1.7}
.alternative-list{display:flex;flex-direction:column;gap:12px}
.alternative-option{text-align:left;background:#173b30;border:1px solid #869b77;border-radius:7px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;line-height:1.7}
.alternative-option>b{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:13px;color:#f0ddb4}.alternative-option strong{font:700 19px var(--mono);white-space:nowrap;color:#ead192}
.alternative-option>span{font-size:11px;color:#c7d5bd}.alternative-option>small{font-size:10px;color:#a9c1a2}
.alternative-option:hover{background:#28513e;border-color:#e4cc8c}
.tile-atlas{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:20px 10px;padding:5px 0 10px}
.tile-atlas figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:13px}.tile-atlas .hand-preview-tile{width:46px;height:68px}.tile-atlas figcaption{font-size:10px;color:#c0d0b5}
.welcome-footer{flex-wrap:wrap}
.playable-patterns{max-width:690px;margin:15px auto 8px;padding:12px;border:1px solid #89a68a50;border-radius:7px;background:#0c2d263d;text-align:left}
.playable-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.playable-heading h3{font-size:11px;letter-spacing:2px;color:#d5dfc2}.playable-heading>span{font-size:9px;color:#a6bfa1}.playable-heading .mini-button{font-size:9px;padding:5px 8px}
.playable-controls{display:flex;align-items:center;gap:7px}.playable-controls>span{font-size:9px;color:#a6bfa1}
.pattern-hints-off{max-width:690px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px auto 8px;padding:9px 12px;border:1px solid #89a68a35;border-radius:6px;background:#0c2d2626}.pattern-hints-off>span{font-size:10px;color:#a6b89f}.pattern-hints-off .mini-button{font-size:10px;padding:6px 10px}
.playable-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.playable-pattern{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:54px;padding:7px 9px;border:1px solid #71897745;border-radius:5px;background:#142e2770;color:#819588;text-align:left;line-height:1.2}
.playable-pattern>span{font-size:10px;white-space:nowrap}.playable-pattern i{font-size:7px;font-style:normal;margin-right:4px}.playable-pattern strong{font:800 19px var(--mono)}.playable-pattern small{font:9px var(--font);font-weight:400}
.playable-pattern.available{background:#385d4590;border-color:#bcce91;color:#eff0cc;box-shadow:inset 0 1px #dbe7b02b}.playable-pattern.available strong{color:#f2d38c}.playable-pattern.available i{color:#d4e998}
.playable-pattern.available:hover{background:#4b7052;border-color:#ffe2a0;transform:translateY(-1px)}.playable-pattern.current{background:#6b6135a6;border-color:#ffdf8f;box-shadow:0 0 0 1px #e2bc6570}.playable-pattern.current i{color:#ffdf8f}.playable-pattern:disabled{opacity:1;cursor:default}
.playable-patterns>p{font-size:9px;color:#aabfa3;line-height:1.7;margin:9px 0 0}.modal-body>.playable-patterns{margin-top:0}
.playable-option{border-color:#b8c98b;background:#35563f}.playable-option>b{display:flex;align-items:center;justify-content:space-between;gap:8px}.playable-option>b>strong{font:800 17px var(--mono);color:#efd18c;white-space:nowrap}.playable-option .option-tiles{display:flex;flex-wrap:wrap;gap:4px;padding:5px 0 6px}.playable-option>small{display:flex;gap:9px;flex-wrap:wrap}.playable-option .mini-tile{width:25px;height:34px}
@media(max-width:600px){.playable-patterns{padding:10px 9px}.playable-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.playable-pattern{padding:7px 9px;min-height:51px}.playable-pattern strong{font-size:18px}.playable-patterns>p{font-size:8px}.playable-option .mini-tile{width:25px;height:34px}}
@keyframes wall-glow{40%{filter:drop-shadow(0 0 9px #e4cf89);transform:translateY(-4px)}}
@media(min-width:1350px){.v4 .compact-rack{grid-template-columns:repeat(14,minmax(0,1fr));max-width:1000px;gap:7px}.v4 .classic-rack{grid-template-columns:repeat(18,minmax(0,1fr));max-width:1120px;gap:6px}}
@media(max-width:850px){.v4 .tile-rack{gap:28px 7px}.v4 .mahjong-tile{height:78px;max-width:57px}.v4 .mahjong-tile .tile-face{height:52px}.wall-area{gap:14px;padding:9px 10px}.wall-heading small{display:none}.wall-display{gap:9px}.v4 .mini-tile{width:25px;height:34px}.tile-atlas{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:600px){.v4 .tile-rack{gap:27px 7px;max-width:390px}.v4 .mahjong-tile{height:72px}.v4 .mahjong-tile .tile-face{height:49px}.v4 .classic-rack{grid-template-columns:repeat(6,minmax(0,1fr))}.v4 .mini-tile{width:23px;height:31px;padding:1px}.v4 .meld-board{gap:6px}.v4 .hand-title h2{font-size:21px}.v4 .hand-title{flex-wrap:wrap}.wall-area{gap:10px;margin-top:12px}.wall-heading b{font-size:10px;letter-spacing:0}.wall-heading strong{font-size:16px;margin-left:5px}.wall-stacks{gap:2px}.wall-source{flex-basis:24px;width:24px;height:34px}.wall-unknown{font-size:7px}.wall-display{gap:8px}.indicator-tile small{font-size:8px;max-width:50px}.tile-atlas{grid-template-columns:repeat(5,minmax(0,1fr));gap:19px 8px}.tile-atlas .hand-preview-tile{width:42px;height:63px}.tile-atlas .tile-face{height:41px}.alternative-option{padding:11px}.alternative-option>b{font-size:12px}.alternative-option strong{font-size:17px}.v4 .recognition{font-size:9px}.v4 .recognition>small{font-size:8px}.v4 .score-steps>span{padding:2px 0}.v4 .chicken-strip{font-size:9px}}