/* Colour, type, spacing and motion come from VirtuHand.Design (virtuhand.css); this file only lays out the public site. */

body {
  margin: 0;
  font-family: var(--vh-font-ui);
  background: var(--vh-bg);
  color: var(--vh-text);
  line-height: 1.6;
}

a { color: var(--vh-accent); }

.site-header { border-bottom: 1px solid var(--vh-border); }
.site-header .mud-toolbar { gap: var(--vh-space-3); }
.site-header nav { display: flex; align-items: center; gap: var(--vh-space-4); }
.site-header form { margin: 0; }
.mud-main-content { padding-top: var(--mud-appbar-height, 64px); }

.hero { text-align: center; }
.hero .vh-mark { margin-inline: auto; }
.hero .hero__title { font-family: var(--vh-font-display); font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.15; margin: var(--vh-space-4) 0 var(--vh-space-2); }
.hero .hero__lede { max-width: 40rem; margin-inline: auto; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--vh-space-3); justify-content: center; margin-top: var(--vh-space-5); }

.features {
  display: grid;
  gap: var(--vh-space-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: var(--vh-space-7);
}


dl dt { font-weight: 600; margin-top: var(--vh-space-3); }
dl dd { margin: 0; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--vh-space-3);
  padding: var(--vh-space-6);
  color: var(--vh-text-muted);
}
.site-footer .vh-mark { width: 1.5rem; height: 1.5rem; }

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  color: #222;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* Playing from the website: the list of tables with their seats, and a seat at one. */
.lede { color: var(--vh-text-muted); }
.play-tables { list-style: none; margin: var(--vh-space-5) 0 0; padding: 0; display: grid; gap: var(--vh-space-4); }
.play-table { display: grid; gap: var(--vh-space-2); }
.play-table--near { border-color: var(--vh-ok); }
.play-table__head { display: flex; align-items: center; gap: var(--vh-space-2); flex-wrap: wrap; }
.play-table__head h2 { margin: 0; }
.play-table p { margin: 0; }
.play-table__details { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--vh-space-2); font-size: var(--vh-text-sm); color: var(--vh-text-muted); }
.play-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--vh-space-2); }
.play-seat { display: flex; flex-direction: column; gap: 2px; padding: var(--vh-space-2) var(--vh-space-3); border-radius: var(--vh-radius-sm); border: 1px solid var(--vh-border); background: var(--vh-surface-2); color: var(--vh-text-muted); font-size: var(--vh-text-sm); text-decoration: none; min-width: 0; }
.play-seat b { color: var(--vh-text); }
.play-seat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-seat--free { border-color: var(--vh-accent); color: var(--vh-accent); background: color-mix(in srgb, var(--vh-accent) 10%, var(--vh-surface)); transition: transform var(--vh-dur-fast) var(--vh-ease-standard); }
.play-seat--free:hover { transform: translateY(-1px); color: var(--vh-accent); }

.game { display: grid; gap: var(--vh-space-4); }
.game__head { display: flex; justify-content: space-between; align-items: start; gap: var(--vh-space-4); }
.game__head h1 { margin: 0; }
.game__head p { margin: 0; }
.game__row { display: flex; flex-wrap: wrap; gap: var(--vh-space-2); align-items: center; }
.game__felt { display: grid; justify-items: center; gap: var(--vh-space-4); padding: var(--vh-space-5); color: #fff; }
.game__pot { font-family: var(--vh-font-display); font-size: var(--vh-text-xl); }
.game__pot b { color: var(--vh-brass-300); }
.game__cards { display: flex; flex-wrap: wrap; gap: var(--vh-space-2); align-items: center; justify-content: center; min-height: 4.5rem; }
.game__cards--small { min-height: 0; }
.game__cards--small .vh-playing-card { --vh-card-w: 2.25rem; }
.game__run { width: 2px; align-self: stretch; background: rgb(255 255 255 / 0.4); }
.game__seats { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--vh-space-2); }
.game__seat { display: grid; gap: 2px; padding: var(--vh-space-2) var(--vh-space-3); border-radius: var(--vh-radius-sm); background: rgb(0 0 0 / 0.3); border: 2px solid transparent; font-size: var(--vh-text-sm); }
.game__seat-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game__seat--turn { border-color: var(--vh-brass-400); }
.game__seat--folded { opacity: 0.5; }
.game__seat--me { background: rgb(0 0 0 / 0.5); }
.game__mine { display: flex; flex-wrap: wrap; gap: var(--vh-space-4); align-items: center; }
.game__prompt { font-weight: 650; font-size: var(--vh-text-lg); }
.game__raise { display: grid; gap: var(--vh-space-3); }
.game__raise input[type=range] { width: 100%; accent-color: var(--vh-accent); }

/* Account: the balance and the station PIN. */
.account-balance { font-variant-numeric: tabular-nums; font-weight: 600; }
.account-pin { margin-top: var(--vh-space-6, 2rem); }
.account-pin__form { display: flex; flex-wrap: wrap; gap: var(--vh-space-3, .75rem); align-items: end; margin-bottom: var(--vh-space-3, .75rem); }
.account-pin__form label { display: grid; gap: .25rem; }
.account-pin__form input { width: 9rem; }

/* A narrow phone keeps the buttons on one line by dropping the wordmark from the bar. */
.site-header .mud-button-root { white-space: nowrap; }
@media (max-width: 30rem) {
  .site-header .vh-wordmark { display: none; }
}

/* MudBlazor's stylesheet drops the keyboard focus ring from native buttons and the underline from links; put both back. */
button:focus-visible, a:focus-visible { outline: 2px solid var(--vh-focus, var(--vh-accent)); outline-offset: 2px; }
.mud-alert a, .lede a, main p a { text-decoration: underline; }