html,body{height:100%;overflow:hidden}#table{height:100dvh;min-height:0}
#game{--hc:clamp(80px,15vh,130px);--ac:clamp(45px,9vh,72px);--tc:clamp(60px,12vh,100px);top:72px;display:grid;grid-template-rows:minmax(95px,1fr) minmax(130px,1.3fr) 48px calc(var(--hc)*1.39 + 30px) auto;padding:0 20px}
.opponent-zone{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}#game .opponent{top:50%;left:0;transform:translateY(-50%);min-width:0}
#game .hand{position:relative;inset:auto;transform:none;width:100%;height:auto;align-items:center;justify-content:center;min-width:0}#game .ai-hand{width:auto}
#game .card{align-self:center;flex-grow:0;flex-shrink:0;box-sizing:border-box}
#game .ai-hand .card{width:var(--ac);height:calc(var(--ac)*314/226);margin-left:-18px;transform:rotate(var(--r));transform-origin:center}#game .ai-hand .card:first-child{margin-left:0}
.play-zone{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;justify-items:center;min-height:0;max-width:900px;width:100%;height:100%;margin:auto}
#game .stock-area{position:relative;inset:auto;transform:none;width:160px;height:145px;display:grid;grid-template-rows:115px 30px;justify-items:center}#stock-cards{position:relative;width:160px;height:115px}
#game #stock-cards .card{width:65px;height:90px;top:5px;left:10px;transform-origin:center}#game #stock-cards .turnup{left:82px;top:18px;transform:rotate(90deg)}
#game #stock-label{position:static;width:100%;font-size:12px;line-height:15px;text-align:center;align-self:end;min-height:25px}
#game .trick{position:relative;inset:auto;transform:none;width:calc(var(--tc)*2 + 24px);height:calc(var(--tc)*1.39 + 18px);display:flex;align-items:center;justify-content:center;gap:10px}
#game .trick .card,#game .trick .card+.card{position:relative;inset:auto;width:var(--tc);height:calc(var(--tc)*314/226);transform:rotate(-5deg);transform-origin:center}#game .trick .card+.card{transform:rotate(5deg)}#game .trump-info{position:static;gap:4px}
#game #message{position:static;inset:auto;transform:none;width:100%;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;line-height:18px;padding:4px 10px;min-height:0}
#game .my-hand{align-self:center;height:100%;padding:12px 0 16px}#game .my-hand .card{width:var(--hc);height:calc(var(--hc)*314/226);margin-left:-23px;transform:rotate(var(--r));transform-origin:center}#game .my-hand .card:first-child{margin-left:0}#game .my-hand .card:hover:not(:disabled){transform:translateY(-9px) rotate(var(--r))}
.game-bar{background:#062c29fa;border-top:1px solid #ccb47355;margin:0 -20px;padding:9px 20px max(10px,env(safe-area-inset-bottom));z-index:5;display:flex;gap:18px;align-items:center;justify-content:space-between;box-shadow:0 -8px 28px #00282555}.bar-summary{display:flex;gap:14px;align-items:center;min-width:0}
#game .game-bar .home,#game .game-bar .last,#game .game-bar .player-panel,#game .game-bar .scoreboard,#game .game-bar .actions{position:static;inset:auto;transform:none;margin:0}
#game .player-panel{min-width:0;padding:0;border:0;background:none;box-shadow:none;gap:8px}#game .player-panel .eyes{margin-left:5px}
#game .scoreboard{display:grid;grid-template-columns:auto auto;min-width:102px;width:auto;border:1px solid #b9a16644;border-radius:6px}#game .scoreboard .score-title{grid-column:1/-1;padding:3px 7px;font-size:9px!important;letter-spacing:.5px;gap:3px}#game .scoreboard>div:not(.score-title){padding:3px 7px;gap:8px;font-size:11px;border:0}#game .scoreboard b{font-size:16px}
#game .actions{display:flex;gap:8px;width:auto;justify-content:center}#game .actions .small-button{font-size:12px;padding:10px;flex-direction:column;gap:5px;min-height:52px}#game .last,#game .home{width:38px;height:38px;padding:7px;flex-shrink:0}
@media(max-width:950px){.game-bar{flex-direction:column;gap:7px;padding-top:7px;padding-bottom:max(7px,env(safe-area-inset-bottom))}.bar-summary{width:100%;justify-content:space-between;gap:8px}#game .actions{width:100%;gap:8px}#game .actions .small-button{flex:1;flex-direction:row;min-height:38px;padding:7px;font-size:12px}#game .player-panel .avatar{display:none}#game .player-panel strong{font-size:12px}#game .player-panel span{font-size:10px}#game .eyes b{font-size:26px}#game .opponent .avatar{width:36px;height:36px}#game .opponent .avatar .icon{width:23px;height:23px}#game .opponent{padding:7px;gap:7px}#game .opponent strong{font-size:14px}#game .opponent span{font-size:11px}}
@media(max-width:600px){#game{--hc:clamp(63px,19vw,95px);--ac:clamp(40px,11vw,55px);--tc:clamp(52px,15vw,76px);top:64px;padding:0 10px;grid-template-rows:minmax(110px,1fr) minmax(115px,1.2fr) 48px calc(var(--hc)*1.39 + 30px) auto}#game .opponent-zone{flex-direction:column;justify-content:center;gap:12px;padding:2px 0 6px}#game .opponent{position:static;transform:none;background:none;border:0;box-shadow:none;padding:0}#game .opponent .avatar{width:25px;height:25px}#game .opponent .avatar .icon{width:16px;height:16px}#game .opponent>div:last-child{display:flex;gap:8px;align-items:center}#game .opponent span{margin:0}#game .ai-hand .card{margin-left:-14px;transform:none}.play-zone{grid-template-columns:100px 1fr 36px;gap:2px}#game .stock-area{width:100px;height:103px;grid-template-rows:77px 26px}#stock-cards{width:100px;height:77px}#game #stock-cards .card{width:41px;height:57px;left:3px;top:0}#game #stock-cards .turnup{left:51px;top:7px}#game #stock-label{font-size:10px;line-height:13px;min-height:26px}#game .trump-info span{font-size:8px;letter-spacing:0}#game .trump-info b{font-size:30px}#game .trick{gap:4px;width:calc(var(--tc)*2 + 8px)}#game .my-hand .card{margin-left:-15px;--r:0deg!important;transform:none}#game .my-hand .card:hover:not(:disabled){transform:translateY(-8px)}#game #message{font-size:13px;line-height:17px;padding:3px 8px}.game-bar{margin:0 -10px;width:calc(100% + 20px);padding-left:10px;padding-right:10px}#game .actions .small-button{font-size:10px;gap:5px;padding:6px 4px}#game .actions .icon{width:16px;height:16px}#game .player-panel{gap:5px}#game .player-panel .eyes{margin:0}#game .player-panel .eyes span{font-size:9px}#game .home,#game .last{height:32px;width:32px}#game .scoreboard{min-width:94px}#game .scoreboard>div:not(.score-title){font-size:10px;padding:2px 5px}#game .eyes b{font-size:24px}}
@media(max-height:620px){#game{--hc:68px;--ac:36px;--tc:52px;top:54px;grid-template-rows:minmax(81px,1fr) minmax(95px,1fr) 38px 108px auto}.topbar{top:6px}#game .opponent-zone{gap:5px}#game .my-hand{padding:8px 0}.game-bar{gap:4px}#game .actions .small-button{min-height:32px}#game .trump-info b{font-size:27px}}
@media(max-height:480px) and (min-width:601px){#game{--hc:60px;--ac:35px;--tc:52px;top:50px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 35px 103px auto}.opponent-zone{grid-column:1}.play-zone{grid-column:2;grid-row:1/3}#game #message{grid-column:1;grid-row:2;font-size:12px}#game .my-hand{grid-column:1/-1;grid-row:3}.game-bar{grid-column:1/-1;flex-direction:row;padding-top:5px;padding-bottom:5px;gap:10px}.bar-summary{width:auto;flex:1}#game .actions{width:auto}#game .actions .small-button{font-size:10px;flex-direction:column;gap:2px}#game .opponent{left:0}#game .opponent-zone{justify-content:flex-end;padding-right:15px}#game .player-panel .eyes span{display:none}}
@media(max-height:510px) and (max-width:600px){html,body{overflow:auto}#table{height:510px}}
@media(min-width:951px) and (min-height:621px){
  #game{--ac:clamp(62px,calc(20vh - 60px),108px);--sc:clamp(72px,calc(15vh - 20px),100px);grid-template-rows:minmax(calc(var(--ac)*1.39 + 20px),1fr) minmax(calc(var(--sc)*1.39 + 45px),1.3fr) 48px calc(var(--hc)*1.39 + 30px) auto}
  #game .ai-hand .card{margin-left:-26px}
  #game .ai-hand .card:first-child{margin-left:0}
  #game .stock-area{width:calc(var(--sc)*2.3);height:calc(var(--sc)*1.39 + 45px);grid-template-rows:calc(var(--sc)*1.39 + 15px) 30px}
  #game #stock-cards{width:calc(var(--sc)*2.3);height:calc(var(--sc)*1.39 + 15px)}
  #game #stock-cards .card{width:var(--sc);height:calc(var(--sc)*314/226);left:10px;top:5px}
  #game #stock-cards .turnup{left:calc(var(--sc)*1.1);top:calc(var(--sc)*.2)}
  #game #stock-label{font-size:13px;line-height:17px;min-height:26px}
}