/* Keep rack geometry independent from the animation and player labels. */
.lobby{overflow-y:auto;padding:74px 24px 36px}
.lobby-shell{width:min(460px,100%);margin:auto}
.waiting-shell{display:grid;grid-template-columns:minmax(320px,460px) minmax(260px,320px);align-items:center;gap:52px;width:min(900px,100%);margin:auto}
.title-scene{width:100%}
.hero-tiles{position:relative;isolation:isolate;perspective:900px}
.hero-piece{position:relative;flex:none;transform:translate(var(--drag-x,0px),var(--drag-y,0px));touch-action:none}
.hero-piece:nth-child(2){margin:0 -5px;z-index:1}
.hero-piece .hero-tile{margin:0;padding:0;cursor:grab;touch-action:none;transform:rotate(var(--r)) translateY(var(--y)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.hero-piece:nth-child(2) .hero-tile{--r:3deg;--y:-7px;color:#31875f;animation-delay:-2s}
.hero-piece:nth-child(3) .hero-tile{--r:19deg;--y:10px;color:#397da4;animation-delay:-4s}
.hero-piece.dragging{z-index:30;will-change:transform}
.hero-piece.dragging .hero-tile{animation:none;cursor:grabbing;box-shadow:0 8px #bcb99e,0 12px #173f3a,10px 24px 25px #102c3670}
.hero-tile{position:relative;transform-style:preserve-3d;transition:transform .16s ease-out,box-shadow .18s}
.hero-piece .hero-tile.depth-active{animation:none}
.hero-glyph{display:block;transform:translate3d(var(--face-x,0px),var(--face-y,0px),5px);pointer-events:none}
.tile-stock{position:absolute;inset:-1px;border:2px solid #bbb89f;border-radius:inherit;background:linear-gradient(#ddd5ba 55%,#3d7764 56%,#2a574b);transform:translateZ(-7px);box-shadow:0 3px #20493d;pointer-events:none}
.tile-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transform:translateZ(3px);background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,30%),#fffceba8,transparent 70%);opacity:0;transition:opacity .18s;mix-blend-mode:soft-light}
.depth-active>.tile-sheen{opacity:.8}
.lobby-links{flex-wrap:wrap;gap:12px 18px}
.lobby-links a{font-size:12px}
.match-options{padding:28px 25px;text-align:left}
.match-options .eyebrow{margin-bottom:13px;color:#a8c1ae;letter-spacing:2px}
.match-options h2{font-size:30px;font-weight:400;color:#f3ce84;margin-bottom:20px;text-shadow:0 3px #22373e}
.option-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #8d9f792e;font-size:18px}
.option-row select{font:inherit;font-size:18px;color:var(--cream);border:2px solid #829786;border-radius:4px;background:#263d43;padding:8px 10px;min-width:110px;cursor:pointer}
.option-row select:disabled{opacity:.65;cursor:default}
.match-options>p:last-child{margin-top:20px;font-size:12px;color:#b9cdb4;line-height:1.8}
.create-dialog{width:min(440px,calc(100vw - 30px));padding:30px 28px 28px}
.create-dialog .match-options{padding:0;border:0;background:none;box-shadow:none}
.create-dialog .option-row{font-size:18px}
.create-dialog .dialog-close:disabled{opacity:.35}
.create-actions{display:flex;align-items:center;justify-content:flex-end;gap:24px;margin-top:24px}
.create-actions .text-btn{font-size:18px}
.create-actions .btn{font-size:24px;padding:13px 18px}
.create-status{font-size:12px;color:var(--gold);line-height:1.7;margin-top:16px}
.waiting{overflow-y:auto;padding:30px 24px}
.waiting-shell{grid-template-columns:minmax(320px,430px) minmax(260px,320px);gap:35px;max-width:800px}
.waiting-shell .waiting-card{width:100%}
.waiting-rules{font-size:12px;color:var(--gold);margin-bottom:12px;line-height:1.6}
#musicWake{position:absolute;right:58px;top:0}

.table-core{grid-template-columns:146px minmax(0,1fr) 146px;grid-template-rows:auto minmax(0,1fr);gap:12px}
.table-core .opponent{gap:9px;overflow:hidden;padding:3px 4px;min-height:0}
.opponent>.player-label{flex:none;position:relative;z-index:2;max-width:100%;font-size:16px;line-height:1.15;white-space:nowrap;word-break:normal;padding:6px 8px}
.opponent-rack{display:flex;align-items:center;justify-content:center;gap:14px;min-width:0;min-height:0;padding:10px 8px 13px;max-width:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:#6b957a #17483e}
.top-player .opponent-rack{flex-wrap:wrap;min-height:84px;max-height:180px}
.opponent-rack>.backs,.opponent-rack>.op-melds{flex:none}
.table-core .top-player .back{width:42px;height:58px;border-width:3px;margin:0}
.table-core .left-player,.table-core .right-player{display:flex;justify-content:flex-start}
.left-player .opponent-rack,.right-player .opponent-rack{flex:1;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;gap:14px}
.left-player .backs,.right-player .backs{gap:0;flex-direction:column;overflow:visible;min-height:auto;padding-top:8px}
.table-core .left-player .backs>.back,.table-core .right-player .backs>.back{width:51px;height:27px;border-width:2px;margin:0;margin-top:-14px}
.table-core .op-melds{display:flex;flex-wrap:nowrap;max-width:none;gap:13px;min-height:0;align-items:center;padding:3px}
.left-player .op-melds,.right-player .op-melds{flex-direction:column}
.table-core .op-melds .meld{flex-direction:row;gap:2px}
.table-core .opponent .tile.mini,.table-core .op-melds .meld>.back{width:38px;height:53px;margin:0;flex:none}
.table-core .op-melds .meld>.back{border-width:2px}
.tile{container-type:inline-size}
.tile{transform:perspective(750px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:0 1px #e2dac0,0 3px #b9b69d,0 5px #9b9e84,0 7px #356451,0 9px #183e34,2px 12px 7px #0b2c344a}
.tile .face{transform:translate3d(var(--face-x,0px),var(--face-y,0px),4px)}
.tile .corner{transform:translateZ(5px)}
.tile::after{transform:translateZ(1px)}
.tile.depth-active{z-index:5;box-shadow:var(--shade-x,3px) 5px #b4b198,var(--shade-x,3px) 8px #315e4f,var(--shade-x,3px) 11px #183e34,var(--shade-x,3px) 17px 12px #0b283455}
.hero-tile.depth-active{box-shadow:var(--shade-x,3px) 5px #bcb99e,var(--shade-x,3px) 9px #315e4f,var(--shade-x,3px) 13px #173f3a,var(--shade-x,3px) 22px 18px #102c3666}
.my-hand{min-height:110px;gap:5px;padding:23px 0 10px}
.my-hand .tile{width:min(64px,calc((100cqw - 84px)/14));aspect-ratio:64/89}
.my-hand .tile.drawn{animation-fill-mode:backwards}
.my-hand .tile:hover{--lift:-14px;z-index:3}
.my-hand .tile.selected{--lift:-23px!important;transform:perspective(750px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) rotate(-3deg);--rx:0deg;--ry:0deg}
.my-hand .tile[aria-disabled=true]{cursor:default}
.my-hand .tile .face{opacity:1}
.tile:not([data-suit=WAN]) .face svg{width:76cqw!important;height:105cqw!important}
.tile .honor{font-size:78cqw!important}
.tile .white-dragon{width:51cqw!important;height:77cqw!important}
.my-melds{position:static;max-width:none;display:flex;flex-wrap:wrap;gap:12px;padding:9px 0 5px}
.my-melds:empty{display:none}
.my-melds .tile{width:44px;height:61px}
.discard-piles{grid-template-columns:repeat(auto-fit,42px);width:min(100%,434px);gap:7px;padding:10px 3px 16px}
.discard-piles .tile{width:42px;height:58px}
.meld{position:relative;flex:none;--meld-glow:#98dcce;animation:meldArrive .35s cubic-bezier(.2,1.3,.4,1) backwards}
.meld{transform-style:preserve-3d;transform:perspective(850px) translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .14s ease-out;touch-action:none;cursor:grab;user-select:none}
.meld.depth-active{z-index:10}
.meld>.tile,.meld>.back{pointer-events:auto}
.meld.meld-floating{position:fixed!important;display:flex;gap:2px;align-items:center;z-index:1300;margin:0;animation:none;transition:none;cursor:grabbing}
.meld.meld-floating>.tile,.meld.meld-floating>.back{width:var(--drag-tile-width)!important;height:var(--drag-tile-height)!important}
.meld-placeholder{display:inline-block;flex:none;pointer-events:none}
.meld.depth-active .tile-sheen{opacity:.88;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,50%),#fff6be88,transparent 65%),linear-gradient(var(--foil-angle,115deg),#60e1d977,#9b9dff66 28%,#f49cc477 52%,#ffe29b88 73%,#96ebbc66);mix-blend-mode:color-dodge}
.meld[data-type=PUNG]{--meld-glow:#a9b8f2}
.meld[data-type=KONG]{--meld-glow:#edc37f;padding-top:8px}
.meld[data-type=KONG]>:nth-child(4){position:absolute;left:calc(100% / 3);top:0;z-index:2}
.meld .tile{overflow:visible;border-color:var(--meld-glow);box-shadow:0 4px #a6b19a,0 7px #315e4f,0 9px #16382e,0 0 9px color-mix(in srgb,var(--meld-glow) 40%,transparent)}
.meld .tile::before{content:'';position:absolute;inset:-10% -65%;z-index:2;pointer-events:none;background:linear-gradient(118deg,transparent 15%,#efa6cc33 35%,#97deff66 49%,#ffe9a13d 64%,transparent 85%);animation:meldFoil 7s linear infinite;mix-blend-mode:screen}
.meld .tile:nth-child(2)::before{animation-delay:-.7s}.meld .tile:nth-child(3)::before{animation-delay:-1.4s}
.meld .tile::before{inset:0;clip-path:inset(0 round 4px);background-size:250% 100%;animation-name:meldFoilSurface;transform:translateZ(2px)}
.meld.depth-active .tile::before{animation:none;background-position:var(--light-x,50%) var(--light-y,50%);background-image:linear-gradient(var(--foil-angle,115deg),transparent 4%,#f5c8ff55 28%,#a4e7ff99 46%,#fff4a877 62%,transparent 90%)}
@keyframes meldFoilSurface{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes meldFoil{from{transform:translateX(-50%)}to{transform:translateX(50%)}}
@keyframes meldArrive{from{opacity:0;transform:translateY(9px) scale(.94)}to{opacity:1;transform:none}}

@media(max-width:1100px) and (min-width:701px){
 .table-core{grid-template-columns:114px minmax(0,1fr) 114px;gap:9px}
 .table-core .opponent .tile.mini,.table-core .op-melds .meld>.back{width:32px;height:45px}
 .table-core .top-player .back{width:35px;height:49px}
 .opponent>.player-label{font-size:14px}
 .opponent-rack{padding-inline:4px}
}
@media(max-width:800px){
 .lobby{align-items:flex-start;padding:76px 20px 35px}
 .lobby-shell,.waiting-shell{display:flex;flex-direction:column;width:min(460px,100%);gap:28px}
 .lobby .title-scene{display:block;width:100%}
 .lobby .title-scene .eyebrow{margin:24px 0 10px}
 .lobby .hero-tiles{height:105px}
 .lobby .hero-tile{width:68px;height:92px;font-size:54px}
 .lobby .title-scene h1{font-size:60px}
 .lobby .subtitle{margin:15px 0 24px}
 .match-options,#waitingOptionsSlot{width:100%}
 .match-options{padding:23px 22px}
 .waiting{display:block}
 .waiting-shell .waiting-card{padding:25px 22px}
}
@media(max-width:700px) and (orientation:portrait){
 .table-core{grid-template-columns:86px minmax(0,1fr) 86px;gap:6px;grid-template-rows:auto minmax(0,1fr)}
 .table-core .opponent{gap:5px;padding-inline:0}
 .opponent>.player-label{font-size:12px;padding:5px 6px;white-space:nowrap}
 .table-core .top-player .player-label{font-size:12px}
 .top-player .opponent-rack{min-height:55px;max-height:130px;gap:9px;padding:8px 3px 10px;flex-wrap:wrap}
 .table-core .top-player .back{width:25px;height:35px;border-width:2px}
 .table-core .left-player .backs>.back,.table-core .right-player .backs>.back{width:40px;height:29px;margin-top:-9px}
 .opponent .backs> :nth-child(n+4){display:none}
 .opponent .backs::after{content:'×' attr(data-count);align-self:center;font-size:12px;color:#d4dec1;white-space:nowrap;padding:3px}
 .opponent .backs[data-count="0"]{display:none}
 .top-player .backs::after{margin-left:3px}
 .left-player .opponent-rack,.right-player .opponent-rack{gap:11px;padding:9px 3px 12px}
 .table-core .op-melds{gap:12px;padding:1px}
 .table-core .opponent .tile.mini,.table-core .op-melds .meld>.back{width:24px;height:34px;border-width:1px}
 .table-core .op-melds .meld{gap:2px}
 .discard-piles{grid-template-columns:repeat(auto-fit,28px);width:100%;gap:4px;padding:7px 1px 12px}
 .discard-piles .tile{width:28px;height:39px}
 .my-hand{gap:7px 3px;max-width:none;padding:14px 0 8px;min-height:0}
 .my-hand .tile{width:min(54px,calc((100cqw - 18px)/7));max-width:none;aspect-ratio:64/89}
 .my-hand .tile:hover{--lift:-5px}
 .my-hand .tile.selected{--lift:-10px!important}
 .my-melds{gap:10px;padding-top:7px}
 .my-melds .tile{width:28px;height:39px}
}
@media(max-height:700px) and (orientation:portrait){
 .table-core{grid-template-columns:76px minmax(0,1fr) 76px;gap:4px}
 .top-player .opponent-rack{max-height:86px;min-height:44px;padding:5px 2px}
 .table-core .top-player .back{width:22px;height:31px}
 .table-core .opponent .tile.mini,.table-core .op-melds .meld>.back{width:21px;height:30px}
 .my-hand .tile{width:min(45px,calc((100cqw - 18px)/7))}
 .my-hand{padding-top:11px}
 .discard-piles{grid-template-columns:repeat(auto-fit,25px)}
 .discard-piles .tile{width:25px;height:35px}
}
@media(max-height:540px) and (orientation:landscape){
 .lobby,.waiting{overflow-y:auto;display:block}
 .lobby-shell{display:block;width:min(530px,100%)}
 .waiting-shell{display:grid;grid-template-columns:1fr 280px;gap:28px;width:min(850px,100%);max-width:none}
 .lobby .title-scene h1{font-size:42px}.lobby .hero-tiles{height:65px}
 .lobby .hero-tile{width:43px;height:60px;font-size:36px}
 .lobby .title-scene .eyebrow{font-size:9px;margin:8px 0}
 .lobby .subtitle{margin:10px 0 15px;font-size:14px}
 .match-options{padding:18px}.match-options h2{font-size:24px;margin-bottom:10px}
 .option-row{font-size:14px;padding:8px 0}.option-row select{font-size:14px;padding:5px 8px;min-width:95px}
 .table-core{grid-template-columns:88px minmax(0,1fr) 88px;grid-template-rows:auto minmax(0,1fr);gap:5px}
 .table-core .opponent{gap:4px;padding:0}
 .opponent>.player-label{font-size:10px;padding:3px 5px}
 .top-player .opponent-rack{max-height:72px;min-height:43px;padding:4px 3px 6px;gap:7px}
 .table-core .top-player .back{width:25px;height:35px;border-width:2px}
 .table-core .left-player .backs>.back,.table-core .right-player .backs>.back{width:36px;height:23px;margin-top:-10px}
 .opponent .backs> :nth-child(n+4){display:none}
 .opponent .backs::after{content:'×' attr(data-count);font-size:10px;color:#d4dec1;white-space:nowrap;align-self:center}
 .opponent .backs[data-count="0"]{display:none}
 .table-core .opponent .tile.mini,.table-core .op-melds .meld>.back{width:24px;height:34px}
 .opponent-rack{padding:5px 3px 8px}.table-core .op-melds{gap:10px;padding:1px}
 .my-hand{padding:12px 0 7px;gap:3px;min-height:0}
 .my-hand .tile{width:min(45px,calc((100cqw - 42px)/14));aspect-ratio:64/89}
 .my-hand .tile.selected{--lift:-10px!important}
 .my-melds{position:static;max-width:none;flex-wrap:wrap;gap:8px;padding:5px 0}
 .my-melds .tile{width:26px;height:36px}
 .discard-piles{grid-template-columns:repeat(auto-fit,29px);width:min(100%,331px);gap:4px}
 .discard-piles .tile{width:29px;height:40px}
}