:root {
  color-scheme: light;
  --bg: #f4f8f6;
  --panel: #ffffff;
  --panel-soft: #eef7f3;
  --field: #ffffff;
  --table: #ffffff;
  --text: #14211d;
  --muted: #63716c;
  --line: #d9e5df;
  --brand: #0e7c66;
  --brand-dark: #075f4d;
  --accent: #d9f46f;
  --danger: #b42318;
  --warning: #a15c00;
  --shadow: 0 18px 44px rgba(13, 87, 69, 0.13);
  --shadow-strong: 0 24px 70px rgba(8, 63, 50, 0.18);
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07130f;
  --panel: #101d18;
  --panel-soft: #172b24;
  --field: #0c1713;
  --table: #0d1814;
  --text: #edf7f3;
  --muted: #9eb0aa;
  --line: #263b34;
  --brand: #28b795;
  --brand-dark: #4ed2b3;
  --accent: #d9f46f;
  --danger: #ffb4ac;
  --warning: #ffcf70;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  --shadow-strong: 0 26px 80px rgba(0, 0, 0, 0.46);
}

body[data-theme="animated"] {
  color-scheme: dark;
  --bg: #06120f;
  --panel: #0c1d18;
  --panel-soft: #123128;
  --field: #071611;
  --table: #091914;
  --text: #effbf6;
  --muted: #9db8ae;
  --line: #24453a;
  --brand: #28d6c1;
  --brand-dark: #7cf5d9;
  --accent: #c8ff6a;
  --danger: #ffb4ac;
  --warning: #ffd36b;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  --shadow-strong: 0 28px 90px rgba(0, 0, 0, 0.52);
}

body[data-theme="light"] {
  background: #f8faf9;
}

body[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: none;
}

body[data-theme="light"] .sidebar {
  background: #ffffff;
  backdrop-filter: none;
  box-shadow: 0 8px 24px rgba(20, 33, 29, 0.07);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(14, 124, 102, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 124, 102, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 10% 10%, rgba(217, 244, 111, 0.34), transparent 26rem),
    linear-gradient(145deg, #f8fbf9 0%, var(--bg) 55%, #e9f5f0 100%);
  background-size: 42px 42px, 42px 42px, auto, auto;
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body[data-theme="dark"] {
  background:
    linear-gradient(rgba(78, 210, 179, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 210, 179, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(40, 183, 149, 0.26), transparent 24rem),
    linear-gradient(145deg, #030806 0%, var(--bg) 58%, #0b1b15 100%);
  background-size: 42px 42px, 42px 42px, auto, auto;
}

body[data-theme="animated"] {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(40, 214, 193, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 214, 193, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: animatedGridDrift 24s linear infinite;
}

@keyframes animatedGridDrift {
  to { background-position: 46px 46px; }
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

button:hover {
  transform: translateY(-1px);
}

.shell {
  min-height: 100vh;
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.login-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  width: min(980px, 100%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.login-art {
  display: flex;
  min-height: 520px;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(3, 18, 18, 0.98), rgba(8, 62, 58, 0.95)),
    linear-gradient(90deg, rgba(195, 242, 232, 0.12), transparent 42%),
    var(--panel);
  color: white;
}

.login-art::before {
  content: "";
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.95), transparent 78%);
}

.login-art::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  transform: rotate(22deg);
}

.login-brand-panel,
.login-copy,
.login-visual {
  position: relative;
  z-index: 1;
}

.login-brand-panel {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 9px 11px;
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
}

.login-logo {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 7px;
  background: var(--brand);
  color: white;
  font-weight: 900;
}

.login-art h1 {
  max-width: 560px;
  margin: 0;
  font-size: clamp(2.3rem, 4.6vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.login-art p {
  max-width: 500px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.04rem;
}

.login-visual {
  display: grid;
  width: min(360px, 100%);
  gap: 10px;
}

.login-visual span {
  display: block;
  height: 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.08));
}

.login-visual span:nth-child(2) {
  width: 72%;
}

.login-visual span:nth-child(3) {
  width: 48%;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font-size: 0.84rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
}

.login-form h2,
.panel h2,
.section-title h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0;
}

.login-form p {
  margin: 8px 0 26px;
  color: var(--muted);
}

.login-brand {
  display: flex;
  margin-bottom: 18px;
}

.login-brand .brand-logo {
  width: 220px;
  max-width: 100%;
}

.language-flags {
  display: flex;
  gap: 8px;
  margin: 2px 0 14px;
}

.login-form .language-flags button,
.public-blog-top .language-flags button {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 10px;
  font-weight: 900;
}

.login-form .language-flags button.active,
.public-blog-top .language-flags button.active {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 18%, var(--field));
}

.flag-dot {
  display: inline-block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent);
}

.flag-dot.lv {
  background: linear-gradient(#8c1d40 0 40%, #fff 40% 60%, #8c1d40 60%);
}

.flag-dot.en {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h60v30H0z'/%3E%3C/clipPath%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cg clip-path='url(%23a)'%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23c8102e' stroke-width='4' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23c8102e' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

.login-blog-link {
  border: 0;
  background: transparent !important;
  color: var(--muted);
  text-decoration: underline;
  font-weight: 800;
  padding: 4px 0 0;
  min-height: auto;
  box-shadow: none;
}

.login-blog-link:hover {
  transform: none;
  color: var(--brand);
}

.sidebar-blog-link {
  width: 100%;
  justify-content: flex-start;
  min-height: 34px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--field) 72%, transparent);
  color: var(--muted);
  font-size: 0.86rem;
  margin: 8px 0 12px;
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

.field span,
.check-row span:first-child {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  color: var(--text);
  min-height: 42px;
  padding: 10px 12px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(14, 124, 102, 0.12);
}

.check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 3px 0 20px;
}

.check-row input {
  width: 20px;
  min-height: 20px;
  accent-color: var(--brand);
}

.primary,
.secondary,
.ghost,
.danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 7px;
  padding: 9px 14px;
  font-weight: 800;
}

.primary {
  background: var(--brand);
  color: white;
  box-shadow: 0 12px 30px rgba(14, 124, 102, 0.22);
}

.primary:hover {
  background: var(--brand-dark);
}

.secondary {
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text);
}

.secondary:hover {
  border-color: color-mix(in srgb, var(--brand) 58%, var(--line));
}

.secondary.active {
  border-color: transparent;
  background: var(--brand);
  color: white;
}

.ghost {
  background: transparent;
  color: var(--brand-dark);
}

.danger {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
}

.danger-button {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--line));
  color: var(--danger);
}

.danger-card {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
}

.social-login-stack {
  display: grid;
  gap: 9px;
  margin-bottom: 16px;
}

.discord-button,
.social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: 100%;
  border-radius: 7px;
  color: white;
  font-weight: 900;
}

.discord-button {
  background: #5865f2;
}

.google-button {
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text);
}

.twitch-button {
  background: #9146ff;
}

.hint {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  padding: 14px clamp(16px, 4vw, 36px);
  backdrop-filter: blur(16px);
}

.runtime-error-banner {
  position: sticky;
  top: 66px;
  z-index: 35;
  margin: 8px auto 0;
  width: min(1320px, calc(100% - 32px));
  border: 1px solid rgba(255, 112, 112, 0.72);
  border-radius: 8px;
  background: rgba(88, 12, 20, 0.92);
  color: #ffd7d7;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 800;
}

.runtime-error-banner.hidden {
  display: none;
}

.brand,
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 0;
  font-weight: 900;
}

.brand:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.brand-logo {
  display: block;
  width: clamp(138px, 14vw, 190px);
  height: 54px;
}

.brand-logo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.brand-logo-script {
  fill: var(--text);
  font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.logo-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--brand);
  color: white;
  font-weight: 900;
}

.top-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.site-announcement {
  flex: 1 1 260px;
  max-width: 620px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 13%, var(--field));
  color: var(--text);
  padding: 8px 14px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 900;
}

.version-strip {
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  padding: 3px clamp(16px, 4vw, 36px) 0;
  color: color-mix(in srgb, var(--muted) 62%, transparent);
  font-size: 0.62rem;
  line-height: 1;
}
.version-strip button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0 0 2px;
  font: inherit;
  cursor: pointer;
}
.version-strip button:hover,
.version-strip button:focus-visible { color: var(--brand); }

.changelog-page { max-width: 1120px; margin: 0 auto; }
.changelog-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: 18px; align-items: start; }
.changelog-list { display: grid; gap: 10px; }
.changelog-release { border: 1px solid var(--line); border-radius: 7px; background: var(--field); padding: 14px 16px; }
.changelog-release.latest { border-color: color-mix(in srgb, var(--brand) 65%, var(--line)); }
.changelog-release header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.changelog-release h3 { margin: 0; }
.changelog-release header span { border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); padding: 4px 8px; font-size: .68rem; font-weight: 800; }
.changelog-release ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.45; }
.idea-submit-card { position: sticky; top: 92px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); padding: 16px; }
.idea-submit-card h3 { margin: 3px 0 7px; }
.form-notice { min-height: 20px; margin-top: 8px; color: var(--brand); font-size: .78rem; }
.idea-admin-list { display: grid; gap: 8px; }
.idea-admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); padding: 12px; }
.idea-admin-row.status-planned { border-left: 3px solid var(--warning, #d9b84c); }
.idea-admin-row.status-done { opacity: .72; border-left: 3px solid var(--brand); }
.idea-admin-row header { display: flex; align-items: center; gap: 8px; }
.idea-admin-row header span { border-radius: 999px; background: var(--surface-2); color: var(--muted); padding: 3px 7px; font-size: .65rem; }
.idea-admin-row p { margin: 7px 0; color: var(--muted); white-space: pre-wrap; }
.idea-admin-row small { color: var(--muted); }
.idea-admin-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .changelog-layout { grid-template-columns: 1fr; }
  .idea-submit-card { position: static; }
  .idea-admin-row { grid-template-columns: 1fr; }
}

.user-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--field);
  color: var(--muted);
  font-size: 0.9rem;
}

.profile-menu {
  position: relative;
}

.profile-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  padding: 6px 12px;
}

.profile-menu-button b {
  color: var(--text);
}

.profile-menu.open .profile-menu-button {
  border-color: color-mix(in srgb, var(--brand) 54%, var(--line));
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  width: min(280px, calc(100vw - 24px));
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-strong);
  padding: 12px;
}

.profile-dropdown-head {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
}

.profile-dropdown-head span {
  color: var(--muted);
  font-size: 0.82rem;
}

.profile-dropdown label {
  display: grid;
  gap: 5px;
}

.profile-dropdown label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-change-password {
  justify-content: center;
}

.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  padding: 6px 12px 6px 7px;
  font-size: 0.86rem;
  font-weight: 800;
}

.view-switch span {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--panel-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.view-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 160ms ease, background 160ms ease;
}

.view-switch.active {
  border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
  color: var(--text);
}

.view-switch.active span {
  background: color-mix(in srgb, var(--brand) 22%, var(--field));
}

.view-switch.active span::after {
  transform: translateX(14px);
  background: var(--brand);
}

.pref-controls {
  display: flex;
  align-items: end;
  gap: 8px;
}

.pref-controls label {
  display: grid;
  gap: 4px;
}

.pref-controls span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pref-controls select {
  min-height: 36px;
  min-width: 104px;
  padding: 7px 10px;
}

.app-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 24px clamp(14px, 4vw, 36px) 44px;
}

body[data-view="minesweeper"] .app-grid {
  width: min(1760px, 100%);
}

.sidebar {
  position: sticky;
  top: 78px;
  z-index: 12;
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  padding: 10px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.sidebar-nav {
  display: grid;
  gap: 2px;
}

.nav-button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 11px;
  text-align: left;
}

.nav-button:hover,
.nav-button.active {
  background: var(--panel-soft);
}

.nav-icon {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: var(--field);
  border: 1px solid var(--line);
}

.online-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  padding: 5px 9px;
  font-size: 0.78rem;
  font-weight: 900;
}

.online-pill > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.online-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: none;
  min-width: 170px;
  max-width: 230px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  padding: 10px;
  color: var(--text);
}

.online-pill:hover .online-popover,
.online-pill:focus-within .online-popover {
  display: grid;
  gap: 5px;
}

.online-popover strong {
  color: var(--brand);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.online-popover p {
  margin: 0;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
}

.sidebar-chat {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.sidebar-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sidebar-chat-head strong {
  font-size: 0.92rem;
}

.sidebar-chat-head small,
.chat-hint,
.chat-message time {
  color: var(--muted);
  font-size: 0.72rem;
}

.chat-messages {
  display: grid;
  max-height: 360px;
  overflow-y: auto;
  gap: 0;
  margin-top: 10px;
  padding-right: 3px;
}

.chat-message {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  border-bottom: 1px dotted color-mix(in srgb, var(--line) 80%, var(--muted));
  padding: 5px 0;
}

.chat-avatar {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--field);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
}

.chat-message header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  line-height: 1;
}

.chat-message strong {
  font-size: 0.8rem;
}

.chat-message p {
  overflow-wrap: anywhere;
  margin: 2px 0 0;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.2;
}

.chat-message.deleted {
  opacity: 0.72;
}

.chat-message.deleted p {
  color: var(--muted);
  font-style: italic;
}

.chat-mod-button {
  min-height: 22px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 2px 7px;
  font-size: 0.68rem;
}

.chat-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 12px;
  text-align: center;
}

.chat-form {
  display: grid;
  gap: 8px;
  margin-top: 0;
}

.chat-form textarea {
  height: 92px;
  min-height: 92px;
  max-height: 92px;
  resize: none;
  overflow-y: auto;
  font-size: 0.78rem;
  line-height: 1.25;
  padding-bottom: 22px;
}

.chat-input-wrap {
  position: relative;
}

.chat-counter {
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  font-size: 0.68rem;
  pointer-events: none;
}

.chat-hint {
  margin: 8px 0 0;
  line-height: 1.35;
}

.chat-admin-list {
  display: grid;
  max-height: 520px;
  overflow: auto;
}

.content {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.hero-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(5, 53, 42, 0.96), rgba(14, 124, 102, 0.72));
  color: white;
  min-height: 310px;
  padding: clamp(22px, 4vw, 42px);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
}

.dashboard-panel {
  justify-content: center;
  min-height: 520px;
  padding: 42px;
}

body[data-theme="light"] .hero-panel {
  border: 1px solid var(--line);
  background: #eef5f2;
  color: var(--text);
  box-shadow: 0 10px 30px rgba(20, 33, 29, 0.08);
}

body[data-theme="light"] .hero-panel p {
  color: var(--muted);
}

body[data-theme="light"] .hero-panel .eyebrow {
  color: var(--brand-dark);
}

body[data-theme="light"] .dashboard-panel {
  min-height: 0;
  align-items: flex-start;
  padding: 24px;
}

body[data-theme="light"] .dashboard-panel .module-grid {
  width: min(980px, 100%);
}

body[data-theme="animated"] .topbar {
  background: rgba(6, 18, 15, 0.94);
  border-bottom-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}

body[data-theme="animated"] .sidebar {
  background: rgba(7, 22, 17, 0.95);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}

body[data-theme="animated"] .hero-panel {
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line));
  background: #0b2921;
  color: var(--text);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.38);
}

body[data-theme="animated"] .dashboard-panel {
  min-height: 0;
  align-items: flex-start;
  padding: 24px;
}

body[data-theme="animated"] .dashboard-panel .module-grid {
  width: min(980px, 100%);
}

.dashboard-panel .module-grid {
  width: min(720px, 100%);
}

body[data-theme="dark"] .hero-panel {
  background:
    linear-gradient(120deg, rgba(3, 12, 10, 0.96), rgba(8, 72, 58, 0.72));
}

.hero-panel h1 {
  margin: 0;
  max-width: 660px;
  font-size: clamp(2.25rem, 4vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: 0;
}

.hero-panel p {
  max-width: 640px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.82);
}

.hero-panel .eyebrow {
  color: var(--accent);
}

.hero-scoreboard {
  display: grid;
  min-width: min(310px, 100%);
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(3, 18, 14, 0.58);
  padding: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.hero-scoreboard strong {
  font-size: 1.45rem;
  line-height: 1.1;
}

.hero-scoreboard span:not(.sport-pill) {
  color: rgba(255, 255, 255, 0.78);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.stat,
.panel,
.admin-card,
.module-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, white), var(--panel));
  box-shadow: var(--shadow);
}

body[data-theme="dark"] .stat,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .admin-card,
body[data-theme="dark"] .module-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, white), var(--panel));
}

body[data-theme="animated"] .stat,
body[data-theme="animated"] .panel,
body[data-theme="animated"] .admin-card,
body[data-theme="animated"] .module-card {
  border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.stat {
  padding: 16px;
}

.stat strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
}

.stat span {
  color: var(--muted);
  font-size: 0.88rem;
}

.panel,
.admin-card {
  padding: 20px;
}

.profile-settings-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
}

.profile-page {
  display: grid;
  gap: 14px;
  max-width: 900px;
}

.profile-panel {
  display: grid;
  gap: 16px;
}

.profile-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 16px;
}

.profile-card h3 {
  margin: 0 0 12px;
}

.password-card {
  display: grid;
  gap: 12px;
  max-width: 460px;
}

.inline-field-action {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.inline-field-action input {
  flex: 1;
}

.inline-field-action button {
  white-space: nowrap;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.upload-button input {
  display: none;
}

button:disabled,
.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.admin-page {
  display: grid;
  gap: 14px;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.admin-nav {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  padding: 10px;
  box-shadow: var(--shadow);
}

.admin-nav-group {
  display: grid;
  gap: 7px;
}

.admin-nav-group + .admin-nav-group {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 10px;
}

.admin-nav-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 0 8px;
  text-transform: uppercase;
}

.admin-nav-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 10px;
  text-align: left;
}

.admin-nav-button.active,
.admin-nav-button:hover {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--text);
}

.admin-workspace,
.admin-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.module-admin-head .section-title {
  margin-bottom: 10px;
}

.module-admin-tabs {
  margin-bottom: 0;
}

.event-workspace-head .section-title {
  align-items: flex-start;
}

.module-permissions-table {
  margin-top: 16px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-modules .module-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.module-card {
  display: grid;
  min-height: 170px;
  align-content: space-between;
  gap: 18px;
  padding: 16px;
  overflow: hidden;
  position: relative;
  color: var(--text);
}

body[data-theme="light"] .module-card {
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 33, 29, 0.06);
}

body[data-theme="light"] .panel,
body[data-theme="light"] .admin-card,
body[data-theme="light"] .stat {
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 33, 29, 0.06);
}

.module-card::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px auto;
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand);
  opacity: 0.45;
}

body[data-theme="animated"] .module-card::after {
  opacity: 0.75;
  animation: animatedAccentPulse 2.8s ease-in-out infinite;
}

body[data-theme="animated"] .module-card:hover {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  box-shadow: 0 12px 34px rgba(40, 214, 193, 0.12);
}

@keyframes animatedAccentPulse {
  0%, 100% { opacity: 0.38; transform: scaleX(0.72); transform-origin: right; }
  50% { opacity: 0.95; transform: scaleX(1); transform-origin: right; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="animated"],
  body[data-theme="animated"] .module-card::after {
    animation: none;
  }
}

.module-card.state-active {
  border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
}

.module-card.state-teaser {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), var(--panel));
}

body[data-theme="light"] .module-card.state-teaser {
  border-color: #dfe7b6;
  background: #fbfde9;
}

body[data-theme="light"] .module-card.state-teaser h3 {
  color: #26301a;
}

.module-card.state-inactive {
  filter: grayscale(0.38);
  opacity: 0.7;
}

.module-card.state-inactive::after {
  background: var(--muted);
}

.module-card h3 {
  margin: 0 0 7px;
  font-size: 1.04rem;
}

.module-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.module-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.tag {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--panel-soft);
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 800;
}

.state-tag {
  background: color-mix(in srgb, var(--brand) 14%, var(--panel-soft));
  color: var(--text);
}

.minesweeper-panel {
  overflow: hidden;
}

.mine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.mine-difficulty-control {
  display: grid;
  gap: 5px;
}

.mine-difficulty-control > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.difficulty-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
}

.difficulty-pill {
  display: grid;
  gap: 2px;
  min-height: 46px;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  font-size: 0.82rem;
  text-align: left;
}

.difficulty-pill strong { color: inherit; font-size: 0.8rem; }
.difficulty-pill small { opacity: 0.72; font-size: 0.64rem; font-weight: 700; }

.difficulty-pill[data-mine-level="nightmare"] {
  color: #ff9d9d;
}

.difficulty-pill.active {
  background: var(--brand);
  color: #fff;
}

.difficulty-pill[data-mine-level="nightmare"].active { background: #8d2937; color: #fff; }

.mine-daily-history { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 18px 0 10px; }
.mine-daily-history h3 { margin: 0; }
.mine-daily-history select { min-width: 190px; }

@media (max-width: 760px) {
  .mine-difficulty-control { width: 100%; }
  .difficulty-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .mine-daily-history { align-items: stretch; flex-direction: column; }
  .mine-daily-history select { width: 100%; min-width: 0; }
}

.compact-select {
  display: grid;
  gap: 4px;
}

.compact-select span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.compact-select select {
  min-height: 38px;
}

.mine-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.mine-finish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mine-finish.success {
  border-color: color-mix(in srgb, var(--brand) 56%, var(--line));
  background: color-mix(in srgb, var(--brand) 14%, var(--panel-soft));
}

.mine-finish.danger {
  border-color: color-mix(in srgb, var(--danger) 56%, var(--line));
  background: color-mix(in srgb, var(--danger) 12%, var(--panel-soft));
}

.mine-countdown-overlay {
  display: grid;
  place-items: center;
  gap: 2px;
  margin-bottom: 14px;
  min-height: 96px;
  border: 1px solid color-mix(in srgb, var(--brand) 58%, var(--line));
  border-radius: 14px;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--brand) 26%, transparent), transparent 62%),
    var(--panel-soft);
  color: var(--text);
  text-align: center;
}

.mine-countdown-overlay strong {
  font-size: clamp(3.2rem, 8vw, 5.8rem);
  line-height: 0.9;
  color: var(--brand);
  text-shadow: 0 0 24px color-mix(in srgb, var(--brand) 38%, transparent);
}

.mine-countdown-overlay span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mine-summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 12px;
}

.mine-summary strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
}

.mine-summary span {
  color: var(--muted);
  font-size: 0.82rem;
}

.muted-stat {
  opacity: 0.6;
}

.mine-board-wrap {
  --mine-gap: 2px;
  --mine-cell-size: min(30px, calc((100% - ((var(--mine-cols) - 1) * var(--mine-gap))) / var(--mine-cols)));
  overflow-x: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 12px;
  contain: layout paint;
}

.mine-board-wrap.expert {
  --mine-cell-size: min(28px, calc((100% - ((var(--mine-cols) - 1) * var(--mine-gap))) / var(--mine-cols)));
}

.mine-play-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 28%);
  gap: 14px;
  align-items: stretch;
}

.mine-board {
  display: grid;
  width: 100%;
  max-width: 100%;
  gap: var(--mine-gap);
  justify-content: center;
}

.mine-cell {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--brand));
  border-radius: 4px;
  background: var(--panel-soft);
  color: var(--text);
  padding: 0;
  font-size: clamp(0.6rem, calc(var(--mine-cell-size) * 0.52), 0.92rem);
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
}

.mine-cell:hover {
  transform: none;
}

.mine-cell.revealed {
  border-color: color-mix(in srgb, var(--line) 76%, transparent);
  background: var(--table);
  box-shadow: none;
}

.mine-cell.flagged {
  color: var(--accent);
}

.mine-cell.mine {
  background: color-mix(in srgb, var(--danger) 28%, var(--field));
  color: #fff;
}

.mine-cell.admin-mine {
  border-color: color-mix(in srgb, var(--warning) 62%, var(--line));
  background: color-mix(in srgb, var(--warning) 22%, var(--field));
  color: var(--warning);
}

.mine-admin-warning {
  margin: -4px 0 8px;
}

.mine-cell.revealed[data-adjacent="1"] {
  color: #5da8ff;
}

.mine-cell.revealed[data-adjacent="2"] {
  color: #5fd39a;
}

.mine-cell.revealed[data-adjacent="3"] {
  color: #ff9b85;
}

.mine-cell.revealed[data-adjacent="4"],
.mine-cell.revealed[data-adjacent="5"],
.mine-cell.revealed[data-adjacent="6"],
.mine-cell.revealed[data-adjacent="7"],
.mine-cell.revealed[data-adjacent="8"] {
  color: #e0c7ff;
}

.mine-rankings {
  margin-top: 16px;
}

.mine-rankings h3 {
  margin: 0 0 10px;
}

.mine-rank-table {
  min-width: 0;
}

.mine-rank-table td strong,
.mine-rank-table td small {
  display: block;
}

.mine-rank-table td small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 600;
  opacity: 0.58;
}

.mine-rank-table h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.86rem;
  text-transform: uppercase;
}

.daily-rankings-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.rank-footnote {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.58);
  padding: 20px;
}

.modal-backdrop.nonblocking {
  pointer-events: none;
  place-items: start end;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.46) 100%);
  padding: 92px 24px 24px;
}

.modal-backdrop.nonblocking .modal-panel {
  pointer-events: auto;
}

.modal-panel {
  width: min(980px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}

.rankings-modal {
  width: min(900px, calc(100vw - 48px));
}

.rankings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.rankings-modal .mine-rankings {
  margin-top: 0;
}

.word-panel,
.quiz-panel {
  overflow: hidden;
}

.word-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  position: relative;
  min-width: 42px;
  padding-inline: 10px;
}

.icon-button span {
  position: absolute;
  right: -6px;
  top: -7px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
}

.word-board {
  display: grid;
  justify-content: start;
  gap: 8px;
  margin: 18px 0;
  max-width: 100%;
  overflow: hidden;
}

.daily-word-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
  gap: 16px;
  align-items: start;
}

.daily-word-play,
.daily-word-leaderboard,
.word-suggestion-form {
  display: grid;
  gap: 12px;
}

.word-guess-list {
  display: grid;
  gap: 8px;
}

.word-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stat-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 12px 14px;
}

.stat-card strong {
  display: block;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
}

.stat-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.daily-word-guess {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 10px 12px;
}

.daily-word-guess span {
  color: var(--muted);
  font-weight: 900;
}

.daily-word-guess strong {
  overflow-wrap: anywhere;
}

.daily-word-guess.correct {
  border-color: color-mix(in srgb, var(--brand) 54%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--field));
}

.daily-word-guess em,
.word-solved strong {
  color: var(--brand-dark);
  font-style: normal;
  font-weight: 900;
}

.daily-word-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  max-width: 560px;
}

.word-suggestion-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.word-suggestion-form h3,
.daily-word-leaderboard h3 {
  margin: 0;
}

.daily-word-leaderboard h4 {
  margin: 14px 0 8px;
  color: var(--brand-2);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.word-rank-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.word-rank-heading h4 {
  margin: 0;
}

.word-rank-heading button {
  border: 0;
  background: transparent;
  color: var(--brand-dark);
  padding: 3px 0;
  font-size: 0.7rem;
  font-weight: 900;
}

.word-current-streak {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 9px 11px;
}

.word-current-streak span {
  color: var(--muted);
  font-size: 0.75rem;
}

.word-current-streak strong {
  color: var(--brand);
  white-space: nowrap;
}

.word-leaderboard-modal {
  width: min(680px, 94vw);
}

.full-word-rank {
  max-height: min(520px, 70vh);
  overflow-y: auto;
  padding-right: 3px;
}

.daily-word-top-list,
.word-suggestion-list {
  display: grid;
  gap: 8px;
}

.daily-word-top-row,
.word-suggestion-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 9px 10px;
}

.daily-word-top-row small,
.daily-word-top-row em,
.word-suggestion-list span {
  color: var(--muted);
  font-style: normal;
  font-size: 0.82rem;
}

.daily-word-top-row b {
  color: var(--brand-dark);
}

.word-suggestion-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.word-suggestion-list p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}

.word-suggestion-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.word-suggestion-actions button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.78rem;
}

.word-schedule-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px;
  margin: 12px 0;
  background: color-mix(in srgb, var(--field) 72%, transparent);
}

.word-schedule-list article {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
  padding: 6px 0;
}

.word-schedule-list article:last-child {
  border-bottom: 0;
}

.word-schedule-list span {
  color: var(--brand-2);
  font-weight: 900;
}

.word-schedule-list small {
  color: var(--muted);
}

.word-personal-best,
.word-explanation {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 12px;
}

.word-personal-best {
  grid-template-columns: 1fr 1fr;
  margin-top: 14px;
}

.word-personal-best strong {
  grid-column: 1 / -1;
}

.word-personal-best div {
  display: grid;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 8px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

.word-personal-best span,
.word-explanation p {
  margin: 0;
  color: var(--muted);
}

.word-personal-best span {
  color: var(--brand);
  font-size: 1.1rem;
  font-weight: 900;
}

.word-personal-best small {
  color: var(--muted);
  font-size: 0.72rem;
}

.mine-rank-inline-note {
  display: inline-block;
  margin-left: 7px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 500;
  white-space: nowrap;
}

.word-suggestion-modal {
  width: min(720px, 96vw);
}

.word-suggestion-modal .word-suggestions-admin {
  margin: 0;
}

.word-row {
  display: grid;
  --word-gap: clamp(3px, 0.55vw, 8px);
  --word-cell-size: min(48px, calc((100vw - 96px - (var(--word-length, 5) - 1) * var(--word-gap)) / var(--word-length, 5)));
  grid-template-columns: repeat(var(--word-length, 5), var(--word-cell-size));
  gap: var(--word-gap);
  max-width: 100%;
}

.word-cell {
  display: inline-flex;
  width: var(--word-cell-size);
  height: var(--word-cell-size);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  font-size: clamp(0.72rem, calc(var(--word-cell-size) * 0.42), 1.2rem);
  font-weight: 900;
}

.word-row.active .word-cell {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 16%, transparent);
}

.word-cell.correct {
  border-color: transparent;
  background: var(--brand);
  color: #fff;
}

.word-cell.present {
  border-color: transparent;
  background: var(--accent);
  color: #263100;
}

.word-cell.absent {
  opacity: 0.58;
  filter: grayscale(0.55);
}

.word-guess-form {
  position: relative;
  max-width: 248px;
}

.word-guess-form.daily-word-form {
  position: relative;
  max-width: 220px;
}

.word-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  border: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}

.word-guess-form button {
  width: 100%;
}

.word-guess-form.daily-word-form button {
  width: 100%;
}

.word-limit-note,
.word-limit-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  color: var(--muted);
  padding: 9px 12px;
  font-size: 0.82rem;
}

.word-limit-note { margin-bottom: 12px; }
.word-limit-note strong { color: var(--text); }
.word-limit-preview { margin-top: 8px; border-left: 3px solid var(--brand); }

.chat-page {
  display: grid;
  gap: 14px;
}

.chat-page-form {
  max-width: 760px;
}

.chat-page-messages {
  display: grid;
  max-height: 64vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 10px;
}

.chat-page-messages .chat-message {
  max-width: 900px;
}

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

.quiz-question {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  margin: 0 0 14px;
  padding: 14px;
}

.quiz-question legend {
  padding: 0 6px;
  font-weight: 900;
}

.quiz-live-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.quiz-live-head strong {
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 6px 10px;
}

.quiz-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quiz-answer-grid .secondary {
  justify-content: flex-start;
  min-height: 54px;
  text-align: left;
}

.sport-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #263100;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 900;
}

.event-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sports-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.65fr);
  gap: 16px;
  align-items: start;
}

.sports-event-page {
  display: grid;
  gap: 12px;
}

.sports-back-button {
  justify-self: start;
  align-self: start;
  width: auto;
  min-height: 42px;
  padding: 9px 16px;
  line-height: 1;
}

.sports-event-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.event-row > .sport-pill {
  grid-column: 1 / -1;
  padding: 3px 8px;
  font-size: 0.68rem;
}

.event-row:hover,
.event-row.active {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.event-row.status-archived {
  opacity: 0.66;
  filter: grayscale(0.45);
}

.event-row.joined {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 12%, var(--field)), var(--field));
}

.event-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.event-row-main strong,
.event-row-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-row-main small,
.event-row-flags {
  color: var(--muted);
  font-size: 0.74rem;
}

.event-row-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.mini-status {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 3px 7px;
  font-size: 0.68rem;
  font-weight: 800;
}

.mini-status.joined,
.mini-status.new {
  border-color: color-mix(in srgb, var(--brand) 54%, var(--line));
  color: var(--brand-dark);
}

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

.dashboard-events {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sports-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.sports-layout .sports-events {
  grid-template-columns: 1fr;
}

.event-detail {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 16px;
}

.event-detail-empty {
  min-height: 180px;
  display: grid;
  align-content: center;
}

.rules-summary {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 7%, var(--field));
  padding: 12px;
}

.rules-summary span {
  color: var(--muted);
}

.sports-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.sports-filter-bar button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  padding: 7px 12px;
  font-weight: 900;
}

.sports-filter-bar button.active {
  border-color: transparent;
  background: var(--brand);
  color: white;
}

.admin-events {
  margin: 12px 0 16px;
}

.event-card {
  display: grid;
  min-height: 184px;
  align-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--field) 82%, var(--panel-soft)), var(--field));
  color: var(--text);
  padding: 15px;
  text-align: left;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.event-card:hover,
.event-card.active {
  border-color: color-mix(in srgb, var(--brand) 68%, var(--line));
  box-shadow: var(--shadow);
}

.event-card.active {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--brand) 18%, var(--field)), var(--field));
  outline: 2px solid color-mix(in srgb, var(--brand) 72%, transparent);
}

.event-card.status-finished {
  filter: grayscale(0.45);
  opacity: 0.58;
}

.event-card.archived {
  filter: grayscale(0.6);
  opacity: 0.66;
}

.event-card.status-finished:hover,
.event-card.status-finished.active,
.event-card.archived:hover,
.event-card.archived.active {
  opacity: 0.78;
}

.event-card.status-finished .sport-pill {
  background: color-mix(in srgb, var(--muted) 34%, var(--panel-soft));
  color: var(--muted);
}

.event-card.status-finished .event-status {
  color: var(--muted);
}

.event-card.status-draft {
  border-style: dashed;
}

.event-card strong {
  font-size: 1.05rem;
  line-height: 1.2;
}

.event-card span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.event-card-top,
.event-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.event-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-card-actions .secondary,
.event-card-actions .ghost {
  min-height: 34px;
  padding: 7px 11px;
}

.prediction-options {
  margin-top: 8px;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.option-card {
  min-height: 52px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.event-status {
  color: var(--brand-dark);
  font-weight: 900;
}

.event-picker-panel {
  padding-bottom: 22px;
}

.event-summary-strip,
.prediction-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.event-summary-strip div {
  display: grid;
  min-width: 140px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px 12px;
}

.event-summary-strip strong {
  font-size: 1.05rem;
}

.event-summary-strip span {
  color: var(--muted);
  font-size: 0.8rem;
}

.game-day-list {
  display: grid;
  gap: 16px;
}

.game-day h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.friend-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}

.friend-picks span {
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 3px 7px;
}

.module-edit-row {
  display: grid;
  grid-template-columns: 1.1fr minmax(150px, 0.8fr) minmax(220px, 1.4fr) minmax(150px, 0.8fr) auto;
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

.module-edit-row > button {
  align-self: end;
  white-space: nowrap;
}

.module-edit-row > div {
  display: grid;
  gap: 4px;
  padding-top: 4px;
}

.module-edit-row small,
.server-clock {
  color: var(--muted);
}

.fixture-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.fixture-card {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel-soft) 72%, var(--field)), var(--field));
  padding: 15px;
}

.fixture-card.final {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
}

.fixture-card-head,
.fixture-scoreline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fixture-card-head {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.fixture-scoreline {
  color: var(--text);
}

.fixture-scoreline strong {
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--text);
  color: var(--panel);
  padding: 9px 12px;
  font-size: 1.1rem;
}

.score-admin-form {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 7%, var(--field));
  padding: 14px;
}

.score-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.score-admin-grid label {
  display: grid;
  gap: 6px;
}

.score-admin-grid label span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.event-manager-panel {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 14px;
  margin: 18px 0;
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 6%, var(--field));
  padding: 14px;
}

.event-admin-launcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
  padding: 12px;
}

.event-manager-backdrop {
  align-items: start;
  justify-items: center;
  overflow: auto;
  padding: 42px 16px;
}

.event-manager-modal {
  width: min(1180px, 100%);
}

.event-manager-modal .event-manager-panel {
  max-height: calc(100vh - 84px);
  overflow: auto;
  margin: 0;
  box-shadow: var(--shadow-strong);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.event-manager-panel .section-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.event-manager-panel .section-title .secondary {
  align-self: start;
  white-space: nowrap;
}

.event-manager-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin: -4px 0 0;
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--panel-soft));
}

.event-manager-notice span {
  color: var(--muted);
  font-size: 0.9rem;
}

.event-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.event-settings-grid label,
.game-admin-row label,
.event-choice-field {
  display: grid;
  gap: 6px;
}

.event-settings-grid span,
.game-admin-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.choice-control {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 5px;
}

.choice-pill,
.choice-control button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-soft) 72%, var(--field));
  color: var(--muted);
  padding: 6px 11px;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
}

.choice-pill:hover,
.choice-pill.active,
.choice-control button:hover,
.choice-control button.active {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  background: color-mix(in srgb, var(--brand) 16%, var(--field));
  color: var(--text);
  transform: none;
}

.choice-pill.active,
.choice-control button.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 38%, transparent);
}

.radio-card-group {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 5px;
}

.radio-card {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-soft) 72%, var(--field));
  color: var(--muted);
  cursor: pointer;
  padding: 6px 11px;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
}

.radio-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-card:hover,
.radio-card.active,
.radio-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  background: color-mix(in srgb, var(--brand) 16%, var(--field));
  color: var(--text);
}

.scoring-settings {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 70%, transparent);
  padding: 12px;
}

.scoring-settings legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.scoring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.scoring-grid label {
  display: grid;
  gap: 6px;
}

.scoring-grid .scoring-wide {
  grid-column: span 2;
}

.scoring-grid textarea {
  min-height: 110px;
  resize: vertical;
}

.scoring-grid span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.scoring-preview {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 8%, var(--panel-soft));
  padding: 12px;
}

.scoring-preview p {
  margin: 0;
  color: var(--muted);
}

.scoring-preview div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.scoring-preview span {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 10px;
}

.scoring-preview strong {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scoring-preview b {
  color: var(--text);
}

.event-scoring-summary {
  display: grid;
  gap: 10px;
}

.event-scoring-summary .scoring-preview {
  border: 0;
  background: transparent;
  padding: 0;
}

.event-scoring-summary .scoring-preview div {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.event-scoring-summary .scoring-preview span {
  min-height: 68px;
  padding: 9px 10px;
}

.event-scoring-summary .scoring-preview strong {
  font-size: 0.66rem;
}

.backup-actions,
.restore-backup-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.restore-backup-form input[type="file"] {
  max-width: 320px;
}

.game-admin-list {
  display: grid;
  min-width: 0;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 4px;
}

.game-admin-list h4 {
  margin: 4px 0 0;
}

.result-edit-note {
  margin: -4px 0 2px;
  font-size: 0.84rem;
  line-height: 1.45;
}

.event-save-bottom {
  justify-self: end;
  margin-top: 4px;
}

.game-admin-row {
  display: grid;
  min-width: 760px;
  grid-template-columns: minmax(126px, 0.8fr) minmax(104px, 0.6fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px;
}

.text-pick-input {
  min-width: min(280px, 100%);
}

.public-picks {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}

.public-picks-empty {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}

.public-picks-button {
  width: fit-content;
  min-height: 28px;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, var(--field));
  color: var(--brand-dark);
  padding: 5px 9px;
  font-size: 0.78rem;
  font-weight: 900;
}

.public-picks-modal {
  width: min(620px, 100%);
}

.public-picks-modal-list {
  display: grid;
  gap: 8px;
}

.public-picks-modal-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 9px 10px;
}

.exact-pick {
  border-color: color-mix(in srgb, var(--brand) 58%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand) 13%, var(--field)) !important;
  color: var(--brand-dark);
}

.public-picks summary {
  cursor: pointer;
  color: var(--brand-dark);
  font-weight: 900;
}

.public-picks span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px dashed var(--line);
  padding-top: 4px;
}

.leaderboard-panel {
  margin-top: 18px;
}

.leaderboard-page {
  display: grid;
  gap: 12px;
}

.compact-tabs {
  margin-bottom: 0;
}

.leaderboard-head,
.leaderboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.leaderboard-head {
  margin-bottom: 10px;
}

.leaderboard-head h3 {
  margin: 0;
}

.export-link {
  text-decoration: none;
}

.leaderboard-list {
  display: grid;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--table);
}

.leaderboard-row {
  grid-template-columns: 42px minmax(120px, 1fr) 92px 86px;
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}

.leaderboard-row.simple {
  grid-template-columns: 42px minmax(120px, 1fr) 92px;
}

.leaderboard-row:last-child {
  border-bottom: 0;
}

.leaderboard-row span {
  color: var(--muted);
  font-weight: 900;
}

.leaderboard-row b {
  text-align: right;
}

.leaderboard-row small {
  color: var(--muted);
  text-align: right;
}

.advanced-leaderboard {
  --advanced-player-width: 150px;
  --advanced-total-width: 72px;
  max-height: 70vh;
  overflow: auto;
  scrollbar-gutter: stable;
}

.advanced-leaderboard table {
  min-width: max-content;
}

.advanced-leaderboard th,
.advanced-leaderboard td {
  min-width: 74px;
  white-space: normal;
  font-size: 0.72rem;
  vertical-align: top;
}

.advanced-leaderboard thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--table);
  font-size: 0.61rem;
  line-height: 1.1;
}

.advanced-leaderboard .advanced-player-column,
.advanced-leaderboard .advanced-total-column {
  position: sticky;
  background: var(--table);
}

.advanced-leaderboard .advanced-player-column {
  left: 0;
  z-index: 3;
  width: var(--advanced-player-width);
  min-width: var(--advanced-player-width);
  max-width: var(--advanced-player-width);
}

.advanced-leaderboard .advanced-total-column {
  left: var(--advanced-player-width);
  z-index: 3;
  width: var(--advanced-total-width);
  min-width: var(--advanced-total-width);
  max-width: var(--advanced-total-width);
  text-align: center;
  box-shadow: 1px 0 0 var(--line), 10px 0 14px -14px var(--text);
}

.advanced-leaderboard thead .advanced-player-column,
.advanced-leaderboard thead .advanced-total-column {
  z-index: 5;
}

.advanced-game-label,
.advanced-pick {
  display: grid;
  gap: 1px;
  line-height: 1.15;
}

.advanced-game-label b,
.advanced-game-label em {
  overflow: hidden;
  max-width: 78px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-game-label em {
  color: var(--muted);
  font-style: normal;
}

.advanced-game-label small {
  overflow: hidden;
  max-width: 78px;
  color: var(--brand);
  font-size: 0.56rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-leaderboard td small {
  display: block;
  margin-top: 3px;
  color: var(--brand);
  font-size: 0.62rem;
  font-weight: 900;
}

.advanced-leaderboard td.prediction-still-private { color: var(--muted); text-align: center; }
.advanced-leaderboard td.prediction-still-private span { opacity: .5; font-size: .72rem; }
.advanced-leaderboard td.prediction-still-private small { display: block; margin-top: 3px; font-size: .58rem; font-weight: 800; white-space: nowrap; }
.advanced-leaderboard td.prediction-still-private.has-submission span,
.advanced-leaderboard td.prediction-still-private.has-submission small { color: var(--brand); opacity: 1; }
.advanced-leaderboard td.prediction-still-private.missing-submission span,
.advanced-leaderboard td.prediction-still-private.missing-submission small { color: var(--danger, #f07178); opacity: .85; }
.scoring-priority-note { margin: 9px 0 0; color: var(--muted); font-size: .74rem; }

.delete-row-check {
  justify-items: center;
}

.delete-row-check input {
  width: 22px;
  min-height: 22px;
}

.new-row-note {
  align-self: center;
  font-weight: 900;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tab {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  padding: 8px 12px;
  color: var(--muted);
  font-weight: 800;
}

.tab.active {
  border-color: transparent;
  background: var(--brand);
  color: white;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.prediction-day-list {
  display: grid;
  gap: 10px;
}

.prediction-day-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 58%, transparent);
  overflow: hidden;
}

.prediction-day-group summary {
  display: grid;
  grid-template-columns: minmax(130px, auto) auto minmax(170px, 1fr);
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: color-mix(in srgb, var(--field) 76%, var(--panel-soft));
  padding: 11px 13px;
  color: var(--text);
  font-weight: 900;
  transition: background 150ms ease, border-color 150ms ease;
}

.prediction-day-group summary:hover {
  background: color-mix(in srgb, var(--brand) 10%, var(--field));
}

.prediction-day-toggle {
  border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 9%, var(--panel-soft));
  color: var(--brand-dark);
  padding: 4px 9px;
  font-size: 0.72rem;
  line-height: 1;
}

.prediction-day-toggle .close-label,
.prediction-day-group[open] .prediction-day-toggle .open-label {
  display: none;
}

.prediction-day-group[open] .prediction-day-toggle .close-label {
  display: inline;
}

.prediction-day-progress {
  justify-self: end;
  color: color-mix(in srgb, var(--brand-dark) 72%, var(--muted));
  font-size: 0.82rem;
}

.prediction-day-group .table-wrap {
  border-width: 1px 0 0;
  border-radius: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--table);
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.prediction-table {
  table-layout: fixed;
}

.prediction-table th:nth-child(1),
.prediction-table td:nth-child(1) {
  width: 52%;
}

.prediction-table th:nth-child(2),
.prediction-table td:nth-child(2) {
  width: 88px;
  text-align: center;
}

.prediction-table th:nth-child(3),
.prediction-table td:nth-child(3) {
  width: 190px;
}

.fixture-cell {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.fixture-title {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.98rem;
  line-height: 1.25;
}

.fixture-title span {
  color: var(--muted);
  font-size: 0.82em;
  font-weight: 800;
}

.fixture-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.fixture-lock {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 2px 7px;
  font-size: 0.68rem;
  font-weight: 900;
}

.fixture-lock.open {
  border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
  color: var(--brand-dark);
}

.fixture-lock.locked {
  color: var(--muted);
}

.result-cell {
  color: var(--muted);
  font-weight: 900;
}

.prediction-table .text-pick-input {
  width: 100%;
  min-width: 0;
}

.prediction-save-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin: 10px 0;
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--panel-soft));
}

.prediction-save-notice span {
  color: var(--muted);
  font-size: 0.9rem;
}

.prediction-error-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin: 10px 0;
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--panel-soft));
}

.prediction-error-notice span {
  color: var(--muted);
  font-size: 0.9rem;
}

.submitted-summary {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 6%, var(--field));
  padding: 10px 12px;
}

.submitted-summary summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.submitted-summary summary::-webkit-details-marker {
  display: none;
}

.submitted-summary.empty {
  border-style: dashed;
}

.submitted-summary > strong {
  font-size: 0.88rem;
}

.submitted-summary > span {
  color: var(--muted);
  font-size: 0.88rem;
}

.submitted-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 132px;
  overflow: auto;
  padding-right: 2px;
}

.submitted-summary-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 5px 9px;
  font-size: 0.82rem;
}

.submitted-summary-list b {
  overflow: hidden;
  max-width: min(360px, 58vw);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submitted-summary-list em {
  color: var(--brand-dark);
  font-style: normal;
  font-weight: 900;
}

.score-inputs {
  display: grid;
  grid-template-columns: 70px 70px;
  gap: 8px;
  width: max-content;
  max-width: 150px;
}

.score-inputs input {
  width: 70px;
  min-height: 36px;
  text-align: center;
}

.checkbox-field,
.prediction-overtime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.checkbox-field input,
.prediction-overtime input {
  accent-color: var(--brand);
}

.prediction-overtime {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

.winner-select {
  width: min(180px, 100%);
  min-height: 34px;
  margin-top: 8px;
  font-size: 0.86rem;
}

.result-overtime {
  display: block;
  margin-top: 4px;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.leader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: var(--table);
}

.leader + .leader {
  margin-top: 10px;
}

.leader-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.rank {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #263100;
}

.leader small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 500;
}

.leader-score {
  font-size: 1.35rem;
  font-weight: 900;
}

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

.form-grid label {
  display: grid;
  gap: 6px;
}

.form-grid label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.admin-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.admin-card-wide {
  grid-column: 1 / -1;
}

.admin-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.admin-section-head {
  margin-bottom: 4px;
}

.module-edit-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(140px, 0.5fr) auto;
  gap: 10px;
  align-items: end;
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.module-edit-row:first-of-type {
  border-top: 0;
}

.module-edit-row label {
  display: grid;
  gap: 6px;
}

.module-edit-row label span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.module-edit-row textarea {
  min-height: 72px;
  resize: vertical;
}

.event-admin-list,
.user-admin-list {
  display: grid;
  gap: 8px;
}

.event-admin-row,
.user-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 10px;
}

.user-admin-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.user-search {
  margin-bottom: 10px;
}

.user-admin-main {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.user-admin-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.user-status-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  padding: 3px 7px;
  font-size: 0.72rem;
  font-weight: 900;
}

.user-status-chip.active {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
  color: var(--brand-dark);
}

.user-status-chip.disabled {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
  color: var(--danger);
}

.user-status-chip.warning {
  border-color: color-mix(in srgb, var(--warning) 48%, var(--line));
  color: var(--warning);
}

.user-admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.user-admin-actions .secondary {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.82rem;
}

@media (min-width: 980px) {
  .user-admin-row {
    grid-template-columns: minmax(150px, 1fr) minmax(0, auto);
  }

  .user-admin-actions {
    justify-content: flex-end;
  }
}

.event-admin-main,
.event-admin-meta,
.event-admin-actions,
.manager-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.event-admin-managers {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.manager-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 5px 8px;
  font-size: 0.8rem;
  font-weight: 800;
}

.manager-chip button {
  min-height: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  padding: 0;
}

.event-admin-row strong,
.user-admin-row strong {
  display: block;
}

.event-admin-row small,
.user-admin-row small,
.muted {
  color: var(--muted);
}

.auth-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  margin-top: 16px;
}

.module-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.module-toggle:last-child {
  border-bottom: 0;
}

.module-toggle strong {
  display: block;
}

.module-toggle small {
  color: var(--muted);
}

.empty {
  border: 1px dashed #bdd3ca;
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 18px;
  color: var(--muted);
}

.notice {
  border-left: 4px solid var(--brand);
  border-radius: 7px;
  background: var(--panel-soft);
  padding: 12px 14px;
  color: var(--text);
}

.warning {
  color: var(--warning);
  font-weight: 800;
}

@media (max-width: 900px) {
  .prediction-day-group summary {
    grid-template-columns: 1fr auto;
  }

  .prediction-day-progress {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .login-panel,
  .app-grid,
  .admin-layout,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-nav {
    position: static;
    display: flex;
    overflow-x: auto;
  }

  .admin-nav-group {
    display: flex;
    gap: 8px;
  }

  .admin-nav-group + .admin-nav-group {
    border-top: 0;
    border-left: 1px solid var(--line);
    margin-top: 0;
    padding-top: 0;
    padding-left: 10px;
  }

  .admin-nav-label {
    display: none;
  }

  .admin-nav-button {
    min-width: 150px;
  }

  .login-art {
    min-height: 360px;
  }

  .sidebar {
    position: static;
    display: flex;
    overflow-x: auto;
  }

  .sidebar-nav {
    display: flex;
    gap: 8px;
  }

  .sidebar-chat {
    display: none;
  }

  .nav-button {
    min-width: 170px;
  }

  .module-grid,
  .module-edit-row,
  .profile-settings-grid,
  .daily-word-layout,
  .sports-layout,
  .score-admin-grid,
  .event-settings-grid,
  .game-admin-row,
  .stat-strip,
  .auth-grid,
  .event-card-grid,
  .dashboard-events,
  .sports-events,
  .fixture-grid,
  .form-grid,
  .option-grid {
    grid-template-columns: 1fr;
  }

  .event-row,
  .admin-event-row {
    grid-template-columns: 1fr;
  }

  .event-row-flags {
    justify-content: flex-start;
  }

  .rankings-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 620px) {
  .topbar,
  .hero-panel,
  .section-title {
    align-items: stretch;
    flex-direction: column;
  }

  .top-actions {
    width: 100%;
    justify-content: space-between;
  }

  .brand-logo {
    width: min(230px, 72vw);
  }

  .hero-scoreboard {
    min-width: 0;
  }

  .event-card {
    min-height: 160px;
  }

  .inline-field-action {
    flex-direction: column;
  }

  .pref-controls {
    width: 100%;
  }

  .pref-controls label {
    flex: 1;
  }

  .login-form,
  .login-art {
    padding: 24px;
  }

  th,
  td {
    padding: 10px;
  }
}

.public-blog-shell {
  min-height: 100vh;
  padding: 22px;
}

.public-blog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 980px;
  margin: 0 auto 16px;
}

.blog-page {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  justify-self: stretch;
}

.blog-list,
.blog-admin-list {
  display: grid;
  gap: 12px;
}

.blog-list {
  grid-template-columns: 1fr;
}

.blog-admin-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(420px, 1.25fr);
  gap: 14px;
  align-items: start;
}

.blog-post,
.blog-admin-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 14px;
}

.blog-post {
  width: 100%;
  min-width: 0;
}

.blog-admin-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
}

.blog-admin-list article.active {
  border-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
}

.blog-admin-pick {
  min-height: auto;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  text-align: left;
  display: grid;
  gap: 3px;
}

.blog-admin-pick:hover {
  color: var(--brand);
  transform: none;
}

.blog-admin-pick span,
.blog-admin-pick small {
  color: var(--muted);
  font-size: 0.74rem;
}

.blog-editor {
  display: grid;
  gap: 10px;
}

.blog-format-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-format-toolbar button {
  min-height: 34px;
  min-width: 42px;
  padding: 7px 10px;
}

.blog-post h3 {
  margin: 6px 0;
}

.blog-post-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blog-title-link {
  min-height: auto;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  text-align: left;
  font: inherit;
}

.blog-title-link:hover {
  color: var(--brand);
  transform: none;
}

.blog-body {
  margin: 14px 0;
  line-height: 1.65;
}

.blog-content-image { display: block; width: auto; max-width: min(100%, 1100px); height: auto; max-height: 80vh; margin: 14px auto; border-radius: 6px; object-fit: contain; }
.blog-media-upload { cursor: pointer; }
.blog-media-upload input { display: none; }
.blog-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.blog-media-item { display: grid; min-width: 0; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.blog-media-item > img { width: 100%; height: 150px; border-radius: 5px; background: var(--panel-soft); object-fit: cover; }
.blog-media-item > div:not(.blog-media-actions) { display: grid; min-width: 0; gap: 3px; }
.blog-media-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-media-item small { color: var(--muted); }
.blog-media-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-media-actions button { flex: 1 1 auto; padding-inline: 9px; }

.blog-comments summary {
  cursor: pointer;
  font-weight: 900;
}

.blog-body u,
.blog-body s,
.blog-body em,
.blog-body strong {
  color: var(--text);
}

.blog-comment-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.blog-comment-list div {
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}

.blog-comment-list time {
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.76rem;
}

.blog-comment-form,
.poker-page {
  display: grid;
  gap: 12px;
}

.poker-room-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-game-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.card-game-choice { display: grid; min-width: 0; min-height: 92px; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--text); padding: 11px; text-align: left; }
.card-game-choice:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); background: color-mix(in srgb, var(--brand) 7%, var(--field)); }
.card-game-choice.active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 13%, var(--field)); box-shadow: inset 3px 0 0 var(--brand); }
.card-game-glyph { grid-row: 1 / 3; display: grid; width: 34px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--brand); font-size: 1.25rem; }
.card-game-choice-copy { display: grid; min-width: 0; gap: 2px; }
.card-game-choice-copy strong { overflow: hidden; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.card-game-choice-copy small { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.card-game-choice-meta { color: var(--muted); font-size: .66rem; font-weight: 800; }

@media (max-width: 900px) {
  .card-game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .card-game-picker { grid-template-columns: 1fr; }
  .card-game-choice { min-height: 74px; }
  .card-room-list article { grid-template-columns: minmax(0, 1fr) auto; }
  .card-room-row-actions { grid-column: 1 / -1; }
}

.card-room-panel {
  margin-bottom: 4px;
}

.card-room-list article { grid-template-columns: minmax(0, 1fr) auto auto; }
.card-room-list article > .tag { align-self: center; }

.card-room-list article.active {
  border-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
}

.card-room-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 480px) {
  .card-room-list article { grid-template-columns: minmax(0, 1fr) auto; }
  .card-room-row-actions { grid-column: 1 / -1; }
}

.card-room-empty {
  border: 1px dashed var(--line);
}

.poker-lobby {
  margin-bottom: 12px;
}

.poker-settings-form {
  margin-bottom: 12px;
}

.poker-settings-form small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.card-room-form.is-hidden,
.texas-room-form.is-hidden {
  display: none;
}

.poker-room-list button.active {
  border-color: var(--brand);
  color: var(--brand);
}

.poker-table {
  position: relative;
  min-height: 560px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: 14px;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--brand) 14%, var(--panel)), var(--field));
  padding: 18px;
  overflow: hidden;
}

.poker-felt {
  position: absolute;
  inset: 108px 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  border: 10px solid color-mix(in srgb, var(--brand) 35%, #0a231f);
  border-radius: 999px;
  background: radial-gradient(circle, #0c5f4d, #073229 72%);
  box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.42), 0 18px 50px rgba(0, 0, 0, 0.22);
}

.poker-felt::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.poker-pot,
.poker-community {
  position: relative;
  z-index: 1;
  text-align: center;
}

.poker-pot {
  border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, #001b16 72%, transparent);
  padding: 8px 14px;
  font-weight: 900;
}

.poker-seat {
  position: absolute;
  width: 150px;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, #000 18%, var(--panel));
  padding: 10px;
  text-align: center;
}

.poker-seat:not(.occupied) {
  display: none;
}

.poker-seat-badges {
  position: absolute;
  top: -10px;
  right: 8px;
  display: flex;
  gap: 3px;
}

.poker-blind-chip {
  position: absolute;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 28%, #05110f);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.poker-blind-0 {
  top: 22%;
  left: 42%;
}

.poker-blind-1 {
  top: 24%;
  right: 22%;
}

.poker-seat-badges span {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 50%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 22%, var(--panel));
  color: var(--text);
  font-size: 0.64rem;
  font-weight: 900;
}

.poker-seat.folded {
  opacity: 0.55;
}
.card-seat-action { display: block; margin-top: 4px; color: var(--brand); font-size: .66rem; font-weight: 900; }
.card-dealer-chip { position: absolute; right: -8px; top: -9px; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #e7c46a; border-radius: 50%; background: #17201e; color: #e7c46a; font-size: .68rem; font-weight: 950; }
.card-dealer-inline { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #e7c46a; border-radius: 50%; color: #e7c46a; font-size: .62rem; font-style: normal; font-weight: 950; }

.poker-seat.current-turn {
  border-color: #e9867f;
  background: color-mix(in srgb, #8f2d2d 24%, var(--panel));
  box-shadow: 0 0 0 2px color-mix(in srgb, #e9867f 22%, transparent), 0 14px 30px rgba(0, 0, 0, 0.32);
}
.poker-seat-metrics { display: grid; gap: 1px; line-height: 1.25; }
.poker-seat-blind { position: absolute; top: -10px; right: -8px; z-index: 4; border: 1px solid #e7c46a; border-radius: 999px; background: #17201e; color: #e7c46a; padding: 3px 6px; font-size: .61rem; font-style: normal; font-weight: 950; box-shadow: 0 5px 12px #0007; }
.compact-own-player .poker-seat-blind { left: auto; right: -7px; top: -7px; }
.turn-waiting-badge { display: inline-flex; align-items: center; border: 1px solid #e9867f; border-radius: 999px; background: color-mix(in srgb, #8f2d2d 42%, var(--field)); color: #ffd8d4; padding: 3px 7px; font-size: .58rem; font-style: normal; font-weight: 950; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.poker-seat .turn-waiting-badge { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); }

.poker-last-action {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--brand) 58%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 28%, #05110f);
  color: var(--text);
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  animation: poker-action-pop 0.28s ease-out;
}

@keyframes poker-action-pop {
  from {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.poker-seat-0 { left: 50%; top: 14px; transform: translateX(-50%); }
.poker-seat-1 { right: 50px; top: 74px; }
.poker-seat-2 { right: 18px; top: 50%; transform: translateY(-50%); }
.poker-seat-3 { right: 50px; bottom: 74px; }
.poker-seat-4 { left: 50%; bottom: 14px; transform: translateX(-50%); }
.poker-seat-5 { left: 50px; bottom: 74px; }
.poker-seat-6 { left: 18px; top: 50%; transform: translateY(-50%); }
.poker-seat-7 { left: 50px; top: 74px; }

.poker-coming-soon {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  max-width: min(560px, 86%);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--muted);
  padding: 10px 16px;
  text-align: center;
  font-weight: 800;
}

.playing-card {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 64px;
  margin: 3px;
  border: 1px solid rgba(5, 12, 11, 0.28);
  border-radius: 6px;
  background: linear-gradient(145deg, #ffffff 0%, #f5f7f7 54%, #e4e9e8 100%);
  color: #111817;
  font-weight: 900;
  box-shadow: 0 7px 12px rgba(0, 0, 0, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.62);
  vertical-align: middle;
}

.playing-card.red {
  color: #c1122f;
}

.playing-card.black {
  color: #111817;
}

.card-corner {
  position: absolute;
  display: grid;
  justify-items: center;
  line-height: 0.86;
  font-size: 0.78rem;
}

.card-corner b {
  font-size: 0.82rem;
}

.card-corner em {
  font-style: normal;
  font-size: 0.74rem;
}

.card-corner.top {
  top: 5px;
  left: 5px;
}

.card-corner.bottom {
  right: 5px;
  bottom: 5px;
  transform: rotate(180deg);
}

.card-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  line-height: 1;
}

.playing-card.card-back {
  border-color: color-mix(in srgb, var(--brand) 44%, #03110e);
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--brand) 32%, transparent) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--brand) 34%, #06211c) 0 5px, #071714 5px 10px);
  box-shadow: 0 7px 12px rgba(0, 0, 0, 0.28), inset 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.playing-card.card-back span {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 4px;
}

.poker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.poker-table-controls {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  display: grid;
  gap: 8px;
  width: min(680px, calc(100% - 48px));
  transform: translateX(-50%);
}

.poker-turn-indicator {
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--field) 88%, transparent);
  color: var(--muted);
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 900;
}

.poker-control-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.poker-control-buttons button {
  min-height: 38px;
  padding: 8px 12px;
}

.poker-log {
  color: var(--muted);
  font-size: 0.86rem;
}

.mine-cell.disabled-shape {
  visibility: hidden;
}

.mine-room-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
  margin-bottom: 14px;
}

.mine-room-list,
.mine-room-players,
.mine-room-recent {
  display: grid;
  gap: 8px;
}

.mine-room-list article,
.mine-room-players article,
.mine-room-recent article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 10px;
}

.mine-room-list article {
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  padding: 8px 10px;
}

.mine-room-recent article > div { display: grid; gap: 3px; }
.mine-replay-modal { width: min(1100px, calc(100vw - 32px)); }
.mine-replay-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.mine-replay-toolbar > span { margin-right: auto; color: var(--brand); font-size: 1.25rem; font-weight: 900; }
.mine-replay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; max-height: 70vh; overflow: auto; }
.mine-replay-grid article { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--field); padding: 10px; }
.mine-replay-grid h4 { margin: 0 0 8px; }
.mine-replay-board { display: grid; width: max-content; gap: 2px; margin-inline: auto; }
.mine-replay-board span { display: grid; width: 12px; height: 12px; place-items: center; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 2px; background: var(--panel-soft); color: var(--text); font-size: 8px; font-weight: 900; }
.mine-replay-board span.revealed { background: var(--field); }
.mine-replay-board span.flagged { background: color-mix(in srgb, var(--accent) 35%, var(--panel)); color: var(--accent); }

.mine-room-list .secondary {
  min-height: 38px;
  padding: 8px 14px;
}

.mine-room-players {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.mine-room-sidebar {
  align-content: start;
  grid-template-columns: 1fr;
  max-height: 100%;
  overflow: auto;
}

.mine-room-players article {
  grid-template-columns: 1fr;
}

.mine-result-overlay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  padding: 9px 14px;
  font-weight: 900;
}

.mine-result-overlay.success {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  box-shadow: inset 4px 0 0 var(--brand);
}

.mine-result-overlay.danger {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--line));
  box-shadow: inset 4px 0 0 var(--danger);
}

/* v1.06 navigation groups */
.nav-group {
  border: 1px solid transparent;
  border-radius: 7px;
}

.nav-group[open] {
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel-soft) 70%, transparent);
}

.nav-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: 10px;
  color: var(--muted);
  font-weight: 900;
}

.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: "+"; color: var(--brand); }
.nav-group[open] summary::after { content: "−"; }
.nav-group summary small,
.nav-button small { margin-left: auto; color: var(--warning); font-size: 0.58rem; text-transform: uppercase; }
.nav-group > div { display: grid; gap: 3px; padding: 0 5px 5px; }
.nav-group .nav-button { padding-left: 16px; font-size: 0.9rem; }

.navigation-group-editor,
.navigation-module-editor {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.navigation-group-editor article,
.navigation-module-editor article {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) 80px 110px auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
}

.navigation-module-editor article { grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) 90px; }

/* Memory sequence */
.memory-page { width: min(420px, 100%); max-width: none; margin-inline: auto; }
.memory-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.race-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.memory-stats > div,
.race-stats > div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.memory-stats strong,
.race-stats strong { color: var(--brand); font-size: 1.5rem; }
.memory-stats span,
.race-stats span { color: var(--muted); font-size: 0.75rem; }
.memory-board { width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px auto 24px; }
.memory-tile { min-width: 0; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--brand) 9%, var(--field)); color: transparent; transition: transform 100ms ease, background 120ms ease, box-shadow 120ms ease; }
.memory-tile:disabled { opacity: 1; }
.memory-tile.lit { transform: scale(0.96); background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent), 0 0 30px color-mix(in srgb, var(--brand) 42%, transparent); }
.memory-tile:active { transform: scale(.96); }
.memory-ranks { max-width: 640px; margin-inline: auto; }

/* Pointer race */
.racing-page { width: min(1120px, 100%); max-width: 1120px; margin-inline: auto; }
.race-track-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.race-track-picker button { display: flex; min-width: 0; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--muted); padding: 10px 12px; text-align: left; }
.race-track-picker button span { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: var(--panel-soft); color: var(--text); font-size: 0.75rem; font-weight: 800; }
.race-track-picker button.active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--field)); color: var(--text); }
.race-canvas-wrap { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #07120f; }
#raceCanvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.race-overlay { position: absolute; inset: 0; display: none; place-items: center; background: color-mix(in srgb, #07120f 78%, transparent); color: white; font-size: 2rem; font-weight: 900; }
.race-overlay.show { display: grid; }
.race-overlay > div { display: grid; justify-items: center; gap: 10px; text-align: center; }
.race-overlay > div span { color: #ffd4d4; font-size: 0.9rem; font-weight: 700; }
.race-overlay.danger { background: color-mix(in srgb, #3b0909 86%, transparent); }
.race-status { display: flex; min-height: 34px; align-items: center; justify-content: center; opacity: 0; transform: translateY(-4px); border: 1px solid transparent; border-radius: 7px; color: var(--muted); padding: 6px 12px; font-size: 0.9rem; font-weight: 800; pointer-events: none; transition: opacity 150ms ease, transform 150ms ease, border-color 150ms ease, background 150ms ease; }
.race-status.show { opacity: 1; transform: translateY(0); border-color: #a94646; background: color-mix(in srgb, #3b0909 84%, var(--panel)); color: #ffd7d7; }
.race-mode-picker { display: flex; gap: 8px; margin: 0 0 14px; }
.race-mode-picker button { border: 1px solid var(--line); border-radius: 7px; background: var(--field); color: var(--muted); padding: 10px 14px; font-weight: 800; }
.race-mode-picker button.active { border-color: var(--brand); background: var(--brand); color: #fff; }
.race-preview-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; border: 1px solid #d4ad3a; border-radius: 7px; background: color-mix(in srgb, #d4ad3a 12%, var(--field)); color: var(--text); padding: 9px 12px; font-weight: 700; }
.race-admin-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.race-admin-list .race-admin-track { display: grid; gap: 8px; min-height: 148px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); color: var(--text); padding: 12px; text-align: left; }
.race-admin-list .race-admin-track:hover { border-color: var(--accent); transform: translateY(-1px); }
.race-admin-track-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); font-size: .88rem; }
.race-admin-track-head em { border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; color: var(--muted); font-size: .66rem; font-style: normal; text-transform: uppercase; }
.race-admin-track-meta, .race-admin-track > small { color: var(--muted); font-size: .72rem; }
.race-admin-podium { display: grid; gap: 3px; border-block: 1px solid var(--line); padding-block: 7px; color: var(--muted); font-size: .72rem; }
.race-admin-podium > span { display: flex; justify-content: space-between; gap: 8px; }
.race-admin-podium b { color: var(--text); }
.race-admin-podium i { color: var(--accent); font-style: normal; }
@media (max-width: 620px) { .race-preview-banner { align-items: stretch; flex-direction: column; } }
.race-editor-history { display: flex; flex-wrap: wrap; gap: 7px; }
.race-editor-history button:disabled { opacity: .42; }
.race-editor-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.race-editor-toolbar button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--field); color: var(--text); padding: 9px 11px; text-align: left; }
.race-editor-toolbar button strong { grid-row: 1 / 3; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 6px; background: var(--panel-soft); color: var(--brand); font-size: 1.15rem; }
.race-editor-toolbar button span { font-weight: 850; }
.race-editor-toolbar button small { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.race-editor-toolbar button.active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--field)); box-shadow: inset 0 -2px 0 var(--brand); }
.race-editor-toolbar button.active strong { background: var(--brand); color: #fff; }
.race-editor-wrap { position: relative; overflow: hidden; margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: #07120f; }
#raceEditorCanvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.race-editor-wrap.mode-edit #raceEditorCanvas { cursor: grab; }
.race-editor-wrap.mode-edit #raceEditorCanvas:active { cursor: grabbing; }
.race-editor-wrap.mode-width #raceEditorCanvas { cursor: cell; }
.race-editor-wrap.mode-delete #raceEditorCanvas { cursor: not-allowed; }
.race-width-field > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.race-width-field output { color: var(--text); font-weight: 850; }
.race-width-field .text-button { min-height: 26px; padding: 3px 7px; font-size: .7rem; }
.race-editor-help { position: absolute; left: 10px; bottom: 10px; border-radius: 6px; background: rgb(2 15 12 / .86); color: #c9ded8; padding: 6px 9px; font-size: .72rem; pointer-events: none; }
.race-editor-validation { margin: 10px 0; border-left: 3px solid var(--brand); padding: 7px 10px; color: var(--muted); }
.race-editor-validation.error { border-color: #ff7878; color: #ffb0b0; }
.race-editor-validation.ok { color: var(--brand); }
.race-hall { margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); padding: 14px; }
.race-hall > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.race-hall span { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 9px; }

@media (max-width: 720px) {
  .race-track-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .race-stats { grid-template-columns: 1fr; }
  .race-hall > div { grid-template-columns: 1fr; }
  .race-canvas-wrap { overflow-x: auto; }
  #raceCanvas { width: 760px; max-width: none; }
  .race-editor-toolbar { grid-template-columns: 1fr; }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .race-editor-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Shared card-game interaction */
.card-game-center { position: absolute; inset: 24% 20%; display: grid; place-content: center; justify-items: center; gap: 9px; text-align: center; }
.card-game-hand { display: block; max-width: min(760px, 88vw); overflow: visible; padding: 30px 10px 9px; position: relative; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--field) 94%, transparent); }
.card-hand-cards { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 4px; overflow: visible; }
.card-hand-label { position: absolute; top: 6px; left: 10px; color: var(--muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.card-game-hand .card-hand-cards > button { min-width: 48px; padding: 0; border: 0; background: transparent; transform-origin: bottom; }
.card-game-hand.is-active .card-hand-cards > button:hover { transform: translateY(-8px); }
.card-game-hand.is-waiting .card-hand-cards > button { cursor: default; opacity: 0.78; }
.durak-table { display: flex; gap: 8px; align-items: center; }
.durak-table > div { position: relative; display: grid; grid-template-columns: 34px 34px; border: 1px solid transparent; border-radius: 7px; padding: 4px; }
.durak-table > div.is-open { border-color: #e9867f; background: color-mix(in srgb, #8f2d2d 18%, transparent); }
.durak-table > div > small { position: absolute; left: 2px; top: -12px; color: var(--muted); font-size: .58rem; }
.durak-table > div > b { display: grid; place-items: center; color: #e9867f; }
.durak-table > div .playing-card:last-child { transform: translate(8px, 12px); }
.durak-trump { display: flex; align-items: center; justify-content: center; gap: 10px; }
.durak-trump > strong { display: grid; gap: 2px; color: var(--muted); font-size: 0.7rem; text-align: left; text-transform: uppercase; }
.durak-trump > strong span { font-size: 1rem; text-transform: none; }
.durak-trump > strong span.red { color: #e24646; }
.durak-trump > strong span.black { color: var(--text); }
.durak-trump .playing-card { width: 36px; height: 50px; }
.durak-deck-info { display: flex; align-items: center; gap: 5px; }
.durak-deck-info > .card-back { width: 38px; height: 54px; }
.durak-deck-info > b { margin-right: 10px; color: var(--brand); }
.card-game-notice { position: absolute; left: 50%; top: 18px; z-index: 8; width: min(520px, calc(100% - 32px)); transform: translateX(-50%); border: 1px solid #ff8b82; border-radius: 8px; background: color-mix(in srgb, #7b1717 88%, var(--panel)); color: #fff; padding: 10px 14px; box-shadow: 0 12px 28px rgba(0,0,0,.32); text-align: center; font-weight: 800; animation: cardNoticeIn 160ms ease-out; }
@keyframes cardNoticeIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.uno-color { width: 22px; height: 22px; border: 3px solid white; border-radius: 50%; }
.uno-discard-pile { position: relative; width: 92px; height: 92px; margin: 4px auto 8px; }
.uno-discard-card { position: absolute; left: 50%; top: 42%; display: block; transform-origin: center; }
.uno-discard-card .playing-card { width: 48px; height: 68px; }
.uno-discard-under { transform: translate(-62%, -50%) rotate(-9deg); opacity: .72; }
.uno-discard-top { z-index: 2; transform: translate(-35%, -42%) rotate(7deg); filter: drop-shadow(0 7px 8px rgba(0,0,0,.38)); }
.uno-discard-pile small { position: absolute; left: 50%; bottom: -8px; z-index: 3; width: max-content; max-width: 150px; transform: translateX(-50%); color: var(--muted); font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uno-discard-pile small b { color: var(--text); }
.uno-R { background: #dc2929; } .uno-G { background: #159447; } .uno-B { background: #1674c8; } .uno-Y { background: #e5ae09; }
.uno-card { display: grid; place-items: center; overflow: hidden; border: 2px solid #f7f7f2; background: #171b1a; color: #fff; font-weight: 1000; box-shadow: 0 2px 5px rgba(0,0,0,.32); }
.uno-card-R { background: #d92929; } .uno-card-G { background: #159447; } .uno-card-B { background: #1674c8; } .uno-card-Y { background: #e1aa08; }
.uno-card-W { background: #171b1a; }
.uno-card-oval { display: grid; width: 76%; height: 76%; place-items: center; border-radius: 50%; background: rgba(255,255,255,.94); color: inherit; transform: rotate(-24deg); }
.uno-card-oval b { transform: rotate(24deg); font-size: 1.45rem; line-height: 1; text-shadow: none; }
.uno-card-R .uno-card-oval b { color: #d92929; } .uno-card-G .uno-card-oval b { color: #159447; } .uno-card-B .uno-card-oval b { color: #1674c8; } .uno-card-Y .uno-card-oval b { color: #b47f00; }
.uno-card-corner { position: absolute; z-index: 3; color: #fff; font-size: .56rem; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.uno-card-corner.top { top: 4px; left: 4px; }
.uno-card-corner.bottom { right: 4px; bottom: 4px; transform: rotate(180deg); }
.uno-wild-mark { position: relative; display: grid; width: 70%; aspect-ratio: 1; grid-template-columns: 1fr 1fr; overflow: hidden; border: 2px solid #fff; border-radius: 50%; transform: rotate(-24deg); }
.uno-wild-mark i:nth-child(1) { background: #d92929; }
.uno-wild-mark i:nth-child(2) { background: #1674c8; }
.uno-wild-mark i:nth-child(3) { background: #e1aa08; }
.uno-wild-mark i:nth-child(4) { background: #159447; }
.uno-wild-mark b { position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(24deg); color: #fff; font-size: 1rem; text-shadow: 0 2px 2px #000; }
.uno-value-skip .uno-card-oval b { font-size: 1.7rem; }
.uno-value-rev .uno-card-oval b { font-size: 1.65rem; }
.uno-value-d2 .uno-card-oval b { font-size: 1.15rem; }
.card-sort-button { position: absolute; top: 4px; right: 7px; min-height: 22px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); color: var(--muted); padding: 2px 8px; font-size: .66rem; font-weight: 800; }
.uno-hand .card-hand-cards { gap: 2px; }
.uno-hand .card-hand-cards > button { flex: 0 1 46px; min-width: 30px; }
.uno-hand .playing-card { width: min(46px, 100%); }
.uno-direction { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); color: var(--brand); font-size: 1.55rem; font-weight: 1000; }
.uno-color-modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; border-radius: inherit; background: rgba(2, 14, 11, .78); backdrop-filter: blur(3px); }
.uno-color-modal > div { width: min(360px, calc(100% - 28px)); border: 1px solid var(--brand); border-radius: 8px; background: var(--panel); padding: 18px; text-align: center; box-shadow: 0 18px 46px #0009; }
.uno-color-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }
.uno-color-choice { min-height: 58px; border: 2px solid rgba(255,255,255,.75); border-radius: 7px; color: white; font-weight: 1000; text-shadow: 0 1px 2px #000; }
.card-move-animation { position: absolute; left: 50%; top: 50%; z-index: 15; display: grid; justify-items: center; gap: 3px; pointer-events: none; animation: unoCardToCenter .85s cubic-bezier(.2,.75,.25,1) both; }
.card-move-animation span { border-radius: 999px; background: var(--field); color: var(--text); padding: 3px 7px; font-size: .65rem; font-weight: 900; }
.card-action-token { min-width: 76px; border: 2px solid var(--brand); border-radius: 999px; background: var(--field); color: var(--brand); padding: 10px 14px; text-align: center; box-shadow: 0 8px 22px #0008; }
.card-move-animation.from-own { --uno-x: 0px; --uno-y: 240px; }
.card-move-animation.from-slot-0 { --uno-x: 0px; --uno-y: -260px; }
.card-move-animation.from-slot-1, .card-move-animation.from-slot-2, .card-move-animation.from-slot-3 { --uno-x: 330px; --uno-y: -120px; }
.card-move-animation.from-slot-4, .card-move-animation.from-slot-5, .card-move-animation.from-slot-6 { --uno-x: -330px; --uno-y: -120px; }
@keyframes unoCardToCenter { from { opacity: .15; transform: translate(calc(-50% + var(--uno-x)), calc(-50% + var(--uno-y))) scale(.8) rotate(-8deg); } 70% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -50%) scale(1.08) rotate(0); } }
.durak-transfer-notice { position: absolute; left: 50%; top: 18px; z-index: 8; display: flex; max-width: calc(100% - 36px); align-items: center; gap: 8px; transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--field) 94%, transparent); padding: 6px 11px; box-shadow: 0 8px 22px rgba(0,0,0,.25); font-size: .75rem; white-space: nowrap; }
.durak-transfer-notice strong { color: var(--brand); }
.durak-transfer-notice span { overflow: hidden; text-overflow: ellipsis; }

/* Shared player-perspective card table */
.poker-table { min-height: 700px; }
.poker-felt { inset: 105px 170px 185px; }
.card-table-opponents { display: contents; }
.poker-seat.opponent-slot-0 { left: 50%; top: 14px; transform: translateX(-50%); }
.poker-seat.opponent-slot-1 { right: 54px; top: 66px; transform: none; }
.poker-seat.opponent-slot-2 { right: 18px; top: 50%; transform: translateY(-58%); }
.poker-seat.opponent-slot-3 { right: 54px; bottom: 184px; transform: none; }
.poker-seat.opponent-slot-4 { left: 54px; bottom: 184px; transform: none; }
.poker-seat.opponent-slot-5 { left: 18px; top: 50%; transform: translateY(-58%); }
.poker-seat.opponent-slot-6 { left: 54px; top: 66px; transform: none; }
.card-table-own-player { position: absolute; left: 50%; bottom: 16px; z-index: 5; display: flex; width: min(620px, calc(100% - 420px)); min-height: 130px; align-items: center; justify-content: center; gap: 14px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--panel) 94%, transparent); padding: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.card-table-own-player.current-turn { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent), 0 12px 28px rgba(0,0,0,.28); }
.card-table-own-player.current-turn { border-color: #e9867f; background: color-mix(in srgb, #8f2d2d 18%, var(--panel)); }
.own-player-summary { display: grid; min-width: 110px; gap: 3px; text-align: center; }
.own-player-summary span { color: var(--muted); font-size: .78rem; }
.own-player-summary small { color: var(--brand); font-weight: 900; }
.compact-own-player { padding-top: 22px; }
.compact-own-player .own-player-summary { position: absolute; left: 10px; top: -15px; z-index: 2; display: flex; min-width: 0; max-width: calc(100% - 20px); align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); padding: 5px 10px; white-space: nowrap; }
.compact-own-player .own-player-summary small { overflow: hidden; text-overflow: ellipsis; }
.compact-own-player .card-game-hand { width: 100%; }
.own-poker-cards { display: flex; justify-content: center; }
.card-table-own-player .card-game-hand { width: auto; max-width: 100%; margin: 0; }
.card-table-turn { position: absolute; left: 50%; bottom: 156px; z-index: 6; transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--field) 94%, transparent); color: var(--muted); padding: 7px 12px; font-size: .78rem; font-weight: 900; white-space: nowrap; }
.card-table-management,
.card-table-actions { position: absolute; bottom: 26px; z-index: 7; display: grid; width: 180px; gap: 8px; }
.card-table-management { left: 18px; }
.card-table-actions { right: 18px; }
.card-table-utility { position: absolute; left: 18px; bottom: 132px; z-index: 9; display: grid; width: 180px; gap: 7px; }
.card-table-utility button { width: 100%; min-height: 34px; }
.card-table-management button,
.card-table-actions button { width: 100%; min-height: 42px; }
.card-table-actions > span { align-self: center; border: 1px dashed var(--line); border-radius: 8px; padding: 12px; text-align: center; }
.durak-throw-in-hint { border-color: var(--brand) !important; color: var(--brand); font-size: .72rem; font-weight: 800; }

@media (max-width: 900px) {
  .poker-table { min-height: 820px; padding: 10px; overflow: hidden; }
  .poker-felt { inset: 180px 12px 285px; }
  .card-table-opponents { position: absolute; inset: 10px 10px auto; z-index: 4; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 18px; }
  .card-table-opponents .poker-seat { position: relative; inset: auto; width: 124px; min-width: 124px; min-height: 82px; transform: none; }
  .card-table-own-player { bottom: 105px; width: calc(100% - 24px); min-height: 155px; flex-direction: column; gap: 6px; padding: 9px; }
  .own-player-summary { display: flex; min-width: 0; align-items: center; gap: 8px; }
  .card-table-own-player .card-game-hand { width: 100%; }
  .card-table-turn { bottom: 264px; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
  .card-table-management,
  .card-table-actions { bottom: 12px; width: calc(50% - 18px); }
  .card-table-management { left: 12px; }
  .card-table-actions { right: 12px; }
  .card-table-utility { left: 12px; bottom: 94px; display: flex; width: calc(100% - 24px); }
  .card-table-utility button { flex: 1; }
  .card-table-management button,
  .card-table-actions button { min-height: 38px; }
}
.action-explained { display: grid; gap: 1px; text-align: left; }
.action-explained small { color: var(--muted); font-size: 0.62rem; font-weight: 500; }
.card-game-result { position: absolute; inset: 38% 24%; z-index: 8; display: grid; place-content: center; gap: 5px; border: 1px solid var(--brand); border-radius: 8px; background: color-mix(in srgb, var(--field) 94%, transparent); text-align: center; box-shadow: 0 12px 36px #0008; }
.card-game-result strong { color: var(--brand); }
.poker-history-button { position: absolute; top: 12px; right: 12px; z-index: 10; min-height: 30px; padding: 5px 9px; font-size: .7rem; }
.poker-history-modal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(2,14,11,.84); backdrop-filter: blur(3px); }
.poker-history-modal > div { width: min(620px, calc(100% - 30px)); max-height: 88%; overflow: auto; border: 1px solid var(--brand); border-radius: 8px; background: var(--panel); padding: 16px; }
.poker-hand-history-modal { position: fixed; padding: 18px; overflow-y: auto; }
.poker-hand-history-modal > div { width: min(1180px, 100%); max-height: none; overflow: visible; box-shadow: 0 22px 70px #000b; }
.poker-hand-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.poker-hand-heading > div { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); padding: 10px 12px; }
.poker-hand-heading span, .poker-hand-board h4, .poker-history-players dt { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.poker-hand-heading strong { color: var(--brand); font-size: 1.08rem; }
.poker-hand-board { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr); align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); padding: 11px; }
.poker-hand-board h4 { margin: 0 0 7px; }
.poker-hand-pots { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.poker-hand-pots > div { display: grid; gap: 1px; border-left: 2px solid var(--brand); padding: 4px 8px; }
.poker-hand-pots span, .poker-hand-pots small { color: var(--muted); font-size: .66rem; }
.poker-history-players { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.poker-history-players article { display: grid; gap: 7px; background: var(--field); padding: 10px; }
.poker-history-players article.is-winner { border-color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }
.poker-history-players article header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.poker-history-players article header span { color: var(--brand); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.poker-history-cards { display: flex; min-height: 48px; gap: 4px; margin: 0 !important; }
.poker-history-players dl { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; margin: 0; }
.poker-history-players dl > div { min-width: 0; border-top: 1px solid var(--line); padding-top: 5px; }
.poker-history-players dt { overflow: hidden; text-overflow: ellipsis; }
.poker-history-players dd { margin: 2px 0 0; font-size: .82rem; font-weight: 900; }
.poker-history-players dd.win { color: var(--brand); }
.poker-history-players dd.loss { color: #ff8d83; }
.poker-history-modal > form { width: min(520px, calc(100% - 30px)); border: 1px solid var(--brand); border-radius: 8px; background: var(--panel); padding: 16px; }
.poker-raise-modal input[type="range"] { width: 100%; margin: 18px 0 8px; }
.poker-raise-modal output { display: block; color: var(--brand); font-size: 1.5rem; font-weight: 950; text-align: center; }
.poker-leaders { display: grid; gap: 6px; padding-left: 26px; }
.poker-leaders li { border-bottom: 1px solid var(--line); padding: 8px; }
.poker-leaders li span { float: right; color: var(--brand); }
.poker-pot-result { border-left: 3px solid var(--brand); padding-left: 9px; }
.uno-draw-stack { border-radius: 999px; background: #9b2424; color: white; padding: 5px 10px; }
.uno-scoreboard { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 300px; }
.uno-scoreboard span { border: 1px solid var(--line); border-radius: 999px; background: var(--field); padding: 3px 7px; font-size: .67rem; }
.uno-score-modal > div { width: min(760px, calc(100% - 28px)); }
.uno-score-columns { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr); gap: 18px; margin: 16px 0; }
.uno-score-columns section { min-width: 0; }
.uno-round-winner { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; border-left: 3px solid var(--brand); background: var(--field); padding: 10px 12px; }
.uno-round-winner span { grid-column: 1 / -1; color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.uno-round-winner b { color: var(--brand); }
.uno-round-breakdown { display: grid; gap: 5px; margin-top: 8px; }
.uno-round-breakdown > div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; border-bottom: 1px solid var(--line); padding: 7px 4px; font-size: .82rem; }
.uno-round-breakdown > div.is-winner { color: var(--brand); }
@media (max-width: 700px) { .uno-score-columns { grid-template-columns: 1fr; } }
.zole-trick { position: relative; width: 190px; height: 126px; }
.zole-trick > span { position: absolute; }
.zole-trick-seat-0 { left: 50%; bottom: 0; transform: translateX(-50%); }
.zole-trick-seat-1 { right: 10px; top: 10px; transform: rotate(10deg); }
.zole-trick-seat-2 { left: 10px; top: 10px; transform: rotate(-10deg); }
.zole-round-summary { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); padding: 9px 12px; }
.poker-history-modal > div > button { float: right; }
.poker-history-players { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 8px; margin-top: 14px; }
.poker-history-players article { border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.poker-history-players article > span { display: block; color: var(--muted); font-size: .68rem; }
.poker-history-players article > div { display: flex; gap: 4px; margin-top: 6px; }
@media (max-width: 700px) {
  .poker-hand-history-modal { place-items: start center; padding: 8px; }
  .poker-hand-heading, .poker-hand-board { grid-template-columns: 1fr; }
  .poker-history-players { grid-template-columns: 1fr; }
}
.last-trick { animation: lastTrickHold 3s ease both; }
.last-trick-result { display: block; border-radius: 999px; background: var(--field); color: var(--brand); padding: 5px 10px; font-size: .72rem; }
@keyframes lastTrickHold { 0%,82% { opacity: 1; transform: scale(1); } 100% { opacity: .55; transform: scale(.98); } }
.zole-score-button { position: absolute; left: 14px; top: 14px; z-index: 10; min-height: 34px; }
.zole-score-modal { position: absolute; inset: 0; z-index: 32; display: grid; place-items: center; border-radius: inherit; background: rgba(2,14,11,.86); backdrop-filter: blur(3px); }
.zole-score-modal > form { width: min(760px, calc(100% - 28px)); max-height: 88%; overflow: auto; border: 1px solid var(--brand); border-radius: 8px; background: var(--panel); padding: 16px; box-shadow: 0 18px 44px #0009; }
.zole-score-editor { display: grid; grid-template-columns: 34px repeat(4,minmax(100px,1fr)); gap: 5px; align-items: center; }
.zole-score-editor > strong,
.zole-score-editor > span { overflow: hidden; padding: 6px 3px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.zole-score-editor input { min-width: 0; width: 100%; text-align: center; }
.zole-score-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.card-table-opponents .poker-seat { width: 122px; min-height: 92px; padding: 10px 6px; }
.card-table-opponents .poker-seat .playing-card { width: 30px; height: 44px; }
.card-table-opponents .poker-last-action { top: -9px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .navigation-group-editor article,
  .navigation-module-editor article { grid-template-columns: 1fr; }
  .card-game-hand { max-width: calc(100vw - 74px); }
  .playing-card { width: 34px; height: 50px; }
  .zole-score-editor { grid-template-columns: 26px repeat(4,minmax(70px,1fr)); min-width: 420px; }
  .zole-score-modal > form { overflow: auto; }
}

.mine-result-overlay span {
  color: var(--text);
}

.mine-room-players article.winner {
  border-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
}

.mine-room-players span,
.mine-room-players small,
.mine-room-list span,
.mine-room-recent span {
  color: var(--muted);
}

@media (max-width: 980px) {
  .blog-admin-layout {
    grid-template-columns: 1fr;
  }

  .mine-play-layout {
    grid-template-columns: 1fr;
  }
}
.race-hub-tabs { margin-bottom: 16px; }
.race-practice-layout { display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr); gap:16px; align-items:start; }
.race-track-library { display:grid; gap:8px; }
.race-track-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.race-track-card.selected { border-color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
.race-track-card > button:first-child { grid-column:1/-1; padding:0; text-align:left; border:0; background:transparent; color:inherit; display:grid; gap:2px; }
.race-track-card > button:first-child span,.race-track-record small { color:var(--muted); font-size:11px; }
.race-track-record { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.race-track-record > div { display:grid; min-width:0; gap:1px; }
.race-track-record em { overflow:hidden; color:var(--muted); font-size:.62rem; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.race-votes { display:flex; gap:5px; align-items:end; }
.race-votes button { min-width:42px; padding:5px 8px; border-radius:6px; }
.race-votes button.active { color:var(--accent); border-color:var(--accent); }
.race-votes button.dislike.active { color:var(--danger); border-color:var(--danger); }
.race-practice-main,.race-drive-panel { min-width:0; }
.racing-page.race-driving { max-width:1400px; }
.race-track-library { display:block; }
.race-track-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.race-track-choice-grid .race-track-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; overflow:hidden; padding:0 12px 12px; background:var(--field); }
.race-track-choice-grid .race-track-card > button:first-child { grid-column:1/-1; display:grid; grid-template-columns:112px minmax(0,1fr) auto; align-items:center; gap:12px; margin:0 -12px; padding:12px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:color-mix(in srgb,var(--brand) 4%,var(--field)); }
.race-track-choice-grid .race-track-card > button:first-child:hover { background:color-mix(in srgb,var(--brand) 10%,var(--field)); }
.race-track-thumbnail { display:block; width:112px; height:72px; border-radius:6px; background:#07120f; padding:8px; }
.race-track-thumbnail polyline { fill:none; stroke:#89eee0; stroke-width:8; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.race-track-thumbnail.empty { border:1px dashed var(--line); }
.race-track-card-copy { display:grid; gap:3px; min-width:0; text-align:left; }
.race-track-card-copy strong { overflow:hidden; color:var(--text); text-overflow:ellipsis; white-space:nowrap; }
.race-track-card-copy small { color:var(--muted); }
.race-track-open { display:flex; align-items:center; gap:8px; border:1px solid color-mix(in srgb,var(--brand) 55%,var(--line)); border-radius:7px; background:color-mix(in srgb,var(--brand) 10%,var(--field)); color:var(--brand); padding:8px 10px; font-size:.78rem; font-weight:900; white-space:nowrap; }
.race-track-open b { font-size:1rem; line-height:1; }
.race-track-choice-grid .race-track-card > button:first-child:hover .race-track-open { background:var(--brand); color:#fff; }
.race-track-choice-grid .race-votes { justify-content:flex-end; }
.race-track-choice-grid .race-votes button { display:flex; min-width:0; align-items:center; gap:5px; background:var(--surface-2); color:var(--muted); padding:6px 9px; font-size:.72rem; }
.race-track-choice-grid .race-votes button span { display:grid; width:18px; height:18px; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--text) 8%,transparent); color:var(--text); font-weight:900; }
.race-track-choice-grid .race-votes button b { color:var(--text); }
.race-drive-toolbar { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:12px; }
.race-drive-toolbar .race-lap-choice { width:min(220px,100%); margin:0; }
.race-practice-drive .race-canvas-wrap,.race-practice-drive #raceCanvas { width:100%; }
.race-lap-choice { max-width:220px; margin-bottom:10px; }
.race-lap-times { display:grid; gap:8px; margin:-2px 0 14px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:var(--field); }
.race-lap-times-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.race-lap-times-head span { color:var(--muted); font-size:.76rem; }
.race-lap-times-head b { color:var(--brand); }
.race-lap-times > div:last-child { display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; }
.race-lap-times > div:last-child > span { display:grid; min-width:108px; gap:2px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.race-lap-times > div:last-child > span.best { border-color:var(--brand); background:color-mix(in srgb,var(--brand) 9%,var(--surface-2)); }
.race-lap-times small,.race-lap-times em { color:var(--muted); font-size:.66rem; font-style:normal; }
.race-lap-times .best em,.race-lap-times .best b { color:var(--brand); }
.race-finish-summary { display:grid; justify-items:center; gap:5px; }
.race-finish-summary > strong { font-size:2rem; }
.race-finish-summary span { font-size:.9rem; }
.race-finish-summary span b { color:var(--brand); }
.race-all-time-laps { margin-top:14px; min-width:0; }
.race-all-time-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.race-all-time-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.race-all-time-head h4 { margin:0; }
.race-record-legend { display:flex; gap:6px; }
.race-record-legend span,.race-lap-mode { display:inline-block; border-radius:999px; padding:3px 7px; font-size:.62rem; font-weight:800; white-space:nowrap; }
.race-record-legend .practice,.race-lap-mode.practice { background:color-mix(in srgb,var(--muted) 12%,transparent); color:var(--muted); }
.race-record-legend .official,.race-lap-mode.official { background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand); }
.race-all-time-laps table { width:100%; }
.race-all-time-laps th:first-child,.race-all-time-laps td:first-child { width:42px; }
.race-all-time-laps th:last-child,.race-all-time-laps td:last-child { text-align:right; }
.race-lap-result { color:var(--brand); font-weight:900; font-variant-numeric:tabular-nums; }
.race-stage-head { display:flex; align-items:start; justify-content:space-between; gap:16px; padding:14px; margin-bottom:12px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.race-stage-head h3 { margin:2px 0; }
.race-track-card button,.race-hub-tabs button { cursor:pointer; }
.race-own-tracks { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:12px; padding:10px; border-bottom:1px solid var(--line); }
@media (max-width:850px) { .race-practice-layout { grid-template-columns:1fr; } .race-track-library { grid-template-columns:repeat(2,minmax(0,1fr)); } .race-track-choice-grid { grid-template-columns:1fr; } .race-all-time-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .race-track-library { grid-template-columns:1fr; } .race-stage-head { display:block; } .race-track-choice-grid { grid-template-columns:1fr; } .race-track-choice-grid .race-track-card > button:first-child { grid-template-columns:88px minmax(0,1fr); } .race-track-thumbnail { width:88px; height:62px; } .race-track-open { display:none; } .race-drive-toolbar { align-items:stretch; flex-direction:column; } }