/* Table interaction and readability. Keep phone/tablet variants beside the
 * component they change, rather than appending another global polish layer. */
.local-save-note { color: var(--menu-muted); font-size: 12px; line-height: 1.5; margin: 12px auto; max-width: 340px; }
.save-warning { color: #ffd0aa; font-size: 13px; line-height: 1.4; width: 100%; }
.returning .local-save-note { margin-inline: 0; }
.your-hand .tile { position: relative; }
.your-hand .tile.drawn::after { content: ""; position: absolute; bottom: -7px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #f9e7b0; }
.your-hand .tile.reco-tile::before { content: "★"; position: absolute; top: -13px; right: -4px; font-size: 15px; line-height: 1; color: var(--gold); text-shadow: 0 1px 3px #000; z-index: 3; }
.your-hand .tile.selected-tile { outline: 3px solid #90d7ff; outline-offset: 2px; transform: translateY(-7px); z-index: 4; }
.your-hand .tile.guide-pair { border: 2px dashed #25805f; }
.your-hand { padding-block: 12px 10px; }
.selected-discard { min-height: 44px; font-size: 14px; }
#actionbar .prompt { font-size: 13px; line-height: 1.4; }
.guide-banner { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; text-align: start; font-size: 12px; line-height: 1.45; }
.guide-banner b { grid-column: 1; }
.guide-banner > span { grid-column: 1; }
.guide-banner .link-btn { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.dp-zone[role="button"] { cursor: zoom-in; min-width: 30px; min-height: 30px; border-radius: 5px; }
.dp-zone[role="button"]:hover { background: rgba(255,255,255,.05); }
.inspect-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 10px; padding-block: 12px; direction: ltr; }
.inspect-tiles .tile { width: 44px; height: 60px; }
.seat-name { overflow-wrap: anywhere; }
.seat-bottom .seat-name { max-width: 100%; }
#drawer input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 10px; accent-color: #dfc581; }
.coach-compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coach-compare-pair > div { display: grid; justify-items: start; gap: 6px; padding: 10px; border: 1px solid var(--menu-line); border-radius: 10px; }
.coach-compare-pair small { color: var(--menu-muted); line-height: 1.5; }
.reference-description { color: #d6e6db; font-size: 14px; line-height: 1.6; padding: 0 12px 12px; margin: 0; }
.store-modal > a.btn { display: inline-flex; text-decoration: none; align-items: center; justify-content: center; margin-block: 12px; }
body.large-tiles .your-hand { max-width: 850px; }
body.large-tiles .your-hand .tile { width: 52px; height: 70px; }
@media (max-width: 820px) {
  body.coach-open { --coach-height: min(40dvh, 340px); }
  body.coach-open aside#coach { height: calc(var(--coach-height) + env(safe-area-inset-bottom)); max-height: calc(var(--coach-height) + env(safe-area-inset-bottom)); }
  body.coach-open #app { padding-bottom: calc(var(--coach-height) + 8px + env(safe-area-inset-bottom)); transition: none; }
  /* Coach is a focused decision workspace on phones. Opponent information is
     still available in Coach's defense details; keep the entire hand tappable. */
  body.coach-open #table { display: flex; flex-direction: column; justify-content: center; }
  body.coach-open #table > :not(.seat-bottom),
  body.coach-open :is(#trainbar, #log, .guide-banner) { display: none; }
  body.coach-open .seat-bottom { flex: none; }
  body.large-tiles .your-hand { max-width: 380px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px 4px; }
  body.large-tiles .your-hand .tile { width: 100%; height: auto; aspect-ratio: 3 / 4; min-height: 44px; margin: 0; }
  .your-hand.can-discard .tile:hover { transform: none; }
  .your-hand.can-discard .tile.selected-tile { transform: translateY(-5px); }
  .guide-banner { max-height: 130px; overflow-y: auto; }
  #actionbar { max-height: 32dvh; overflow-y: auto; flex-shrink: 0; }
}
@media (max-width: 820px) and (max-height: 700px) {
  body.coach-open .scores { display: none; }
}
@media (pointer: coarse) and (min-width: 821px) and (max-width: 1180px) {
  body.coach-open aside#coach { max-height: calc(min(34dvh, 340px) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .your-hand .tile.selected-tile { transform: none !important; }
}