:root{--bg-image-lobby: url(/bg-lobby.png);--bg-image-opening: url(/bg-opening.png);--bg-image-playing: url(/bg-playing.png);--safe-area-inset-top: env(safe-area-inset-top, 0px);--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box}html{overflow-x:hidden;width:100%;max-height:932px}body{margin:0;width:100%;max-width:100vw;max-height:932px;overflow-x:hidden;overflow-y:auto;background:#0a1a14;display:flex;justify-content:center;font-family:Microsoft JhengHei,PingFang TC,Noto Sans TC,sans-serif;padding-top:var(--safe-area-inset-top);padding-bottom:var(--safe-area-inset-bottom)}.game-root{width:100%;max-width:min(480px,100vw);min-width:0;min-height:100vh;min-height:100dvh;max-height:932px;overflow-x:hidden;overflow-y:auto;display:grid;grid-template-rows:56px minmax(0,1fr) minmax(72px,auto);background-color:#0b3d2e;background-image:linear-gradient(180deg,#0b3d2e1a,#0a281c1a),var(--bg-image-playing);background-size:cover;background-position:center;background-repeat:no-repeat;padding:0}.table-area{min-height:0;min-width:0;width:100%;overflow:hidden;display:grid;grid-template-rows:88px minmax(0,1fr) minmax(56px,auto) 132px;background-color:#0a2214;background-image:linear-gradient(180deg,#0d28181a,#0a22141a),var(--bg-image-playing);background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:12px 12px 0 0;border:1px solid rgba(255,255,255,.08)}.header{display:flex;justify-content:space-between;align-items:center;padding:0 12px;min-width:0;color:#fff;background:#0003}.header>*:first-child,.header>*:last-child{max-width:28%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header__new-game{margin-right:8px;padding:4px 8px;font-size:12px;border:none;border-radius:4px;background:#fff3;color:#fff;cursor:pointer}.header__new-game:hover{background:#ffffff4d}.remain{font-weight:700;font-size:18px}.header__score{font-size:13px;color:#ffffffd9;white-space:nowrap}.header__turn-hint{padding:4px 10px;border-radius:999px;font-size:14px;font-weight:600;background:#ffdc6459;color:#fff8e0;box-shadow:0 0 0 1px #ffdc6466}.result-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#0009;padding:16px}.result-modal{background:linear-gradient(180deg,#2a2a1e,#1a1a12);border:2px solid rgba(212,175,55,.6);border-radius:12px;padding:24px 28px;max-width:320px;width:100%;color:#f0e6d8;text-align:center;box-shadow:0 8px 32px #00000080}.result-modal__title{margin:0 0 8px;font-size:22px;font-weight:700;color:#f4d03f}.result-modal__sub{margin:0 0 12px;font-size:14px;opacity:.9}.result-modal__tai{margin:0 0 12px;font-size:20px;font-weight:700;color:#e8c547}.result-modal__breakdown{margin:0 0 20px;padding:0;list-style:none;font-size:13px;opacity:.85;text-align:left}.result-modal__breakdown li{margin:4px 0}.result-modal__btn{display:block;width:100%;padding:12px 20px;font-size:16px;font-weight:600;border:none;border-radius:8px;background:linear-gradient(180deg,#c9a227,#8b6914);color:#1a1a12;cursor:pointer}.result-modal__btn:hover{background:linear-gradient(180deg,#d4af37,#9a7b0a)}.lobby{min-height:100vh;min-height:100dvh;max-height:932px;width:100%;max-width:min(480px,100vw);margin:0 auto;display:flex;align-items:center;justify-content:center;padding:24px;background-color:#061810;background-image:linear-gradient(180deg,#0b3d2e1a,#0a281c1a,#0618101a),var(--bg-image-lobby);background-size:cover;background-position:center;background-repeat:no-repeat;box-sizing:border-box;overflow-y:auto}.lobby__card{width:100%;max-width:360px;padding:32px 28px;background:linear-gradient(165deg,#12372af2,#0c261cfa);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 8px 32px #00000059,inset 0 1px #ffffff0f;text-align:center}.lobby__title{margin:0 0 8px;font-size:28px;font-weight:700;color:#e8e0d0;letter-spacing:.05em}.lobby__sub{margin:0 0 20px;font-size:14px;color:#fff9}.lobby__desc{margin:0 0 20px;font-size:13px;line-height:1.55;color:#ffffffb3;text-align:center}.lobby__note{margin:0 0 16px;font-size:12px;color:#ffffff80;text-align:center}.lobby__difficulty{margin:0 0 24px;text-align:center}.lobby__difficulty-label{display:block;margin-bottom:10px;font-size:13px;font-weight:600;color:#ffffffd9}.lobby__difficulty-btns{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.lobby__difficulty-btn{flex:1;min-width:0;padding:10px 14px;font-size:14px;font-weight:600;border:2px solid rgba(255,255,255,.25);border-radius:8px;background:#0003;color:#ffffffe6;cursor:pointer;transition:border-color .2s,background .2s}.lobby__difficulty-btn:hover{border-color:#fff6;background:#0000004d}.lobby__difficulty-btn--active{border-color:#c9a227;background:#c9a22733;color:#f4e4a6}.lobby__btn{display:block;width:100%;padding:14px 24px;font-size:17px;font-weight:600;border:none;border-radius:10px;background:linear-gradient(180deg,#c9a227,#8b6914);color:#1a1a12;cursor:pointer;box-shadow:0 4px 12px #00000040}.lobby__btn:hover{background:linear-gradient(180deg,#d4af37,#9a7b0a);box-shadow:0 4px 16px #c9a22759}.lobby__btn--secondary{margin-top:12px;background:linear-gradient(180deg,#ffffff2e,#ffffff14);color:#e8e0d0;border:1px solid rgba(255,255,255,.2)}.lobby__btn--secondary:hover{background:linear-gradient(180deg,#ffffff40,#ffffff1f);box-shadow:none}.lobby__score{margin:0 0 12px;font-size:15px;color:#ffffffe6}.lobby__score strong{color:#f4e4a6}.lobby__win-rate{font-size:.9em;color:#ffffffb3;font-weight:400}.lobby__form{text-align:center;margin:0 0 8px}.lobby__label{display:block;margin-bottom:14px}.lobby__label>span{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#ffffffd9}.lobby__input{width:100%;padding:10px 12px;font-size:15px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:#00000040;color:#e8e0d0;box-sizing:border-box}.lobby__input::placeholder{color:#fff6}.lobby__input:focus{outline:none;border-color:#c9a227;box-shadow:0 0 0 2px #c9a22740}.lobby__error{margin:0 0 12px;font-size:13px;color:#e88}.leaderboard{min-height:100vh;min-height:100dvh;max-height:932px;width:100%;max-width:min(480px,100vw);margin:0 auto;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,#0b3d2e,#0a281c,#061810);box-sizing:border-box;overflow-y:auto}.leaderboard__card{width:100%;max-width:360px;padding:28px 24px;background:linear-gradient(165deg,#12372af2,#0c261cfa);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 8px 32px #00000059,inset 0 1px #ffffff0f;text-align:center}.leaderboard__title{margin:0 0 6px;font-size:26px;font-weight:700;color:#e8e0d0;letter-spacing:.05em}.leaderboard__sub{margin:0 0 20px;font-size:13px;color:#fff9}.leaderboard__table-wrap{overflow-x:auto;margin-bottom:20px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#0003}.leaderboard__table{width:100%;border-collapse:collapse;font-size:13px;color:#ffffffe6}.leaderboard__table th,.leaderboard__table td{padding:10px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}.leaderboard__table th{font-weight:600;color:#ffffffb3;background:#00000026}.leaderboard__table th:first-child,.leaderboard__table td:first-child{width:48px;text-align:center}.leaderboard__table td:last-child{font-weight:600;color:#f4e4a6}.leaderboard__empty{text-align:center!important;color:#ffffff80;font-size:13px;padding:24px 16px!important}.leaderboard__btn{display:block;width:100%;padding:12px 24px;font-size:16px;font-weight:600;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:linear-gradient(180deg,#ffffff2e,#ffffff14);color:#e8e0d0;cursor:pointer}.leaderboard__btn:hover{background:linear-gradient(180deg,#ffffff40,#ffffff1f)}.opening{min-height:100vh;min-height:100dvh;max-height:932px;width:100%;max-width:min(480px,100vw);margin:0 auto;display:flex;align-items:center;justify-content:center;padding:24px;background-color:#061810;background-image:linear-gradient(180deg,#0b3d2e1a,#0a281c1a,#0618101a),var(--bg-image-opening);background-size:cover;background-position:center;background-repeat:no-repeat;box-sizing:border-box}.opening__card{width:100%;max-width:360px;padding:32px 28px;background:linear-gradient(165deg,#12372af2,#0c261cfa);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 8px 32px #00000059;text-align:center}.opening__title{margin:0 0 8px;font-size:24px;font-weight:700;color:#e8e0d0}.opening__desc{margin:0 0 24px;font-size:13px;line-height:1.5;color:#ffffffbf}.opening__dice-area{margin:0 0 24px;padding:20px;background:#0003;border-radius:12px}.opening__dice-row{display:flex;justify-content:center;gap:24px;margin-bottom:12px}.opening__dice{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#1a1a12;background:linear-gradient(180deg,#f5f0e0,#e0d4b8);border:2px solid rgba(0,0,0,.2);border-radius:10px;box-shadow:inset 0 1px #ffffff80}.opening__sum{margin:0;font-size:14px;color:#ffffffe6}.opening__sum strong{color:#e8c547}.opening__actions{display:flex;flex-direction:column;gap:10px}.opening__btn{display:block;width:100%;padding:12px 20px;font-size:16px;font-weight:600;border:none;border-radius:10px;cursor:pointer}.opening__btn--roll{background:#ffffff26;color:#e8e0d0;border:2px solid rgba(255,255,255,.3)}.opening__btn--roll:hover{background:#ffffff38;border-color:#ffffff73}.opening__btn--start{background:linear-gradient(180deg,#c9a227,#8b6914);color:#1a1a12;box-shadow:0 4px 12px #00000040}.opening__btn--start:hover:not(:disabled){background:linear-gradient(180deg,#d4af37,#9a7b0a)}.opening__btn--start:disabled{opacity:.5;cursor:not-allowed}.settlement{min-height:100vh;min-height:100dvh;max-height:932px;width:100%;max-width:min(480px,100vw);margin:0 auto;display:flex;align-items:center;justify-content:center;padding:20px 16px;background:linear-gradient(180deg,#0c3a2c,#0a2a1e 40%,#061712);box-sizing:border-box;overflow-y:auto}.settlement__card{width:100%;max-width:380px;padding:28px 24px 24px;background:linear-gradient(168deg,#14342afa,#0e2820fc);border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 12px 40px #0006,0 0 0 1px #0000001a,inset 0 1px #ffffff14;text-align:center}.settlement__badge{display:inline-block;margin-bottom:14px;padding:5px 14px;font-size:11px;font-weight:600;border-radius:20px;letter-spacing:.06em;text-transform:uppercase}.settlement__badge--win{background:#d4af3738;color:#e8c547;border:1px solid rgba(212,175,55,.35)}.settlement__badge--exhausted{background:#788ca038;color:#a8c0d8;border:1px solid rgba(120,140,160,.35)}.settlement__title{margin:0 0 6px;font-size:24px;font-weight:700;color:#f0e8dc;letter-spacing:.02em}.settlement__sub{margin:0 0 18px;font-size:14px;color:#ffffffb3}.settlement__win-tile{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px;padding:10px 12px;background:#d4af371f;border:1px solid rgba(212,175,55,.3);border-radius:10px}.settlement__win-tile .settlement__hand-tag{margin:0;color:#ffffffb3}.settlement__win-tile .tile{width:36px;height:48px;font-size:12px;box-shadow:0 2px 8px #00000040}.settlement__win-tile .tile--sm{width:34px;height:46px;font-size:11px}.settlement__hand{margin:0 0 18px;padding:14px 12px;background:#0003;border-radius:12px;border:1px solid rgba(255,255,255,.08);text-align:left}.settlement__hand-label{margin:0 0 10px;font-size:12px;font-weight:600;color:#fff9;letter-spacing:.04em}.settlement__hand-row{margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.settlement__hand-row:last-child{margin-bottom:0}.settlement__hand-tag{flex-shrink:0;font-size:11px;color:#ffffff80;min-width:32px}.settlement__hand-tiles{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.settlement__hand-tiles--melds{gap:8px}.settlement__meld-group{display:inline-flex;align-items:center;gap:0;padding:2px 4px;background:#ffffff0f;border-radius:6px}.settlement__hand .tile{width:28px;height:38px;font-size:10px;border-radius:4px}.settlement__hand .tile--sm{width:26px;height:36px;font-size:9px}.settlement__tai{margin:0 0 8px;font-size:20px;font-weight:700;color:#e8c547;letter-spacing:.02em}.settlement__score{margin:0 0 12px;font-size:14px;color:#ffffffd9;text-align:left}.settlement__score strong{color:#e8c547;font-weight:700}.settlement__total{margin:0 0 12px;font-size:14px;color:#ffffffd9}.settlement__total strong{color:#e8c547}.settlement__breakdown{margin:0 0 20px;padding:0 0 0 18px;list-style:none;font-size:13px;color:#ffffffc7;text-align:left;line-height:1.5}.settlement__breakdown li{margin:2px 0}.settlement__actions{display:flex;flex-direction:column;gap:10px;margin-top:4px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}.settlement__btn{display:block;width:100%;padding:13px 20px;font-size:15px;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:box-shadow .15s ease}.settlement__btn--primary{background:linear-gradient(180deg,#c9a227,#8b6914);color:#1a1a12;box-shadow:0 4px 14px #00000040}.settlement__btn--primary:hover{background:linear-gradient(180deg,#d4af37,#9a7b0a);box-shadow:0 6px 18px #c9a2274d}.settlement__btn--secondary{background:#ffffff14;color:#e8e0d0;border:1px solid rgba(255,255,255,.15)}.settlement__btn--secondary:hover{background:#ffffff1f;border-color:#ffffff38}.action-prompt-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;background:#0006;padding:12px 16px 220px}.action-prompt{background:linear-gradient(180deg,#2a2a1e,#1a1a12);border:2px solid rgba(212,175,55,.6);border-radius:12px;padding:14px 18px;max-width:300px;width:100%;color:#f0e6d8;text-align:center;box-shadow:0 8px 32px #00000080}.action-prompt__title{margin:0 0 8px;font-size:16px}.action-prompt__who{color:#f4d03f;font-weight:700}.action-prompt__tile{margin:12px 0;display:flex;justify-content:center}.action-prompt__tile .tile{max-width:42px;font-size:16px;padding:6px 10px;box-shadow:0 2px 8px #0000004d}.action-prompt__sub{margin:0 0 10px;font-size:13px;opacity:.9}.action-prompt__buttons{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.action-prompt__btn{padding:8px 14px;font-size:13px;font-weight:600;border:none;border-radius:8px;cursor:pointer;min-width:64px}.action-prompt__btn--pong{background:#b46432cc;color:#fff}.action-prompt__btn--chow{background:#326482cc;color:#fff}.action-prompt__btn--kong{background:#5a5082cc;color:#fff}.action-prompt__btn--win{background:linear-gradient(180deg,#c9a227,#8b6914);color:#1a1a12}.action-prompt__btn--pass{background:#fff3;color:#f0e6d8}.action-prompt__btn:hover:not(:disabled){filter:brightness(1.1)}.seat-top{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:2px 6px;min-width:0;overflow:hidden;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}.seat-top__label{display:flex;justify-content:center;align-items:center;flex-shrink:0}.seat-top__row1{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;min-height:20px;flex-shrink:0}.seat-label{font-size:11px;color:#fff9;flex-shrink:0;align-self:center}.seat-top__hand{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2px;flex:1;min-width:0;min-height:20px;overflow:hidden;flex-wrap:nowrap}.seat-top__row2{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;justify-content:flex-start;gap:6px;min-height:44px;flex-shrink:0;padding:2px 6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#30485280,#263a4473);border-radius:4px;min-width:0;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px #ffffff0a}.seat-top__row2::-webkit-scrollbar{height:4px}.seat-top__row2::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.seat-top__row2 .seat-top__flowers{display:flex;align-items:center;gap:2px;flex-shrink:0;padding:2px 6px;border-radius:4px;background:linear-gradient(145deg,#58345c52,#44264838);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px #ffffff0d}.seat-top__row2 .seat-top__group{display:flex;flex-direction:row;align-items:center;gap:0;flex-shrink:0;padding:2px 6px;border-radius:4px;background:linear-gradient(145deg,#ffffff1a,#ffffff0d);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px #ffffff0f}.seat-top__row2 .seat-top__group .tile{margin:0 -1px}.seat-top__row2 .seat-top__group .tile:first-child{margin-left:0}.seat-top__row2 .seat-top__group .tile:last-child{margin-right:0}.battlefield{display:grid;grid-template-columns:calc((52px + 3%)*.7) minmax(15px,36px) minmax(0,1fr) minmax(15px,36px) calc((48px + 3%)*.7);align-items:stretch;gap:0;min-height:0;min-width:0;background:transparent}.seat-left,.seat-right{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:6px 0;gap:6px;min-width:0;overflow:hidden;background:#0000001a;border-right:1px solid rgba(255,255,255,.06);z-index:1}.seat-left{padding:8px 4px;gap:4px}.seat-right{padding:8px 4px;gap:4px;border-right:none;border-left:1px solid rgba(255,255,255,.06);overflow:hidden;min-width:0;max-width:100%}.seat-left-zones{display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:4px 3px;min-width:28px;width:100%;max-width:36px;flex-shrink:0;min-height:0;background:#0000001f;border-left:1px solid rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.08);z-index:2}.seat-left-zones__cell{flex:1 1 auto;min-height:0;min-width:0;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:2px;font-size:10px;font-weight:600;color:#ffffff8c;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.seat-left-zones__cell::-webkit-scrollbar{width:4px}.seat-left-zones__cell::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.seat-left-zones__cell:before,.seat-right-zones__cell:before{display:none;content:none}.other-seat-zones__tiles{display:flex;flex-direction:column;align-items:center;gap:0;flex-shrink:0}.seat-left-zones__cell .other-seat-zones__tiles,.seat-right-zones__cell .other-seat-zones__tiles{flex-shrink:0}.other-seat-zones__tiles--flowers{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0}.other-seat-zones__tiles--flowers .other-seat-zones__group{margin:0 -8px}.other-seat-zones__group{display:flex;flex-direction:column;align-items:center;gap:0;line-height:0;margin:-4px 0}.other-seat-zones__group .tile{margin:-8px 0}.other-seat-zones__group .tile:first-child{margin-top:0}.other-seat-zones__group .tile:last-child{margin-bottom:0}.other-seat-zones__tiles--flowers .other-seat-zones__group{flex-direction:row;line-height:normal}.other-seat-zones__tiles--flowers .other-seat-zones__group .tile{margin:0 -8px}.seat-left-zones .tile{transform:rotate(90deg) scale(.8)}.seat-left-zones__cell:before{content:none}.seat-left-zones__cell{background:linear-gradient(180deg,#34485280,#2a3c466b,#26374161);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px #ffffff08}.seat-right-zones{display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:4px 3px;min-width:28px;width:100%;max-width:36px;flex-shrink:0;min-height:0;background:#0000001f;border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.06);z-index:2}.seat-right-zones__cell{flex:1 1 auto;min-height:0;min-width:0;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:2px;font-size:10px;font-weight:600;color:#ffffff8c;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.seat-right-zones__cell::-webkit-scrollbar{width:4px}.seat-right-zones__cell::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.seat-right-zones .tile{transform:rotate(-90deg) scale(.8)}.seat-right-zones__cell{background:linear-gradient(180deg,#34485280,#2a3c466b,#26374161);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px #ffffff08}.seat-left__hand,.seat-right__hand{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:0;overflow:hidden}.seat-left__hand{gap:0}.seat-left__hand .tile--back{transform:rotate(360deg)}.seat-right__hand{gap:0}.seat-right__hand .tile--back{transform:rotate(360deg)}.seat-left__flowers{height:20px;min-height:20px;border-radius:4px;background:#3c2d4673}.center{display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:0;min-width:0;overflow:hidden;padding:2px 6px 6px;background:linear-gradient(180deg,#0a1f12,#061810);border-radius:12px;margin:4px 6px;border:1px solid rgba(0,0,0,.25)}.center__title{color:#ffffff73;font-size:12px;text-align:center;display:none;margin-bottom:2px}.center__layout{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:1fr auto 1fr;gap:3px;width:100%;min-width:0;min-height:120px}.center-discard--top{grid-column:1 / -1;grid-row:1;padding:3px 6px 4px;min-height:44px;background:#142d2880;border:1px solid rgba(255,255,255,.12);border-radius:4px 4px 0 0}.center-discard--left{grid-column:1;grid-row:2;padding:4px 6px;min-height:134px;min-width:52px;background:#192d2a80;border:1px solid rgba(255,255,255,.12);border-radius:4px}.center__table{grid-column:2;grid-row:2;min-width:24px;min-height:134px;background:#00000040;border:1px solid rgba(255,255,255,.1);border-radius:4px}.center-discard--right{grid-column:3;grid-row:2;padding:4px 6px;min-height:134px;min-width:52px;background:#192d2a80;border:1px solid rgba(255,255,255,.12);border-radius:4px}.center-discard--bottom{grid-column:1 / -1;grid-row:3;padding:4px 6px;min-height:44px;background:#142d2880;border:1px solid rgba(255,255,255,.12);border-radius:4px}.center-discard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:0;overflow:hidden}.center-discard__label{font-size:10px;color:#fff6;flex-shrink:0}.center-discard--left .center-discard-grid,.center-discard--right .center-discard-grid{grid-template-columns:repeat(2,1fr);max-width:72px}.center-discard--left .center-discard-grid{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:flex-start;align-content:flex-start;grid-template-columns:unset;gap:0px;max-width:72px;max-height:240px}.center-discard--left .center-discard-grid .tile{margin:-8px 0}.center-discard--left .center-discard-grid .tile:first-child{margin-top:0}.center-discard--left .center-discard-grid .tile:last-child{margin-bottom:0}.center-discard--right .center-discard-grid{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:flex-start;align-content:flex-start;grid-template-columns:unset;gap:0px;max-width:72px;max-height:240px}.center-discard--right .center-discard-grid .tile{margin:-8px 0}.center-discard--right .center-discard-grid .tile:first-child{margin-top:0}.center-discard--right .center-discard-grid .tile:last-child{margin-bottom:0}.center-discard--top .center-discard-grid,.center-discard--bottom .center-discard-grid{grid-template-columns:repeat(6,1fr);max-width:240px}.center-discard-grid{display:grid;gap:2px 3px;justify-items:center;align-items:center;width:100%;min-height:32px}.center-discard--top .center-discard-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-start;align-items:center;grid-template-columns:unset;max-width:95%}.center-discard--top .center-discard-grid .tile{margin:0 -6px}.center-discard--top .center-discard-grid .tile:first-child{margin-left:0}.center-discard--top .center-discard-grid .tile:last-child{margin-right:0}.center-discard--bottom .center-discard-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-start;align-items:center;grid-template-columns:unset;max-width:95%}.center-discard--bottom .center-discard-grid .tile{margin:0 -6px}.center-discard--bottom .center-discard-grid .tile:first-child{margin-left:0}.center-discard--bottom .center-discard-grid .tile:last-child{margin-right:0}.center-discard--top .tile,.center-discard--bottom .tile{transform:scale(.8)}.center-discard--left .tile{transform:rotate(90deg) scale(.8)}.center-discard--right .tile{transform:rotate(-90deg) scale(.8)}.center__empty{grid-column:1 / -1;color:#ffffff4d;font-size:11px}.self-melds{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:8px 12px;padding:8px 10px;min-width:0;min-height:52px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:linear-gradient(135deg,#2d444e8c,#23373e80,#1c303773);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px #ffffff0a;position:relative;z-index:3;flex-shrink:0}.self-melds::-webkit-scrollbar{height:6px}.self-melds::-webkit-scrollbar-thumb{background:#ffffff40;border-radius:3px}.self-melds__flowers{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;min-height:40px;flex-shrink:0;background:linear-gradient(145deg,#5a375f59,#46284b40);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px #ffffff0f}.self-melds__flowers .tile{max-width:32px;height:40px;font-size:11px}.self-melds__group{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;min-height:40px;flex-shrink:0;background:linear-gradient(145deg,#ffffff1f,#ffffff0f);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px #ffffff14}.self-melds__slots{display:flex;align-items:center;gap:2px;min-height:32px;padding:2px 0}.self-melds__slots .tile{max-width:34px;height:44px;font-size:12px}.self-melds__group--pong{background:linear-gradient(145deg,#dca0642e,#b478461f);border-color:#dc8c5073;box-shadow:inset 0 1px #ffffff0f}.self-melds__group--chow{background:linear-gradient(145deg,#508cbe2e,#3c6ea01f);border-color:#508cb473;box-shadow:inset 0 1px #ffffff0f}.self-melds__group--kong{background:linear-gradient(145deg,#8c78c82e,#6e5aaa1f);border-color:#826eb473;box-shadow:inset 0 1px #ffffff0f}.self-discard{display:flex;flex-direction:column;align-items:center;padding:6px 8px;background:#0003;border-top:1px solid rgba(255,255,255,.08);overflow:hidden;min-height:0}.self-discard__label{color:#ffffff80;font-size:11px;margin-bottom:4px}.self-discard-grid{display:grid;grid-template-columns:repeat(6,36px);grid-auto-rows:28px;gap:2px;justify-content:center;align-content:start;width:100%;max-height:88px;overflow:hidden}.self-hand{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:8px 6px;min-height:0;min-width:0;width:100%;max-width:100%;overflow:hidden;background:#00000026;position:relative;z-index:1}.self-hand__row{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;justify-items:center;align-items:center;width:100%;max-width:400px}.self-hand__row-spacer{width:100%;max-width:42px;height:52px;visibility:hidden;pointer-events:none}.self-hand__draw-slot{width:100%;max-width:42px;height:52px;border:2px dashed rgba(255,255,255,.25);border-radius:6px;background:#00000026;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.self-hand__draw-slot--active{border-color:#ffdc64b3;background:#ffdc6426;cursor:pointer}.self-hand__draw-slot--active:hover{border-color:#ffdc64f2;background:#ffdc6440;box-shadow:0 0 0 2px #ffdc6466}.self-hand__draw-slot-label{font-size:12px;font-weight:600;color:#ffffffe6}.self-hand__draw-slot--drawn{cursor:pointer;border-color:#ffdc6480;background:#0003}.self-hand__draw-slot--drawn:hover{border-color:#ffdc64d9;box-shadow:0 0 0 2px #ffdc6459}.self-hand__draw-slot--drawn .tile{max-width:100%;max-height:100%;object-fit:contain}.self-hand__tile-wrap{padding:0;border:none;background:transparent;cursor:pointer;border-radius:6px;display:flex;justify-content:center;align-items:center}.self-hand__tile-wrap:hover:not(:disabled) .tile{box-shadow:0 0 0 2px #ffffff80}.self-hand__tile-wrap:disabled{cursor:default}.self-hand .tile{width:100%;max-width:42px;height:52px;font-size:11px}.tile{width:42px;height:60px;background:linear-gradient(180deg,#faf8f5,#f0ebe3);border-radius:6px;margin:0;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:600;color:#1a1a1a;flex-shrink:0;border:1px solid rgba(0,0,0,.12)}.tile--sm{width:28px;height:40px;font-size:10px;border-radius:4px}.tile__face{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}.tile__label{display:block}.tile--back{background:linear-gradient(180deg,#e6c35c,#d4a84b);color:transparent;border-color:#c9a227}.tile--back .tile__label{display:none}.seat-top .tile--back{width:20px;height:15px;border-radius:3px;background:linear-gradient(180deg,#faf8f5,#faf8f5 50%,#e6c35c 50%,#d4a84b);border-color:#c9a227}.seat-left .tile--back{width:15px;height:20px;border-radius:1px;background:linear-gradient(90deg,#faf8f5,#faf8f5 50%,#e6c35c 50%,#d4a84b);border-color:#c9a227}.seat-right .tile--back{width:15px;height:20px;border-radius:1px;background:linear-gradient(90deg,#d4a84b,#e6c35c 50%,#faf8f5 50%,#faf8f5);border-color:#c9a227}