/* Shared AI/online presentation; portraits keep their original 5:7 ratio. */
.hand{--fan-width:85px;--fan-height:119px}
@media(max-width:390px),(max-height:720px){.hand{--fan-width:71px;--fan-height:99.4px}}
@media(max-height:600px){.hand{--fan-width:66px;--fan-height:92.4px}}
.trick{--table-card:94px;width:320px;height:350px;max-width:calc(100% - 12px)}
.trick .played-card.card{width:var(--table-card);height:calc(var(--table-card)*7/5);aspect-ratio:5/7}
.trick .north-card{top:6px;bottom:auto;left:calc(50% - var(--table-card)/2)}
.trick .south-card{bottom:6px;top:auto;left:calc(50% - var(--table-card)/2)}
.trick .west-card{top:calc(50% - var(--table-card)*.7);left:5px;right:auto}
.trick .east-card{top:calc(50% - var(--table-card)*.7);right:5px;left:auto}
@media(max-width:390px),(max-height:720px){.trick{--table-card:79px;width:280px;height:300px}}
@media(max-height:600px){.trick{--table-card:70px;height:265px;top:36%}.north{top:3px;flex-direction:row;gap:4px}.north .avatar{width:26px;height:26px}.north small{display:none}}
/* Enlarge only the mobile table cards, not the fan or desktop cards.
   Cancel the legacy short-screen scale so card dimensions stay predictable. */
@media(max-width:600px){.trick{--table-card:clamp(88px,24vw,104px);width:340px;height:350px;transform:translate(-50%,-50%)}}
@media(max-width:600px) and (max-height:600px){.trick{--table-card:80px;height:265px}}
.trick.collect-north{--collect-x:0px;--collect-y:-185px}
.trick.collect-south{--collect-x:0px;--collect-y:185px}
.trick.collect-west{--collect-x:-185px;--collect-y:0px}
.trick.collect-east{--collect-x:185px;--collect-y:0px}
.trick[class*=collect-] .played-card{opacity:1;transition:none!important;animation:collectSilk .8s cubic-bezier(.2,.75,.2,1) both;transform:none!important;transform-origin:center}
.trick[class*=collect-] .played-card:nth-child(2){animation-delay:45ms}
.trick[class*=collect-] .played-card:nth-child(3){animation-delay:90ms}
.trick[class*=collect-] .played-card:nth-child(4){animation-delay:135ms}
@keyframes collectSilk{0%{translate:0 0;rotate:0deg;scale:1;opacity:1}22%{translate:0 -9px;rotate:-4deg;scale:1.045;opacity:1}100%{translate:var(--collect-x) var(--collect-y);rotate:18deg;scale:.16;opacity:0}}
.turn-clock{position:absolute;top:8px;left:8px;z-index:9;color:var(--accent);background:#061719d9;border:1px solid #ffffff25;border-radius:10px;padding:5px 9px;font-size:10px;font-variant-numeric:tabular-nums;pointer-events:none}
.offer-hand{border:1px solid #d6b77780;border-radius:10px;background:linear-gradient(150deg,#334b3b,#132424);color:#ffe4a7;font:11px Vazirmatn,Tahoma,sans-serif;padding:6px 10px;touch-action:manipulation;min-height:32px;cursor:pointer;white-space:nowrap}
.offer-hand:disabled{opacity:.5;cursor:default}
.offer-hand.not-ready{visibility:hidden;pointer-events:none}
/* One compact HUD replaces the old title bar; controls never cover the table. */
#gameScreen>.scoreboard{height:auto;flex:none;display:flex;flex-direction:column;gap:0;padding:calc(3px + env(safe-area-inset-top)) 8px 5px}
.scoreboard .score-strip{display:flex;align-items:center;justify-content:center;gap:28px;min-height:51px;width:100%}
.scoreboard .game-actions{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:34px}
.game-actions .icon-btn{width:32px;height:32px;flex:0 0 32px;border-radius:10px;font-size:19px;display:grid;place-items:center;padding:0}
.game-actions .offer-hand{margin-inline:4px}
.game-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.game-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.game-status.online-disconnected{position:fixed;top:100px;left:50%;transform:translateX(-50%);width:auto;height:auto;clip-path:none;white-space:normal;z-index:9;background:#702d2d;color:white;border-radius:10px;padding:7px 12px;font-size:12px}
.player>span{display:block;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.6;transition:transform .18s,color .18s;transform-origin:center}
.player.turn>span{transform:scale(1.22);color:var(--accent);font-weight:800;text-shadow:0 0 8px #000,0 0 12px #edc57580}
@media(max-width:350px){.scoreboard .game-actions{gap:4px}.game-actions .offer-hand{margin-inline:0;padding-inline:7px}.scoreboard .score-strip{gap:20px}}
@media(prefers-reduced-motion:reduce){.player>span{transition:none}}
.surrender-options{display:grid;gap:10px;margin-top:20px}
.surrender-options button{border:1px solid #dfbd7870;border-radius:13px;padding:13px;background:#25443e;color:#fff;font:inherit;cursor:pointer}
.surrender-options button:first-child{background:#643c3b}
#surrenderMessage{font-size:12px;line-height:1.9;color:#e5d4a9}
#redrawHandButton{width:100%;margin:6px 0 14px}
.hakam-emphasis .player.hakam{z-index:9}
.hakam-emphasis .player.hakam em{font-size:31px;line-height:34px;animation:crownBreathe 1.2s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px #ffd25c)}
.hakam-emphasis .player.hakam .avatar{border-color:#f4ca6a;box-shadow:0 0 24px #efca6f99}
@keyframes crownBreathe{from{transform:scale(1)}to{transform:scale(1.22);filter:drop-shadow(0 0 14px #ffe79f)}}
@media(prefers-reduced-motion:reduce){.trick[class*=collect-] .played-card{animation-duration:.12s;animation-delay:0s!important}.hakam-emphasis .player.hakam em{animation:none}}