/* ═══════════════════════════════════════════════════════════════════════
   world-nine-name.css — the once-only ask to name your Nine
   (world-nine-name.js, #3749 slice 2b).

   The welcome window's pieces (world-welcome.css), not a design of its own:
   Kit B's slate window with its red title ribbon, the gold button for the
   one thing it asks (Save) and the slate one for the other (Not now), 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 where the welcome does, one under the moderation
   notice (100001), which always goes first; the welcome waits for it, so
   the two are never up together.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

#world-nine-name.wnn {
  --wnn-k: var(--hv-k, 1);
  --wnn-ink: #efe3c8;
  --wnn-ink-2: #d9cdb2;
  --wnn-gold: #e3c79a;
  --wnn-slate: #3a4760;
  --wnn-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: wnn-fade 220ms ease-out both;
}

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

#world-nine-name .wnn-window {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  max-height: calc(100dvh - 48px);
  margin-top: calc(14 * var(--wnn-k) * 1px);
  padding: calc(14 * var(--wnn-k) * 1px + 4px) 24px 14px;
  color: var(--wnn-ink);
  background-color: var(--wnn-slate);
  background-clip: padding-box;
  border: calc(18 * var(--wnn-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(--wnn-k) * 1px);
  border-image-repeat: stretch;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55));
  animation: wnn-rise 260ms ease-out both;
  text-align: left;
}

/* the red ribbon, straddling the top edge as every door's title does */
#world-nine-name .wnn-title {
  position: absolute;
  top: calc(-18 * var(--wnn-k) * 1px - 11 * var(--wnn-k) * 1px);
  left: 50%;
  translate: -50% 0;
  box-sizing: border-box;
  height: calc(28 * var(--wnn-k) * 1px);
  min-width: calc(116 * var(--wnn-k) * 1px);
  max-width: 86%;
  margin: 0;
  padding: calc(2 * var(--wnn-k) * 1px + 3px) calc(28 * var(--wnn-k) * 1px) calc(9 * var(--wnn-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(--wnn-k) * 1px) calc(24 * var(--wnn-k) * 1px) calc(9 * var(--wnn-k) * 1px) calc(24 * var(--wnn-k) * 1px);
  border-image-repeat: stretch;
  font-family: var(--sk-tome, 'New Rocker', 'Press Start 2P', serif);
  font-size: calc(14 * var(--wnn-k) * 1px + 2px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: #f7e6c4;
  text-shadow: 0 calc(var(--wnn-k) * 1px) 0 #5e1414;
}
@supports (translate: round(-50%, 1px) 0) {
  #world-nine-name .wnn-title { left: round(50%, 1px); translate: round(-50%, 1px) 0; }
}

#world-nine-name .wnn-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  font-family: var(--wc-body, 'VT323', 'Courier New', monospace);
  font-size: 21px;
  line-height: 1.2;
}

#world-nine-name .wnn-lead {
  margin: 0 0 12px;
  font-size: 23px;
  color: var(--wnn-gold);
}

/* why it asks again (#3749: the name went to its X owner), above the lead,
   in the welcome's plain ink */
#world-nine-name .wnn-notice {
  margin: 0 0 10px;
  font-size: 19px;
  color: var(--wnn-ink-2);
}

#world-nine-name .wnn-label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--wc-head, 'Press Start 2P', 'Courier New', monospace);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--wnn-gold);
}

/* the field: a dark well in the slate, the card colour the welcome's
   sections sit on, with the same two-line rim */
#world-nine-name .wnn-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  background: var(--wnn-card);
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 4px #7e6440;
  font-family: var(--wc-body, 'VT323', 'Courier New', monospace);
  font-size: 24px;
  line-height: 1.2;
  color: var(--wnn-ink);
  caret-color: var(--wnn-gold);
}
#world-nine-name .wnn-input:focus { outline: none; box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 4px #d9a441; }

#world-nine-name .wnn-hint {
  margin: 8px 0 0;
  font-size: 19px;
  color: var(--wnn-ink-2);
}

/* a refusal, in the server's own words */
#world-nine-name .wnn-err {
  min-height: 1.2em;
  margin: 6px 0 0;
  font-size: 20px;
  color: #f0a27a;
}

#world-nine-name .wnn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

#world-nine-name .wnn-btn {
  box-sizing: border-box;
  min-width: 140px;
  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(--wnn-k) * 1px) calc(3 * var(--wnn-k) * 1px) calc(5 * var(--wnn-k) * 1px) calc(3 * var(--wnn-k) * 1px);
  border-width: calc(3 * var(--wnn-k) * 1px) calc(3 * var(--wnn-k) * 1px) calc(5 * var(--wnn-k) * 1px) calc(3 * var(--wnn-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(--wnn-ink);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
#world-nine-name .wnn-btn:hover { color: #fff3d6; filter: brightness(1.18); }
#world-nine-name .wnn-btn:active { filter: brightness(0.92); }
#world-nine-name .wnn-btn:focus-visible { outline: 3px solid #d9a441; outline-offset: 2px; }
#world-nine-name .wnn-btn[disabled] { cursor: default; filter: saturate(0.6) brightness(0.9); }

/* the one thing the window asks of you: gold, ink on gold */
#world-nine-name .wnn-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-nine-name .wnn-gold:hover { color: #1d1406; }

/* ── a phone on its side (844x390) and other short screens ─────────── */
@media (max-height: 500px) {
  #world-nine-name.wnn { padding: 8px 12px; }
  #world-nine-name .wnn-window {
    width: min(520px, 100%);
    max-height: calc(100dvh - 30px);
    padding: calc(14 * var(--wnn-k) * 1px) 16px 8px;
  }
  #world-nine-name .wnn-form { font-size: 16px; line-height: 1.15; }
  #world-nine-name .wnn-lead { margin-bottom: 6px; font-size: 17px; }
  #world-nine-name .wnn-notice { margin-bottom: 4px; font-size: 15px; }
  #world-nine-name .wnn-label { font-size: 10px; margin-bottom: 4px; }
  #world-nine-name .wnn-input { min-height: 40px; font-size: 20px; }
  #world-nine-name .wnn-hint { margin-top: 4px; font-size: 15px; }
  #world-nine-name .wnn-err { font-size: 16px; }
  #world-nine-name .wnn-row { margin-top: 6px; }
  #world-nine-name .wnn-btn { min-height: 40px; }
}

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

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

} /* end of @layer corners */