/* Only the page owns device insets. Fixtures can override --test-safe-* without
   impersonating a device; remove those properties to restore native env(). */
:root{
 --safe-top:var(--test-safe-top,env(safe-area-inset-top,0px));
 --safe-right:var(--test-safe-right,env(safe-area-inset-right,0px));
 --safe-bottom:max(12px,var(--test-safe-bottom,env(safe-area-inset-bottom,0px)));
 --safe-left:var(--test-safe-left,env(safe-area-inset-left,0px));
 --safe-width:calc(100vw - var(--safe-left) - var(--safe-right));
 --safe-height:calc(100dvh - var(--safe-top) - var(--safe-bottom));
 --app-safe-top:var(--safe-top);
 --app-safe-right:var(--safe-right);
 --app-safe-bottom:var(--safe-bottom);
 --app-safe-left:var(--safe-left);
}
html{min-height:100%;background:#1b1915}
html body{box-sizing:border-box;margin:0;min-width:0;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
/* Keep the status-area canvas and header on the same opaque page surface.
   Safe insets reserve hardware space; the header adds its own visual gap. */
html body>.masthead{background:#1b1915}

/* The header and scrollable application share the already-inset page. A short
   viewport may scroll rather than clipping a hand or shrinking touch targets. */
html body.playing{
 height:100vh;height:100dvh;min-height:0;overflow:hidden;
 display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;
 container-name:play-viewport;container-type:size;
}
html body.playing>.masthead{grid-row:1;flex-shrink:0}
html body.playing>#app{
 grid-row:2;height:100%!important;min-height:0;min-width:0;
 padding-bottom:0!important;overflow:auto!important;overscroll-behavior:contain;
 scroll-padding-block:8px;-webkit-overflow-scrolling:touch;
}
html body.playing>footer{display:none}
html body.playing #app>.table-shell{height:auto!important;min-height:100%;min-width:0}
html body.playing #app :is(.table-layout,.classic-layout,.pife-play-area,.maumau-play){flex-shrink:0!important}

/* Existing compact layouts reserved space for a separate chat button. */
html body.playing>.masthead{padding-right:16px!important;padding-left:16px!important;gap:12px}
html body.playing>.masthead .profile-chip{margin-right:0!important}
html body.playing #app .table-toolbar>div:first-child{padding-left:0!important;min-width:0}

/* Top-layer dialogs are positioned against the viewport, outside body padding. */
html body>dialog{
 position:fixed!important;
 inset:calc(var(--safe-top) + 8px) calc(var(--safe-right) + 8px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 8px)!important;
 margin:auto!important;box-sizing:border-box;
 width:min(var(--safe-dialog-width,460px),calc(var(--safe-width) - 16px))!important;
 max-width:min(calc(var(--safe-width) - 16px),calc(100% - var(--safe-left) - var(--safe-right) - 16px))!important;
 height:fit-content;min-height:0;max-height:calc(var(--safe-height) - 16px)!important;
 overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:12px;
}
html body>dialog.match-control-dialog{--safe-dialog-width:940px;overflow:hidden!important}
html body>dialog.table-wizard-dialog{
 --safe-dialog-width:760px;height:min(760px,calc(var(--safe-height) - 16px));padding:0;overflow:hidden!important;
}
html body>dialog.online-dialog{--safe-dialog-width:560px;padding:0;overflow:hidden!important}
html body>dialog.table-menu-dialog{--safe-dialog-width:400px}
/* The wizard is already inside the safe viewport; its footer needs only the
   normal visual gap, not a second copy of the device's bottom inset. */
html body>dialog.table-wizard-dialog>.wizard-footer{padding-bottom:12px}
html body>dialog :is(button,select,input:not([type=checkbox]):not([type=radio])){min-height:44px;min-width:44px}
html body>dialog :is(input,select,textarea){max-width:100%;font-size:16px}
/* A title receives initial focus for screen readers, without looking selected.
   Interactive controls keep their normal visible keyboard focus. */
html body>dialog :is(h1,h2,h3)[data-dialog-heading]:focus{outline:none}
html body>#toast{
 top:auto!important;bottom:calc(var(--safe-bottom) + 12px)!important;
 left:calc(var(--safe-left) + var(--safe-width)/2);
 max-width:calc(var(--safe-width) - 24px);box-sizing:border-box;overflow-wrap:anywhere;
}
html body.playing>.update-notice{
 position:fixed;top:calc(var(--safe-top) + 44px);left:var(--safe-left);right:var(--safe-right);width:auto;z-index:15;
 max-height:calc(var(--safe-height) - 44px);overflow-y:auto;
}

@media(max-width:650px){
 /* All insets are on body: restore visual spacing without adding env() again. */
 html body.in-game #app{padding-bottom:0!important}
 html body.in-game #app .table-shell.game-cacheta{padding-bottom:12px}
 html body.in-game #app .actions{padding-bottom:7px}
 html body.in-game #app .game-tressette .actions,
 html body.in-game #app .classic-game .actions,
 html body.in-game #app .game-pife .actions,
 html body.in-game #app .game-maumau .actions,
 html body.in-game #app .game-cacheta .actions{padding-bottom:0}
 /* Sticky hands live inside the safe #app scrollport, so bottom zero is safe. */
 html body.playing #app .hand-section{bottom:0}
 html body.playing>.masthead{
  display:flex!important;height:60px!important;min-height:60px!important;padding:10px 12px 6px!important;gap:8px;
 }
 html body.playing>.masthead .brand{font-size:23px;letter-spacing:-1px;gap:5px;min-width:0}
 html body.playing>.masthead .brand-seal{width:26px;height:26px;font-size:19px;line-height:24px;flex-shrink:0}
 html body.playing>.masthead :is(.brand small,.connection){display:none}
 html body.playing:has(#app)>.masthead .profile-chip{margin-left:auto;max-width:140px;margin-right:0;height:44px;min-height:44px;padding:6px 10px;font-size:12px;line-height:18px;align-self:center}
 html body.in-game #app .table-toolbar{
  display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:56px;flex-basis:56px;gap:8px;padding-block:6px;align-items:center;
 }
 html body.in-game #app .toolbar-buttons{display:flex;width:auto;flex-wrap:nowrap;gap:4px}
 html body.in-game #app .toolbar-buttons>button:not(#match-control):not(#table-more):not(#visibility-shortcut){display:none!important}
 html body.in-game #app .toolbar-buttons>:is(#match-control,#table-more){
  display:inline-flex!important;justify-content:center;align-items:center;
  flex:0 0 auto;min-width:44px;min-height:44px;height:44px;padding:6px 10px;font-size:12px;
 }
 html body.in-game #app .table-toolbar>div:first-child{padding-left:0}
 html body.playing #app>.table-shell{padding-inline:12px}
 html body.playing>.update-notice{top:calc(var(--safe-top) + 60px);max-height:calc(var(--safe-height) - 60px)}
 html body>dialog{padding:18px}
 html body>dialog:is(.match-control-dialog,.table-wizard-dialog,.online-dialog){padding:0}
 html body>dialog.table-wizard-dialog>.wizard-footer{padding-bottom:10px}
 /* Public accusi use a fixed overlay rather than the normal page flow. */
 html body.playing #app .tressette-accuso-history[open] .tressette-accuso-records{
  inset:calc(var(--safe-top) + 88px) calc(var(--safe-right) + 12px) auto calc(var(--safe-left) + 12px);
  max-height:calc(var(--safe-height) - 112px);overflow:auto;
 }
}
@media(min-width:651px){html body.playing>.update-notice{top:calc(var(--safe-top) + 56px);max-height:calc(var(--safe-height) - 56px)}}

/* The query measures the body's content box, after physical safe insets. A
   short usable viewport keeps the full hand and native 44px actions visible. */
@container play-viewport (max-height:620px){
 html body.playing>.masthead{display:none!important}
 @media(max-width:650px){html body.playing #app .table-toolbar{min-height:44px;flex-basis:44px;padding-block:0}}
 html body.playing #app .game-pife>.pife-round-meta,
 html body.playing #app .game-pife #pife-action-hint{display:none!important}
 html body.playing #app .game-pife .pife-felt{min-height:86px!important;padding:3px 6px!important;gap:2px}
 html body.playing #app .game-pife .pife-piles{margin:0;gap:18px}
 html body.playing #app .game-pife .pife-hand-section{margin-top:0}
 @media(max-width:650px){html body.playing #app .game-pife .pife-unit .card{width:44px!important}}
 html body.playing>.update-notice{top:var(--safe-top);max-height:var(--safe-height)}
}
@container play-viewport (max-height:620px){
 @media(max-width:650px){
  html body.playing #app .game-tressette .tressette-score-meta,
  html body.playing #app .game-tressette .hand-heading,
  html body.playing #app .game-tressette .selected-play-card,
  html body.playing #app .game-tressette .signal-action-status{display:none}
  html body.playing #app .game-tressette .tressette-live-score{min-height:38px;padding:2px 5px}
  html body.playing #app .game-tressette .side-felt{min-height:80px;flex-basis:80px}
  html body.playing #app .game-tressette .team-tag{display:none}
  html body.playing #app .game-tressette .trick-play>.card{width:24px}
  html body.playing #app .game-tressette .hand{gap:2px;padding:2px}
  html body.playing #app .game-tressette .actions{gap:0;padding:0}
 }
}