/* Intro, objection burst, hints dialog, nameplate drag states, Dark Hour sweep, toasts.
   Owner: HUD/overlays workstream (C). */

:root {
  /* The midnight flash is green before the page enters the Dark Hour palette, so it
     cannot use --dh-glow (only defined inside html[data-darkhour]). Same value. */
  --intro-glow: #a8ff60;
}

/* ============================================================== intro cover */

/* Set by an inline <head> script before first paint, removed when the intro overlay
   takes over (or after 4 s as a safety net). Nothing of the page flashes through. */
html.intro-pending::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  background: var(--ink);
  pointer-events: auto;
}

/* ==================================================================== intro */

.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  overflow: hidden;
  cursor: pointer;
}

.intro.is-broken {
  pointer-events: none;
}

.intro.is-broken .intro-surface {
  visibility: hidden;
}

.intro-surface {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--night) 70%, var(--ink)) 0, var(--ink) 58%),
    var(--ink);
}

.intro-clock {
  --dial: clamp(220px, min(46vw, 46vh), 400px);
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  margin-top: calc(var(--dial) * -0.04);
}

.intro-dial {
  width: var(--dial);
  height: var(--dial);
  overflow: visible;
}

.intro-halo {
  fill: none;
  stroke: var(--intro-glow);
  stroke-width: 18;
  opacity: 0;
  transition: opacity 0.12s linear;
}

.intro-ring {
  fill: none;
  stroke: var(--ice);
  stroke-opacity: 0.55;
  stroke-width: 1.1;
  stroke-dasharray: 1 1;
  transform: rotate(-90deg);
}

.intro-ring-inner {
  fill: none;
  stroke: var(--ice);
  stroke-opacity: 0.12;
  stroke-width: 0.8;
}

.intro-ticks-minor {
  fill: none;
  stroke: var(--ice);
  stroke-opacity: 0.38;
  stroke-width: 0.8;
}

.intro-ticks-major {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2;
}

.intro-marker {
  fill: var(--red);
}

.intro-hand path {
  fill: var(--paper);
}

.intro-hand--second path,
.intro-hand--second circle {
  fill: var(--red);
}

.intro-pivot {
  fill: var(--paper);
}

.intro-pivot-core {
  fill: var(--red);
}

.intro-readout {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-hud);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.intro-readout i {
  margin: 0 0.06em;
  color: var(--cyan);
  font-style: inherit;
}

.intro-skip {
  position: absolute;
  left: 50%;
  bottom: clamp(var(--s-6), 7vh, var(--s-8));
  margin: 0;
  color: var(--text-3);
  font-family: var(--font-hud);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* 0:00 - everything that was blue-white turns to the hidden hour's green. */
.intro.is-midnight .intro-ring,
.intro.is-midnight .intro-ticks-minor,
.intro.is-midnight .intro-ring-inner {
  stroke: var(--intro-glow);
}

.intro.is-midnight .intro-ticks-major,
.intro.is-midnight .intro-hand path,
.intro.is-midnight .intro-pivot {
  stroke: none;
  fill: var(--intro-glow);
}

.intro.is-midnight .intro-ticks-major {
  fill: none;
  stroke: var(--intro-glow);
}

.intro.is-midnight .intro-halo {
  opacity: 0.07;
}

.intro.is-midnight .intro-readout {
  color: var(--intro-glow);
}

.intro.is-midnight .intro-surface {
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--intro-glow) 9%, var(--ink)) 0, var(--ink) 60%),
    var(--ink);
}

.intro .crack-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.intro .crack-layer .crack-glow .crack-path {
  stroke: var(--intro-glow);
  stroke-opacity: 0.28;
}

.intro .crack-layer .crack-line .crack-path {
  stroke: color-mix(in srgb, var(--intro-glow) 22%, var(--paper));
}

.intro .crack-layer .facet--light {
  fill: var(--intro-glow);
  fill-opacity: 0.04;
}

.intro-flash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, var(--intro-glow), color-mix(in srgb, var(--intro-glow) 55%, var(--ink)) 70%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ================================================================ objection */

.objection-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.objection-overlay.is-visible {
  visibility: visible;
}

.objection-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--ink) 40%, transparent), color-mix(in srgb, var(--ink) 78%, transparent) 75%);
  opacity: 0;
}

.objection-lines {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  opacity: 0;
}

.objection-lines-main {
  fill: var(--paper);
  fill-opacity: 0.32;
}

.objection-lines-accent {
  fill: var(--cyan);
  fill-opacity: 0.55;
}

.objection-band {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: clamp(84px, 2.8rem + 9vw, 176px);
  margin-top: calc(clamp(84px, 2.8rem + 9vw, 176px) / -2);
  background:
    linear-gradient(180deg, transparent 0 6px, var(--red) 6px calc(100% - 6px), transparent calc(100% - 6px)),
    linear-gradient(180deg, var(--paper) 0 3px, transparent 3px calc(100% - 3px), var(--paper) calc(100% - 3px));
  rotate: var(--tilt-major);
  clip-path: inset(0 100% 0 0);
  box-shadow: 0 0 0 0 transparent;
}

.objection-band-edge {
  position: absolute;
  inset: 12px 0;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 18%, transparent) 0 2px, transparent 2px 9px);
  opacity: 0.6;
}

.objection-word {
  position: relative;
  margin: 0;
  rotate: var(--tilt-major);
  opacity: 0;
}

.objection-word-inner {
  display: block;
  padding: 0 0.12em 0.04em 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 12vw, 13.5rem);
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  transform: skewX(-8deg);
  text-shadow:
    0.035em 0.035em 0 var(--ink),
    0.07em 0.07em 0 var(--ink),
    -0.012em -0.012em 0 var(--gold);
}

.objection-flash {
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0;
}

/* =============================================================== hints dialog */

.hints-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--s-5);
  border: 0;
  color: var(--paper);
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;
}

.hints-dialog[open] {
  display: grid;
  place-items: safe center;
}

.hints-dialog::backdrop {
  background: transparent;
}

.hints-backdrop {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--ink) 88%, transparent), color-mix(in srgb, var(--abyss) 72%, transparent));
  cursor: pointer;
}

.hints-panel {
  position: relative;
  width: min(100%, 940px);
  padding: var(--s-7) var(--s-7) var(--s-6);
  isolation: isolate;
}

.hints-plate {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hints-plate::before,
.hints-plate::after {
  content: "";
  position: absolute;
}

/* Back plate at the major angle, front plate leaning on the counter angle. */
.hints-plate::before {
  inset: 4% -3% 2% 3%;
  background: linear-gradient(140deg, var(--blue), var(--deep) 60%);
  rotate: -4deg;
  clip-path: polygon(0 0, 100% 3%, 97% 100%, 2% 96%);
  opacity: 0.85;
}

.hints-plate::after {
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ice) 22%, transparent) 0 1px, transparent 1px),
    linear-gradient(145deg, var(--abyss), var(--night) 70%);
  clip-path: polygon(0 2%, 96% 0, 100% 10%, 97% 100%, 3% 97%);
  box-shadow: 0 34px 90px color-mix(in srgb, var(--ink) 60%, transparent);
}

.hints-head {
  position: relative;
  margin-bottom: var(--s-5);
  padding-right: 140px; /* room for the close button */
}

.hints-head::after {
  content: "REQUESTS";
  position: absolute;
  right: calc(var(--s-6) * -1);
  top: calc(var(--s-6) * -1);
  z-index: -1;
  color: color-mix(in srgb, var(--paper) 5%, transparent);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 3rem + 6vw, 7.5rem);
  line-height: 0.8;
  pointer-events: none;
}

.hints-kicker {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  color: var(--cyan);
  font-family: var(--font-hud);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hints-kicker::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.hints-count {
  padding: 2px 6px 1px;
  color: var(--ink);
  background: var(--cyan);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}

.hints-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hints-lede {
  margin: var(--s-3) 0 0;
  color: var(--text-2);
  font-size: var(--fs-md);
  line-height: 1.5;
}

.hints-list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .hints-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-3);
  }

  .hint--secret {
    grid-column: 1 / -1;
  }
}

.hint {
  position: relative;
  display: grid;
  grid-template-columns: var(--s-7) 1fr;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3);
  isolation: isolate;
}

.hint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 70%, transparent) 0 3px, transparent 3px),
    color-mix(in srgb, var(--paper) 6%, transparent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.hint-no {
  padding-top: 2px;
  color: var(--blue-soft);
  font-family: var(--font-hud);
  font-size: var(--fs-xl);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hint-body h3 {
  margin: 0 0 var(--s-1);
  color: var(--paper);
  font-family: var(--font-hud);
  font-size: var(--fs-lg);
  font-weight: 800;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hint-body p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.hint-key {
  font-weight: 800;
  color: var(--paper);
}

/* A request you can start from the list (Night Session). */
.hint-action {
  all: unset;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s-3);
  padding: 0 var(--s-5);
  color: var(--ink);
  background: var(--cyan);
  font-family: var(--font-hud);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition: background-color var(--dur-1) linear;
}

.hint-action:hover,
.hint-action:focus-visible {
  background: var(--hot);
  box-shadow: inset 0 0 0 2px var(--ink);
}

/* The last request is the secret one: it gets the gold pip. */
.hint--secret::before {
  background:
    linear-gradient(90deg, var(--gold) 0 3px, transparent 3px),
    linear-gradient(100deg, color-mix(in srgb, var(--gold) 10%, transparent), color-mix(in srgb, var(--paper) 5%, transparent) 60%);
}

.hint--secret .hint-no {
  color: var(--gold);
}

.hints-close {
  position: absolute;
  top: var(--s-7);
  right: var(--s-7);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5) 0 var(--s-3);
  border: 0;
  color: var(--paper);
  background: none;
  font-family: var(--font-hud);
  font-size: var(--fs-md);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  isolation: isolate;
}

.hints-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--blue);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition: background-color var(--dur-1) var(--ease-out);
}

.hints-close::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  clip-path: polygon(
    6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%, 6px 0,
    8.5px 2px, 2.5px calc(100% - 2px), calc(100% - 8.5px) calc(100% - 2px), calc(100% - 2.5px) 2px, 8.5px 2px
  );
  opacity: 0;
  pointer-events: none;
}

.hints-close:hover::before {
  background: var(--hot);
}

.hints-close:focus-visible {
  outline: none;
}

.hints-close:focus-visible::after {
  opacity: 1;
}

.hints-close-key {
  padding: 3px 6px 2px;
  color: var(--ink);
  background: var(--paper);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}

@media (max-width: 620px) {
  .hints-dialog {
    padding: var(--s-4);
    place-items: start center;
  }

  .hints-panel {
    padding: var(--s-6) var(--s-5) var(--s-5);
  }

  .hints-head {
    padding-right: 0;
  }

  .hints-head::after {
    right: calc(var(--s-3) * -1);
  }

  /* Stays reachable while the list scrolls. */
  .hints-close {
    position: sticky;
    top: 0;
    right: auto;
    z-index: 2;
    display: flex;
    width: fit-content;
    margin: 0 0 var(--s-4) auto;
  }

  .hint {
    grid-template-columns: var(--s-6) 1fr;
    padding-right: var(--s-4);
  }

  .hint-no {
    font-size: var(--fs-lg);
  }
}

/* ========================================================== nameplate drag */

.name-button {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.name-button.is-lifted {
  position: relative;
  z-index: 2;
}

.name-button.is-dragging {
  cursor: grabbing;
  will-change: transform, translate, rotate, scale;
  filter: drop-shadow(0 22px 26px color-mix(in srgb, var(--ink) 55%, transparent));
}

.name-button.is-dropped {
  filter: drop-shadow(0 8px 0 color-mix(in srgb, var(--ink) 35%, transparent));
}

/* Lifted name floats above the HUD while it is in the air. */
html.name-lifted .shell {
  z-index: var(--z-drag);
}

.name-hold-meter {
  position: fixed;
  z-index: var(--z-drag);
  height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--paper));
  clip-path: polygon(1px 0, 100% 0, calc(100% - 1px) 100%, 0 100%);
  transform-origin: 0 50%;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

/* ================================================================ dark hour */

.dh-sweep {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.dh-sweep-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--intro-glow), color-mix(in srgb, var(--intro-glow) 40%, transparent) 75%);
  mix-blend-mode: screen;
  opacity: 0;
}

.dh-sweep.is-leaving .dh-sweep-flash {
  background: radial-gradient(circle at 50% 50%, var(--ice), color-mix(in srgb, var(--cyan) 40%, transparent) 75%);
}

.dh-sweep-band {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 20%;
  width: 60%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--intro-glow) 30%, transparent) 40%, color-mix(in srgb, var(--intro-glow) 55%, transparent) 50%, color-mix(in srgb, var(--intro-glow) 30%, transparent) 60%, transparent);
  mix-blend-mode: screen;
  rotate: var(--tilt-major);
  visibility: hidden;
}

.dh-sweep.is-leaving .dh-sweep-band {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 26%, transparent) 40%, color-mix(in srgb, var(--ice) 45%, transparent) 50%, color-mix(in srgb, var(--cyan) 26%, transparent) 60%, transparent);
}

/* =================================================================== toasts */

/* One plate in the lower left, just above the footer strip (js/toast.js). */
.toast-region {
  position: fixed;
  left: clamp(var(--s-5), 3.6vw, var(--s-8));
  bottom: calc(44px * var(--k) + var(--s-4));
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 240px;
  max-width: min(420px, calc(100vw - 2 * var(--s-5)));
  padding: var(--s-3) var(--s-6) var(--s-3) var(--s-5);
  isolation: isolate;
}

/* Front plate with a cyan edge; a blue back plate peeks out underneath. The right edge
   leans 8px over the plate's ~56px: the -8deg major angle. */
.toast::before,
.toast::after {
  content: "";
  position: absolute;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.toast::before {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--cyan) 0 4px, transparent 4px),
    linear-gradient(145deg, var(--abyss), var(--night) 80%);
}

.toast::after {
  inset: var(--s-1) calc(var(--s-1) * -1) calc(var(--s-1) * -1) var(--s-1);
  z-index: -2;
  background: color-mix(in srgb, var(--blue) 70%, var(--deep));
}

.toast-kicker {
  color: var(--cyan);
  font-family: var(--font-hud);
  font-size: var(--fs-xs);
  font-weight: 800;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.toast-text {
  color: var(--paper);
  font-family: var(--font-hud);
  font-size: var(--fs-lg);
  font-weight: 800;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

@media (max-width: 920px) {
  .toast-region {
    left: var(--s-4);
    bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  }
}