/* undergroundfightgame.com — the landing (web/README.md). The game's colours: the night sky, the neon red of the name,
   the gold of «Лихие 90-е» (scripts/title.gd). */
:root {
  --bg: #0d0a0c;
  --bg2: #16110f;
  --card: #1c1513;
  --line: #3a2a24;
  --text: #efe6dc;
  --muted: #b2a396;
  --red: #ff2a17;
  --red-glow: rgba(255, 40, 15, .55);
  --gold: #ffcc4d;
  --gold-glow: rgba(255, 170, 30, .45);
  --head: "Russo One", "Arial Black", sans-serif;
  --body: "Rubik", "Segoe UI", Roboto, sans-serif;
}
/* Chinese, Japanese: Russo One and Rubik have no such letters */
.lang-zh { --head: "Noto Sans SC", sans-serif; --body: "Noto Sans SC", sans-serif; }
.lang-ja { --head: "Noto Sans JP", sans-serif; --body: "Noto Sans JP", sans-serif; }
.lang-zh h2, .lang-ja h2, .lang-zh h3, .lang-ja h3 { font-weight: 900; }
.lang-zh .neon, .lang-ja .neon, .lang-zh .gold, .lang-ja .gold, .lang-zh .brand, .lang-ja .brand { font-family: "Russo One", sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* iOS: no bigger text in landscape (qaprovider #4985) */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
/* No overflow on html / body: it goes to the window, and in Chrome on Android with «desktop site» on (the page zoomed
   out) the bottom of the page was out of the finger's reach (Yashoda, qaprovider #5030: landscape, no footer). Nothing
   on the page is wider than the window (Chromium, 320–1280 px wide: only the forms' honeypots, off to the left). */
img, video, picture { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------------------------------------------------------------- the top bar */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 12px max(16px, calc((100vw - 1180px) / 2));
  background: linear-gradient(rgba(13, 10, 12, .92), rgba(13, 10, 12, .6));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.brand {
  font: 20px var(--head); text-decoration: none; text-transform: uppercase; letter-spacing: .02em;
  color: var(--red); text-shadow: 0 0 14px var(--red-glow);
  white-space: nowrap;
}
.top nav { display: flex; gap: 22px; margin-left: auto; }
.top nav a { text-decoration: none; color: var(--muted); font-weight: 500; transition: color .2s; }
.top nav a:hover { color: var(--text); }
/* the language menu: a globe, the list under it (as on the user's other site) */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--text);
  font: 600 14px var(--body);
}
.lang-btn svg { width: 22px; height: 22px; fill: currentColor; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: var(--red); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 250px; margin: 0; padding: 8px; list-style: none;
  background: #120d0e; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 14px 11px 38px; border-radius: 10px; text-decoration: none;
  font: 500 18px "Rubik", "Noto Sans SC", "Noto Sans JP", sans-serif; color: var(--text);
  position: relative;
}
.lang-menu a span { font: 600 13px var(--body); color: var(--muted); letter-spacing: .06em; }
.lang-menu a:hover { background: rgba(255, 255, 255, .05); }
.lang-menu a.on { background: rgba(255, 42, 23, .12); }
.lang-menu a.on::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 12px; height: 7px; margin-top: -6px;
  border: solid #4cd07d; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- the hero: the name, the promo */
.hero {
  position: relative; isolation: isolate;
  padding: 104px 16px 64px;
  text-align: center;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(13, 10, 12, .72), rgba(13, 10, 12, .86) 60%, var(--bg)),
    url("/img/title_art.jpg") center 30% / cover no-repeat;
  background:
    linear-gradient(rgba(13, 10, 12, .72), rgba(13, 10, 12, .86) 60%, var(--bg)),
    image-set(url("/img/title_art-1280.webp") type("image/webp"), url("/img/title_art.jpg") type("image/jpeg")) center 30% / cover no-repeat;
  filter: saturate(1.1);
}
@media (max-width: 800px) {    /* (dimmed under the name: a phone's half is plenty) */
  .hero-bg {
    background:
      linear-gradient(rgba(13, 10, 12, .72), rgba(13, 10, 12, .86) 60%, var(--bg)),
      image-set(url("/img/title_art-640.webp") type("image/webp"), url("/img/title_art.jpg") type("image/jpeg")) center 30% / cover no-repeat;
  }
}
.hero h1 { margin: 0 0 28px; line-height: 1; }
.neon {
  display: block;
  font: clamp(38px, 7.4vw, 92px) var(--head); text-transform: uppercase; letter-spacing: .01em;
  color: var(--red);
  text-shadow: 0 0 6px rgba(255, 90, 60, .9), 0 0 22px var(--red-glow), 0 0 60px var(--red-glow), 0 4px 0 #3a0703;
  animation: flicker 6s infinite;
}
.gold {
  display: block; margin-top: 10px;
  font: clamp(20px, 3.2vw, 38px) var(--head); text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold); text-shadow: 0 0 18px var(--gold-glow);
}
@keyframes flicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: .55; }
}

.screen {
  position: relative; max-width: 1040px; margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 60, 30, .45), 0 0 40px rgba(255, 40, 15, .25), 0 30px 80px rgba(0, 0, 0, .7);
}
/* the poster — a <picture> (WebP in a phone's size) under the video, seen till its first frame (site.js) */
.screen picture, .screen video { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen img, .screen video { width: 100%; height: 100%; object-fit: cover; }
/* «Смотреть со звуком» and the pause — under the video: over it, they covered the captions in the picture (qaprovider #4984) */
.video-ctl { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 16px auto 0; }
.play {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--text);
  transition: border-color .2s;
}
.play:hover { border-color: var(--red); }
.play .ico {
  width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.play.on .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zm8 0h4v16h-4z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zm8 0h4v16h-4z'/%3E%3C/svg%3E");
}
/* full screen (site.js; qaprovider #5032) — shown by the script where the browser can do it */
.play[hidden] { display: none; }
.full .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h7v2.4H5.4V10H3zm11 0h7v7h-2.4V5.4H14zM3 14h2.4v4.6H10V21H3zm15.6 0H21v7h-7v-2.4h4.6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h7v2.4H5.4V10H3zm11 0h7v7h-2.4V5.4H14zM3 14h2.4v4.6H10V21H3zm15.6 0H21v7h-7v-2.4h4.6z'/%3E%3C/svg%3E");
}
/* Full screen takes the video's box (site.js; Yashoda, qaprovider #5042: the video alone there was cropped on her phone):
   the box is the screen — the whole picture in it, not the page box's crop (the poster too, till the first frame), square
   corners, the way out in its corner (not on the page). The video alone there (a browser's own control) — whole as well.
   Each pseudo on its own: a browser drops a rule with a pseudo it doesn't know. */
.screen .unfull { display: none; position: absolute; top: 12px; right: 12px; z-index: 1; background: rgba(0, 0, 0, .55); }
.unfull .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 3H10v7H3V7.6h4.6zM14 3h2.4v4.6H21V10h-7zM3 14h7v7H7.6v-4.6H3zm11 0h7v2.4h-4.6V21H14z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 3H10v7H3V7.6h4.6zM14 3h2.4v4.6H21V10h-7zM3 14h7v7H7.6v-4.6H3zm11 0h7v2.4h-4.6V21H14z'/%3E%3C/svg%3E");
}
.screen:fullscreen { border-radius: 0; box-shadow: none; }
.screen:-webkit-full-screen { border-radius: 0; box-shadow: none; }
.screen:fullscreen img, .screen:fullscreen video { object-fit: contain; }
.screen:-webkit-full-screen img, .screen:-webkit-full-screen video { object-fit: contain; }
.screen:fullscreen .unfull { display: grid; }
.screen:-webkit-full-screen .unfull { display: grid; }
.screen video:fullscreen { object-fit: contain; }
.screen video:-webkit-full-screen { object-fit: contain; }
.play:focus-visible, .sound:focus-visible, .lang-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sound {
  position: relative; margin: 0;
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 10px;
  padding: 11px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 42, 23, .92); color: #fff;
  font: 600 16px var(--body);
  box-shadow: 0 0 24px var(--red-glow);
  transition: transform .15s, background .2s, opacity .3s;
}
.sound:hover { transform: scale(1.04); }
.sound.on { background: transparent; box-shadow: none; border: 1px solid var(--line); color: var(--muted); padding: 8px 16px; font-size: 14px; }
.sound .ico {
  width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lead { max-width: 700px; margin: 28px auto 22px; font-size: clamp(18px, 2.2vw, 22px); color: var(--text); }
.cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 22px 10px 16px; border-radius: 12px;
  background: #000; border: 1px solid #5a5a5a; color: #fff; text-align: left;
  text-decoration: none; transition: border-color .15s;
}
a.store:hover, a.store:focus-visible { border-color: #cfcfcf; }
.store svg { width: 30px; height: 30px; fill: #fff; }
.store small { display: block; font-size: 12px; color: #cfcfcf; line-height: 1.1; }
.store b { display: block; font: 600 20px/1.15 var(--body); }

/* ---------------------------------------------------------------- sections */
section h2 {
  margin: 0 0 34px; text-align: center;
  font: clamp(28px, 4.4vw, 46px) var(--head); text-transform: uppercase;
  color: var(--gold); text-shadow: 0 0 22px var(--gold-glow);
}
.features, .shots, .music { max-width: 1180px; margin: 0 auto; padding: 72px 16px 24px; }

.feature {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center;
  margin-bottom: 56px;
}
.feature:nth-of-type(even) { grid-template-columns: 1fr 1.25fr; }
.feature:nth-of-type(even) picture { order: 2; }
.lead, .feature p { overflow-wrap: anywhere; }
.feature img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.feature h3 {
  margin: 0 0 12px;
  font: clamp(22px, 2.6vw, 30px) var(--head); text-transform: uppercase;
  color: var(--red); text-shadow: 0 0 14px rgba(255, 40, 15, .35);
}
.feature p { margin: 0; color: var(--muted); font-size: 18px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.grid a {
  display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: zoom-in;
  background: #000; aspect-ratio: 16 / 9;
}
.grid picture { height: 100%; }
.grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s, opacity .35s; opacity: .92; }
.grid a:hover img { transform: scale(1.05); opacity: 1; }

.music .credit { text-align: center; margin: -18px 0 28px; color: var(--muted); }
.tracks { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; }
.tracks li {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
  padding: 10px 14px; margin-bottom: 8px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
}
.tracks li.playing { border-color: var(--red); box-shadow: 0 0 18px rgba(255, 40, 15, .2); }
.tracks button {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font-size: 16px; display: grid; place-items: center;
}
.tracks .name { font-weight: 600; }
.tracks .sub { display: block; font-size: 14px; color: var(--muted); font-weight: 400; }
.tracks .bar { grid-column: 2 / 4; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; display: none; cursor: pointer; }
.tracks li.playing .bar { display: block; }
.tracks .bar i { display: block; height: 100%; width: 0; background: var(--red); }
.tracks time { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

footer { text-align: center; padding: 48px 16px 40px; color: var(--muted); border-top: 1px solid rgba(255, 255, 255, .05); margin-top: 48px; }
footer p { margin: 4px 0; }
footer a { color: var(--muted); display: inline-block; padding: 10px 6px; }     /* a finger's target, not a line's (qaprovider #4982) */
footer .small { font-size: 14px; opacity: .8; }     /* 5.4:1 on the page (.7 gave 4.4:1 — under WCAG's 4.5: Daria's review) */

/* ---------------------------------------------------------------- the lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .92);
}
.lightbox[hidden] { display: none; }
.lightbox.swipe { touch-action: pan-y pinch-zoom; }     /* across — site.js's swipe, not the browser's Back (#5036) */
.lightbox img { max-width: 94vw; max-height: 88vh; border-radius: 8px; }
.lightbox button {
  position: absolute; border: 0; background: none; color: #fff; cursor: pointer;
  font-size: 54px; line-height: 1; padding: 12px 18px; opacity: .8;
}
.lightbox button:hover { opacity: 1; }
.lb-close { top: 8px; right: 12px; }
.lb-prev { left: 4px; }
.lb-next { right: 4px; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 800px) {
  .top { gap: 12px; }
  .top nav { display: none; }
  .lang { margin-left: auto; }
  .lang-menu { min-width: 230px; }
  .brand { font-size: 17px; }
  .hero { padding-top: 84px; }
  .screen { border-radius: 10px; margin: 0 -4px; }
  .sound { font-size: 15px; padding: 10px 18px; }
  .video-ctl { gap: 8px; }        /* three in a row: on a 360 px phone «Смотреть со звуком» in one line (on a 320 — two) */
  .feature, .feature:nth-of-type(even) { grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; }
  .feature:nth-of-type(even) picture { order: 0; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .features, .shots, .music { padding-top: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .neon { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- the privacy policy, the deletion page (web/legal/) */
.legal-links a { margin: 0 2px; }
.legal { max-width: 820px; margin: 0 auto; padding: 96px 20px 24px; }
.legal section + section { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.legal h1 { font: 34px/1.2 var(--head); color: var(--red); text-shadow: 0 0 14px var(--red-glow); margin: 0 0 6px; }
.legal h2 { font: 22px/1.3 var(--head); color: var(--gold); margin: 32px 0 8px; }
.legal .updated { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
.legal p, .legal li { color: var(--text); }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--gold); }
.legal a.button {
  display: inline-block; padding: 12px 22px; border-radius: 12px; text-decoration: none; font-weight: 700;
  background: var(--red); color: #fff; box-shadow: 0 0 18px var(--red-glow);
}
/* «← Back to the home page»: above the text and under it (qaprovider #5066: «no visible back button» on the policy) */
.legal .back-row { margin: 0 0 18px; }
.legal .back-row:last-child { margin: 40px 0 0; }
.legal a.back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--text);
  font-weight: 500; font-size: 15px; text-decoration: none;
}
.legal a.back::before { content: "\2190"; content: "\2190" / ""; color: var(--gold); font-size: 18px; line-height: 1; }
.legal a.back:hover, .legal a.back:focus-visible { border-color: var(--gold); }
@media (max-width: 600px) { .legal h1 { font-size: 27px; } .legal { padding-top: 84px; } }
.legal h2 { text-align: left; text-transform: none; letter-spacing: 0; }

/* The deletion request on /delete-account (build_site.py delete_form, site.js, server/deletion.js) */
.del-form { display: grid; gap: 14px; max-width: 560px; margin: 20px 0 0; padding: 22px 20px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; }
.del-form label { display: grid; gap: 6px; font-weight: 500; }
.del-form small { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }
.del-form input, .del-form textarea {
  width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--text); outline: none;
}
.del-form textarea { resize: vertical; min-height: 64px; }
.del-form input:focus, .del-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 204, 77, .18); }
.del-form [aria-invalid=true] { border-color: #ff7a5c; }
.del-form button {
  justify-self: start; font: inherit; font-weight: 700; font-size: 17px; padding: 14px 24px; border-radius: 12px; border: 0;
  cursor: pointer; background: var(--red); color: #fff; box-shadow: 0 0 18px var(--red-glow);
}
.del-form button:disabled { opacity: .6; cursor: default; }
.del-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.del-form[hidden], .del-done[hidden] { display: none; }
.del-msg { margin: 0; color: #ff7a5c; }
.del-legal { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.legal .del-legal a { color: var(--muted); }
.del-done { max-width: 560px; margin: 20px 0 0; padding: 22px 20px; background: var(--card); border: 1px solid var(--gold);
  border-radius: 14px; box-shadow: 0 0 30px var(--gold-glow); }
.del-done h3 { margin: 0 0 8px; font: 24px/1.2 var(--head); color: var(--gold); }
.del-done p { margin: 0; }
.del-alt { max-width: 560px; margin: 28px 0 0; }
.del-alt h3 { margin: 0 0 6px; font: 18px/1.3 var(--head); color: var(--text); }
.del-alt pre {
  margin: 10px 0; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.6 var(--body);
  color: var(--text); background: var(--bg2); border: 1px dashed var(--line); border-radius: 10px;
}
.del-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.del-btns button, .legal .del-btns a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; font: inherit; font-size: 15px;
  font-weight: 500; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--gold);
  cursor: pointer; text-decoration: none;
}
.del-btns button.ok { border-color: var(--gold); }
/* two actions in the row — the mail program first and filled; the rest under «more» (qaprovider #4986) */
.legal .del-btns a.del-main { background: var(--gold); border-color: var(--gold); color: var(--bg); font-weight: 700; }
.del-more { margin: 12px 0 0; }
.del-more summary { display: list-item; min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--muted); font-size: 15px; }
.del-more summary:hover, .del-more[open] summary { color: var(--text); }
.del-more .del-btns { margin: 4px 0 0; }
.del-nomail { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--bg2); border-radius: 0 10px 10px 0; }
.del-nomail[hidden] { display: none; }
.del-fromgame { max-width: 560px; margin: 14px 0 0; color: var(--muted); font-size: 15px; }

/* The deletion from the game (build_site.py delete_game, site.js; qaprovider #5033): his fighter, what goes, one button */
.del-game { max-width: 560px; margin: 24px 0 0; padding: 22px 20px; background: var(--card); border: 1px solid var(--red);
  border-radius: 14px; box-shadow: 0 0 24px rgba(255, 40, 15, .18); }
.del-game h2 { margin-top: 0; overflow-wrap: anywhere; }
.del-game[hidden], .del-manual[hidden] { display: none; }
.legal .del-warn { font-weight: 700; color: #ff7a5c; }
.del-yes { font: inherit; font-weight: 700; font-size: 17px; min-height: 48px; padding: 14px 24px; border-radius: 12px; border: 0;
  cursor: pointer; background: var(--red); color: #fff; box-shadow: 0 0 18px var(--red-glow); }
.del-yes:disabled { opacity: .6; cursor: default; }

/* The bug report the game opens (build_site.py report_page, site.js; qaprovider #5028) — made for a phone */
.rep-gate { padding: 14px 16px; border-left: 3px solid var(--gold); background: var(--bg2); border-radius: 0 10px 10px 0; }
.rep-gate[hidden], .rep-new[hidden], .rep-one[hidden], .rep-lists[hidden] { display: none; }
.rep-dev { margin: 0; color: var(--muted); font-size: 15px; }
.rep-dev b { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.rep-form input[type=file] { padding: 10px; font-size: 15px; }
.legal .rep-picked { list-style: none; margin: -6px 0 0; padding: 0; display: grid; gap: 6px; }
.rep-picked:empty { display: none; }
.rep-picked li { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 6px 6px 6px 12px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; font-size: 15px; overflow-wrap: anywhere; }
.rep-form .rep-picked button { flex: none; white-space: nowrap; min-height: 40px; padding: 6px 12px; font-size: 14px; font-weight: 500;
  background: transparent; color: var(--gold); border: 1px solid var(--line); box-shadow: none; }
.rep-private { margin: 0; color: var(--muted); font-size: 14px; }
.rep-again { margin: 12px 0 0; }
.legal .rep-list { list-style: none; padding: 0; margin: 0; }
.rep-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--line); }
.rep-list li a { font-weight: 500; overflow-wrap: anywhere; }
.rep-list li small { margin-left: auto; color: var(--muted); font-size: 13px; }
.rep-list li.none { color: var(--muted); }
.rep-st { font-size: 13px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.rep-st.st-taken { color: var(--gold); border-color: var(--gold); }
.rep-st.st-fixed { color: #7ad37a; border-color: #7ad37a; }
.rep-st.st-rejected { color: #ff7a5c; }
.rep-card h2 { margin-top: 12px; overflow-wrap: anywhere; }
.rep-meta { color: var(--muted); font-size: 14px; }
.rep-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.rep-card h3 { font-size: 16px; color: var(--muted); font-weight: 500; }
.rep-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rep-files img, .rep-files video { width: 100%; max-height: 320px; object-fit: contain; background: #000; border-radius: 10px; border: 1px solid var(--line); }

/* Google Analytics' consent (site.js; in Europe): a bar at the bottom, the page goes on under it */
#consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: rgba(22, 17, 15, .97);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); color: var(--text);
  font-size: 15px; line-height: 1.4;
}
#consent p { margin: 0; flex: 1; }
#consent p a { color: var(--gold); white-space: nowrap; }
#consent .btns { display: flex; gap: 8px; flex-shrink: 0; }
#consent button {
  font: inherit; font-weight: 500; padding: 9px 16px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line);
  background: transparent; color: var(--muted);
}
#consent button.yes { background: var(--gold); border-color: var(--gold); color: #1a1208; }
#consent button:hover { filter: brightness(1.1); }
@media (max-width: 600px) {
  #consent { flex-direction: column; align-items: stretch; gap: 8px; bottom: 8px; left: 8px; right: 8px; padding: 10px 12px;
    font-size: 14px; line-height: 1.35; }
  #consent .btns { justify-content: flex-end; }
  #consent button { padding: 8px 14px; }
}
/* phones on their side (and other short screens): the top bar goes away with the page, not over it (qaprovider #4985) */
@media (max-height: 500px) and (orientation: landscape) {
  .top { position: absolute; padding-top: 8px; padding-bottom: 8px; }
  section h2 { font-size: 28px; margin-bottom: 22px; }
  .neon { font-size: 52px; }
  #consent { flex-direction: row; align-items: center; max-width: 820px; }
}

/* The wishlist: the very bottom of the page (site.js, server/wishlist.js) */
.wishlist { max-width: 720px; margin: 0 auto; padding: 72px 16px 24px; text-align: center; }
.wishlist .lead2 { margin: -12px 0 24px; color: var(--muted); font-size: 18px; }
#wish-form { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; }
#wish-form input[type=email] {
  flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); outline: none;
}
#wish-form input[type=email]:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 204, 77, .18); }
#wish-form button {
  font: inherit; font-weight: 700; font-size: 17px; padding: 14px 22px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--gold); color: #1a1208; box-shadow: 0 0 22px var(--gold-glow); white-space: nowrap;
}
#wish-form button:disabled { opacity: .6; cursor: default; }
#wish-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.wish-msg { margin: 12px 0 0; color: #ff7a5c; }
.wish-legal { margin: 16px auto 0; max-width: 560px; font-size: 13px; line-height: 1.5; color: var(--muted); opacity: .85; }
.wish-legal a { color: var(--muted); }
.grecaptcha-badge { visibility: hidden; }     /* Google's notice is under the form (wish-legal), as its rules allow */
.wish-done { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .72); }
.wish-done[hidden] { display: none; }
.wish-done .box { max-width: 460px; width: 100%; background: var(--card); border: 1px solid var(--gold); border-radius: 14px;
  padding: 28px 24px; text-align: center; box-shadow: 0 0 40px var(--gold-glow); }
.wish-done h3 { margin: 0 0 12px; font-family: var(--head); font-size: 26px; color: var(--gold); }
.wish-done p { margin: 0 0 22px; font-size: 17px; line-height: 1.5; }
.wish-done button { font: inherit; font-weight: 700; padding: 12px 32px; border-radius: 10px; border: 0; background: var(--gold);
  color: #1a1208; cursor: pointer; }
@media (max-width: 600px) {
  #wish-form { flex-direction: column; }
}