/* Live 'Em · the shared chrome (shared/chrome.js): the exit pill, the sound bar and the "Abandon" confirm sheet.
 * Both groups are position:fixed at z 50 and placed with transforms by chrome.js, beside the page's center
 * container (flank) or inside the scene's corners (inset). Above #cinema (6), the old audio strips (8) and Round 5's
 * results (20); under the standings drawers (1000+), which have their own close. The confirm sheet is z 1100. */
:root {
  --lc-safe-top: env(safe-area-inset-top, 0px);
  --lc-safe-left: env(safe-area-inset-left, 0px);
  --lc-safe-right: env(safe-area-inset-right, 0px);
  --lc-line: #ead998;
  --lc-line-hi: #ffe3a1;
  --lc-ink: #fff8e6;
  --lc-navy: rgba(7, 10, 40, 0.88);
}
.lc-chrome {
  position: fixed;
  inset: 0 0 auto 0;
  height: 0;
  z-index: 50;
}
.lc-exit,
.lc-sound {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  will-change: transform;
}
.lc-exit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--lc-line);
  background: linear-gradient(
    180deg,
    rgba(22, 30, 78, 0.94),
    rgba(7, 10, 40, 0.94)
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--lc-ink);
  font:
    700 15px/1 "Palatino Linotype",
    Palatino,
    "Book Antiqua",
    Georgia,
    serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.45);
  -webkit-tap-highlight-color: transparent;
}
.lc-exit:hover {
  background: linear-gradient(
    180deg,
    rgba(34, 44, 104, 0.96),
    rgba(12, 16, 56, 0.96)
  );
}
.lc-exit svg,
.lc-round svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.lc-exit.compact {
  width: 44px;
  padding: 0;
  justify-content: center;
}
.lc-exit.compact .lc-exit-text {
  display: none;
}
@media (max-width: 560px) {
  .lc-exit-first {
    display: none;
  }
  .lc-exit {
    padding: 0 14px 0 11px;
    font-size: 14px;
  }
}
.lc-sound {
  display: flex;
  align-items: center;
  gap: 7px;
}
.lc-sound.narrow {
  gap: 5px;
}
.lc-round {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--lc-line);
  background: linear-gradient(#26306a, #0d1236);
  color: #fff8d8;
  cursor: pointer;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.25),
    0 3px 0 #07061c,
    0 5px 14px rgba(0, 0, 0, 0.45);
  -webkit-tap-highlight-color: transparent;
}
.lc-round.off {
  background: linear-gradient(#2a2f45, #151827);
  color: #8a90a8;
  border-color: #8a90a8;
}
.lc-vol {
  position: relative;
  display: flex;
  align-items: center;
  width: 100px;
  height: 44px;
  padding: 0 12px;
  border-radius: 24px;
  border: 1px solid var(--lc-line);
  background: linear-gradient(#211d52, #100e32);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    0 3px 0 #07061c,
    0 5px 14px rgba(0, 0, 0, 0.35);
}
.lc-sound.narrow .lc-vol {
  width: 68px;
  padding: 0 9px;
}
/* a screen too narrow for the folded exit and the whole bar (about 280 px): the bar keeps its two buttons */
.lc-sound.tight .lc-vol {
  display: none;
}
.lc-vol input {
  --fill: 35%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.lc-vol input::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--lc-line-hi) 0 var(--fill),
    #0a0f2a var(--fill) 100%
  );
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.lc-vol input::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--lc-line-hi) 0 var(--fill),
    #0a0f2a var(--fill) 100%
  );
}
.lc-vol input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffbe6, #fff0ba 55%, #e5c56a);
  border: 2px solid #9f863c;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.lc-vol input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff0ba;
  border: 2px solid #9f863c;
}
.lc-vol.off input {
  opacity: 0.55;
}
.lc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.lc-exit:focus-visible,
.lc-round:focus-visible,
.lc-vol input:focus-visible,
.lc-sheet button:focus-visible {
  outline: 3px solid #ffecad;
  outline-offset: 2px;
}
/* ---------------------------------------------------------------- the confirm sheet */
.lc-sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 7, 26, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: lc-fade 0.16s ease-out both;
}
.lc-sheet {
  width: min(340px, 100%);
  padding: 24px 22px 20px;
  border-radius: 22px;
  border: 1.5px solid var(--lc-line);
  background: linear-gradient(180deg, #17205a, #0a0e33 70%);
  color: #e9e6ff;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(120, 100, 255, 0.25);
  text-align: center;
  font:
    14px/1.45 system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
.lc-sheet-title {
  margin: 0 0 8px;
  font:
    700 20px/1.2 "Palatino Linotype",
    Palatino,
    Georgia,
    serif;
  color: var(--lc-line-hi);
}
.lc-sheet-body {
  margin: 0 0 12px;
  color: #cfc9ee;
}
.lc-sheet-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 214, 90, 0.14);
  color: #ffe08a;
  font-weight: 600;
}
.lc-sheet-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.lc-sheet-row button {
  min-height: 48px;
  border-radius: 999px;
  font:
    700 16px/1 "Palatino Linotype",
    Palatino,
    Georgia,
    serif;
  cursor: pointer;
}
.lc-stay {
  border: 1.5px solid var(--lc-line);
  background: linear-gradient(#2c3a8c, #141c52);
  color: #fff8e6;
}
.lc-go {
  border: 1.5px solid #f3b3a3;
  background: linear-gradient(#b3372c, #6f1612);
  color: #fff3ee;
}
@keyframes lc-fade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lc-sheet-layer {
    animation: none;
  }
}

/* the door and the lobby at desktop size: the owner's mockups draw the chrome a little larger (48 px) */
@media (min-width: 1100px) and (min-height: 620px) {
  html.door-up .lc-exit {
    height: 48px;
    padding: 0 20px 0 16px;
    font-size: 16px;
  }
  html.door-up .lc-round {
    width: 48px;
    height: 48px;
  }
  html.door-up .lc-vol {
    width: 116px;
    height: 48px;
  }
}