/* Printed corner indices, readable at the browser's normal 100% zoom. */
body:is([data-ar-surface="caixeta"],[data-ar-surface="buraco"]) [data-ar-face]>.ar-readable-index.ar-card-note{top:3px!important;left:3px!important;bottom:auto!important;right:auto!important;width:25px!important;max-width:25px!important;padding:1px 0 2px!important;background:#fff9ec!important;box-shadow:none!important;display:flex!important;flex-direction:column;align-items:center;gap:0;line-height:1!important;white-space:nowrap!important;visibility:visible!important;pointer-events:none;border:0;border-radius:2px;font-family:Georgia,serif!important;z-index:2}body [data-ar-face]>.ar-readable-index b{font:700 21px/1 Georgia,serif;color:#17141b}body [data-ar-face]>.ar-readable-index i{font:700 18px/1 Georgia,serif;color:#17141b;font-style:normal}body [data-ar-face].red>.ar-readable-index :is(b,i){color:#be2841}body [data-ar-face].caixeta-wild-card>.ar-readable-index.ar-card-note{background:#c8d2df!important}body:not(.tv-mode)[data-ar-surface="caixeta"][data-room-phase="playing"] #play-area #hand .card{width:90px;flex-basis:90px}body:not(.tv-mode)[data-ar-surface="caixeta"][data-room-phase="playing"] #play-area #hand.open .hand-fan{gap:7px}body[data-ar-surface="buraco"] #hand .hand-card[data-ar-face]{width:94px;flex-basis:94px}body[data-ar-surface="buraco"] #hand .hand-suit-cards{gap:5px}
@media(max-width:850px){body [data-ar-face]>.ar-readable-index b{font-size:18px}body [data-ar-face]>.ar-readable-index i{font-size:16px}body:is([data-ar-surface="caixeta"],[data-ar-surface="buraco"]) [data-ar-face]>.ar-readable-index.ar-card-note{width:22px!important;max-width:22px!important}body:not(.tv-mode)[data-ar-surface="caixeta"][data-room-phase="playing"] #play-area #hand .card{width:74px;flex-basis:74px;margin-left:-48px}body:not(.tv-mode)[data-ar-surface="caixeta"][data-room-phase="playing"] #play-area #hand .card:first-child,body:not(.tv-mode)[data-ar-surface="caixeta"][data-room-phase="playing"] #play-area #hand.open .card{margin-left:0}body[data-ar-surface="buraco"] #hand .hand-card[data-ar-face]{width:82px;flex-basis:82px}}

body:is([data-ar-surface="caixeta"],[data-ar-surface="buraco"]) [data-ar-face]>.ar-readable-index.ar-card-note{height:43px!important;min-height:43px!important;align-items:center!important;justify-content:flex-start!important}body [data-ar-face]>.ar-readable-index :is(b,i){position:static!important;display:block!important;transform:none!important;margin:0!important;padding:0!important}@media(max-width:850px){body:is([data-ar-surface="caixeta"],[data-ar-surface="buraco"]) [data-ar-face]>.ar-readable-index.ar-card-note{height:37px!important;min-height:37px!important}}

/* An open hand wraps into complete rows, including the raised selected card. */
body:not(.tv-mode)[data-ar-surface="caixeta"][data-room-phase="playing"] #play-area #hand.open {
  max-height: none;
  overflow: visible;
}

body:not(.tv-mode)[data-ar-surface="caixeta"][data-room-phase="playing"] #play-area #hand.open .hand-fan {
  row-gap: 12px;
  padding: 14px 5px 7px;
}

/* Buraco hand controls share a row, with room to wrap on phones. */
body[data-ar-surface="buraco"] #player-panel {
  padding: 12px clamp(8px, 2vw, 18px);
}

#player-panel .hand-toolbar,
#player-panel .hand-tools {
  flex-flow: row wrap;
  align-items: center;
  gap: 6px 8px;
}

#player-panel .hand-toolbar {
  padding-inline: 0;
}

#player-panel .hand-order-note {
  margin: 4px 0 0;
  padding-inline: 0;
}

#player-panel .hand-scroller {
  padding-bottom: 8px;
}

body[data-ar-surface="buraco"] #player-panel .room-safety {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 5px 8px;
  margin: 6px 0 8px;
  padding: 7px 9px;
}

#player-panel .room-safety small {
  grid-column: 1 / -1;
  grid-row: 2;
  line-height: 1.35;
}

#player-panel .room-reserve-use {
  grid-column: 3;
  grid-row: 1;
}

@media (max-width: 600px) {
  body[data-ar-surface="buraco"] #player-panel .room-safety {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #player-panel .room-safety label {
    grid-column: 1 / -1;
  }

  #player-panel .room-safety small {
    grid-row: 3;
  }

  #player-panel .room-reserve-use {
    grid-column: 2;
    grid-row: 2;
    max-width: 110px;
    white-space: normal;
  }
}

/* The Caixeta face already prints both corner indices in the SVG. */
body[data-ar-surface="caixeta"] #hand [data-ar-face] > .ar-readable-index.ar-card-note {
  display: none !important;
}

body[data-ar-surface="buraco"]:not(.tv-mode).ar-board-focus #ar-table-stage > #player-panel {
  max-width: 1200px;
  margin: 8px auto max(8px, env(safe-area-inset-bottom));
}

body[data-ar-surface="buraco"] #hand [data-card] {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

@media (max-width: 700px) {
  body[data-ar-surface="buraco"] #hand [data-card] {
    touch-action: auto;
    width: 70px;
    flex-basis: 70px;
    margin-left: 0;
  }

  body[data-ar-surface="buraco"] #player-panel .hand-tools .tool-button {
    flex: 0 0 44px;
  }
}