/* Enforce dark mode */
:root {
  color-scheme: dark;
  --bg: #0d1117;
  --surface: #111827;
  --surface-2: #0b1220;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #1f2937;
  --accent: #60a5fa;
  --accent-contrast: #0b1220;
  --radius: 14px;
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: radial-gradient(1200px 800px at 20% 0%, var(--surface-2), transparent 70%) no-repeat,
              linear-gradient(180deg, var(--bg), #0a0f16);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
}

.container {
  max-width: 1100px;
  margin: 4rem auto;
  padding: 0 1.25rem;
}

.header h1 {
  margin: 0 0 0.25rem 0;
  letter-spacing: 0.3px;
  font-weight: 700;
}

.subtitle {
  margin: 0 0 1.5rem 0;
  color: var(--muted);
}

.table-container {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  /* Horizontal scroll for small screens */
  overflow-x: auto;
}

.table-container:focus {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

table.commands {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px; /* keep columns readable on narrow screens */
}

table.commands thead th {
  text-align: left;
  font-weight: 600;
  padding: 0.9rem 1rem;
  background: linear-gradient(180deg, #0f172a, #0b1322);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

table.commands tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

table.commands tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

table.commands tbody tr:hover {
  background: rgba(96, 165, 250, 0.08);
}

.mono code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  padding: 0.1rem 0.35rem;
  border-radius: 8px;
  background: #0a0f16;
  border: 1px solid #101826;
  display: inline-block;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: rgba(96,165,250,0.15);
  border: 1px solid rgba(96,165,250,0.35);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1;
  white-space: nowrap;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 2rem 1rem;
}

.footer {
  margin-top: 1rem;
  color: var(--muted);
}

/* Screen reader only text */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Reduce animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.title-group {
  display: flex;
  flex-direction: column;
}

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: #0a0f16;
  border: 1px solid var(--border);
  /* Accent ring + soft shadow */
  box-shadow:
    0 0 0 3px rgba(96, 165, 250, 0.35),
    0 12px 24px rgba(0, 0, 0, 0.45);
}

/* Tweak spacing on narrow screens */
@media (max-width: 520px) {
  .avatar {
    width: 72px;
    height: 72px;
  }
}

/* --- Link styling --- */
:root {
  --link: #93c5fd;
  --link-hover: #bfdbfe;
  --link-visited: #c4b5fd;
  --link-underline: rgba(147, 197, 253, 0.45);
  --link-underline-hover: rgba(191, 219, 254, 0.85);
}

/* Base for both link & visited */
a:any-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease, text-decoration-color 0.2s ease;
}

/* Visited BEFORE hover/focus so it doesn't override them */
a:visited {
  color: var(--link-visited);
  text-decoration-color: rgba(196, 181, 253, 0.55);
}

/* Hover/focus/active always win (also covers visited+hover) */
a:hover,
a:focus-visible,
a:active,
a:visited:hover,
a:visited:focus-visible,
a:visited:active {
  color: var(--link-hover);
  text-decoration-color: var(--link-underline-hover);
}

.table-container a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Optional external-link glyph for absolute http(s) links */
td a[href^="http"]::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.25em;
  opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM19 19H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7z'/></svg>") no-repeat 50% 50%;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM19 19H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7z'/></svg>") no-repeat 50% 50%;
  background: currentColor;
}
.commands td a[href^="http"]:hover::after { opacity: 1; }

/* --- Code styling for descriptions --- */
:root {
  --code-bg: #0a0f16;
  --code-border: #101826;
}

.commands td code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  padding: 0.12rem 0.4rem;
  border-radius: 8px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  display: inline-block;
}

.commands td pre {
  margin: 0.75rem 0;
  padding: 0.9rem 1rem;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 12px;
  overflow-x: auto;
  box-shadow: var(--shadow);
}

.commands td pre code {
  font-size: 0.92rem; /* a touch smaller in blocks */
  border: 0;          /* block already has border */
  background: transparent;
  padding: 0;
}

/* --- Tabs (CSS-only) --- */
.tabs {
  margin-top: 1rem;
}

.tab-radio {
  position: absolute;
  left: -9999px;
}

.tablist {
  display: inline-flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.tab {
  cursor: pointer;
  user-select: none;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: linear-gradient(180deg, #0f172a, #0b1322);
  color: var(--text);
  opacity: 0.85;
  transition: opacity 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.tab:hover { opacity: 1; }

#tab-commands:checked ~ .tablist #label-commands,
#tab-dictionary:checked ~ .tablist #label-dictionary {
  opacity: 1;
  box-shadow: 0 -1px 0 var(--accent) inset, 0 2px 12px rgba(0,0,0,0.35);
  background: linear-gradient(180deg, #101a33, #0b1322);
}

.tab-panels .tab-panel { display: none; }
#tab-commands:checked ~ .tab-panels #panel-commands { display: block; }
#tab-dictionary:checked ~ .tab-panels #panel-dictionary { display: block; }

/* --- Share table styling between both tables --- */
/* (Your previous CSS targeted only table.commands; broaden it) */
table.commands,
table.dictionary {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

table.commands thead th,
table.dictionary thead th {
  text-align: left;
  font-weight: 600;
  padding: 0.9rem 1rem;
  background: linear-gradient(180deg, #0f172a, #0b1322);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

table.commands tbody td,
table.dictionary tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

table.commands tbody tr:nth-child(even),
table.dictionary tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

table.commands tbody tr:hover,
table.dictionary tbody tr:hover {
  background: rgba(96, 165, 250, 0.08);
}

/* Reuse code styling in both tables */
table.commands td code,
table.dictionary td code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  padding: 0.12rem 0.4rem;
  border-radius: 8px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  display: inline-block;
}

table.commands td pre,
table.dictionary td pre {
  margin: 0.75rem 0;
  padding: 0.9rem 1rem;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 12px;
  overflow-x: auto;
  box-shadow: var(--shadow);
}

table.commands td pre code,
table.dictionary td pre code {
  font-size: 0.92rem;
  border: 0;
  background: transparent;
  padding: 0;
}

/* Keep long URLs from breaking layout in both tables */
.table-container a { overflow-wrap: anywhere; word-break: break-word; }

.footer .sep { margin: 0 0.5rem; }

/* Soundboard: column sizing & centering */
table.soundboard {
  table-layout: fixed;                 /* lets us control column widths */
  width: 100%;
}

/* Column 1: just big enough for the command, no wrapping */
table.soundboard th:first-child,
table.soundboard td:first-child {
  width: 1%;
  white-space: nowrap;
}

/* Column 2: take the rest, center its contents */
table.soundboard th:nth-child(2),
table.soundboard td:nth-child(2) {
  width: 99%;
  text-align: center;
}

/* Make players responsive & centered within the cell */
table.soundboard td:nth-child(2) video,
table.soundboard td:nth-child(2) audio {
  display: inline-block;               /* so text-align:center can center them */
  max-width: 100%;
}

/* If your <video> had width/height attributes, override them */
table.soundboard td:nth-child(2) video {
  width: min(560px, 100%) !important;  /* choose a max you like */
  height: auto !important;
}