/* ==========================================================================
   GameDB – the Bugfish Gaming look: dark neutral greys and one neon orange,
   #FF5707, the colour of the logo (assets/img/logo.png). Orange is everything
   that acts or calls: links, focus, selection, primary buttons, Play, active
   filters, counters, progress. Text on an orange fill is near-black – white on
   this orange would be too faint. Frames, rings and hairlines are plain grey,
   and so is Featured. Green only says "done" or "online", yellow only warns,
   and a pink red is kept for errors and deleting – apart from the orange.
   No external fonts or resources.
   ========================================================================== */

:root {
  /* neutral charcoal greys */
  --bg: #0a0a0a;
  --bg-elev: #0b0b0b;        /* inputs and inset wells */
  --panel: #101010;
  --panel-2: #151515;
  --panel-3: #1a1a1a;
  --panel-4: #222222;
  --line: rgba(255, 255, 255, .075);
  --line-strong: rgba(255, 255, 255, .14);
  --text: #e6e6e6;
  --text-dim: #aeaeae;
  --muted: #818181;
  --heading: #fff;

  /* neon orange: the brand – links, selection, actions, Play */
  --accent: #ff5707;
  --accent-hover: #ff7128;
  --accent-text: #ff7a3d;               /* orange text on the greys: a little lighter, easier to read */
  --accent-soft: rgba(255, 87, 7, .13);
  --accent-line: rgba(255, 87, 7, .48);
  --accent-glow: rgba(255, 87, 7, .42);
  --on-accent: #140800;                 /* text and icons on an orange fill */
  /* the logo's gradient, yellow-orange to red-orange: the carousel timer and the hairline under the top bar */
  --accent-gradient: linear-gradient(90deg, #ff3d00, #ff5707 55%, #ff9a1f);

  /* pink red: errors and deleting only */
  --danger: #ff3b6b;
  --danger-text: #ff8aa6;
  --danger-soft: rgba(255, 59, 107, .13);
  --danger-line: rgba(255, 59, 107, .45);

  /* green: done / online */
  --green: #2fcf7c;
  --green-text: #63e29e;
  --green-soft: rgba(47, 207, 124, .12);
  --green-line: rgba(47, 207, 124, .38);

  /* yellow: warnings – far enough from the orange to read as something else */
  --warn: #ffd23f;
  --warn-text: #ffdf70;
  --warn-soft: rgba(255, 210, 63, .09);

  /* Featured (badge, ribbon): flat dark grey, stands out without competing with the orange */
  --featured: #171717;
  --featured-text: #ededed;


  --radius: 14px;
  --radius-md: 10px;
  --radius-sm: 7px;
  --shadow: 0 16px 40px -12px rgba(0, 0, 0, .7);   /* popovers and menus only – everything else is flat */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --container: 1260px;
  --topbar-h: 68px;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 16px); background: var(--bg); }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 15px/1.6 var(--font);
  color: var(--text);
  background:
    radial-gradient(1000px 540px at 6% -220px, rgba(255, 255, 255, .035), transparent 70%),
    radial-gradient(1000px 540px at 94% -220px, rgba(255, 87, 7, .085), transparent 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
/* a faint dot grid behind the top of every page */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 820px;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .35) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .35) 45%, transparent 100%);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent-text); text-decoration: none; transition: color .12s; }
a:hover { color: #fff; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; color: var(--heading); font-weight: 700; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: .86em; padding: .14em .45em; border-radius: 6px; background: rgba(255, 255, 255, .07); color: var(--text); }
pre { font-family: var(--mono); }
address { font-style: normal; margin-bottom: 1em; line-height: 1.7; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.main { flex: 1; padding: 32px 0 72px; }
.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; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.skip-link:focus { top: 12px; color: var(--on-accent); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: .92em; }
.text-strong { color: var(--text); }
.text-warning { color: var(--warn-text); }

.icon { width: 1.15em; height: 1.15em; flex: none; }
.icon-fill { fill: currentColor; }
.icon-sm { width: .9em; height: .9em; opacity: .7; }

/* One-column grids never grow wider than their box, even with a long unbroken slot name, email or URL
   inside (a plain grid column is at least as wide as its content). Layouts with their own columns
   further down override this. */
.form, .field, .flashes, .save-list, .game-side, .save-groups, .plain-list, .invite-list, .invite-main,
.license-list, .module-tile-body, .module-side, .radio-stack, .req-list, .benefits, .hero-track {
  grid-template-columns: minmax(0, 1fr);
}

/* small uppercase labels */
.eyebrow, .meta dt, .table th, .card-progress-label, .hero-progress > span:first-child,
.header-progress > span:first-child, .stat-card span, .stat span, .result-count, .dropdown-head,
.id-card-label, .store-section-title, .manifest-value > span:first-child {
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, .8);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  backdrop-filter: saturate(1.5) blur(18px);
  border-bottom: 1px solid var(--line);
}
.topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 87, 7, .5) 22%, rgba(255, 87, 7, .7) 50%, rgba(255, 87, 7, .5) 78%, transparent);
  pointer-events: none;
}
.topbar-inner { display: flex; align-items: center; gap: 22px; min-height: var(--topbar-h); }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; flex: none; }
.brand:hover { color: #fff; }
.brand-logo { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 18px -6px var(--accent-glow); transition: box-shadow .2s; }
.brand:hover .brand-logo { box-shadow: 0 0 0 1px rgba(255, 87, 7, .55), 0 0 22px -4px var(--accent-glow); }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f2f2f2;
}
/* bugfish.eu, the developer's personal website: a small flat tag under the name */
.brand-wrap { position: relative; display: flex; flex: none; }
.brand-wrap .brand-name { margin-bottom: 16px; }
.brand-wrap-solo .brand-name { margin-bottom: 0; } /* the platform runs at bugfish.eu itself: no tag */
.brand-home {
  position: absolute; left: 52px; bottom: -1px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--featured-text);
  font-size: 11.5px; font-weight: 700; line-height: 1.35; letter-spacing: .02em;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.brand-home .icon { width: 11px; height: 11px; color: #9f9f9f; }
.brand-home:hover { color: #fff; background: var(--panel-3); }

/* main navigation: a segmented control */
.mainnav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
}
.mainnav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px;
  border-radius: 9px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.mainnav a .icon { width: 17px; height: 17px; opacity: .65; transition: color .15s, opacity .15s; }
.mainnav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.mainnav a:hover .icon { opacity: 1; }
.mainnav a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}
.mainnav a.is-active .icon { color: var(--accent-text); opacity: 1; }
.mainnav a.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 3px;
  width: 18px; height: 2px;
  margin-left: -9px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.usermenu { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
/* friends, with an orange counter for new requests */
.topbar-friends {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 40px; height: 38px; padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  font-size: 13.5px; font-weight: 600;
  transition: color .15s, background .15s, border-color .15s;
}
.topbar-friends .icon { width: 17px; height: 17px; color: var(--accent-text); }
.topbar-friends .count { margin-right: -4px; }
.topbar-friends:hover, .topbar-friends.is-active { color: #fff; border-color: var(--accent-line); background: var(--accent-soft); }

/* account chip: avatar and player ID */
.dropdown { position: relative; }
.dropdown summary { list-style: none; cursor: pointer; }
.dropdown summary::-webkit-details-marker { display: none; }
.userchip {
  display: flex; align-items: center; gap: 10px;
  height: 44px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  transition: background .15s, border-color .15s;
}
.userchip:hover, .dropdown[open] .userchip, .userchip.is-active { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.userchip-text { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.userchip-id { font-family: var(--mono); font-size: 14px; font-weight: 600; line-height: 1; color: #fff; letter-spacing: .03em; white-space: nowrap; }
/* a chosen name sits on top, the player ID below it */
.userchip-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.1; }
.userchip-name + .userchip-id { color: var(--muted); font-size: 11px; letter-spacing: .05em; }
.userchip-caret { width: 14px; height: 14px; color: var(--muted); transform: rotate(90deg); transition: transform .15s; }
.dropdown[open] .userchip-caret { transform: rotate(-90deg); }
/* round avatar with a plain ring */
.avatar {
  position: relative;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid #242424;
  background: var(--panel-3);
  color: #fff;
  font-weight: 700; font-size: 15px;
  flex: none;
}
.avatar .icon { width: 52%; height: 52%; }
.avatar-dot { position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.avatar-lg { width: 72px; height: 72px; font-size: 30px; }
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
/* a profile picture (gallery/) fills the ring */
.avatar-pic img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 280px;
  padding: 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: #131313;
  box-shadow: var(--shadow);
  animation: pop .14s var(--ease);
}
.dropdown-head { padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--muted); }
.dropdown-name { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.dropdown-id { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 8px 8px 12px; border-radius: var(--radius-md); background: var(--bg-elev); border: 1px solid var(--line); color: var(--text-dim); }
.dropdown-id b { font-family: var(--mono); color: #fff; font-size: 17px; letter-spacing: .04em; text-transform: none; }
.dropdown-id .icon { width: 17px; height: 17px; color: var(--accent-text); }
.dropdown-id .copy-btn { margin-left: auto; }
.dropdown-menu a, .dropdown-menu button:not(.copy-btn) {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0; border-radius: var(--radius-sm);
  background: none;
  color: var(--text-dim);
  font: inherit; font-size: 14px; text-align: left;
  cursor: pointer;
}
.dropdown-menu a:hover, .dropdown-menu button:not(.copy-btn):hover { background: rgba(255, 255, 255, .07); color: #fff; }
.dropdown-menu .icon { width: 17px; height: 17px; color: var(--muted); }
.dropdown-menu a:hover .icon, .dropdown-menu button:not(.copy-btn):hover .icon { color: var(--accent-text); }
.dropdown-menu a .count { margin-left: auto; }
.dropdown-menu form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
.dropdown-menu form button:hover .icon { color: var(--accent-text); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* copy buttons (player ID, links) */
.copy-btn {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  position: relative;
}
.copy-btn .icon { width: 15px; height: 15px; }
.copy-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
[data-copy].is-copied { color: var(--green-text); }
[data-copy].is-copied::after {
  content: attr(data-copied);
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: #fff; color: #090909;
  font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap;
  pointer-events: none;
  animation: pop .14s var(--ease);
}
.btn[data-copy] { position: relative; }

/* administrators: new modules waiting */
.adminbar { position: relative; background: rgba(255, 87, 7, .08); border-top: 1px solid var(--line); }
.adminbar-inner { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13.5px; color: var(--text); }
.adminbar-inner > .icon { width: 18px; height: 18px; color: var(--accent-text); }
.adminbar-inner strong { color: #fff; }
.adminbar-inner .btn { margin-left: auto; }

/* ---------------------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .07);
  color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn .icon { width: 16px; height: 16px; }
/* actions: the orange, with dark text */
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: 0 6px 22px -8px var(--accent-glow); }
/* starting a game: the same orange, with a soft glow */
.btn-play { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 20px -12px var(--accent-glow); }
.btn-play:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: 0 8px 26px -8px var(--accent-glow); }
.btn-secondary { background: var(--accent-soft); border-color: rgba(255, 87, 7, .28); color: var(--accent-text); }
.btn-secondary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text-dim); }
.btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .26); color: #fff; }
.btn-danger { background: rgba(255, 59, 107, .16); border-color: var(--danger-line); color: #ffc4d2; }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.btn-danger-ghost { background: transparent; border-color: var(--line-strong); color: var(--muted); }
.btn-danger-ghost:hover { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
.btn-sm { min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.btn-lg { min-height: 48px; padding: 0 26px; border-radius: 12px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; color: var(--text-dim); }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-labeled { width: auto; padding: 0 16px 0 14px; }
.btn-fav { border-color: var(--line-strong); background: transparent; }
.btn-fav:hover { color: var(--accent-text); border-color: var(--accent-line); background: rgba(255, 255, 255, .04); }
.btn-fav.is-on { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }
.btn-fav.is-on .icon { fill: currentColor; }
.btn-fav.is-pulsing .icon { animation: star .45s var(--ease); }
@keyframes star { 40% { transform: scale(1.4) rotate(-12deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.btn-row-center { justify-content: center; }
.btn-row form { margin: 0; }
.fav-form, .inline-form { display: inline-flex; margin: 0; }
.inline-form { margin-top: 10px; }
.link-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.link-more .icon { width: 15px; height: 15px; transition: transform .15s; }
.link-more:hover .icon { transform: translateX(2px); }
.link-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; border: 0; background: none;
  color: var(--accent-text); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.link-btn .icon { width: 13px; height: 13px; }
.link-btn:hover { color: #fff; }

/* ---------------------------------------------------------------- alerts */
.flashes { display: grid; gap: 10px; margin-bottom: 24px; }
.alert {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px 13px 18px;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 87, 7, .06);
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
}
.alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.flashes .alert { margin: 0; animation: pop .2s var(--ease); }
.alert > .icon { margin-top: 2px; color: var(--accent-text); }
.alert-body { flex: 1; min-width: 0; }
.alert-success { background: rgba(47, 207, 124, .06); }
.alert-success::before { background: var(--green); }
.alert-success > .icon { color: var(--green-text); }
.alert-error { background: rgba(255, 59, 107, .07); border-color: rgba(255, 59, 107, .25); }
.alert-error::before { background: var(--danger); }
.alert-error > .icon { color: var(--danger-text); }
.alert-warning { background: rgba(255, 210, 63, .06); }
.alert-warning::before { background: var(--warn); }
.alert-warning > .icon { color: var(--warn-text); }
.alert-close { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 6px; }
.alert-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.alert form { margin: 0; }
.admin-preview { align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- badges, tags, chips */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .05);
  color: var(--text-dim);
  font-size: 12px; font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.badge .icon { width: 13px; height: 13px; }
.badge-sm { padding: 2px 7px; font-size: 11.5px; border-radius: 6px; }
a.badge:hover { border-color: var(--accent-line); color: #fff; }
.badge-featured { background: var(--featured); border-color: rgba(255, 255, 255, .16); color: var(--featured-text); }
.badge-age { background: rgba(0, 0, 0, .3); border-color: var(--accent-line); color: var(--accent-text); font-weight: 700; }
/* facts, not calls to act: grey, so the orange keeps its meaning */
.badge-license { background: rgba(255, 255, 255, .06); border-color: var(--line-strong); color: var(--text); font-size: 13px; }
/* progress status */
.badge-progress { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.badge-completed { background: var(--green-soft); border-color: var(--green-line); color: var(--green-text); }
/* anonymous "12 players completed" counter */
.badge-completions { background: rgba(0, 0, 0, .3); }
.badge-completions .icon, .completions .icon { color: var(--green-text); }
.completions { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.completions .icon { width: 14px; height: 14px; }
/* anonymous "34 favorites" counter */
.badge-favorites { background: rgba(0, 0, 0, .3); }
.card-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.card-stats:empty { display: none; }
.favcount { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.favcount .icon { width: 14px; height: 14px; }
.favcount-plain { color: inherit; font-size: inherit; }
/* "1,284 views" – how often a game was opened */
.viewcount { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.viewcount .icon { width: 14px; height: 14px; color: var(--accent-text); }
.badge-views { background: rgba(0, 0, 0, .3); }
.badge-views .icon { color: var(--accent-text); }
.icon-fav, .meta dd .icon.icon-fav { color: var(--accent-text); fill: currentColor; }
[data-num] { font-variant-numeric: tabular-nums; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .055);
  color: var(--text-dim);
  font-size: 12px; font-weight: 600;
  transition: color .15s, background .15s, border-color .15s;
}
a.tag:hover { color: #fff; border-color: var(--accent-line); background: var(--accent-soft); }
.tag-more { color: var(--muted); background: transparent; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .03);
  color: var(--text-dim);
  font-size: 13px; font-weight: 600;
  transition: color .15s, background .15s, border-color .15s;
}
.chip .icon { width: 14px; height: 14px; }
.chip:hover { border-color: rgba(255, 255, 255, .28); color: #fff; }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
/* on the orange chip: a dark pill with light orange digits – dark on dark orange would be too faint */
.chip.is-active .count { background: rgba(20, 8, 0, .82); color: #ffb48f; }
.count-alert { background: var(--accent); color: var(--on-accent); }
.badge-new { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.badge-edited { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }

/* live player count */
.players {
  --dot: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, .35);
  color: var(--text-dim);
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.players-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: none; }
.players[data-status="online"] { --dot: var(--green); color: #c9f5dc; border-color: var(--green-line); }
/* a slow, gentle "live" glow – a fast blink is distracting next to the cards */
.players[data-status="online"] .players-dot { animation: live 4s ease-in-out infinite; }
.players[data-status="offline"] { color: var(--muted); }
.players[data-status="unknown"] { opacity: .7; }
.players-lg { padding: 7px 15px 7px 13px; font-size: 14px; }
.players-lg .players-dot { width: 9px; height: 9px; }
.players-total { align-self: center; }
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------------------------------------------------------------- notice: demanding games */
/* one yellow line above the games; the browser settings fold out (<details>, works without JavaScript) */
.perf-note {
  position: relative;
  margin: 0 0 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 210, 63, .05);
  overflow: hidden;
}
.perf-note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn); }
.perf-note > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 18px;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.perf-note > summary::-webkit-details-marker { display: none; }
.perf-note > summary:focus-visible { outline-offset: -2px; border-radius: var(--radius-md); }
/* a chip with a lightning bolt on a flat yellow tile: these games want power */
.perf-note-icon {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255, 210, 63, .14);
  color: var(--warn-text);
}
.perf-note-icon .icon { width: 22px; height: 22px; }
.perf-note-text { flex: 1; min-width: 0; }
.perf-note-text strong { color: #fff; }
.perf-note-more { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--warn-text); font-size: 13px; font-weight: 700; white-space: nowrap; transition: color .15s; }
.perf-note-more .icon { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.perf-note > summary:hover .perf-note-more { color: #fff; }
.perf-note[open] .perf-note-more .icon { transform: rotate(90deg); }
.perf-note-list { display: grid; gap: 8px; margin: 0; padding: 2px 18px 16px 66px; color: var(--text-dim); font-size: 13.5px; }
.perf-note-list strong { color: var(--text); }

/* ---------------------------------------------------------------- hero carousel */
.store-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--text-dim); font-size: 12.5px; font-weight: 800; }
.store-section-title::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: #4a4a4a; }
.hero {
  position: relative;
  margin-bottom: 52px;
  border-radius: 20px;
  background: var(--bg-elev);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
}
/* all slides share one cell, so the carousel keeps its height while it rotates */
.hero-track { display: grid; }
/* text on the left, the whole preview on the right (previews carry their own title art, so nothing is
   written over them), and the same picture blurred into an ambient glow behind both */
.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr);
  grid-template-areas: "info media";
  align-items: center;
  gap: 40px;
  padding: 36px 36px 72px 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-backdrop {
  position: absolute;
  inset: -80px;
  z-index: -2;
  width: calc(100% + 160px);
  max-width: none;
  height: calc(100% + 160px);
  object-fit: cover;
  filter: blur(50px) saturate(1.4);
  opacity: .55;
  pointer-events: none;
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 9, 9, .94) 0%, rgba(9, 9, 9, .74) 42%, rgba(9, 9, 9, .4) 100%),
    linear-gradient(0deg, rgba(9, 9, 9, .6) 0%, rgba(9, 9, 9, 0) 40%);
}
.hero-media {
  grid-area: media;
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 7.5s ease-out, filter .3s; }
.hero-slide.is-active .hero-media img { transform: scale(1); }
.hero-media:hover img { filter: brightness(1.1); }
.hero-info {
  grid-area: info;
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-width: 0;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 8px;
  color: var(--accent-text);
  font-size: 12px; font-weight: 700;
}
.eyebrow .icon { width: 15px; height: 15px; }
.hero-title { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.025em; margin-bottom: 10px; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.hero-title a { color: #fff; }
.hero-title a:hover { color: #fff; }
.hero-desc { color: #cccccc; font-size: 15.5px; margin-bottom: 14px; max-width: 540px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
/* games and tools in one carousel (home page): each slide says which it is */
.badge-kind { background: rgba(0, 0, 0, .4); border-color: var(--line-strong); color: #fff; font-weight: 700; }
.badge-kind .icon { color: var(--accent-text); }
.home-featured .hero { margin-bottom: 0; }
.home-featured .section-head-right { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; }
.hero-info .tags .tag { background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-controls {
  position: absolute;
  left: 44px; bottom: 18px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 8px;
}
.js .hero-controls { display: flex; }
.hero-nav {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(9, 9, 9, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hero-nav .icon { width: 18px; height: 18px; }
.hero-nav:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hero-dots { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 6px; }
.hero-nav { flex: none; }
/* many slides on a narrow screen: the dots get shorter, the arrows keep their size */
.hero-dot { position: relative; flex: 0 1 26px; width: 26px; min-width: 8px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .3s var(--ease), flex-basis .3s var(--ease); }
.hero-dot::before, .hero-dot::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; }
.hero-dot::before { background: rgba(255, 255, 255, .25); transition: background .15s; }
.hero-dot:hover::before { background: rgba(255, 255, 255, .45); }
.hero-dot::after { background: var(--accent-gradient); transform: scaleX(0); transform-origin: left center; }
.hero-dot.is-active { flex-basis: 48px; width: 48px; min-width: 24px; }
.hero-dot.is-active::after { transform: scaleX(1); }
/* while the carousel plays, the active bar fills up until the next slide */
.hero.is-playing .hero-dot.is-active::after { animation: hero-bar 7s linear both; }
.hero.is-paused .hero-dot.is-active::after { animation-play-state: paused; }
@keyframes hero-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- sections, page headers */
.section { margin-bottom: 52px; }
.section-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px;
  margin-bottom: 18px;
}
.section-head .link-more { white-space: nowrap; }
.section-head h2 { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 19px; font-weight: 700; }
/* flat icon plates */
.section-head h2 .icon { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: rgba(255, 255, 255, .06); color: #d0d0d0; }
.panel .section-head { margin-bottom: 14px; }
.panel .section-head h2 { font-size: 16.5px; }
.panel .section-head h2 .icon { width: 30px; height: 30px; padding: 7px; }
.page-title { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.025em; margin-bottom: 6px; }
.page-sub { color: var(--muted); margin: 0; max-width: 760px; }
.page-header {
  position: relative;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-bottom: 28px; padding: 24px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}
.page-header-plain { justify-content: space-between; }
.page-header-main { flex: 1; min-width: 220px; }
.page-header .btn-row { margin: 0; }
.page-header-thumb { width: 168px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }

/* continue playing */
.recent-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.recent-item {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 9px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  transition: background .15s;
}
.recent-item:hover { color: #fff; background: var(--panel-2); }
.recent-item img { width: 100px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; flex: none; }
.recent-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; }
.recent-info strong { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-meta { display: flex; align-items: center; gap: 5px; max-width: 100%; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; }
.recent-meta .icon { width: 13px; height: 13px; }
.recent-info .badge { margin-top: 5px; }
.recent-play {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  flex: none;
  transition: background .15s, box-shadow .15s;
}
.recent-item:hover .recent-play { background: var(--accent-hover); box-shadow: 0 0 18px -2px var(--accent-glow); }
.recent-play .icon { width: 15px; height: 15px; margin-left: 2px; }
.recent-play .icon-external { margin-left: 0; }

/* store header, filters */
.store-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.filterbar {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .025);
}
.input-icon { position: relative; flex: 1 1 280px; }
.filterbar select.is-active { border-color: var(--accent-line); background-color: #1f1108; color: #fff; }
.input-icon > .icon { position: absolute; left: 14px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.input-icon input[type="search"] { padding-left: 42px; }
.tagbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 24px; }
.tagbar-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--line); }
.result-count { color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.result-bar { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.result-bar .result-count { margin-bottom: 12px; }
/* selects submit on change and Enter submits the search, so "Apply" is only needed without JavaScript */
.js .filterbar-apply { display: none; }

/* ---------------------------------------------------------------- game cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 18px; }
.card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  isolation: isolate;
  transition: background .2s, border-color .2s, opacity .2s, transform .2s;
}
/* hover: a slightly lighter card, a faint orange edge and a gentle zoom of its picture – no lift */
.card:hover { background: var(--panel-2); border-color: rgba(255, 87, 7, .32); }
.card.is-removing { opacity: 0; transform: scale(.96); }
.card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-elev); }
.card-media::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(0deg, rgba(16, 16, 16, .75), transparent); pointer-events: none; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .3s; }
.card:hover .card-media img { transform: scale(1.03); }
.card-ribbon {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: var(--featured);
  color: var(--featured-text);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.card-ribbon .icon { width: 13px; height: 13px; }
.card-body { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 8px; flex: 1; }
.card-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.card-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.card-title a { color: #fff; }
.card-title a:hover { color: #fff; }
.card-desc { margin: 0; color: var(--text-dim); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-progress { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.card-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px 16px; }
.card-foot .btn-play { margin-left: auto; }
/* favorite star the same size as the small Details/Play buttons next to it */
.card-foot .btn { min-height: 34px; }
.card-foot .btn-icon { width: 34px; height: 34px; }
.card-foot .btn-icon .icon { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- empty states */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 56px 20px;
  border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
  background: rgba(255, 255, 255, .02);
  color: var(--text-dim);
}
.empty-state h1, .empty-state h2 { font-size: 22px; margin-bottom: 6px; }
.empty-state p { max-width: 460px; color: var(--muted); }
.empty-state-lg { padding: 80px 20px; margin: 20px 0; }
.empty-state-lg h1 { font-size: 32px; }
.empty-state pre { text-align: left; max-width: 100%; overflow: auto; font-size: 12px; margin-top: 20px; }
.empty-icon {
  width: 68px; height: 68px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: #fff;
}
.empty-icon .icon { width: 28px; height: 28px; }
.empty-inline { display: flex; align-items: center; gap: 10px; padding: 22px 18px; color: var(--muted); }
.empty-inline .icon { width: 20px; height: 20px; color: var(--accent-text); }
.empty-inline-done .icon { color: var(--green-text); } /* completed – green says "done" */

/* ---------------------------------------------------------------- game page */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .icon { width: 14px; height: 14px; opacity: .5; }
.breadcrumb span { color: var(--text-dim); }
/* the preview, blurred into an ambient glow behind the header */
.game-hero {
  position: relative;
  margin-bottom: 28px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  isolation: isolate;
}
.game-hero-backdrop {
  position: absolute;
  inset: -60px;
  z-index: -2;
  width: calc(100% + 120px);
  max-width: none;
  height: calc(100% + 120px);
  object-fit: cover;
  filter: blur(46px) saturate(1.35);
  opacity: .45;
  pointer-events: none;
}
.game-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(9, 9, 9, .92) 0%, rgba(9, 9, 9, .74) 45%, rgba(9, 9, 9, .38) 100%);
}
.game-hero-featured { border-color: rgba(255, 255, 255, .16); }
/* like the carousel: text on the left, the picture on the right */
.game-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-areas: "info media";
  gap: 34px;
  padding: 30px 28px 30px 36px;
  align-items: center;
}
.game-media {
  grid-area: media;
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.game-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .3s; }
.game-media-play {
  position: absolute; left: 50%; top: 50%;
  width: 80px; height: 80px;
  display: grid; place-items: center;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 40px -4px var(--accent-glow);
  opacity: 0; transform: scale(.9);
  transition: opacity .2s, transform .25s var(--ease);
}
.game-media-play .icon { width: 30px; height: 30px; margin-left: 4px; }
.game-media-play .icon-external { margin-left: 0; }
.game-media:hover img { transform: scale(1.04); filter: brightness(.6); }
.game-media:hover .game-media-play, .game-media:focus-visible .game-media-play { opacity: 1; transform: scale(1); }
.game-info { grid-area: info; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.game-title { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.025em; margin: 0; text-shadow: 0 4px 30px rgba(0, 0, 0, .5); overflow-wrap: anywhere; }
.game-info .hero-badges { margin-bottom: 0; }
.lead { color: #cccccc; font-size: 15.5px; line-height: 1.55; margin: 0; }
.game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin-top: 4px; }
.game-actions form { margin: 0; }
.game-actions .btn-play { min-width: 170px; }
.game-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.meta { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.meta div { padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .25); }
.meta dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.meta dd { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.meta dd .icon { width: 16px; height: 16px; color: var(--accent-text); }
.meta dd .icon-check { color: var(--green-text); }
.meta .meta-wide { grid-column: 1 / -1; }
/* game page header: the facts as small tiles, label above value */
.meta-details { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; margin: 4px 0 2px; }
.meta-details div { min-width: 0; padding: 9px 12px 10px; border-radius: var(--radius-md); border: 1px solid var(--line); background: rgba(0, 0, 0, .28); }
.meta-details dt { font-size: 10px; }
.meta-details dd { margin: 3px 0 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
/* links (website, source code) stay on one line and end in "…" rather than breaking mid-address */
.meta-details dd a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--accent-text); }
.meta-details dd a .icon { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
.meta-details dd a:hover { color: #fff; }
/* side panel details: label left, value right */
.meta-list { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 2px 0 4px; }
.meta-list div { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 9px 0; background: none; border-radius: 0; border-bottom: 1px solid var(--line); }
.meta-list div:last-child { border-bottom: 0; }
.meta-list dt { font-size: 10.5px; }
.meta-list dd { margin: 0; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.source-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.source-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-link .icon { width: 15px; height: 15px; }
.game-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.game-side { display: grid; gap: 18px; }
/* "You may also like" below a game page: the last section, the page's bottom padding follows */
.related { margin: 52px 0 0; }

.panel {
  position: relative;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}
/* no extra space under the last element: the panel's padding is the whole margin */
.panel > :last-child, .panel > :last-child > :last-child { margin-bottom: 0; }
.panel-danger { border-color: var(--danger-line); background: #130a0d; }
.panel-danger .section-head h2 .icon { background: var(--danger-soft); color: var(--danger-text); }
.prose { color: var(--text-dim); font-size: 15px; line-height: 1.7; }
.prose p:last-child { margin-bottom: 0; }

.save-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.save-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md); background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.save-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .06); color: #d0d0d0; flex: none; }
.save-icon .icon { width: 17px; height: 17px; }
.save-icon-done { background: var(--green-soft); color: var(--green-text); }
.save-meta { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; line-height: 1.35; }
.save-meta strong { max-width: 100%; font-family: var(--mono); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-meta > span:not(.badge) { color: var(--muted); font-size: 12px; }
.save-meta .badge { margin-top: 5px; }
.save-item form { display: inline-flex; margin: 0; }
.hero-progress, .header-progress { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px; }
.card-progress-label, .hero-progress > span:first-child, .header-progress > span:first-child { color: var(--muted); font-size: 11px; font-weight: 700; }

/* progress reported by a game's website */
.progress-card { padding: 14px; border-radius: var(--radius-md); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); margin-bottom: 10px; }
.progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.progress-bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.progress-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); }
.progress-100 .progress-fill, .progress-fill.progress-100 { background: var(--green); }
.progress-summary { margin: 10px 0 0; color: var(--text); font-size: 14px; font-weight: 600; }
.progress-5 { width: 5%; } .progress-10 { width: 10%; } .progress-15 { width: 15%; } .progress-20 { width: 20%; }
.progress-25 { width: 25%; } .progress-30 { width: 30%; } .progress-35 { width: 35%; } .progress-40 { width: 40%; }
.progress-45 { width: 45%; } .progress-50 { width: 50%; } .progress-55 { width: 55%; } .progress-60 { width: 60%; }
.progress-65 { width: 65%; } .progress-70 { width: 70%; } .progress-75 { width: 75%; } .progress-80 { width: 80%; }
.progress-85 { width: 85%; } .progress-90 { width: 90%; } .progress-95 { width: 95%; } .progress-100 { width: 100%; }

/* ---------------------------------------------------------------- stats & save manager */
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.stat {
  min-width: 112px;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .3);
  color: var(--text);
  text-align: center;
  transition: background .15s;
}
a.stat:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.stat strong { display: block; color: #fff; font-family: var(--font-display); font-size: 23px; line-height: 1.2; font-weight: 700; }
.stat span { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 30px; }
.stat-card {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  overflow: hidden;
  transition: background .15s;
}
a.stat-card:hover { background: var(--panel-2); color: #fff; }
.stat-card .icon { width: 34px; height: 34px; padding: 8px; margin-bottom: 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #d6d6d6; }
.stat-card strong { color: #fff; font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 700; }
.stat-card strong small { color: var(--muted); font-size: 16px; font-weight: 600; }
.stat-card span { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.stat-card-accent .icon { background: var(--accent-soft); color: var(--accent-text); }
.stat-card-accent strong { color: #fff; }
.stat-card-accent::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, .16); }
.stat-card-alert { border-color: var(--accent-line); }
.stat-card-alert .icon { background: var(--accent-soft); color: var(--accent-text); }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.list-toolbar .tagbar { margin-bottom: 0; }
.list-toolbar form { margin: 0; }
.list-sort { display: flex; gap: 8px; }
.save-groups { display: grid; gap: 16px; }
.save-group { padding: 0; overflow: hidden; }
.save-group-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.save-group-thumb { width: 116px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.save-group-thumb img { width: 100%; height: 100%; object-fit: cover; }
.save-group-thumb-missing { display: grid; place-items: center; background: var(--panel-3); color: var(--muted); }
.save-group-title { flex: 1; min-width: 180px; }
.save-group-title h2 { font-size: 18px; margin: 0 0 2px; }
.save-group-title h2 a { color: #fff; }
.save-group-title h2 a:hover { color: var(--accent-text); }
.save-group-title p { margin: 0; font-size: 13px; }
.save-group-title .badge { margin-top: 6px; }
.save-group-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.save-group-actions form { margin: 0; }
.manage-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-bottom: 22px; }
.subsection { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.subsection h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 6px; }
.subsection h3 .icon { width: 17px; height: 17px; color: var(--accent-text); }

.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { padding: 11px 18px; text-align: left; color: var(--muted); font-size: 10.5px; font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; background: rgba(0, 0, 0, .2); }
.table td { padding: 11px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.legal .table td, .legal .table th { padding: 10px 12px; }
.slot-name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 600; }
.slot-name .icon { width: 16px; height: 16px; color: var(--accent-text); }
.slot-name .icon-check { color: var(--green-text); }
.cell-progress { min-width: 150px; }
.cell-actions { white-space: nowrap; text-align: right; }
.cell-actions > * { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.cell-actions form { margin: 0; }

/* ---------------------------------------------------------------- forms */
.form { display: grid; gap: 16px; margin-top: 18px; }
/* buttons keep their own width in a form grid; .btn-block ones span it */
.form > .btn { justify-self: start; }
.form > .btn-block { justify-self: stretch; }
/* align-content: a field next to a taller one (hint, error) keeps its label and input together */
.field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.field label, .field-label-row label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.field-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.small-link { font-size: 13px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid #212121;
  background-color: var(--bg-elev);
  color: var(--text);
  font: inherit;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input:hover, select:hover, textarea:hover { border-color: #2b2b2b; }
textarea { min-height: 0; resize: vertical; line-height: 1.55; }
select {
  width: auto;
  min-width: 190px;
  padding-right: 40px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
  cursor: pointer;
}
/* The open list always uses the normal dark colours: browsers draw it with the select's own background,
   and the tint of an active filter (.is-active) would otherwise show behind every option. */
select option { background-color: #101010; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: #656565; }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
.has-error input, .has-error textarea { border-color: var(--danger-line); }
.has-error input:focus, .has-error textarea:focus { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.field-error { margin: 0; color: var(--danger-text); font-size: 13px; }
.field-hint { margin: 0; color: var(--muted); font-size: 13px; }
.field-hint .icon { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.input-password { position: relative; }
.input-password input { padding-right: 48px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%;
  width: 36px; height: 36px; margin-top: -18px;
  display: none; place-items: center;
  border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer;
}
.js .pw-toggle { display: grid; }
.pw-toggle:hover, .pw-toggle.is-on { color: var(--accent-text); background: rgba(255, 255, 255, .05); }
.input-code { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-dim); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.form-note { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--muted); font-size: 13px; }
.form-note .icon { width: 17px; height: 17px; color: var(--accent-text); margin-top: 2px; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.field-inline input { width: 110px; min-height: 36px; padding: 6px 10px; }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(0, 0, 0, .3); }

/* auth pages */
.auth { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 380px); justify-content: center; gap: 44px; align-items: center; margin: 16px 0; }
.auth-card { padding: 34px; overflow: hidden; }
.auth-single { max-width: 490px; margin: 24px auto; text-align: center; }
.auth-single .form { text-align: left; }
.auth-title { font-size: 30px; font-weight: 800; margin-bottom: 8px; }
.auth-alt { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; text-align: center; }
.auth-aside { padding: 8px 4px; }
.auth-aside h2 { font-size: 24px; font-weight: 800; margin-bottom: 22px; }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.benefits li { display: flex; gap: 14px; }
.benefits .icon { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.benefits li:nth-child(even) .icon { background: var(--accent-soft); color: var(--accent-text); }
.benefits strong { display: block; color: #fff; }
.benefits span { color: var(--muted); font-size: 14px; }
.big-icon {
  width: 76px; height: 76px;
  display: grid; place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: #fff;
}
.big-icon .icon { width: 32px; height: 32px; }
.big-icon-error { border-color: var(--danger-line); background: rgba(255, 59, 107, .08); color: var(--danger-text); }
.invite-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 16px 0 4px; padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
}
.invite-banner > .icon { width: 30px; height: 30px; color: var(--accent-text); }
.invite-banner > .avatar { width: 44px; height: 44px; } /* the inviter's profile picture */
.invite-banner strong { display: block; color: #fff; font-size: 15px; }
.invite-banner span { color: var(--text-dim); font-size: 13.5px; }
.invite-banner .invite-banner-alt { display: block; margin-top: 4px; }

/* account */
.account-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.account-id .page-title { word-break: break-all; font-size: clamp(20px, 2.4vw, 28px); }
.account-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.id-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 2px 1px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 87, 7, .3);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-family: var(--mono); font-size: 14px; font-weight: 600;
}
.id-chip > .icon { width: 15px; height: 15px; }
.name-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; padding: 2px 10px 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .05);
  color: #fff; font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.name-chip:hover { color: #fff; border-color: var(--accent-line); }
.name-chip .icon { width: 14px; height: 14px; color: var(--accent-text); }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.account-grid .alert .inline-form { display: flex; }
/* profile picture: all pictures of the completed games next to each other in one box that scrolls, so the page
   keeps its size; the game a picture comes from is in its tooltip */
.account-grid .panel-wide { grid-column: 1 / -1; }
.avatar-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));   /* the columns share the width evenly */
  justify-items: center;
  gap: 12px;
  max-height: 232px;            /* about three rows, the rest scrolls inside the box */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;                /* room for the selection ring and focus outline – never cut off */
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.avatar-grid::-webkit-scrollbar { width: 8px; }
.avatar-grid::-webkit-scrollbar-thumb { border-radius: 8px; background: #333; }
.avatar-option { position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; cursor: pointer; }
.avatar-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.avatar-option .avatar { width: 64px; height: 64px; transition: border-color .15s, box-shadow .15s; }
.avatar-option:hover .avatar { border-color: #4a4a4a; }
.avatar-option input:checked + .avatar { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.avatar-option input:focus-visible + .avatar { outline: 2px solid #fff; outline-offset: 4px; }
.avatar-hint { margin: 10px 0 12px; }

/* invite friends */
.id-card {
  display: grid; justify-items: start; gap: 6px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--panel);
}
.id-card-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.id-card-label .icon { width: 15px; height: 15px; color: var(--accent-text); }
.id-card-value { font-family: var(--mono); font-size: 28px; line-height: 1.1; color: #fff; letter-spacing: .04em; }
.id-card-name { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--text-dim); font-size: 13px; }
.id-card-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.id-card-name .icon { width: 13px; height: 13px; color: var(--accent-text); }
.id-card-name:hover { color: #fff; }
.invite-hero .avatar-lg .icon { width: 34px; height: 34px; }
.invite-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.invite-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.invite-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.invite-item:target { border-color: var(--accent-line); }
.invite-used, .invite-expired, .invite-revoked { opacity: .65; }
.invite-main { flex: 1; min-width: 0; display: grid; gap: 8px; }
.invite-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.invite-code { font-size: 15px; letter-spacing: .1em; color: #fff; background: var(--accent-soft); }
.copy-field { display: flex; gap: 8px; }
.copy-field input { min-height: 34px; padding: 6px 10px; font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }
.invite-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; color: var(--muted); font-size: 12.5px; }
.invite-meta .icon { width: 14px; height: 14px; margin-right: 2px; }
.invite-note { font-style: italic; }
.invite-actions form { margin: 0; }
.form-inline-grid { grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; align-items: end; }

/* friends */
.friends-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.friends-main, .friends-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.friend-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.friend-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .22);
  transition: background .15s;
}
.friend-item:hover { background: rgba(255, 255, 255, .03); }
.friend-item-waiting .avatar:not(.avatar-pic) { opacity: .6; }
.friend-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* their own name (or player ID), then your alias in brackets */
.friend-title { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 700; }
.friend-name { color: #fff; font-weight: 700; }
.friend-alias { margin-left: 6px; color: var(--accent-text); font-weight: 500; }
.friend-id { font-family: var(--mono); color: #fff; font-weight: 700; letter-spacing: .03em; }
.friend-offer h2 .friend-id { color: var(--text-dim); font-size: .7em; font-weight: 600; }
.friend-meta .friend-id { color: var(--text-dim); font-weight: 600; }
.friend-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--muted); font-size: 12.5px; }
.badge-origin { margin-top: 3px; color: var(--text-dim); border-color: var(--line-strong); background: rgba(255, 255, 255, .05); }
.friend-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.friend-actions form { margin: 0; }
/* "Name": a small form that opens under its button, no JavaScript needed */
.friend-edit { position: relative; }
.friend-edit > summary { list-style: none; }
.friend-edit > summary::-webkit-details-marker { display: none; }
.friend-edit[open] > summary { color: #fff; border-color: var(--accent-line); background: var(--accent-soft); }
.friend-edit-form {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 5;
  display: flex; gap: 6px;
  width: 270px; padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: #131313;
  box-shadow: var(--shadow);
  animation: pop .14s var(--ease);
}
.friend-edit-form input { min-height: 34px; padding: 6px 10px; }
.panel-highlight { border-color: var(--accent-line); }
.friends-invite .form-inline-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.friends-invite .form-inline-grid > .btn { grid-column: 1 / -1; }
/* the side column is narrow: the link gets the full width, its button goes below */
.friends-invite .invite-item { flex-direction: column; gap: 10px; }
.friends-invite .invite-main { width: 100%; }
/* a friend's invitation link, opened while logged in */
.friend-offer {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--panel);
}
.friend-offer-text { flex: 1; min-width: 220px; }
.friend-offer-text .eyebrow { margin-bottom: 4px; }
.friend-offer h2 { margin: 0 0 4px; font-size: 24px; font-weight: 800; }
.friend-offer p { margin: 0; }
.friend-offer .btn-row { margin: 0; }
/* "#" in front of the player ID field */
.input-prefix { position: relative; }
.input-prefix > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-family: var(--mono); font-weight: 700; pointer-events: none; }
.input-prefix input { padding-left: 32px; font-family: var(--mono); font-size: 16px; letter-spacing: .1em; }

/* lists */
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plain-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--line); background: rgba(0, 0, 0, .22); color: var(--text-dim); transition: opacity .2s; }
.plain-item.is-removing { opacity: 0; }
.plain-item .btn-fav { min-height: 32px; font-size: 13px; }
/* favorites page: games that are gone, under the cards or the empty state – with the gap of a new section */
.fav-gone { margin-top: 52px; }

/* ---------------------------------------------------------------- licenses & legal */
.license-list { display: grid; gap: 12px; margin-bottom: 24px; }
.license-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.license-name { font-size: 18px; margin: 0 0 2px; }
.license-head p { margin: 0; font-size: 14px; }
.license-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; word-break: break-all; }
.license-link .icon { width: 15px; height: 15px; }
.license-details { margin-top: 12px; }
.license-details summary { cursor: pointer; color: var(--text-dim); font-size: 14px; font-weight: 600; }
.license-details summary:hover { color: var(--accent-text); }
.license-text {
  max-height: 420px;
  margin: 10px 0 0;
  padding: 14px;
  overflow: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap;
}
.legal { max-width: 900px; margin: 0 auto; padding: 38px 42px; }
.legal h2 { margin-top: 36px; font-size: 21px; padding-top: 4px; }
.legal p, .legal li, .legal address { color: var(--text-dim); }
.legal ul { padding-left: 20px; margin: 0 0 1em; }
.legal li { margin-bottom: 4px; }
.legal li::marker { color: var(--accent); }
.legal-updated { margin-top: 36px; color: var(--muted) !important; font-size: 13px; }
.toc { margin: 22px 0 6px; padding: 18px 22px; border-radius: var(--radius-md); border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; font-size: 14px; }
.toc li { margin-bottom: 4px; break-inside: avoid; }
.toc li::marker { color: var(--muted); }

/* ---------------------------------------------------------------- footer */
.footer { position: relative; background: #070707; border-top: 1px solid var(--line); padding: 36px 0 28px; color: var(--muted); font-size: 13px; }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.footer-brand strong { display: block; color: var(--text); font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: flex-end; }
.footer-links a { color: var(--text-dim); font-weight: 600; }
.footer-links a:hover { color: #fff; }
.footer-note { display: flex; align-items: center; gap: 8px; margin: 0; }
.footer-note .icon { width: 16px; height: 16px; color: var(--green-text); }
.footer-copy { margin: 0; text-align: right; }
.footer-home { color: var(--featured-text); font-weight: 700; text-decoration: underline; text-decoration-color: #555; text-underline-offset: 4px; }
.footer-home:hover { color: #fff; }

/* ---------------------------------------------------------------- installer */
.install { max-width: 900px; margin: 0 auto; }
.install fieldset { margin: 0 0 20px; padding: 20px 22px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.install legend { padding: 0 8px; color: var(--accent-text); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.install .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.install .span-2 { grid-column: 1 / -1; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.req-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
/* the installer names server paths: long ones wrap instead of widening the page */
.req-list li > span, .field-hint code { min-width: 0; overflow-wrap: anywhere; }
.req-ok .icon { color: var(--green-text); }
.req-fail .icon { color: var(--danger-text); }
.req-warn .icon { color: var(--warn-text); }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-card { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .25); cursor: pointer; color: var(--text-dim); transition: border-color .15s, background .15s; }
.radio-card:hover { border-color: rgba(255, 255, 255, .26); }
.radio-card input { accent-color: var(--accent); }
.radio-card.is-checked, .radio-card:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); color: #fff; }
.radio-stack { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }

/* ---------------------------------------------------------------- administration */
.admin-tabs { margin-bottom: 24px; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 30px; }
.panel-flush { padding: 0; overflow: hidden; }
.table-admin td { font-size: 13.5px; }
.admin-email { font-weight: 600; word-break: break-all; }
.admin-name { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--text-dim); font-size: 12.5px; font-weight: 600; }
.admin-name .icon { width: 13px; height: 13px; color: var(--accent-text); }
.meta-admin dd .inline-form { display: inline-flex; margin: 0 0 0 8px; vertical-align: middle; }
.admin-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 6px; vertical-align: middle; }
.page-sub.admin-badges { margin-left: 0; }
td > .admin-badges:first-child { margin-left: 0; }
.admin-counts { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.admin-note { margin: 10px 2px 0; }
.admin-note .icon { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; color: var(--accent-text); }
.admin-search input[type="search"] { min-width: 220px; }
.badge-admin { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.badge-pending { background: transparent; border-color: var(--line-strong); color: var(--muted); }
.badge-live { background: var(--green-soft); border-color: var(--green-line); color: var(--green-text); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(47, 207, 124, .2); animation: live-pulse 1.8s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; } }
/* statistics: one series, thin columns with rounded tops, hairline grid, the axis text in HTML */
.stats-periods { margin-bottom: 18px; }
.chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-top: 6px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 220px; }
.chart-y span { display: flex; align-items: center; justify-content: flex-end; height: 0; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.chart-plot { min-width: 0; }
.chart-svg { display: block; width: 100%; height: 220px; overflow: visible; }
.chart-grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.chart-axis { stroke: rgba(255, 255, 255, .2); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.chart-bar { fill: var(--accent); transition: fill .12s; }
.chart-hit { fill: transparent; }
.chart-col { outline: none; }
.chart-col:hover .chart-bar, .chart-col:focus-visible .chart-bar { fill: var(--accent-hover); }
.chart-col:focus-visible .chart-hit { fill: rgba(255, 255, 255, .05); }
.chart-x { display: flex; margin-top: 8px; }
.chart-x span { flex: 1 1 0; min-width: 0; overflow: visible; color: var(--muted); font-size: 11.5px; text-align: center; white-space: nowrap; }
.chart-tip {
  position: fixed; z-index: 70;
  padding: 7px 11px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: #131313;
  box-shadow: var(--shadow);
  font-size: 12.5px; line-height: 1.35; white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
}
.chart-tip strong { display: block; color: #fff; font-size: 14px; }
.chart-tip span { color: var(--text-dim); }
.chart-table { margin-top: 14px; }
.chart-table summary { cursor: pointer; color: var(--text-dim); font-size: 13px; font-weight: 600; }
.chart-table summary:hover { color: var(--accent-text); }
.chart-table .table-wrap { max-height: 320px; margin-top: 10px; overflow: auto; }
.stats-chart-panel { margin-bottom: 22px; }
.panel-pad { padding: 20px 22px 2px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-stats .col-bar { width: 32%; min-width: 90px; }
.statbar { display: block; overflow: visible; }
.statbar-fill { fill: var(--accent); }
.kv-list { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 5px 0 0; padding: 0; }
.kv-list li { padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--text); font-size: 12px; }
.kv-list li span { color: var(--muted); margin-right: 5px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 0; }
.meta-admin { grid-template-columns: minmax(0, 1fr); }
/* modules */
.module-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.module-tile { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--accent-line); background: #150e0a; }
.module-tile-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.module-tile-body { display: grid; gap: 4px; padding: 12px 14px 2px; }
.module-tile-body strong { display: flex; align-items: center; gap: 6px; color: #fff; }
.module-tile-body .btn-row { margin: 8px 0 12px; }
.module-tile-broken { background: rgba(255, 59, 107, .07); }
.module-tile-broken .icon { color: var(--danger-text); width: 16px; height: 16px; }
.module-tile-broken .module-tile-body { padding-bottom: 14px; }
.module-cell { display: flex; align-items: center; gap: 12px; color: var(--text); }
.module-cell img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; flex: none; }
.module-cell strong { display: block; color: #fff; }
.module-cell code { font-size: 11.5px; background: none; padding: 0; color: var(--muted); }
.module-cell:hover strong { color: var(--accent-text); }
.row-new td { background: rgba(255, 87, 7, .05); }
.table-modules td { padding-top: 8px; padding-bottom: 8px; }
.module-head { align-items: center; }
.module-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.module-side { display: grid; gap: 22px; }
.module-form .form { margin-top: 6px; }
.module-field { padding: 2px 0 2px 12px; border-left: 2px solid transparent; transition: border-color .15s; }
.module-field.is-changed { border-left-color: var(--accent); }
.manifest-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; color: var(--muted); font-size: 12.5px; }
.manifest-value > span:first-child { font-weight: 700; font-size: 10.5px; }
.manifest-text { color: var(--text-dim); overflow-wrap: anywhere; }
.manifest-text em { color: var(--muted); }
.reset-form { margin-top: 12px; }

/* ---------------------------------------------------------------- home page */
/* the hero: the logo's orange light – strong from the top right, faint from the bottom left – over a faint dot grid */
.home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  align-items: center;
  gap: 40px;
  margin-bottom: 52px;
  padding: 46px 44px 46px 50px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  overflow: hidden;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(560px 420px at 0% 100%, rgba(255, 87, 7, .07), transparent 70%),
    radial-gradient(620px 440px at 100% 0%, rgba(255, 87, 7, .17), transparent 70%);
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .3) 60%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .3) 60%, transparent 100%);
}
.home-hero-solo { grid-template-columns: minmax(0, 1fr); }
.home-hero-copy { min-width: 0; }
.home-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, .4);
  color: var(--text-dim);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
}
.home-kicker .live-dot { flex: none; }
.home-title { margin: 0 0 18px; font-size: clamp(38px, 5.2vw, 66px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.home-accent { display: block; color: var(--accent); text-shadow: 0 0 34px rgba(255, 87, 7, .35); }
.home-text { max-width: 620px; margin: 0 0 12px; color: #cfcfcf; font-size: 17px; line-height: 1.6; }
.home-tagline { margin: 0 0 28px; color: var(--muted); font-family: var(--mono); font-size: 13px; }
.home-tagline::before { content: "> "; color: var(--accent-text); }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* the ops monitor: live counters on one clock (app.js). The countdown burns orange, day counters carry orange
   labels, "online" is green. */
.ops {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(22, 22, 22, .94), rgba(10, 10, 10, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px -24px rgba(0, 0, 0, .85);
  font-family: var(--mono);
}
.ops-head { display: flex; align-items: center; gap: 12px; padding: 0 2px 11px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ops-title { color: var(--text-dim); font-weight: 700; }
.ops-sys { margin-left: auto; white-space: nowrap; }
.ops-sys b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ops-online { display: inline-flex; align-items: center; gap: 7px; color: var(--green-text); font-weight: 700; }
.ops-op {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid var(--accent-line);
  background: radial-gradient(420px 170px at 100% 0%, rgba(255, 87, 7, .15), transparent 70%), rgba(0, 0, 0, .38);
  overflow: hidden;
}
.ops-op-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.ops-kicker { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ops-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ops-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: live-pulse 1.2s ease-in-out infinite; }
.ops-op-name { margin: 0 0 12px; color: #fff; font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
.ops-op-name em { display: block; color: var(--accent); font-size: 30px; font-style: normal; letter-spacing: .02em; text-shadow: 0 0 26px rgba(255, 87, 7, .4); overflow-wrap: anywhere; }
.ops-clock { display: flex; align-items: flex-start; gap: 6px; }
.ops-seg { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; padding: 9px 6px 7px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .5); }
.ops-seg b { color: #fff; font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ops-seg span { margin-top: 6px; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.ops-clock > i { align-self: center; margin-top: -16px; color: var(--accent-text); font-size: 24px; font-style: normal; font-weight: 700; animation: ops-blink 1s steps(2, start) infinite; }
.ops-ticks { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); gap: 2px; margin: 12px 0 9px; }
.ops-ticks i { height: 8px; border-radius: 1px; background: rgba(255, 255, 255, .08); }
.ops-ticks i.on { background: var(--accent); box-shadow: 0 0 6px rgba(255, 87, 7, .45); }
.ops-op-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 11.5px; }
.ops-op-meta b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ops-op.is-done { border-color: rgba(255, 210, 63, .4); background: rgba(0, 0, 0, .38); }
.ops-op.is-done .ops-clock, .ops-op.is-done .ops-ticks { opacity: .3; }
.ops-op.is-done .ops-clock > i { animation: none; }
.ops-op.is-done .ops-badge { border-color: rgba(255, 210, 63, .45); background: var(--warn-soft); color: var(--warn-text); }
.ops-op.is-done .ops-badge i { background: var(--warn); }
.ops-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ops-counter { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .32); }
.ops-k { color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ops-k span { color: var(--muted); font-weight: 400; }
.ops-days { margin-top: 4px; color: #fff; font-size: 30px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ops-u { color: var(--text-dim); font-family: var(--font); font-size: 13px; font-weight: 600; }
.ops-s { color: var(--muted); font-size: 11.5px; }
.ops-s b { color: var(--text-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.ops-d { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line-strong); color: var(--muted); font-family: var(--font); font-size: 12px; line-height: 1.45; }
@keyframes ops-blink { 50% { opacity: .2; } }

/* projects: picture left, name with category / license / "AI assisted", text, link buttons */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(470px, 100%), 1fr)); gap: 16px; }
.project {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color .15s, background-color .15s;
}
.project:hover { border-color: rgba(255, 87, 7, .32); background: var(--panel-2); }
.project-pic, .channel-pic {
  display: grid; place-items: center; flex: none;
  overflow: hidden;
  background: #0c0c0c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.project-pic { width: 88px; height: 88px; border-radius: 14px; }
.project-pic img, .channel-pic img { width: 100%; height: 100%; object-fit: cover; }
.pic-initials { color: var(--text-dim); font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: .04em; }
.project-body { min-width: 0; }
.project-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 7px; }
.project-name { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.project-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.project-badges .badge-license { font-size: 11.5px; }
.badge-category { color: var(--text); }
.badge-ai { border-style: dashed; color: #cfcfcf; }
.project-desc { margin: 0 0 12px; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
/* on the home page a long text is cut after four lines – the Projects page shows it whole */
.project-grid-home .project-desc { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.project-links { display: flex; flex-wrap: wrap; gap: 6px; }
.project-links .btn-sm { min-height: 32px; }

/* channels: the places on the web, as tiles that open in a new tab */
.channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(285px, 100%), 1fr)); gap: 12px; }
.channel {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
  padding: 12px 40px 12px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  transition: border-color .15s, background-color .15s, transform .15s var(--ease);
}
.channel:hover { color: var(--text); border-color: var(--accent-line); background: var(--panel-2); transform: translateY(-1px); }
.channel-pic { width: 52px; height: 52px; border-radius: 12px; }
.channel-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.38; }
.channel-body strong { color: #fff; font-size: 15px; }
.channel-desc { color: var(--text-dim); font-size: 13px; }
.channel-host { overflow: hidden; color: var(--muted); font-family: var(--mono); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.channel-go { position: absolute; top: 14px; right: 14px; width: 15px; height: 15px; color: var(--muted); transition: color .15s; }
.channel:hover .channel-go { color: var(--accent-text); }

/* administration of the site content: pictures, counters */
.site-thumb { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: cover; background: #0c0c0c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.site-thumb-empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; font-weight: 800; }
.site-cell { display: flex; align-items: center; gap: 12px; color: var(--text); }
.site-cell strong { display: block; color: #fff; }
.site-cell span { color: var(--muted); font-size: 12.5px; }
.site-cell:hover strong { color: var(--accent-text); }
.picture-field { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 16px; }
.picture-preview { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; background: #0c0c0c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.picture-field select { width: 100%; }
input[type="file"] { width: 100%; color: var(--text-dim); font: inherit; font-size: 13.5px; }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--panel-3); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--panel-4); }
.counter-rows { display: grid; gap: 12px; }
.counter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--line); background: rgba(0, 0, 0, .28); }
.counter-row-wide { grid-column: 1 / -1; }
.counter-row-new { border-style: dashed; }
.counter-row .check { align-self: end; padding-bottom: 10px; }
.section-gap { margin-top: 22px; }
.btn-row-end { justify-content: flex-end; flex-wrap: nowrap; margin: 0; }
.list-toolbar .btn-row { margin: 0; }
.btn-row-end form { margin: 0; }
.field-label-spacer { display: block; height: 19px; }

/* ---------------------------------------------------------------- ratings */
/* stars are plain metal like Featured – orange already is the favorite star */
.stars { display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; }
.stars .icon { width: 15px; height: 15px; stroke-width: 1.8; }
/* also inside detail lists, whose icons are orange */
.stars .icon.star-on, .stars .icon.star-half { color: #ededed; }
.stars .icon.star-off { color: #555; }
.star-on { fill: currentColor; }
.rating-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; color: var(--text); }
.rating-line b { color: #fff; font-weight: 700; }
.rating-line .rating-n { color: var(--muted); font-size: 12.5px; font-weight: 500; }
a:hover .rating-line .rating-n { color: var(--text-dim); }
.badge-rating { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .2); color: #ededed; }
.badge-rating b { color: #fff; font-weight: 800; }
.badge-rating .rating-n { color: var(--text-dim); font-weight: 600; }
/* the average on a game card, at the top right of its picture – in the markup it follows the title, because the
   picture's link is hidden from screen readers */
.card-rating {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(10, 10, 10, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.card-rating .icon { width: 13px; height: 13px; }
/* game page: the average, and the stars a player who completed the game gives */
.rating-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.rating-summary > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.rating-avg { color: #fff; font-family: var(--font-display); font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.rating-summary .stars .icon { width: 19px; height: 19px; }
.rate-form { margin: 0; }
.rate-form fieldset { min-width: 0; margin: 0 0 4px; padding: 0; border: 0; }
.rate-form legend { margin-bottom: 6px; padding: 0; color: var(--text); font-size: 14px; font-weight: 600; }
.rate-form .btn-row { margin-bottom: 4px; }
/* 5 to 1 in the markup, shown 1 to 5: the chosen star lights up with the ones before it; while the pointer is on
   the stars they show what a click would choose */
.rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rate-stars label { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: #555; cursor: pointer; transition: color .12s, transform .12s; }
.rate-stars label .icon { width: 30px; height: 30px; stroke-width: 1.6; }
.rate-stars input:checked ~ label { color: #f2f2f2; }
.rate-stars input:checked ~ label .icon { fill: currentColor; }
.rate-stars:hover input ~ label { color: #555; }
.rate-stars:hover input ~ label .icon { fill: none; }
.rate-stars:hover label:hover, .rate-stars:hover label:hover ~ label { color: #fff; }
.rate-stars:hover label:hover .icon, .rate-stars:hover label:hover ~ label .icon { fill: currentColor; }
.rate-stars label:hover { transform: scale(1.08); }
.rate-stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.rate-remove { margin: 0; }

/* ---------------------------------------------------------------- comments */
.game-main { display: grid; gap: 22px; min-width: 0; }
.comments .section-head .count { font-size: 12px; line-height: 20px; }
.comment-gate { margin: 0 0 16px; }
.comment-gate .btn-row { margin-bottom: 0; }
/* a short note with an icon in front (comments closed, rating locked) – icons are blocks on this site */
.comment-note { display: flex; align-items: flex-start; gap: 8px; }
.comment-note .icon { width: 15px; height: 15px; margin-top: .2em; }
.comment-new { margin-bottom: 20px; }
/* the note on moderation: why a comment shows up only after a moderator checked it */
.comment-notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }
.comment-notice .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent-text); }
.comment-notice strong { color: #fff; }
.comment-form { display: grid; gap: 10px; margin: 0; }
.comment-form textarea { width: 100%; }
.comment-form-foot { display: flex; justify-content: flex-end; }
.comment-list, .comment-replies { list-style: none; margin: 0; padding: 0; }
.comment-list { display: grid; gap: 12px; }
.comment { min-width: 0; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line); background: rgba(0, 0, 0, .28); }
.comment.is-pinned { border-color: rgba(255, 255, 255, .2); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .28) 70%); }
.comment.is-pending { border-style: dashed; border-color: var(--line-strong); }
.comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.comment .avatar.comment-avatar { width: 32px; height: 32px; }
.comment-who { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.comment-who .friend-alias { margin-left: 0; }
.comment-pid { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.comment-head .stars .icon { width: 13px; height: 13px; }
.comment-time { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.comment-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge-pinned { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #f0f0f0; }
.comment-body { margin-top: 8px; color: var(--text); font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.comment-actions form { margin: 0; }
.comment-btn { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.comment-btn .icon { width: 14px; height: 14px; }
.comment-btn:hover { color: #fff; }
.comment-btn-danger:hover { color: var(--danger-text); }
.comment-replies { display: grid; gap: 8px; margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--line-strong); }
.comment-reply-item { padding: 10px 12px; background: rgba(255, 255, 255, .02); }
.comment-reply { margin-top: 10px; }
.comment-reply > summary { width: max-content; list-style: none; }
.comment-reply > summary::-webkit-details-marker { display: none; }
.comment-reply[open] > summary { margin-bottom: 8px; color: #fff; }
.comments .pager { margin-top: 16px; }
.comments .empty-inline { padding: 6px 0 0; }

/* Administration → Comments */
.admin-grid-wide { grid-template-columns: minmax(0, 1fr); margin-bottom: 18px; }
.comment-settings { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin: 0; }
.comment-settings .check { flex: 1; min-width: 240px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.comments-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.admin-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.admin-comment { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--panel); }
.admin-comment.is-pending { border-color: var(--accent-line); }
.admin-comment-tick { padding-top: 1px; cursor: pointer; }
.admin-comment-tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.admin-comment-main { min-width: 0; }
.admin-comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; }
.admin-comment-head a { display: inline-flex; align-items: center; gap: 5px; }
.admin-comment-head a .icon { width: 14px; height: 14px; }
.admin-comment-head .admin-name { margin-left: 0; }
.admin-comment-head time { margin-left: auto; }
.admin-comment-filter { color: var(--muted); }
.admin-comment-filter:hover { color: #fff; }
.admin-comment-parent { margin: 8px 0 0; padding: 4px 10px; border-left: 2px solid var(--line-strong); color: var(--text-dim); font-size: 13px; overflow-wrap: anywhere; }
.admin-comment-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.admin-comment-actions form { margin: 0; }

/* one project: its picture beside name, badges and links */
.project-hero { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 28px; margin-bottom: 28px; padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
.project-hero-pic { display: grid; place-items: center; width: 160px; height: 160px; overflow: hidden; border-radius: 22px; background: #0c0c0c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.project-hero-pic img { width: 100%; height: 100%; object-fit: cover; }
.project-hero-pic .pic-initials { font-size: 46px; }
.project-hero-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.project-hero .hero-badges { margin-bottom: 0; }
.project-name a { color: #fff; }
.project-name a:hover { color: var(--accent-text); }
/* views and comments of a project, at the right end of its name line */
.project-stats { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.project-comments { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.project-comments .icon { width: 15px; height: 15px; }
.project-comments:hover { color: #fff; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1259px) {
  /* Friends: icon (and counter) only; the label stays readable for screen readers */
  .topbar-friends-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar-friends { padding: 0 10px; }
}
@media (max-width: 1100px) {
  .game-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; }
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; padding: 38px; }
}
/* six sections (Home, Projects, Games, Tools, Favorites, Save States): from 1180 px their labels, set a little
   tighter, fit next to the logo and the account menu; below only their icons – the collapsed labels stay readable
   for screen readers (display: none would leave the links nameless) */
@media (min-width: 1180px) {
  .topbar-inner { gap: 16px; }
  .mainnav a { gap: 6px; padding: 0 10px; font-size: 13.5px; }
}
@media (min-width: 761px) and (max-width: 1179px) {
  /* logged in: the logo alone, so the six sections, Friends and the account chip fit in one row */
  .topbar-inner:has(.userchip) .brand-name, .topbar-inner:has(.userchip) .brand-home { display: none; }
  .mainnav a span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mainnav a { padding: 0 13px; }
  .mainnav a .icon { width: 19px; height: 19px; opacity: .85; }
  .mainnav a.is-active::after { bottom: 2px; }
}
@media (max-width: 960px) {
  .hero-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; padding: 28px 28px 70px 32px; }
  .hero-controls { left: 28px; }
  .hero-title { font-size: 30px; }
  .game-hero-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "info"; gap: 20px; padding: 16px 16px 22px; }
  .game-info { padding: 0 6px; }
  .game-hero::before { background: linear-gradient(180deg, rgba(9, 9, 9, .3) 0%, rgba(9, 9, 9, .85) 55%); }
  .game-body { grid-template-columns: minmax(0, 1fr); }
  /* one column: the comments come after the side panels (saves, rating, details), not before them */
  .game-main { display: contents; }
  .game-main > .comments { order: 2; }
  .game-side { order: 1; }
  .home-hero { grid-template-columns: minmax(0, 1fr); }
  .counter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { grid-template-columns: minmax(0, 520px); }
  .auth-aside { display: none; }
  .account-grid { grid-template-columns: minmax(0, 1fr); }
  .manage-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
  .invite-grid { grid-template-columns: minmax(0, 1fr); }
  .module-grid { grid-template-columns: minmax(0, 1fr); }
  /* one column: requests, then "Add a friend", the friends, sent requests and the invitation links */
  .friends-grid { grid-template-columns: minmax(0, 1fr); }
  .friends-main, .friends-side { display: contents; }
  .friends-requests { order: 1; }
  .friends-add { order: 2; }
  .friends-list { order: 3; }
  .friends-sent { order: 4; }
  .friends-invite { order: 5; }
  .form-inline-grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
}
@media (max-width: 760px) {
  :root { --topbar-h: 58px; }
  html { scroll-padding-top: 16px; }
  .container { padding: 0 16px; }
  .topbar { position: relative; } /* not sticky on phones: the two rows would take too much room */
  .topbar-inner { flex-wrap: wrap; gap: 10px 12px; padding-top: 9px; padding-bottom: 10px; }
  .brand-logo { width: 36px; height: 36px; }
  .brand-name { font-size: 14.5px; letter-spacing: .1em; }
  .mainnav { order: 4; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { flex: 1 0 auto; justify-content: center; height: 36px; padding: 0 12px; font-size: 13px; }
  .mainnav a span { display: inline; }
  .mainnav a .icon { width: 16px; height: 16px; }
  .userchip { height: 40px; padding-right: 10px; }
  .userchip-caret { display: none; }
  .userchip-id { font-size: 13px; }
  .avatar:not(.avatar-lg) { width: 32px; height: 32px; } /* large ones (account, invitation, picture picker) keep their size */
  .main { padding-top: 22px; }
  /* the carousel stacks: picture on top, text below */
  .hero { border-radius: var(--radius); margin-bottom: 40px; }
  .hero-slide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "info"; align-items: start; gap: 18px; padding: 12px 12px 4px; }
  .hero-media { border-radius: 10px; }
  .hero-slide::before { background: linear-gradient(180deg, rgba(9, 9, 9, .35) 0%, rgba(9, 9, 9, .85) 55%); }
  .hero-info { padding: 0 6px; }
  .hero-title { font-size: 27px; }
  .hero-desc { font-size: 14.5px; }
  .hero-actions { width: 100%; margin-top: 14px; }
  .hero-actions .btn { flex: 1; }
  .hero-controls { position: static; justify-content: center; padding: 10px 16px 18px; }
  .hero-dots { flex: 0 1 auto; }
  .section-head h2 { font-size: 17px; }
  /* long chip rows (tag filter, admin tabs) become one row you swipe through */
  .tagbar-scroll, .admin-tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .tagbar-scroll::-webkit-scrollbar, .admin-tabs::-webkit-scrollbar { display: none; }
  .tagbar-scroll .chip, .admin-tabs .chip { flex: none; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .store-head { align-items: stretch; }
  .filterbar select, .filterbar .btn { flex: 1; }
  .list-sort { width: 100%; }
  .list-sort select { flex: 1; min-width: 0; }
  .panel, .auth-card { padding: 18px; }
  .legal { padding: 24px 18px; }
  .toc ol { columns: 1; }
  .page-header { padding: 18px; }
  .stat-row { width: 100%; }
  .stat { flex: 1; min-width: 0; padding: 9px 6px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-links { justify-content: flex-start; }
  .footer-copy { text-align: left; }
  .install .grid-2, .form-row-2 { grid-template-columns: minmax(0, 1fr); }
  .table th, .table td { padding: 9px 12px; }
  .game-hero { border-radius: var(--radius); }
  .game-actions .btn-play { flex: 1 1 100%; }
  .home-hero { gap: 24px; margin-bottom: 40px; padding: 24px 18px 20px; border-radius: var(--radius); }
  .home-kicker { font-size: 11px; letter-spacing: .01em; }
  .home-text { font-size: 15.5px; }
  .home-actions .btn { flex: 1 1 auto; }
  .ops { padding: 12px; }
  .ops-seg b { font-size: 28px; }
  .ops-op-name em { font-size: 25px; }
  .project { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .project-pic { width: 64px; height: 64px; border-radius: 12px; }
  .project-hero { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; padding: 18px; border-radius: var(--radius); }
  .project-hero-pic { width: 80px; height: 80px; border-radius: 16px; }
  .project-hero-pic .pic-initials { font-size: 26px; }
  .comment { padding: 12px; }
  .comment-replies { padding-left: 10px; }
  .comment-reply-item { padding: 10px; }
  .admin-comment { padding: 12px; }
  .admin-comment-head time { margin-left: 0; }
  .counter-row { grid-template-columns: minmax(0, 1fr); }
  .picture-field { grid-template-columns: 72px minmax(0, 1fr); }
  .picture-preview { width: 72px; height: 72px; }
  .adminbar-inner { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .adminbar-inner > .icon { display: none; }
  .invite-item { flex-direction: column; }
  .copy-field { flex-direction: column; }
  .meta-list div { grid-template-columns: 100px minmax(0, 1fr); }
  .meta-details { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  /* the big decorative avatars leave the text more room */
  .account-id { align-items: flex-start; gap: 14px; }
  .account-id .avatar-lg, .friend-offer .avatar-lg { width: 50px; height: 50px; font-size: 22px; border-width: 2px; }
  .invite-hero .avatar-lg .icon { width: 24px; height: 24px; }
  .friend-offer { padding: 18px; gap: 14px; }
  .friend-offer .btn-row, .friend-offer .btn-row form, .friend-offer .btn-row .btn { width: 100%; }
  /* friend rows: "Name" as an icon (its title and label stay), request buttons below the text */
  .friend-edit > summary { width: 32px; padding: 0; }
  .friend-edit > summary > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .friends-requests .friend-item { flex-wrap: wrap; }
  .friends-requests .friend-main { flex-basis: calc(100% - 60px); }
  .friends-requests .friend-actions { width: 100%; padding-left: 48px; }
  .friends-requests .friend-actions form:first-child { flex: 1; }
  .friends-requests .friend-actions form:first-child .btn { width: 100%; }
  .btn { white-space: normal; }
  /* the notice: one short line until it is opened, then "What to set" moves under the text */
  .perf-note:not([open]) .perf-note-detail { display: none; }
  .perf-note[open] > summary { flex-wrap: wrap; align-items: flex-start; row-gap: 6px; }
  .perf-note[open] .perf-note-text { flex-basis: calc(100% - 48px); }
  .perf-note[open] .perf-note-more { margin-left: 48px; }
  .perf-note-list { padding-left: 36px; }
}
@media (max-width: 460px) {
  /* narrow phones: icons, and the label of the page you are on */
  .mainnav a:not(.is-active) span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mainnav { gap: 2px; }
  .mainnav a:not(.is-active) { flex: 0 0 auto; padding: 0 10px; }
  .mainnav a.is-active { flex: 1 0 auto; }
  .mainnav a .icon { width: 18px; height: 18px; }
}
@media (max-width: 360px) {
  /* six icons fit, the label of the page you are on does not (it stays readable for screen readers) */
  .mainnav a.is-active span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 420px) {
  .brand-name { font-size: 13px; letter-spacing: .06em; }
  .userchip-name { max-width: 96px; font-size: 12.5px; }
  .usermenu { gap: 6px; }
  .usermenu .btn { padding: 0 11px; }
  .card-foot .btn-ghost { display: none; }
  /* logged in: the logo alone, so friends and the account chip fit next to it (bugfish.eu stays in the footer) */
  .topbar-inner:has(.userchip) .brand-name, .topbar-inner:has(.userchip) .brand-home { display: none; }
  select { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* run every animation once, instantly: without the iteration count an "infinite" pulse (the live dots)
     would repeat every 0.01 ms and flicker */
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}