/* Phone layouts. Loaded after the table components and before dialogs.css.
   Desktop geometry stays in those components; the phone uses one destination
   at a time, with a permanent thumb navigation and unscaled turn controls. */
.tbl-mobile-nav,.tbl-mobile-turn,.tbl-board-tools{display:none}
#screen-game.table .tbl-mobile-notices{display:none}

@media (max-width:600px), (max-width:1000px) and (max-height:500px){
  /* Text entry must not trigger iOS's automatic zoom. The 44px targets also
     apply to narrow browser windows whose pointer is still reported as fine. */
  .input,.combo-btn,.nav-link,.nav-account{min-block-size:44px}
  input.input,select.input,textarea.input{font-size:max(16px,var(--t-sm))}
  .nav{padding-inline:max(var(--s2),env(safe-area-inset-left,0px)) max(var(--s2),env(safe-area-inset-right,0px))}
  .nav-links{gap:var(--s1);margin-block-start:var(--s1)}
  .nav-link{min-inline-size:0;padding-inline:var(--s1);font-size:var(--t-xs)}
  .nav-brand,.nav .btn-icon{min-inline-size:44px;min-block-size:44px}

  #screen-home .home{
    align-items:flex-start;justify-content:flex-start;
    padding:var(--s4) max(var(--s3),env(safe-area-inset-right,0px))
      calc(var(--s5) + env(safe-area-inset-bottom,0px)) max(var(--s3),env(safe-area-inset-left,0px));
  }
  #screen-home .home-inner{gap:var(--s4);margin-block:0}
  #screen-home .home-card{gap:var(--s3)}
  #screen-home .home-head{gap:var(--s1)}
  #screen-home .home-head h1{font-size:var(--t-2xl)}
  #screen-home .home-head p{font-size:var(--t-xs);line-height:1.45}
  #screen-home .home-eyebrow{font-size:var(--t-xs);letter-spacing:.06em}
  #screen-home .identity .input{min-inline-size:0;min-block-size:48px}
  #screen-home #home-name-hint{margin-block-start:calc(-1 * var(--s2));font-size:var(--t-xs)}
  #screen-home .mode{padding:var(--s3);gap:var(--s3);min-block-size:68px}
  #screen-home .mode-hero{min-block-size:80px}
  #screen-home .mode-hero .mode-copy strong{font-size:var(--t-lg)}
  #screen-home .mode-copy small{font-size:var(--t-xs)}
  #screen-home .home-live{gap:var(--s2);padding:var(--s2) 0}
  #screen-home .home-live-figs{gap:var(--s3);flex-wrap:wrap}
  #screen-home .home-foot{padding-block-start:0;gap:var(--s2)}

  /* Setup keeps the source order. Future-map previews become a compact row,
     leaving the playable map, game rules and player names easier to reach. */
  #screen-lobby .lobby{padding:var(--s3) max(var(--s2),env(safe-area-inset-right,0px))
    calc(var(--s5) + env(safe-area-inset-bottom,0px)) max(var(--s2),env(safe-area-inset-left,0px))}
  #screen-lobby .lobby-inner,#screen-lobby .pp-main{gap:var(--s3)}
  #screen-lobby .pp-head{gap:var(--s3);padding-block:0}
  #screen-lobby .pp-sub{font-size:var(--t-xs);line-height:1.4}
  #screen-lobby .pp-title{font-size:var(--t-xl)}
  #screen-lobby .pp-sec{padding:var(--s3)}
  #screen-lobby .pp-sec-head{font-size:var(--t-sm);margin-block-end:var(--s3)}
  #screen-lobby .map-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:var(--s2)}
  #screen-lobby .map-card.is-picked{grid-column:1/-1}
  #screen-lobby .map-card{min-inline-size:0;gap:var(--s2);padding:var(--s2)}
  #screen-lobby .map-card .map-cap{padding:0;min-inline-size:0}
  #screen-lobby .map-card strong{font-size:var(--t-sm);overflow-wrap:anywhere}
  #screen-lobby .map-card .map-art svg{inline-size:36px;block-size:36px}
  #screen-lobby .map-card-soon{min-block-size:56px;padding:var(--s2);border-color:var(--line-soft)}
  #screen-lobby .map-card-soon .map-art,
  #screen-lobby .map-card-soon .map-preview,
  #screen-lobby .map-card-soon .map-lock{display:none}
  #screen-lobby .map-facts{font-size:var(--t-xs)}
  #screen-lobby .map-preview{min-block-size:44px;padding-inline:var(--s2);font-size:var(--t-xs)}
  #screen-lobby .rule-cards{gap:var(--s2)}
  #screen-lobby .rule-card{min-inline-size:0;padding:var(--s2) 0}
  #screen-lobby .rule-card .combo-btn,
  #screen-lobby .rule-card > .input{min-block-size:44px;font-size:16px}
  #screen-lobby .seat-list{gap:var(--s2)}
  #screen-lobby .seat{
    grid-template-columns:44px minmax(0,1fr);
    grid-template-areas:'avatar name' 'tags tags' 'controls controls';
    min-block-size:0;padding:var(--s2);gap:var(--s1) var(--s2);
  }
  #screen-lobby .seat .seat-token{grid-area:avatar;inline-size:44px;block-size:44px}
  #screen-lobby .seat .seat-id{grid-area:name;max-inline-size:none;min-inline-size:0}
  #screen-lobby .seat .seat-name{block-size:44px;font-size:16px}
  #screen-lobby .seat .seat-tags{grid-area:tags;min-inline-size:0;gap:var(--s1);padding-inline-start:52px}
  #screen-lobby .seat .seat-tags:empty{display:none}
  #screen-lobby .seat .seat-controls{grid-area:controls;min-inline-size:0;inline-size:100%;gap:var(--s2)}
  #screen-lobby .seat .seat-controls .combo-btn,
  #screen-lobby .seat .seat-controls select{min-block-size:44px;font-size:16px}
  #screen-lobby .seat [data-seat-remove],
  #screen-lobby .seat [data-seat-host]{min-inline-size:44px;min-block-size:44px}
  #screen-lobby .seat-adds{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  #screen-lobby .seat-adds .btn{min-inline-size:0;font-size:var(--t-sm);padding-inline:var(--s2)}
  #screen-lobby .pp-start{min-block-size:64px;padding:var(--s3);gap:var(--s2)}
  #screen-lobby .pp-start-shout{font-size:var(--t-lg)}
  #screen-lobby .pp-start-sub{font-size:var(--t-xs)}

  body.table-open{
    --mobile-nav-h:64px;
    --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
    --mobile-inline:max(var(--s2),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  }
  #screen-game.table{min-inline-size:0}
  #screen-game.table[data-mobile-view] .game-body.tbl{
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;align-content:start;
    min-inline-size:0;inline-size:100%;max-inline-size:100%;
    gap:var(--s2);padding:var(--s2) var(--mobile-inline)
      calc(var(--mobile-nav-h) + var(--s4) + var(--mobile-safe-bottom));
    overflow-x:hidden;overflow-y:auto;scroll-padding-block:var(--s3)
      calc(var(--mobile-nav-h) + var(--s4) + var(--mobile-safe-bottom));
    box-shadow:none;
  }
  #screen-game.table .tbl .tbl-rail{
    flex:none;min-inline-size:0;inline-size:100%;gap:var(--s2);
    overflow:visible;min-block-size:0;
  }
  #screen-game.table .tbl .tbl-centre{
    order:1;flex:none;min-inline-size:0;inline-size:100%;min-block-size:0;gap:var(--s2);
    justify-content:flex-start;align-self:stretch;margin:0;
  }
  #screen-game.table .tbl .tbl-rail-start{order:0}
  #screen-game.table .tbl .tbl-rail-end{order:2}
  /* The original live vote and out notice move here on a phone. The host
     disappears entirely while both nodes carry [hidden], so the rail has no
     empty flex gap above the invitation. */
  #screen-game.table .tbl-mobile-notices:has(> :not([hidden])){
    display:flex;flex-direction:column;gap:var(--s2);min-inline-size:0;
  }
  #screen-game.table .tbl-mobile-notices > #out-banner{margin:0}
  #screen-game.table .tbl-brandbar{
    min-block-size:44px;padding:0;gap:var(--s1);flex-wrap:nowrap;
  }
  #screen-game.table .tbl-mark{inline-size:44px;min-inline-size:44px;block-size:44px;padding:var(--s2)}
  #screen-game.table .tbl-brand-name{display:none}
  #screen-game.table .tbl-brand-acts{gap:0;margin-inline-start:auto;flex-shrink:0}
  #screen-game.table .tbl-brand-acts .tbl-ibtn{inline-size:44px;block-size:44px;min-inline-size:44px}
  #screen-game.table #fullscreen-btn{display:none}
  #screen-game.table #game-watchers{display:none}
  #screen-game.table .tbl-share{padding:var(--s2);margin:0}
  #screen-game.table .tbl-share > .tbl-head{display:none}
  #screen-game.table .tbl-share-row{display:flex;flex-wrap:nowrap;gap:var(--s2);margin:0}
  #screen-game.table .tbl-share-row .tbl-field{min-inline-size:0;inline-size:0;flex:1 1 0;block-size:44px;font-size:16px}
  #screen-game.table .tbl-share-row .tbl-btn{flex:0 0 auto;min-block-size:44px;padding:var(--s2)}
  #screen-game.table #tbl-room-settings{inline-size:44px;min-inline-size:44px;block-size:44px;padding:0}
  #screen-game.table #tbl-room-settings > span{
    position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  #screen-game.table .tbl-tabs,
  #screen-game.table #panel-game,
  #screen-game.table .tbl-tip{display:none}
  #screen-game.table .tbl-you{margin:0;min-block-size:40px;padding:var(--s1) var(--s2);gap:var(--s2)}
  #screen-game.table .tbl-you .tbl-you-props{font-size:var(--t-xs)}
  #screen-game.table .tbl-you .tbl-you-round{font-size:var(--t-xs);letter-spacing:0}

  /* Names and controls are real text outside the scaled ring. The ring stays
     a positional map; tapping a property opens its full readable deed. */
  #screen-game.table .tbl-mobile-turn{display:block;inline-size:100%;min-inline-size:0}
  #screen-game.table .tbl-mobile-turn:empty{display:none}
  #screen-game.table .tbl-mobile-turn #panel-turn{
    position:static;inline-size:100%;max-block-size:none;overflow:visible;
    background:var(--tbl-panel);border-radius:var(--tbl-r-panel);
  }
  #screen-game.table .tbl-mobile-turn .turnbar{
    display:flex;align-items:center;gap:var(--s2);padding:var(--s3);
    border-block-end:1px solid var(--tbl-line);min-inline-size:0;
  }
  #screen-game.table .tbl-mobile-turn .turnbar .copy{min-inline-size:0;flex:1}
  #screen-game.table .tbl-mobile-turn .turnbar .copy strong{font-size:1.0625rem;overflow-wrap:anywhere;white-space:normal}
  #screen-game.table .tbl-mobile-turn .turnbar .copy small,
  #screen-game.table .tbl-mobile-turn .turnbar .wallet small{font-size:.875rem}
  #screen-game.table .tbl-mobile-turn .turnbar .wallet{flex:none;margin-inline-start:auto}
  #screen-game.table .tbl-mobile-turn .turnbar .wallet b{font-size:1.125rem}
  #screen-game.table .tbl-mobile-turn #panel-turn > .sec{padding:var(--s3);font-size:1rem}
  #screen-game.table .tbl-mobile-turn #panel-turn > .sec:has(> .act > .act-primary:only-child:empty){display:none}
  #screen-game.table .tbl-mobile-turn .act{gap:var(--s2)}
  #screen-game.table .tbl-mobile-turn .act-row{flex-wrap:wrap;gap:var(--s2)}
  #screen-game.table .tbl-mobile-turn .act-row > .btn{flex:1 1 auto;min-block-size:48px}
  #screen-game.table .tbl-mobile-turn .act-primary{
    display:flex;position:static;inset:auto;flex-wrap:wrap;gap:var(--s2);margin:0;
  }
  #screen-game.table .tbl-mobile-turn .act-primary:empty{display:none}
  #screen-game.table .tbl-mobile-turn .act-primary .btn{min-block-size:52px;font-size:1rem;flex:1 1 auto}
  #screen-game.table #turn-actions,#screen-game.table .center-action{display:none}
  #screen-game.table .board-wrap{
    --tbl-board-avail-x:calc(100vw - 2 * var(--mobile-inline));
    --tbl-board-avail-y:calc(var(--mobile-vh,100dvh) - var(--mobile-nav-h) - 8rem - var(--mobile-safe-bottom));
    margin:0;min-inline-size:0;flex:none;
  }
  #screen-game.table .tbl-tray{padding:var(--s2);gap:var(--s2);min-block-size:0}
  #screen-game.table .tbl-tray .g-roll-sub{display:none}
  #screen-game.table .tbl-tray .g-roll{display:none}
  #screen-game.table .tbl-tray .panel-dice{margin:0;padding:0}
  #screen-game.table .tbl-tray .g-tray{gap:var(--s1);padding:0}
  #screen-game.table .tbl-tray .g-act{min-block-size:44px}
  #screen-game.table .tbl-btn,#screen-game.table .tbl-field{min-block-size:44px}
  #screen-game.table .tbl-field{font-size:16px}
  #screen-game.table .tbl-board-tools{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
    inline-size:100%;min-inline-size:0;font-size:.875rem;color:var(--tbl-ink-2);
  }
  #screen-game.table .tbl-board-tools > :not(button){min-inline-size:0}
  #screen-game.table #mobile-board-zoom{
    min-block-size:44px;flex:none;padding:var(--s2) var(--s3);
    border:1px solid var(--tbl-ring-min);border-radius:var(--r-sm);
    background:var(--tbl-panel);color:var(--tbl-ink);font:700 .875rem/1.2 var(--tbl-font);
  }
  #screen-game.table #mobile-board-zoom[aria-pressed="true"]{border-color:var(--tbl-accent-2);background:var(--tbl-wash)}
  #screen-game.table .board-wrap > .tbl-hole{display:none}
  #screen-game.table[data-board-zoom="true"]{
    --tbl-depth:9.5rem;--tbl-depth-x:9.5rem;
    --tbl-run-x:5rem;--tbl-run:5rem;--tbl-name-band:2.25rem;
  }
  #screen-game.table[data-board-zoom="true"] .board-wrap{
    inline-size:100%;block-size:auto;max-block-size:calc(var(--mobile-vh,100dvh) * .6);
    overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;
    border:1px solid var(--tbl-line);border-radius:var(--tbl-r-panel);
    --tbl-board-scale:1;
  }
  #screen-game.table[data-board-zoom="true"] .board{
    transform:none;margin:0;
    inline-size:var(--tbl-board-nat-x) !important;
    block-size:var(--tbl-board-nat-y) !important;
  }
  #screen-game.table[data-board-zoom="true"] .tile:not(.corner) .tile-name{display:flex}

  /* Existing panels keep their DOM nodes and engine bindings. The root state
     chooses the phone destination, independently of the desktop tab state. */
  #screen-game.table[data-mobile-view] .tbl-rail-start > #panel-chat{display:none}
  #screen-game.table[data-mobile-view]:not([data-mobile-view="board"]) .tbl-centre,
  #screen-game.table[data-mobile-view]:not([data-mobile-view="board"]) .tbl-share{display:none}
  #screen-game.table[data-mobile-view="board"] .tbl-rail-end,
  #screen-game.table[data-mobile-view="chat"] .tbl-rail-end{display:none}
  #screen-game.table[data-mobile-view="players"] .tbl-rail-end > .tbl-trades{display:none}
  #screen-game.table[data-mobile-view="trades"] .tbl-rail-end > :not(.tbl-trades):not(.tbl-kick){display:none}
  /* right.css gives this row an ID-scoped display:grid, which beats the
     generic child filter above. Financial controls belong to Players. */
  #screen-game.table[data-mobile-view]:not([data-mobile-view="players"]) #fin-actions{display:none}
  #screen-game.table[data-mobile-view="chat"] .tbl-rail-start > #panel-chat{
    display:flex;inline-size:100%;min-block-size:0;
    block-size:calc(var(--mobile-vh,100dvh) - var(--mobile-nav-h) - 5rem - var(--mobile-safe-bottom));
    max-block-size:none;flex:none;
  }
  #screen-game.table #panel-chat .tbl-chat-head{min-block-size:52px}
  #screen-game.table #panel-chat .tbl-chat-tabs > button{min-block-size:44px}
  #screen-game.table #panel-chat .chat-log{max-block-size:none;font-size:1rem;line-height:1.45}
  #screen-game.table #panel-chat .tbl-compose{padding:var(--s2)}
  #screen-game.table #panel-chat .tbl-compose .emote-row{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;
    gap:var(--s2);padding-block:var(--s1);scrollbar-width:thin;
  }
  #screen-game.table #panel-chat .tbl-compose .emote{
    flex:0 0 44px;inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;font-size:1.1875rem;
  }
  #screen-game.table #panel-chat .tbl-send{inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px}
  #screen-game.table .folio-body{max-block-size:none}

  #screen-game.table .tbl-mobile-nav{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    position:fixed;inset-inline:0;bottom:0;z-index:calc(var(--z-sticky) + 4);
    gap:var(--s1);padding:var(--s1) var(--mobile-inline)
      calc(var(--s1) + var(--mobile-safe-bottom));
    min-block-size:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom));
    background:var(--tbl-ground);border-block-start:1px solid var(--tbl-line);
    box-shadow:var(--e3);
  }
  #screen-game.table .tbl-mobile-nav button{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:var(--s1);min-inline-size:0;min-block-size:56px;padding:var(--s1);
    border:0;border-radius:var(--r-sm);background:transparent;color:var(--tbl-ink-2);
    font:700 .8125rem/1.2 var(--tbl-font);overflow-wrap:anywhere;
  }
  #screen-game.table .tbl-mobile-nav button .ic{inline-size:22px;block-size:22px}
  #screen-game.table .tbl-mobile-nav button .badge{
    position:absolute;inset-block-start:var(--s1);inset-inline-end:var(--s2);
    min-inline-size:18px;block-size:18px;padding-inline:var(--s1);font-size:.6875rem;
  }
  #screen-game.table .tbl-mobile-nav button[aria-selected="true"],
  #screen-game.table .tbl-mobile-nav button[aria-pressed="true"]{
    background:var(--tbl-wash);color:var(--tbl-ink);
    box-shadow:inset 0 3px var(--tbl-accent-2);
  }
  #screen-game.table .tbl-mobile-nav button:focus-visible{outline:2px solid var(--tbl-focus-ink);outline-offset:-3px}
  body.table-open #sheet{
    position:fixed;z-index:calc(var(--z-sticky) + 2);
    bottom:calc(var(--mobile-nav-h) + var(--s2) + var(--mobile-safe-bottom));
    max-block-size:min(48dvh,380px);inset-inline:var(--mobile-inline);border-radius:var(--r-lg);
    background:var(--tbl-panel);border:1px solid var(--tbl-line);box-shadow:var(--e3);
  }
  body.table-open #sheet:not([hidden]){display:flex;flex-direction:column}
  body.table-open #sheet-body{overscroll-behavior:contain}
  #screen-game.table:is(body.mobile-keyboard *) .tbl-mobile-nav{display:none}
  #screen-game.table:is(body.mobile-keyboard *) .game-body.tbl{padding-block-end:var(--s2)}
  #screen-game.table:is(body.mobile-keyboard *)[data-mobile-view="chat"] .tbl-rail-start > #panel-chat{
    block-size:calc(var(--mobile-vh,100dvh) - 4rem);
  }

  /* Shared account, settings and shop dialogs use the same phone sheet as
     the match dialogs. Table-specific overrides remain in dialogs.css. */
  dialog.modal{
    --dlg-lip:0px;
    --phone-dialog-h:calc(var(--mobile-vh,100dvh) - env(safe-area-inset-top,0px) - var(--s2));
    position:fixed;inset:auto 0 var(--mobile-keyboard,0px);margin:0 auto;
    inline-size:100%;width:100%;max-inline-size:100%;max-width:100%;
    max-block-size:var(--phone-dialog-h);max-height:var(--phone-dialog-h);
    padding:0;overflow:visible;
  }
  dialog.modal .modal-card{
    max-block-size:var(--phone-dialog-h);max-height:var(--phone-dialog-h);
    border-end-start-radius:0;border-end-end-radius:0;
    border-start-start-radius:var(--r-lg);border-start-end-radius:var(--r-lg);
  }
  dialog.modal .modal-head{
    min-block-size:60px;padding:var(--s3) 64px var(--s3) var(--s4);
    align-items:flex-start;text-align:start;justify-content:center;
    border-block-end:1px solid var(--line-soft);
  }
  dialog.modal .modal-head:dir(rtl){padding-inline:var(--s4) 64px}
  dialog.modal .modal-card > .modal-head > [data-close]{
    position:absolute;top:var(--s2);inset-inline-end:var(--s2);
    inline-size:44px;block-size:44px;width:44px;height:44px;min-inline-size:44px;min-block-size:44px;
    margin:0;transform:none;
  }
  dialog.modal .modal-body{
    min-block-size:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s4);
    scroll-padding-block:var(--s3);
  }
  dialog.modal .modal-foot{
    flex:none;margin:0;padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom,0px));
    gap:var(--s2);border-block-start:1px solid var(--line-soft);flex-wrap:wrap;
  }
  dialog.modal .modal-foot > .btn{flex:1 1 auto;min-block-size:48px;white-space:normal}
  dialog.modal .input,dialog.modal .combo-btn{min-block-size:44px;font-size:16px}
}

/* A short landscape phone has room for the ring beside the turn controls.
   Keep the invitation above it, and fit the ring into the space between that
   row and the permanent dock so it is visible without an initial scroll. */
@media (min-width:601px) and (max-width:1000px) and (max-height:500px){
  #screen-game.table[data-mobile-view="board"] .tbl .tbl-centre{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    grid-template-areas:"you board" "turn board" "tools board" "tray board";
    grid-template-rows:repeat(4,auto);
    align-items:start;align-content:start;gap:var(--s1) var(--s2);
  }
  #screen-game.table .tbl-centre > .tbl-you{grid-area:you}
  #screen-game.table .tbl-centre > .tbl-mobile-turn{grid-area:turn}
  #screen-game.table .tbl-centre > .tbl-board-tools{grid-area:tools}
  #screen-game.table .tbl-centre > .tbl-tray{grid-area:tray}
  #screen-game.table .tbl-centre > .board-wrap{
    grid-area:board;justify-self:center;align-self:start;
    --tbl-board-avail-x:calc((100vw - 2 * var(--mobile-inline) - var(--s2)) * .5);
    --tbl-board-avail-y:calc(var(--mobile-vh,100dvh) - var(--mobile-nav-h) - 7.75rem - var(--mobile-safe-bottom));
  }
  body.table-open #sheet{
    max-block-size:calc(var(--mobile-vh,100dvh) - var(--mobile-nav-h) - 2 * var(--s2) - var(--mobile-safe-bottom));
    max-height:calc(var(--mobile-vh,100dvh) - var(--mobile-nav-h) - 2 * var(--s2) - var(--mobile-safe-bottom));
  }
}