@font-face {
  font-family: "D-DIN Condensed";
  src: local("D-DIN Condensed"),
    url("../fonts/D-DINCondensed.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN Condensed";
  src: local("D-DIN Condensed Bold"),
    url("../fonts/D-DINCondensed-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: local("Barlow Condensed ExtraBold"),
    url("../fonts/BarlowCondensed-ExtraBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/Oswald-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --topbar-space: 56px;
  --bg-void: #12161b;
  --bg: #12161b;
  --bg-top: #12161b;
  --surface: #141a22;
  --surface-2: #1c2530;
  --surface-3: #26313d;
  --line: #35414e;
  --line-strong: #526170;
  --text: #f4f6f8;
  --muted: #a2adb8;
  --dim: #74808d;
  --yellow: #f2d024;
  --yellow-hover: #ffe24d;
  --yellow-muted: #c4aa4a;
  --blue: #46a8ff;
  --focus: #65d9ff;
  --green: #55c889;
  --green-bright: #78dca3;
  --orange: #eaa23a;
  --start-orange: #ef8a2e;
  --red: #e45660;
  --ink: #07090d;
  --map-fallback: #d7dad4;
  --blue-glow: #46a8ff1f;
  --focus-ring: #65d9ff80;
  --yellow-soft: #f2d02414;
  --yellow-soft-strong: #f2d0241f;
  --yellow-border: #f2d0248c;
  --yellow-ring: #f2d02466;
  --blue-soft: #46a8ff24;
  --blue-cone-start: #46a8ff75;
  --blue-cone-mid: #46a8ff2b;
  --blue-cone-end: #46a8ff08;
  --blue-cone-line: #78c0ffab;
  --blue-direction: #46a8ffcc;
  --orange-soft: #ef8a2e24;
  --red-soft: #e4566024;
  --green-soft: #55c88924;
  --green-glow: #55c8898c;
  --white-soft: #ffffff08;
  --white-line: #ffffff17;
  --white-line-strong: #ffffff24;
  --white-glow: #ffffff55;
  --glass: #07090de8;
  --overlay: #020407d1;
  --card-glass: #141a22e8;
  --card-solid: #141a22f7;
  --toast-bg: #1c2530f2;
  --canvas-line: #8ed8ff;
  --map-accent-border: #c6efff;
  --label-bg: #07090de8;
  --pin-shadow: #00000099;
  --poster-top: #1a2a3b;
  --poster-bottom: #07090d;
  --shadow-color: #0000008c;
  --radius: 16px;
  --shadow: 0 20px 55px var(--shadow-color);
  font-family: "D-DIN Condensed", "Arial Narrow", ui-sans-serif,
    system-ui, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--bg-void);
  scrollbar-gutter: auto;
}
body {
  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
}
button, input {
  font: inherit;
}
button {
  color: inherit;
}
button:focus-visible, input:focus-visible, canvas:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
input:is([type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"]):focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--white-glow);
  box-shadow: 0 0 0 1px var(--white-line);
}
[hidden] {
  display: none !important;
}
.app {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: var(--topbar-space) 24px 48px;
}
.topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  width: 100%;
  z-index: 10;
  isolation: isolate;
  align-self: start;
  min-height: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding-inline: 0;
  border-bottom: 1px solid #ffffff12;
  background: #0b0e12;
  box-shadow: 0 4px 12px #00000055;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  position: absolute;
  top: 100%;
  left: 12px;
  z-index: 2;
  transform: translateY(-50%);
}
.mark {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 950;
  letter-spacing: -0.06em;
  transform: skew(-5deg);
}
h1 {
  margin: 0;
  font-family: "Oswald", "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.05vw, 2.13rem);
  letter-spacing: -0.045em;
  white-space: nowrap;
}
h1 span {
  color: var(--yellow);
}
.brand-logo {
  width: clamp(125px, 10.08vw, 161px);
  height: auto;
  display: block;
}
.brand-home {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.brand-home:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
.rules-help {
  color: #fff;
}
.rules-help:hover {
  color: #fff;
}
.topnav {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: clamp(7px, 1.23vw, 15px);
  margin-inline-end: 0;
  padding: 0;
}
.mobile-nav-toggle,
.mobile-nav-label {
  display: none;
}
.mobile-nav-toggle {
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid #ffffff35;
  border-radius: 3px;
  background: #0b0f16e8;
  color: var(--text);
  cursor: pointer;
}
.mobile-nav-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}
.nav-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: transform 0.16s ease, color 0.16s ease;
}
.nav-icon:hover {
  color: #fff;
  transform: translateY(-1px);
}
.nav-icon svg {
  width: 38px;
  height: 38px;
  display: block;
  fill: currentColor;
  shape-rendering: geometricPrecision;
}
.fullscreen-toggle svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.fullscreen-exit-icon,
.fullscreen-toggle[aria-pressed="true"] .fullscreen-enter-icon {
  display: none;
}
.fullscreen-toggle[aria-pressed="true"] .fullscreen-exit-icon {
  display: block;
}
.help-glyph {
  font-size: 2.7rem;
  font-weight: 950;
  line-height: 1;
}
.navbtn {
  position: relative;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0;
  font-weight: 650;
  cursor: pointer;
  transition: color 0.16s ease;
}
.navbtn:hover {
  color: var(--text);
}
.navbtn.active {
  color: var(--text);
  font-weight: 700;
}
.navbtn.active::after {
  display: none;
}
.topnav .nav-icon {
  color: #fff;
}
.stats {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.top-score {
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.top-score strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 950;
}
.top-score span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}
.stat {
  display: grid;
  gap: 1px;
  text-align: right;
}
.stat small {
  color: var(--muted);
  font-size: 0.44rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.stat b {
  font-size: 0.62rem;
}
.login-button {
  margin-inline-end: 12px;
  min-height: 27px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-weight: 850;
  cursor: pointer;
}
.login-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.account-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin-inline-end: 12px;
}
.account-trigger {
  width: auto;
  height: 52px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: none;
  padding: 0 2px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.account-trigger:hover, .account-trigger[aria-expanded="true"] {
  border-color: transparent;
  background: transparent;
  transform: translateY(-1px);
}
.account-label {
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(150px, 24vw);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
}
.account-avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  object-fit: contain;
}
.account-chevron {
  color: var(--muted);
  font-size: .55rem;
}
.account-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #11171e;
  box-shadow: 0 18px 55px var(--overlay);
}
.account-menu[hidden] { display: none; }
.account-streak {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px 11px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}
.account-streak strong { color: var(--text); }
.account-streak b { color: var(--text); }
.account-streak { display: none; }
.account-action {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.account-action:hover { background: var(--surface-3); }
.account-action.danger { color: #ff9098; }
.account-action.danger:hover { background: #e4566018; }
.gamegrid {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(520px, 1.4fr);
  gap: 18px;
  align-items: stretch;
}
.gamegrid > .card {
  min-width: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.gamegrid > .card:first-child {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.gamegrid > .card:first-child .audio-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-glass);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cardhead {
  height: 74px;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 18px 10px;
  border-bottom: 0;
}
.cardhead h2, .cardhead h3 {
  margin: 0;
  letter-spacing: -0.025em;
}
.cardhead h2 {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 26px;
  padding: 3px 9px 4px;
  border-radius: 2px;
  background: #ef5a52;
  color: #07090d;
  font-size: clamp(1rem, 1.43vw, 1.27rem);
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.cardhead h3 {
  font-size: 1.18rem;
}
.map-cardhead {
  height: 74px;
  min-height: 0;
  flex-wrap: nowrap;
}
.maptitle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.replay-game {
  min-height: 34px;
  padding: 7px 10px;
  white-space: nowrap;
}
.topbar .nav-replay {
  min-height: 0;
  padding: 0;
  font-size: 0;
}
.status {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.audio-wrap {
  padding: 14px;
}
.audio-media {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0c1118;
  container-type: inline-size;
}
.audio-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 230px;
  overflow: hidden;
  background: var(--bg-void);
}
.audio-stage,
.mapshell,
.guess-history,
.guess-row {
  border-radius: 0 !important;
}
#audioPoster {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--bg);
}
#video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.poster-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, var(--overlay));
}
.audio-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 25px;
  color: var(--muted);
  text-align: center;
  font-weight: 750;
  background: var(--bg);
}
.audio-controls {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(92px, 1fr) auto auto;
  align-items: center;
  gap: 5px;
  min-height: 66px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: #0c1118;
}
.audio-primary-cluster,
.audio-secondary-controls,
.volume-control {
  display: flex;
  align-items: center;
}
.audio-primary-cluster {
  gap: 7px;
  min-width: 0;
}
.audio-primary {
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 5px 0 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 850 .92rem "D-DIN Condensed", "Arial Narrow", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.audio-primary:hover {
  background: transparent;
  color: var(--yellow);
}
.audio-primary:focus-visible,
.audio-controls .iconbtn:focus-visible,
.audio-waveform-seek:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.audio-primary img {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
}
.audio-primary:hover img {
  filter: brightness(0) saturate(100%) invert(83%) sepia(88%) saturate(747%) hue-rotate(351deg) brightness(101%);
}
.audio-elapsed,
.audio-total,
.volume-value {
  color: var(--muted);
  font: 700 .66rem ui-monospace, monospace;
  white-space: nowrap;
}
.audio-waveform-main {
  --wave-progress: 0%;
  position: relative;
  min-width: 0;
  height: 48px;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}
.audio-waveform-main canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.audio-waveform-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--wave-progress);
  overflow: hidden;
  pointer-events: none;
}
.audio-waveform-progress canvas {
  width: var(--waveform-width, 100%);
  max-width: none;
}
.audio-waveform-baseline {
  position: absolute;
  top: 65%;
  right: 0;
  left: 0;
  height: 1px;
  background: #f4f6f82e;
  pointer-events: none;
}
.audio-waveform-playhead {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: var(--wave-progress);
  z-index: 3;
  width: 1px;
  background: var(--yellow);
  box-shadow: 0 0 7px #f2d02470;
  pointer-events: none;
  transform: translateX(-.5px);
}
.audio-waveform-seek {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  opacity: 1;
  cursor: pointer;
}
.audio-waveform-seek::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}
.audio-waveform-seek::-webkit-slider-thumb {
  width: 1px;
  height: 100%;
  appearance: none;
  border: 0;
  background: transparent;
}
.audio-waveform-seek::-moz-range-track {
  height: 100%;
  background: transparent;
}
.audio-waveform-seek::-moz-range-thumb {
  width: 1px;
  height: 100%;
  border: 0;
  background: transparent;
}
.audio-controls.is-loading .audio-waveform-main { opacity: .45; }
.audio-secondary-controls {
  gap: 3px;
}
.audio-secondary-controls .iconbtn {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: transparent;
}
.audio-secondary-controls .iconbtn:hover { background: var(--surface-3); }
.audio-secondary-controls .iconbtn img {
  width: 16px;
  height: 16px;
}
.volume-popover {
  position: relative;
  display: flex;
  align-items: center;
}
.volume-popover::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  width: 100%;
  height: 9px;
  content: "";
}
.volume-control {
  position: absolute;
  right: 0;
  left: 0;
  bottom: calc(100% + 5px);
  z-index: 10;
  width: auto;
  height: 132px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 7px 6px 9px;
  border: 1px solid var(--line-strong);
  background: #0c1118f5;
  box-shadow: 0 8px 18px #00000070;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scaleY(.78);
  transform-origin: bottom center;
  transition: opacity .08s ease-in, transform .11s ease-in;
}
.volume-popover:hover .volume-control,
.volume-popover:focus-within .volume-control {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scaleY(1);
  transition: opacity .12s ease-out, transform .18s cubic-bezier(.2, .8, .2, 1);
}
.iconbtn {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--surface-3);
  cursor: pointer;
}
.iconbtn:hover {
  background: var(--line);
}
.volume-icon {
  cursor: default;
}
.iconbtn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}
.volume {
  --volume-level: 100%;
  --volume-unfilled: 6px;
  width: 18px;
  height: 94px;
  margin: 0;
  appearance: none;
  direction: rtl;
  writing-mode: vertical-lr;
  background: transparent;
  accent-color: var(--text);
  cursor: pointer;
}
.volume::-webkit-slider-runnable-track {
  width: 2px;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(
    to bottom,
    #b9c0c8 0 var(--volume-unfilled),
    #ffffff var(--volume-unfilled) 100%
  );
}
.volume::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-left: -5px;
  appearance: none;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 2px #0c1118;
}
.volume::-moz-range-track {
  width: 2px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    to bottom,
    #b9c0c8 0 var(--volume-unfilled),
    #ffffff var(--volume-unfilled) 100%
  );
}
.volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 2px #0c1118;
}
.volume-value {
  min-width: 33px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-align: center;
}
@container (max-width: 470px) {
  .audio-controls {
    grid-template-columns: auto minmax(88px, 1fr) auto;
    row-gap: 3px;
    min-height: 82px;
  }
  .audio-secondary-controls {
    grid-column: 1 / -1;
    justify-self: end;
    min-height: 26px;
  }
}
@container (max-width: 330px) {
  .audio-primary { font-size: .84rem; }
  .audio-primary-cluster { gap: 4px; }
  .audio-waveform-main { height: 42px; }
}
.guess-history {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 14px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--white-line);
  border-radius: 12px;
  background: var(--card-glass);
}
.btn.copy-results {
  width: 100%;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  margin-top: 14px;
}
#guessHistoryRows {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.guess-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(140px, 13vw, 175px);
  flex: 1 1 0;
  min-height: 96px;
  column-gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.guess-row.selectable,
.guess-row.completed {
  cursor: pointer;
}
.guess-row.selectable:hover:not(.selected),
.guess-row.completed:hover:not(.selected) {
  background: var(--white-soft);
}
.guess-row.selected {
  background:
    radial-gradient(
      ellipse 82% 138% at 0% 118%,
      #722822de 0%,
      #68242aad 34%,
      #4b1f2f73 58%,
      #2d192624 78%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      #5f1c2a75 0%,
      #4219234a 42%,
      #25171f1f 68%,
      transparent 82%
    );
  box-shadow:
    inset 4px 0 0 #f04f5f,
    inset 0 1px 0 #e4566047,
    inset -1px 0 0 #7f29373d,
    inset 0 -1px 0 #7f293759;
}
.guess-row.locked {
  cursor: not-allowed;
  opacity: 0.55;
}
.guess-row:first-of-type {
  border-top: 0;
}
.guess-row b {
  display: block;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  letter-spacing: -0.045em;
}
.guess-row small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.guess-points {
  color: var(--muted);
  font-size: clamp(1.25rem, 1.8vw, 1.62rem);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  text-align: right;
  white-space: nowrap;
}
.guess-row b { color: var(--text); }
.guess-operator {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  row-gap: 5px;
  min-width: 0;
}
.guess-operator.no-icon {
  grid-template-columns: minmax(0, 1fr);
}
.guess-operator-icon {
  width: 86px;
  height: 86px;
  grid-row: 1 / span 2;
  object-fit: contain;
}
.guess-operator-copy {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.guess-operator-copy b {
  min-width: 0;
  padding-inline-end: .08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guess-operator-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: 2;
}
.guess-operator-stat {
  display: grid;
  gap: 4px;
}
.guess-operator-stat > span {
  color: var(--text);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.guess-operator-dots {
  display: flex;
  gap: 4px;
}
.guess-operator-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim);
}
.guess-operator-dots i.on { background: var(--text); }
.guess-row.pending:not(.selected) {
  background: linear-gradient(90deg, var(--white-soft), transparent 70%);
}
.guess-row.pending .guess-points {
  color: var(--muted);
}
.guess-row.completed .guess-points {
  color: var(--orange);
}
.guess-detail {
  display: grid;
  width: 100%;
  grid-template-rows: repeat(3, minmax(1em, auto));
  gap: 5px;
  justify-items: stretch;
  align-content: center;
}
.guess-distance {
  color: var(--canvas-line);
  font: 900 clamp(1.05rem, 1.65vw, 1.35rem) ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.floor-penalty {
  position: relative;
  display: inline-grid;
  min-width: 96px;
  min-height: 36px;
  grid-template-columns: auto;
  align-items: center;
  justify-self: end;
  gap: 0;
  padding: 5px 9px;
  overflow: hidden;
  border: 1px solid #e456608f;
  border-left: 3px solid var(--red);
  background:
    linear-gradient(105deg, #561924a8 0%, #241018f2 58%, #110c12f5 100%);
  box-shadow:
    inset 0 1px 0 #ff778324,
    inset 0 -1px 0 #00000078;
  color: var(--red);
  clip-path: polygon(
    0 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% 100%,
    6px 100%,
    0 calc(100% - 6px)
  );
  font-weight: 950;
  white-space: nowrap;
}
.floor-penalty::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 2px;
  background: var(--red);
  box-shadow: 0 3px 8px #e4566080;
  content: "";
}
.floor-penalty.placeholder {
  visibility: hidden;
}
.floor-penalty.incoming {
  visibility: hidden;
}
.floor-penalty-icon {
  display: none;
}
.floor-penalty-copy {
  display: grid;
  gap: 1px;
  line-height: 1;
}
.floor-penalty-label {
  color: #fff;
  font: 900 .61rem "Oswald", "Barlow Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .115em;
  text-transform: none;
}
.floor-penalty strong {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: #878d96;
  font: 950 1rem "D-DIN Condensed", "Arial Narrow", ui-sans-serif, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
}
.floor-penalty strong small {
  color: #878d96;
  font-size: .56em;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mapbody {
  --map-shell-width: min(100%, 70vh, 780px);
  padding: 14px;
}
.floor-tabs {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
}
.floor-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 750;
  cursor: pointer;
}
.floor-tab-group {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.floor-tab + .floor-tab {
  border-left: 0;
}
.floor-tab:hover {
  border-color: var(--line-strong);
  color: var(--text);
}
[data-audio-toggle] {
  min-width: 174px;
  min-height: 38px;
  padding: 7px 14px;
  border: 0;
  border-radius: 3px;
  background: transparent;
}
#headerPlayAudio {
  min-width: 0;
  min-height: 30px;
  padding: 5px 9px;
  font-size: clamp(1rem, 1.43vw, 1.27rem);
  font-weight: 750;
}
#headerPlayAudio [data-audio-toggle-icon] {
  width: 16px;
  height: 16px;
}
[data-audio-toggle-icon] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
}
.audio-waveform {
  --wave-progress: 0%;
  position: relative;
  width: 55px;
  height: 20px;
  flex: 0 0 auto;
}
.audio-waveform-bars {
  position: absolute;
  top: 0;
  left: 0;
  width: 55px;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 1.5px;
  color: var(--text);
  opacity: .72;
}
.audio-waveform-bars i {
  width: 2px;
  height: var(--wave-height);
  flex: 0 0 auto;
  background: currentColor;
}
.audio-waveform-played {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--wave-progress);
  overflow: hidden;
}
.audio-waveform-played .audio-waveform-bars {
  color: var(--red);
  opacity: 1;
}
.floor-tab.active {
  border-color: var(--yellow-muted);
  background: #c4aa4a2b;
  color: var(--yellow-muted);
  box-shadow: none;
}
.floor-tab-group .badges {
  --badge-slot-width: 96px;
  --badge-slot-height: 26px;
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: repeat(2, var(--badge-slot-height));
  align-items: stretch;
  justify-items: stretch;
  gap: 3px;
}
.floor-tab-group .badge-row {
  display: grid;
  grid-template-columns: repeat(2, var(--badge-slot-width));
  align-items: stretch;
  justify-items: stretch;
  gap: 3px;
}
.badge {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.2px 6.6px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: var(--blue-soft);
  color: var(--blue);
  font-family: inherit;
  font-size: 0.704rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.badge.listener {
  background: var(--blue-soft);
  color: var(--blue);
}
.badge.start {
  background: var(--orange-soft);
  color: var(--start-orange);
}
.badge.selected {
  background: var(--red-soft);
  color: var(--red);
}
.badge.target {
  background: var(--green-soft);
  color: var(--green-bright);
}
.mapviewport {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}
.mapshell {
  position: relative;
  width: var(--map-shell-width);
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;
  background: var(--map-fallback);
}
#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}
.mapshell.zoomed #canvas {
  cursor: crosshair;
}
#canvas.dragging {
  cursor: grabbing;
}
#canvas.target-interactive:not(.dragging) {
  cursor: pointer;
}
.mapactions {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 6;
  width: 70%;
  padding: 0;
  transform: translateX(-50%);
}
.buttons {
  width: 100%;
}
.buttons .primary {
  width: 100%;
}
.btn {
  min-height: 42px;
  border: 0;
  border-radius: 3px;
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 850;
  cursor: pointer;
}
.btn.primary {
  color: var(--ink);
  background: var(--yellow);
}
.btn.primary:hover {
  background: var(--yellow-hover);
}
.btn.secondary {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--surface-2);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#confirm:disabled {
  pointer-events: none;
}
.btn.copy-results,
.mapactions .btn.primary {
  height: 36px;
  min-height: 36px;
  padding-block: 7px;
}