*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#252525;color:#ededed;font-family:Arial,'Hiragino Kaku Gothic ProN',sans-serif;color-scheme:dark}#app{position:absolute;transform-origin:top left;overflow:hidden;background:#252525}#stage,.screen,.canvas-mount{position:absolute;inset:0}.screen{overflow:hidden}.canvas-mount canvas{display:block;touch-action:none}button,select{font:inherit;font-size:13px;color:#ededed;background:#373737;border:1px solid #6b6b6b;border-radius:6px;padding:10px 13px;cursor:pointer}button[aria-pressed=true],#apply{background:#cfcfcf;color:#262626;border-color:#cfcfcf}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #e0e0e0;outline-offset:2px}#toolbar{position:absolute;right:10px;top:10px;display:flex;gap:7px;z-index:3}.game-top{position:absolute;left:12px;top:19px;z-index:2;font-size:14px;pointer-events:none;text-shadow:0 1px 5px #000000}.game-top small{font-size:10px;margin-left:6px}.dock{position:absolute;bottom:6px;left:4px;right:4px;display:flex;align-items:end;justify-content:center;gap:1px;pointer-events:none;transition:opacity .25s;z-index:2}.dock img{width:calc((100% - 24px)/14);aspect-ratio:3/4;object-fit:cover;border-radius:2px;box-shadow:0 3px 0 #b3b3b3}.dock img:last-child{margin-left:9px}.screen[data-state=win] .dock,.screen[data-state=open] .dock{opacity:0}.reset-camera{display:none;position:absolute;right:10px;bottom:100px;z-index:3}.screen.moved .reset-camera{display:block}[hidden]{display:none!important}#modal{position:absolute;inset:0;z-index:10;background:#00000088;display:grid;place-items:center;padding:12px}#modal section{background:#2d2d2d;border:1px solid #595959;border-radius:12px;width:min(620px,100%);max-height:100%;overflow:auto;padding:18px;overscroll-behavior:contain}h2{font-size:18px;margin:0 0 18px}.controls,.sliders{display:flex;flex-wrap:wrap;gap:18px}.sliders{margin-top:20px}fieldset{border:0;margin:0;padding:0;min-width:0}legend{font-size:12px;color:#c3c3c3;margin-bottom:8px}.segments{display:flex;flex-wrap:wrap;gap:5px}.sliders>label:not(.check){width:100%;font-size:13px}.sliders output{float:right;color:#cfcfcf}input[type=range]{width:100%;display:block;accent-color:#cfcfcf;margin-top:12px}.check{font-size:13px}.modal-actions{position:sticky;bottom:-18px;background:#2d2d2d;padding:16px 0 4px;display:flex;justify-content:flex-end;margin-top:12px}select{max-width:100%}@media(min-width:600px){.sliders>label:not(.check){width:calc(50% - 9px)}}
.top-wall{position:absolute;top:64px;left:12px;right:12px;display:grid;grid-template-columns:repeat(17,minmax(0,1fr));gap:3px 0;z-index:2;pointer-events:none}.wall-stack{position:relative;aspect-ratio:21/38}.wall-stack i{position:absolute;width:100%;height:74%;border:1px solid #666666;border-radius:2px;background:linear-gradient(#cdcdcd 0%,#b8b8b8 82%,#efefef 83%);box-shadow:inset 1px 1px #ffffff77,inset -1px 0 #5a5a5a66,0 2px 2px #00000066}.wall-stack .lower{top:26%}.wall-stack .upper{top:0}.wall-stack .dead{border-color:#a3a3a3}.wall-stack[data-empty=true]{opacity:.15}#take-tile{font-size:12px;padding:10px 7px}

.top-wall{width:calc(100% - 24px);max-width:366px;left:50%;right:auto;transform:translateX(-50%)}

#toolbar{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:20}#adjust{background:#cfcfcf;color:#272727;border-color:#cfcfcf;font-weight:700;min-height:44px}#toolbar[inert]{visibility:hidden}.canvas-mount canvas{pointer-events:none;touch-action:auto}.reset-camera{display:none!important}

html,body,#app,#stage,.screen,button,input,select,label{touch-action:manipulation}.dock{pointer-events:auto}.dock .hand-tile{width:calc((100% - 24px)/14);padding:0;margin:0;border:0;border-radius:2px;background:none;flex:none;line-height:0;transition:transform .14s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.dock .hand-tile:last-child{margin-left:9px}.dock .hand-tile img{display:block;width:100%;margin:0!important;pointer-events:none;-webkit-user-drag:none}.dock .hand-tile[aria-pressed=true]{transform:translateY(-12px);background:none}.screen[data-state=win] .dock,.screen[data-state=open] .dock{pointer-events:none}@media(prefers-reduced-motion:reduce){.dock .hand-tile{transition:none}}

.top-wall{grid-template-columns:repeat(var(--wall-columns,14),minmax(0,1fr))}.wall-stack .indicator{background:#efefef;border-color:#959595}.wall-stack .indicator img{width:100%;height:100%;object-fit:fill;display:block;border-radius:1px}
/* Keep native text/image selection and iOS long-press callouts out of the game UI. */
html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
img,canvas{-webkit-user-drag:none}

.action-buttons{position:absolute;right:8px;bottom:65px;z-index:3;display:flex;gap:5px}.action-buttons button{min-width:54px;min-height:40px;font-weight:700;padding:9px 12px}.action-buttons button:nth-child(1){background:#757575}.action-buttons button:nth-child(2),.action-buttons button:nth-child(3){background:#696969}.action-buttons button[aria-pressed=true]{background:#cfcfcf;color:#272727;transform:translateY(-3px)}.screen[data-state=win] .action-buttons,.screen[data-state=open] .action-buttons{display:none}

.seat-info{position:absolute;z-index:2;display:flex;align-items:center;gap:6px;font-size:13px;color:#f1f1f1;pointer-events:none;white-space:nowrap;text-shadow:0 1px 3px #000000}.seat-wind{width:21px;height:23px;display:grid;place-items:center;background:#434343;border-radius:3px;font-weight:700}.seat-0 .seat-wind{background:#616161}.seat-score{font-variant-numeric:tabular-nums;font-weight:500}

.action-buttons{display:none!important}#open-hands{min-height:44px;background:#cfcfcf;color:#272727;border-color:#cfcfcf;font-weight:700}

#toolbar{max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:flex-end}#visual-style{position:fixed;left:10px;top:max(65px,calc(env(safe-area-inset-top) + 55px));min-height:40px;background:#363636;font-size:12px}

.seat-0 .seat-wind{background:#4f4f4f;color:#e6e6e6}.seat-1 .seat-wind{background:#595959;color:#ededed}.seat-2 .seat-wind{background:#4f4f4f;color:#e8e8e8}.seat-3 .seat-wind{background:#494949;color:#e3e3e3}

/* Arena-style chrome. Tile buttons/images intentionally retain their original rendering. */
html,body,#app{background:#131313;color:#ffffff;font-family:'Arial Black','Hiragino Kaku Gothic ProN',sans-serif}
.screen{background:linear-gradient(125deg,transparent 0 67%,#ffffff04 67% 77%,transparent 77%),linear-gradient(155deg,#242424 0%,#151515 65%,#0a0a0a 100%)}
#toolbar{gap:5px}
#toolbar>button{border:0;border-radius:0;clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);font-weight:900;min-height:44px;padding:11px 16px;letter-spacing:-.03em;box-shadow:none}
#open-hands{background:#f7f7f7;color:#131313}
#open-hands[aria-pressed=true]{background:#cdcdcd;color:#111111}
#take-tile{background:#5c5c5c;color:#ffffff;font-size:13px}
#take-tile:disabled{background:#3d3d3d;color:#8a8a8a;cursor:default}
#toolbar>button:active{filter:brightness(1.22)}
#visual-style{border:0;border-left:5px solid #cdcdcd;border-radius:0;background:#090909;color:#ffffff;font-weight:800;padding:10px 26px 10px 10px;min-height:38px;box-shadow:3px 3px 0 #ffffff12}
.game-top{font-weight:900;font-size:15px;letter-spacing:-.04em;text-shadow:2px 2px 0 #000000}.game-top small{font-size:10px;font-weight:700;color:#bfbfbf}
.seat-info{gap:5px;min-height:30px;padding:0 6px 0 0;background:#0b0b0b;clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%);text-shadow:none}
.seat-wind{width:26px;height:30px;border-radius:0;font-size:18px;font-weight:900;flex:none}
.seat-0 .seat-wind{background:#666666;color:#ffffff}.seat-1 .seat-wind{background:#cdcdcd;color:#121212}.seat-2 .seat-wind{background:#8c8c8c;color:#ffffff}.seat-3 .seat-wind{background:#818181;color:#ffffff}
.seat-score{font-size:13px;font-weight:900;letter-spacing:-.035em;color:#ffffff}
#modal section{background:#1b1b1b;border:0;border-top:5px solid #cdcdcd;border-radius:0}.modal-actions{background:#1b1b1b}
#modal button,#modal select{border-radius:0;font-weight:800;background:#363636;border-color:#4e4e4e;color:#ffffff}#modal button[aria-pressed=true],#modal #apply{background:#cdcdcd;color:#111111}
#modal legend{color:#dcdcdc;font-weight:800}#modal input[type=range]{accent-color:#cdcdcd}

/* Bright ink-inspired trial: compact seat markers and playful, rounded controls. */
html,body,#app{background:#f0f0f0;color:#2a2a2a;font-family:'Hiragino Maru Gothic ProN','Arial Rounded MT Bold','Hiragino Kaku Gothic ProN',sans-serif}
.screen{background:radial-gradient(circle at 102% 83%,#d1d1d1 0 12%,transparent 12.2%),radial-gradient(circle at -7% 8%,#e6e6e6 0 14%,transparent 14.2%),radial-gradient(circle at 94% 13%,#a1a1a122 1px,transparent 1.5px),#f0f0f0;background-size:auto,auto,12px 12px,auto}
#toolbar{gap:9px;top:max(12px,env(safe-area-inset-top))}
#toolbar>button{clip-path:none;border-radius:18px 15px 19px 14px;border:2px solid #2a2a2a;font-weight:900;letter-spacing:0;padding:9px 13px;box-shadow:0 3px 0 #2a2a2a;min-height:42px}
#open-hands{background:#e2e2e2;color:#2a2a2a}#open-hands[aria-pressed=true]{background:#dddddd;color:#2a2a2a}
#take-tile{background:#555555;color:#ffffff}#take-tile:disabled{background:#c7c7c7;color:#7c7c7c;border-color:#a5a5a5;box-shadow:0 3px 0 #a5a5a5}
#toolbar>button:active{transform:translateY(2px);box-shadow:0 1px 0 #2a2a2a;filter:none}
.game-top{color:#2a2a2a;text-shadow:none;font-weight:900;letter-spacing:0}.game-top small{color:#6e6e6e}
.seat-info{width:90px;height:30px;min-height:30px;gap:5px;padding:0 7px 0 0;background:#fdfdfd;border:1px solid #d8d8d8;border-radius:9px;clip-path:none;filter:none;box-shadow:0 2px 0 #d1d1d1;color:#2a2a2a;overflow:hidden}
.seat-info::before,.seat-info::after{display:none}
.seat-info .seat-wind{width:28px;height:30px;flex:none;font-size:19px;font-weight:900;transform:none;clip-path:none;border:0;border-radius:8px 5px 8px 5px;text-shadow:none;padding:0}
.seat-0 .seat-wind{background:#666666;color:white}.seat-1 .seat-wind{background:#d4d4d4;color:#2a2a2a}.seat-2 .seat-wind{background:#7b7b7b;color:white}.seat-3 .seat-wind{background:#656565;color:white}
.seat-info .seat-score{font-family:inherit;font-size:13px;font-weight:900;letter-spacing:-.025em;color:#2a2a2a;transform:none;padding:0;text-shadow:none}
#modal section,.modal-actions{background:#f0f0f0;color:#2a2a2a}#modal section{border:2px solid #2a2a2a;border-radius:18px}#modal button,#modal select{border-radius:10px;background:white;color:#2a2a2a}#modal legend{color:#4a4a4a}
.screen[data-state=play] .action-buttons{display:flex!important}
.action-buttons{gap:6px}
.action-buttons button{min-width:48px;min-height:40px;padding:8px 11px;border:2px solid #2a2a2a;border-radius:13px 16px 12px 15px;box-shadow:0 2px 0 #2a2a2a;font-family:inherit;font-size:13px;font-weight:900;color:#2a2a2a}
.action-buttons button:nth-child(1){background:#c9c9c9}
.action-buttons button:nth-child(2){background:#acacac}
.action-buttons button:nth-child(3){background:#e2e2e2}
.action-buttons button:nth-child(4){background:#fdfdfd}
.action-buttons button[aria-pressed=true]{background:#555555;color:#ffffff;transform:translateY(-3px)}
/* Mid-tone background separates ivory tiles without returning to black. */
html,body,#app{background:#adadad}
.screen{background:radial-gradient(circle at 102% 83%,#a9a9a9 0 12%,transparent 12.2%),radial-gradient(circle at -7% 8%,#c4c4c4 0 14%,transparent 14.2%),radial-gradient(circle at 94% 13%,#45454512 1px,transparent 1.5px),#adadad;background-size:auto,auto,12px 12px,auto}
/* Rhythm-game trial: sunny flat shapes, clean ink, and small tactile controls. */
html,body,#app{background:#bcbcbc;color:#353535;font-family:'Hiragino Maru Gothic ProN','Arial Rounded MT Bold',sans-serif;color-scheme:light}
.screen{background:linear-gradient(#dbdbdb 0 67px,transparent 67px),#bcbcbc}
.screen::before{content:'';position:absolute;left:calc(50% - 25px);top:89px;width:50px;height:50px;border:2px solid #424242;border-radius:50%;background:radial-gradient(ellipse at 37% 42%,#424242 0 2px,transparent 2.5px),radial-gradient(ellipse at 63% 42%,#424242 0 2px,transparent 2.5px),#f2f2f2;transform:rotate(-8deg);pointer-events:none}
.screen::after{content:'';position:absolute;left:calc(50% - 7px);top:115px;width:14px;height:7px;border-bottom:2px solid #424242;border-radius:0 0 50% 50%;pointer-events:none;transform:rotate(-8deg)}
#toolbar>button{border:2px solid #424242;border-radius:7px;box-shadow:0 3px 0 #424242;min-height:40px;padding:8px 11px;font-weight:700;color:#353535}
#open-hands{background:#fcfcfc}#open-hands[aria-pressed=true]{background:#b8b8b8;color:#353535}#take-tile{background:#898989;color:#ffffff}#toolbar>button:active{transform:translateY(3px);box-shadow:none}
.game-top{top:24px;color:#353535;font-size:14px;font-weight:700}.game-top small{color:#5d5d5d}
.seat-info{background:#f9f9f9;border:2px solid #424242;border-radius:5px;box-shadow:none;height:32px;min-height:32px;gap:5px;width:92px;overflow:visible}
.seat-info .seat-wind{border-radius:50%;width:28px;height:28px;border:1.5px solid #424242;font-size:18px;margin-left:-3px;color:#353535}
.seat-0 .seat-wind{background:#878787}.seat-1 .seat-wind{background:#cacaca}.seat-2 .seat-wind{background:#989898}.seat-3 .seat-wind{background:#ababab}
.seat-info .seat-score{font-weight:700;color:#353535;font-size:13px;letter-spacing:-.035em}
.action-buttons{gap:6px}.action-buttons button{border:2px solid #424242;border-radius:50%;min-width:48px;width:48px;height:44px;min-height:44px;padding:0;box-shadow:0 3px 0 #424242;color:#353535;font-weight:700}
.action-buttons button:nth-child(1){background:#c6c6c6}.action-buttons button:nth-child(2){background:#ababab}.action-buttons button:nth-child(3){background:#dedede}.action-buttons button:nth-child(4){background:#f9f9f9}
.action-buttons button[aria-pressed=true]{background:#f9f9f9;color:#353535;transform:translateY(3px);box-shadow:none}
#modal section,.modal-actions{background:#f9f9f9;color:#353535}#modal section{border:2px solid #424242;border-radius:7px}
/* Neutral layout mock. */
html,body,#app{background:#e3e3e3;color:#333333;font-family:Arial,'Hiragino Kaku Gothic ProN',sans-serif;color-scheme:light}
.screen{background:radial-gradient(ellipse at 42% 30%,#e9e9e9 0%,#e3e3e3 58%,#dddddd 100%);filter:grayscale(1)}
.screen::before,.screen::after{display:none}
#toolbar>button,.action-buttons button{background:#f8f8f8!important;color:#333333!important;border:1px solid #999999;border-radius:3px;box-shadow:none;clip-path:none;font-weight:400;letter-spacing:0;transform:none;min-height:38px;height:auto;padding:9px 12px}
#toolbar>button[aria-pressed=true],.action-buttons button[aria-pressed=true]{background:#c4c4c4!important;border-color:#555555;transform:none;box-shadow:none}
#toolbar>button:active,.action-buttons button:active{background:#d0d0d0!important;transform:none;box-shadow:none}
#toolbar>button:disabled{opacity:.45}#toolbar{gap:6px}
.game-top{color:#444444;font-size:14px;font-weight:400;text-shadow:none}.game-top small{color:#666666}
.seat-info{background:none;border:0;border-radius:0;box-shadow:none;padding:0;gap:7px;width:92px;overflow:visible}
.seat-info .seat-wind{background:#f4f4f4;color:#333333;border:1px solid #aaaaaa;border-radius:2px;margin:0;width:26px;height:26px;font-size:17px;font-weight:400}
.seat-info .seat-score{color:#333333;font-weight:400;font-size:13px;letter-spacing:0}
.action-buttons{gap:5px}.action-buttons button{width:auto;min-width:46px;font-size:13px}
#modal section,.modal-actions{background:#f3f3f3;color:#333333}#modal section{border:1px solid #999999;border-radius:3px}
#toolbar{max-width:228px}#toolbar>button{font-size:12px;padding:8px 10px}#third-rows,#trial-stage{min-height:32px!important;padding:6px 10px!important}

/* Color artwork on neutral mock tile bodies and UI. */
.screen{filter:none}
.dock img{box-shadow:0 3px 0 #bcbcbc,1px 5px 4px #0000001a}

/* Fit the actual phone viewport; reserve one compact control row and score row. */
#toolbar{max-width:calc(100% - 83px);gap:4px;flex-wrap:nowrap;right:8px;top:10px}
#toolbar>button,#trial-stage{font-size:11px;white-space:nowrap;min-height:32px!important;padding:7px 8px!important}
.game-top{left:8px;top:20px;font-size:12px}.game-top small{font-size:9px;margin-left:3px}
.seat-info{width:calc((100% - 16px)/4);gap:4px;height:28px;min-height:28px}
.seat-info .seat-wind{width:22px;height:24px;font-size:15px}.seat-info .seat-score{font-size:11px}
.action-buttons button{min-height:32px;height:32px;padding:5px 10px;font-size:12px}

#toolbar>button,#trial-stage{font-size:12px}.seat-info .seat-score{font-size:12px}
@media(max-width:350px){#toolbar>button,#trial-stage{font-size:11px}}

/* The player's hand remains in its fixed bottom dock in every view. */
.screen[data-state=open] .dock,.screen[data-state=win] .dock{opacity:1;pointer-events:auto}

/* Seat information follows its hand; no area plates behind the rivers. */
.seat-info{width:90px;height:28px;min-height:28px;gap:6px;background:none;border:0;box-shadow:none}
.seat-info .seat-wind{width:25px;height:27px;font-size:18px;background:#f4f4f4;border:1px solid #999999}
.seat-info .seat-score{font-size:14px;font-weight:600;letter-spacing:0;color:#333333}
/* Playable independent CPU table. */
#loading,#play-error{position:fixed;z-index:50;inset:40% 15px auto;text-align:center;padding:18px;background:#f6f6f6;border:1px solid #999999;color:#333333}
#toolbar{max-width:calc(100% - 100px)}
.game-top{font-size:12px;white-space:nowrap}
.dock .hand-tile:last-child{margin-left:0}.dock .hand-tile.drawn-tile{margin-left:8px}
.dock .hand-tile:disabled{opacity:1;cursor:default}.dock .hand-tile.unavailable{opacity:.45}
.dock .own-meld{display:flex;align-items:end;gap:0;width:calc((100% - 24px)/14*3);flex:none;margin-left:3px;border-bottom:2px solid #777777}
.dock .own-meld img{width:calc(100% / var(--meld-count));height:auto;aspect-ratio:3/4;box-shadow:none;border-radius:0}
.action-buttons{max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:flex-end}
.screen .action-buttons{display:flex!important}.screen .action-buttons:empty{display:none!important}
.action-buttons button{background:#f8f8f8!important;min-width:43px;padding:5px 8px}.action-buttons button[data-action=ron],.action-buttons button[data-action=tsumo],.action-buttons button[data-action=riichi]{border:2px solid #333333;font-weight:700}
.match-center{position:absolute;z-index:2;width:150px;height:0;transform:translateX(-50%);text-align:center;pointer-events:none;color:#333333}
.dora-list{position:absolute;bottom:39px;width:100%;display:flex;align-items:center;justify-content:center;gap:3px;font-size:11px}.dora-list img{height:25px;width:18.75px}
.turn-status{position:absolute;top:27px;width:100%;font-size:12px;font-weight:700;line-height:18px}
.hand-progress{position:absolute;top:47px;width:100%;font-size:11px;line-height:16px}
.active-seat .seat-wind{outline:2px solid #444444;outline-offset:1px}.is-riichi::after{display:block;content:'立直';position:absolute;top:26px;left:0;font-size:10px;color:#333333;background:#eeeeee;padding:1px 3px}
dialog{color:#333333;background:#f4f4f4;border:1px solid #888888;border-radius:5px;padding:18px;width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 30px);overflow:auto;font-family:inherit}dialog::backdrop{background:#00000066}dialog h2{font-size:20px;margin:0 0 16px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}dialog button{background:white;color:#333333;border:1px solid #999999;border-radius:3px}.result-tiles{display:flex;flex-wrap:wrap;gap:1px;align-items:center}.result-tiles img{width:calc((100% - 18px)/15);aspect-ratio:3/4}.result-meld{display:flex;gap:0;margin-left:3px}.result-meld img{width:19px}.result-yaku{padding-left:20px;font-size:13px;line-height:1.8}.win-points{font-size:22px;font-weight:700}.result-scores>div{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:8px 0;border-bottom:1px solid #dddddd;font-size:14px}.result-scores strong,.result-scores>div>span:last-child{text-align:right}
#choice-options{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}#choice-options button{display:flex;align-items:center;justify-content:center;gap:4px}#choice-options img{width:28px;height:auto}

.center-action{position:absolute;top:50px;left:50%;transform:translateX(-50%);pointer-events:auto;background:#fafafa;color:#333333;border:1px solid #999999;font-size:12px;padding:7px 12px;white-space:nowrap}
/* Stable thirteen-tile hand plus reserved draw slot. */
.dock{justify-content:flex-start}.dock .drawn-tile,.dock .draw-slot{margin-left:auto!important}.dock .draw-slot{width:calc((100% - 24px)/14);flex:none;height:1px}.dock .own-meld{margin-left:2px}
.seat-info:has(.hand-progress){width:auto;max-width:calc(100% - 16px)}
.seat-info .hand-progress{position:static;display:flex;align-items:center;gap:4px;width:auto;font-size:11px;font-weight:400;margin-left:7px;white-space:nowrap}.wait-tiles{display:flex;gap:1px;max-width:calc(100vw - 200px);overflow-x:auto;pointer-events:auto}.wait-tiles img{width:16px;height:22px;object-fit:contain}
.dora-list{gap:1px;bottom:39px}.dead-wall-tile{display:block;width:19px;height:26px;background:#f1f1f1;border:1px solid #a0a0a0;border-radius:1px;overflow:hidden}.dead-wall-tile img{display:block;width:100%;height:100%;object-fit:fill}.dead-wall-tile.face-down{background:#bcbcbc}
.hand-tile.call-candidate{position:relative}.hand-tile.call-candidate::after{content:'';position:absolute;inset:0;background:#acacac66;border:1px solid #9d9d9d;pointer-events:none;border-radius:2px}
#choice-options button{background:#b5b5b535}

.dora-list{bottom:12px}

.seat-announcement{position:absolute;z-index:8;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 12px;background:#fafafaed;color:#2a2a2a;border:2px solid #575757;border-radius:5px;box-shadow:0 3px 12px #00000022;animation:announce-enter .16s ease-out}.seat-announcement small{font-size:12px;font-weight:600}.seat-announcement strong{font-size:32px;line-height:1.1;white-space:nowrap}.seat-announcement[data-kind=ron],.seat-announcement[data-kind=tsumo]{background:#f2f2f2f5;border-color:#7c7c7c}
@keyframes announce-enter{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}@media(max-height:450px){.seat-announcement strong{font-size:26px}.seat-announcement{padding:5px 10px}}@media(prefers-reduced-motion:reduce){.seat-announcement{animation:none}}

.dock.has-melds .drawn-tile,.dock.has-melds .draw-slot{margin-left:8px!important}.dock.has-melds .own-meld:first-of-type{margin-left:auto}.dock.has-melds .draw-slot+.own-meld,.dock.has-melds .drawn-tile+.own-meld{margin-left:auto}

.own-meld .meld-piece{position:relative;display:block;flex:21 1 0;aspect-ratio:21/28;min-width:0}.own-meld .meld-piece.sideways{flex:28 1 0;aspect-ratio:28/21}.dock .own-meld .meld-piece img{display:block;width:100%;height:100%;margin:0;aspect-ratio:auto}.dock .own-meld .meld-piece.sideways img{position:absolute;left:50%;top:50%;width:75%;height:133.333%;transform:translate(-50%,-50%) rotate(90deg)}

.review-open-hands{pointer-events:auto;white-space:nowrap}

.match-center{width:145px;height:28px;display:flex;align-items:center;justify-content:flex-end;gap:9px}.match-center .dora-list{position:static;width:auto;gap:1px}.match-center .dead-wall-tile{width:15px;height:21px}.remaining-count{font-size:26px;line-height:28px;min-width:32px;text-align:center}

.screen>.center-action{top:50%;left:50%}

.screen>.remaining-count{position:absolute;left:50%;transform:translate(-50%,-50%);font-size:38px;line-height:1;pointer-events:none;color:#404040}.game-top{top:12px}

.match-center{width:auto;justify-content:flex-start}

.screen>.remaining-count{display:grid;place-items:center;width:66px;height:66px;background:#d3d3d3;border:1px solid #b5b5b5;border-radius:6px;color:#404040}

/* CPU information stays beside its own hand, with the far seat centered. */
.seat-1{justify-content:flex-end}.seat-2{justify-content:center}

/* Full-size meld faces and an explicit reserved draw slot. */
.screen .dock{display:block}
.screen .dock .hand-tile,.screen .dock .draw-slot,.screen .dock .own-meld{position:absolute;margin:0!important;bottom:0}
.screen .dock .hand-tile,.screen .dock .draw-slot{width:var(--tile-px)}
.screen .dock .own-meld{display:block;border:0}
.screen .own-meld .meld-piece{position:absolute;aspect-ratio:auto;flex:none}

/* Round information sits above the center count; dora uses the far-left gap. */
.screen .game-top{left:50%;transform:translateX(-50%);line-height:18px;text-align:center}
.screen .match-center{justify-content:center}

/* Match the hand's tile size and leave the remaining-wall count unobstructed. */
.screen .match-center{height:auto;min-height:28px}
.screen .match-center .dead-wall-tile{width:var(--dora-tile-size,26px);height:calc(var(--dora-tile-size,26px)*4/3);flex:none}
.screen>.center-action{min-width:74px;line-height:16px;padding:5px 6px}

/* Each wait shows only its remaining count above the tile image. */
.wait-tile{display:flex;flex-direction:column;align-items:center;flex:0 0 16px;gap:1px}
.wait-count{font-size:11px;font-weight:600;line-height:12px;font-variant-numeric:tabular-nums;color:#333333}

/* Visible dora and red fives use the same translucent face treatment as call candidates. */
.bonus-tile,.tile-image{position:relative}
.bonus-tile::after{content:'';position:absolute;inset:0;background:#d2d2d266;pointer-events:none;border-radius:2px}
.hand-tile.bonus-tile.call-candidate::after{background:#acacac66;border:1px solid #9d9d9d}
.tile-image{display:inline-block;flex:none;line-height:0;vertical-align:middle}
.result-tiles>.tile-image{width:calc((100% - 18px)/15);aspect-ratio:3/4}
.result-meld>.tile-image{width:19px;aspect-ratio:3/4}
.wait-tiles .tile-image{width:16px;height:22px}
#choice-options .tile-image{width:28px;aspect-ratio:3/4}
.result-tiles .tile-image img,.wait-tiles .tile-image img,#choice-options .tile-image img{display:block;width:100%;height:100%;margin:0;object-fit:fill}

/* Actions sit centered below the near river; hand progress occupies the right edge. */
.screen .action-buttons{left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 16px);justify-content:center}
.screen>.hand-progress{position:absolute;top:auto;right:8px;width:auto;max-width:calc(100% - 120px);height:28px;display:flex;align-items:center;justify-content:flex-end;gap:4px;margin:0;z-index:2;color:#333333;font-size:11px;font-weight:400;line-height:16px;white-space:nowrap;text-align:right;pointer-events:none}

/* A 1000-point riichi stick, sized in the same table units as the discards. */
.riichi-stick{position:absolute;z-index:2;transform:translate(-50%,-50%);background:#fdfdfd;border:1px solid #a1a1a1;border-radius:1px;box-shadow:0 1px 0 #aaaaaa;pointer-events:none}
.riichi-stick::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--stick-dot-size);height:var(--stick-dot-size);border-radius:50%;background:#585858}

/* Ron marks the winning face with cyan, replacing the large win ripples. */
.ron-tile::after{content:'';position:absolute;inset:0;background:#acacac66;pointer-events:none;border-radius:2px}

/* These HUD slots reserve space and labels for the actual 3D dead-wall tiles. */
.screen .match-center .dead-wall-tile{height:var(--dora-tile-height);background:none;border:0;border-radius:0;overflow:visible}


/* Exhaustive draws retain every ready player's waits in the result and table review. */
.draw-wait-tiles{display:flex;flex-wrap:wrap;align-items:center;gap:2px;min-width:0}
.draw-wait-tiles .tile-image{width:20px;height:27px}
.draw-wait-tiles img{display:block;width:100%;height:100%;object-fit:contain}
.draw-result-waits{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12px}
.draw-result-waits>span:first-child{flex:none;min-width:60px}
.draw-result-waits .draw-wait-tiles{flex:1}
.result-scores>div>span:nth-child(3){text-align:right}
.draw-waits{position:absolute;z-index:5;display:flex;flex-direction:column;gap:4px;width:max-content;max-width:calc(100% - 72px);padding:6px 8px;background:#fafafaf2;color:#2a2a2a;border:1px solid #919191;border-radius:4px;box-shadow:0 2px 5px #00000011;pointer-events:none}
.draw-waits>strong{font-size:11px;line-height:15px;white-space:nowrap}

.draw-waits .tile-image{width:16px;height:22px}

.draw-waits .draw-wait-tiles{gap:1px}

/* Keep wait counts readable; unavailable tiles include their bonus tint in the gray treatment. */
.hand-progress .progress-label{display:flex;flex-direction:column;align-items:flex-end;flex:none;line-height:14px}
.furiten-label{color:#505050;font-size:11px;font-weight:700}
.tile-image.wait-unavailable{filter:grayscale(1);opacity:.38}
.wait-tile.is-unavailable .wait-count{color:#777777}