/*!
 * Wickbound — page chrome.
 *
 * Site scheme (cyan on near-black) owns everything outside the canvas; the
 * game's own palette lives inside it. The document background belongs to
 * cryptic.css and is never touched here.
 */

/* The hidden attribute is only display:none in the UA stylesheet, so any class
   that sets display outranks it. Several controls below do. */
[hidden] { display: none !important; }

.wb-shell {
  --wb-cyan: #00cccc;
  --wb-cyan-bright: #6ffcff;
  --wb-ember: #ffb457;
  --wb-panel: rgba(0, 24, 26, 0.62);
  --wb-line: rgba(0, 204, 204, 0.34);
}

.wb-interface {
  display: block;
  margin: 0 auto;
  max-width: 1180px;
}

/* --- toolbar -------------------------------------------------------------- */

.wb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.wb-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wb-cyan-bright);
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.06em;
  font-size: 0.86rem;
  text-transform: uppercase;
}

.wb-name input {
  background: rgba(0, 20, 22, 0.85);
  border: 1px solid var(--wb-line);
  border-radius: 4px;
  color: #d7ffff;
  font: inherit;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  min-width: 190px;
  text-transform: none;
}

.wb-name input:focus {
  outline: none;
  border-color: var(--wb-cyan-bright);
  box-shadow: 0 0 0 2px rgba(0, 204, 204, 0.25);
}

.wb-name input[aria-invalid='true'] {
  border-color: #ff5a6a;
  box-shadow: 0 0 0 2px rgba(255, 90, 106, 0.25);
}

.wb-button {
  background: linear-gradient(180deg, rgba(0, 60, 62, 0.9), rgba(0, 28, 30, 0.9));
  border: 1px solid var(--wb-line);
  border-radius: 4px;
  color: #aefefe;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.84rem;
  letter-spacing: 0.09em;
  padding: 9px 16px;
  text-transform: uppercase;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.wb-button:hover:not(:disabled) {
  border-color: var(--wb-cyan-bright);
  box-shadow: 0 0 14px rgba(0, 204, 204, 0.28);
  color: #eaffff;
}

.wb-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.wb-button--primary {
  background: linear-gradient(180deg, rgba(0, 92, 94, 0.92), rgba(0, 40, 44, 0.92));
  color: #eaffff;
}

/* --- isle progress -------------------------------------------------------- */

.wb-progress {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.wb-progress li {
  align-items: center;
  background: var(--wb-panel);
  border: 1px solid rgba(0, 204, 204, 0.16);
  border-radius: 4px;
  display: flex;
  gap: 8px;
  padding: 7px 10px;
}

.wb-progress span {
  color: var(--wb-cyan);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  min-width: 1.6em;
}

.wb-progress strong {
  color: #7d9a9c;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.wb-progress li[data-state='active'] {
  border-color: var(--wb-cyan);
  box-shadow: 0 0 12px rgba(0, 204, 204, 0.2) inset;
}

.wb-progress li[data-state='active'] strong {
  color: #d9ffff;
  display: inline;
}

.wb-progress li[data-state='done'] span { color: var(--wb-ember); }
.wb-progress li[data-state='done'] strong { color: #a4c2bf; }

/* --- mission ribbon ------------------------------------------------------- */

.wb-ribbon {
  align-items: baseline;
  background: linear-gradient(90deg, rgba(0, 204, 204, 0.12), rgba(0, 0, 0, 0) 70%);
  border-left: 3px solid var(--wb-cyan);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  padding: 8px 12px;
}

.wb-ribbon-isle {
  color: var(--wb-cyan);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}

.wb-ribbon strong {
  color: #eaffff;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}

.wb-ribbon small {
  color: #6f8f91;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

/* --- stage + HUD ---------------------------------------------------------- */

.wb-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 196px;
}

.wb-stage-wrap { min-width: 0; }

.wb-stage {
  aspect-ratio: 16 / 9;
  background: #05080b;
  border: 1px solid var(--wb-line);
  border-radius: 6px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7) inset;
  max-height: 72vh;
  overflow: hidden;
  position: relative;
  touch-action: none;
  width: 100%;
}

.wb-stage canvas {
  display: block;
  height: 100%;
  width: 100%;
}

.wb-floaters {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
}

.wb-floater {
  animation: wb-float 1s ease-out forwards;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  position: absolute;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

@keyframes wb-float {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.85); }
  18% { opacity: 1; transform: translate(-50%, -55%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

/* The title card for a stage.
 *
 * This used to slide the whole block in as one object, which gave the act
 * number, the name and the brief exactly equal weight and read like a
 * notification rather than a title. It also sat directly on the scene, so over
 * Act III's wax — which is nearly white where the lantern hits it — pale text on
 * pale ground was the likely result. Now: a soft scrim to guarantee contrast,
 * and a staggered reveal so the eye is given the act, then the name, then the
 * line of prose, in that order. */
.wb-stinger {
  animation: wb-stinger-in 0.5s ease-out both;
  left: 0;
  padding: 18px 34px 20px;
  pointer-events: none;
  position: absolute;
  top: 23%;
}

/* Sits behind the text only, fading out to the right so it never reads as a
   panel with an edge. */
.wb-stinger::before {
  background: linear-gradient(90deg, rgba(0, 10, 12, 0.72) 0%,
    rgba(0, 10, 12, 0.5) 42%, rgba(0, 10, 12, 0) 100%);
  content: '';
  inset: 0 -10% 0 0;
  position: absolute;
  z-index: -1;
}

.wb-stinger.is-out { animation: wb-stinger-out 0.5s ease-in both; }
/* On the way out the whole card leaves together; the stagger is an entrance
   device and replaying it in reverse just looks like a fault. */
.wb-stinger.is-out span,
.wb-stinger.is-out strong,
.wb-stinger.is-out p { animation: none; opacity: 1; transform: none; }

.wb-stinger span,
.wb-stinger strong,
.wb-stinger p { animation: wb-stinger-line 0.5s ease-out both; }

.wb-stinger span {
  color: var(--wb-cyan);
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.34em;
}

.wb-stinger strong {
  animation-delay: 0.13s;
  color: #f4ffff;
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.3rem;
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin-top: 2px;
  text-shadow: 0 0 24px rgba(0, 204, 204, 0.55), 0 4px 12px rgba(0, 0, 0, 0.9);
}

/* A hairline drawn under the name, growing out of it. */
.wb-stinger strong::after {
  animation: wb-stinger-rule 0.66s 0.3s ease-out both;
  background: linear-gradient(90deg, var(--wb-cyan), rgba(0, 204, 204, 0));
  content: '';
  display: block;
  height: 1px;
  margin-top: 9px;
  transform-origin: left center;
  width: 12em;
}

.wb-stinger p {
  animation-delay: 0.42s;
  color: #a8cccc;
  font-size: 0.9rem;
  font-style: italic;
  margin: 9px 0 0;
  max-width: 30em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

@keyframes wb-stinger-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wb-stinger-line {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes wb-stinger-rule {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes wb-stinger-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(18px); }
}

.wb-overlay {
  align-items: center;
  backdrop-filter: blur(3px);
  background: rgba(2, 8, 10, 0.78);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: absolute;
  z-index: 3;
}

.wb-overlay-card {
  background: linear-gradient(180deg, rgba(0, 34, 36, 0.94), rgba(0, 12, 14, 0.96));
  border: 1px solid var(--wb-line);
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(0, 204, 204, 0.14);
  max-height: 100%;
  max-width: 620px;
  overflow-y: auto;
  padding: 22px 26px;
  text-align: center;
}

.wb-overlay-card h2 {
  color: #eaffff;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
}

.wb-lore {
  color: #b7d6d6;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 14px;
  text-align: left;
  white-space: pre-line;
}

.wb-card-stats {
  display: grid;
  gap: 6px 14px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 0 0 14px;
}

.wb-card-stats > div {
  border: 1px solid rgba(0, 204, 204, 0.18);
  border-radius: 4px;
  padding: 6px 8px;
}

.wb-card-stats dt {
  color: #6f8f91;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wb-card-stats dd {
  color: #eaffff;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.02rem;
  margin: 2px 0 0;
}

/* The one line on the card that reacts to how the stage was played. Beating par
 * is the only thing on that panel a player can be pleased about, so it gets to
 * look like it: a lit rule above the stat grid rather than another grey number
 * for them to compare by hand. */
.wb-verdict {
  border-top: 1px solid rgba(0, 204, 204, 0.22);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  padding-top: 11px;
}

.wb-verdict.is-good {
  color: #7dffd6;
  text-shadow: 0 0 18px rgba(0, 255, 190, 0.4);
}

/* Over par is information, not failure — the stage is still relit. Kept warm
   and quiet rather than red, which would read as a death. */
.wb-verdict.is-slow { color: #d8b48a; }

.wb-card-stats dd.is-good {
  color: #7dffd6;
  text-shadow: 0 0 16px rgba(0, 255, 190, 0.34);
}

.wb-post { color: #8fb6b6; font-size: 0.82rem; margin: 0 0 14px; }
.wb-post.is-error { color: #ff8a96; }

.wb-progress-note { color: #7d9a9c; font-size: 0.8rem; margin: 8px 0 0; }

.wb-loadbar {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  display: block;
  height: 10px;
  margin: 0 0 4px;
  overflow: hidden;
  padding: 0;
}

.wb-loadbar span {
  background: linear-gradient(90deg, var(--wb-cyan), var(--wb-cyan-bright));
  display: block;
  height: 100%;
  min-width: 0;
  transition: width 0.2s ease;
  width: 0;
}

/* --- HUD ------------------------------------------------------------------ */

.wb-hud {
  align-content: start;
  background: var(--wb-panel);
  border: 1px solid rgba(0, 204, 204, 0.2);
  border-radius: 6px;
  display: grid;
  gap: 7px;
  padding: 12px;
}

.wb-stat {
  align-items: baseline;
  border-bottom: 1px dashed rgba(0, 204, 204, 0.16);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
}

.wb-stat span {
  color: #6f8f91;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wb-stat strong {
  color: #eaffff;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.0rem;
  letter-spacing: 0.03em;
}

.wb-wax { display: inline-flex; gap: 4px; }

.wb-pip {
  background: rgba(120, 120, 120, 0.25);
  border: 1px solid rgba(255, 180, 87, 0.35);
  border-radius: 50%;
  display: inline-block;
  height: 13px;
  width: 13px;
}

.wb-pip.is-lit {
  background: radial-gradient(circle at 35% 30%, #fff0c2, var(--wb-ember) 65%, #b4600f);
  box-shadow: 0 0 8px rgba(255, 180, 87, 0.75);
  border-color: #ffd9a0;
}

.wb-combo {
  color: var(--wb-cyan-bright);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.0rem;
  letter-spacing: 0.1em;
  text-align: center;
  text-shadow: 0 0 14px rgba(0, 204, 204, 0.6);
}

.wb-status {
  color: #9fc4c4;
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 4px 0 0;
}

/* --- leaderboard ---------------------------------------------------------- */

.wb-divider {
  border: none;
  border-top: 1px solid rgba(0, 204, 204, 0.28);
  margin: 26px 0 18px;
}

.leaderboard h2 {
  color: #aefefe;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}

#lbTable {
  border: 1px solid #008b8b;
  border-collapse: collapse;
  width: 100%;
}

#lbTable th,
#lbTable td {
  border: 1px solid #008b8b;
  padding: 7px 10px;
  text-align: left;
}

#lbTable th {
  background: rgba(0, 204, 204, 0.14);
  color: #aefefe;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

#lbTable td { color: #cfeeee; font-size: 0.88rem; }
#lbTable tbody tr:nth-child(odd) td { background: rgba(0, 204, 204, 0.04); }

.empty-cell {
  color: #7d9a9c;
  font-style: italic;
  text-align: center !important;
}

/* --- narrower desktops ---------------------------------------------------- */

/* Ten stages do not fit their names at ordinary widths; the numeral always
   fits and the rail is a progress indicator first, a menu second. */
.wb-progress strong { display: none; }
.wb-progress li { justify-content: center; padding: 7px 4px; }

/* Even at 1500px ten names do not fit: they collided into "Wickwood H",
   "Chandler's G", "Wax Cathedra". Showing only the stage you are on keeps the
   rail readable at every width, and lets the current stage read as the focus
   rather than as one chip among ten. */
@media (min-width: 1500px) {
  .wb-progress li[data-state='active'] strong { display: block; }
  .wb-progress li { justify-content: flex-start; padding: 7px 8px; }
  .wb-progress li[data-state='active'] { padding-right: 12px; }
}

@media (max-width: 1120px) {
  .wb-layout { grid-template-columns: minmax(0, 1fr) 172px; }
}

@media (prefers-reduced-motion: reduce) {
  .wb-floater,
  .wb-stinger,
  .wb-stinger.is-out,
  /* The staggered children need collapsing too, and their delays cleared —
     a 0.01ms animation that still waits 0.42s to start is not reduced motion,
     it is the same motion with the card blank in front of it. */
  .wb-stinger span,
  .wb-stinger strong,
  .wb-stinger strong::after,
  .wb-stinger p {
    animation-delay: 0s;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}