@font-face {
  font-family: Space;
  src: url("/fonts/SpaceGrotesk-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: Oxanium;
  src: url("/fonts/Oxanium-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: October;
  src: url("/fonts/october-crow.ttf") format("truetype");
  font-display: swap;
}
:root {
  --bg: #101113;
  --panel: #191b1e;
  --panel2: #1e2024;
  --line: #2c2e32;
  --text: #f4f4ed;
  --muted: #909298;
  --volt: #efff00;
  --purple: #b39aff;
  --red: #f18b8c;
  --radius: 12px;
  color-scheme: dark;
  font-family: Space, system-ui, sans-serif;
  font-size: 14px;
  scroll-behavior: smooth;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button {
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
select,
input,
textarea {
  outline-offset: 5px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 5px;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  line-height: 1.12;
  letter-spacing: -0.04em;
}
p {
  color: var(--muted);
  line-height: 1.75;
}
h1 {
  font-size: clamp(42px, 5.5vw, 80px);
  font-weight: 600;
}
h2 {
  font-size: 38px;
  font-weight: 500;
}
h3 {
  font-size: 21px;
  font-weight: 500;
}
.horror {
  font-family: October, Oxanium, sans-serif;
  letter-spacing: 0.01em;
  font-weight: 400 !important;
}
::selection {
  background: var(--volt);
  color: #111;
}
code,
kbd {
  font-family: monospace;
}
code {
  color: var(--volt);
}
kbd {
  padding: 2px 6px;
  border: 1px solid currentColor;
  opacity: 0.65;
  border-radius: 4px;
  font-size: 10px;
}
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}
.brand {
  display: inline-flex;
  align-items: center;
}
.brand img {
  width: 154px;
  height: 44px;
  object-fit: contain;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 22px;
  background: var(--volt);
  color: #131508;
  border: 1px solid var(--volt);
  border-radius: 7px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}
.button:hover {
  background: #f4ff5c;
  box-shadow: 0 0 22px #efff0012;
  transform: translateY(-2px);
}
.button.outline {
  background: transparent;
  color: var(--text);
  border-color: #3c3e43;
}
.button.outline:hover {
  border-color: var(--volt);
  color: var(--volt);
}
.button.small {
  padding: 10px 15px;
  font-size: 12px;
}
.button.wide {
  width: 100%;
  margin-top: 12px;
}
.button-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.icon-btn {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  color: #94979d;
  transition: 0.2s;
}
.icon-btn:hover {
  background: #ffffff08;
  color: var(--volt);
  border-color: #3d4140;
}
.text-btn {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.text-btn:hover {
  color: var(--volt);
}
.text-btn .icon {
  width: 15px;
  height: 15px;
}
.text-btn.danger {
  color: var(--red);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #b5b8b4;
  margin-bottom: 18px;
}
.eyebrow .icon {
  width: 16px;
  height: 16px;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 10px #efff0044;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid #3c3f38;
}
.badge.live {
  color: var(--volt);
  background: #efff0009;
  border-color: #efff0033;
}
.badge.muted {
  color: #aaadb5;
  border-color: #45464c;
  background: #181a1eb3;
}
.badge.purple,
.purple {
  color: var(--purple);
}
.muted-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #7d8087;
}
.outlined-tag {
  font-size: 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 10px 13px;
  letter-spacing: 0.12em;
  color: #9c9da5;
  display: inline-block;
}
.skip-link {
  position: fixed;
  top: -100px;
  z-index: 50;
  background: var(--volt);
  color: #111;
  padding: 12px;
}
.skip-link:focus {
  top: 8px;
}
.loading {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.loading img {
  width: 90px;
  height: 90px;
  animation: breathe 1.5s infinite;
}
.loading p {
  margin-top: 20px;
}
.site-header {
  max-width: 1600px;
  margin: auto;
  height: 94px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ffffff09;
  gap: 65px;
}
.site-header nav {
  display: flex;
  gap: 30px;
  font-size: 12px;
  color: #a1a2a6;
}
.site-header nav a {
  transition: color 0.2s;
}
.site-header nav a:hover {
  color: var(--volt);
}
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.landing-hero {
  padding: 58px 5% 0;
  max-width: 1600px;
  margin: auto;
  overflow: hidden;
}
.hero-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 42px;
  align-items: center;
}
.hero-heading h1 {
  line-height: 1.01;
  letter-spacing: -0.065em;
  margin-bottom: 24px;
}
.hero-heading h1 span {
  color: var(--volt);
}
.hero-heading p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 0;
}
.hero-aside {
  width: 240px;
  display: flex;
  gap: 20px;
  align-items: center;
  position: relative;
  margin-right: 40px;
}
.hero-aside img {
  width: 128px;
  height: 128px;
  opacity: 0.95;
  transform: rotate(-9deg);
  animation: float 7s ease-in-out infinite;
}
.hero-aside span {
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1.6;
  color: #74777c;
}
.hero-aside:before {
  position: absolute;
  content: "";
  border: 1px solid #efff0010;
  width: 280px;
  height: 280px;
  left: -50px;
  border-radius: 50%;
}
.hero-aside:after {
  position: absolute;
  content: "";
  border: 1px dashed #efff0010;
  width: 350px;
  height: 350px;
  left: -85px;
  border-radius: 50%;
}
.games-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #b6b7b9;
  margin-bottom: 16px;
}
.games-heading > span:last-child {
  color: #73767b;
  display: flex;
  gap: 10px;
  align-items: center;
}
.games-heading i {
  font-style: normal;
  color: #3d4144;
}
.games-heading .icon {
  width: 15px;
  height: 15px;
}
.game-stage {
  display: flex;
  gap: 5px;
  width: calc(100% + 45px);
  margin-left: -22px;
  height: 430px;
  isolation: isolate;
}
.game-panel {
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
  border: 0;
  text-align: left;
  background: #1d2025;
  padding: 0;
  overflow: hidden;
  transform: skew(-7deg);
  transition:
    flex 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.4s;
  isolation: isolate;
}
.game-panel.available {
  flex: 2.2;
}
.game-art {
  position: absolute;
  inset: -8% -28%;
  background-position: center;
  background-size: cover;
  transform: skew(7deg) scale(1.04);
  transition:
    transform 0.8s,
    filter 0.4s;
  filter: saturate(0.65) brightness(0.65);
}
.game-panel.available .game-art {
  filter: saturate(0.8) brightness(0.95);
}
.game-panel:hover {
  flex: 2.4;
}
.game-stage:has(.game-panel:hover) .available:not(:hover) {
  flex: 1.4;
}
.game-panel:hover .game-art {
  transform: skew(7deg) scale(1.11);
  filter: saturate(1) brightness(1);
}
.game-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #11121425 0%,
    transparent 22%,
    #090a0c33 40%,
    #08090be6 90%,
    #08090b 100%
  );
}
.game-panel.available:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--volt);
  box-shadow: 0 0 18px #efff0099;
}
.game-upper {
  position: absolute;
  top: 20px;
  left: 24px;
  right: 18px;
  transform: skew(7deg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff65;
  font: 10px Oxanium;
}
.game-upper > .icon {
  width: 13px;
  height: 13px;
}
.game-caption {
  position: absolute;
  bottom: 25px;
  left: 25px;
  right: 16px;
  transform: skew(7deg);
}
.game-genre {
  font-size: 8px;
  letter-spacing: 0.04em;
  color: #b2b5bb;
  white-space: nowrap;
  display: block;
  margin-bottom: 9px;
  opacity: 0.7;
}
.game-name {
  font-family: Oxanium, Space, sans-serif;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.04em;
  overflow-wrap: normal;
  margin-bottom: 12px;
}
.game-name.horror {
  font-size: 30px;
}
.game-caption p {
  font-size: 11px;
  color: #c3c4c7;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  transition: 0.35s;
}
.game-panel:hover .game-caption p,
.game-panel.available .game-caption p {
  max-height: 65px;
  margin: 0 0 15px;
}
.game-go {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 8px;
  letter-spacing: 0.06em;
  color: #a8acaf;
}
.game-go .icon {
  width: 12px;
  height: 12px;
}
.available .game-go {
  color: var(--volt);
  font-weight: 700;
}
.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #6c7077;
  font-size: 10px;
  padding: 25px 0 32px;
  border-bottom: 1px solid var(--line);
}
.hero-bottom > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-bottom > span:last-child {
  font-size: 8px;
  letter-spacing: 0.12em;
}
.hero-bottom .icon {
  width: 14px;
  height: 14px;
  color: var(--volt);
}
.down-arrow {
  font-size: 18px;
  margin-left: 8px;
}
.section,
.creators {
  max-width: 1600px;
  margin: auto;
  padding: 86px 5%;
}
.section-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 35px;
}
.section-top h2 {
  font-size: 42px;
  margin: 0;
  letter-spacing: -0.045em;
}
.section-top > .button {
  margin-left: auto;
}
.section-top > p {
  margin-bottom: 2px;
  font-size: 13px;
}
.section-top .eyebrow {
  color: var(--volt);
  margin-bottom: 16px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feature-card {
  position: relative;
  background: var(--panel);
  border: 1px solid #2a2c30;
  border-radius: 10px;
  padding: 28px;
  overflow: hidden;
  transition: 0.3s;
}
.feature-card:hover {
  border-color: #efff0066;
  transform: translateY(-5px);
  background: #1e2022;
}
.feature-card h3 {
  font-size: 23px;
  margin-bottom: 13px;
}
.feature-card > p {
  font-size: 12px;
  max-width: 90%;
  margin: 0;
}
.feature-number {
  font: 9px Oxanium;
  letter-spacing: 0.13em;
  color: #86898d;
  display: block;
  margin-bottom: 12px;
}
.feature-arrow {
  position: absolute;
  right: 23px;
  bottom: 24px;
  color: var(--volt);
}
.preview-icons,
.wave-preview,
.guide-preview {
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 34px;
  background: #141619;
  border: 1px solid #282c2e;
  border-radius: 8px;
}
.preview-icons {
  gap: 9px;
}
.preview-icons > span {
  padding: 12px 8px;
  border: 1px solid #353837;
  border-radius: 7px;
  transform: rotate(-8deg);
  box-shadow: 0 6px 18px #0006;
}
.preview-icons > span:nth-child(2n) {
  transform: translateY(-12px) rotate(5deg);
}
.preview-icons .icon {
  width: 24px;
  height: 24px;
}
.wave-preview {
  position: relative;
  gap: 4px;
  align-items: center;
  padding-bottom: 10px;
}
.wave-preview i {
  background: var(--volt);
  height: var(--h);
  width: 3px;
  border-radius: 2px;
  opacity: 0.5;
  animation: wave 2s calc(var(--i) * -0.08s) infinite alternate;
}
.wave-preview > span {
  position: absolute;
  bottom: 4px;
  right: 10px;
  background: #141619;
  font: 16px Oxanium;
  color: #eee;
}
.wave-preview small {
  font-size: 9px;
  color: var(--muted);
}
.guide-preview {
  display: block;
  padding: 20px;
  color: #9aa099;
}
.guide-preview > span {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 6px;
  letter-spacing: 0.1em;
}
.guide-preview > span .icon {
  width: 13px;
  height: 13px;
}
.guide-preview b {
  font: 23px October;
  display: block;
  margin: 8px 0 12px;
  color: #c9cdbd;
}
.guide-preview i {
  display: block;
  height: 2px;
  margin-bottom: 5px;
  background: #454a46;
  width: 82%;
}
.guide-preview i:last-child {
  width: 60%;
}
.creators {
  padding-top: 30px;
  padding-bottom: 80px;
}
.creators .section-top .eyebrow {
  color: var(--purple);
}
.creators .section-top p {
  margin: 20px 0 0;
  font-size: 13px;
}
.partner-empty {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 34px 12px;
}
.twitch-orbit {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b39aff22;
  background: #b39aff05;
  color: var(--purple);
}
.twitch-orbit .icon {
  width: 28px;
  height: 28px;
}
.partner-empty h3 {
  font-size: 21px;
  margin-bottom: 10px;
}
.partner-empty p {
  font-size: 12px;
  margin: 0;
}
.partner-empty > .badge {
  margin-left: auto;
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.partner {
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 20px;
  background: var(--panel);
  transition: 0.3s;
}
.partner:hover {
  border-color: var(--purple);
}
.partner-avatar {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: #b39aff20;
  color: var(--purple);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-weight: 700;
}
.partner-avatar .icon {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
}
.partner h3 {
  font-size: 17px;
  margin: 0 0 6px;
}
.partner p {
  font-size: 10px;
  margin: 0;
}
.partner small {
  color: var(--muted);
  font-size: 10px;
}
.partner > .badge {
  margin-left: auto;
}
.partner > .icon {
  width: 15px;
  height: 15px;
}
.closing {
  margin: 0 5%;
  text-align: center;
  border-top: 1px solid var(--line);
  padding: 75px 15px;
  background: radial-gradient(ellipse at center, #efff0005, transparent 70%);
}
.closing .eyebrow {
  justify-content: center;
}
.closing h2 {
  font-size: 36px;
  margin-bottom: 27px;
}
.closing em {
  font-style: normal;
  color: #838884;
}
.site-footer {
  border-top: 1px solid var(--line);
  padding: 35px 5% 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1600px;
  margin: auto;
}
.site-footer .brand img {
  width: 120px;
  height: 30px;
}
.site-footer p {
  font-size: 11px;
  margin: 7px 0 0;
}
.footer-links {
  display: flex;
  gap: 25px;
  align-items: center;
  font-size: 10px;
  color: #8f9294;
}
.footer-links a:hover {
  color: var(--volt);
}
.site-footer > small {
  width: 100%;
  font-size: 9px;
  color: #5e6367;
}
.partners-page {
  padding: 65px 0;
}
.partners-page .creators {
  min-height: 60vh;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 222px;
  padding: 23px 18px;
  background: #131518;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.sidebar > .brand {
  padding-left: 5px;
  margin-bottom: 22px;
}
.sidebar .brand img {
  width: 149px;
  height: 39px;
}
.back-home {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #90959a;
  font-size: 11px;
  padding: 9px 10px;
  margin-bottom: 22px;
}
.back-home .icon {
  width: 15px;
  height: 15px;
}
.back-home:hover {
  color: var(--volt);
}
.sidebar-game {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #1c1e22;
  padding: 11px 9px;
  border: 1px solid #33353a;
  border-radius: 6px;
  margin-bottom: 35px;
}
.sidebar-game img {
  width: 32px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
}
.sidebar-game span {
  display: block;
  font-size: 7px;
  letter-spacing: 0.14em;
  color: #8a8e94;
  margin-bottom: 5px;
}
.sidebar-game b {
  font-size: 17px;
}
.nav-label {
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #60656c;
  padding-left: 11px;
  margin-bottom: 14px;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar nav > a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #93979e;
  padding: 12px 11px;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: 0.2s;
}
.sidebar nav > a .icon {
  width: 17px;
  height: 17px;
}
.sidebar nav > a:hover {
  background: #202327;
  color: #e2e5dd;
}
.sidebar nav > a.active {
  background: #efff000c;
  border-color: #efff001f;
  color: var(--volt);
}
.nav-count {
  margin-left: auto;
  border: 1px solid #efff0026;
  background: #efff000d;
  border-radius: 3px;
  font: 9px Oxanium;
  padding: 2px 5px;
}
.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 9px 0;
}
.sidebar-foot > a {
  font-size: 10px;
  color: #8b9096;
  display: flex;
  gap: 9px;
  align-items: center;
}
.sidebar-foot > a .icon {
  width: 15px;
  height: 15px;
}
.sidebar-foot > a:hover {
  color: var(--volt);
}
.data-status {
  font-size: 7px;
  letter-spacing: 0.13em;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 17px;
  color: #abb0a9;
}
.data-status .status-dot {
  width: 4px;
  height: 4px;
  margin-right: 6px;
}
.data-status small {
  display: block;
  font-size: 8px;
  letter-spacing: 0;
  color: #5d646b;
  margin-top: 4px;
  margin-left: 11px;
}
.tool-body {
  margin-left: 222px;
}
.tool-top {
  height: 73px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 34px;
  gap: 15px;
  background: #101113ed;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(15px);
}
.tool-top > span {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #6f777c;
}
.tool-top i {
  font-style: normal;
  margin: 0 12px;
  color: #42494e;
}
.tool-top b {
  font-weight: 400;
  color: #a5abae;
}
.tool-top > div {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tool-top .button {
  font-size: 10px;
}
.tool-main {
  padding: 38px 34px 60px;
  max-width: 1800px;
  margin: auto;
}
.page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
}
.page-title .eyebrow {
  font-size: 8px;
  color: var(--volt);
  margin-bottom: 12px;
}
.page-title h1 {
  font-size: 42px;
  line-height: 1.2;
  margin: 0 0 11px;
}
.page-title h1.horror {
  font-size: 49px;
}
.page-title p {
  font-size: 11px;
  margin: 0;
}
.page-title > .badge {
  font-size: 8px;
}
.tool-footer {
  border-top: 1px solid #22262a;
  margin: 0 34px;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  color: #5f686e;
  font-size: 9px;
}
.tool-footer a:hover {
  color: #bbc2c3;
}
.journal-grid {
  display: grid;
  grid-template-columns: 226px 1fr;
  gap: 22px;
}
.filter-panel {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 18px 15px;
  background: #16181b;
  height: fit-content;
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}
.panel-heading h3 {
  font-size: 12px;
  letter-spacing: 0;
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
}
.panel-heading h3 .icon {
  width: 15px;
  height: 15px;
}
.panel-heading h2 {
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 0;
}
.panel-heading .text-btn {
  font-size: 9px;
  color: #8c9298;
}
.panel-heading .muted-label {
  font-size: 6px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0;
}
.field > span {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #8b9298;
  font-weight: 500;
}
.field input,
.field select,
select,
input[type="text"],
input[type="password"],
input[type="number"],
input:not([type]),
textarea,
.big-search {
  background: #121417;
  border: 1px solid #34383d;
  border-radius: 5px;
  padding: 10px 11px;
  color: #c6cbd0;
  max-width: 100%;
  min-width: 0;
  font-size: 11px;
  line-height: 1.5;
}
.field select {
  width: 100%;
  padding-right: 20px;
  appearance: auto;
}
.field input:focus,
textarea:focus,
input:focus {
  border-color: var(--volt);
  outline: none;
}
input::placeholder,
textarea::placeholder {
  color: #5a626c;
}
.panel-divider {
  height: 1px;
  background: var(--line);
  margin: 22px 0;
}
.hint {
  font-size: 9px;
  color: #6c777f;
  line-height: 1.7;
}
.filter-panel .hint {
  font-size: 8px;
  margin: 0 0 12px;
}
.evidence-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.evidence-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 10px;
  text-align: left;
  color: #bfc5c6;
  transition: 0.15s;
}
.evidence-btn:hover {
  background: #ffffff04;
  border-color: #363c3e;
}
.evidence-symbol {
  display: inline-flex;
}
.evidence-btn .icon {
  width: 17px;
  height: 17px;
}
.check-box {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid #454c50;
  border-radius: 3px;
  color: #111;
}
.check-box .icon {
  width: 12px;
  height: 12px;
}
.evidence-btn.found {
  background: #efff000d;
  border-color: #efff0020;
  color: #f6ffd5;
}
.evidence-btn.found .check-box {
  background: var(--volt);
  border-color: var(--volt);
}
.evidence-btn.absent {
  color: #906567;
  background: #d9555508;
}
.evidence-btn.absent .check-box {
  color: #ef9698;
  border-color: #b7646a;
}
.evidence-btn.absent > span:nth-child(2) {
  text-decoration: line-through;
}
.filter-panel .reduced-note {
  margin-top: 15px;
  color: #8a9498;
}
.results {
  min-width: 0;
}
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
  min-height: 35px;
}
.results-bar h2 {
  font-size: 22px;
  margin: 0;
}
.results-bar h2 > span {
  font-size: 11px;
  color: #7c858b;
  letter-spacing: 0;
  margin-left: 4px;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #34373b;
  border-radius: 6px;
  background: #15171a;
  padding: 0 10px;
}
.search-field .icon {
  width: 15px;
  height: 15px;
  color: #777f86;
}
.search-field input {
  border: 0 !important;
  background: transparent !important;
  outline: 0 !important;
  font-size: 10px;
  width: 100%;
  padding: 9px 0;
}
.results-bar .search-field {
  width: 220px;
}
.ghost-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.ghost-card {
  background: #191b1e;
  border: 1px solid #303438;
  border-radius: 8px;
  padding: 20px 18px 8px;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.ghost-card:hover {
  border-color: #555b58;
  transform: translateY(-2px);
}
.ghost-card.chosen {
  border-color: #efff0077;
  background: #efff0006;
}
.ghost-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}
.ghost-index {
  font: 9px Oxanium;
  color: #666f75;
}
.ghost-top h3 {
  font-size: 27px;
  margin: 0;
}
.ghost-top .audio-quick {
  margin-left: auto;
  background: #ffffff04;
  width: 28px;
  height: 28px;
}
.ghost-top .audio-quick .icon {
  width: 15px;
  height: 15px;
}
.ghost-evidence {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 19px;
}
.ghost-evidence > span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 7px;
  background: #101216;
  border-radius: 4px;
  padding: 5px 6px;
  border: 1px solid #33393c;
}
.ghost-evidence .icon {
  width: 11px;
  height: 11px;
}
.ghost-stats {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  padding: 13px 0;
  border-top: 1px solid #313639;
  border-bottom: 1px solid #313639;
  gap: 8px;
}
.ghost-stats small {
  display: block;
  font-size: 6px;
  letter-spacing: 0.05em;
  color: #737d84;
  margin-bottom: 6px;
}
.ghost-stats b {
  font: 13px Oxanium;
  color: #d4dad7;
}
.ghost-stats b > span {
  font: 8px Space;
  color: #7f888a;
}
.ghost-tell {
  font-size: 10px;
  line-height: 1.7;
  margin: 14px 0;
  min-height: 51px;
  color: #969fa3;
}
.ghost-actions {
  display: flex;
  align-items: center;
  border-top: 1px solid #282c30;
  padding: 8px 0 0;
  gap: 5px;
}
.ghost-actions .text-btn {
  font-size: 9px;
  color: #b9c2c2;
  margin-right: auto;
}
.ghost-actions .icon-btn {
  width: 26px;
  height: 26px;
}
.ghost-actions .icon-btn .icon {
  width: 14px;
  height: 14px;
}
.ghost-actions .selected {
  color: var(--volt);
  background: #efff0015;
}
.footnote {
  font-size: 9px;
  color: #646e74;
  margin: 20px 0;
  line-height: 1.8;
}
.footnote a {
  color: #a9b5b3;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.selection-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #efff0033;
  background: #efff0008;
  color: #d4e38f;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 11px;
  margin-bottom: 14px;
}
.selection-banner > .text-btn {
  margin-left: auto;
  color: #a4aa7b;
}
.selection-banner .icon {
  width: 15px;
  height: 15px;
}
.restore {
  margin-bottom: 14px;
  font-size: 10px;
}
.quick-bpm {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px;
  background: #1a1d1d;
  border: 1px solid #353c34;
  border-radius: 8px;
  position: sticky;
  bottom: 12px;
  z-index: 5;
  box-shadow: 0 10px 20px #0003;
}
.quick-bpm > div {
  font-size: 10px;
  line-height: 1.5;
  flex: 1;
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 6px;
}
.quick-bpm > div > .icon {
  grid-row: span 2;
  color: var(--volt);
}
.quick-bpm > div > b {
  font-weight: 500;
}
.quick-bpm > div > span {
  color: #757f83;
  font-size: 8px;
}
.quick-bpm .button {
  padding: 8px 12px;
  font-size: 11px;
}
.quick-bpm > strong {
  font: 18px Oxanium;
  min-width: 50px;
  color: var(--volt);
}
.quick-bpm > strong > small {
  font-size: 8px;
  color: #77827b;
}
.quick-bpm > .text-btn {
  font-size: 8px;
}
.empty {
  padding: 60px 25px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  grid-column: 1/-1;
}
.empty > .icon,
.empty > span .icon {
  width: 50px;
  height: 50px;
  color: #828b86;
}
.empty h3 {
  margin: 20px 0 12px;
}
.empty p {
  font-size: 12px;
}
.mobile-menu {
  display: none;
}
.panel {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.panel > h2 {
  font-size: 22px;
  letter-spacing: -0.025em;
  margin-bottom: 15px;
}
.panel > p {
  font-size: 11px;
}
.panel > h3 {
  font-size: 15px;
}
.audio-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 22px;
}
.bpm-panel > p {
  font-size: 11px;
  max-width: 400px;
}
.bpm-readouts {
  display: flex;
  text-align: center;
  margin: 35px 0;
  justify-content: space-evenly;
}
.bpm-readouts > div {
  flex: 1;
}
.bpm-readouts > div + div {
  border-left: 1px solid var(--line);
}
.bpm-readouts strong {
  font: 52px Oxanium;
  line-height: 1.2;
  display: block;
  color: var(--volt);
}
.bpm-readouts > div + div strong {
  color: var(--text);
}
.bpm-readouts span {
  display: block;
  font-size: 7px;
  letter-spacing: 0.13em;
  color: #8c969b;
  margin-top: 10px;
}
.tap-target {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  padding: 30px;
  background: #efff0006;
  border: 1px solid #efff0060;
  border-radius: 10px;
  color: var(--volt);
  transition: 0.15s;
}
.tap-target:hover {
  background: #efff0010;
  border-color: var(--volt);
}
.tap-target > span {
  width: 67px;
  height: 67px;
  border: 1px solid #efff0030;
  background: #efff0007;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 20px;
}
.tap-target > span .icon {
  width: 27px;
  height: 27px;
}
.tap-target b {
  font-size: 11px;
  letter-spacing: 0.09em;
}
.tap-target small {
  margin-top: 9px;
  color: #9b9d7c;
  font-size: 10px;
}
.tap-target.pulse {
  animation: tap 0.15s ease-out;
}
.bpm-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  margin: 17px 0;
  color: #868f95;
}
.speed-graph {
  height: 134px;
  margin: 20px 0 24px;
  background: #131619;
  border: 1px solid #2d3335;
  border-radius: 7px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.speed-graph > span {
  font-size: 7px;
  letter-spacing: 0.13em;
  color: #53605f;
}
.speed-graph svg {
  width: 100%;
  height: 110px;
  position: absolute;
  top: 0;
}
.speed-graph svg + span {
  position: absolute;
  bottom: 5px;
  font-size: 6px;
}
.match-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 20px;
}
.match-chips > button,
.match-chips > span {
  padding: 6px 9px;
  border-radius: 4px;
  border: 1px solid #3b4441;
  background: #202725;
  color: #adbdb5;
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.match-chips > button:hover {
  border-color: var(--volt);
  color: var(--volt);
}
.match-chips .icon {
  width: 14px;
  height: 14px;
}
#speed-matches .eyebrow {
  font-size: 8px;
}
.speed-slider {
  margin: 24px 0;
}
.speed-slider label {
  display: flex;
  justify-content: space-between;
  color: #838e94;
  font-size: 8px;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.speed-slider strong {
  font: 16px Oxanium;
  color: #dfe4e0;
}
.speed-slider > div {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #5c696f;
  margin-top: 6px;
}
input[type="range"] {
  accent-color: var(--volt);
  width: 100%;
  height: 4px;
  padding: 0;
  background: #42483c;
  margin: 9px 0 12px;
  cursor: pointer;
}
.speed-presets {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.speed-presets button,
.timer-marks button {
  background: #121619;
  border: 1px solid #3b4144;
  color: #a8b1b2;
  border-radius: 4px;
  padding: 7px 9px;
  font: 10px Oxanium;
}
.speed-presets button:hover,
.timer-marks button:hover {
  border-color: var(--volt);
  color: var(--volt);
}
.sound-disclosure {
  font-size: 9px !important;
  color: #7b858d;
  margin: 15px 0;
}
.toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  line-height: 1.6;
  margin: 22px 0;
  color: #bbc3c4;
}
.toggle input {
  accent-color: var(--volt);
  width: 15px;
  height: 15px;
}
.callout {
  font-size: 10px;
  line-height: 1.8;
  padding: 13px;
  border-left: 2px solid #647450;
  background: #efff0005;
  color: #8b9a92;
  border-radius: 0 5px 5px 0;
  margin: 20px 0;
}
.callout .icon {
  width: 15px;
  height: 15px;
  float: left;
  margin: 3px 8px 4px 0;
}
.timer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.timer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.timer-card {
  text-align: center;
}
.timer-icon {
  display: inline-flex;
  color: var(--volt);
  border: 1px solid #efff0025;
  padding: 10px;
  border-radius: 50%;
  margin-bottom: 20px;
}
.timer-card h2 {
  font-size: 22px;
}
.timer-card p {
  min-height: 36px;
  font-size: 10px;
}
.timer-display {
  font: 64px Oxanium;
  margin: 25px 0;
  color: #e1e7d8;
}
.timer-display.finished {
  color: var(--volt);
}
.timer-progress {
  height: 3px;
  background: #3c4235;
  border-radius: 2px;
  margin-bottom: 24px;
}
.timer-progress i {
  height: 100%;
  background: var(--volt);
  display: block;
  width: 0;
  transition: width 0.2s;
}
.timer-card .field {
  text-align: left;
  max-width: 220px;
  margin: 20px auto;
}
.timer-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.timer-marks {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
}
.timer-reference {
  margin-top: 25px;
}
.table-scroll {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
}
th {
  text-align: left;
  color: #6f7c83;
  font-size: 9px;
  font-weight: 400;
  padding: 13px 5px;
  border-bottom: 1px solid #353c40;
}
td {
  padding: 13px 5px;
  border-bottom: 1px solid #292f33;
  color: #a8b4b5;
}
td:last-child,
th:last-child {
  text-align: right;
}
.guide-tools {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 25px;
}
.guide-tools .search-field {
  width: min(580px, 100%);
  height: 45px;
}
.guide-tools .search-field input {
  font-size: 11px;
}
.category-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.category-tabs button {
  padding: 9px 14px;
  background: #1b1f22;
  border: 1px solid #323a3d;
  color: #8b989c;
  border-radius: 5px;
  font-size: 10px;
}
.category-tabs button:hover {
  color: #fff;
}
.category-tabs button.active {
  border-color: #efff0055;
  color: var(--volt);
  background: #efff000a;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.guide-card {
  background: #191d20;
  border: 1px solid #30383b;
  border-radius: 9px;
  text-align: left;
  padding: 23px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: 0.2s;
}
.guide-card:hover {
  border-color: #5d6b5a;
  transform: translateY(-3px);
}
.guide-card .eyebrow {
  font-size: 7px;
  color: #8a9d86;
  margin-bottom: 17px;
}
.guide-card h2 {
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 14px;
}
.guide-card p {
  font-size: 10px;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guide-card .text-btn {
  margin-top: auto;
  font-size: 9px;
  color: #c6d2be;
  padding-top: 12px;
}
.map-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 20px;
}
.map-controls {
  height: fit-content;
  padding: 20px;
}
.map-controls > .field:first-child {
  margin-top: 0;
}
.map-controls h3 {
  font-size: 13px;
}
.map-controls .text-btn {
  display: block;
  margin-top: 18px;
}
.map-controls .callout {
  font-size: 9px;
}
.map-modes {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.map-modes button {
  background: #121719;
  border: 1px solid #333e41;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  font-size: 10px;
  color: #a9b8b6;
}
.map-modes button .icon {
  width: 15px;
  height: 15px;
}
.map-modes button.active {
  color: var(--volt);
  border-color: #efff0055;
}
.map-panel {
  padding: 20px;
  min-width: 0;
}
.map-panel h2 {
  font-size: 18px;
}
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 9px Oxanium;
  color: #7f8e8f;
}
.zoom-controls button {
  border: 1px solid #3a4746;
  background: #172020;
  border-radius: 4px;
  padding: 5px 9px;
  color: #c5d2c6;
}
.map-viewport {
  height: 580px;
  overflow: auto;
  border: 1px solid #34403e;
  border-radius: 7px;
  background: #111819;
  cursor: crosshair;
}
.map-zoom {
  margin: auto;
  min-width: 100%;
  transition: width 0.2s;
}
#map-canvas {
  display: block;
  width: 100%;
  min-height: 500px;
}
.map-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 7px;
  letter-spacing: 0.07em;
  color: #778a87;
  margin-top: 15px;
}
.map-legend i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--volt);
  display: inline-block;
  margin-right: 4px;
}
.investigation-grid,
.settings-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
}
textarea {
  width: 100%;
  resize: vertical;
  line-height: 1.9 !important;
  margin-bottom: 10px;
}
.big-ghost {
  text-align: center;
  margin: 30px 0;
}
.big-ghost > .icon {
  width: 58px;
  height: 58px;
  color: #acc095;
  margin-bottom: 20px;
}
.big-ghost h3 {
  font-size: 36px;
  margin-bottom: 15px;
}
.big-ghost p {
  font-size: 11px;
}
.investigation-grid .text-btn {
  margin-top: 20px;
}
.settings-grid .panel > p {
  font-size: 11px;
}
.settings-grid .hint {
  font-size: 9px !important;
}
.legal {
  max-width: 1000px;
}
.legal h1 {
  font-size: 55px;
  margin-bottom: 50px;
}
.legal .panel {
  margin-bottom: 25px;
  padding: 35px;
}
.legal .panel p {
  font-size: 13px;
}
.legal .panel a:not(.button) {
  text-decoration: underline;
  color: #d5deb5;
}
.legal .button-row {
  margin: 25px 0;
}
.legal .button {
  font-size: 11px;
}
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  background: radial-gradient(ellipse at 50% 30%, #efff0008, transparent 60%);
}
.login-page > .brand {
  margin-bottom: 30px;
}
.login-panel {
  width: 390px;
  max-width: 100%;
  padding: 35px;
  background: #191d1e;
  border: 1px solid #343b37;
  border-radius: 15px;
  text-align: center;
}
.login-icon {
  display: inline-flex;
  padding: 12px;
  border: 1px solid #efff0035;
  border-radius: 50%;
  color: var(--volt);
  margin-bottom: 23px;
}
.login-panel .eyebrow {
  justify-content: center;
  font-size: 8px;
}
.login-panel h1 {
  font-size: 32px;
  margin-bottom: 12px;
}
.login-panel p {
  font-size: 11px;
}
.login-panel .field {
  text-align: left;
}
.login-panel .field input {
  font-size: 12px;
  padding: 12px;
}
.login-panel small {
  display: block;
  font-size: 9px;
  color: #67746e;
  margin-top: 22px;
}
.login-page > .text-btn {
  margin-top: 22px;
  font-size: 10px;
  color: #7a8a7e;
}
.form-error {
  color: var(--red) !important;
  font-size: 11px;
  min-height: 10px;
}
.staff-layout .sidebar > .outlined-tag {
  font-size: 8px;
  margin: 5px 0 30px;
}
.staff-layout .sidebar {
  background: #121715;
}
.staff-layout .tool-top .badge {
  letter-spacing: 0.06em;
  font-size: 8px;
}
.staff-layout .page-title .field {
  margin: 0;
}
.staff-layout .page-title h1 {
  font-size: 35px;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}
.metric {
  padding: 22px;
  background: #191f1c;
  border: 1px solid #333e36;
  border-radius: 9px;
}
.metric > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: #96a39a;
}
.metric > span .icon {
  width: 16px;
  height: 16px;
  color: #6e816f;
}
.metric > strong {
  display: block;
  font: 34px Oxanium;
  color: #e6f3d7;
  margin: 20px 0 13px;
}
.metric > small {
  font-size: 8px;
  color: #61766a;
}
.traffic-chart {
  margin-bottom: 25px;
  background: #181e1a;
}
.traffic-chart .panel-heading > span {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #6f8475;
}
.analytics-empty {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.analytics-empty .icon {
  width: 35px;
  height: 35px;
  color: #677d60;
  margin-bottom: 20px;
}
.analytics-empty h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.analytics-empty p {
  font-size: 11px;
  margin: 0;
}
.bars {
  display: flex;
  align-items: flex-end;
  height: 235px;
  gap: 9px;
  padding: 15px 0 25px;
}
.bars > div {
  height: 100%;
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid #425343;
}
.bars i {
  display: block;
  width: 75%;
  max-width: 50px;
  background: var(--volt);
  border-radius: 4px 4px 0 0;
  opacity: 0.75;
  min-height: 2px;
}
.bars > div:hover i {
  opacity: 1;
}
.bars span {
  position: absolute;
  bottom: -23px;
  white-space: nowrap;
  font-size: 7px;
  color: #839780;
}
.analytics-tables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
}
.analytics-tables .panel {
  padding: 20px;
  min-width: 0;
}
.analytics-tables h2 {
  font-size: 17px;
}
.analytics-tables td:first-child {
  max-width: 190px;
  overflow-wrap: anywhere;
}
.partner-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: 15px;
  align-items: end;
}
.partner-form .button {
  margin-bottom: 18px;
  font-size: 10px;
  padding: 12px;
}
.partner-admin-list > div {
  display: flex;
  gap: 15px;
  padding: 14px 0;
  border-top: 1px solid #323d35;
  font-size: 11px;
  align-items: center;
}
.partner-admin-list > div > span {
  color: #728477;
}
.partner-admin-list > div > .text-btn {
  margin-left: auto;
}
#partner-admin {
  margin-top: 32px;
}
dialog {
  color: var(--text);
  background: #1b1f22;
  border: 1px solid #424c49;
  border-radius: 14px;
  padding: 38px;
  width: 650px;
  max-width: calc(100% - 30px);
  max-height: 86vh;
  overflow: auto;
  box-shadow: 0 30px 120px #000a;
}
dialog::backdrop {
  background: #050708c9;
  backdrop-filter: blur(7px);
}
dialog .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
}
dialog h2 {
  font-size: 33px;
  line-height: 1.3;
  max-width: 90%;
  margin-bottom: 22px;
}
dialog h2.horror {
  font-size: 47px;
}
dialog h3 {
  font-size: 15px;
  margin: 25px 0 10px;
}
dialog p {
  font-size: 12px;
  line-height: 1.8;
}
dialog .eyebrow {
  font-size: 9px;
  color: #a9b79b;
}
dialog .button {
  font-size: 11px;
}
.coming-art {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}
.detail-head {
  border-bottom: 1px solid #37413e;
  margin-bottom: 20px;
}
.article-content p {
  color: #adb9b5;
}
.article-content p + p {
  margin-top: 16px;
}
.big-search {
  width: 100%;
  padding: 15px;
  font-size: 13px;
  margin-bottom: 20px;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #303a37;
  font-size: 12px;
  padding: 15px 8px;
  text-align: left;
  color: #b8c3bb;
}
.search-result:hover {
  color: var(--volt);
  background: #efff0005;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  z-index: 100;
  background: #eafb9c;
  color: #19200f;
  padding: 13px 20px;
  border: 1px solid #f2ffc7;
  border-radius: 8px;
  box-shadow: 0 10px 50px #0005;
  max-width: 90vw;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.soundbar {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: #242b22;
  color: #efff9c;
  border: 1px solid #efff0044;
  box-shadow: 0 8px 35px #0008;
  border-radius: 8px;
  font-size: 10px;
}
.soundbar .icon {
  width: 15px;
  height: 15px;
}
.soundbar button {
  color: var(--volt);
}
@keyframes float {
  50% {
    transform: translateY(-9px) rotate(-5deg);
  }
}
@keyframes wave {
  to {
    opacity: 0.95;
    transform: scaleY(0.6);
  }
}
@keyframes breathe {
  50% {
    opacity: 0.5;
    transform: scale(0.96);
  }
}
@keyframes tap {
  50% {
    background: #efff0029;
    transform: scale(0.992);
  }
}
@media (min-width: 1700px) {
  .game-stage {
    height: 520px;
  }
  .game-name {
    font-size: 25px;
  }
  .game-name.horror {
    font-size: 37px;
  }
  .ghost-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1250px) {
  .game-stage {
    height: 380px;
  }
  .game-caption {
    left: 20px;
    right: 7px;
  }
  .game-name {
    font-size: 16px;
  }
  .game-name.horror {
    font-size: 25px;
  }
  .game-go {
    font-size: 6px;
  }
  .game-genre {
    font-size: 6px;
  }
  .game-upper {
    left: 20px;
    right: 12px;
  }
  .hero-aside {
    margin-right: 0;
  }
  .feature-card {
    padding: 22px;
  }
  .feature-card h3 {
    font-size: 19px;
  }
  .sidebar {
    width: 195px;
    padding-left: 13px;
    padding-right: 13px;
  }
  .tool-body {
    margin-left: 195px;
  }
  .tool-main {
    padding: 30px 23px 50px;
  }
  .tool-top {
    padding: 0 23px;
  }
  .journal-grid {
    grid-template-columns: 205px 1fr;
    gap: 17px;
  }
  .ghost-card {
    padding: 16px 13px 7px;
  }
  .ghost-top h3 {
    font-size: 23px;
  }
  .ghost-evidence {
    gap: 3px;
  }
  .ghost-evidence > span {
    font-size: 6px;
    padding: 4px;
  }
  .ghost-evidence .icon {
    width: 9px;
    height: 9px;
  }
  .ghost-stats b {
    font-size: 11px;
  }
  .ghost-stats small {
    font-size: 5.5px;
  }
  .quick-bpm {
    gap: 10px;
    padding: 13px;
  }
  .quick-bpm > .text-btn {
    display: none;
  }
  .guide-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .partner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .analytics-tables {
    grid-template-columns: repeat(2, 1fr);
  }
  .partner-form {
    grid-template-columns: 1fr 1fr;
  }
  .partner-form .field {
    margin-bottom: 5px;
  }
  .map-layout {
    grid-template-columns: 215px 1fr;
  }
  .map-legend {
    font-size: 6px;
  }
  .page-title > .badge {
    display: none;
  }
  .results-bar .search-field {
    width: 180px;
  }
  .page-title h1.horror {
    font-size: 43px;
  }
}
@media (max-width: 980px) {
  .site-header {
    gap: 25px;
  }
  .site-header nav {
    gap: 20px;
    font-size: 11px;
  }
  .header-right {
    gap: 10px;
  }
  .hero-aside {
    width: 180px;
  }
  .hero-aside img {
    width: 105px;
    height: 105px;
  }
  .hero-aside span {
    font-size: 8px;
  }
  .hero-aside:before,
  .hero-aside:after {
    display: none;
  }
  .game-stage {
    height: 350px;
    gap: 4px;
  }
  .game-panel.available {
    flex: 2.6;
  }
  .game-name {
    font-size: 14px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 140px;
  }
  .game-panel.available .game-name,
  .game-panel:hover .game-name {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 23px;
  }
  .game-panel:not(.available) .game-genre {
    display: none;
  }
  .game-panel:not(.available) .game-go {
    display: none;
  }
  .game-panel:hover .game-go {
    display: flex;
  }
  .game-panel:hover .game-name {
    font-size: 18px;
  }
  .section-top {
    gap: 25px;
    flex-wrap: wrap;
  }
  .section-top h2 {
    font-size: 34px;
  }
  .section-top > p {
    font-size: 12px;
  }
  .section-top > .button {
    margin-left: 0;
  }
  .feature-card {
    padding: 18px;
  }
  .preview-icons {
    gap: 6px;
  }
  .preview-icons > span {
    padding: 9px 5px;
  }
  .preview-icons .icon {
    width: 20px;
    height: 20px;
  }
  .feature-card > p {
    font-size: 11px;
  }
  .guide-preview b {
    font-size: 19px;
  }
  .guide-preview {
    padding: 15px;
  }
  .ghost-grid {
    grid-template-columns: 1fr;
  }
  .ghost-tell {
    min-height: 0;
  }
  .ghost-top h3 {
    font-size: 30px;
  }
  .ghost-evidence > span {
    font-size: 8px;
    padding: 5px 7px;
  }
  .ghost-evidence .icon {
    width: 12px;
    height: 12px;
  }
  .ghost-stats small {
    font-size: 7px;
  }
  .ghost-stats b {
    font-size: 15px;
  }
  .ghost-card {
    padding: 20px;
  }
  .ghost-tell {
    font-size: 11px;
  }
  .audio-layout {
    grid-template-columns: 1fr;
  }
  .audio-layout .playback-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .playback-panel > .panel-heading,
  .playback-panel > p,
  .playback-panel > .callout {
    grid-column: 1/-1;
  }
  .playback-panel > .button {
    align-self: center;
    grid-column: 1/-1;
  }
  .timer-grid {
    gap: 15px;
  }
  .timer-card {
    padding: 20px;
  }
  .timer-display {
    font-size: 48px;
  }
  .timer-card h2 {
    font-size: 18px;
  }
  .timer-marks button {
    font-size: 8px;
    padding: 5px;
  }
  .map-layout {
    grid-template-columns: 1fr;
  }
  .map-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
  }
  .map-controls .field {
    margin: 0;
  }
  .map-controls > .badge {
    width: fit-content;
    height: fit-content;
  }
  .map-controls > .panel-divider {
    display: none;
  }
  .map-controls > .callout {
    grid-column: 1/-1;
    margin: 5px 0;
  }
  .map-modes {
    flex-direction: row;
    grid-column: 1/-1;
  }
  .map-controls > .hint {
    grid-column: 1/-1;
  }
  .map-controls > h3 {
    margin: 0;
  }
  .map-viewport {
    height: 520px;
  }
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-title > .button-row .field {
    max-width: 160px;
  }
  .staff-layout .page-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .investigation-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .tool-top > span {
    font-size: 7px;
  }
}
@media (max-width: 740px) {
  .site-header {
    height: 75px;
    padding: 0 6%;
    gap: 10px;
  }
  .site-header .brand img {
    width: 130px;
  }
  .site-header nav {
    display: none;
  }
  .header-right .icon-btn {
    display: none;
  }
  .header-right > .button {
    font-size: 10px;
    padding: 8px 11px;
  }
  .header-right .icon {
    width: 14px;
    height: 14px;
  }
  .landing-hero {
    padding: 38px 6% 0;
  }
  .hero-heading {
    margin-bottom: 30px;
  }
  .hero-heading h1 {
    font-size: 58px;
  }
  .hero-heading .eyebrow {
    font-size: 7px;
    letter-spacing: 0.1em;
  }
  .hero-heading p {
    font-size: 12px;
    max-width: 290px;
  }
  .hero-aside {
    width: auto;
    margin-right: -12px;
  }
  .hero-aside img {
    width: 74px;
    height: 74px;
  }
  .hero-aside span {
    display: none;
  }
  .games-heading {
    font-size: 7px;
    letter-spacing: 0.08em;
  }
  .games-heading > span:last-child {
    font-size: 6px;
    gap: 5px;
  }
  .games-heading .icon {
    display: none;
  }
  .game-stage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: auto;
    gap: 8px;
    width: 100%;
    margin: 0;
  }
  .game-panel {
    height: 165px;
    transform: none;
    border-radius: 7px;
  }
  .game-panel.available {
    grid-column: 1/-1;
    height: 240px;
  }
  .game-art {
    transform: none;
    inset: -2%;
    background-position: center 30%;
  }
  .game-panel:hover .game-art {
    transform: scale(1.06);
  }
  .game-panel.available .game-art {
    background-image: url("/art/phas-hero.webp") !important;
    background-position: center;
  }
  .game-caption,
  .game-upper {
    transform: none;
    left: 13px;
    right: 13px;
  }
  .game-caption {
    bottom: 14px;
  }
  .game-panel.available .game-caption {
    bottom: 23px;
    left: 25px;
  }
  .game-panel.available .game-upper {
    left: 25px;
    top: 20px;
    right: 20px;
  }
  .game-panel.available .game-name {
    font-size: 34px;
  }
  .game-panel .game-name {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 14px !important;
    margin-bottom: 8px;
    max-height: none;
  }
  .game-panel.available .game-name {
    font-size: 34px !important;
  }
  .game-panel:not(.available) .game-go {
    display: flex;
    font-size: 6px;
  }
  .game-panel .game-go .icon {
    width: 10px;
    height: 10px;
  }
  .game-panel .game-upper {
    top: 12px;
    font-size: 8px;
  }
  .game-caption p {
    display: none;
  }
  .game-panel.available .game-caption p {
    display: block;
  }
  .game-upper .badge {
    font-size: 7px;
  }
  .game-go {
    font-size: 8px;
  }
  .game-genre {
    font-size: 8px;
    margin-bottom: 7px;
  }
  .game-panel.available .game-shade {
    background:
      linear-gradient(90deg, #0b0f12e0, #0b0f1220),
      linear-gradient(0deg, #0b0f12aa, transparent);
  }
  .hero-bottom {
    padding: 22px 0;
    font-size: 8px;
  }
  .hero-bottom > span:last-child {
    display: none;
  }
  .section,
  .creators {
    padding: 50px 6%;
  }
  .section-top {
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
  }
  .section-top h2 {
    font-size: 34px;
  }
  .section-top .eyebrow {
    font-size: 8px;
  }
  .section-top > p {
    display: none;
  }
  .section-top > .button {
    font-size: 10px;
    padding: 11px 14px;
    align-self: flex-end;
    margin-left: auto;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .feature-card {
    padding: 24px 24px 26px;
    display: grid;
    grid-template-columns: 145px 1fr;
    column-gap: 20px;
  }
  .preview-icons,
  .wave-preview,
  .guide-preview {
    grid-row: 1/4;
    margin: 0;
    height: 100%;
    min-height: 145px;
  }
  .feature-card .feature-number {
    font-size: 7px;
    margin: 5px 0 12px;
  }
  .feature-card h3 {
    font-size: 20px;
  }
  .feature-card p {
    font-size: 10px;
    max-width: 100%;
  }
  .feature-arrow {
    display: none;
  }
  .preview-icons {
    gap: 3px;
    flex-wrap: wrap;
    align-content: center;
    padding: 10px;
  }
  .preview-icons > span {
    padding: 8px 5px;
  }
  .preview-icons .icon {
    width: 19px;
    height: 19px;
  }
  .wave-preview {
    gap: 2px;
    overflow: hidden;
    padding: 10px;
  }
  .wave-preview i {
    width: 2px;
  }
  .guide-preview {
    padding: 12px;
  }
  .guide-preview > span {
    font-size: 5px;
  }
  .guide-preview b {
    font-size: 20px;
    line-height: 1.4;
  }
  .creators {
    padding-top: 25px;
  }
  .creators .section-top .outlined-tag {
    font-size: 7px;
    padding: 7px 8px;
    align-self: flex-end;
  }
  .creators .section-top p {
    font-size: 11px;
    max-width: 240px;
  }
  .partner-empty {
    padding: 25px 0;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .twitch-orbit {
    height: 48px;
    width: 48px;
  }
  .twitch-orbit .icon {
    width: 20px;
    height: 20px;
  }
  .partner-empty > div {
    flex: 1;
  }
  .partner-empty h3 {
    font-size: 18px;
  }
  .partner-empty p {
    font-size: 10px;
  }
  .partner-empty > .badge {
    margin-left: 64px;
    font-size: 7px;
  }
  .partner-grid {
    grid-template-columns: 1fr;
  }
  .closing {
    padding: 50px 10px;
  }
  .closing h2 {
    font-size: 28px;
    line-height: 1.4;
  }
  .closing .eyebrow {
    font-size: 8px;
  }
  .site-footer {
    padding: 28px 6%;
    gap: 25px;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: 15px;
    font-size: 9px;
  }
  .site-footer small {
    font-size: 8px;
  }
  .sidebar {
    transform: translateX(-100%);
    width: 235px;
    transition: transform 0.25s;
    box-shadow: 20px 0 50px #0008;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .tool-body {
    margin-left: 0;
  }
  .tool-top {
    height: 64px;
    padding: 0 18px;
    gap: 9px;
  }
  .mobile-menu {
    display: inline-flex;
  }
  .tool-top > span {
    margin-right: auto;
    font-size: 6px;
    white-space: nowrap;
  }
  .tool-top i {
    margin: 0 8px;
  }
  .tool-top > div {
    gap: 4px;
  }
  .tool-top .button {
    padding: 9px;
    font-size: 8px;
    gap: 5px;
  }
  .tool-top .button .icon {
    width: 12px;
    height: 12px;
  }
  .tool-top .icon-btn {
    width: 27px;
    height: 27px;
  }
  .tool-top .icon-btn .icon {
    width: 17px;
    height: 17px;
  }
  .tool-main {
    padding: 29px 18px 45px;
  }
  .page-title {
    margin-bottom: 25px;
  }
  .page-title h1.horror {
    font-size: 42px;
  }
  .page-title p {
    font-size: 10px;
    max-width: 320px;
  }
  .journal-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .filter-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 15px;
    gap: 0 15px;
  }
  .filter-panel > .panel-heading {
    grid-column: 1/-1;
    margin-bottom: 5px;
  }
  .filter-panel > .field {
    margin: 12px 0;
  }
  .filter-panel .panel-divider {
    grid-column: 1/-1;
    margin: 12px 0;
  }
  .filter-panel > .hint {
    grid-column: 1/-1;
  }
  .evidence-filters {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
  .evidence-btn {
    padding: 8px 5px;
    gap: 7px;
    font-size: 9px;
  }
  .evidence-btn .icon {
    width: 15px;
    height: 15px;
  }
  .evidence-btn .check-box .icon {
    width: 11px;
    height: 11px;
  }
  .filter-panel .hint {
    font-size: 8px;
  }
  .filter-panel .field > span {
    font-size: 7px;
  }
  .filter-panel .field > select {
    font-size: 10px;
  }
  .ghost-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .ghost-card {
    padding: 15px 11px 7px;
  }
  .ghost-top {
    gap: 5px;
    margin-bottom: 13px;
  }
  .ghost-top h3 {
    font-size: 23px;
  }
  .ghost-index {
    font-size: 7px;
  }
  .ghost-top .audio-quick {
    width: 23px;
    height: 23px;
  }
  .ghost-top .audio-quick .icon {
    width: 13px;
    height: 13px;
  }
  .ghost-evidence {
    gap: 3px;
  }
  .ghost-evidence > span {
    font-size: 6px;
    padding: 4px;
  }
  .ghost-evidence .icon {
    width: 9px;
    height: 9px;
  }
  .ghost-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ghost-stats > div:last-child {
    display: none;
  }
  .ghost-stats small {
    font-size: 5.5px;
  }
  .ghost-stats b {
    font-size: 12px;
  }
  .ghost-tell {
    font-size: 9px;
    min-height: 60px;
  }
  .ghost-actions .text-btn {
    font-size: 8px;
  }
  .ghost-actions > .icon-btn {
    width: 22px;
    height: 22px;
  }
  .ghost-actions .text-btn .icon {
    display: none;
  }
  .results-bar {
    gap: 10px;
  }
  .results-bar h2 {
    font-size: 22px;
  }
  .results-bar h2 span {
    font-size: 10px;
  }
  .results-bar .search-field {
    width: 160px;
  }
  .results-bar .search-field input {
    font-size: 9px;
  }
  .quick-bpm {
    padding: 12px;
    gap: 10px;
  }
  .quick-bpm > .text-btn {
    display: none;
  }
  .quick-bpm > div {
    font-size: 9px;
  }
  .quick-bpm > div > span {
    font-size: 7px;
  }
  .quick-bpm > .button {
    font-size: 10px;
    padding: 8px 10px;
  }
  .quick-bpm > strong {
    font-size: 17px;
  }
  .tool-footer {
    margin: 0 18px;
    font-size: 7px;
    gap: 10px;
  }
  .audio-layout {
    gap: 20px;
  }
  .panel {
    padding: 22px;
  }
  .audio-layout .playback-panel {
    display: block;
  }
  .bpm-readouts strong {
    font-size: 45px;
  }
  .bpm-readouts span {
    font-size: 7px;
  }
  .tap-target {
    padding: 25px;
  }
  .timer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .timer-card {
    padding: 17px 12px;
  }
  .timer-card h2 {
    font-size: 17px;
    min-height: 40px;
    line-height: 1.2;
  }
  .timer-card p {
    font-size: 8px;
    min-height: 60px;
  }
  .timer-display {
    font-size: 40px;
  }
  .timer-actions {
    gap: 5px;
  }
  .timer-actions > .button {
    padding: 9px;
    font-size: 9px;
    gap: 5px;
  }
  .timer-actions .icon {
    width: 12px;
    height: 12px;
  }
  .timer-marks {
    flex-wrap: wrap;
  }
  .timer-toolbar > .toggle {
    font-size: 10px;
  }
  .timer-toolbar > .button {
    font-size: 9px;
    padding: 9px;
  }
  .timer-icon {
    padding: 8px;
    margin-bottom: 15px;
  }
  .timer-card .field > span {
    font-size: 6px;
  }
  .timer-reference h2 {
    font-size: 20px;
  }
  .guide-tools > .muted-label {
    display: none;
  }
  .guide-grid {
    gap: 12px;
  }
  .guide-card {
    padding: 20px;
  }
  .guide-card h2 {
    font-size: 18px;
  }
  .guide-card p {
    font-size: 9px;
    -webkit-line-clamp: 3;
  }
  .guide-card .eyebrow {
    font-size: 6px;
  }
  .category-tabs {
    gap: 5px;
  }
  .category-tabs button {
    font-size: 8px;
    padding: 8px 10px;
  }
  .map-controls {
    display: grid;
    gap: 15px;
  }
  .map-controls > .field {
    margin: 0;
  }
  .map-panel {
    padding: 13px;
  }
  .map-panel .panel-heading h2 {
    font-size: 15px;
  }
  .zoom-controls {
    gap: 5px;
  }
  .zoom-controls button {
    padding: 3px 7px;
  }
  .map-viewport {
    height: 450px;
  }
  .map-controls .map-modes {
    gap: 6px;
  }
  .map-modes button {
    font-size: 9px;
    gap: 6px;
    padding: 8px;
  }
  .map-legend {
    flex-wrap: wrap;
    font-size: 6px;
  }
  .legal {
    padding-top: 45px;
  }
  .legal h1 {
    font-size: 39px;
  }
  .legal .panel {
    padding: 24px;
  }
  .legal .panel p {
    font-size: 12px;
  }
  .legal .panel > h2 {
    font-size: 23px;
  }
  .metric {
    padding: 18px;
  }
  .metric > strong {
    font-size: 30px;
  }
  .metric > small {
    font-size: 7px;
  }
  .metric > span {
    font-size: 9px;
  }
  .analytics-tables {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .analytics-tables .panel {
    padding: 15px;
  }
  .analytics-tables h2 {
    font-size: 15px;
  }
  .analytics-tables td {
    font-size: 10px;
  }
  .partner-form {
    gap: 10px;
  }
  .partner-form .field input {
    font-size: 10px;
  }
  .partner-form .field > span {
    font-size: 7px;
  }
  .staff-layout .page-title .button-row {
    gap: 10px;
  }
  .staff-layout .page-title .button-row > .button {
    font-size: 9px;
  }
  .staff-layout .page-title h1 {
    font-size: 30px;
  }
  .staff-layout .tool-top > .badge {
    font-size: 6px;
  }
  .partners-page {
    padding-top: 35px;
  }
  dialog {
    padding: 30px 25px;
  }
  dialog h2 {
    font-size: 28px;
  }
  .soundbar {
    font-size: 9px;
    bottom: 10px;
    right: 10px;
    padding: 8px 10px;
    gap: 7px;
  }
}
@media (max-width: 390px) {
  .hero-heading h1 {
    font-size: 52px;
  }
  .hero-aside img {
    width: 60px;
    height: 60px;
  }
  .feature-card {
    grid-template-columns: 110px 1fr;
    padding: 19px;
    column-gap: 15px;
  }
  .feature-card h3 {
    font-size: 18px;
  }
  .feature-card > p {
    font-size: 9px;
  }
  .game-panel {
    height: 150px;
  }
  .game-panel .game-name {
    font-size: 12px !important;
  }
  .game-go {
    font-size: 5px !important;
  }
  .game-panel.available .game-go {
    font-size: 8px !important;
  }
  .ghost-grid {
    grid-template-columns: 1fr;
  }
  .ghost-card {
    padding: 20px;
  }
  .ghost-top h3 {
    font-size: 30px;
  }
  .ghost-evidence > span {
    font-size: 8px;
    padding: 5px;
  }
  .ghost-evidence .icon {
    width: 12px;
    height: 12px;
  }
  .ghost-stats {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .ghost-stats > div:last-child {
    display: block;
  }
  .ghost-stats small {
    font-size: 7px;
  }
  .ghost-stats b {
    font-size: 15px;
  }
  .ghost-tell {
    font-size: 10px;
    min-height: 0;
  }
  .timer-grid {
    grid-template-columns: 1fr;
  }
  .timer-card h2 {
    min-height: 0;
  }
  .timer-card p {
    min-height: 0;
  }
  .guide-grid {
    grid-template-columns: 1fr;
  }
  .analytics-tables {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}