/* Floors for a narrow table. Every size on the felt is table units times --u, and on a phone a
   unit is about half a pixel: measured, the bidding text came out at 8.5px and its buttons 23px
   tall. Each value is the site.css one with a floor under it, so a change there comes here too;
   the .sp-* ones are shared with spades and hearts, hence the .eu scope. */
/* Must match TALL in games/euchre.js, which is taller than spades' so the floors below fit. */
@media (max-width: 560px) { .eu .sp-stage { aspect-ratio: 680 / 1180; } }

.eu .sp-ask { font-size: max(13px, calc(var(--cwq) * var(--u) * .17px)); }
.eu .eu-btn {
  height: max(40px, calc(var(--cwq) * var(--u) * .46px));
  padding: 0 max(12px, calc(var(--cwq) * var(--u) * .17px));
  font-size: max(14px, calc(var(--cwq) * var(--u) * .19px));
}
.eu .eu-coach { font-size: max(13px, calc(var(--fs) * var(--u) * 1px)); }
.eu .sp-guide { font-size: max(13px, calc(var(--fs) * var(--u) * 1px)); }
.eu .eu-say { font-size: max(13px, calc(var(--fs) * var(--u) * .92px)); }
.eu .sp-plate {
  height: max(19px, calc(var(--plate) * var(--u) * 1px));
  line-height: max(19px, calc(var(--plate) * var(--u) * 1px));
  font-size: max(11px, calc(var(--plate) * var(--u) * .58px));
}
.eu .eu-trump { font-size: max(11px, calc(var(--plate) * var(--u) * .62px)); }
.eu .eu-intro p { font-size: max(13px, calc(var(--cwq) * var(--u) * .19px)); }

.eu .sp-sh-title {
  height: max(26px, calc(var(--lh) * var(--u) * 1.15px));
  line-height: max(26px, calc(var(--lh) * var(--u) * 1.15px));
  font-size: max(16px, calc(var(--cwq) * var(--u) * .22px));
}
.eu .sp-sh-head { height: max(22px, calc(var(--lh) * var(--u) * 1.12px)); font-size: max(12px, calc(var(--cwq) * var(--u) * .17px)); }
.eu .sp-sh-body { height: max(21px, calc(var(--lh) * var(--u) * 1px)); }
.eu .sp-sh-body .sp-sh-l { font-size: max(12px, calc(var(--cwq) * var(--u) * .165px)); }
.eu .sp-sh-body .sp-sh-v { font-size: max(13px, calc(var(--cwq) * var(--u) * .175px)); }
.eu .sp-sh-hand { height: max(23px, calc(var(--lh) * var(--u) * 1.1px)); }
.eu .sp-sh-hand .sp-sh-l { font-size: max(12px, calc(var(--cwq) * var(--u) * .165px)); }
.eu .sp-sh-hand .sp-sh-v { font-size: max(13px, calc(var(--cwq) * var(--u) * .18px)); }
.eu .sp-sh-total { height: max(24px, calc(var(--lh) * var(--u) * 1.1px)); }
.eu .sp-sh-total .sp-sh-l { font-size: max(14px, calc(var(--cwq) * var(--u) * .19px)); }
.eu .sp-sh-total .sp-sh-v { font-size: max(16px, calc(var(--cwq) * var(--u) * .22px)); }
.eu .sp-sh-note { font-size: max(12px, calc(var(--cwq) * var(--u) * .15px)); }
.eu .sp-sh-best {
  height: auto; line-height: 1.35;
  font-size: max(12px, calc(var(--cwq) * var(--u) * .16px));
}
.eu .sp-sh-stats {
  height: auto; line-height: 1.35;
  font-size: max(11px, calc(var(--cwq) * var(--u) * .14px));
}
.eu .sp-sh-btn {
  width: max(140px, calc(var(--cwq) * var(--u) * 1.9px));
  height: max(40px, calc(var(--cwq) * var(--u) * .46px));
  font-size: max(14px, calc(var(--cwq) * var(--u) * .18px));
}

/* After the plate floors above, which it has to override. The tall table's seats are 232 units
   apart, so a plate wraps onto a second line rather than run into its neighbour's. */
@media (max-width: 560px) {
  .eu .sp-plate {
    max-width: calc(var(--u) * 220px); height: auto;
    padding-top: 2px; padding-bottom: 2px;
    white-space: normal; line-height: 1.2;
  }
}