/* App-like, edge-to-edge embedding. Safe areas preserve notches and home bars. */
html{height:100%;overscroll-behavior:none;color-scheme:dark;-webkit-text-size-adjust:100%}
body{height:100%;min-height:100dvh;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button{user-select:none;-webkit-user-select:none;min-height:44px}input,select{font-size:16px}
.shell{max-width:1600px;min-height:100dvh;padding:env(safe-area-inset-top,0px) max(18px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(18px,env(safe-area-inset-left,0px))}
.top{height:70px;flex-shrink:0}.fullscreen-toggle{font-size:25px!important;padding:6px 10px!important;min-width:44px}
body[data-screen=table] .shell{height:100dvh;display:flex;flex-direction:column}
body[data-screen=table] .game-head{flex-shrink:0;padding:10px 0;min-height:46px}
body[data-screen=table] .game-layout{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 230px}
body[data-screen=table] .game-layout>div{display:grid;min-height:0;grid-template-rows:minmax(190px,1fr) auto 26px auto;gap:8px}
body[data-screen=table] .arena{height:auto;min-height:190px}
body[data-screen=table] .felt{inset:50px 28px 48px}
body[data-screen=table] .p1,body[data-screen=table] .p3{top:calc(50% - 35px)}
body[data-screen=table] .t0{top:calc(50% - 2px)}body[data-screen=table] .t2{top:calc(50% - 90px)}
body[data-screen=table] .t1,body[data-screen=table] .t3{top:calc(50% - 45px)}
body[data-screen=table] .controls{width:100%;max-width:850px;min-height:86px;margin:0 auto;padding:10px 14px}
body[data-screen=table] .controls p{margin-bottom:6px}
body[data-screen=table] .hand{min-height:0;padding:8px 6px 4px;margin:0 auto;width:100%;align-content:center}
body[data-screen=table] .shell>.center{flex-shrink:0;height:44px}
body[data-screen=table] .avatar{width:34px;height:34px}
body[data-screen=table] .sidebar{margin-top:30px}
@media(max-width:800px){
 body[data-screen=table] .game-layout{display:block}
 body[data-screen=table] .game-layout>div{height:100%}
 .top{height:64px;gap:4px}.brand{font-size:19px;gap:7px}.brand b{font-size:30px}.brand small{font-size:8px;letter-spacing:2px}
 .top nav{gap:0}.top nav button{font-size:13px;padding:7px}
 body[data-screen=table] .hand{flex-wrap:wrap;gap:6px 5px;max-width:410px}
 body[data-screen=table] .hand .card,body[data-screen=table] .hand .card:first-child{margin:0;width:calc((100% - 30px)/7);height:75px;padding:6px;font-size:18px}
 body[data-screen=table] .hand .card .suit{font-size:23px}
 body[data-screen=table] .hand .card .bottom{display:none}
 body[data-screen=table] .hand .card.selected,body[data-screen=table] .hand .card:hover:not(:disabled){transform:translateY(-5px)}
 body[data-screen=table] .felt{inset:47px 15px 43px}
 body[data-screen=table] .trick-card .card{width:51px;height:73px;font-size:17px;padding:5px}
 body[data-screen=table] .trick-card .card .suit{font-size:22px}
 body[data-screen=table] .t0{top:calc(50% - 2px)}body[data-screen=table] .t2{top:calc(50% - 69px)}
 body[data-screen=table] .t1,body[data-screen=table] .t3{top:calc(50% - 35px)}
 body[data-screen=table] .t1{left:calc(50% + 18px)}body[data-screen=table] .t3{left:calc(50% - 77px)}
 .shell{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
 .pill{font-size:12px;padding:5px 8px}.game-head{font-size:13px;gap:5px}
 .controls .control-row{gap:6px}.controls .target-btn{padding:7px 12px}
}
@media(max-width:360px){.brand small{display:none}.brand{font-size:16px}.top nav button{padding:5px;font-size:12px}.fullscreen-toggle{min-width:36px!important}.controls .target-btn{padding:6px 9px}}
@media(max-height:650px){body[data-screen=table] .shell{height:auto;min-height:100dvh}body[data-screen=table] .game-layout>div{grid-template-rows:210px auto 26px auto}.top{height:56px}}
@media(prefers-reduced-motion:no-preference){button:active:not(:disabled){scale:.97}}