/* Keep the phone shell within the visible viewport, including browser chrome. */
body{height:100svh;height:100dvh}
header,.beat,footer{flex-shrink:0}
main{min-height:0;min-width:0}
header{padding-top:calc(.7rem + env(safe-area-inset-top))}
.target-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.target-options button{margin:0;overflow-wrap:anywhere}
[aria-disabled="true"]{cursor:wait}
.c.pip.pickable{width:44px;height:56px;font-size:1.1rem}
.c.pip.pickable.mod{font-size:.95rem}
.felt.choosing .opps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem .65rem}
.felt.choosing .opp{max-width:none;min-width:0;width:100%;transform:none!important}
.felt.choosing .ohand{gap:6px}

@media (max-width:600px){
  header.table-header{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:.4rem;padding:.5rem .75rem;padding-top:calc(.5rem + env(safe-area-inset-top))}
  .table-header .mark{grid-column:1/3;grid-row:1;display:block;min-width:0;
    overflow:hidden;text-overflow:ellipsis}
  .table-header .meta{grid-column:3/4;grid-row:1;text-align:right}
  .table-header #c0{grid-column:4;grid-row:1}
  .table-header #c3{grid-column:5;grid-row:1}
  .table-header #c4{grid-column:6;grid-row:1}
  .table-header #c1{grid-column:1/3;grid-row:2}
  .table-header #c2{grid-column:3/5;grid-row:2}
  .table-header #c5{grid-column:5/7;grid-row:2}
  .table-header .chip{width:100%;min-width:0;min-height:44px;font-size:.8rem;
    padding:.4rem .25rem;box-shadow:none}
  .table-header .chip.ico{font-size:1.05rem}
  .beat{padding:.45rem .75rem;font-size:.8rem}
  main{padding:.75rem}
  footer{padding:.65rem .75rem calc(.65rem + env(safe-area-inset-bottom));
    max-height:45svh;overflow-y:auto}
  footer button{min-height:48px;box-shadow:none}
  footer .two button{padding:.8rem .5rem;font-size:.95rem;min-width:0}
  .felt{border-width:3px;border-radius:20px;padding:.8rem .55rem;margin-bottom:.65rem;
    box-shadow:inset 0 0 0 1px rgba(255,248,232,.1),0 5px 16px rgba(0,0,0,.22)}
  .turnstrip{margin-bottom:.9rem;font-size:.85rem}
  .turnstrip b{min-width:0;overflow-wrap:anywhere}
  .centre{margin:.8rem 0 .65rem}
  .me{padding:.75rem;box-shadow:0 4px 14px rgba(0,0,0,.2)}
  main.play .me{order:-1;margin-bottom:.65rem}
  .me .top{margin-bottom:.55rem}
  .me .who{font-size:.9rem;overflow-wrap:anywhere}
  .me .live{width:3rem;height:3rem;font-size:1.3rem}
  .note{font-size:.82rem;line-height:1.5}
  .onm{font-size:.78rem}
  .ost{font-size:.65rem}
  .ohand{gap:3px}
  .hand.big{gap:5px}
  .hand.big .c.big{width:44px;height:62px;font-size:1.6rem}
  .hand.big .c.big.mod{font-size:1.25rem}
  .hand.big .c.big.act{font-size:.65rem}
  .felt.choosing .opp:has(.pickable){opacity:1}
  .c.pickable[aria-disabled="true"]{opacity:.6;animation:none}
  .invite{padding:.75rem}
  .invite input[readonly]{margin-top:.65rem;font-size:16px}
  .tbl .t{white-space:normal}
  .opts button{flex:1 0 auto}
  .opts{gap:.5rem}
  .big{font-size:1.55rem;overflow-wrap:anywhere}
  .coach{padding:.6rem;font-size:.8rem}
  .coach button{min-width:44px}
}

@media (max-width:360px){
  main,footer{padding-left:.6rem;padding-right:.6rem}
  .hand.big .c.big{width:44px;height:62px;font-size:1.6rem}
  .hand.big .c.big.mod{font-size:1.1rem}
}

@media (max-height:500px) and (orientation:landscape){
  header.table-header{display:flex;gap:.4rem;padding-top:.3rem;padding-bottom:.3rem}
  .table-header .mark{flex:0 0 auto}
  .table-header .meta{flex:1}
  .table-header .chip{width:auto;min-width:44px}
  .beat{display:none}
  footer{max-height:40svh;padding-top:.45rem}
  .centre{margin:.55rem 0}
}

.invite-qr{display:block;width:min(240px,100%);height:auto;margin:1rem auto;border-radius:8px}
.c.selected{outline:3px solid var(--gold,#ffc857);outline-offset:3px;opacity:1!important}
.card-choices{font-size:.85rem;margin:.5rem 0}
.card-choices summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.card-choices>div{display:grid;gap:.4rem;grid-template-columns:repeat(2,minmax(0,1fr));max-height:24svh;overflow:auto}
.card-choices button{margin:0;font-size:.8rem;overflow-wrap:anywhere}
.quick-modes{margin-bottom:.5rem}
.offline-note{padding:.5rem .75rem;margin:0;background:var(--panel,#332f2b);font-size:.85rem}