:root {
  color-scheme: dark;
  --color-bg: #0b1020;
  --color-bg-accent: #132f38;
  --color-surface: #151c32;
  --color-surface-raised: #1d2742;
  --color-surface-muted: #202b46;
  --color-text: #f8fafc;
  --color-text-muted: #b7c2d7;
  --color-border: #465473;
  --color-primary: #2dd4bf;
  --color-primary-text: #07131d;
  --color-secondary: #a78bfa;
  --color-secondary-text: #130a29;
  --color-danger: #fb7185;
  --color-danger-text: #250712;
  --color-danger-surface: #4c1825;
  --color-success: #5ee7a0;
  --color-success-text: #07131d;
  --color-success-surface: #123c31;
  --color-warning: #fbbf24;
  --color-focus: #67e8f9;
  --color-content-paper: #fffaf0;
  --color-content-ink: #191827;
  --color-content-label: #7b3d00;
  --color-drawing-paper: #ffffff;
  --radius-control: 12px;
  --radius-card: 18px;
  --shadow-card: 0 14px 34px rgba(0, 0, 0, .24);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --border: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --good: var(--color-success);
  --good-bg: var(--color-success-surface);
  --bad: var(--color-danger);
  --bad-bg: var(--color-danger-surface);
  --off: #8491aa;
  --accent: var(--color-primary);
}
[data-theme="basic"] {
  color-scheme: light;
  --color-bg: #f7f7f2;
  --color-bg-accent: #eef8f5;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-muted: #f3f4f6;
  --color-text: #1f2937;
  --color-text-muted: #4b5563;
  --color-border: #d8d8d0;
  --color-primary: #0f766e;
  --color-primary-text: #ffffff;
  --color-secondary: #7c3aed;
  --color-secondary-text: #ffffff;
  --color-danger: #b91c1c;
  --color-danger-text: #ffffff;
  --color-danger-surface: #fef2f2;
  --color-success: #14532d;
  --color-success-text: #ffffff;
  --color-success-surface: #daf5e4;
  --color-warning: #b45309;
  --color-focus: #0e7490;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, .04);
}
[data-theme="bold-contrast"] {
  color-scheme: dark;
  --color-bg: #000000;
  --color-bg-accent: #161616;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-muted: #f2f2f2;
  --color-text: #050505;
  --color-text-muted: #3f3f3f;
  --color-border: #050505;
  --color-primary: #ffd400;
  --color-primary-text: #050505;
  --color-secondary: #ffffff;
  --color-secondary-text: #050505;
  --color-danger: #b00020;
  --color-danger-text: #ffffff;
  --color-danger-surface: #ffe8ec;
  --color-success: #075f2d;
  --color-success-text: #ffffff;
  --color-success-surface: #e4f8ec;
  --color-warning: #6b4f00;
  --color-focus: #00a6ff;
  --shadow-card: 8px 8px 0 #ffd400;
}
[data-theme="arcade-night"] {
  color-scheme: dark;
  --color-bg: #0d1028;
  --color-bg-accent: #173b54;
  --color-surface: #171a3b;
  --color-surface-raised: #20254f;
  --color-surface-muted: #292f62;
  --color-text: #fffdf8;
  --color-text-muted: #c9ccec;
  --color-border: #4b5289;
  --color-primary: #adff55;
  --color-primary-text: #101327;
  --color-secondary: #8b5cf6;
  --color-secondary-text: #ffffff;
  --color-danger: #ff5d8f;
  --color-danger-text: #1b0711;
  --color-danger-surface: #50162b;
  --color-success: #adff55;
  --color-success-text: #101327;
  --color-success-surface: #263f2b;
  --color-warning: #51f4ff;
  --color-focus: #51f4ff;
  --radius-control: 15px;
  --radius-card: 22px;
  --shadow-card: 0 14px 0 rgba(5, 7, 24, .72);
}
body {
  margin: 0;
  font-family: "Trebuchet MS", Candara, sans-serif;
  background: radial-gradient(circle at top left, var(--color-bg-accent), var(--bg) 58%);
  color: var(--text);
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border: 3px solid var(--color-focus);
  border-radius: var(--radius-control);
  color: var(--color-primary-text);
  background: var(--accent);
  font-weight: 900;
  transform: translateY(-160%);
}
.skip-link:focus {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: max-content;
  max-width: calc(100% - 16px);
  margin: 8px auto;
  outline: none;
  transform: translateY(0);
}
.wrap {
  max-width: 1120px;
  margin: 16px auto;
  padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.site-header {
  padding: 11px 16px;
}
.site-brand-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  white-space: nowrap;
}
.site-brand-line h1,
.site-brand-line p {
  margin: 0;
}
.site-brand-line .muted {
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-menu-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.brand-expansion {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 900;
}
[data-theme="bold-contrast"] .brand-expansion {
  color: var(--text);
}
.site-nav-btn {
  min-height: 44px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--color-surface-muted);
  font-weight: 700;
}
.site-nav-btn.active {
  border-color: var(--accent);
  color: var(--color-primary-text);
  background: var(--accent);
}
.profile-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.profile-menu-shell {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}
.profile-menu {
  box-sizing: border-box;
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100dvh - 76px);
  overflow-x: hidden;
  overflow-y: auto;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: var(--color-surface-raised);
  box-shadow: 0 12px 30px rgba(17, 24, 39, .2);
}
.profile-menu p {
  margin: 0;
}
.profile-menu-identity {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-badge {
  display: inline-grid;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .3rem;
  place-items: center;
  border-radius: 999px;
  background: var(--danger, #b42318);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
}

.social-page {
  min-height: min(42rem, calc(100vh - 10rem));
}

.social-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.social-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .35rem;
  margin: .75rem 0;
}

.social-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 0;
  min-height: 2.3rem;
  padding: .45rem .35rem;
  white-space: normal;
}

.social-tab-badge {
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 .22rem;
  font-size: .62rem;
  flex: 0 0 auto;
}

.social-panel {
  max-height: min(64vh, 42rem);
  overflow: auto;
}

.social-list {
  display: grid;
  gap: .35rem;
  margin-top: .45rem;
}

.social-person-row {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) auto;
  align-items: center;
  gap: .65rem;
  min-height: 3.25rem;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: var(--panel, var(--card));
}

.social-avatar {
  width: 2.35rem;
  height: 2.35rem;
  border: 2px solid var(--border);
  border-radius: 50%;
  background-color: var(--surface-muted, #334155);
  background-position: center;
  background-size: cover;
}

.social-person-identity {
  display: grid;
  min-width: 0;
}

.social-person-identity strong,
.social-person-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-person-identity span {
  color: var(--muted);
  font-size: .82rem;
}

.social-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
}

.social-invite-status {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: .25rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.social-invite-status.declined {
  border-color: var(--danger, #b42318);
  color: var(--danger, #b42318);
}

.social-person-row.friend-list-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem;
}

.social-person-open {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: .4rem;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-align: left;
}

.social-person-open:hover,
.social-person-open:focus-visible {
  background: var(--surface-muted, rgba(127, 127, 127, .12));
  box-shadow: none;
}

.friend-list-row .social-row-actions {
  grid-column: auto;
  flex-wrap: nowrap;
}

.friend-list-row .social-row-actions .inline-btn {
  min-height: 2rem;
  padding: .3rem .48rem;
  font-size: .78rem;
  white-space: nowrap;
}

.social-friend-detail {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  padding-top: .35rem;
  border-top: 1px solid var(--border);
}

.social-friend-detail p {
  margin: 0;
}

.social-friend-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  min-width: 0;
}

.social-friend-history-list .inline-btn {
  max-width: min(100%, 16rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.social-find-grid form,
.profile-social-settings {
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--panel, var(--card));
}

.social-inline-form {
  display: flex;
  gap: .45rem;
}

.social-inline-form input {
  min-width: 0;
  flex: 1;
}

.profile-social-settings {
  margin: .8rem 0;
}

.social-privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem .8rem;
  margin-top: .65rem;
}

.social-privacy-grid label {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.social-archive-notice {
  margin: .65rem 0;
  padding: .55rem .65rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-size: .84rem;
}

.management-social-handle-input {
  inline-size: 11rem;
  min-block-size: 30px;
  padding: 3px 6px;
  font: inherit;
}

@media (max-width: 720px) {
  .social-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .social-find-grid,
  .social-privacy-grid {
    grid-template-columns: 1fr;
  }

  .social-person-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .social-row-actions {
    grid-column: 2 / -1;
  }

  .friend-list-row .social-row-actions {
    grid-column: auto;
  }

  .social-inline-form {
    align-items: stretch;
    flex-direction: column;
  }
}
.profile-menu-action {
  width: 100%;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--color-surface-muted);
  text-align: left;
}
.site-menu-nav .profile-menu-action {
  min-width: 0;
  min-height: 42px;
  padding: 7px 8px;
  text-align: center;
}
.profile-menu .google-sign-in-row {
  display: grid;
  justify-items: start;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.profile-menu .google-sign-in-row .tiny {
  max-width: 100%;
}
.profile-nav-icon {
  width: 27px;
  height: 27px;
  padding: 3px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}
.game-view-nav {
  display: none;
}
.game-view-nav button {
  min-height: 44px;
  border: 1px solid var(--border);
  background: var(--color-surface-raised);
  color: var(--text);
  font-weight: 800;
}
.game-view-nav button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--color-primary-text);
}
body.game-active .site-header,
body.game-active .build-footer {
  display: none;
}
body.game-active .wrap {
  margin-top: 0;
  padding-top: max(8px, env(safe-area-inset-top));
}
body.game-active .game-view-nav:not(.hidden) {
  position: sticky;
  z-index: 20;
  top: max(8px, env(safe-area-inset-top));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 6px;
  padding: 5px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.12);
  backdrop-filter: blur(5px);
}
.game-audio-controls {
  display: inline-grid;
  grid-template-columns: repeat(2, 44px);
  gap: 6px;
}
.game-view-nav .audio-icon-btn {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 9px;
  place-items: center;
  border-color: var(--border-strong);
  border-radius: 9px;
}
.game-view-nav .audio-icon-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.audio-state-indicator {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .32);
}
.audio-icon-btn[data-audio-active="false"] .audio-state-indicator {
  border-color: #dc2626;
  background: #fff;
  box-shadow: none;
}
.audio-icon-btn[data-audio-active="false"] .audio-state-indicator::after {
  position: absolute;
  top: 3px;
  left: -2px;
  width: 11px;
  height: 2px;
  background: #dc2626;
  content: "";
  transform: rotate(-45deg);
  transform-origin: center;
}
body.game-active.game-view-turn #lobbyCard,
body.game-active.game-view-lobby #gameCard,
body.game-active.game-view-lobby #triviaCard,
body.game-active.game-view-lobby #wordSearchCard,
body.game-active.game-view-lobby #sudokuCard,
body.game-active.game-view-lobby #snakeCard,
body.game-active.game-view-lobby #revealCard {
  display: none;
}
body.game-active.game-view-lobby #lobbyCard {
  margin-bottom: 0;
}
body.management-open .play-surface {
  display: none !important;
}
body.site-page-open .play-surface {
  display: none !important;
}
.site-page:focus {
  outline: none;
}
.management-card:focus {
  outline: none;
}

.management-alert-section {
  margin: 18px 0;
}

.management-alert-list {
  display: grid;
  gap: 8px;
}

.management-alert,
.management-alert-clear {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 0;
  padding: 10px 12px;
}

.management-alert.warning {
  border-color: #d97706;
  background: #fffbeb;
  color: #92400e;
}

.management-alert.critical {
  border-color: var(--bad);
  background: #fef2f2;
  color: #991b1b;
}

.management-alert-clear {
  background: #f0fdf4;
  color: #166534;
}

.management-host-grid {
  margin-bottom: 10px;
}
[data-management-component="host-alert-thresholds"] {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.management-consistency-scan {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--color-surface-raised);
}
.management-consistency-scan .management-panel-heading {
  margin-bottom: 8px;
}
.management-consistency-scan h3 {
  margin-bottom: 4px;
}
.management-consistency-scan .management-stat-grid article {
  min-height: 72px;
  padding: 10px;
}
.management-threshold-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) repeat(2, minmax(6rem, 9rem));
  gap: 8px 12px;
  align-items: center;
}
.management-threshold-grid label,
.management-threshold-grid input {
  margin: 0;
}
.management-threshold-heading {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}
.management-runtime-grid {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) minmax(10rem, 14rem);
  gap: 8px 12px;
  align-items: center;
}
.management-runtime-grid label,
.management-runtime-grid select,
.management-runtime-grid input {
  margin: 0;
}
.management-runtime-checkbox {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.management-runtime-checkbox input {
  width: auto;
}
.management-runtime-checkboxes {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}
.management-runtime-checkboxes legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}
.management-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.management-heading p,
.management-heading h2 {
  margin: 0;
}
.management-unlock-form {
  max-width: 34rem;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--color-surface-raised);
}
#managementUnlockBtn {
  width: 100%;
  min-height: 44px;
  color: var(--color-primary-text);
  background: var(--accent);
}
.management-unlocked-state {
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--good);
  background: var(--good-bg);
  font-weight: 700;
}
.management-area-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0;
}
.management-area-list span,
.management-area {
  padding: 9px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--color-surface-muted);
  color: var(--text);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
}
.management-area {
  width: 100%;
  min-height: 0;
  cursor: pointer;
}
.management-area.active {
  border-color: var(--accent);
  color: var(--color-primary-text);
  background: var(--accent);
}

.management-audio-settings input[type="range"] {
  width: min(100%, 22rem);
  accent-color: var(--accent, #19c8b2);
}

.management-audio-settings input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--accent, #19c8b2);
}

.management-audio-preview-heading {
  margin-top: 0.8rem;
}

.management-audio-preview-heading label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.management-audio-preview {
  width: min(100%, 44rem);
  margin-top: 0.75rem;
}
@media (min-width: 1100px) {
  #managementUnlockedPanel:not(.hidden) {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
  #managementUnlockedPanel > .management-unlocked-state {
    grid-column: 1 / -1;
    margin: 0;
  }
  #managementUnlockedPanel > .management-area-list {
    position: sticky;
    top: 12px;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--color-surface-muted);
  }
  #managementUnlockedPanel > .management-area-list .management-area {
    min-height: 38px;
    text-align: left;
  }
  #managementUnlockedPanel > .management-data-panel:not(.hidden) {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
}
.management-data-panel {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--color-surface-muted);
}
.management-data-panel h3 {
  margin-bottom: 12px;
}
.management-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.management-stat-grid article {
  display: flex;
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--color-surface-raised);
  flex-direction: column;
  justify-content: center;
}
.management-stat-grid strong {
  color: var(--accent);
  font-size: 1.8rem;
}
.management-stat-grid span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}
.management-system-list {
  display: grid;
  gap: 8px;
  margin: 0;
}
.management-system-list div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.25fr) 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--color-surface-raised);
}
.management-system-list dt {
  font-weight: 800;
}
.management-system-list dd {
  margin: 0;
}
.management-panel-heading,
.management-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.management-panel-heading h3 {
  margin-bottom: 0;
}
.management-log-filters {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) auto minmax(8rem, 1fr);
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}
.management-log-filters label {
  margin: 0;
  font-weight: 800;
}
.management-query-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
}
.management-query-filters label {
  margin: 0;
  font-weight: 800;
}
.management-query-filters input,
.management-query-filters select {
  width: auto;
  min-width: 8rem;
  margin: 0;
}
.management-table-wrap {
  max-height: min(62vh, 660px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.management-log-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  background: var(--color-surface-raised);
  font-size: 0.82rem;
}
.management-log-table th,
.management-log-table td {
  padding: 9px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.management-log-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--color-surface-muted);
}
.management-compact-table {
  min-width: max-content;
  table-layout: fixed;
}
.management-compact-table th,
.management-compact-table td {
  max-width: 17rem;
  height: 40px;
  padding: 5px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.management-sentences-table th:nth-child(2),
.management-sentences-table td:nth-child(2) {
  width: 28rem;
  min-width: 28rem;
  max-width: 28rem;
}
.management-resizable-table th {
  position: sticky;
}
.management-column-resizer {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  width: 9px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.management-column-resizer:hover,
.management-column-resizer:focus-visible {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.management-selection-cell {
  position: sticky !important;
  z-index: 2;
  left: 0;
  width: 2.5rem;
  min-width: 2.5rem !important;
  max-width: 2.5rem !important;
  text-align: center !important;
  background: var(--color-surface-raised);
}
.management-compact-table th.management-selection-cell {
  z-index: 4;
  background: var(--color-surface-muted);
}
.management-selection-cell input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}
.management-bulk-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 38px;
  min-width: 0;
  max-width: 100%;
  margin: 6px 0;
}
.management-bulk-toolbar .inline-btn {
  max-width: 100%;
  white-space: normal;
}
.management-bulk-count {
  min-width: 5.5rem;
  font-weight: 800;
}
.management-compact-table th:last-child,
.management-compact-table td:last-child {
  position: sticky;
  z-index: 1;
  right: 0;
  width: 22rem;
  min-width: 22rem;
  max-width: 22rem;
  background: var(--color-surface-raised);
  box-shadow: -1px 0 0 var(--border);
}
.management-compact-table th:last-child {
  z-index: 3;
  background: var(--color-surface-muted);
}
.management-sort-button {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 4px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  gap: 4px;
}
.management-sort-button.active {
  color: var(--accent);
}
.management-sort-indicator {
  min-width: 0.75rem;
  font-size: 0.65rem;
}
.management-table-actions {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 30px;
  height: auto !important;
  overflow: visible !important;
  white-space: normal;
}
.management-table-actions select {
  width: auto;
  min-width: 5rem;
  margin: 0;
}
@media (max-width: 600px) {
  .management-selection-cell {
    position: static !important;
  }
  .management-compact-table th:last-child,
  .management-compact-table td:last-child {
    width: 16rem;
    min-width: 16rem;
    max-width: 16rem;
  }
}
.management-table-actions .inline-btn,
.management-compact-table .inline-btn {
  min-height: 28px;
  padding: 3px 7px;
  font-size: 0.72rem;
}
.management-artifact-thumbnail {
  display: block;
  width: 3rem;
  height: 2.25rem;
  object-fit: contain;
  border-radius: 0.35rem;
  background: #f8fafc;
}
.management-artifact-full {
  display: block;
  max-width: 100%;
  max-height: 68vh;
  margin: 0.75rem auto;
  object-fit: contain;
  border-radius: 0.6rem;
  background: #f8fafc;
}
.management-detail-drawer {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  width: min(58rem, 92vw);
  height: 100vh;
  margin: 0;
  padding: 18px;
  overflow: auto;
  border: 0;
  border-left: 1px solid var(--border);
  color: var(--text);
  background: var(--color-surface);
  box-shadow: -18px 0 42px rgba(15, 23, 42, 0.24);
}
.management-row-selected > td {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-raised));
}
.management-feedback-detail-row > td {
  padding: 0 !important;
  white-space: normal !important;
  background: var(--color-surface-muted);
}
.management-feedback-inline-detail {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  background: var(--color-surface-raised);
}
.management-feedback-inline-detail h4,
.management-feedback-message { margin: 0; }
.management-feedback-message {
  max-height: 16rem;
  overflow: auto;
  padding: 12px;
  border-radius: 8px;
  background: var(--color-surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.management-feedback-facts {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
#managementRecordDetailActions,
#managementGameDetailActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.management-related-records {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.management-related-records section {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--color-surface-raised);
}
.management-related-records h4 {
  margin: 0 0 8px;
}
.management-related-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid #e2e8f0;
}
.management-related-row:first-of-type { border-top: 0; }
.management-related-row p { min-width: 0; margin: 0; }
.history-connections {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--color-surface-muted);
}
.history-connection-list {
  display: grid;
  gap: 6px;
  max-height: min(19rem, 40vh);
  overflow-y: auto;
}
.history-connection-row {
  overflow-wrap: anywhere;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--color-surface-raised);
}
#managementRecordDetailActions select,
#managementGameDetailActions select {
  width: auto;
  min-width: 6rem;
  margin: 0;
}
@media (max-width: 600px) {
  .management-detail-drawer { width: 100vw; }
}
.management-account-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.management-account-actions select {
  min-width: 5.5rem;
}
.management-pagination {
  margin-top: 12px;
}
.management-game-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  gap: 12px;
}
.management-game-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dbe3eb;
  border-radius: 12px;
  background: #fff;
}
.management-game-card-heading,
.management-game-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.management-game-card-heading h4,
.management-game-card-heading p {
  margin: 0;
}
.management-game-card-heading h4 {
  overflow-wrap: anywhere;
}
.management-game-state {
  padding: 5px 9px;
  border-radius: 999px;
  color: #115e59;
  background: #ccfbf1;
  font-size: 0.76rem;
}
.management-game-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.management-game-facts div {
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: #f8fafc;
}
.management-game-facts dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.management-game-facts dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  font-weight: 700;
}
.management-game-actions {
  justify-content: flex-start;
}
.management-game-recovery {
  flex: 1 1 100%;
}
.management-history-actions {
  display: flex;
  min-width: 9rem;
  gap: 6px;
  flex-wrap: wrap;
}
.management-connection-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: 12px;
}
.management-connection-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dbe3eb;
  border-radius: 12px;
  background: #fff;
}
.management-connection-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.management-connection-heading time {
  color: var(--muted);
  font-size: 0.78rem;
}
.management-connection-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}
.management-connection-facts div {
  min-width: 0;
}
.management-connection-facts dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.management-connection-facts dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}
.management-game-detail {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.management-game-chains {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.management-game-chain {
  padding: 12px;
  border: 1px solid #dbe3eb;
  border-radius: 10px;
  background: #f8fafc;
}
.management-game-chain h4 {
  margin: 0 0 8px;
}
.management-game-chain details {
  margin-top: 6px;
}
.management-game-chain summary {
  cursor: pointer;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.management-compact-record-list {
  display: grid;
  gap: 3px;
  margin: 6px 0 0;
  padding-inline-start: 1.4rem;
  font-size: 0.78rem;
}
.management-compact-record-list li {
  min-width: 0;
  overflow-wrap: anywhere;
}
.management-game-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.management-game-player:first-of-type {
  border-top: 0;
}
.management-game-player p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.management-game-step {
  padding: 10px;
  border-top: 1px solid var(--border);
}
.management-game-step:first-of-type {
  border-top: 0;
}
.management-game-step p {
  margin: 4px 0;
  white-space: pre-wrap;
}
.management-game-step img {
  display: block;
  width: auto;
  max-width: min(100%, 420px);
  max-height: 320px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.management-metric-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.management-metric-heading h3 {
  margin: 0 auto 0 0;
}
.management-metric-heading label {
  margin: 0;
  font-weight: 800;
}
.management-metric-heading select {
  width: auto;
  min-width: 7rem;
  margin: 0;
}
.management-metric-summary {
  margin-top: 10px;
}
.management-capacity-table-wrap {
  max-height: 240px;
  margin-top: 10px;
}
.storage-capacity-warning {
  color: #92400e;
  font-weight: 800;
}
.storage-capacity-critical {
  color: var(--bad);
  font-weight: 900;
}
.management-metric-trend {
  display: flex;
  height: 110px;
  align-items: flex-end;
  gap: 2px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.management-activity-summary { margin-block: 8px; }
.management-activity-bucket {
  display: flex;
  align-items: end;
  gap: 1px;
  flex: 1 1 6px;
  min-width: 3px;
  height: 100%;
}
.management-activity-bar { display: block; flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.management-activity-bar.started { background: var(--accent); }
.management-activity-bar.completed { background: var(--success); }
.management-activity-bar.accounts { background: var(--color-secondary); }
.management-metric-trend span {
  min-width: 3px;
  background: var(--accent);
  flex: 1;
}
.management-metric-trend span.has-errors {
  background: var(--bad);
}
.management-metric-trend.empty::after {
  content: "No metric buckets in this window";
  align-self: center;
  margin: auto;
  color: var(--muted);
}
h1, h2, h3 {
  margin-top: 0;
  margin-bottom: 8px;
}
h1, h2 {
  font-family: ui-rounded, "Trebuchet MS", Candara, sans-serif;
  letter-spacing: -0.02em;
}
.muted {
  color: var(--muted);
}
.tiny {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 8px;
}
label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.92rem;
}
input, textarea, select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  margin-bottom: 10px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--color-surface-raised);
}
button {
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: 10px 14px;
  font-size: 1rem;
  color: var(--color-primary-text);
  background: var(--accent);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}
button:hover {
  transform: translateY(-1px);
}
button:focus, input:focus, textarea:focus, select:focus, canvas:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
button:disabled {
  cursor: not-allowed;
  transform: none;
  opacity: 0.8;
}
.button-primary,
.button-secondary,
.button-tertiary,
.button-danger,
.button-ghost {
  min-height: 44px;
  border-width: 1px;
  border-style: solid;
}
.button-primary {
  border-color: var(--accent);
  color: var(--color-primary-text);
  background: var(--accent);
}
.button-secondary {
  border-color: var(--color-secondary);
  color: var(--color-secondary-text);
  background: var(--color-secondary);
}
.button-tertiary,
.button-ghost {
  border-color: var(--border);
  color: var(--text);
  background: var(--color-surface-muted);
}
.button-danger {
  border-color: var(--bad);
  color: var(--color-danger-text);
  background: var(--bad);
}
.button-compact {
  min-height: 36px;
  padding: 6px 10px;
  font-size: .88rem;
}
#joinBtn {
  background: var(--accent);
  color: var(--color-primary-text);
  min-height: 44px;
  width: 100%;
}
.selector-card {
  padding: clamp(12px, 2vw, 18px);
  overflow: hidden;
}
.record-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; }
.record-pagination button { min-height: 44px; padding: 6px 12px; }
.record-pagination span { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  #joinCard { padding: 10px; }
  #joinCard .player-identity { padding: 8px; margin-bottom: 8px; gap: 4px; }
  #joinCard .avatar-picker legend { font-size: .72rem; line-height: 1.2; }
  #joinCard .avatar-picker .tool-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    justify-items: center; gap: 4px; padding: 4px;
  }
  #joinCard .selector-workspace { gap: 8px; }
  #joinCard .selector-action-card { padding: 10px; }
  #joinCard .create-game-panel {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 4px 8px; align-items: end;
  }
  #joinCard #createGameTitle { grid-column: 1; grid-row: 1; margin: 0; }
  #joinCard .create-game-panel > label { grid-column: 2; grid-row: 1; margin: 0; }
  #joinCard #createLobbyInput { grid-column: 1; grid-row: 2; margin: 0; min-width: 0; }
  #joinCard #createGameTypeSelect { grid-column: 2; grid-row: 2; margin: 0; min-width: 0; }
  #joinCard .create-lobby-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; margin-top: 4px; }
  #joinCard .create-lobby-actions button { min-width: 0; min-height: 44px; padding: 6px; font-size: .875rem; line-height: 1.2; white-space: normal; }
}
.player-identity {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 1.4fr);
  align-items: end;
  gap: 8px 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
  box-shadow: inset 4px 0 0 var(--accent);
}
.player-identity label,
.player-identity legend {
  font-weight: 800;
}
.player-identity input,
.player-identity .tool-row,
.player-identity .identity-row,
.player-identity .tiny {
  margin-bottom: 0;
}
.avatar-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.avatar-picker .tool-row {
  gap: 7px;
}
.avatar-picker .swatch {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 7px;
  place-items: center;
  border: 3px solid transparent;
  background: transparent;
}
.avatar-picker .swatch.active {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 2px var(--color-surface-raised), 0 0 0 4px var(--text);
}
.avatar-color-dot,
.avatar-picker .avatar-image-choice img {
  display: block;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
}
.avatar-image-choice {
  overflow: hidden;
}
.avatar-image-choice img {
  object-fit: cover;
}
.identity-row {
  white-space: nowrap;
  justify-self: end;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--color-surface-muted);
}
.google-sign-in-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  align-self: center;
  color: #374151;
  font-size: 0.86rem;
}
.google-sign-in-row .tiny {
  flex: 1 1 12rem;
}
.selector-workspace {
  display: grid;
  grid-template-areas:
    "games"
    "create"
    "join";
  gap: 12px;
  align-items: stretch;
}
.public-lobbies { grid-area: games; }
.create-game-panel { grid-area: create; }
.join-game-panel { grid-area: join; }
.selector-action-card,
.public-lobbies {
  min-width: 0;
  margin: 0;
  padding: 15px;
  border-radius: var(--radius-card);
}
.selector-action-card {
  position: relative;
  border: 1px solid var(--border);
  background: var(--color-surface-raised);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}
.selector-action-card::before {
  position: absolute;
  top: 0;
  right: 14px;
  left: 14px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--accent);
  content: "";
}
.selector-action-card p {
  margin-top: 0;
}
.join-game-panel {
  border: 2px solid var(--accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 16%, transparent);
}
#createModeBtn {
  width: 100%;
  min-height: 44px;
  font-weight: 800;
}
#joinBtn {
  font-weight: 900;
}
.create-game-panel {
  border-color: var(--color-secondary);
}
.create-game-panel::before {
  background: var(--color-secondary);
}
.selector-action-card input {
  margin-bottom: 7px;
}
.selector-action-card .tiny {
  margin: 0 0 10px;
}
.selector-action-card .section-eyebrow {
  min-height: 0;
  margin-bottom: 4px;
}
.selector-card > .error {
  margin: 10px 0 0;
}
.selector-card button:disabled {
  opacity: 0.55;
}
.selector-card .public-lobby-card:disabled {
  opacity: 1;
}
.selector-card .public-lobby-card {
  transform: none;
}
.selector-card .public-lobby-card:hover {
  transform: translateY(-1px);
}
.selector-card .public-lobby-action {
  color: var(--color-primary-text);
}
.public-lobbies {
  border: 1px solid var(--border);
  background: var(--color-surface-muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 20%, transparent);
}
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.section-heading-row h3,
.section-heading-row p {
  margin: 0;
}
.section-eyebrow {
  color: var(--color-warning);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.public-lobby-list {
  display: grid;
  gap: 8px;
  max-height: 278px;
  overflow-y: auto;
  padding: 1px 5px 1px 1px;
}
.public-lobby-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  width: 100%;
  min-height: 54px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  background: var(--color-surface-raised);
  color: var(--text);
  text-align: left;
}
.public-lobby-card span {
  color: var(--muted);
  font-size: 0.82rem;
}
.public-lobby-card > strong,
.public-lobby-card > span:not(.public-lobby-action) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-lobby-card > strong { grid-column: 1; }
.public-lobby-card > span:not(.public-lobby-action) { grid-column: 1; }
.public-lobby-card .public-lobby-action {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  min-width: 7rem;
  margin-top: 2px;
  padding: 5px 9px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--color-primary-text);
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
}
.public-lobby-card .public-lobby-action.unavailable {
  border-color: var(--border);
  background: var(--color-surface-muted);
  color: var(--muted);
}
.public-lobby-card.unavailable {
  background: var(--color-surface-muted);
}
.public-lobby-card.party-lobby-card {
  border-color: var(--color-secondary);
  background: var(--color-surface-raised);
}
.public-lobby-card .public-lobby-action.party {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-secondary-text);
}
.account-lobby-card .account-lobby-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.account-lobby-card .account-lobby-actions .public-lobby-action {
  position: static;
  grid-column: auto;
  grid-row: auto;
  min-width: 0;
  width: auto;
  margin: 0;
  cursor: pointer;
}
.account-lobby-card .account-lobby-actions .public-lobby-action.exit {
  border-color: var(--bad);
  background: transparent;
  color: var(--bad);
}
.create-lobby-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.create-lobby-actions button { flex: 1 1 10rem; }
.party-create-btn { background: var(--color-secondary); color: var(--color-secondary-text); }
.ready-action-panel {
  margin: 14px 0;
  padding: 14px;
  border: 2px solid var(--accent);
  border-radius: 12px;
  background: var(--color-surface-raised);
}
.join-requests-panel {
  margin: 14px 0;
  padding: 14px;
  border: 2px solid #d97706;
  border-radius: 12px;
  background: #fffbeb;
}
.join-requests-panel h3 {
  margin-bottom: 4px;
  color: #92400e;
}
.approve-join-request {
  border-color: var(--good);
  background: var(--good-bg);
  color: var(--good);
  font-weight: 800;
}
.decline-join-request {
  color: var(--bad);
}
.ready-action-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: 8px;
}
.ready-action-panel.in-game-actions .ready-action-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.start-queue-status {
  margin: 0 0 .45rem;
  padding: .45rem .7rem;
  border: 1px solid #f59e0b;
  border-radius: .65rem;
  background: #fffbeb;
  color: #92400e;
  font-weight: 700;
  text-align: center;
}
.ready-primary {
  width: 100%;
  min-height: 54px;
  color: var(--color-primary-text);
  background: var(--accent);
  font-size: 1.12rem;
  font-weight: 900;
}
.ready-primary.is-ready {
  background: var(--good);
}
.ready-exit {
  width: 100%;
  min-height: 54px;
  color: var(--color-danger-text);
  background: var(--bad);
  font-size: 1.12rem;
  font-weight: 900;
}
#leaveGameBtn {
  width: 100%;
  min-height: 54px;
  border-color: var(--border-strong);
  color: var(--color-text);
  background: var(--color-surface-raised);
  font-size: 1rem;
  font-weight: 850;
}
.lobby-secondary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lobby-secondary-actions button {
  min-height: 44px;
}
.host-end-game-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}
.host-end-game-panel label {
  font-size: 0.82rem;
  font-weight: 800;
}
.host-end-game-panel select,
.host-end-game-panel button {
  min-height: 36px;
}
.host-end-game-panel .danger {
  border-color: #b91c1c;
  color: #fff;
  background: #b91c1c;
}
.ready-countdown-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  pointer-events: none;
  background: rgba(17, 24, 39, .36);
  backdrop-filter: blur(2px);
}
.ready-countdown-overlay span {
  grid-row: 1;
  display: grid;
  width: min(46vw, 22rem);
  aspect-ratio: 1;
  place-items: center;
  border: clamp(6px, 1vw, 14px) solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #0f766e);
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .45);
  font-size: clamp(8rem, 30vw, 20rem);
  font-weight: 950;
  line-height: 1;
  animation: ready-countdown-pop 1s ease-in-out infinite;
}
body:has(.ready-countdown-overlay:not(.hidden)) .ready-action-panel {
  position: fixed;
  z-index: 1001;
  left: 50%;
  bottom: max(7vh, calc(env(safe-area-inset-bottom) + 1rem));
  width: min(40rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgba(17, 24, 39, .3);
}
@keyframes ready-countdown-pop { 50% { transform: scale(1.08); } }
body.game-active .ready-action-row { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
body.game-active .ready-action-panel.in-game-actions .ready-action-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.player-menu {
  position: relative;
  min-width: 0;
}
.player-menu-trigger {
  min-width: 0;
  cursor: pointer;
  list-style: none;
  border-radius: 7px;
}
.player-menu-trigger::-webkit-details-marker { display: none; }
.player-menu-trigger:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.player-menu-trigger .name-with-avatar { max-width: 100%; }
.player-menu-trigger .name-with-avatar > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-menu-actions {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  display: grid;
  width: max-content;
  min-width: 10rem;
  max-width: min(19rem, calc(100vw - 3rem));
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--color-surface-raised);
  box-shadow: 0 12px 30px rgba(17, 24, 39, .28);
}
.player-menu-actions button {
  width: 100%;
  min-height: 38px;
  text-align: left;
  white-space: normal;
}
.reconnect-lobby-card {
  border-color: var(--accent);
  background: #f0fdfa;
}
.public-lobby-action.reconnect {
  background: var(--good);
  color: var(--color-success-text);
}
.lobby-summary {
  display: grid;
  grid-template-columns: minmax(11rem, 2fr) auto minmax(8rem, 1fr) auto auto;
  align-items: center;
  gap: 5px 14px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--color-surface-raised);
}
.lobby-summary p {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}
.lobby-summary .lobby-code-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 34px;
}
.lobby-summary p strong,
.lobby-summary p > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-summary-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lobby-summary code {
  min-width: 7.5ch;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--color-surface-muted);
  color: var(--text);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
}
.copy-icon-btn {
  display: inline-grid;
  width: 34px;
  min-height: 34px;
  place-items: center;
  padding: 4px;
  border: 1px solid var(--border);
  background: var(--color-surface-muted);
  color: var(--accent);
  font-size: 1.25rem;
  line-height: 1;
}
.player-roster,
.game-settings {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--color-surface-raised);
}
.player-roster {
  padding: 7px 9px;
}
.compact-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.compact-section-heading h2,
.compact-section-heading .tiny {
  margin: 0;
}
.compact-section-heading h2 {
  font-size: 1.15rem;
}
.player-slot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
}
.player-slot-grid li {
  box-sizing: border-box;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 3px 6px;
}
.player-slot-grid[data-capacity="9"],
.player-slot-grid[data-capacity="10"],
.player-slot-grid[data-capacity="11"],
.player-slot-grid[data-capacity="12"] {
  max-height: 18rem;
  padding-right: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.player-slot-grid.big-game-roster {
  max-height: min(42dvh, 24rem);
  padding-right: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.player-slot-grid .big-game-open-slots {
  position: sticky;
  bottom: 0;
  justify-content: center;
  border-style: dashed;
  background: var(--color-surface-muted);
  font-weight: 800;
}
@media (max-width: 899px) {
  .player-slot-grid[data-capacity="9"],
  .player-slot-grid[data-capacity="10"],
  .player-slot-grid[data-capacity="11"],
  .player-slot-grid[data-capacity="12"] {
    max-height: min(34dvh, 18rem);
  }
}
.party-display-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--color-secondary);
  background: var(--color-surface-muted);
  color: var(--text);
}
.party-display-label { font-weight: 850; }
.party-display-summary,
.party-display-icons { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.party-display-avatar { width: 25px; height: 25px; border: 2px solid #fff; box-shadow: 0 0 0 1px #8b5cf6; }
.party-display-count { border-color: var(--color-secondary); background: var(--color-surface-raised); color: var(--text); white-space: nowrap; }
.party-display-slot.many .party-display-icons { display: none; }
.empty-player-slot {
  border-style: dashed;
  color: var(--muted);
  background: var(--color-surface-muted);
}
.pill.open-slot {
  border-color: var(--border);
  background: var(--color-surface-raised);
  color: var(--muted);
}
.invite-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--color-surface-raised);
  padding: 9px 11px;
}
.invite-label {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-weight: 700;
}
.invite-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.invite-row a {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 750;
  text-decoration-thickness: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#copyInviteBtn {
  min-height: 48px;
  background: var(--accent);
  color: var(--color-primary-text);
  flex: 1 1 0;
}
#inviteStatus {
  margin: 5px 0 0;
}
#submitSentenceBtn, #submitDrawingBtn {
  background: var(--accent);
  color: var(--color-primary-text);
}
#playAgainBtn {
  background: var(--good);
  color: var(--color-success-text);
  margin-bottom: 12px;
}
.game-settings {
  margin: 0;
  padding: 9px 11px;
  border-color: var(--border);
  background: var(--color-surface-raised);
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px 9px;
  margin-bottom: 4px;
}
.settings-grid-subgroup,
.trivia-settings-controls {
  display: contents;
}
.compact-field {
  display: block;
  margin: 2px 0 4px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}
.trivia-card {
  display: grid;
  gap: 14px;
}
.trivia-card.trivia-get-ready .trivia-question { min-height: min(42vh, 24rem); display: grid; place-content: center; text-align: center; }
.trivia-card.trivia-get-ready .trivia-question h2 { font-size: clamp(3rem, 12vw, 8rem); }
.trivia-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.trivia-heading h2,
.trivia-question h2 {
  margin: 0;
}
.trivia-media {
  display: block;
  width: min(100%, 560px);
  max-height: 32vh;
  margin: 12px auto;
  border-radius: var(--radius-control);
  object-fit: contain;
}
.trivia-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.trivia-choice {
  min-height: 54px;
  border: 2px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
  color: var(--text);
  font-weight: 800;
}
.trivia-choice.selected { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.trivia-choice.correct { border-color: var(--good); background: color-mix(in srgb, var(--good) 18%, var(--color-surface-raised)); }
.trivia-choice.incorrect { border-color: var(--danger); }
.trivia-history-choice {
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.trivia-history-choice.correct { border-color: var(--success); }
.trivia-history-choice.selected { box-shadow: inset 4px 0 var(--accent); }
.trivia-standings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 4px; margin: 0; }
.trivia-standings.compact-standings {
  min-width: 0;
  padding: 0;
  list-style: none;
}
.compact-standing-row {
  display: grid !important;
  grid-template-columns: 2.35rem minmax(0, 1fr) minmax(4.75rem, auto) !important;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  min-height: 2rem;
  padding: .3rem .5rem;
  border: 1px solid var(--color-border);
  border-radius: .5rem;
  background: var(--color-surface-raised);
  line-height: 1.1;
  white-space: nowrap;
}
.compact-standing-rank {
  color: var(--color-text-muted);
  font-size: .76rem;
  font-weight: 900;
}
.compact-standing-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-standing-score {
  min-width: 4.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}
.sudoku-standings .compact-standing-row:has(.sudoku-cooldown-timer:not(.hidden)) {
  grid-template-columns: 2.35rem minmax(0, 1fr) minmax(4.75rem, auto) auto !important;
}
.play-surface.is-completed {
  box-sizing: border-box;
  /* Reserve the persistent game-view/audio rail above completed results. */
  height: calc(100vh - 6rem);
  height: calc(100dvh - 6rem);
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  min-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  gap: .65rem;
}
.play-surface.is-completed .trivia-heading {
  margin: 0;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--color-border);
}
.play-surface.is-completed .trivia-heading .turn-timer { display: none; }
.play-surface.is-completed .experience-results {
  display: grid;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}
.play-surface.is-completed .experience-results > h3 { margin: 0 0 .35rem; }
.play-surface.is-completed .experience-results > .compact-standings,
.play-surface.is-completed .snake-side-panel > .trivia-standings {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  grid-template-columns: 1fr;
  align-content: start;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.trivia-card.is-completed:not(.hidden),
.word-search-card.is-completed:not(.hidden) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.trivia-card.is-completed .trivia-question,
.trivia-card.is-completed .round-progress,
.word-search-card.is-completed #wordSearchPhaseText,
.word-search-card.is-completed #wordSearchBoard,
.word-search-card.is-completed #wordSearchClaimStatus,
.word-search-card.is-completed #wordSearchReportMissingBtn,
.word-search-card.is-completed #wordSearchReview { display: none; }
.sudoku-card.is-completed:not(.hidden),
.snake-card.is-completed:not(.hidden) {
  display: flex;
  flex-direction: column;
}
.sudoku-card.is-completed .sudoku-play-layout,
.snake-card.is-completed .snake-play-layout {
  display: block;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 auto;
}
.sudoku-card.is-completed .sudoku-board,
.sudoku-card.is-completed .sudoku-digits,
.snake-card.is-completed .snake-board,
.snake-card.is-completed .snake-controls,
.snake-card.is-completed #snakeStatus { display: none; }
.sudoku-card.is-completed #sudokuStandingsSection,
.snake-card.is-completed .snake-side-panel {
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}
.snake-card.is-completed .snake-side-panel {
  gap: .45rem;
  grid-template-rows: auto minmax(0, 1fr);
}
.experience-completion-actions {
  flex: none;
  min-width: 0;
  margin-top: 0;
}
.play-surface.is-completed:not(.snake-card) > .experience-completion-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}
.play-surface.is-completed:not(.snake-card) > .experience-completion-actions button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .45rem .6rem;
  white-space: nowrap;
}
.word-search-card { max-width: 58rem; margin-inline: auto; overflow: hidden; }
.word-search-phase { min-height: 1.5em; margin: .35rem 0; text-align: center; font-size: clamp(1rem, 2.2vw, 1.35rem); font-weight: 800; }
.word-search-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: min(72vh, 100%, 42rem);
  aspect-ratio: 1;
  margin: .4rem auto;
  padding: clamp(.25rem, 1vw, .65rem);
  gap: clamp(2px, .45vw, 6px);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  touch-action: none;
  user-select: none;
}
.word-search-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: clamp(.25rem, .8vw, .65rem);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: clamp(1rem, 4.1vmin, 2.15rem);
  font-weight: 900;
  line-height: 1;
}
.word-search-letter { position: relative; z-index: 2; pointer-events: none; }
.word-search-cell.claimed { background: color-mix(in srgb, var(--accent) 16%, var(--color-surface)); }
.word-search-cell.selection-start { box-shadow: inset 0 0 0 3px var(--accent); }
.word-search-cell.selection-preview { background: color-mix(in srgb, var(--accent) 28%, var(--color-surface)); }
.word-search-path-overlay { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.word-search-path-line, .word-search-path-start, .word-search-path-arrow { opacity: var(--word-search-line-opacity, .25); }
.word-search-lane { display: block; width: 100%; min-width: 1.25rem; height: clamp(2px, .4vw, 5px); border-radius: 999px; background: var(--word-search-lane-color, #22d3ee); }
.word-search-lane.lane-0 { --word-search-lane-color: #22d3ee; }
.word-search-lane.lane-1 { --word-search-lane-color: #fb7185; background-image: repeating-linear-gradient(90deg, transparent 0 4px, #111827 4px 6px); }
.word-search-lane.lane-2 { --word-search-lane-color: #a3e635; }
.word-search-lane.lane-3 { --word-search-lane-color: #fbbf24; background-image: repeating-linear-gradient(90deg, transparent 0 2px, #111827 2px 3px); }
.word-search-lane.lane-4 { --word-search-lane-color: #c084fc; }
.word-search-lane.lane-5 { --word-search-lane-color: #fb923c; background-image: repeating-linear-gradient(90deg, transparent 0 5px, #111827 5px 7px); }
.word-search-lane.lane-6 { --word-search-lane-color: #2dd4bf; }
.word-search-lane.lane-7 { --word-search-lane-color: #f472b6; background-image: repeating-linear-gradient(90deg, transparent 0 3px, #111827 3px 5px); }
.word-search-lane.lane-8 { --word-search-lane-color: #60a5fa; }
.word-search-lane.lane-9 { --word-search-lane-color: #e879f9; background-image: repeating-linear-gradient(90deg, transparent 0 1px, #111827 1px 3px); }
.word-search-lane.lane-10 { --word-search-lane-color: #ef4444; background-image: repeating-linear-gradient(90deg, transparent 0 7px, #111827 7px 9px, transparent 9px 11px, #111827 11px 13px); }
.word-search-lane.lane-11 { --word-search-lane-color: #f8fafc; background-image: repeating-linear-gradient(90deg, transparent 0 2px, #111827 2px 4px); }
.word-search-review { margin: .45rem 0; padding: .55rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.word-search-review p { margin: .2rem 0; }
.word-search-legend { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.word-search-legend li { display: inline-flex; align-items: center; gap: .3rem; }
.word-search-history-board { width: min(100%, 28rem); }
.word-search-history-words { overflow-wrap: anywhere; }
.word-search-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.sudoku-card { max-width: 62rem; margin-inline: auto; overflow: hidden; }
.sudoku-card .trivia-heading { margin-bottom: .45rem; }
.sudoku-play-layout { display: grid; grid-template-columns: minmax(0, 36rem) minmax(14rem, 18rem); grid-template-areas: "board scores" "digits scores"; gap: .65rem .8rem; align-items: start; }
.sudoku-board { box-sizing: border-box; display: grid; grid-template: repeat(9, minmax(0, 1fr)) / repeat(9, minmax(0, 1fr)); width: min(100%, 36rem); aspect-ratio: 1; border: 3px solid var(--color-text); border-radius: .45rem; overflow: hidden; background: var(--color-surface); }
.sudoku-board { grid-area: board; }
.sudoku-cell { box-sizing: border-box; display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border: 0; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); border-radius: 0; background: var(--color-surface); color: var(--color-text); font: 800 clamp(.9rem, 4vw, 2rem)/1 system-ui, sans-serif; }
.sudoku-cell:nth-child(9n + 3), .sudoku-cell:nth-child(9n + 6) { border-right: 3px solid var(--color-text); }
.sudoku-cell:nth-child(n + 19):nth-child(-n + 27), .sudoku-cell:nth-child(n + 46):nth-child(-n + 54) { border-bottom: 3px solid var(--color-text); }
.sudoku-cell.given { background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface)); }
.sudoku-cell[aria-disabled="true"] { cursor: default; }
.sudoku-cell[aria-disabled="true"]:hover { transform: none; }
.sudoku-cell.selected { box-shadow: inset 0 0 0 3px var(--accent); }
.sudoku-cell.owner-0 { background: color-mix(in srgb, #22d3ee 25%, var(--color-surface)); }
.sudoku-cell.owner-1 { background: repeating-linear-gradient(135deg, color-mix(in srgb, #fb7185 25%, var(--color-surface)) 0 7px, var(--color-surface) 7px 10px); }
.sudoku-cell.owner-2 { background: color-mix(in srgb, #a3e635 25%, var(--color-surface)); }
.sudoku-cell.owner-3 { background: repeating-linear-gradient(45deg, color-mix(in srgb, #fbbf24 25%, var(--color-surface)) 0 6px, var(--color-surface) 6px 9px); }
.sudoku-cell.owner-4 { background: color-mix(in srgb, #c084fc 25%, var(--color-surface)); }
.sudoku-cell.owner-5 { background: repeating-linear-gradient(90deg, color-mix(in srgb, #fb923c 25%, var(--color-surface)) 0 5px, var(--color-surface) 5px 8px); }
.sudoku-cell.owner-6 { background: color-mix(in srgb, #2dd4bf 25%, var(--color-surface)); }
.sudoku-cell.owner-7 { background: repeating-linear-gradient(135deg, color-mix(in srgb, #f472b6 25%, var(--color-surface)) 0 4px, var(--color-surface) 4px 7px); }
.sudoku-cell.owner-8 { background: color-mix(in srgb, #60a5fa 25%, var(--color-surface)); }
.sudoku-cell.owner-9 { background: repeating-linear-gradient(45deg, color-mix(in srgb, #e879f9 25%, var(--color-surface)) 0 3px, var(--color-surface) 3px 6px); }
.sudoku-cell.owner-10 { background: repeating-linear-gradient(90deg, color-mix(in srgb, #ef4444 25%, var(--color-surface)) 0 8px, var(--color-surface) 8px 11px); }
.sudoku-cell.owner-11 { background: repeating-linear-gradient(0deg, color-mix(in srgb, #f8fafc 25%, var(--color-surface)) 0 3px, var(--color-surface) 3px 6px); }
.sudoku-cell:focus-visible { position: relative; z-index: 2; outline: 3px solid var(--accent); outline-offset: -3px; }
.sudoku-side-panel { display: contents; }
.sudoku-digits { grid-area: digits; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); width: min(100%, 36rem); gap: .3rem; }
.sudoku-digit { min-width: 0; min-height: 3.5rem; padding: .55rem; font-size: 1.5rem; }
#sudokuStandingsSection { grid-area: scores; }
.sudoku-score-heading { display: flex; align-items: baseline; gap: .65rem; min-width: 0; margin-bottom: .35rem; }
.sudoku-score-heading h3 { flex: none; margin: 0; }
#sudokuStatus { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--color-text-muted); font-size: clamp(.62rem, .8vw, .75rem); line-height: 1.2; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sudoku-standings li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sudoku-cooldown-timer { flex: none; min-width: 2.5rem; padding: .15rem .4rem; border-radius: 999px; background: var(--color-danger); color: #fff; font-variant-numeric: tabular-nums; font-weight: 850; text-align: center; }
.sudoku-side-panel h3 { margin-bottom: .35rem; }
@media (max-width: 600px) {
  .word-search-card { padding: .55rem; }
  .word-search-board { width: 100%; }
  .sudoku-card { padding: .55rem; }
  .sudoku-play-layout { grid-template-columns: 1fr; grid-template-areas: "board" "digits" "scores"; gap: .45rem; }
  .sudoku-board { width: 100%; }
  .sudoku-digits { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
  .sudoku-digit { min-height: 3.25rem; padding-inline: 0; font-size: 1.4rem; }
}
@media (max-width: 560px) {
  .trivia-choices { grid-template-columns: 1fr; }
  .trivia-heading { align-items: flex-start; }
}
.setting-row {
  display: grid;
  grid-template-columns: auto minmax(5.5rem, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 30px;
}
.setting-row > label,
.setting-row > span {
  margin: 0;
  font-weight: 700;
}
.setting-row input[type="number"],
.setting-row select {
  margin: 0;
  min-height: 30px;
  padding: 4px 7px;
}
.setting-control {
  display: grid;
  grid-template-columns: minmax(5rem, 0.7fr) auto;
  align-items: center;
  gap: 7px;
}
.settings-read-only {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 7px;
}
.settings-read-only div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--color-surface-muted);
}
.settings-read-only dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.settings-read-only dd {
  margin: 0;
  color: var(--text);
  font-weight: 900;
  text-align: right;
}
.settings-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.settings-save-row .tiny {
  margin: 0;
}
.setting-explanation {
  margin: 4px 0 7px;
  padding: 6px 9px;
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  color: #78350f;
  font-size: 0.9rem;
}
.check-label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.check-label input {
  width: auto;
  margin: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  gap: 8px;
}
.pill {
  font-size: 0.82rem;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill.ready {
  background: var(--good-bg);
  color: var(--good);
  border-color: #b8e9ca;
}
.pill.not-ready {
  background: var(--bad-bg);
  color: var(--bad);
  border-color: #d1d5db;
}
.pill.clickable {
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.ready-toggle {
  box-sizing: border-box;
  min-width: 5.25rem;
  min-height: 2rem;
  padding: 0.25rem 0.6rem;
  border-width: 1px;
  border-radius: 999px;
  box-shadow: none;
  font-size: 0.8rem;
}
.ready-toggle.not-ready {
  background: var(--bad-bg);
  border-color: var(--bad);
}
.ready-toggle.ready {
  background: var(--good-bg);
  border-color: var(--good);
}
.pill.clickable:hover, .pill.clickable:focus {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(17, 24, 39, 0.18);
}
.current-player {
  border-color: var(--accent);
  background: var(--color-surface-muted);
  box-shadow: inset 4px 0 0 var(--accent);
}
.ready-control-group {
  display: inline-flex;
  align-items: flex-end;
}
.player-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}
.player-slot-grid > li:not(.party-display-slot) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.player-slot-grid .name-with-avatar { min-width: 0; }
.player-slot-grid .name-with-avatar > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.declare-abandoned {
  color: var(--bad);
  border-color: #fecaca;
}
.error {
  color: #991b1b;
  font-weight: 600;
  min-height: 1.2em;
}
#errorText {
  color: var(--bad);
  margin: .35rem 0 0;
  overflow-wrap: anywhere;
}
#errorText:empty {
  display: none;
}
.hidden {
  display: none;
}
.sr-only,
.clipboard-fallback {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.countdown {
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.15rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.turn-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
#gameCard {
  position: relative;
  overflow: hidden;
}
#revealCard {
  position: relative;
}
#gameCard::before,
#revealCard::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--color-secondary));
  content: "";
}
.turn-heading h2,
.turn-heading .section-eyebrow {
  margin-bottom: 4px;
}
.turn-meta {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}
.turn-timer {
  display: grid;
  min-width: 8.5rem;
  padding: 9px 11px;
  border: 2px solid #99d5cb;
  border-radius: 12px;
  background: #ecfdf5;
  color: #115e59;
  text-align: center;
}
.timer-label {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.timer-urgency {
  min-height: 1.1em;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}
.turn-timer.warning {
  border-color: #d97706;
  background: #fffbeb;
  color: #92400e;
}
.turn-timer.critical {
  border-color: var(--bad);
  background: #fef2f2;
  color: #991b1b;
  animation: timer-pulse 650ms ease-in-out infinite alternate;
}
@keyframes timer-pulse {
  from { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.05); }
  to { box-shadow: 0 0 0 7px rgba(185, 28, 28, 0.22); }
}
.lobby-cast-launcher {
  width: 100%;
  height: auto;
  min-height: 48px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
}
.cast-launcher-icon { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.cast-launcher-initializing {
  visibility: hidden;
  pointer-events: none;
}
#partyDisplayStatus[data-kind="success"] { color: var(--good); font-weight: 800; }
#partyDisplayStatus[data-kind="error"] { color: var(--bad); font-weight: 800; }
.prompt-box {
  position: relative;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--color-surface-raised);
  color: var(--text);
  padding: 12px;
  margin-bottom: 12px;
}
.prompt-box.has-prompt-reaction {
  padding-bottom: 8px;
}
.prompt-box > .section-eyebrow {
  display: none;
}
.round-progress {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px;
  margin-bottom: 12px;
  background: var(--color-surface-muted);
  color: var(--text);
}
.round-progress-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
}
.round-progress li {
  background: var(--color-surface-raised);
  color: var(--text);
  min-height: 30px;
  margin: 0;
  padding: 4px 6px;
}
.round-progress ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 4px;
  margin-top: 6px;
}
.round-progress ul.big-game-progress {
  max-height: min(30dvh, 15rem);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.round-progress ul.big-game-progress li {
  min-height: 26px;
  padding: 2px 4px;
  font-size: .78rem;
}
.round-progress ul.big-game-progress .avatar-icon { width: 1.25rem; height: 1.25rem; }
#submittedNotice {
  margin-bottom: 12px;
  padding: 16px;
  border: 2px solid #99d5cb;
  border-radius: 10px;
  background: #f0fdfa;
  color: #115e59;
  text-align: center;
}
#submittedNotice p {
  margin: 0;
}
.prompt-image {
  max-width: 100%;
  border: 1px solid #c9d1d9;
  border-radius: 8px;
  background: #fff;
}
.tool-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
fieldset.tool-group {
  border: 0;
  padding: 0;
  margin: 0 0 10px;
}
fieldset.tool-group legend {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.tool-btn {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #111827;
  font-size: 0.9rem;
  padding: 8px 10px;
}
.tool-btn.active {
  border-color: var(--accent);
  background: #ecfdf5;
  color: #065f46;
}
.swatch {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid transparent;
  padding: 0;
}
.swatch.active {
  border-color: #111827;
}
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #d1d5db;
  background: #ffffff;
  object-fit: cover;
}
.avatar.large {
  width: 36px;
  height: 36px;
}
.identity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.inline-btn {
  background: var(--color-surface-muted);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  padding: 6px 10px;
}
.inline-btn.danger {
  border-color: var(--bad);
  color: var(--bad);
  background: var(--bad-bg);
}
.name-with-avatar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#drawCanvas {
  width: 100%;
  max-width: 700px;
  border: 1px solid #c7cdd4;
  border-radius: 8px;
  background: #fff;
  touch-action: none;
  display: block;
  margin-bottom: 10px;
}
.turn-actions {
  display: flex;
  align-items: stretch;
  gap: 9px;
  flex-wrap: wrap;
}
.turn-actions button {
  min-height: 48px;
}
.help-me-btn {
  border: 2px solid var(--color-warning);
  background: var(--color-surface-muted);
  color: var(--text);
  font-weight: 800;
}
.help-status {
  min-height: 1.2em;
  margin-top: 10px;
  color: var(--color-text-muted);
  font-weight: 700;
}
.reveal-chain {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(12px, 3vw, 24px);
  margin-bottom: 14px;
  background: linear-gradient(145deg, #fffdf7, #f4fbf9);
  color: var(--color-content-ink);
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.07);
}
.reveal-chain > .name-with-avatar {
  margin-bottom: 18px;
}
.end-slideshow {
  display: grid;
  gap: 10px;
}
.end-slideshow .reveal-navigation {
  grid-template-columns: auto auto minmax(10rem, 1fr) auto;
  margin-top: 0;
}
.end-slideshow #previousChainBtn { grid-column: 1; }
.end-slideshow #revealPauseBtn { grid-column: 2; }
.end-slideshow #revealProgress { grid-column: 3; }
.end-slideshow #nextChainBtn { grid-column: 4; }
.end-slide-countdown {
  display: grid;
  grid-template-columns: auto minmax(5rem, 12rem);
  align-items: center;
  justify-content: end;
  gap: 8px;
  min-height: 18px;
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 750;
}
.end-slide-countdown.hidden {
  display: none;
}
.end-slide-countdown-track {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-surface-muted);
}
#endSlideCountdownFill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .1s linear;
}
.end-story-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  min-height: min(58vh, 620px);
}
.end-story-pair.opening-story {
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
  margin-inline: auto;
}
.end-story-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-items: center;
  min-width: 0;
  padding: clamp(14px, 2.5vw, 26px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--color-content-paper);
  color: var(--color-content-ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.end-story-panel.sentence-story-panel {
  grid-template-rows: repeat(4, auto);
  align-self: center;
}
.end-story-label {
  justify-self: start;
  color: var(--color-content-label);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.end-story-panel .reveal-sentence {
  align-self: center;
  margin: 0;
  color: var(--color-content-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3vw, 2.5rem);
  line-height: 1.18;
  text-align: center;
}
.end-story-panel .reveal-drawing-button,
.end-story-panel .reveal-drawing-button img {
  width: 100%;
  max-height: min(48vh, 500px);
  object-fit: contain;
}
.end-story-panel .reveal-drawing-button {
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-drawing-paper);
}
.end-story-panel .reveal-drawing-button img {
  display: block;
  background: var(--color-drawing-paper);
}
.end-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 15rem));
  align-items: end;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 18px);
  min-height: 0;
  padding: clamp(8px, 1.5vw, 16px);
  border-radius: 18px;
  background: linear-gradient(135deg, #12383c, #29184c);
}
.end-podium-player {
  display: grid;
  place-items: center;
  gap: 7px;
  min-width: 0;
  min-height: clamp(9.5rem, 28vh, 13rem);
  padding: clamp(8px, 1.5vw, 16px);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 18px;
  background: rgba(255,255,255,.13);
  color: #fff;
  text-align: center;
}
.end-podium-player.rank-1 { min-height: clamp(10.5rem, 32vh, 15rem); border-color: #fbbf24; }
.end-podium-medal { font-size: 2.25rem; }
.end-podium-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.end-podium-remaining {
  display: grid;
  min-height: 0;
  overflow: hidden;
  grid-column: 1 / -1;
  grid-template-rows: auto minmax(0, 1fr);
}
.end-podium-remaining h3 {
  margin: .4rem 0 .25rem;
  color: #fff;
  font-size: .82rem;
}
.end-podium-remaining .compact-standings {
  max-height: min(7.5rem, 19vh);
  overflow-y: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  scrollbar-gutter: stable;
}
#revealCard.completed-results-surface:not(.hidden) {
  box-sizing: border-box;
  display: grid;
  height: calc(100vh - 8rem);
  height: calc(100dvh - 8rem);
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  min-height: 0;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
}
#revealCard .end-slideshow {
  display: grid;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}
#revealCard #revealList {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#revealCard > .experience-completion-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}
#revealCard > .experience-completion-actions button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: .4rem .55rem;
}
.play-again-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 11px;
  border: 1px solid var(--color-secondary);
  border-radius: 12px;
  background: var(--color-surface-raised);
  color: var(--text);
}
.play-again-panel.hidden {
  display: none;
}
.play-again-panel #playAgainBtn { flex: 0 0 auto; min-height: 44px; margin: 0; }
.play-again-players {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
}
.play-again-players .avatar { width: 34px; height: 34px; }
.rematch-countdown { margin-left: auto; font-weight: 800; }
.reveal-summary {
  position: relative;
  overflow: hidden;
  border: 1px solid #f1d59a;
  border-radius: 18px;
  padding: clamp(20px, 5vw, 38px);
  margin: 18px 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(245, 158, 11, 0.22), transparent 34%),
    linear-gradient(145deg, #fff8e8, #eefaf7 72%);
  color: var(--color-content-ink);
}
.completion-celebration {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.completion-celebration span {
  position: absolute;
  top: -16px;
  left: var(--celebration-x);
  width: 8px;
  height: 15px;
  border-radius: 2px;
  background: var(--celebration-color);
  opacity: 0;
  animation: celebration-fall 900ms cubic-bezier(0.2, 0.8, 0.4, 1) var(--celebration-delay) 1 both;
}
@keyframes celebration-fall {
  0% {
    transform: translate3d(0, -8px, 0) rotate(0deg);
    opacity: 0;
  }
  18% {
    opacity: 0.82;
  }
  100% {
    transform: translate3d(14px, 190px, 0) rotate(210deg);
    opacity: 0;
  }
}
.summary-eyebrow {
  margin: 0 0 8px;
  color: #9a3412;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.reveal-summary h3 {
  max-width: 650px;
  margin-bottom: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 5vw, 3rem);
  line-height: 1.05;
}
.reveal-summary > p:not(.summary-eyebrow) {
  max-width: 620px;
  color: #4b5563;
  font-size: 1.05rem;
  line-height: 1.55;
}
.summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 10px;
  max-width: 660px;
  margin: 22px 0;
}
.summary-stats div {
  padding: 13px 10px;
  border: 1px solid rgba(154, 52, 18, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
}
.summary-stats dt {
  color: #6b4f3b;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.summary-stats dd {
  margin: 0 0 2px;
  color: #7c2d12;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  font-weight: 800;
}
.player-summary {
  max-width: 660px;
  margin-bottom: 18px;
}
.player-summary h4 {
  margin: 0 0 9px;
  color: #374151;
}
.player-summary ul {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.player-summary li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: 0.88rem;
  font-weight: 700;
}
.player-reaction-totals {
  padding-left: 6px;
  color: #6b4f3b;
  font-size: 0.78rem;
  font-weight: 600;
  word-spacing: 3px;
}
.summary-highlight {
  max-width: 660px;
  margin: 20px 0;
  padding: 18px;
  border-left: 5px solid #0f766e;
  border-radius: 4px 14px 14px 4px;
  background: rgba(236, 253, 245, 0.86);
}
.summary-highlight h4 {
  margin: 2px 0 6px;
  color: #134e4a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}
.summary-highlight p:not(.summary-eyebrow) {
  margin: 0 0 12px;
  color: #3f5f5b;
}
.summary-highlight button {
  min-height: 44px;
  color: #fff;
  background: #0f766e;
}
#viewChainsBtn {
  min-height: 48px;
  margin-top: 8px;
  color: #fff;
  background: #9a3412;
  font-weight: 800;
}
.completion-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.completion-actions.hidden {
  display: none;
}
.completion-actions button {
  min-height: 48px;
}
.completion-actions #playAgainBtn { margin-bottom: 0; }
#downloadGameExportBtn {
  border-color: var(--color-secondary);
  color: var(--color-secondary-text);
  background: var(--color-secondary);
  font-weight: 800;
}
#gameExportStatus {
  min-height: 1.2em;
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-weight: 700;
}
.back-to-summary {
  min-height: 44px;
  margin-top: 14px;
  color: #115e59;
  border: 1px solid #99d5cb;
  background: #ecfdf5;
  font-weight: 800;
}
.reveal-navigation {
  display: grid;
  grid-template-columns: minmax(88px, auto) 1fr minmax(88px, auto);
  align-items: center;
  gap: 10px;
  margin: 16px 0 10px;
}
.reveal-navigation button {
  min-height: 44px;
  color: var(--color-primary-text);
  background: var(--accent);
}
.reveal-navigation button:disabled {
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
}
#revealProgress {
  margin: 0;
  text-align: center;
  font-weight: 800;
  color: var(--text);
}
.reveal-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.reveal-page {
  width: 44px;
  height: 44px;
  padding: 0;
  color: #374151;
  background: #e5e7eb;
  font-weight: 700;
}
.reveal-page.active {
  color: #fff;
  background: var(--accent);
}
.reveal-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 22px;
}
.reveal-step:not(:last-child)::before {
  position: absolute;
  top: 38px;
  bottom: 0;
  left: 19px;
  width: 2px;
  background: linear-gradient(#86c8bd, #e6c789);
  content: "";
}
.reveal-step-number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #0f766e;
  box-shadow: 0 0 0 2px #99d5cb;
  font-weight: 900;
}
.reveal-step[data-step-type="drawing"] .reveal-step-number {
  background: #b45309;
  box-shadow: 0 0 0 2px #f1d59a;
}
.reveal-step-body {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e1e4df;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}
.reveal-step-body > .name-with-avatar {
  display: flex;
  margin: 0 0 10px;
  font-weight: 800;
}
.reveal-type {
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.reveal-type-sentence {
  color: #115e59;
  background: #ccfbf1;
}
.reveal-type-drawing {
  color: #92400e;
  background: #fef3c7;
}
.reveal-sentence {
  margin: 8px 0 4px;
  color: #25312f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  line-height: 1.45;
}
.reaction-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}
.reaction-button {
  display: inline-flex;
  min-width: 48px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: 1.05rem;
}
.reaction-button[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-success-surface);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.reaction-button.reaction-vote-pulse {
  animation: reaction-vote-pulse 500ms ease-out;
}
@keyframes reaction-vote-pulse {
  45% { transform: scale(1.12); box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-danger) 25%, transparent); }
}
.reaction-button:disabled {
  opacity: 0.48;
}
.reaction-count {
  min-width: 1ch;
  font-size: 0.78rem;
  font-weight: 800;
}
.reveal-step img {
  max-width: 100%;
  border: 1px solid #c7cdd4;
  border-radius: 8px;
  background: #fff;
  margin-top: 6px;
}
.reveal-drawing-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.reveal-drawing-button:focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 4px;
}
.drawing-dialog {
  width: min(94vw, 1100px);
  max-height: 94vh;
  padding: 14px;
  border: 0;
  border-radius: 16px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--color-surface);
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.38);
}
.drawing-dialog::backdrop {
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(3px);
}
.drawing-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.drawing-dialog-header h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 3vw, 1.55rem);
}
.drawing-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.drawing-dialog-actions button {
  min-width: 76px;
  min-height: 48px;
}
#downloadDrawingBtn {
  color: var(--color-primary-text);
  background: var(--accent);
}
#closeDrawingDialogBtn {
  color: var(--text);
  background: var(--color-surface-muted);
}
.drawing-dialog > img {
  display: block;
  width: 100%;
  max-height: calc(94vh - 86px);
  object-fit: contain;
  border: 1px solid #d6d6d0;
  border-radius: 10px;
  background: #fff;
}

.feedback-dialog {
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 1rem;
  color: var(--text);
  background: var(--color-surface);
  box-shadow: 0 1.25rem 4rem rgb(15 23 42 / 30%);
}
.invite-join-dialog {
  width: min(92vw, 30rem);
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .35);
}
.invite-join-dialog::backdrop { background: rgba(15, 23, 42, .38); backdrop-filter: blur(1px); }
.invite-join-dialog form {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 20px;
  color: var(--text);
  background: var(--color-surface);
}
.invite-join-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.invite-join-dialog-header h2,
.invite-join-dialog-header p,
.invite-join-lobby-name { margin: 0; }
.invite-join-lobby-name { color: var(--accent); font-size: 1.1rem; font-weight: 900; }
.invite-join-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.invite-join-divider::before,
.invite-join-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.invite-google-button { min-height: 40px; display: grid; place-items: center; }
.joining-player-slot { border: 1px dashed #7c3aed; background: #f5f3ff; color: #4c1d95; }
.joining-player-identity { display: inline-flex; align-items: center; gap: 9px; font-weight: 850; }
.joining-player-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ede9fe;
  font-size: 1rem;
  animation: joining-player-pulse 1.2s ease-in-out infinite;
}
@keyframes joining-player-pulse { 50% { transform: scale(1.12); background: #ddd6fe; } }
body.invite-preview-active #readyActionPanel,
body.invite-preview-active #partyModePanel,
body.invite-preview-active .invite-panel,
body.invite-preview-active #gameSettings,
body.invite-preview-active #hostEndGamePanel { display: none; }

.feedback-dialog::backdrop {
  background: rgb(15 23 42 / 55%);
}

.feedback-dialog form {
  display: grid;
  gap: 0.75rem;
  max-height: calc(100vh - 2rem);
  padding: 1.25rem;
  overflow-y: auto;
  box-sizing: border-box;
}

.feedback-dialog-header,
.feedback-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.feedback-dialog-header h2,
.feedback-dialog-header p {
  margin: 0;
}

.feedback-dialog textarea {
  width: 100%;
  resize: vertical;
}

.feedback-dialog-actions {
  position: sticky;
  z-index: 1;
  bottom: 0;
  justify-content: flex-end;
  margin: 0 -1.25rem;
  padding: .75rem 1.25rem max(.75rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--color-surface);
}

@media (max-height: 520px) {
  .feedback-dialog {
    height: calc(100dvh - .75rem);
    max-height: calc(100vh - .75rem);
  }
  .feedback-dialog form {
    height: 100%;
    max-height: calc(100vh - .75rem);
    gap: .45rem;
    padding: .75rem 1rem;
  }
  .feedback-dialog textarea {
    min-height: 3.25rem;
    max-height: 18vh;
  }
  .feedback-dialog-actions {
    bottom: 0;
    margin: 0 -1rem;
    padding: .5rem 1rem max(.5rem, env(safe-area-inset-bottom));
  }
}

.management-feedback-list {
  display: grid;
  gap: 0.75rem;
}

.management-feedback-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
}

.management-feedback-card p {
  margin: 0;
}

.management-feedback-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.management-feedback-attachment {
  justify-self: start;
}
.instructions-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.instructions-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 14px 0;
}
.instructions-tab {
  min-width: 0;
  padding: 9px 6px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--color-surface-raised);
  font-size: .88rem;
}
.instructions-tab.active {
  color: var(--color-primary-text);
  background: var(--accent);
}
.instructions-game .instruction-steps.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#supportCard {
  position: relative;
  overflow: hidden;
}
#supportCard::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--color-secondary));
  content: "";
}
.support-heading,
.support-status-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.support-heading h2,
.support-heading p,
.support-status-panel h3,
.support-status-panel p {
  margin: 0;
}
.support-status-panel {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
}
.support-status {
  flex: 0 0 auto;
  min-width: 7rem;
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-align: center;
  font-weight: 900;
}
.support-status.checking { color: var(--muted); }
.support-status.online { color: var(--good); }
.support-status.unavailable { color: var(--bad); }
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.support-grid > section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
}
.support-grid h3 { margin-top: 0; }
.support-steps { padding-left: 1.25rem; }
.support-steps li { margin-bottom: 8px; }
.support-boundary {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
@media (max-width: 760px) {
  .support-grid { grid-template-columns: 1fr; }
  .support-heading { align-items: stretch; flex-direction: column; }
  .support-status-panel { align-items: flex-start; }
}
#instructionsCard,
#profileCard {
  position: relative;
  overflow: hidden;
}
#instructionsCard::before,
#profileCard::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--color-secondary));
  content: "";
}
.profile-heading,
.profile-editor-heading,
.profile-account-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.profile-heading h2,
.profile-heading p,
.profile-editor-heading h4,
.profile-account-summary p {
  margin: 0;
}
.profile-account-summary {
  justify-content: flex-start;
  margin: 12px 0 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
}
.profile-active-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background-color: var(--color-surface-muted);
  background-position: center;
  background-size: cover;
}
.profile-active-icon-empty::after {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--muted);
  content: "?";
  font-size: 1.5rem;
  font-weight: 900;
}
.profile-signed-out {
  max-width: 36rem;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--color-surface-raised);
}
.profile-icons h3,
.profile-icons p {
  margin: 0 0 6px;
}
.profile-avatar-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.profile-avatar-slot {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--color-surface-raised);
}
.profile-avatar-slot.selected {
  border-color: var(--accent);
  background: var(--color-surface-muted);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.profile-avatar-edit {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 5px;
  border: 0;
  color: var(--text);
  background: transparent;
  font-size: .8rem;
}
.profile-avatar-edit img,
.profile-avatar-empty {
  width: min(100%, 104px);
  aspect-ratio: 1;
  justify-self: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-muted);
}
.profile-avatar-empty {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 2.4rem;
}
.profile-avatar-use {
  min-height: 34px;
  padding: 4px 7px;
  font-size: .76rem;
}
.profile-avatar-download {
  min-height: 30px;
  padding: 3px 6px;
  font-size: .72rem;
  text-align: center;
}
.profile-avatar-editor {
  max-width: 700px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--color-surface-raised);
}
#profileDrawCanvas {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 10px auto;
  border: 1px solid #9ca3af;
  border-radius: 12px;
  background: #fff;
  touch-action: none;
}
.profile-editor-actions {
  display: flex;
  justify-content: flex-end;
}
.profile-divider {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.instructions-heading h2,
.instructions-heading p {
  margin-bottom: 4px;
}
.instructions-lead {
  max-width: 34rem;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
}
.instruction-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.instruction-steps li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: start;
  gap: 9px;
  margin: 0;
  padding: 12px;
  border-color: var(--border);
  background: var(--color-surface-raised);
  box-shadow: inset 3px 0 0 var(--accent);
}
.instruction-steps li > span {
  font-size: 1.75rem;
  line-height: 1;
}
.instruction-steps strong {
  color: var(--text);
  font-size: 1.02rem;
}
.instruction-steps p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}
.history-heading,
.history-game-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.history-heading h2,
.history-heading h3,
.history-heading p,
.history-game-card h3,
.history-game-card p {
  margin: 0;
}
.history-list,
.history-detail,
#historyDetailBody {
  display: grid;
  gap: 12px;
}
.history-current {
  display: grid;
  gap: 6px;
  margin: 14px 0 18px;
}
.history-current.hidden {
  display: none;
}
.history-current > p,
.history-section-title {
  margin: 0;
}
.history-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.history-stats.hidden,
.history-player-names.hidden {
  display: none;
}
.history-stats > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--color-surface-raised);
  text-align: center;
}
.history-stats strong {
  color: var(--accent);
  font-size: 1.2rem;
}
.history-stats span,
.history-player-names {
  color: var(--muted);
  font-size: 0.78rem;
}
.history-player-names {
  margin: 0 0 12px;
}
.history-game-card .history-accomplishments {
  color: var(--accent);
  font-weight: 700;
}
.history-current-card {
  border-color: var(--accent);
  background: var(--color-surface-raised);
}
.history-current-card .inline-btn {
  color: var(--color-primary-text);
  background: var(--accent);
  font-weight: 800;
}
.history-section-title {
  margin-bottom: 10px;
  color: var(--text);
  font-size: 1rem;
}
.history-list.hidden,
.history-detail.hidden {
  display: none;
}
.history-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f59e0b;
  border-radius: 12px;
  background: #fffbeb;
  color: #78350f;
}
.history-error.hidden {
  display: none;
}
.history-error p {
  margin: 0;
}
.history-game-card,
.history-chain-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--color-surface-raised);
}
.history-game-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.88rem;
}
.history-detail {
  margin-top: 12px;
}
.history-detail-actions,
.history-sequence-navigation,
.history-chain-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.history-sequence-navigation {
  display: grid;
  grid-template-columns: minmax(88px, auto) 1fr minmax(88px, auto);
  align-items: center;
}
.history-sequence-navigation p {
  margin: 0;
  text-align: center;
  color: var(--text);
  font-weight: 800;
}
.history-chain-navigation {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--color-surface-muted);
}
.history-chain-navigation button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--color-primary-text);
}
.history-contribution {
  margin-top: 10px;
  padding: 10px;
  border-left: 4px solid var(--accent);
  background: var(--color-surface-muted);
}
.history-contribution p {
  margin: 6px 0 0;
  white-space: pre-wrap;
}
.history-contribution img {
  display: block;
  width: min(100%, 520px);
  max-height: 420px;
  margin-top: 8px;
  object-fit: contain;
  border: 1px solid var(--border);
  background: #fff;
}
@media (min-width: 900px) {
  .selector-workspace {
    grid-template-columns: minmax(24rem, 1.35fr) minmax(17rem, 0.85fr);
    grid-template-areas:
      "games create"
      "games join";
  }
  body.game-active .wrap {
    max-width: 1280px;
    padding: 8px 16px 10px;
  }
  body.game-active .game-view-nav:not(.hidden) {
    top: 6px;
    margin-bottom: 6px;
  }
  body.game-active #gameCard,
  body.game-active #lobbyCard {
    padding: 12px 14px;
    margin-bottom: 0;
  }
  .lobby-card:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
    grid-template-areas:
      "summary summary"
      "players ready"
      "players party"
      "players invite"
      "requests requests"
      "settings settings";
    gap: 8px 12px;
    align-items: start;
  }
  .lobby-summary { grid-area: summary; }
  .player-roster { grid-area: players; }
  .invite-panel { grid-area: invite; }
  .game-settings { grid-area: settings; }
  .lobby-card .invite-panel {
    padding: 7px 9px;
  }
  .lobby-card .party-mode-panel {
    grid-area: party;
    gap: 8px;
    padding: 7px 9px;
  }
  .lobby-card .party-mode-actions {
    display: flex;
  }
  .lobby-card .party-mode-actions button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 4px 2px;
    white-space: normal;
  }
  .ready-action-panel { grid-area: ready; }
  .join-requests-panel { grid-area: requests; }
  .lobby-card .ready-action-panel,
  .lobby-card .join-requests-panel {
    margin: 0;
    padding: 9px 10px;
  }
  body.game-active .ready-primary {
    min-height: 44px;
  }
  body.game-active #inviteStatus {
    margin: 4px 0;
  }
  body.game-active #gameCard .turn-meta,
  body.game-active #gameCard .prompt-box,
  body.game-active #gameCard .round-progress {
    margin-bottom: 7px;
  }
  body.game-active #gameCard .prompt-box,
  body.game-active #gameCard .round-progress {
    padding: 8px 10px;
  }
  body.game-active #gameCard .prompt-box.has-prompt-reaction { padding-right: 10px; }
  body.game-active .prompt-reaction-panel {
    gap: 8px;
    margin: 4px 0;
    padding: 3px 8px;
  }
  body.game-active .prompt-reaction-panel .tiny {
    display: none;
  }
  body.game-active .prompt-reaction-buttons {
    flex-wrap: nowrap;
    gap: 4px;
  }
  body.game-active .prompt-reaction-buttons button {
    min-width: 2.35rem;
    min-height: 32px;
    padding: 2px 5px;
    font-size: 1.05rem;
  }
  body.game-active #drawingPanel:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 700px) minmax(17rem, 1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 7px 14px;
    align-items: start;
  }
  body.game-active #drawingPanel > fieldset,
  body.game-active #drawingPanel > .tool-row,
  body.game-active #drawingPanel > .turn-actions {
    grid-column: 2;
    margin-bottom: 0;
  }
  body.game-active #drawingPanel > fieldset:nth-of-type(1) { grid-row: 1; }
  body.game-active #drawingPanel > fieldset:nth-of-type(2) { grid-row: 2; }
  body.game-active #drawingPanel > .tool-row { grid-row: 3; }
  body.game-active #drawingPanel > .turn-actions { grid-row: 4; }
  body.game-active #drawCanvas {
    grid-column: 1;
    grid-row: 1 / span 4;
    margin-bottom: 0;
  }
  body.game-active #helpStatus {
    margin: 5px 0;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .selector-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "games create"
      "games join";
  }
}
@media (max-width: 899px) {
  .management-area-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-brand-line .brand-expansion {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lobby-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 10px;
  }
  .lobby-name-item { grid-column: 1 / 3; }
  .lobby-code-item { grid-column: 3; }
  .lobby-visibility-item { grid-column: 2; }
  .lobby-timer-item { grid-column: 3; }
  .lobby-turns-item { grid-column: 1; }
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .setting-row {
    grid-template-columns: minmax(5rem, .8fr) minmax(7rem, 1.2fr);
  }
  .player-identity {
    grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 1.4fr);
  }
  .identity-row,
  .google-sign-in-row {
    align-self: center;
  }
}
@media (min-width: 721px) and (max-width: 899px) {
  .player-identity .avatar-picker {
    grid-column: 2;
    grid-row: 1;
    padding-right: 5rem;
  }
  .player-identity .identity-row {
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
  }
}
@media (max-width: 720px) {
  .management-data-panel {
    padding: 10px;
  }
  .management-query-filters {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
    gap: 6px 8px;
  }
  .management-query-filters input,
  .management-query-filters select,
  .management-query-filters button {
    width: 100%;
    min-width: 0;
  }
  .management-query-filters button {
    grid-column: 2;
  }
  .management-panel-heading {
    align-items: flex-start;
  }
  .management-table-wrap {
    max-height: 58vh;
  }
  .lobby-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 8px;
  }
  .lobby-name-item { grid-column: 1 / -1; }
  .lobby-code-item { grid-column: 1 / 3; }
  .lobby-visibility-item { grid-column: 1; }
  .lobby-timer-item { grid-column: 2; }
  .lobby-turns-item { grid-column: 3; }
}
@media (max-width: 520px) {
  .party-mode-panel {
    padding-inline: .4rem;
  }
  .end-slideshow .reveal-navigation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .end-slideshow #revealProgress { grid-column: 1 / -1; grid-row: 1; }
  .end-slideshow #previousChainBtn { grid-column: 1; grid-row: 2; }
  .end-slideshow #revealPauseBtn { grid-column: 2; grid-row: 2; }
  .end-slideshow #nextChainBtn { grid-column: 3; grid-row: 2; }
  .end-story-pair { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .end-story-panel { min-height: 42vh; }
  .end-story-panel.sentence-story-panel { min-height: 0; }
  .end-slide-countdown { grid-template-columns: auto minmax(4rem, 1fr); }
  .play-again-panel { flex-wrap: wrap; }
  .rematch-countdown { width: 100%; margin-left: 0; }
  .settings-grid { grid-template-columns: 1fr; }
  .party-display-icons { display: none; }
  .management-runtime-grid {
    grid-template-columns: 1fr;
  }
  .management-runtime-checkbox {
    grid-column: 1;
  }
  .management-connection-facts {
    grid-template-columns: 1fr;
  }
  .wrap {
    margin: 8px auto;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .card {
    padding: 13px;
    border-radius: 12px;
  }
  body.game-active .wrap {
    margin-top: 0;
    padding-top: max(5px, env(safe-area-inset-top));
  }
  body.game-active .game-view-nav:not(.hidden) {
    top: max(4px, env(safe-area-inset-top));
    margin-bottom: 7px;
  }
  body.game-active #gameCard {
    padding: 11px;
    margin-bottom: 0;
    border-radius: 10px;
  }
  .turn-heading {
    align-items: stretch;
    gap: 8px;
  }
  .turn-heading > div:first-child {
    min-width: 0;
    flex: 1;
  }
  .turn-heading h2 {
    font-size: clamp(1.35rem, 7vw, 1.75rem);
  }
  .turn-timer {
    min-width: 6.9rem;
    padding: 7px 8px;
  }
  .countdown {
    font-size: 1.65rem;
  }
  .turn-meta {
    margin-bottom: 8px;
  }
  #promptBox {
    margin-bottom: 8px;
    padding: 9px;
  }
  #sentenceInput {
    min-height: 8rem;
  }
  .turn-actions {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
  }
  .turn-actions #submitSentenceBtn,
  .turn-actions #submitDrawingBtn {
    font-weight: 900;
  }
  #drawingPanel fieldset.tool-group {
    margin-bottom: 5px;
  }
  #drawingPanel .tool-row {
    gap: 6px;
    margin-bottom: 6px;
  }
  #drawCanvas {
    max-height: 43vh;
    margin-bottom: 7px;
  }
  .round-progress {
    margin: 10px 0 0;
    padding: 8px;
  }
  .instruction-steps {
    grid-template-columns: 1fr;
  }
  .instructions-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .instructions-game .instruction-steps.compact {
    grid-template-columns: 1fr;
  }
  .site-header {
    padding: 9px 10px;
  }
  .site-brand-line {
    gap: 7px;
  }
  .site-brand-line h1 {
    font-size: 1.25rem;
  }
  .site-brand-line .brand-expansion {
    min-width: 0;
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
  }
  .site-brand-line .muted {
    display: none;
  }
  .profile-nav-btn {
    min-height: 38px;
    padding: 6px 8px;
    font-size: 0.78rem;
  }
  .profile-nav-icon {
    width: 25px;
    height: 25px;
  }
  .site-nav-btn {
    min-width: 0;
    min-height: 38px;
    padding: 7px 4px;
    font-size: 0.82rem;
  }
  .history-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .management-heading {
    align-items: stretch;
    flex-direction: column;
  }
  #managementLockBtn {
    width: 100%;
  }
  .player-identity {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .identity-row {
    justify-self: stretch;
    justify-content: center;
  }
  .public-lobby-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .public-lobby-card > strong,
  .public-lobby-card > span:not(.public-lobby-action),
  .public-lobby-card .public-lobby-action {
    grid-column: 1;
  }
  .account-lobby-card .account-lobby-actions {
    grid-column: 1;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    width: 100%;
  }
  .public-lobby-card .public-lobby-action {
    grid-row: auto;
    justify-self: stretch;
    width: auto;
    text-align: center;
  }
  .avatar-picker,
  .google-sign-in-row {
    grid-column: 1 / -1;
  }
  .history-heading,
  .history-game-card {
    align-items: stretch;
    flex-direction: column;
  }
  .selector-action-card .muted,
  .selector-action-card .tiny {
    min-height: 0;
  }
  .management-area-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .management-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .management-log-filters {
    grid-template-columns: 1fr;
  }
  .management-query-filters {
    grid-template-columns: 1fr;
  }
  .management-metric-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .management-metric-heading select {
    width: 100%;
  }
  .management-threshold-grid {
    grid-template-columns: minmax(7rem, 1fr) repeat(2, minmax(4.5rem, 1fr));
    gap: 8px;
  }
  .lobby-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 8px;
  }
  .lobby-name-item { grid-column: 1 / -1; }
  .lobby-code-item { grid-column: 1 / 3; }
  .lobby-visibility-item { grid-column: 1; }
  .lobby-timer-item { grid-column: 2; }
  .lobby-turns-item { grid-column: 3; }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setting-row {
    grid-template-columns: minmax(7rem, 0.8fr) minmax(9rem, 1.2fr);
  }
  .setting-control {
    grid-template-columns: minmax(4.5rem, 0.7fr) auto;
  }
  .settings-read-only {
    grid-template-columns: 1fr;
  }
  .settings-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .setting-row input[type="number"],
  .setting-row select {
    margin: 0;
  }
  #revealCard {
    overflow: hidden;
  }
  .reveal-summary {
    margin: 12px 0;
    padding: 18px 14px;
    border-radius: 14px;
  }
  .reveal-summary h3 {
    font-size: clamp(1.75rem, 10vw, 2.35rem);
  }
  .summary-stats {
    gap: 7px;
  }
  .summary-stats div {
    padding: 11px 8px;
  }
  #viewChainsBtn,
  #viewHighlightBtn,
  .back-to-summary,
  #downloadGameExportBtn,
  #playAgainBtn {
    width: 100%;
    min-height: 48px;
  }
  .reveal-chain {
    padding: 12px 8px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .reveal-step {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
  }
  .reveal-step-number {
    width: 32px;
    height: 32px;
  }
  .reveal-step:not(:last-child)::before {
    top: 30px;
    left: 15px;
  }
  .reveal-step-body > .name-with-avatar {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .reveal-type {
    margin-left: 0;
  }
  .reveal-step-body {
    padding: 10px;
  }
  .reveal-navigation button,
  .reveal-page {
    min-width: 48px;
    min-height: 48px;
  }
  .reveal-sentence {
    overflow-wrap: anywhere;
  }
}
@media (max-width: 420px) {
  .summary-stats {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }
  .reveal-navigation {
    grid-template-columns: 1fr 1fr;
  }
  #revealProgress {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}
.build-footer {
  max-width: 920px;
  margin: -16px auto 20px;
  padding: 0 16px;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  button, .pill.clickable, .skip-link {
    transition: none;
  }
  .completion-celebration {
    display: none;
  }
  .turn-timer.critical {
    animation: none;
  }
  .reaction-button.reaction-vote-pulse {
    animation: none;
  }
}
.party-mode-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border, #d8cfc4);
  border-radius: .75rem;
  background: var(--color-surface-raised);
}

/* Management deliberately uses its own professional palette while inheriting
   the shared spacing, typography, focus, and component contracts. */
#managementCard[data-management-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --card: #111a2d;
  --border: #3b4968;
  --text: #f8fafc;
  --muted: #b4c0d4;
  --accent: #60a5fa;
  --color-surface: #111a2d;
  --color-surface-raised: #18233a;
  --color-surface-muted: #202c45;
  --color-primary-text: #08111f;
  --color-focus: #7dd3fc;
  background: var(--card);
  color: var(--text);
}
#managementCard[data-management-theme="light"] {
  color-scheme: light;
  --bg: #eef2f7;
  --card: #ffffff;
  --border: #cbd5e1;
  --text: #172033;
  --muted: #5b6578;
  --accent: #2563eb;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-muted: #eef2f7;
  --color-primary-text: #ffffff;
  --color-focus: #0369a1;
  background: var(--card);
  color: var(--text);
}
#managementCard .section-eyebrow {
  color: var(--accent);
}
.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.theme-preview {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  font-size: .8rem;
  font-weight: 800;
}
.theme-preview i {
  width: 2.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.theme-preview[data-preview-theme="high-contrast-dark"] i {
  background: linear-gradient(135deg, #0b1020 50%, #2dd4bf 50%);
}
.theme-preview[data-preview-theme="arcade-night"] i {
  background: linear-gradient(135deg, #0d1028 34%, #51f4ff 34% 66%, #adff55 66%);
}
.theme-preview[data-preview-theme="basic"] i {
  background: linear-gradient(135deg, #f7f7f2 50%, #0f766e 50%);
}
.theme-preview[data-preview-theme="bold-contrast"] i {
  background: linear-gradient(135deg, #000 34%, #fff 34% 66%, #ffd400 66%);
}
@media (max-width: 560px) {
  .theme-preview-grid { grid-template-columns: 1fr; }
}
.party-mode-panel .section-eyebrow { white-space: nowrap; }
.party-mode-panel p { margin: 0; }
.party-mode-panel { align-items: stretch; flex-direction: column; gap: .45rem; }
.party-mode-actions { display: flex; width: 100%; min-width: 0; gap: .3rem; align-items: stretch; }
.party-mode-actions > button { box-sizing: border-box; flex: 1 1 0; width: auto; min-width: 0; max-width: 100%; min-height: 48px; padding: .3rem .15rem; font-size: clamp(.58rem, 2.35vw, .68rem); line-height: 1.05; white-space: normal; }
.party-mode-actions > button span { display: inline-block; max-width: 100%; white-space: nowrap; }
.prompt-reaction-buttons { display: flex; min-width: 0; flex-wrap: wrap; gap: .45rem; align-items: center; }
.prompt-reaction-panel { position: static; display: flex; min-width: 0; align-items: center; justify-content: flex-end; margin: .55rem 0 0; padding: .45rem 0 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.prompt-reaction-panel.hidden { display: none; }
.prompt-reaction-buttons { min-width: 0; max-width: 100%; }
.prompt-reaction-buttons button { min-width: 0; max-width: 100%; min-height: 36px; padding: .35rem .65rem; font-size: .9rem; font-weight: 850; white-space: normal; }
.prompt-reaction-buttons button[aria-pressed="true"] { outline: 3px solid var(--color-secondary); }
@media (max-width: 700px) {
.party-mode-panel { align-items: stretch; flex-direction: column; }
.prompt-reaction-buttons { justify-content: center; }
  .management-game-player { grid-template-columns: minmax(0, 1fr); }
  .profile-avatar-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-nav-btn span { display: none; }
}

@media (max-width: 520px) {
  .lobby-visibility-item,
  .lobby-timer-item,
  .lobby-turns-item {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 1px !important;
  }
  .lobby-summary .lobby-visibility-item strong,
  .lobby-summary .lobby-timer-item strong,
  .lobby-summary .lobby-turns-item strong {
    width: 100%;
    overflow: visible;
    text-overflow: clip;
  }
  .party-mode-actions {
    gap: .12rem;
  }
  .party-mode-actions > button {
    min-height: 46px;
    padding: .25rem .1rem;
    font-size: clamp(.58rem, 2.7vw, .72rem);
    line-height: 1.05;
  }
  [data-theme="arcade-night"] body.game-active {
    background: linear-gradient(155deg, #173b54 0%, #171a3b 48%, #180c30 100%);
  }
  [data-theme="arcade-night"] body.game-active #gameCard {
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  [data-theme="arcade-night"] body.game-active #gameCard::before {
    display: none;
  }
  [data-theme="arcade-night"] .turn-heading {
    position: relative;
    z-index: 4;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #303766;
    border-radius: 22px;
    background: rgba(18, 21, 52, .96);
    box-shadow: 0 10px 24px rgba(4, 6, 22, .34);
  }
  [data-theme="arcade-night"] .turn-heading .section-eyebrow {
    color: #51f4ff;
  }
  [data-theme="arcade-night"] .turn-heading h2 {
    margin: 2px 0;
    color: #fffdf8;
    font-family: Inter, ui-rounded, system-ui, sans-serif;
    font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  }
  [data-theme="arcade-night"] .turn-meta {
    margin: 2px 0 0;
    color: #c9ccec;
  }
  [data-theme="arcade-night"] .turn-timer {
    width: 84px;
    height: 84px;
    min-width: 84px;
    align-content: center;
    padding: 4px;
    border: 4px solid #51f4ff;
    border-radius: 50%;
    background: #111530;
    color: #fffdf8;
    box-shadow: 0 0 15px rgba(81, 244, 255, .35);
  }
  [data-theme="arcade-night"] .turn-timer .timer-label {
    font-size: .67rem;
    letter-spacing: 0;
    text-transform: lowercase;
  }
  [data-theme="arcade-night"] .turn-timer .timer-urgency {
    display: none;
  }
  [data-theme="arcade-night"] .turn-timer.warning,
  [data-theme="arcade-night"] .turn-timer.critical {
    border-color: #ff5d8f;
    background: #241129;
    color: #fff;
  }
  [data-theme="arcade-night"] #promptBox {
    margin-top: 14px;
    padding: 16px 18px;
    border: 4px solid #080b1c;
    border-radius: 24px;
    background: var(--color-content-paper);
    color: var(--color-content-ink);
    box-shadow: 0 8px 0 #080b1c;
    font-size: 1.05rem;
    font-weight: 800;
  }
  [data-theme="arcade-night"] #promptBox .section-eyebrow {
    display: block;
    margin: 0 0 8px;
    color: #7b3d00;
  }
  [data-theme="arcade-night"] #sentenceInput,
  [data-theme="arcade-night"] #drawCanvas {
    border: 4px solid #080b1c;
    border-radius: 24px;
    background: var(--color-drawing-paper);
    color: var(--color-content-ink);
    box-shadow: 0 9px 0 #080b1c;
  }
  [data-theme="arcade-night"] #sentenceInput {
    min-height: min(38vh, 18rem);
    padding: 16px;
  }
  [data-theme="arcade-night"] #drawingPanel fieldset.tool-group,
  [data-theme="arcade-night"] #drawingPanel > .tool-row {
    padding: 9px;
    border: 1px solid #414879;
    border-radius: 16px;
    background: rgba(32, 37, 79, .9);
  }
  [data-theme="arcade-night"] .tool-btn {
    border-color: #4b5289;
    background: #292f62;
    color: #fffdf8;
  }
  [data-theme="arcade-night"] .tool-btn.active {
    border-color: #51f4ff;
    background: #353c76;
    color: #fff;
  }
  [data-theme="arcade-night"] .round-progress {
    border: 0;
    background: transparent;
  }
  [data-theme="arcade-night"] .round-progress ul {
    max-height: 5.5rem;
    overflow-y: auto;
  }
  [data-theme="arcade-night"] .turn-actions {
    grid-template-columns: 1fr;
    margin-top: 10px;
  }
  [data-theme="arcade-night"] .turn-actions .help-me-btn {
    border: 0;
    background: linear-gradient(90deg, #ef5aac, #8b5cf6);
    color: #fff;
  }
  [data-theme="arcade-night"] .turn-actions .button-primary {
    min-height: 56px;
    border-color: #adff55;
    border-radius: 18px;
    background: #adff55;
    color: #101327;
    box-shadow: 0 8px 0 #507d23;
    font-size: 1.08rem;
    text-transform: uppercase;
  }
}
.snake-play-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 18rem); gap: 1rem; min-height: 0; }
.snake-board { box-sizing: border-box; display: block; width: min(100%, 68vh); max-width: 100%; max-height: 68vh; aspect-ratio: 1; margin: 0 auto; border: 3px solid var(--ink, #e2e8f0); border-radius: .75rem; background: #07111f; touch-action: none; }
.snake-side-panel { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.snake-side-panel .trivia-standings li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  white-space: nowrap;
}
.snake-standing-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snake-standing-score { font-variant-numeric: tabular-nums; white-space: nowrap; }
.snake-phase-countdown {
  display: grid;
  gap: .4rem;
  margin: 0 0 .75rem;
  text-align: center;
}
.snake-phase-countdown.hidden { display: none; }
.snake-phase-countdown strong { font-size: clamp(1rem, 2.3vw, 1.6rem); white-space: nowrap; }
.snake-phase-countdown-track {
  height: .55rem;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--color-surface-muted);
}
.snake-phase-countdown-track > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--good), var(--accent));
}
.snake-card.snake-results .snake-play-layout { grid-template-columns: minmax(0, 42rem); justify-content: center; }
.snake-card.snake-results .snake-board,
.snake-card.snake-results .snake-controls { display: none; }
.snake-card.snake-results .snake-side-panel { display: block; }
.snake-card.snake-completed .trivia-heading .turn-timer { display: none; }
.snake-final-celebration {
  display: grid;
  place-items: center;
  gap: .2rem;
  margin-bottom: .75rem;
  padding: clamp(.8rem, 2vw, 1.35rem);
  border: 2px solid #fbbf24;
  border-radius: 1rem;
  background: linear-gradient(135deg, #12383c, #29184c);
  color: #fff;
  text-align: center;
}
.snake-final-celebration.hidden { display: none; }
.snake-final-celebration > span { font-size: clamp(2rem, 6vw, 4rem); line-height: 1; }
.snake-final-celebration > strong { font-size: clamp(1.4rem, 4vw, 2.5rem); }
.snake-final-celebration > small { color: #fde68a; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.snake-final-standing {
  min-height: 3.25rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: .7rem;
  background: var(--color-surface-raised);
}
.snake-final-standing.rank-1 {
  min-height: 4rem;
  border: 2px solid #fbbf24;
  background: color-mix(in srgb, #fbbf24 16%, var(--color-surface-raised));
  font-size: 1.12em;
}
.snake-completion-actions {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
}
.snake-completion-actions.hidden { display: none; }
.snake-card.snake-results.is-completed .snake-side-panel {
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: .45rem;
  grid-template-rows: auto minmax(0, 1fr);
}
.snake-card.snake-results.is-completed .trivia-standings {
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  scrollbar-gutter: stable;
}
.snake-controls { display: grid; grid-template: repeat(2, minmax(3.5rem, 1fr)) / repeat(3, minmax(3.5rem, 1fr)); gap: .45rem; margin-top: auto; }
.snake-controls button {
  min-height: 3.5rem;
  padding: .5rem;
  font-size: 1.25rem;
  font-weight: 900;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: none;
}
.snake-controls button:focus { outline: none; }
.snake-controls button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.snake-controls button.is-pressed,
.snake-controls button:active {
  background: color-mix(in srgb, var(--accent) 58%, white);
  color: var(--color-ink);
  transform: none;
}
.snake-controls button[data-snake-direction="up"] { grid-column: 2; }
.snake-controls button[data-snake-direction="left"] { grid-column: 1; grid-row: 2; }
.snake-controls button[data-snake-direction="down"] { grid-column: 2; grid-row: 2; }
.snake-controls button[data-snake-direction="right"] { grid-column: 3; grid-row: 2; }
@media (max-width: 520px) {
  .play-surface.is-completed:not(.snake-card) > .experience-completion-actions {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  #triviaHistoryBtn,
  #wordSearchHistoryBtn,
  #sudokuHistoryBtn {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  #triviaLeaveBtn,
  #wordSearchLeaveBtn,
  #sudokuLeaveBtn { grid-column: 1; grid-row: 1; }
  #triviaPlayAgainBtn,
  #wordSearchPlayAgainBtn,
  #sudokuPlayAgainBtn { grid-column: 2; grid-row: 1; }
  .compact-standing-row {
    min-height: 1.8rem;
    padding: .25rem .4rem;
    font-size: .78rem;
  }
  .end-podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 6px;
  }
  .end-podium-player,
  .end-podium-player.rank-1 {
    min-height: 8.5rem;
    gap: 3px;
    padding: 6px 3px;
    font-size: .68rem;
  }
  .end-podium-player .avatar.large { width: 48px; height: 48px; }
  .end-podium-medal { font-size: 1.4rem; }
  .end-podium-remaining .compact-standings { grid-template-columns: 1fr; }
  #revealCard.completed-results-surface:not(.hidden) {
    height: calc(100vh - 6.5rem);
    height: calc(100dvh - 6.5rem);
    max-height: calc(100vh - 6.5rem);
    max-height: calc(100dvh - 6.5rem);
    padding: .55rem;
  }
  #revealCard > .experience-completion-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #revealCard > .experience-completion-actions button {
    padding-inline: .25rem;
    font-size: .72rem;
  }
}
@media (max-width: 700px) {
  body.game-active.game-view-turn .wrap:has(#snakeCard:not(.hidden)) {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    margin-bottom: 0;
    overflow: hidden;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  body.game-active.game-view-turn #snakeCard:not(.hidden) {
    display: flex;
    min-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    flex-direction: column;
  }
  .snake-play-layout { grid-template-columns: 1fr; gap: .45rem; }
  body.game-active.game-view-turn #snakeCard:not(.hidden) .snake-play-layout {
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
  }
  .snake-board {
    width: min(100%, 45vh);
    width: min(100%, 45dvh);
    max-height: min(100%, 45vh);
    max-height: min(100%, 45dvh);
    align-self: end;
  }
  .snake-side-panel {
    display: flex;
    min-height: 0;
    gap: .35rem;
    flex-direction: column;
  }
  .snake-controls { order: 1; margin: 0; }
  .snake-side-panel #snakeStatus { order: 2; margin: 0; }
  .snake-side-panel #snakeStatus:empty { display: none; }
  .snake-side-panel .trivia-standings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    order: 3;
    max-height: min(7rem, 13dvh);
    overflow-y: auto;
    align-content: start;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .snake-side-panel .trivia-standings li {
    min-height: 1.65rem;
    gap: .25rem;
    padding: .2rem .35rem;
    font-size: .72rem;
  }
}

/* Short desktop windows still need to expose every primary game control. Keep
   the play surface bounded and let long twelve-player scoreboards scroll
   inside their own region instead of pushing the board or controls below the
   document viewport. Phone layouts retain their dedicated rules above. */
@media (min-width: 900px) and (max-height: 780px) {
  body.game-active.game-view-turn #wordSearchCard:not(.hidden):has(#wordSearchCompletionActions.hidden),
  body.game-active.game-view-turn #sudokuCard:not(.hidden):has(#sudokuCompletionActions.hidden),
  body.game-active.game-view-turn #snakeCard:not(.hidden):not(.snake-results) {
    box-sizing: border-box;
    height: calc(100dvh - 96px);
    margin-bottom: 0;
  }

  body.game-active.game-view-turn #wordSearchCard:not(.hidden):has(#wordSearchCompletionActions.hidden) {
    display: grid;
    max-width: 72rem;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "heading heading"
      "phase scores"
      "board scores"
      "status scores";
    gap: .35rem .8rem;
  }
  body.game-active.game-view-turn #wordSearchCard:not(.hidden):has(#wordSearchCompletionActions.hidden) > .trivia-heading { grid-area: heading; }
  body.game-active.game-view-turn #wordSearchCard:not(.hidden):has(#wordSearchCompletionActions.hidden) > #wordSearchPhaseText { grid-area: phase; margin: 0; }
  body.game-active.game-view-turn #wordSearchCard:not(.hidden):has(#wordSearchCompletionActions.hidden) > #wordSearchBoard {
    grid-area: board;
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    align-self: center;
    justify-self: center;
  }
  body.game-active.game-view-turn #wordSearchCard:not(.hidden):has(#wordSearchCompletionActions.hidden) > #wordSearchClaimStatus {
    grid-area: status;
    min-height: 1.2em;
    margin: 0;
  }
  body.game-active.game-view-turn #wordSearchCard:not(.hidden):has(#wordSearchCompletionActions.hidden) > section:has(#wordSearchStandings) {
    display: grid;
    min-height: 0;
    overflow: hidden;
    grid-area: scores;
    grid-template-rows: auto minmax(0, 1fr);
  }
  body.game-active.game-view-turn #wordSearchCard:not(.hidden):has(#wordSearchCompletionActions.hidden) > section:has(#wordSearchStandings) > h3 { margin: 0 0 .35rem; }
  body.game-active.game-view-turn #wordSearchCard:not(.hidden):has(#wordSearchCompletionActions.hidden) #wordSearchStandings {
    min-height: 0;
    overflow-y: auto;
    grid-template-columns: 1fr;
    align-content: start;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  body.game-active.game-view-turn #wordSearchCard:not(.hidden):has(#wordSearchCompletionActions.hidden) #wordSearchStandings li {
    margin: 0;
    padding: .35rem .45rem;
    font-size: .82rem;
    line-height: 1.15;
  }

  body.game-active.game-view-turn #sudokuCard:not(.hidden):has(#sudokuCompletionActions.hidden),
  body.game-active.game-view-turn #snakeCard:not(.hidden):not(.snake-results) {
    display: flex;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
  }
  body.game-active.game-view-turn #sudokuCard:not(.hidden):has(#sudokuCompletionActions.hidden) .sudoku-play-layout {
    min-height: 0;
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr) auto;
    flex: 1 1 auto;
  }
  #sudokuCard .sudoku-board {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    justify-self: center;
  }
  #sudokuCard #sudokuStandingsSection {
    display: grid;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    align-self: stretch;
    grid-template-rows: auto minmax(0, 1fr);
  }
  #sudokuStandings {
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    grid-template-columns: 1fr;
    align-content: start;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  #sudokuStandings li {
    margin: 0;
    padding: .35rem .45rem;
    font-size: .82rem;
    line-height: 1.15;
  }

  body.game-active.game-view-turn #snakeCard:not(.hidden):not(.snake-results) .snake-play-layout {
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
  }
  body.game-active.game-view-turn #snakeCard:not(.hidden):not(.snake-results) .snake-side-panel {
    min-height: 0;
  }
  body.game-active.game-view-turn #snakeCard:not(.hidden):not(.snake-results) .trivia-standings {
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    align-content: start;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    flex: 1 1 auto;
  }
  body.game-active.game-view-turn #snakeCard:not(.hidden):not(.snake-results) .snake-controls {
    margin-top: 0;
    flex: none;
  }
}