/* Round games use a cloth-bound game-night scorebook. */
.round-mode {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(18px, 3vw, 30px);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 32px rgba(55, 46, 32, 0.06);
}

.round-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.round-toolbar > span {
  display: grid;
}

.round-toolbar > span small,
.round-toolbar > div > small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.round-toolbar > span strong {
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 1;
}

.round-toolbar nav {
  display: flex;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 3px;
  background: var(--paper);
}

.round-toolbar nav button {
  border: 0;
  border-radius: 8px;
  padding: 8px 11px;
  background: transparent;
  font-size: 0.73rem;
  font-weight: 850;
}

.round-toolbar nav button.selected {
  background: var(--violet);
  color: white;
}

.round-player-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}

.round-player-grid > label {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 16px;
  background: white;
}

.round-player-grid header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.round-player-grid header i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: white;
  font-style: normal;
  font-weight: 900;
}

.round-player-grid header span {
  display: grid;
}

.round-player-grid header small,
.round-player-grid > label > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
}

.round-player-grid input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid var(--ink);
  padding: 5px 0;
  background: transparent;
  font-family: Georgia, serif;
  font-size: 2.3rem;
  outline: 0;
}

.round-player-grid input:focus {
  border-color: var(--violet);
}

.round-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.round-buttons > button:first-child {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 15px;
  background: white;
  font-weight: 800;
}

@media (max-width: 620px) {
  .round-toolbar {
    align-items: start;
  }

  .round-player-grid {
    grid-template-columns: 1fr;
  }

  .round-buttons {
    flex-direction: column-reverse;
  }
}

#app[data-game="rounds"] {
  --ink: #23384b;
  --muted: #68727a;
  --green: #29495f;
  --green-dark: #193447;
  --violet: #29495f;
  --line: #cfc9b7;
  min-height: 100vh;
  padding-bottom: 24px;
  background-color: #243a4b;
  background-image: repeating-linear-gradient(90deg, #ffffff04 0, #ffffff04 1px, transparent 1px, transparent 4px), repeating-linear-gradient(0deg, #00000008 0, #00000008 1px, transparent 1px, transparent 4px);
}

#app[data-game="rounds"] .game-shell { max-width: 1080px; }
#app[data-game="rounds"] .topbar { border-color: #ffffff25; }
#app[data-game="rounds"] .topbar :is(.brand, .text-button, .game-chip) { color: #f3e9ce; }
#app[data-game="rounds"] .game-chip i { background: #d4b575 !important; color: #243a4b; }
#app[data-game="rounds"] .game-layout { padding-top: 30px; gap: 24px; grid-template-columns: minmax(0, 1fr) 280px; }

.round-book-title { display: flex; align-items: center; gap: 16px; padding: 8px 0 28px; color: #fff4d9; }
.book-emblem { display: grid; place-items: center; width: 58px; height: 68px; flex-shrink: 0; border: 2px solid #d8b774; border-left-width: 7px; border-radius: 3px 7px 7px 3px; color: #e7c583; font: 38px Georgia, serif; box-shadow: inset -3px 0 #e7c58330; }
.book-kicker { color: #e7c583; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
#app[data-game="rounds"] .round-book-title h1 { margin: 6px 0; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; letter-spacing: -.04em; }
.round-book-title p { color: #c2d0d7; font-size: 13px; margin: 0; }

#app[data-game="rounds"] .round-mode {
  position: relative;
  border: 1px solid #cfbf9c;
  border-radius: 4px 12px 12px 4px;
  padding: 28px 24px 24px 34px;
  background: linear-gradient(90deg, transparent 21px, #c2685655 21px, #c2685655 22px, transparent 22px), #fbf5e5;
  box-shadow: 3px 4px 0 #ddcfb0, 5px 7px 0 #ebe0c5, 0 16px 32px #07131e40;
}
.round-mode::before { content: ""; position: absolute; top: 22px; bottom: 22px; left: -7px; width: 14px; background: repeating-linear-gradient(0deg, transparent 0, transparent 20px, #a9b2b7 21px, #f0f1ed 23px, #7a8a96 25px, transparent 27px, transparent 42px); pointer-events: none; }
#app[data-game="rounds"] .round-toolbar { border-bottom: 2px solid #29495f; padding-bottom: 16px; gap: 12px; }
#app[data-game="rounds"] .round-toolbar > span { grid-template-columns: auto auto; align-items: center; gap: 12px; }
#app[data-game="rounds"] .round-toolbar > span small { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .15em; }
#app[data-game="rounds"] .round-toolbar > span strong { font-size: 52px; color: #29495f; }
#app[data-game="rounds"] .round-toolbar nav { border-radius: 5px; background: #eee5cc; }
#app[data-game="rounds"] .round-toolbar nav button { border-radius: 3px; min-height: 38px; }
#app[data-game="rounds"] .round-toolbar nav button.selected { color: #fff3d4; background: #29495f; }
.round-player-grid > label { border-radius: 3px; background: #fffcf3; border-color: #c4c7bd; gap: 10px; box-shadow: 0 2px 0 #d8d1bd; }
.round-player-grid > label:focus-within { outline: 2px solid #b88e45; outline-offset: 2px; }
.round-player-grid header i { border-radius: 4px; width: 30px; height: 30px; }
.round-player-grid header span { min-width: 0; }
.round-player-grid header strong { overflow-wrap: anywhere; }
.round-player-grid > label > span { font-size: 9px; letter-spacing: .15em; margin-top: 4px; }
.round-player-grid input { background: repeating-linear-gradient(0deg, transparent, transparent 27px, #91a8b52b 28px); font-style: italic; color: #254a68; border-bottom: 2px solid #90a5b2; border-radius: 0; font-size: 36px; }
.round-player-grid input:focus { border-color: #29495f; }
.round-buttons { padding-top: 16px; border-top: 1px solid #a6b6bd; }
.round-buttons > button { min-height: 48px; border-radius: 4px; }
.round-buttons > button:first-child { border-radius: 4px; background: #f7efd9; font-size: 12px; }
.round-buttons > .primary { background: #29495f; color: #fff3d4; }
.round-buttons > .primary:hover { background: #173447; }

#app[data-game="rounds"] .standings-card { margin-top: 8px; border: 1px solid #b9a77f; border-top: 6px solid #d4b575; border-radius: 5px; background: #f5edda; box-shadow: 3px 4px 0 #192b3980; }
#app[data-game="rounds"] .standings-card .eyebrow { color: #7f6229; }
#app[data-game="rounds"] .standings-card h2 { font-size: 28px; margin-bottom: 8px; }
#app[data-game="rounds"] .standings-card article { border-top: 1px solid #a9b7bb80; }
#app[data-game="rounds"] .standings-card article > em { font: italic 700 24px Georgia, serif; color: #254a68; }
#app[data-game="rounds"] .standings-card article > i { border-radius: 4px; }
#app[data-game="rounds"] .standings-card footer { border-radius: 3px; background: #e2e7de; font-size: 12px; }
#app[data-game="rounds"] .history { background: #fbf5e5; padding: 20px 24px; border-radius: 4px; box-shadow: 2px 3px 0 #cabb9a; }
#app[data-game="rounds"] .history h2 { font-size: 25px; }
#app[data-game="rounds"] .history article { border: 0; border-bottom: 1px solid #99afb573; border-radius: 0; padding: 14px 0; background: transparent; }
#app[data-game="rounds"] .history article > b { border-right: 2px solid #c77e6555; color: #796744; font-family: Georgia, serif; }
#app[data-game="rounds"] .history article em { flex-wrap: wrap; color: #254a68; }
#app[data-game="rounds"] .history article em b { font-family: Georgia, serif; font-size: 17px; }
#app[data-game="rounds"] button:focus-visible { outline: 3px solid #b88e45; outline-offset: 3px; }

@media (max-width: 900px) {
  #app[data-game="rounds"] .game-layout { grid-template-columns: 1fr; }
  #app[data-game="rounds"] .standings-card { position: static; }
}
@media (max-width: 620px) {
  #app[data-game="rounds"] .game-layout { padding-top: 16px; }
  .round-book-title { gap: 12px; padding-bottom: 22px; }
  .book-emblem { width: 42px; height: 53px; font-size: 29px; }
  .book-kicker { font-size: 8px; }
  #app[data-game="rounds"] .round-book-title h1 { font-size: 27px; }
  .round-book-title p { font-size: 11px; }
  #app[data-game="rounds"] .round-mode { margin-left: 5px; padding: 18px 14px 18px 26px; background: linear-gradient(90deg, transparent 16px, #c2685655 16px, #c2685655 17px, transparent 17px), #fbf5e5; }
  #app[data-game="rounds"] .round-toolbar { align-items: center; }
  #app[data-game="rounds"] .round-toolbar nav button { padding: 8px; font-size: 11px; }
  .round-player-grid { gap: 10px; margin: 18px 0; }
  .round-player-grid > label { grid-template-columns: 1fr 90px; align-items: center; padding: 12px; }
  .round-player-grid header { grid-column: 1; grid-row: 1 / 3; }
  .round-player-grid > label > span { grid-column: 2; grid-row: 1; margin: 0; }
  .round-player-grid input { grid-column: 2; grid-row: 2; font-size: 28px; }
  .round-player-grid header strong { font-size: 13px; }
  .round-player-grid header small { font-size: 10px; }
}