:root {
  --page-max-width: 80rem;
  --page-gutter: max(0.75rem, calc((100% - var(--page-max-width)) / 2));
  --brand-font-size: clamp(1.4rem, 4vw, 2rem);
  --site-header-height: 4rem;
  --page-background:
    radial-gradient(circle at 20% 20%, rgb(28 114 125 / 40%), transparent 34rem),
    linear-gradient(135deg, #061820, #0b2932);
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: var(--page-background);
  background-attachment: fixed;
  color: #f2f6f7;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
  margin: 0;
}

button,
input {
  font: inherit;
}

.home-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 3rem);
  width: calc(100% - var(--page-gutter) * 2);
  /* A fixed (not min-) height caps the column at the viewport, so the games list below --
     the only flex-grow descendant with its own overflow-y: auto -- is what scrolls when
     content overflows, rather than the whole page growing taller than the viewport. */
  height: 100dvh;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
}

/* Grows to fill the rest of the viewport (instead of shrinking to fit its content) so the
   games list below has real height to stretch into even when empty, rather than collapsing
   to the height of its "No games yet" message. */
.online-play {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#online-dashboard {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* Flex's default align-items: stretch would otherwise expand this control to the full
   width of #online-dashboard, since it's no longer a plain inline-block in flow. */
#online-game-menu {
  align-self: flex-start;
}

#current-games-panel,
#completed-games-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.brand {
  max-width: 42rem;
}

.landing-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.landing-page .home-shell {
  flex: 1;
  min-height: 0;
  height: auto;
  padding-top: 0.5rem;
}

.landing-header {
  flex: none;
  height: var(--site-header-height);
}

.landing-header,
.help-lesson:not(.is-interactive) #help-heading {
  background: rgb(6 24 32 / 50%);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.landing-header-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  width: calc(100% - var(--page-gutter) * 2);
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.landing-header .brand {
  display: flex;
}

.landing-header .header-controls > button,
.landing-header .account-status > button,
.landing-header .gamer-tag {
  min-height: 2.25rem;
  height: 2.25rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.landing-header .friends-button {
  min-width: 2.25rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: #bcecf4;
  font-family: Georgia, serif;
  font-size: var(--brand-font-size);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}

.site-brand img {
  width: 1.25em;
  height: 1.25em;
}

.landing-tagline {
  margin: 0;
  color: #a9bec3;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.45;
}

.landing-header .gamer-tag {
  display: block;
  max-width: clamp(5rem, 25vw, 18rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-header .account-unavailable {
  max-width: 14rem;
  white-space: normal;
}

.eyebrow {
  margin: 0;
  color: #75d7d0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.8rem);
  padding: 0;
  margin: 0 0 0 auto;
}

.account-status {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.8rem;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

.friends-button {
  position: relative;
  display: grid;
  min-height: 2.8rem;
  min-width: 2.8rem;
  padding: 0.4rem;
  place-items: center;
  font-size: 1.3rem;
  line-height: 1;
}

.friends-button .badge {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  min-width: 1.3rem;
  padding: 0.1rem 0.35rem;
  border-radius: 1rem;
  background: #ff6b5e;
  color: #1a0604;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.menu {
  position: relative;
  display: inline-block;
}

.menu-trigger {
  display: grid;
  min-height: 2.8rem;
  padding: 0.65rem 1.1rem;
  place-items: center;
  border: 1px solid #7ce4dd;
  border-radius: 0.35rem;
  background: #2aaca3;
  color: #031315;
  font-weight: 800;
  cursor: pointer;
}

.menu-trigger[aria-expanded="true"] {
  background: #75d7d0;
}

.menu-popup {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: 9rem;
  max-width: calc(100vw - 1rem);
  max-height: calc(100dvh - 1rem);
  overflow: auto;
  padding: 0.3rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 0.35rem;
  background: #0b2932;
  color: #f2f6f7;
  box-shadow: 0 0.6rem 1.5rem rgb(0 0 0 / 45%);
}

.menu-popup:popover-open {
  display: grid;
}

.menu-popup [role="menuitem"] {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.8rem;
  border: 0;
  border-radius: 0.2rem;
  background: transparent;
  color: inherit;
  font-weight: 500;
  text-align: left;
}

.menu-popup [role="menuitem"]:enabled:hover,
.menu-popup [role="menuitem"]:focus-visible {
  background: #174651;
}

.menu-popup [role="menuitem"]:focus-visible {
  outline: 2px solid #7ce4dd;
  outline-offset: -2px;
}

.menu-popup [role="menuitem"]:disabled {
  cursor: not-allowed;
}

.invite-menu {
  width: min(22rem, calc(100vw - 1rem));
}

.menu-heading,
.menu-status {
  margin: 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}

.menu-heading {
  color: #75d7d0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-status {
  color: #a9bec3;
}

.invite-menu hr {
  width: 100%;
  margin: 0.3rem 0;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 16%);
}

.invite-friends {
  max-height: min(18rem, 45dvh);
  overflow-y: auto;
}

.invite-friends [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.invite-friend-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-friend-reason {
  flex-shrink: 0;
  font-size: 0.8rem;
}

.account-loading,
.account-unavailable {
  margin: 0;
  color: #a9bec3;
  font-size: 0.95rem;
}

.offline-play {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.offline-play > .menu {
  flex-shrink: 0;
}

.offline-play p {
  min-width: 0;
  margin: 0;
  color: #a9bec3;
  font-size: 0.9rem;
}

.card-action {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.65rem 1.1rem;
  border: 1px solid #7ce4dd;
  border-radius: 0.35rem;
  background: #2aaca3;
  color: #031315;
  font-weight: 800;
  text-decoration: none;
}

.card-action:hover {
  background: #75d7d0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

dialog {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 1rem;
  background: #0b2932;
  color: inherit;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 45%);
}

dialog::backdrop {
  background: rgb(0 0 0 / 55%);
}

form {
  display: grid;
  gap: 0.8rem;
  min-width: min(26rem, 80vw);
}

.range-setting {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0;
  font-weight: 700;
}

.range-setting input {
  width: 100%;
  min-width: 0;
}

h3 {
  margin-bottom: 0;
  font-size: 1.2rem;
}

label {
  font-weight: 700;
}

fieldset {
  display: grid;
  gap: 0.7rem;
  margin: 0.4rem 0;
  padding: 1rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 0.35rem;
}

legend {
  padding: 0 0.35rem;
  font-weight: 700;
}

input {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #65838a;
  border-radius: 0.35rem;
  background: #f6f9f9;
  color: #07191f;
}

button {
  min-height: 2.8rem;
  padding: 0.65rem 1rem;
  border: 1px solid #7ce4dd;
  border-radius: 0.35rem;
  background: #2aaca3;
  color: #031315;
  cursor: pointer;
  font-weight: 800;
}

button:hover {
  background: #75d7d0;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

button.secondary {
  background: transparent;
  color: #bcecea;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.hint {
  margin-top: 0;
  color: #a9bec3;
  font-size: 0.9rem;
}

.gamer-tag {
  margin: 0;
  font-weight: 800;
}

/* Fixed/absolutely positioned so an error never displaces page content or reserves blank
   space when empty; dismissed by its own button or by clicking anywhere outside it (see
   home-page.ts's light-dismiss handling). */
.account-error-panel {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.8rem 1rem;
  transform: translateX(-50%);
  border: 1px solid rgb(255 170 163 / 45%);
  border-radius: 0.5rem;
  background: #2a0d0a;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 45%);
}

#account-error {
  margin: 0;
  color: #ffaaa3;
  font-weight: 700;
}

.account-error-panel .icon-button {
  flex-shrink: 0;
}

[hidden] {
  display: none !important;
}

.game-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #061820;
  overflow: hidden;
}

.game-rotator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.game-frame {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

.game-board-column {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The header and empty layout slot reserve the board's fitting area, while the
   canvas fills the column so airborne pieces can pass behind the controls. */
.game-board-header {
  position: relative;
  z-index: 1;
  pointer-events: none;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.25rem 0.6rem;
  /* Reserve the close icon's width and gap, including when the badge wraps. */
  padding: 0.6rem 3.4rem 0.25rem 0.6rem;
}

.game-board-header .game-history {
  pointer-events: auto;
}

.game-board-column .board-viewport {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

#game-board-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.game-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  min-height: 2.2rem;
  pointer-events: auto;
}

.game-history {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

#game-tip {
  pointer-events: none;
}

#game-tip a {
  pointer-events: auto;
}

.game-history button {
  min-height: 2.2rem;
  padding: 0.3rem 0.7rem;
}

.game-history > span {
  min-width: 3ch;
  color: #f2f6f7;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.game-action-badge {
  margin-inline: auto;
  align-self: center;
  min-width: 0;
  max-width: 100%;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  background: rgb(27 125 83 / 88%);
  color: #f2fff6;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.game-status-panel {
  position: relative;
  flex-shrink: 0;
  width: 3rem;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid rgb(255 255 255 / 16%);
  background: rgb(3 19 25 / 92%);
  transition: width 0.15s ease-out;
}

.game-status-panel.expanded {
  width: 14rem;
}

.game-status-toggle {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  min-height: 2.2rem;
  min-width: 2.2rem;
  padding: 0.3rem;
}

.game-status-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 3.4rem 0.6rem 0.6rem;
  list-style: none;
}

.game-status-panel:not(.expanded) .game-status-list {
  padding-inline: 0;
  justify-items: center;
}

.game-status-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.3rem 0.4rem;
  border-radius: 0.35rem;
}

.game-status-row.current-player {
  background: rgb(255 255 255 / 10%);
  font-weight: 800;
}

.player-dot {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--player-color);
}

.game-status-row.current-player .player-dot {
  border-color: #f2f6f7;
}

.game-status-panel:not(.expanded) .player-name,
.game-status-panel:not(.expanded) .seat-status,
.game-status-panel:not(.expanded) .seat-actions,
.game-status-panel:not(.expanded) #game-resume,
.game-status-panel:not(.expanded) #game-practice-from-here,
.game-status-panel:not(.expanded) #game-practice-error {
  display: none;
}

#game-resume,
#game-practice-from-here,
#game-practice-error {
  margin: 0 0.6rem 0.6rem;
}

.seat-info {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.player-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.seat-status {
  font-size: 0.8rem;
  opacity: 0.75;
}

.seat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.1rem;
}

.seat-actions button {
  min-height: 1.8rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
}

.game-draft-controls {
  margin: 0 0.6rem 0.6rem;
}

#game-edit-heading {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.game-edit-buttons {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.game-edit-buttons .icon-button {
  flex: 1;
  min-width: 0;
  min-height: 2.2rem;
}

.game-edit-disc {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--player-color);
}

.game-edit-disc-clear {
  border: 2px solid currentColor;
  background: transparent;
}

#game-difficulty-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label label" "input output";
  margin: 0 0.6rem 0.6rem;
}

#game-difficulty-label {
  grid-area: label;
}

#game-difficulty-row input {
  grid-area: input;
}

#game-difficulty-row output {
  grid-area: output;
}

#game-difficulty-row.read-only {
  display: block;
  font-weight: 400;
}

.game-status-panel:not(.expanded) #game-difficulty-row,
.game-status-panel:not(.expanded) .game-draft-controls {
  display: none;
}

.game-start {
  width: 100%;
}

/*
 * Scoped to `[open]`, not just `.friends-dialog`: a normal author-stylesheet declaration
 * always wins over the browser's normal `dialog:not([open]) { display: none }` default,
 * regardless of selector specificity (origin beats specificity in the cascade). An
 * unconditional `display: flex` here would force the dialog to always render, even while
 * closed. Also sets explicit fixed + inset/margin centering, not just `position: relative`:
 * the native `dialog:modal` rule normally centers the dialog this way, but any author rule
 * that sets `position` on the dialog itself (even to `relative`, e.g. to anchor the
 * absolutely positioned close button) overrides it, which otherwise lays the open dialog out
 * in normal document flow at its DOM position instead of as a centered overlay.
 */
.friends-dialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(32rem, 96vw);
  height: min(44rem, 94vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(0.75rem, 3vw, 1.5rem);
}

.friends-dialog #requests-panel:not([hidden]),
.friends-dialog #friends-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.friends-dialog-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.3rem;
  background: transparent;
  color: inherit;
  font-size: 1.3rem;
  line-height: 1;
}

.icon-button:hover,
.icon-button:focus-visible {
  background: rgb(255 255 255 / 12%);
}

.friends-tabs,
.games-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 16%);
}

.friends-tabs {
  /* Leaves room for the dialog's own close button in the top-right. */
  margin-right: 2.5rem;
}

.friends-tabs [role="tab"],
.games-tabs [role="tab"] {
  min-height: 2.4rem;
  padding: 0.5rem 0.9rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #a9bec3;
  font-weight: 700;
}

.friends-tabs [role="tab"][aria-selected="true"],
.games-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: #7ce4dd;
  color: #f2f6f7;
}

.send-request-form {
  gap: 0.4rem;
  min-width: 0;
  margin-bottom: 1rem;
}

.send-request-form .button-row {
  flex-wrap: nowrap;
}

.send-request-form .button-row input {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.send-request-form .button-row button {
  flex: 0 0 auto;
}

.field-error {
  min-height: 1.2rem;
  margin: 0;
  color: #ffaaa3;
  font-size: 0.9rem;
  font-weight: 700;
}

.activity-list,
.friends-list {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  list-style: none;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 0.5rem;
  background: rgb(0 0 0 / 15%);
}

.list-area {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.list-area .hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  text-align: center;
  pointer-events: none;
}

.activity-item,
.friends-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 0.35rem;
  background: rgb(3 19 25 / 60%);
}

.activity-item p,
.friends-list li p {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
}

.activity-item .button-row,
.friends-list li .button-row {
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.activity-item button,
.friends-list li button {
  min-height: 2.2rem;
  padding: 0.3rem 0.7rem;
}

.games-list {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.5rem;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  overflow-y: auto;
  list-style: none;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 0.5rem;
  background: rgb(0 0 0 / 15%);
}

.game-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "header header"
    "members members"
    "status status"
    "actions actions"
    "error error";
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 0.5rem;
  background: rgb(3 19 25 / 60%);
}

/* Above ~40rem there's enough room to move the badge/actions into their own column
   (see docs/web-ui-design.md#game-card) instead of stacking every line full-width; the
   members/status text and the action buttons then run alongside each other rather than
   leaving most of a wide card's lower half empty. */
@media (min-width: 40rem) {
  .game-item {
    grid-template-areas:
      "header  header"
      "members actions"
      "status  actions"
      "error   error";
  }

  .game-item > .button-row {
    align-self: end;
    justify-self: end;
  }
}

.game-item p {
  margin: 0;
}

.game-item-clickable {
  cursor: pointer;
}

.game-item-clickable:hover,
.game-item-clickable:focus-visible {
  border-color: rgb(255 255 255 / 40%);
  background: rgb(3 19 25 / 80%);
}

.game-card-header {
  grid-area: header;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.game-card-header .game-card-date {
  color: #a9bec3;
  font-weight: 400;
}

.game-card-badge {
  flex: 0 0 auto;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgb(27 125 83 / 88%);
  color: #f2fff6;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.game-card-members {
  grid-area: members;
  overflow: hidden;
  color: #a9bec3;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-card-status {
  grid-area: status;
  color: #a9bec3;
  font-size: 0.85rem;
}

.game-card-removed {
  color: #a9bec3;
  font-size: 0.9rem;
  font-style: italic;
}

.game-item > .button-row {
  grid-area: actions;
}

.game-item > .field-error {
  grid-area: error;
  /* The shared .field-error rule reserves a blank 1.2rem line so a form error's appearance
     doesn't shift surrounding layout; on a game card there's no adjacent content for that
     reserved space to protect, so it just reads as unexplained extra bottom padding on the
     (usual) error-free card. Let an empty line collapse to zero height here, accepting a
     small one-time grow on the rare card that does show an error. */
  min-height: 0;
}

.game-item .button-row button {
  min-height: 2.2rem;
  padding: 0.3rem 0.7rem;
}

.game-draft-controls .field-error {
  margin: 0 0 0.6rem;
}