/* ═══════════════════════════════════════════════════════════════════════
   world-welcome.css — the welcome window (world-welcome.js, Wray
   2026-10-14).

   Kit B's slate window with its red title ribbon, the gold button for the
   one thing it asks (Go to the Pit) and the slate one for the other, the
   same pieces world-windows-v2.css dresses the doors in. Drawn at the
   chrome pixel (--hv-k, world-hud-v2.css), with a plain slate floor under
   the art so it reads with the HUD pass off too.

   `corners`, the last layer, so nothing in the skin restyles it by
   accident. It stacks one under the moderation notice (100001), which
   always goes first.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

#world-welcome.wwl {
  --wwl-k: var(--hv-k, 1);
  --wwl-ink: #efe3c8;
  --wwl-ink-2: #d9cdb2;
  --wwl-gold: #e3c79a;
  --wwl-slate: #3a4760;
  --wwl-card: #2a3345;
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(6, 8, 14, 0.62);
  pointer-events: auto;
  animation: wwl-fade 220ms ease-out both;
}

@keyframes wwl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wwl-rise { from { transform: translateY(10px); } to { transform: none; } }

#world-welcome .wwl-window {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(600px, 100%);
  max-height: calc(100dvh - 48px);
  margin-top: calc(14 * var(--wwl-k) * 1px);
  padding: calc(14 * var(--wwl-k) * 1px + 4px) 26px 16px;
  color: var(--wwl-ink);
  background-color: var(--wwl-slate);
  background-clip: padding-box;
  border: calc(18 * var(--wwl-k) * 1px) solid transparent;
  border-image-source: url('/assets/ui/kitb/slate-window.png?v=2026-09-24a');
  border-image-slice: 18 fill;
  border-image-width: calc(18 * var(--wwl-k) * 1px);
  border-image-repeat: stretch;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55));
  animation: wwl-rise 260ms ease-out both;
  text-align: left;
}

/* the red ribbon, straddling the top edge as every door's title does */
#world-welcome .wwl-title {
  position: absolute;
  top: calc(-18 * var(--wwl-k) * 1px - 11 * var(--wwl-k) * 1px);
  left: 50%;
  translate: -50% 0;
  box-sizing: border-box;
  height: calc(28 * var(--wwl-k) * 1px);
  min-width: calc(116 * var(--wwl-k) * 1px);
  max-width: 86%;
  margin: 0;
  padding: calc(2 * var(--wwl-k) * 1px + 3px) calc(28 * var(--wwl-k) * 1px) calc(9 * var(--wwl-k) * 1px);
  border-style: solid;
  border-width: 0;
  border-image-source: url('/assets/ui/kitb/title.png?v=2026-09-24a');
  border-image-slice: 2 24 9 24 fill;
  border-image-width: calc(2 * var(--wwl-k) * 1px) calc(24 * var(--wwl-k) * 1px) calc(9 * var(--wwl-k) * 1px) calc(24 * var(--wwl-k) * 1px);
  border-image-repeat: stretch;
  font-family: var(--sk-tome, 'New Rocker', 'Press Start 2P', serif);
  font-size: calc(14 * var(--wwl-k) * 1px + 2px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: #f7e6c4;
  text-shadow: 0 calc(var(--wwl-k) * 1px) 0 #5e1414;
}
@supports (translate: round(-50%, 1px) 0) {
  #world-welcome .wwl-title { left: round(50%, 1px); translate: round(-50%, 1px) 0; }
}

#world-welcome .wwl-x {
  position: absolute;
  top: calc(-18 * var(--wwl-k) * 1px - 11 * var(--wwl-k) * 1px);
  right: calc(-9 * var(--wwl-k) * 1px);
  width: calc(25 * var(--wwl-k) * 1px);
  height: calc(27 * var(--wwl-k) * 1px);
  min-width: 25px;
  min-height: 27px;
  padding: 0;
  border: 0;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
}
#world-welcome .wwl-x:hover { filter: brightness(1.15); }
#world-welcome .wwl-x:focus-visible { outline: 3px solid #d9a441; outline-offset: 2px; }

#world-welcome .wwl-body {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  font-family: var(--wc-body, 'VT323', 'Courier New', monospace);
  font-size: 21px;
  line-height: 1.2;
}

#world-welcome .wwl-lead {
  margin: 0 0 14px;
  font-size: 23px;
  color: var(--wwl-gold);
}

#world-welcome .wwl-sec {
  margin: 0 0 12px;
  padding: 10px 14px 10px;
  background: var(--wwl-card);
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 4px #7e6440;
}
#world-welcome .wwl-season {
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 4px #b8903f, inset 0 5px 0 2px #e3c79a;
}

#world-welcome .wwl-h {
  margin: 0 0 6px;
  font-family: var(--wc-head, 'Press Start 2P', 'Courier New', monospace);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--wwl-gold);
}

#world-welcome .wwl-p { margin: 0 0 6px; color: var(--wwl-ink); }
#world-welcome .wwl-p:last-child { margin-bottom: 0; }
#world-welcome .wwl-now { color: var(--wwl-ink-2); }

#world-welcome .wwl-report {
  margin: 4px 0 0;
  font-size: 19px;
  color: var(--wwl-ink-2);
}
#world-welcome .wwl-link { color: #f0c27a; text-decoration: underline; }
#world-welcome .wwl-link:focus-visible { outline: 2px solid #d9a441; outline-offset: 2px; }

#world-welcome .wwl-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 14px;
}

#world-welcome .wwl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  order: 2;
}

#world-welcome .wwl-btn {
  box-sizing: border-box;
  min-width: 150px;
  min-height: 44px;
  padding: 6px 16px;
  border-style: solid;
  border-image-source: url('/assets/ui/kitb/btn.png?v=2026-09-24a');
  border-image-slice: 3 3 5 3 fill;
  border-image-width: calc(3 * var(--wwl-k) * 1px) calc(3 * var(--wwl-k) * 1px) calc(5 * var(--wwl-k) * 1px) calc(3 * var(--wwl-k) * 1px);
  border-width: calc(3 * var(--wwl-k) * 1px) calc(3 * var(--wwl-k) * 1px) calc(5 * var(--wwl-k) * 1px) calc(3 * var(--wwl-k) * 1px);
  border-image-repeat: stretch;
  background: #363d4f;
  background-clip: padding-box;
  image-rendering: pixelated;
  font-family: var(--wc-head, 'Press Start 2P', 'Courier New', monospace);
  font-size: 11px;
  line-height: 1.3;
  color: var(--wwl-ink);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
#world-welcome .wwl-btn:hover { color: #fff3d6; filter: brightness(1.18); }
#world-welcome .wwl-btn:active { filter: brightness(0.92); }
#world-welcome .wwl-btn:focus-visible { outline: 3px solid #d9a441; outline-offset: 2px; }

/* the one thing the window asks of you: gold, ink on gold */
#world-welcome .wwl-gold {
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  background: #dda52c;
  background-clip: padding-box;
  color: #2a1c0c;
  text-shadow: none;
}
#world-welcome .wwl-gold:hover { color: #1d1406; }

#world-welcome .wwl-hide {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--wc-body, 'VT323', 'Courier New', monospace);
  font-size: 19px;
  color: var(--wwl-ink-2);
  cursor: pointer;
}
#world-welcome .wwl-check {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #c9a24a;
  cursor: pointer;
}

/* ── a phone on its side (844x390) and other short screens ─────────── */
@media (max-height: 500px) {
  #world-welcome.wwl { padding: 8px 12px; }
  #world-welcome .wwl-window {
    width: min(720px, 100%);
    max-height: calc(100dvh - 30px);
    padding: calc(14 * var(--wwl-k) * 1px) 16px 8px;
  }
  #world-welcome .wwl-body { font-size: 16px; line-height: 1.15; }
  #world-welcome .wwl-h { font-size: 10px; margin-bottom: 4px; }
  /* sideways, the two cards stand side by side so the Pit's is not
     scrolled out of sight */
  @media (min-width: 700px) {
    #world-welcome .wwl-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 10px;
      align-items: start;
    }
    #world-welcome .wwl-lead,
    #world-welcome .wwl-report { grid-column: 1 / -1; }
    #world-welcome .wwl-sec { align-self: stretch; }
  }
  #world-welcome .wwl-lead { margin-bottom: 6px; font-size: 17px; }
  #world-welcome .wwl-report { font-size: 15px; }
  #world-welcome .wwl-sec { margin-bottom: 8px; padding: 8px 12px; }
  #world-welcome .wwl-foot { margin-top: 8px; }
  #world-welcome .wwl-btn { min-height: 40px; }
  #world-welcome .wwl-hide { min-height: 36px; font-size: 17px; }
}

@media (max-width: 520px) {
  #world-welcome .wwl-window { padding-left: 14px; padding-right: 14px; }
  #world-welcome .wwl-row { width: 100%; }
  #world-welcome .wwl-btn { flex: 1 1 140px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #world-welcome.wwl, #world-welcome .wwl-window { animation: none; }
}

} /* end of @layer corners */