/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.


*/
/* game screen */
#game-pane.style-3d #grid-container {
  height: 330px;
}
#game-pane.style-3d #grid-options { display: none; }

/* cube */
#cube-container {
  position: relative;
  margin-left: 110px;
  margin-top: 58px;
  width: 196px;
  height: 196px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}

#cube {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.2s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 0.2s;
  -moz-transform-style: preserve-3d;
  -o-transition: -moz-transform 0.2s;
  -o-transform-style: preserve-3d;
  transition: transform 0.2s;
  transform-style: preserve-3d;
}

#cube table { position: absolute; width: 196px; height: 196px; border-collapse: collapse; opacity: 0.9; }
#cube.translucent table { opacity: 0.6; }
#cube #face0 { background: hsl(  0, 100%, 82%); }
#cube #face1 { background: hsl( 40,  80%, 78%); }
#cube #face2 { background: hsl(110,  80%, 78%); }
#cube #face3 { background: hsl( 70,  80%, 78%); }
#cube #face4 { background: hsl(340,  60%, 72%); }
#cube #face5 { background: hsl(160,  80%, 78%); }
#cube #face0 td.bonus-tile { background: hsl(  0, 100%, 92%); }
#cube #face1 td.bonus-tile { background: hsl( 40,  80%, 92%); }
#cube #face2 td.bonus-tile { background: hsl(110,  80%, 92%); }
#cube #face3 td.bonus-tile { background: hsl( 70,  80%, 92%); }
#cube #face4 td.bonus-tile { background: hsl(340,  60%, 92%); }
#cube #face5 td.bonus-tile { background: hsl(160,  80%, 92%); }

#cube #face0 {
  -webkit-transform: rotateX( 90deg) translateZ(98px);
  -moz-transform:    rotateX( 90deg) translateZ(98px);
  -o-transform:      rotateX( 90deg) translateZ(98px);
  transform:         rotateX( 90deg) translateZ(98px);
}
#cube #face1 {
  -webkit-transform: rotateY(-90deg) translateZ(98px);
  -moz-transform:    rotateY(-90deg) translateZ(98px);
  -o-transform:      rotateY(-90deg) translateZ(98px);
  transform:         rotateY(-90deg) translateZ(98px);
}
#cube #face2 {
  -webkit-transform:                 translateZ(98px);
  -moz-transform:                    translateZ(98px);
  -o-transform:                      translateZ(98px);
  transform:                         translateZ(98px);
}
#cube #face3 {
  -webkit-transform: rotateY( 90deg) translateZ(98px);
  -moz-transform:    rotateY( 90deg) translateZ(98px);
  -o-transform:      rotateY( 90deg) translateZ(98px);
  transform:         rotateY( 90deg) translateZ(98px);
}
#cube #face4 {
  -webkit-transform: rotateX(-90deg) translateZ(98px);
  -moz-transform:    rotateX(-90deg) translateZ(98px);
  -o-transform:      rotateX(-90deg) translateZ(98px);
  transform:         rotateX(-90deg) translateZ(98px);
}
#cube #face5 {
  -webkit-transform: rotateY(180deg) translateZ(98px);
  -moz-transform:    rotateY(180deg) translateZ(98px);
  -o-transform:      rotateY(180deg) translateZ(98px);
  transform:         rotateY(180deg) translateZ(98px);
}

#cube td { width: 62px; height: 62px; text-align: center; font-size: 24pt; border: 1px solid black; }

/* bonus tile */

#cube td.bonus-tile {
  -webkit-animation: bonus-tile 2s linear 0s infinite;
  -moz-animation: bonus-tile 2s linear 0s infinite;
  -o-animation: bonus-tile 2s linear 0s infinite;
  animation: bonus-tile 2s linear 0s infinite;
}

@keyframes bonus-tile {
  0%, 100% { color: #444; }
  50%      { color: #000; }
}
@-webkit-keyframes bonus-tile {
  0%, 100% { color: #444; }
  50%      { color: #000; }
}
@-moz-keyframes bonus-tile {
  0%, 100% { color: #444; }
  50%      { color: #000; }
}
@-o-keyframes bonus-tile {
  0%, 100% { color: #444; }
  50%      { color: #000; }
}

/* results screen small version */

#cube-container.small {
  margin: 0 0 0 12px;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
}

#cube-container.small #cube td { font-size: 30pt; }
/* === Arenas =============================================================
   All arena styles are scoped under `.arena-section`, the unique top-level
   wrapper used by every arena view (show, index, new, edit).

   Customise the look-and-feel via the CSS variables in `.arena-section`
   below — every rule downstream resolves through them.
*/

.arena-section {
  /* ---- Palette ---------------------------------------------------- */
  --arena-strip-bg-from: #f1f3f6;
  --arena-strip-bg-to: #e8ebf0;

  --arena-panel-bg: #fff;
  --arena-panel-bg-soft: #fafbfc;

  --arena-ink: #1f1f1d;
  --arena-ink-soft: #444;
  --arena-mute: #777;
  --arena-mute-2: #888;

  --arena-divider: var(--color-divider);
  --arena-divider-soft: rgba(133, 144, 162, 0.25);

  --arena-accent: var(--color-accent);
  --arena-accent-hover: var(--color-accent-hover);
  --arena-accent-soft: rgba(74, 85, 104, 0.14);
  --arena-accent-soft-2: rgba(74, 85, 104, 0.08);

  --arena-brand: var(--color-brand);
  --arena-brand-soft: rgba(236, 59, 31, 0.12);

  /* ---- Shape ------------------------------------------------------ */
  --arena-radius: 8px;
  --arena-radius-lg: 10px;

  max-width: 64rem;
  margin: 0 auto 2rem;
  color: var(--arena-ink);
}

/* === Section header (index, new, edit) =================================
   The show page uses .arena-strip instead. This header is the simple
   "title + eyebrow + subtitle" stack used on listing/admin pages.
*/

.arena-section .arena-section-header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--arena-divider);
}

.arena-section .arena-eyebrow {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena-accent);
  font-variant-numeric: tabular-nums;
}

.arena-section .arena-title {
  margin: 0.25rem 0 0.25rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--arena-ink);
}

.arena-section .arena-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--arena-mute);
}

/* === Arena strip (show page hero) ======================================
   Two-zone bar at the top of an arena. Left zone holds the eyebrow
   (state + meta) and arena name. Right zone holds the countdown and
   primary action (join / opt-in / rejoin).
*/

.arena-section .arena-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(180deg, var(--arena-strip-bg-from), var(--arena-strip-bg-to));
  border: 1px solid var(--arena-divider);
  border-radius: var(--arena-radius);
  margin-bottom: 1.25rem;
}

.arena-section .arena-strip-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.arena-section .arena-strip-eyebrow {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena-accent);
  font-variant-numeric: tabular-nums;
}

.arena-section .arena-strip-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--arena-brand);
  border-radius: 50%;
  vertical-align: 0.18em;
  margin-right: 0.4rem;
  animation: arena-blink 1.4s ease-in-out infinite;
}

@keyframes arena-blink { 50% { opacity: 0.55; } }

.arena-section .arena-strip .arena-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--arena-ink);
}

.arena-section .arena-strip-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* === Countdown =========================================================
   Used inside the strip (active arena) and on the scheduled-state pane.
   Variants are controlled by the wrapping context.
*/

.arena-section .arena-countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.arena-section .arena-countdown-time {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--arena-accent);
  line-height: 1;
}

.arena-section .arena-countdown-time.is-urgent {
  color: var(--arena-brand);
}

.arena-section .arena-countdown-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena-mute-2);
}

/* Big centred variant for the scheduled-state pane. */
.arena-section .arena-countdown.is-centered {
  align-items: center;
}

.arena-section .arena-countdown.is-centered .arena-countdown-time {
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  color: var(--arena-ink);
}

.arena-section .arena-countdown.is-centered .arena-countdown-label {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
}

/* === Strip action slot =================================================
   Holds the opt-in button, rejoin button, or join-arena button. The
   container elements toggle .is-active via arena.js; default is hidden.
*/

.arena-section .arena-strip-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.arena-section .arena-strip-actions form { margin: 0; }

.arena-section .arena-opt-in,
.arena-section .arena-rejoin {
  display: none;
  margin: 0;
}

.arena-section .arena-opt-in.is-active,
.arena-section .arena-rejoin.is-active {
  display: inline-flex;
}

.arena-section .arena-strip-actions form { margin: 0; }

/* Tighten primary/secondary buttons when used inside the strip so they
   pair neatly with the compact eyebrow + name on the left. */
.arena-section .arena-strip-actions .primary-button,
.arena-section .arena-strip-actions .secondary-button {
  padding: 0.45rem 0.95rem;
  font-size: 0.8125rem;
  border-radius: 6px;
  border-width: 1px;
}

/* === Status message (between strip and lobby) ========================== */

.arena-section .arena-status-message {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--arena-mute);
  text-align: center;
  min-height: 1.2em;
}

.arena-section .arena-status-message:empty {
  display: none;
}

/* === Lobby grid ======================================================== */

.arena-section .arena-lobby {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
}

.arena-section .arena-lobby-single {
  grid-template-columns: minmax(0, 1fr);
}

.arena-section .arena-lobby > section {
  min-width: 0;
}

/* === Pane title (panel-header pattern) =================================
   Mirrors the site's .panel-header look — slate hairline below, uppercase
   tracked title in muted grey.
*/

.arena-section .arena-pane-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--arena-divider);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arena-ink-soft);
}

.arena-section .arena-pane-title .meta {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--arena-mute);
  font-variant-numeric: tabular-nums;
}

/* === Leaderboard =======================================================
   Flat list of rows in CSS multi-column flow. Both Rails and arena.js
   append the same `.arena-leaderboard-row` divs to `#arena-leaderboard-body`;
   the browser splits them across two columns. Nothing on either side
   needs to know about the column split.
*/

.arena-section .arena-leaderboard-header,
.arena-section .arena-leaderboard-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  column-gap: 0.5rem;
  align-items: baseline;
  padding: 0.4rem 0.5rem;
}

.arena-section .arena-leaderboard-header {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--arena-divider);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arena-mute);
}

.arena-section .arena-leaderboard-header span:last-child {
  text-align: right;
}

.arena-section .arena-leaderboard {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.arena-section .arena-leaderboard-row {
  border-bottom: 1px solid var(--arena-divider-soft);
  color: inherit;
  text-decoration: none;
}

.arena-section .arena-leaderboard-row.is-me {
  background: var(--arena-accent-soft);
  font-weight: 600;
  border-radius: 4px;
  border-bottom-color: transparent;
}

.arena-section .arena-leaderboard-rank {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-weight: 600;
  color: var(--arena-mute);
}

.arena-section .arena-leaderboard-tie {
  font-weight: 400;
  font-size: 0.7em;
  color: var(--arena-mute);
  opacity: 0.65;
}

.arena-section .arena-leaderboard-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arena-section .arena-leaderboard-points {
  font-weight: 600;
  text-align: right;
}

.arena-section .arena-streak-pill {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.0625rem 0.3125rem;
  background: var(--arena-brand-soft);
  color: var(--arena-brand);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  vertical-align: 0.05em;
}

/* === Round results list ================================================ */

.arena-section .arena-results-heading {
  display: block;
  margin-top: 1.25rem;
}

.arena-section .arena-results-heading.is-hidden,
.arena-section .arena-round-results.is-hidden {
  display: none;
}

.arena-section .arena-round-results {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  row-gap: 0.25rem;
  column-gap: 0.5rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.arena-section .arena-round-result {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.arena-section .arena-round-result > span {
  padding: 0.125rem 0;
}

.arena-section .arena-round-result:hover > span {
  text-decoration: underline;
}

.arena-section .arena-round-result-winner {
  text-align: right;
  font-weight: 600;
}

.arena-section .arena-round-result-vs {
  color: var(--arena-mute);
  font-size: 0.75rem;
}

.arena-section .arena-round-result-loser { text-align: left; }

.arena-section .arena-round-result-bye-text {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--arena-mute);
}

.arena-section .arena-round-result.is-me > span {
  font-weight: 600;
}

/* === Chat ============================================================== */

.arena-section .arena-chat {
  display: flex;
  flex-direction: column;
  min-height: 18rem;
}

.arena-section .arena-chat-log {
  background: var(--arena-panel-bg);
  border: 1px solid var(--arena-divider);
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-y: auto;
  height: 18rem;
}

.arena-section .arena-chat-message { padding: 0.125rem 0; }

.arena-section .arena-chat-message .name {
  font-weight: 600;
  color: var(--arena-accent);
  margin-right: 0.375rem;
}

.arena-section .arena-chat-form {
  display: flex;
  gap: 0.375rem;
}

.arena-section .arena-chat-form input[type="text"] {
  flex: 1;
  padding: 0.4rem 0.55rem;
  font-size: 0.8125rem;
  border: 1px solid var(--arena-divider);
  border-radius: 6px;
}

.arena-section .arena-chat-form .primary-button {
  padding: 0.4rem 0.875rem;
  font-size: 0.8125rem;
}

.arena-section .arena-chat-closed {
  font-size: 0.75rem;
  color: var(--arena-mute);
  font-style: italic;
}

/* === Recipe pool (scheduled-state left pane) =========================== */

.arena-section .arena-recipe-pool {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: var(--arena-panel-bg);
  border: 1px solid var(--arena-divider);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 18rem;
  overflow-y: auto;
}

.arena-section .arena-recipe-pool li {
  padding: 0.3rem 0.4rem;
  font-size: 0.8125rem;
  border-radius: 4px;
}

.arena-section .arena-recipe-pool li:nth-child(even) {
  background: var(--arena-panel-bg-soft);
}

.arena-section .arena-recipe-pool label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.375rem;
  font-size: 0.8125rem;
  cursor: pointer;
}

.arena-section .arena-recipe-pool label:hover {
  background: var(--arena-panel-bg-soft);
  border-radius: 4px;
}

/* === Index page sections =============================================== */

.arena-section .arena-list-section {
  margin-bottom: 1.75rem;
}

.arena-section .arena-list-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.625rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--arena-divider);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arena-ink-soft);
}

.arena-section .arena-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.arena-section .arena-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: var(--arena-panel-bg);
  border: 1px solid var(--arena-divider);
  border-radius: var(--arena-radius);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.arena-section .arena-card:hover {
  background: var(--arena-panel-bg-soft);
  border-color: var(--arena-accent);
  box-shadow:
    0 1px 2px var(--color-accent-shadow),
    0 4px 14px rgba(40, 50, 70, 0.06);
}

.arena-section .arena-card-main {
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.arena-section .arena-card-name {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--arena-ink);
  margin-bottom: 0.125rem;
}

.arena-section .arena-card-meta {
  font-size: 0.75rem;
  color: var(--arena-mute);
  font-variant-numeric: tabular-nums;
}

.arena-section .arena-card-state {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background: var(--arena-accent-soft-2);
  color: var(--arena-accent);
}

.arena-section .arena-card-state.is-running {
  background: var(--arena-brand-soft);
  color: var(--arena-brand);
}

.arena-section .arena-card-actions {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

/* === Admin controls ==================================================== */

.arena-section .arena-admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--arena-panel-bg-soft);
  border: 1px dashed rgba(133, 144, 162, 0.5);
  border-radius: var(--arena-radius);
  font-size: 0.75rem;
}

.arena-section .arena-admin-bar strong {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arena-ink-soft);
}

.arena-section .arena-admin-link {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--arena-divider);
  border-radius: 6px;
  color: var(--arena-ink-soft);
  text-decoration: none;
}

.arena-section .arena-admin-link:hover {
  border-color: var(--arena-accent);
  color: var(--arena-accent);
}

/* === Admin datetime helpers ============================================ */

.arena-section .arena-form-utc {
  font-size: 0.6875rem;
  color: var(--arena-mute-2);
  font-variant-numeric: tabular-nums;
  font-style: italic;
  margin-top: 0.25rem;
  min-height: 1em;
}

.arena-section .arena-form-utc:not(:empty)::before {
  content: "UTC: ";
  font-style: normal;
  color: var(--arena-ink-soft);
  font-weight: 600;
}

/* === Banner (home-page link to active arena) ===========================
   Lives outside .arena-section but uses the same palette. Defined here
   so all arena visual primitives sit in one file.
*/

.arena-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, #f1f3f6, #e8ebf0);
  border: 1px solid var(--color-divider);
  border-radius: var(--arena-radius, 8px);
  cursor: pointer;
  text-decoration: none;
  color: #1f1f1d;
  position: relative;
}

.arena-banner:hover { text-decoration: none; }

.arena-banner:hover .arena-banner-cta {
  color: var(--color-brand);
  transform: translateX(3px);
}

.arena-banner-eyebrow {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.arena-banner-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-brand);
  border-radius: 50%;
}

.arena-banner-title,
.arena-banner-title:visited {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-top: 0.125rem;
  color: #1f1f1d;
  text-decoration: none;
}

.arena-banner-title:hover { text-decoration: none; }

.arena-banner-meta {
  font-size: 0.75rem;
  color: #777;
  margin-top: 0.0625rem;
  font-variant-numeric: tabular-nums;
}

.arena-banner-cta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Stretched-link pattern: the title's ::after covers the whole banner so
   the entire card is clickable. The inline calendar link sits above the
   overlay via a higher z-index so its own clicks still register. */
.arena-banner-stretch {
  display: block;
  position: static;
}

.arena-banner-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.arena-banner-nowrap {
  white-space: nowrap;
}

.arena-banner-calendar-inline {
  position: relative;
  z-index: 2;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.arena-banner-calendar-inline:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

/* === In-game arena badge ===============================================
   Compact slim pill displayed inside game pages when a game belongs to
   an arena round.
*/

.arena-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(180deg, #f1f3f6, #e8ebf0);
  border: 1px solid var(--color-divider);
  border-top: none;
  border-radius: 0 0 6px 6px;
  font-size: 0.75rem;
}

.arena-badge-eyebrow {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.arena-badge-meta {
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* === Mobile ============================================================ */

@media (max-width: 768px) {
  .arena-section .arena-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .arena-section .arena-strip-right {
    justify-content: space-between;
  }

  .arena-section .arena-strip-right .arena-countdown {
    align-items: flex-start;
  }

  .arena-section .arena-lobby {
    grid-template-columns: minmax(0, 1fr);
  }

  .arena-section .arena-leaderboard-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .arena-section .arena-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .arena-section .arena-card-actions {
    justify-self: flex-start;
  }
}
.primary-button,
.secondary-button,
.tertiary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  border: 1.5px solid;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.08s ease;
}

/* Defend against the global `a:hover { text-decoration: underline }` rule
   when these classes are used on anchor elements. */
.primary-button:hover,
.primary-button:focus,
.secondary-button:hover,
.secondary-button:focus,
.tertiary-button:hover,
.tertiary-button:focus {
  text-decoration: none;
}

.primary-button,
.primary-button:visited {
  color: #fff;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 1px 2px var(--color-accent-shadow);
}

.primary-button:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: 0 2px 6px var(--color-accent-shadow-hover);
}

.primary-button:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
  transform: translateY(1px);
  box-shadow: 0 1px 2px var(--color-accent-shadow-hover);
}

.primary-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--color-accent-focus-ring),
    0 1px 2px var(--color-accent-shadow);
}

.primary-button:disabled,
.primary-button[aria-disabled="true"] {
  background-color: var(--color-accent-disabled);
  border-color: var(--color-accent-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

.secondary-button,
.secondary-button:visited {
  color: var(--color-accent);
  background-color: transparent;
  border-color: var(--color-accent);
}

.secondary-button:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  background-color: var(--color-accent-shadow);
}

.secondary-button:active {
  color: var(--color-accent-active);
  border-color: var(--color-accent-active);
  background-color: var(--color-accent-shadow-hover);
  transform: translateY(1px);
}

.secondary-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-focus-ring);
}

.secondary-button:disabled,
.secondary-button[aria-disabled="true"] {
  color: var(--color-accent-disabled);
  border-color: var(--color-accent-disabled);
  background-color: transparent;
  cursor: not-allowed;
}

/* Tertiary: small uppercase ghost button. Use for low-emphasis actions
   (Edit, More, etc.) where a primary/secondary would be too heavy. */
.tertiary-button,
.tertiary-button:visited {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #888;
  background-color: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
}

.tertiary-button:hover,
.tertiary-button:focus {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.tertiary-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-focus-ring);
}

.tertiary-button:disabled,
.tertiary-button[aria-disabled="true"] {
  color: #bbb;
  border-color: var(--color-divider);
  cursor: not-allowed;
}
.chat-frame {
  border: 1px solid black;
  border-bottom: none;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  overflow: hidden;
  background-color: #fefefe;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#chat-pane {
  flex: 1;
  overflow: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#chat-table {
  margin: auto 0 0;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

#chat-table td {
  padding: 0;
  margin: 0;
}

#chat-table .name {
  width: 80px;
  background-color: #eee;
  font-size: 7pt;
  color: #555;
  text-align: right;
  padding: 7px 6px 0 4px;
  vertical-align: top;
}

#chat-table .message {
  padding: 3px 0 3px 6px;
  border-top: 1px solid #eee;
  font-size: 9pt;
}

#chat-table .information {
  font-size: 7pt;
  color: #555;
  padding: 2px 0 2px 6px;
}

#chat-table .game-starting {
  text-align: center;
  background-color: #ffa;
  padding: 8px;
  font-weight: bold;
}

#chat-table tr.pending {
  opacity: 0.5;
}

#chat-input-form input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

#chat-input-line {
  display: flex;
  border: 1px solid black;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  overflow: hidden;
  height: 25px;
  padding: 0;
  margin: 0;
}

#chat-input-form input {
  margin: 0;
  padding: 0;
  height: 100%;
  outline: none;
  border: none;
  padding: 0 3px;
}

#chat-input-form input[type="text"] {
  flex: 1;
}

#chat-input-form input[type="submit"] {
  width: 51px;
  border-left: 1px solid black;
}

#chat-input-form input[type="submit"]:hover {
  background-color: #eee;
}

#typing-notification {
  padding-top: 8px;
  height: 9px;
  font-size: 9px;
  color: #888;
}
:root {
  /* Brand — Prolific red. Logo anchor. Use sparingly for brand moments. */
  --color-brand: #ec3b1f;

  /* Accent — slate. Workhorse colour for buttons, borders, focus rings, accents. */
  --color-accent: #4a5568;
  --color-accent-hover: #5b6679;
  --color-accent-active: #353e4d;
  --color-accent-disabled: #b0b6c0;
  --color-accent-shadow: rgba(40, 50, 70, 0.12);
  --color-accent-shadow-hover: rgba(40, 50, 70, 0.2);
  --color-accent-focus-ring: rgba(74, 85, 104, 0.35);

  /* Divider — slate for hairlines/borders between cells. */
  --color-divider: #8590a2;

  /* Link — brand red, darkened. Same family as the logo but a few stops
     darker so anchors read as text-weight and don't fight the logo. */
  --color-link: #b3311a;

  /* Browser-rendered controls (checkboxes, radios, range, progress) follow
     the slate accent throughout the site. */
  accent-color: var(--color-accent);
}
#game-area {
  display: flex;
}

#players-pane {
  flex: 0 200px;
  margin-right: 32px;
}

#game-pane,
#waiting-pane {
  flex: 1;
  min-width: 0;
}

#waiting-pane .chat-frame {
  height: 16rem;
}

#progress-pane {
  flex: 0 110px;
  text-align: right;
}

#players-pane .user {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 12px;
  border-top: 1px solid #ddd;
}

#players-pane .user:last-child {
  border-bottom: 1px solid #ddd;
}

#players-pane img {
  grid-row: 1 / -1;
  width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

#players-pane .rating {
  color: #bbb;
  font-size: 80%;
}

#waiting-chat-pane {
  background-color: #eee;
  border-radius: 6px;
  padding: 16px 16px 20px 16px;
}

#waiting-operations {
  margin-bottom: 12px;
}

#waiting-message {
  margin-top: 12px;
  color: #900;
  font-size: 8pt;
}

#answer-list {
  font-size: 80%;
}

#answer-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#answer-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#answer-list li.unsent {
  color: #aaa;
}

#answer-list li.deleting {
  color: #faa;
  text-decoration: line-through;
}

#answer-list li.sent:hover {
  cursor: pointer;
  text-decoration: line-through;
}

#answer-area {
  margin-top: 12px;
}

#answer-result {
  margin-top: 4px;
  color: #900;
  font-weight: bold;
}

#answer {
  text-transform: uppercase;
  width: 180px;
  min-width: 0;
  font-size: 12pt;
  padding: 4px;
  color: #111;
  appearance: none;
  border: 1px solid #888;
  border-radius: 3px;
  background: #fff;
  box-sizing: border-box;
  --autofocus: 1;
}

#answer-form {
  display: flex;
  align-items: flex-end;
}

#answer-form .game-control {
  color: #88a;
  margin: 0 0.5rem;
}

#answer-form .game-control:hover {
  color: #558;
}

#answer-form .game-control i {
  font-size: 15pt;
}

#answer-form #rotate-grid-button {
  margin-left: 1.25rem;
}

#transpose-grid-button {
  position: relative;
}

#transpose-grid-button i+i {
  position: absolute;
  left: 0;
}

#answer-form input.hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

#time-remaining {
  margin-bottom: 1rem;
}

#scoring-message {
  margin-top: 12px;
  font-size: 120%;
  font-weight: bold;
  text-align: center;
}

#connection-problem-message {
  margin-top: 24px;
  text-align: center;
  font-style: italic;
  font-weight: bold;
}

#grid {
  border: 3px solid var(--color-accent);
  overflow: hidden;
  background-color: var(--color-divider);
  border-radius: 1rem;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(var(--grid-size), 1fr);
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}

#game-area #grid {
  width: 20rem;
  max-width: 100%;
}

#grid.impending-doom {
  border-color: #d77;
}

#grid div {
  background-color: white;
  display: grid;
  place-items: center;
}

#grid .bonus {
  background-color: #ffb;
}

#grid.grid3 {
  font-size: 42px;
}

#grid.grid4 {
  font-size: 32px;
}

#grid.grid5 {
  font-size: 28px;
}

#grid.grid6 {
  font-size: 26px;
}

#grid.grid7 {
  font-size: 24px;
}

#grid.grid8 {
  font-size: 22px;
}

#grid.grid9 {
  font-size: 20px;
}

#grid.grid10 {
  font-size: 18px;
}

#grid.small.grid3 {
  font-size: 29px;
}

#grid.small.grid4 {
  font-size: 19px;
}

#grid.small.grid5 {
  font-size: 17px;
}

#grid.small.grid6 {
  font-size: 15px;
}

#grid.small.grid7 {
  font-size: 14px;
}

#grid.small.grid8 {
  font-size: 13px;
}

#grid.small.grid9 {
  font-size: 13px;
}

#grid.small.grid10 {
  font-size: 12px;
}

#invite-link-box {
  background-color: #eee;
  border-radius: 6px;
  margin-top: 20px;
  padding: 16px;
  text-align: center;
}

#invite-link-box .top-margin {
  margin-top: 12px;
}

#invite-link-box input {
  font-size: 10pt;
  width: 100%;
  border: 1px solid #777;
  text-align: center;
  padding: 3px 0;
  color: #007;
}

.game-hints {
  color: #aaa;
  font-size: 8pt;
  float: right;
}

#game-pane.style-3d .game-hints {
  padding-top: 2px;
}

#game-pane.style-classic .game-hints {
  padding-top: 29px;
}

#game-pane.style-classic .only-3d {
  display: none;
}

#game-pane.style-3d .only-classic {
  display: none;
}

#answer-explanation {
  color: #555;
  font-size: 9pt;
  margin-top: 7px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  max-width: 20rem;
}

#answer-explanation img {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
}

#answer-explanation > div {
  flex: 1;
  min-width: 0;
}

#word-count {
  color: #aaa;
}

.game-header {
  text-align: right;
}

@media (max-width: 711px) {
  #game-area {
    margin: 0 0.25rem;
    flex-wrap: wrap;
  }

  #game-pane,
  #waiting-pane {
    flex: 100%;
  }

  #grid-container,
  #answer-area {
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
  }

  #answer-form {
    justify-content: center;
  }

  #answer {
    --autofocus: 0;
  }

  .game-header {
    margin-top: 1.5rem;
    text-align: center;
  }

  .game-description {
    font-size: 80%;
  }

  #answer-explanation {
    display: none;
  }

  #players-pane {
    flex: 100%;
    order: 99;
    margin-right: 0;
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
  }

  #players-pane .user,
  #players-pane .user:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border: none;
    background-color: #eee;
    border-radius: 999px;
  }

  #players-pane img {
    grid-row: auto;
    width: 1.5em;
  }

  #game-area:has(#game-pane:not([style*="display: none"])) #players-pane {
    display: none;
  }

  #answer-result {
    text-align: center;
  }

  #progress-pane {
    flex: 100%;
    text-align: center;
  }

  #answer-list li {
    display: inline-block;
  }

  #answer-list li:not(:last-child)::after {
    content: "⋅";
    padding: 0 0.2rem;
  }
}
.start-buttons {
  display: flex;
  justify-content: center;
  margin-block: 1rem;
}

@media (min-width: 451px) {
  .start-buttons button {
    padding-inline: 2.25rem;
  }
}

.start-buttons .spacer {
  width: 1rem;
}

dt {
  float: left;
  width: 90px;
  text-align: right;
  padding-top: 14px;
}

dd {
  margin-left: 104px;
  padding-top: 13px;
}

.spaced-8 label:not(:last-child) {
  margin-right: 8px;
}

.spaced-12 label:not(:last-child) {
  margin-right: 12px;
}

.spaced-16 label:not(:last-child) {
  margin-right: 16px;
}

/* === Game cards (Games panel + active/recent games) ====================
   The .game element is the visible card. Its wrappers (.game-slot and
   the bare .challenge wrapper used for waiting-list challenges) are
   structural only — they no longer paint backgrounds.
*/

.game {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.875rem;
  padding: 0.875rem 1rem;
  background-color: #fff;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  overflow: visible;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.game.selectable {
  cursor: pointer;
}

.game.selectable:hover {
  background-color: #fafbfc;
  border-color: var(--color-accent);
  box-shadow:
    0 1px 2px var(--color-accent-shadow),
    0 4px 14px rgba(40, 50, 70, 0.06);
}

.game-slot {
  background: transparent;
  border-radius: 10px;
}

.game-slot:nth-child(even),
.game-slot:nth-child(odd) {
  background: transparent;
}

/* Challenge games — soft terracotta wash and a brand-red hover. */
.challenge>.game,
.game-slot.challenge>.game {
  background-image: linear-gradient(180deg, rgba(236, 59, 31, 0.05), rgba(236, 59, 31, 0.015));
  border-color: rgba(236, 59, 31, 0.25);
}

.challenge>.game.selectable:hover,
.game-slot.challenge>.game.selectable:hover {
  background-image: linear-gradient(180deg, rgba(236, 59, 31, 0.08), rgba(236, 59, 31, 0.03));
  border-color: var(--color-brand);
  box-shadow:
    0 1px 2px rgba(236, 59, 31, 0.15),
    0 4px 14px rgba(236, 59, 31, 0.08);
}

/* Empty-slot placeholder. */
.game-slot.empty {
  background: transparent;
  border: 1px dashed var(--color-divider);
  border-radius: 10px;
  color: #999;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1.125rem 0;
  margin-bottom: 0.5rem;
}

/* Sample-grid icon. */
.sample-grid {
  display: block;
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
}

.sample-grid:not(.three-d)::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-divider);
  border-radius: inherit;
  pointer-events: none;
}

/* Non-standard games (tournament / arena / today's special):
   gold hairline + faint glow. */
.sample-grid.non-standard {
  box-shadow: 0 0 7px rgba(184, 134, 11, 0.45);
}

.sample-grid.non-standard:not(.three-d)::after {
  border-color: #b8860b;
}

.sample-grid.non-standard.three-d {
  box-shadow: none;
}

.sample-grid.non-standard.three-d svg {
  filter: drop-shadow(0 0 2.5px rgba(184, 134, 11, 0.95));
}

.sample-grid table {
  border-collapse: collapse;
  width: 64px;
  height: 64px;
  background-color: #fff;
}

.sample-grid td,
.sample-grid th {
  border: 1px solid var(--color-divider);
}

.sample-grid.dict-off td,
.sample-grid.dict-off th {
  border-style: dashed;
}

.sample-grid.dict-off:not(.three-d)::after {
  border-style: dashed;
}

.sample-grid th {
  background-color: #3f6cad;
}

.sample-grid.quick th {
  background-color: var(--color-brand);
}

.sample-grid.three-d svg {
  display: block;
  width: 64px;
  height: 64px;
}

.sample-grid.three-d .face {
  stroke: none;
}

.sample-grid.three-d .face.top {
  fill: #c0d0e3;
}

.sample-grid.three-d .face.left {
  fill: #8aa3c8;
}

.sample-grid.three-d .face.right {
  fill: #3f6cad;
}

.sample-grid.three-d.quick .face.top {
  fill: #f6c0b6;
}

.sample-grid.three-d.quick .face.left {
  fill: #f08877;
}

.sample-grid.three-d.quick .face.right {
  fill: var(--color-brand);
}

.sample-grid.three-d .edges {
  fill: none;
  stroke: #fff;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sample-grid.three-d.dict-off .edges {
  stroke-dasharray: 2.5 2.5;
}

.completed {
  height: 88px;
}

#new-game-pane {
  margin: 12px;
}

#new-challenge-explanation {
  font-size: 90%;
  margin: 8px 0;
}

#active-and-recent-games .game-slot {
  opacity: 0.7;
}

.active-and-recent-games-heading {
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  margin: 1.25rem 0 0.625rem;
  padding-bottom: 0.375rem;
  color: #888;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-divider);
}

.game-tier {
  float: left;
  width: 114px;
  text-align: center;
}

.game-tier input {
  width: 102px;
  font-size: 10pt;
  padding-left: 0;
  padding-right: 0;
}

.tier-desc {
  color: #aaa;
  font-size: 80%;
}

/* Card body — title, descriptors, time, players. */
.game .a {
  float: none;
}

.game .b {
  margin-left: 0;
  min-width: 0;
}

.game .b>div:first-child:not(.c) {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  color: #444;
  word-break: break-word;
}

.game .c {
  margin-top: 0.1875rem;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #777;
}

.game .cc {
  white-space: nowrap;
}

.game .h {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.625rem;
  row-gap: 0.375rem;
  margin-top: 0.625rem;
  overflow: visible;
}

.game .d {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding-top: 0;
  min-width: 0;
}

.game .e,
.game .g {
  float: none;
  width: auto;
  margin: 0;
}

.game .d img,
.game .f {
  float: none;
  display: block;
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  object-fit: cover;
}

.game .j {
  margin-left: 0;
  padding-top: 0;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game .i {
  color: #999;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.game .k {
  float: right;
}

.game .l {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.1875rem 0.5rem;
  background-color: rgba(74, 85, 104, 0.08);
  border-radius: 999px;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.game .l:empty {
  display: none;
}

hr.news {
  width: 35%;
  margin: 12px auto;
  border: 0;
  border-top: 1px solid var(--color-divider);
}

#top-plays {
  margin-bottom: 0;
}

#top-plays .grid-size {
  text-align: right;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #888;
  margin-top: 0.5rem;
}

#top-plays .grid-size:first-child {
  margin-top: 0;
}

#top-plays .grid-size span {
  background: #fefdff;
  padding: 0 0.375rem;
}

#top-plays .grid-size+div {
  border-top: 1px solid var(--color-divider);
  padding-top: 0.5rem;
  margin-top: -0.5rem;
}

#top-plays .top-play-results {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr;
  align-items: baseline;
  row-gap: 0;
  column-gap: .2rem;
  white-space: nowrap;
}

#top-plays .category {
  padding-right: .2rem;
}

#top-plays .category,
#top-plays .by {
  font-size: 9pt;
  color: #444;
}

#top-plays .play-points {
  font-weight: bold;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#top-plays .play-measurement {
  font-weight: bold;
}

#top-plays .play-points,
#top-plays .play-measurement,
#top-plays .play-user {
  font-size: 10.5pt;
}

#top-plays .top-plays-pane.hidden {
  display: none;
}

.reconnecting-indicator {
  display: none;
  font-size: 0.75rem;
  font-weight: 400;
  color: #999;
  letter-spacing: normal;
  text-transform: none;
}

.lobby-presence {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #888;
  letter-spacing: normal;
  text-transform: none;
}

.lobby-presence-icon {
  display: block;
  color: #888;
}

.lobby-presence-count {
  font-variant-numeric: tabular-nums;
}

.pro-tip {
  margin: 1.5rem 2rem;
  font-size: 0.75rem;
  color: #999;
  line-height: 1.5;
}

.debug-pane {
  color: #999;
  font-size: 8pt;
  margin-top: 32px;
}

/* new game dialog */
#new-game-dialog .min-letters-option {
  display: none;
}

.panel.welcome .login {
  text-align: center;
  margin: 1.5rem 0;
}

.home-content {
  --home-lhs-max: 25rem;
  display: grid;
  grid-template-columns: min(var(--home-lhs-max), 45%) 1fr;
  gap: 2rem;
}

.user-stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0.75rem auto 0.25rem;
  max-width: var(--home-lhs-max);
  font-size: 0.9375rem;
}

.user-stats-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: #555;
  line-height: 1.1;
}

.user-stats-item > .user-stats-icon {
  margin-bottom: 0.25rem;
}

.user-stats-item strong {
  font-weight: 600;
  color: #1f1f1d;
  font-variant-numeric: tabular-nums;
}

.user-stats-label {
  color: #9a9a9a;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.user-stats-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #b5b5b5;
}

.home-lhs {
  grid-column: 1;
  grid-row: 1;
}

.home-rhs {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 600px) {
  main {
    margin: 0 0.25rem;
  }

  .home-content {
    display: block;
    margin: 0 auto;
  }

  .start-buttons {
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
  }

  .start-buttons button {
    flex: 1;
  }

  dt {
    float: none;
    text-align: left;
  }

  dd {
    margin: 0 0 0 1rem;
  }

  dd label {
    display: block;
  }
}
html {
  scrollbar-gutter: stable;
}

@media (max-width: 711px) {
  html {
    scrollbar-gutter: auto;
  }
}

body {
  font-family: lucida grande, lucida, tahoma, arial, sans-serif;
  font-size: 10pt;
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
  color: #262626;
  display: flex;
  justify-content: center;
  background: #fefdff;
}

nav {
  flex: 0 10rem;
  margin: 0.5rem 1rem 0 0;
}

main {
  flex: 1;
}

main.narrow > .content {
  max-width: 40rem;
}

main.padded {
  margin-top: 5.5rem;
}

h1 { font-size: 14pt; margin-bottom: 6px; }
h2 { font-size: 11pt; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }
a, a:visited { color: var(--color-link); }

#error-message { background-color: #fee; border: 1px solid #700; border-radius: 6px; padding: 12px; margin: 12px 0; }

input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"]):focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-accent);
}

.scroll-x { overflow-x: auto; max-width: 100%; }

@media (max-width: 800px) {
  body {
    flex-direction: column;
    align-items: center;
  }

  main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  main.padded {
    margin-top: 0.5rem;
  }

  nav {
    flex: 0;
    margin: 0;
    text-align: center;
  }

  nav ul#tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0.5rem auto 1rem;
    padding: 0 0.5rem;
    max-width: 36rem;
  }

  nav ul#tabs li {
    display: inline-flex;
    align-items: center;
  }

  nav ul#tabs li:not(:last-child)::after {
    content: '';
    width: 1px;
    height: 0.9rem;
    background: #c8c8d0;
  }

  nav ul#tabs a,
  nav ul#tabs .nav-link-button {
    display: block;
    margin: 0;
    padding: 0.35rem 0.7rem;
    font-size: 10pt;
    line-height: 1.2;
  }
}
main.new-invitation form {
  margin: 3rem;
}

main.new-invitation input[type=text] {
  padding: 8px 4px;
  font-size: 13pt;
  box-sizing: border-box;
  width: 100%;
}

main.invitation .access-key {
  text-align: center;
  font-size: 16pt;
  margin: 1.5rem 0;
}
#leaderboard-pane { padding-bottom: 12px; overflow: auto; }

.leaderboard-tournaments {
  float: right;
  width: 243px;
  padding: 1px 0 1px 10px;
}

.leaderboard-leaders {
  padding: 1px 0;
  margin-right: 254px;
}

@media (max-width: 800px) {
  .leaderboard-tournaments {
    float: none;
    width: auto;
    padding: 1px 0;
    margin-top: 1.5rem;
    order: 2;
  }

  .leaderboard-leaders {
    margin-right: 0;
    order: 1;
  }

  #leaderboard-pane {
    display: flex;
    flex-direction: column;
  }
}

#leaderboard-pane table { border-collapse: collapse; width: 100%; }
#leaderboard-pane td { border-bottom: 1px solid #ddd; width: 370px; padding: 9px 4px; }

#leaderboard-pane .username {
  font-size: 14px;
  margin-bottom: 6px;
}
#leaderboard-pane .challenge {
  margin-top: 6px;
}

#leaderboard-spinner { text-align: center; height: 24px; }

#leaderboard-pane td.load-more-row {
  background-color: color-mix(in srgb, var(--color-accent) 12%, #fff);
  padding: 0;
  text-align: center;
  font-weight: 600;
}

#leaderboard-pane td.load-more-row a,
#leaderboard-pane td.load-more-row a:visited {
  display: block;
  padding: 0.875rem 0.5rem;
  color: var(--color-link);
  text-decoration: none;
}

#leaderboard-pane td.load-more-row a:hover {
  background-color: color-mix(in srgb, var(--color-accent) 20%, #fff);
}
#letter-frequency-form {
  background-color: #ddd;
  padding: 1rem;
}

#letter-frequency-form dl {
  margin: 0;
}

#letter-frequency-form dt {
  width: 20rem;
  margin-right: 1rem;
}

#letter-frequency-form code {
  background-color: #f3f3f3;
  padding: 0 0.15rem;
}

#letter-frequency-form #letter_frequency_description {
  width: 22rem;
}

#letter-frequency-form #letter_frequency_serialised_frequencies {
  width: 22rem;
  height: 5rem;
}

#letter-frequency-form #letter_frequency_max_per_consonant_denominator,
#letter-frequency-form #letter_frequency_min_vowels,
#letter-frequency-form #letter_frequency_max_vowels_denominator {
  width: 3rem;
}

#letter-frequency-form .paragraph {
  margin: 1rem 0;
}

#letter-frequency-form input[type=submit] {
  display: block;
  margin-top: 1.5rem;
  margin-left: auto;
  width: 8rem;
  box-sizing: border-box;
}
.management-block { background-color: #eee; padding: 16px; border-radius: 6px; }

table.users-table tr.warning td { background-color: #f77 !important; }
table.user-details-table td:first-child { width: 200px; }

table.navigate-on-row-click tr:hover td { background-color: #ffd; cursor: pointer; }

/* Minimal table helpers — extracted from Bootstrap 2.x so the admin pages
   keep their familiar look without pulling in the whole bootstrap.css. */
.table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

.table th {
  font-weight: bold;
  vertical-align: bottom;
}

.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td,
.table tbody:first-child tr:first-child th,
.table tbody:first-child tr:first-child td {
  border-top: 0;
}

.table-bordered {
  border: 1px solid #ddd;
}

.table-bordered th,
.table-bordered td {
  border-left: 1px solid #ddd;
}

.table-condensed th,
.table-condensed td {
  padding: 4px 5px;
}

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}
/* Custom modal styling. Used together with modal.js. Replaces the
   Bootstrap 2 modal plugin. */

.modal {
  display: none;
}

.modal.is-open {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 0;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1050;
}

/* Two flex spacers around the dialog. The 1:2 ratio biases the dialog
   toward the top: spare vertical space is split 1/3 above, 2/3 below.
   On small screens both spacers shrink to zero and the dialog fills the
   viewport (minus 0.25rem padding top + bottom). */
.modal.is-open::before {
  content: "";
  flex: 1 1 auto;
  min-height: 0;
}

.modal.is-open::after {
  content: "";
  flex: 2 1 auto;
  min-height: 0;
}

.modal-dialog {
  flex: 0 1 auto;
  width: calc(100vw - 0.5rem);
  max-width: 600px;
  max-height: 100%;
  min-height: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.modal-content,
.modal-dialog > form,
.modal-content > form {
  /* Inherit the flex column layout so header / body / footer can flex
     correctly whether the form (or a Bootstrap 3-style modal-content
     wrapper) sits between modal-dialog and the sections. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  flex: 0 0 auto;
}

.modal-title {
  margin: 0;
  font-size: 1.125rem;
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4 {
  margin: 0;
}

.modal-body {
  padding: 1.25rem;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.modal-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-divider);
  text-align: right;
  flex: 0 0 auto;
}

.modal-footer .primary-button,
.modal-footer .secondary-button {
  margin-left: 0.5rem;
}

button.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

button.modal-close:hover {
  color: #222;
}

body.modal-open {
  overflow: hidden;
}
/* === Panel + section header =============================================
   A "panel" is a stacked content section grouped under an eyebrow header
   with a thin divider. Used for home-page sections (Games, News, Top plays,
   Prolific and you) and reusable elsewhere.
*/

.panel {
  margin-bottom: 1.5rem;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  min-height: 1.625rem;
  margin: 0 0 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-divider);
}

.panel.panel-flush > .panel-header {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.panel-header .panel-title {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.panel-pill {
  display: inline-flex;
  align-items: center;
  background: #f1f1f0;
  border: 1px solid #d4d4d2;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #555;
}

.panel-since {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #888;
}

.panel-body {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.panel-body > p:first-child {
  margin-top: 0.25rem;
}

.panel-body > p:last-child {
  margin-bottom: 0.25rem;
}

/* === Pill tab group =====================================================
   Inline pill-style toggle group. Used for top plays scope and the
   Active / Recent / History games-list tabs.
*/

.pill-tabs {
  display: inline-flex;
  align-items: stretch;
  background: #f1f1f0;
  border: solid 1px #d4d4d2;
  border-radius: 999px;
  padding: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
}

.pill-tab {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #8a8a85;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 4px 10px;
  margin: 0;
  line-height: 1;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.pill-tab:hover:not(.active) {
  color: #555;
}

.pill-tab:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.12);
  outline-offset: 1px;
}

.pill-tab.active {
  background: #fff;
  color: #1f1f1d;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  cursor: default;
}

.pill-tabs.loading {
  opacity: 0.55;
  pointer-events: none;
}

/* === Banner (announcement bar) ==========================================
   Variants: attention (slate CTA), info (neutral notice), warning (yellow).
*/

.banner {
  display: block;
  margin-bottom: 1rem;
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.banner.banner-attention {
  background-color: #eef0f3;
  border: 1px solid var(--color-divider);
  color: var(--color-accent);
  cursor: pointer;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.35rem 0.75rem;
}

.banner.banner-attention:hover {
  background-color: #e3e6ec;
}

.banner.banner-info {
  background-color: #fcfcfc;
  border: 1px solid var(--color-divider);
  color: #444;
}

.banner.banner-warning {
  background-color: #fff7d1;
  border: 1px solid #b3850a;
  color: #5a4400;
  font-weight: 600;
}
/* === Results header ============================================ */

#results-container header {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-divider);
  border-radius: 0;
  padding: 0.25rem 0 1.125rem;
  margin-bottom: 1.25rem;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
}

#results-container header h1 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #1a1a1a;
  line-height: 1.25;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}

#results-container header .winner-avatars {
  display: inline-flex;
}

#results-container header .winner-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-divider);
}

#results-container header .winner-avatar+.winner-avatar {
  margin-left: -0.625rem;
}

#results-container header .winner-name {
  color: var(--color-brand);
  font-weight: 700;
}

#results-container header .winner-line {
  display: inline;
}

#results-container .words-found-stat {
  font-size: 0.8125rem;
  color: #777;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#results-container .words-found-number {
  font-weight: 600;
  color: #444;
}

@media (max-width: 30rem) {
  #results-container header {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    align-items: start;
  }
}

/* === Grid + chat area ============================================ */

#grid-and-summary {
  margin-block: 1rem 0.5rem;
  display: grid;
  grid-template-rows: 12rem auto 16rem auto;
  gap: 1rem;
  grid-template-areas: "grid" "next-game" "messages" "typing-notification";
}

#grid-and-summary.gametype-solo {
  grid-template-rows: 12rem auto;
  grid-template-areas: "grid" "next-game";
  gap: 1rem;
}

@media (min-width: 35rem) {
  #grid-and-summary {
    grid-template-columns: auto 1fr;
    grid-template-rows: 12rem 3rem min-content;
    gap: 0;
    column-gap: 1.25rem;
    grid-template-areas:
      "grid messages"
      "next-game messages"
      "- typing-notification";
  }

  #grid-and-summary.gametype-solo {
    grid-template-rows: minmax(20rem, 100%) auto;
  }
}

#grid-and-summary #grid {
  grid-area: grid;
  height: 100%;
  box-sizing: border-box;
}

#grid-and-summary .chat-system {
  grid-area: messages;
  display: grid;
  grid-template-rows: 1fr auto;
}

#grid-and-summary #chat-input-form input[type=submit] {
  color: var(--color-accent);
}

#grid-and-summary #typing-notification {
  grid-area: typing-notification;
}

#grid-and-summary .next-game {
  grid-area: next-game;
  align-self: end;
}

#grid-and-summary .next-game button {
  width: 100%;
}

#grid-and-summary.gametype-solo #chat-pane,
#grid-and-summary.gametype-solo #chat-input-form {
  display: none;
}

/* === Ninja (all-words-found) banner ============================= */

.ninja {
  margin-block: 1.25rem;
  padding: 0.875rem 1.25rem;
  background-color: var(--color-brand);
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(236, 59, 31, 0.15);
}

/* === Per-player score columns ==================================== */

section#results {
  overflow-y: auto;
  margin-block: 1.5rem;
  display: grid;
  grid-template-columns: repeat(var(--player-count), minmax(min-content, 9rem));
  grid-template-rows: auto auto auto 1fr;
  column-gap: 1.5rem;
}

section#results > * {
  background-color: transparent;
}

section#results .player-pic {
  padding-top: 0;
  border: none;
  display: flex;
  justify-content: center;
}

section#results .player-pic img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: block;
}

section#results .player-name {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: -0.005em;
}

section#results .player-score {
  text-align: center;
  margin-top: 0.125rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}

section#results .player-words {
  border-top: 1px solid var(--color-divider);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

section#results .player-words > div {
  padding: 0;
}

section#results .player-words .word {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 1px 0.375rem;
}

section#results .player-words .word:nth-child(odd) {
  background-color: #f6f6f6;
}

section#results .player-words .sr6,
section#results .player-words .sr7 {
  background-color: #fff7d1;
}

section#results .player-words .sr6:nth-child(odd),
section#results .player-words .sr7:nth-child(odd) {
  background-color: #fbf1cb;
}

section#results .points {
  text-align: right;
}

section#results .player-words .w:hover,
#unused-words span:hover {
  cursor: pointer;
  text-decoration: underline;
}

/* === Disclosure rows (unused words, scoring key) ================= */

details.unused-words,
details.result-page-information {
  border-top: 1px solid var(--color-divider);
  padding-top: 0.625rem;
  font-size: 0.8125rem;
  color: #555;
  line-height: 1.5;
}

details.unused-words {
  margin-block: 3rem 1rem;
  color: #666;
}

details.result-page-information {
  margin-top: 1rem;
}

details.unused-words>summary,
details.result-page-information>summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 0;
}

details.unused-words>summary::-webkit-details-marker,
details.result-page-information>summary::-webkit-details-marker {
  display: none;
}

/* Toggle chevron — shared visuals, applied to summary or summary-header */
details.unused-words .summary-header,
details.result-page-information>summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}

details.unused-words .summary-header::before,
details.result-page-information>summary::before {
  content: "›";
  color: #aaa;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  transition: transform 0.15s ease;
  display: inline-block;
}

details.unused-words[open] .summary-header::before,
details.result-page-information[open]>summary::before {
  transform: rotate(90deg);
}

details.unused-words>summary:hover .summary-header,
details.result-page-information>summary:hover {
  color: #555;
}

details.unused-words .count {
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #aaa;
}

details.unused-words .unused-words-preview,
details.unused-words[open] #unused-words {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #666;
  margin-top: 0.375rem;
  padding-left: 1.5rem;
}

details.unused-words .unused-words-preview {
  display: block;
  overflow: hidden;
  height: 1.5em;
}

details.unused-words[open] .unused-words-preview {
  display: none;
}

details.result-page-information[open]>summary {
  margin-bottom: 0.5rem;
}

/* === Notification ================================================ */

#notification-on-text {
  display: none;
}

#notification-pane.enabled #notification-on-text {
  display: inherit;
}

#notification-pane.enabled #notification-off-text {
  display: none;
}

/* === Cube note =================================================== */

.cube-note {
  font-size: 0.625rem;
  text-align: center;
  color: #888;
}

.cube-note span {
  font-variant: small-caps;
}

/* === Result page information (scoring key etc.) ================== */

.result-page-information {
  margin-bottom: 4rem;
}

.result-page-information ul.scoring-key,
.result-page-information p {
  max-width: 30rem;
}

.result-page-information ul.scoring-key {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.result-page-information ul.scoring-key li {
  padding: 0.3125rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.result-page-information ul.scoring-key li:last-child {
  border-bottom: none;
}

.result-page-information p {
  margin: 0.5rem 0;
}

.result-page-information .bonus-swatch {
  background-color: #fff7d1;
  padding: 0 0.25rem;
  border-radius: 0.125rem;
}

/* Word status colours — used in word lists & scoring key */
.st1,
.st3,
.st5 {
  text-decoration: line-through;
}

.st1 {
  color: #00f;
}

.st2,
.st7 {
  color: #222;
}

.st3,
.st5 {
  color: #a00;
}

.st4,
.st6 {
  font-weight: 700;
}
main.new-session h2:not(:first-child) {
  margin-top: 2.5rem;
}

main.new-session form {
  width: 300px;
  margin: 2rem auto;
}

main.new-session input {
  display: block;
  width: 300px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main.new-session input[type=password] {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

main.new-session input[type=submit] {
  padding: 0.5rem;
}
#tranche-explanation { border-collapse: collapse; margin: 12px auto; }
#tranche-explanation th, #tranche-explanation td { border: 1px solid #aaa; padding: 1px 6px; }
#tranche-explanation th { text-align: left; }
#tranche-explanation td { text-align: center; }

#word-count-bands { border-collapse: collapse; margin: 12px auto; font-size: 12px; }
#word-count-bands th, #word-count-bands td { border: 1px solid #aaa; padding: 2px 8px; }
#word-count-bands th { text-align: left; font-weight: normal; }
#word-count-bands tr:first-child th { text-align: center; font-weight: bold; }
#word-count-bands td { text-align: center; }

.donate-box {
  float: left;
  border: 3px dashed #226;
  margin: 12px 30px 12px 0;
  width: 250px;
  padding: 8px 16px;
  background-color: #f8f8ff;
  box-sizing: border-box;
}

.donate-blurb {
  margin-left: 318px;
}

@media (max-width: 800px) {
  .donate-box {
    float: none;
    width: 100%;
    margin: 12px 0;
  }

  .donate-blurb {
    margin-left: 0;
  }
}

/* global */

#environment {
  position: fixed;
  right: 0;
  bottom: 0;
  font-weight: bold; padding: 8px; background-color: orange;
  z-index: 1000;
}

#title { margin-top: 4px; }
#title img { border: 0; }

#tabs {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

#tabs a {
  display: block;
  color: #544;
  font-size: 12pt;
  margin: 1.5rem 0;
}

#tabs .nav-link-form {
  display: block;
  margin: 0;
  padding: 0;
}

#tabs .nav-link-button {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  margin: 1.5rem 0;
  font: inherit;
  font-size: 12pt;
  color: #544;
  cursor: pointer;
  text-align: left;
}

#tabs .nav-link-button:hover {
  text-decoration: underline;
}

hr { color: #e3e3e3; background-color: #e3e3e3; height: 1px; margin: 12px 0; padding: 0; border: 0; }
/* === Todays Special =====================================================
   Reuses the standard .game card; minor tweaks to embed a play CTA inline
   and a footer link for submitting recipes.
*/

.todays-special .recipe-card {
  margin-bottom: 0.5rem;
}

.recipe-card-credit {
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #999;
}

.recipe-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: #999;
}

.recipe-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
}

.recipe-card-meta-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-card-meta-icon {
  flex-shrink: 0;
  color: #b5b5b5;
}

form.button_to {
  margin: 0;
}

.recipe-manage-link {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
}

.recipe-manage-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.recipe-footer {
  font-size: 0.75rem;
  text-align: right;
  color: #888;
}

.recipe-footer a {
  color: var(--color-accent);
}

.recipe-empty {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.8125rem;
  color: #777;
}

/* === New game dialog: todays special toggle ============================= */

.recipe-dialog-toggle {
  margin: 0 0 0.875rem;
  padding: 0.5rem 0.625rem;
  background-color: #fafafa;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
}

.recipe-dialog-toggle label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  margin: 0;
}

.recipe-dialog-toggle input[type="checkbox"] {
  margin-top: 0.1875rem;
}

.recipe-dialog-label {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.recipe-dialog-pill {
  align-self: flex-start;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}

.recipe-dialog-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f1f1d;
}

.recipe-dialog-spec {
  font-size: 0.75rem;
  color: #777;
  font-variant-numeric: tabular-nums;
}

/* === Recipe admin / submission pages ==================================== */

.recipe-page {
  max-width: 56rem;
  margin: 0 auto 2rem;
}

.recipe-page-header {
  margin-bottom: 1.5rem;
}

.recipe-page-header h1 {
  margin: 0 0 0.375rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f1f1d;
}

.recipe-page-subtitle {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #666;
  max-width: 42rem;
}

.recipe-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.recipe-flash {
  margin-bottom: 1.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background-color: #fafafa;
  border: 1px solid var(--color-divider);
  font-size: 0.875rem;
  color: #444;
}

.recipe-group {
  margin-bottom: 2.5rem;
}

.recipe-group-header {
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-divider);
}

.recipe-group-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f1f1d;
}

.recipe-group-help {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #777;
  max-width: 42rem;
}

.recipe-queue-section {
  margin-bottom: 1.5rem;
}

.recipe-queue-section:last-child {
  margin-bottom: 0;
}

.recipe-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.625rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-divider);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
}

.recipe-section-meta {
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #999;
  font-variant-numeric: tabular-nums;
}

.recipe-queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.recipe-empty-card {
  padding: 1rem;
  background-color: #fff;
  border: 1px dashed var(--color-divider);
  border-radius: 8px;
  color: #888;
  font-size: 0.875rem;
  text-align: center;
}

/* === Recipe row card ==================================================== */

.recipe-row {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.875rem;
  background-color: #fff;
  border: 1px solid var(--color-divider);
  border-radius: 8px;
}

.recipe-row-position {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #777;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.recipe-row-body {
  min-width: 0;
}

.recipe-special-badge {
  display: inline-block;
  padding: 0.0625rem 0.4375rem;
  background-color: rgba(74, 85, 104, 0.08);
  color: var(--color-accent);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
}

.recipe-row-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.125rem;
}

.recipe-card-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.recipe-row-spec {
  font-size: 0.75rem;
  line-height: 1.45;
  color: #666;
  font-variant-numeric: tabular-nums;
}

.recipe-row-credit {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 0.125rem;
}

.recipe-flash-alert {
  background-color: #fff5f5;
  border-color: #f5c2c2;
  color: #8a2a2a;
}

.recipe-delete-button {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: #888;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.recipe-delete-button:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.recipe-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.recipe-row-actions form {
  margin: 0;
}

/* === Recipe submission form ============================================= */

.recipe-form {
  background-color: #fff;
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

.recipe-form-errors {
  margin-bottom: 1rem;
  padding: 0.625rem 0.75rem;
  background-color: rgba(236, 59, 31, 0.05);
  border: 1px solid rgba(236, 59, 31, 0.3);
  border-radius: 6px;
  font-size: 0.8125rem;
  color: #5a1808;
}

.recipe-form-errors strong {
  display: block;
  margin-bottom: 0.375rem;
}

.recipe-form-errors ul {
  margin: 0;
  padding-left: 1.25rem;
}

.recipe-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  margin-bottom: 0.875rem;
}

.recipe-form-row label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
}

.recipe-form-row input[type="text"],
.recipe-form-row input[type="number"],
.recipe-form-row input[type="date"],
.recipe-form-row select {
  padding: 0.4375rem 0.625rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  background-color: #fff;
  color: #1f1f1d;
  font-variant-numeric: tabular-nums;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.recipe-form-row input:focus,
.recipe-form-row select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-focus-ring);
}

.recipe-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

.recipe-form-row-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.recipe-form-row-checkbox label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: #333;
}

.recipe-form-row-full {
  grid-column: 1 / -1;
}

.recipe-form-note {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: #666;
}

.recipe-form-admin {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  background-color: #fafafa;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
}

.recipe-form-admin h3 {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
}

.recipe-form-admin-help {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  color: #777;
  line-height: 1.5;
}

.recipe-form-help {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  color: #888;
  line-height: 1.45;
}

.recipe-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-divider);
}

@media (max-width: 36rem) {
  .recipe-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .recipe-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .recipe-row-actions {
    justify-self: end;
  }
}
/* === Tooltip ============================================================
   Lightweight CSS-only tooltip. Apply `data-tooltip="..."` to any element
   and a tooltip will appear on hover/focus with a short fade-in. Use
   `data-tooltip-pos="below"` to flip it to underneath the trigger.
*/

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  padding: 4px 8px;
  background: rgba(30, 30, 30, 0.92);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 90ms ease 30ms, transform 90ms ease 30ms;
  z-index: 10;
}

[data-tooltip][data-tooltip-pos="below"]::after {
  bottom: auto;
  top: calc(100% + 6px);
  transform: translateX(-50%) translateY(-2px);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#tournaments-pane {}
#tournaments-pane .outer-box { background-color: #f3f3f3; border-radius: 6px; padding: 16px 0; overflow: auto; margin-bottom: 24px; }
#tournaments-pane .inner-box { padding: 0 16px; }
#tournaments-pane .admin { background-color: #f3ccd4; }

#tournaments-pane .title { background-color: #bde; padding: 8px 22px; }
#tournaments-pane .title h1 { margin: 0; padding: 0; font-size: 20pt; }
#tournaments-pane .title .config { float: right; padding-top: 10pt; }

#tournaments-pane .box { background-color: #ddd; padding: 16px 12px; border-radius: 6px; }
#tournaments-pane .right-pane { float: right; width: 50%; }
#tournaments-pane .content-box { background-color: #ddd; padding: 12px 0; border-radius: 6px; }

#tournaments-pane h2 { padding: 0; margin: 0; }

#tournaments-pane dt { float: left; width: 150px; text-align: right; padding: 4px 12px 0 0; margin: 0;}
#tournaments-pane dd { font-size: 16pt; margin: 0; padding: 0 0 8px 0; }
#tournaments-pane dd:last-child { padding-bottom: 3px; }
#tournaments-pane .me { font-size: 11pt; font-weight: bold; }

#user-tranches h2 { background-color: #b8c4ca; padding: 4px 12px; font-size: 11pt; font-weight: bold; margin-bottom: 12px; }
#user-tranches .users { margin-bottom: 12px; }
#user-tranches.condensed h2 { float: left; width: 30%; font-weight: normal; padding-right: 4px; font-size: 10pt; }
#user-tranches.condensed .tranche { overflow: auto; }
#user-tranches.condensed .users { margin-left: 33%; }

#tournaments-pane .game-info-box { background-color: #ddd; padding: 12px; border-radius: 6px; margin-right: 55%; margin-top: 16px; }
#tournaments-pane .game-info-box table { width: 100%; }
#tournaments-pane .game-info-box td { text-align: center; }

#tournament-quick-guide { margin: 0; padding: 0; font-size: 9pt; }
#tournament-quick-guide li { margin: 0; padding: 0 0 6px 0; }

@media (max-width: 800px) {
  #tournaments-pane .inner-box {
    display: flex;
    flex-direction: column;
  }

  #tournaments-pane .right-pane {
    float: none;
    width: auto;
    margin-top: 12px;
    order: 2;
  }

  #tournaments-pane .game-info-box {
    order: 1;
  }

  #tournaments-pane .title .config {
    float: none;
    padding-top: 6px;
  }

  #tournaments-pane dt {
    float: none;
    width: auto;
    text-align: left;
    padding: 4px 0 0 0;
  }

  #tournaments-pane dd {
    font-size: 14pt;
  }

  #tournaments-pane .game-info-box {
    margin-right: 0;
  }

  #user-tranches.condensed h2 {
    float: none;
    width: auto;
    padding-right: 0;
  }

  #user-tranches.condensed .users {
    margin-left: 0;
  }
}
/* === Watchword panel ====================================================
   Home-page card announcing the current watchword and the previous finder.
   Sits above the Top Plays section and reuses .panel layout.
*/

.watchword-panel .panel-body {
  padding: 0.25rem 0;
}

.watchword-current {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.watchword-pending {
  color: #777;
  font-style: italic;
}

.watchword-word {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.watchword-previous {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #555;
}

.watchword-previous .watchword-word {
  letter-spacing: 0.03em;
  color: #444;
}

.watchword-finders {
  font-weight: 500;
  color: #333;
}

/* === Submission form ==================================================== */

.watchword-submit {
  margin-top: 0.875rem;
  padding: 0.75rem 0.875rem;
  background-color: #fafafa;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
}

.watchword-submit-prompt {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333;
}

.watchword-submit-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.watchword-input {
  flex: 1;
  padding: 0.4375rem 0.625rem;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  background-color: #fff;
  color: #1f1f1d;
}

.watchword-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-focus-ring);
}

.watchword-submit-help {
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  color: #888;
  line-height: 1.4;
}

/* === Game results celebration =========================================== */

.watchword-found-banner {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 1rem;
  background-color: rgba(236, 191, 31, 0.12);
  border: 1px solid rgba(236, 191, 31, 0.45);
  border-radius: 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #4a3a06;
}

.watchword-found-banner strong {
  letter-spacing: 0.04em;
}

/* === Watchwords admin page ============================================== */

.watchwords-page {
  max-width: 56rem;
  margin: 0 auto 2rem;
}

.watchwords-page h1 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f1f1d;
}

.watchwords-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.watchwords-history li {
  padding: 0.5rem 0.75rem;
  background-color: #fff;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #444;
}

.watchwords-history-word {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #222;
}

.watchwords-history-meta {
  font-size: 0.75rem;
  color: #888;
}

.watchword-manage-link {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
}

.watchword-manage-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.watchwords-flash {
  margin-bottom: 1.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background-color: #fafafa;
  border: 1px solid var(--color-divider);
  font-size: 0.875rem;
  color: #444;
}

.watchwords-delete-button {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: #888;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.watchwords-delete-button:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}