/* t8372u (owner, Nov 8 2026): the table and the cards get the screen. Loaded last on index.html.
   Portrait phones: one thin action row (More, the actions, Chat) and a one-line disclaimer, about 8% of the height.
   Short landscape phones: actions stay on the right in a narrow column (about 16% of the width), no empty white panel.
   The table chat panel stays collapsed until opened (table-talk.js remembers the choice) and is short when open. */
@media (max-width:900px) and (orientation:portrait){
  #table #actionBar{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:auto;column-gap:6px;row-gap:2px;align-items:center;
    padding:4px 8px calc(2px + env(safe-area-inset-bottom))!important;margin:0!important;min-height:0!important}
  #table #actionBar > #toolsMore{grid-column:1;grid-row:1}
  #table #actionBar > #actsMain,#table #actionBar > #preActs{grid-column:2;grid-row:1;margin:0!important;min-width:0}
  #table #actionBar > #talkHandle{grid-column:3;grid-row:1;margin:0!important;align-self:center}
  #table #actionBar > #raiseRow,#table #actionBar > #barTools,#table #actionBar > #barNotice{grid-column:1 / -1}
  #table #actionBar > #preActs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
  #table #actionBar > #preActs[hidden],#table #actionBar > #actsMain[hidden]{display:none!important}
  #table #actionBar #preActs .chk{min-height:44px;margin:0;font-size:13px;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #table #barNotice{font-size:10px!important;line-height:12px!important;margin:1px 0 0!important;padding:0!important;text-align:center}
  #chatDrawer.chat-drawer,html.pp-tt #chatDrawer.chat-drawer{max-height:min(25dvh,210px)!important}
}
@media (orientation:landscape) and (max-height:520px),(orientation:landscape) and (pointer:coarse) and (min-height:521px) and (max-height:1100px) and (max-width:1400px){
  /* left: a thin rail with the table buttons; middle: the felt, top to bottom; right: the actions in a narrow column */
  #table{grid-template-columns:calc(48px + env(safe-area-inset-left)) minmax(0,1fr) calc(clamp(112px,16vw,150px) + env(safe-area-inset-right))!important;grid-template-rows:auto minmax(0,1fr) auto!important;
    grid-template-areas:"tb pn ab" "tb st ab" "tb nt ab"!important;background:#0d1a17}
  #table > #crewPanel,#table > #botDrawer,#table > #masterBoard,#table > #voiceStrip{grid-area:pn!important;position:relative!important;width:auto!important;max-height:150px!important;overflow:auto!important;margin:4px!important;z-index:9}
  #table > p.notice7a{grid-area:nt!important;position:static!important;width:auto!important;margin:0!important;padding:1px 4px calc(1px + env(safe-area-inset-bottom))!important;
    font-size:10px!important;line-height:12px!important;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#0d1a17!important}
  html body #table > p.notice7a{color:#cfe3df!important}
  #turnDock{left:calc(48px + env(safe-area-inset-left))!important;right:calc(clamp(112px,16vw,150px) + env(safe-area-inset-right))!important;box-shadow:none!important;background:transparent!important;border:0!important}
  #table .topbar{grid-area:tb!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;justify-content:flex-start;align-items:center;gap:4px!important;
    padding:calc(52px + env(safe-area-inset-top)) 2px calc(4px + env(safe-area-inset-bottom)) calc(2px + env(safe-area-inset-left))!important;box-sizing:border-box!important;margin:0!important;
    width:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;align-items:flex-end!important;background:#0d1a17!important;border:0!important;box-shadow:none!important;position:relative!important}
  #table .topbar > #menuBtn,#table .topbar > #tableInfoBtn,#table .topbar > #pauseSlot,#table .topbar > #prefsBtn,#table .topbar > #chatBubble{width:44px!important;min-width:44px!important;max-width:44px!important;padding:0!important}
  #table .topbar > #pauseSlot #pauseBtn{width:44px!important;min-width:44px!important;padding:0!important;font-size:11px!important}
  #table .topbar > #pauseSlot #pauseInfo{display:none!important}
  #table .topbar > #prefsBtn{font-size:0!important}
  #table .topbar > #prefsBtn > span{font-size:20px!important}
  #table .topbar > #chatBubble{display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:12px!important;line-height:1!important;position:relative!important;height:44px!important}
  #table #stage{grid-area:st!important;min-width:0!important;overflow:hidden!important} /* t8386: the felt never spills over the left rail (iPhone notch side) */
  #table #actionBar{grid-area:ab!important;display:flex!important;flex-direction:column!important;justify-content:flex-end;align-items:stretch;gap:6px;min-height:0;
    padding:calc(52px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) 4px 6px!important;background:#0d1a17!important;border:0!important;box-shadow:none!important;overflow:auto;width:auto!important}
  /* FX-10 (forensics t8381): the right column's empty top now carries the level and blinds (small, read-only); it steps
     aside while raising (the slider needs the room). The left rail's top glow was the menu button's sheen spilling over the
     whole rail (its ::before had no positioned parent) and washing out the menu and info icons: kept inside each button now. */
  #table #actionBar > #levelInfo{display:block!important;flex:0 0 auto;order:-2;margin:0 0 auto!important;padding:0 2px!important;font-size:11px!important;line-height:1.3!important;
    font-weight:700!important;color:#cfe3df!important;-webkit-text-fill-color:#cfe3df;white-space:normal!important;overflow:hidden!important;max-height:4.2em;text-align:left!important}
  #table #actionBar.raising > #levelInfo{display:none!important}
  #table .topbar > #menuBtn,#table .topbar > #tableInfoBtn,#table .topbar > #prefsBtn,#table .topbar > #chatBubble,#table .topbar > .icon{position:relative!important}
  #table .topbar > #menuBtn,#table .topbar > #tableInfoBtn{color:#10201c!important;-webkit-text-fill-color:#10201c;font-weight:900!important}
  #table #actionBar > #toolsMore{align-self:flex-start;flex:0 0 auto;order:-1}
  #table #actionBar .acts{display:flex!important;flex-direction:column!important;gap:6px;margin:0!important;width:auto!important;height:auto!important;flex:0 0 auto}
  #table #actionBar .acts .act{width:100%!important;min-width:0!important;padding:0 6px!important;font-size:15px!important}
  #table #actionBar #preActs{display:flex;flex-direction:column;gap:6px;margin:0!important;flex:0 0 auto}
  #table #actionBar #preActs[hidden],#table #actionBar #actsMain[hidden]{display:none!important}
  #table #actionBar #preActs .chk{min-height:44px;margin:0;font-size:13px;padding:0 6px}
  /* t8386: readable pre-action toggles and rail icons (dark ink on the light buttons) */
  html body #table #actionBar #preActs .chk,html body #table #actionBar #preActs .chk span{color:#10201c!important;opacity:1!important}
  html body #table .topbar > #menuBtn,html body #table .topbar > #tableInfoBtn,html body #table .topbar > #prefsBtn,html body #table .topbar > #chatBubble{color:#10201c!important;opacity:1!important}
  html body #table .topbar > #prefsBtn > span{color:#10201c!important}
  #table #actionBar #raiseRow .presets6{flex-wrap:wrap}
  html body #table #actionBar p#barNotice{position:static!important;width:auto!important;left:auto!important;right:auto!important;bottom:auto!important;flex:0 0 auto;
    font-size:10px!important;line-height:12px!important;margin:0 0 calc(2px + env(safe-area-inset-bottom))!important;padding:0!important;text-align:center;color:#cfe3df!important;background:transparent!important}
  /* chat open: a short strip across the top of the felt; the felt moves down and redraws, so no card is covered */
  #table #chatDrawer.chat-drawer,html.pp-tt #table #chatDrawer.chat-drawer{grid-area:pn!important;align-self:start!important;justify-self:stretch!important;position:relative!important;
    width:auto!important;height:auto!important;max-height:150px!important;margin:4px!important;z-index:9}
}
/* the shuffle commitment line is for screen readers and the hand history, never printed over the felt or the cards */
#table #shuffleLine{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
/* "You're sitting out" and "Paused" sit over the (idle) action row / action column, never on the felt or the cards */
@media (orientation:portrait),(orientation:landscape) and (min-height:521px){
  #table #sitInBar,#table #pausedOv{position:fixed!important;left:8px!important;right:58px!important;top:auto!important;bottom:calc(16px + env(safe-area-inset-bottom))!important;transform:none!important;
    width:auto!important;max-width:none!important;max-height:40vh;overflow:auto;z-index:30!important;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;padding:4px 8px!important;margin:0!important;border-radius:12px}
  #table #sitInBar p,#table #pausedOv p{margin:0!important;font-size:12px!important;line-height:1.25!important}
  #table #sitInBar .btn,#table #pausedOv .btn{min-height:44px;padding:0 12px;font-size:15px}
}
@media (orientation:landscape) and (max-height:520px),(orientation:landscape) and (pointer:coarse) and (min-height:521px) and (max-height:1100px) and (max-width:1400px){
  #table #sitInBar,#table #pausedOv{position:fixed!important;left:auto!important;right:calc(4px + env(safe-area-inset-right))!important;top:auto!important;bottom:calc(18px + env(safe-area-inset-bottom))!important;transform:none!important;
    width:calc(clamp(112px,16vw,150px) - 8px)!important;max-width:none!important;max-height:70vh;overflow:auto;z-index:30!important;padding:6px!important;margin:0!important;border-radius:12px;text-align:center}
  #table #sitInBar p,#table #pausedOv p{margin:0 0 4px!important;font-size:11px!important;line-height:1.25!important}
  #table #sitInBar .btn,#table #pausedOv .btn{min-height:44px;width:100%;padding:0 4px;font-size:14px}
}
#table #sitInBar[hidden],#table #pausedOv[hidden]{display:none!important}

/* t8386 MF-A08: opponent's face-up cards, enlarged in the player sheet */
.pl-cards{margin:6px 0 4px}
.pl-cards-h{margin:0 0 4px;font-size:13px;font-weight:700}
.pl-cards-row{display:flex;flex-wrap:wrap;gap:6px}
.pl-cards-row canvas{border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* FX-06 (forensics t8381): the sitting-out bar stays one slim row inside the action-row band, never up over the hero's cards */
@media (orientation:portrait),(orientation:landscape) and (min-height:521px){
  #table #sitInBar,#table #pausedOv{flex-wrap:nowrap!important;max-height:56px!important;bottom:calc(4px + env(safe-area-inset-bottom))!important;overflow:hidden;max-width:560px!important;margin:0 auto!important}
  #table #sitInBar p,#table #pausedOv p{flex:1 1 auto;min-width:0;text-align:left}
  #table #sitInBar .btn,#table #pausedOv .btn{flex:0 0 auto;white-space:nowrap}
}
/* FX-11 (forensics t8381): a disabled Raise looks as disabled as Fold and Check */
html body #table #actionBar .act:disabled,html body #table #actionBar .act.raise:disabled{filter:grayscale(1)!important;opacity:.5!important;box-shadow:none!important;cursor:default}

/* FX-09 (BUG-20261109-006): the open Info panel reads as an overlay (dimmed table behind; tap outside closes it) */
@media (orientation:portrait),(min-height:521px){html body #table .crew-panel.is-open{box-shadow:0 0 0 100vmax rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.5)!important}}
/* Batch C contrast (forensics FX-09 shots): the Info panel's text, bot names and notes were dark on the dark panel */
html body #table #crewPanel :is(p,li,span,label,.hint,.zero-note,.crew-dealer):not(.btn):not(.btn *){color:#eef6f5!important;opacity:1!important}
html body #table #crewPanel a{color:#9fe8de!important}