/* ═══════════════════════════════════════════════════════════════════════
   world-starter-gift.css — Nerm's first opening, the starter gift
   (world-starter-gift.js, #4308 B29; behind FEATURE_PACKS_LONG_PULL).

   The welcome window's own chrome (world-welcome.css: Kit B's slate window,
   its red title ribbon, the close cap, the gold button), the same art at the
   same chrome pixel, so the two read as one family. The cards are the
   Spellbook's painter (world-card-paint.js), drawn at three sizes; an empty
   spell slot is the Spellbook's dark, card-shaped hole (world-spellbook.css
   .wsb-face.is-hole: BD23, an empty slot does nothing).

   `corners`, the last layer. One under the moderation notice (100001), the
   welcome's own height, which it never opens over (it waits for it).

   A phone plays the world in LANDSCAPE (844x390 to 932x430): the window
   takes the height there, the house's four sit in one row, and the rest
   scroll inside the body.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

#world-starter-gift.wsg {
  --wsg-k: var(--hv-k, 1);
  --wsg-ink: #efe3c8;
  --wsg-ink-2: #d9cdb2;
  --wsg-gold: #e3c79a;
  --wsg-slate: #3a4760;
  --wsg-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: wsg-fade 220ms ease-out both;
}
@keyframes wsg-fade { from { opacity: 0; } to { opacity: 1; } }

#world-starter-gift .wsg-window {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(820px, 100%);
  max-height: calc(100dvh - 48px);
  margin-top: calc(14 * var(--wsg-k) * 1px);
  padding: calc(14 * var(--wsg-k) * 1px + 4px) 22px 14px;
  color: var(--wsg-ink);
  background-color: var(--wsg-slate);
  background-clip: padding-box;
  border: calc(18 * var(--wsg-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(--wsg-k) * 1px);
  border-image-repeat: stretch;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55));
}

#world-starter-gift .wwl-title {
  position: absolute;
  top: calc(-18 * var(--wsg-k) * 1px - 11 * var(--wsg-k) * 1px);
  left: 50%;
  translate: -50% 0;
  box-sizing: border-box;
  height: calc(28 * var(--wsg-k) * 1px);
  min-width: calc(116 * var(--wsg-k) * 1px);
  max-width: 86%;
  margin: 0;
  padding: calc(2 * var(--wsg-k) * 1px + 3px) calc(28 * var(--wsg-k) * 1px) calc(9 * var(--wsg-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(--wsg-k) * 1px) calc(24 * var(--wsg-k) * 1px) calc(9 * var(--wsg-k) * 1px) calc(24 * var(--wsg-k) * 1px);
  border-image-repeat: stretch;
  font-family: var(--sk-tome, 'New Rocker', 'Press Start 2P', serif);
  font-size: calc(14 * var(--wsg-k) * 1px + 2px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: #f7e6c4;
  text-shadow: 0 calc(var(--wsg-k) * 1px) 0 #5e1414;
}
#world-starter-gift .wwl-x {
  position: absolute;
  top: calc(-18 * var(--wsg-k) * 1px - 11 * var(--wsg-k) * 1px);
  right: calc(-9 * var(--wsg-k) * 1px);
  width: calc(25 * var(--wsg-k) * 1px);
  height: calc(27 * var(--wsg-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-starter-gift .wwl-x:focus-visible { outline: 3px solid #d9a441; outline-offset: 2px; }

#world-starter-gift .wsg-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-starter-gift .wsg-lead { margin: 0 0 12px; font-size: 23px; color: var(--wsg-gold); }
#world-starter-gift .wwl-p { margin: 0 0 6px; color: var(--wsg-ink); }
#world-starter-gift .wsg-hint, #world-starter-gift .wsg-instincts { color: var(--wsg-ink-2); }
#world-starter-gift .wsg-note { min-height: 1.2em; color: var(--wsg-gold); }

/* ── the faces: the painter's canvas, or the name on the same frame ── */
#world-starter-gift .wsg-face {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 292 / 389;
  background: var(--wsg-card);
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 4px #7e6440;
}
#world-starter-gift .wsg-face.is-painted { background: none; box-shadow: none; }
#world-starter-gift .wsg-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#world-starter-gift .wsg-name { position: relative; padding: 0 4px 6px; font-size: 16px; text-align: center; color: var(--wsg-ink); }
#world-starter-gift .wsg-face.is-painted .wsg-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#world-starter-gift .wsg-big { width: min(170px, 22vw); }
#world-starter-gift .wsg-mid { width: min(110px, 15vw); }
#world-starter-gift .wsg-small { width: 64px; }

#world-starter-gift .wsg-four { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 0 6px; }
#world-starter-gift .wsg-house-row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
#world-starter-gift .wsg-house-name { flex: 0 0 110px; font-size: 18px; color: var(--wsg-gold); }
#world-starter-gift .wsg-strip { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── step 3: the hand and the dark buttons ── */
#world-starter-gift .wsg-slots-stage { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; margin: 6px 0; }
#world-starter-gift .wsg-hand, #world-starter-gift .wsg-holes { display: flex; gap: 10px; }
#world-starter-gift .wsg-pick { padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
#world-starter-gift .wsg-pick[aria-pressed='true'] .wsg-face { transform: translateY(-3px); filter: drop-shadow(0 0 2px #f2d27a) drop-shadow(0 0 7px #f2d27a); }
#world-starter-gift .wsg-slot {
  position: relative;
  width: min(84px, 12vw);
  aspect-ratio: 292 / 389;
  padding: 0;
  border: 0;
  background: var(--wsg-card);
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 4px #7e6440;
  color: var(--wsg-ink);
  cursor: pointer;
}
/* the hole: dark and plainly empty, as the Spellbook draws one */
#world-starter-gift .wsg-slot.is-hole { background: #0b0f16; box-shadow: inset 0 0 0 1px rgba(232, 213, 169, .2), inset 0 6px 14px rgba(0, 0, 0, .75); }
#world-starter-gift .wsg-slot.is-hole:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 2px #f2d27a, inset 0 6px 14px rgba(0, 0, 0, .75); }
#world-starter-gift .wsg-slot-k { position: absolute; right: 6px; bottom: 4px; font-size: 16px; color: var(--wsg-gold); }
#world-starter-gift .wsg-slot-name { position: absolute; inset: auto 4px 24px; font-size: 14px; text-align: center; }
#world-starter-gift .wsg-slot:disabled { cursor: default; }

#world-starter-gift .wwl-foot { padding-top: 10px; }
#world-starter-gift .wsg-row { display: flex; justify-content: flex-end; gap: 12px; }
#world-starter-gift .wwl-btn {
  min-height: 40px;
  padding: 6px 18px;
  font-family: var(--wc-head, 'Press Start 2P', 'Courier New', monospace);
  font-size: 12px;
  color: #1d1408;
  background: #c8a46a;
  border: 2px solid #0b0f15;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .25);
  cursor: pointer;
}
#world-starter-gift .wwl-btn.wwl-gold { background: #e3c79a; }
#world-starter-gift .wwl-btn:focus-visible { outline: 3px solid #d9a441; outline-offset: 2px; }

/* the card under a drag */
.wsg-ghost {
  position: fixed;
  z-index: 100002;
  translate: -50% -60%;
  padding: 6px 10px;
  font-family: var(--wc-body, 'VT323', 'Courier New', monospace);
  font-size: 18px;
  color: #1d1408;
  background: #e3c79a;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* a landscape phone: the height is short, so the cards are too */
@media (max-height: 460px) {
  #world-starter-gift .wsg-window { max-height: calc(100dvh - 24px); padding: calc(14 * var(--wsg-k) * 1px) 16px 10px; }
  #world-starter-gift .wsg-lead { font-size: 20px; margin-bottom: 8px; }
  #world-starter-gift .wsg-big { width: min(120px, 15vw, 26dvh); }
  #world-starter-gift .wsg-mid { width: min(84px, 12vw, 22dvh); }
  #world-starter-gift .wsg-slot { width: min(70px, 10vw, 20dvh); }
  #world-starter-gift .wsg-small { width: 52px; }
  #world-starter-gift .wsg-house-name { flex-basis: 90px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #world-starter-gift.wsg { animation: none; }
}

} /* end of @layer corners */