/* Elf Welcome Workshop Phase 2 — feature-local, no-cost placeholder art.
   Final cinematic workshop and modular character layers replace these scoped
   HTML/CSS shapes only after a separately approved paid-asset request. */

#elf .elf-form,
#elf .elf-result { min-width:0; }

.np-win--elf #elf .elf-form:not([hidden]) {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  gap:clamp(14px,2.3vw,32px);
  align-items:stretch;
  padding:clamp(12px,2.1vw,26px);
  overflow:hidden;
  background:
    radial-gradient(ellipse at 82% 6%,rgba(55,197,166,.23),transparent 28%),
    linear-gradient(155deg,#082a45 0%,#0f5655 58%,#062b38 100%);
}
.np-win--elf #elf .elf-form:not([hidden])::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle,rgba(255,248,207,.9) 0 1px,transparent 1.7px);
  background-size:46px 51px; mask-image:linear-gradient(#000,transparent 72%);
}
.np-win--elf #elf .elf-welcome-scene {
  position:relative; isolation:isolate; min-width:0; min-height:0; overflow:hidden;
  border:1px solid rgba(235,207,143,.32); border-radius:28px;
  background:
    radial-gradient(ellipse at 71% 10%,rgba(81,220,178,.35),transparent 28%),
    linear-gradient(180deg,#08264a 0%,#15595a 62%,#0b3b43 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 20px 42px rgba(0,14,26,.24);
}
.np-win--elf #elf .elf-welcome-scene::before {
  content:""; position:absolute; z-index:0; inset:auto -12% -13%; height:34%;
  border-radius:52% 52% 0 0/34% 34% 0 0;
  background:radial-gradient(ellipse at 35% 17%,#edffff 0 7%,transparent 30%),linear-gradient(#d9f4f0,#83bdc2 57%,#397d86);
}
.np-win--elf #elf .elf-stage-sky { position:absolute; z-index:0; inset:0; background:radial-gradient(ellipse at 23% 7%,#6de1bb55,transparent 18%),radial-gradient(ellipse at 89% 21%,#fff6c755 0 1px,transparent 2px); background-size:100% 100%,69px 73px; }
.np-win--elf #elf .elf-stage-pines { position:absolute; z-index:1; bottom:15%; width:18%; height:40%; opacity:.9; filter:drop-shadow(0 8px 5px #03192766); }
.np-win--elf #elf .elf-stage-pines::before,
.np-win--elf #elf .elf-stage-pines::after { content:""; position:absolute; left:50%; transform:translateX(-50%); clip-path:polygon(50% 0,100% 100%,0 100%); background:linear-gradient(90deg,#19705d,#0c5147 58%,#07383a); }
.np-win--elf #elf .elf-stage-pines::before { top:0; width:80%; height:56%; }
.np-win--elf #elf .elf-stage-pines::after { bottom:0; width:122%; height:69%; }
.np-win--elf #elf .elf-stage-pines--left { left:2%; }
.np-win--elf #elf .elf-stage-pines--right { right:1%; height:46%; }
.np-win--elf #elf .elf-stage-gifts { position:absolute; z-index:4; left:7%; bottom:13%; width:22%; height:20%; }
.np-win--elf #elf .elf-stage-gifts i { position:absolute; bottom:0; display:block; border:2px solid #f8dd91; border-radius:5px; box-shadow:inset 0 2px #fff7,0 6px 8px #05223055; }
.np-win--elf #elf .elf-stage-gifts i::after { content:""; position:absolute; left:44%; top:-6%; bottom:-6%; width:12%; background:#fff0ad; box-shadow:0 0 0 1px #ce9340; }
.np-win--elf #elf .elf-stage-gifts i:nth-child(1) { left:0; width:39%; height:55%; background:#ad343f; }
.np-win--elf #elf .elf-stage-gifts i:nth-child(2) { left:26%; width:39%; height:96%; background:#258b6b; }
.np-win--elf #elf .elf-stage-gifts i:nth-child(3) { right:0; width:39%; height:71%; background:#d9872e; }
.np-win--elf #elf .elf-stage-machine {
  position:absolute; z-index:2; left:15%; right:8%; top:16%; bottom:15%;
  overflow:hidden; border:clamp(6px,.85cqw,13px) solid #bd8d47; border-radius:9% 9% 12% 12%/13% 13% 8% 8%;
  background:linear-gradient(#ae3239 0 9%,#195d51 10% 100%);
  box-shadow:inset 0 0 0 3px #f1d38d,inset 0 0 0 7px #783821,0 10px 0 #70271e,0 18px 27px #041a2977;
}
.np-win--elf #elf .elf-stage-snowcap { position:absolute; z-index:4; left:-6%; right:-6%; top:-14%; height:31%; border-radius:0 0 52% 52%; background:linear-gradient(#f8ffff,#d5efed 50%,#97c6c5 52%,#fbffff); box-shadow:0 5px 8px #031d2c55; }
.np-win--elf #elf .elf-stage-lights { position:absolute; z-index:5; left:9%; right:9%; top:19%; display:flex; justify-content:space-between; }
.np-win--elf #elf .elf-stage-lights i { width:clamp(8px,1.6cqw,18px); aspect-ratio:1; border:2px solid #a96f25; border-radius:50%; background:#ffe174; box-shadow:0 0 12px #ffdd70; }
.np-win--elf #elf .elf-stage-lights i:nth-child(3n) { background:#e65559; box-shadow:0 0 12px #dd5e67; }
.np-win--elf #elf .elf-stage-lights i:nth-child(4n) { background:#77dcb4; box-shadow:0 0 12px #74e2b5; }
.np-win--elf #elf .elf-stage-display {
  position:absolute; z-index:2; left:9%; top:38%; width:50%; height:50%; border:5px solid #d8b46b; border-radius:9%;
  color:#ffe8a7; background:linear-gradient(#092c45 0 51%,#187268 52%); box-shadow:inset 0 0 0 3px #71351f,inset 0 16px 22px #03162599; text-align:center;
}
.np-win--elf #elf .elf-stage-display span { position:absolute; top:10%; left:0; width:100%; font:800 clamp(10px,1.55cqw,23px)/1 Arial,sans-serif; letter-spacing:.12em; }
.np-win--elf #elf .elf-stage-display b { position:absolute; top:32%; left:50%; display:grid; place-items:center; width:30%; aspect-ratio:1; transform:translateX(-50%); border:4px solid #f4d991; border-radius:50%; color:#fffce0; background:radial-gradient(circle at 35% 28%,#fff 0 5%,#f8d77d 6% 14%,#56d1ad 15% 32%,#176e64 33% 53%,#0d494b 54%); box-shadow:0 0 0 4px #8d4321,0 0 22px #ffe18a99; font-size:clamp(23px,4cqw,55px); text-shadow:0 0 12px #ffe071; }
.np-win--elf #elf .elf-stage-display em { position:absolute; bottom:11%; width:13%; height:9%; border-radius:99px; background:#f0c875; box-shadow:0 3px #793d20; }.np-win--elf #elf .elf-stage-display em:nth-of-type(1){left:15%}.np-win--elf #elf .elf-stage-display em:nth-of-type(2){left:43.5%}.np-win--elf #elf .elf-stage-display em:nth-of-type(3){right:15%}
.np-win--elf #elf .elf-welcome-avatar { position:absolute; z-index:6; right:12%; bottom:8%; width:31%; filter:drop-shadow(0 12px 8px #03182477); animation:elfWorkshopBob 5s ease-in-out infinite; }
.np-win--elf #elf .elf-welcome-avatar::before { content:""; position:absolute; z-index:-1; left:8%; right:8%; bottom:5%; height:18%; border-radius:50%; background:#7be2be55; filter:blur(12px); }
.np-win--elf #elf .elf-welcome-avatar svg { display:block; width:100%; height:auto; }
.np-win--elf #elf .elf-stage-token { position:absolute; z-index:6; left:27%; bottom:11%; display:grid; place-items:center; width:clamp(42px,8cqw,76px); aspect-ratio:1; border:3px solid #f5d98c; border-radius:50%; color:#a65b1e; background:radial-gradient(circle,#fff9df,#f4cf74); box-shadow:inset 0 0 0 3px #fff8dc,0 5px 10px #03192955; font-size:clamp(20px,3.5cqw,40px); transform:rotate(-10deg); }
.np-win--elf #elf .elf-card--welcome {
  position:relative; z-index:2; align-self:center; max-height:100%; margin:0; padding:clamp(18px,2.6vw,32px);
  border:3px solid #c29147; border-radius:28px; color:#543019; background:radial-gradient(circle at 18% 8%,#fffdf1,#f5d487 70%,#d59942); box-shadow:inset 0 0 0 3px #fff3c3,0 15px 30px #02182766; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;
}
.np-win--elf #elf .elf-card--welcome .elf-eyebrow { color:#835226; }.np-win--elf #elf .elf-card--welcome .elf-hohoho { margin:7px 0 10px; color:#22533e; font-size:clamp(34px,4.1vw,52px); text-shadow:0 2px #fff9e5; }.np-win--elf #elf .elf-card--welcome .elf-intro-sub { color:#4b493a; font-size:16px; line-height:1.45; }
.np-win--elf #elf .elf-card--welcome .elf-reveal { min-height:56px; margin-top:22px; border:2px solid #b57521; color:#3e2810; background:linear-gradient(#fff0a9,#efbc49); box-shadow:inset 0 2px #fff8,0 5px 0 #9b5a1b,0 10px 18px #d18a2e55; }
.np-win--elf #elf .elf-card--welcome .elf-reveal:disabled { opacity:1; cursor:pointer; background:linear-gradient(#fff0a9,#efbc49); box-shadow:inset 0 2px #fff8,0 5px 0 #9b5a1b,0 10px 18px #d18a2e55; }
.np-win--elf #elf .elf-personalize-toggle { display:block; width:100%; min-height:44px; margin-top:13px; border:0; color:#355541; background:transparent; font:800 14px/1.25 var(--body); text-decoration:underline; text-underline-offset:4px; }
.np-win--elf #elf .elf-details { margin-top:12px; padding-top:14px; border-top:1px dashed #af7d3f; }.np-win--elf #elf .elf-card--welcome .elf-step { color:#69401e; }.np-win--elf #elf .elf-card--welcome .elf-input { color:#163a35; border-color:#d0a35e; background:#fff9e9; }.np-win--elf #elf .elf-card--welcome .elf-month { border-color:#d5af69; color:#40513e; background:#fff9e9; }.np-win--elf #elf .elf-card--welcome .elf-month.is-active { color:#fff; border-color:#1d684d; background:#287653; box-shadow:0 4px 9px #77532344; }.np-win--elf #elf .elf-card--welcome .elf-hint { color:#6e5b3a; }
.np-win--elf #elf .elf-claim { border:2px solid #b97920; border-radius:999px; min-height:44px; padding:10px 18px; color:#3d260e; background:linear-gradient(#fff1a7,#efbc49); box-shadow:inset 0 2px #fff9,0 4px 0 #96591b; font:900 16px var(--body); }
.np-win--elf #elf .elf-claim:disabled { opacity:.72; cursor:default; }.np-win--elf #elf .elf-claim-status { min-height:1.3em; margin:8px 0 0; color:#b9ead1; font:700 14px var(--body); text-align:center; }
.np-win--elf #elf .elf-result--claimed .elf-claim-status { color:#ffe19b; }
@media (max-width:699px) and (orientation:portrait) {
  .np-win--elf #elf .elf-form:not([hidden]) { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(190px,31dvh) minmax(0,1fr); gap:9px; padding:8px; }
  .np-win--elf #elf .elf-welcome-scene { border-radius:20px; }.np-win--elf #elf .elf-stage-machine { left:12%; right:8%; top:16%; bottom:9%; }.np-win--elf #elf .elf-welcome-avatar { right:10%; width:34%; bottom:2%; }.np-win--elf #elf .elf-stage-gifts { left:4%; bottom:8%; }.np-win--elf #elf .elf-stage-token { left:27%; bottom:7%; }.np-win--elf #elf .elf-card--welcome { padding:17px; border-radius:20px; }.np-win--elf #elf .elf-card--welcome .elf-hohoho { font-size:37px; }.np-win--elf #elf .elf-card--welcome .elf-reveal { margin-top:13px; min-height:52px; }.np-win--elf #elf .elf-card--welcome .elf-intro-sub { font-size:14px; }
}
@media (orientation:landscape) and (max-height:560px) {
  .np-win--elf #elf .elf-form:not([hidden]) { grid-template-columns:minmax(160px,.8fr) minmax(0,1.2fr); gap:8px; padding:8px; }.np-win--elf #elf .elf-card--welcome { padding:13px 15px; border-radius:18px; }.np-win--elf #elf .elf-card--welcome .elf-hohoho { font-size:30px; }.np-win--elf #elf .elf-card--welcome .elf-intro-sub { font-size:13px; }.np-win--elf #elf .elf-card--welcome .elf-reveal { min-height:44px; margin-top:10px; }.np-win--elf #elf .elf-personalize-toggle { margin-top:7px; }.np-win--elf #elf .elf-details { margin-top:6px; padding-top:7px; }.np-win--elf #elf .elf-card--welcome .elf-months { grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px 6px; }.np-win--elf #elf .elf-card--welcome .elf-month { min-height:36px; padding:4px 2px; }
}
@media (prefers-reduced-motion:reduce) { .np-win--elf #elf .elf-welcome-avatar { animation:none; } }
@keyframes elfWorkshopBob { 50% { transform:translateY(-5px); } }

/* Phase 3 keepsake system: code-drawn, feature-local and no-cost. Final
   art may replace these surfaces only after David approves the exact job. */
.np-win--elf #elf .elf-welcome-saved { margin-top:14px; padding:11px 12px; border:1px solid #b47c31; border-radius:15px; background:#fff7d5b8; color:#4b493a; }
.np-win--elf #elf .elf-welcome-saved p { margin:0 0 8px; font:800 13px/1.35 var(--body); }
.np-win--elf #elf .elf-open-latest { width:100%; min-height:44px; border:1px solid #1f644c; border-radius:999px; color:#fdf8df; background:#2f7958; font:800 14px var(--body); }
.np-win--elf #elf .elf-adventures { margin-top:20px; padding-top:16px; border-top:1px dashed #bd904b; }
.np-win--elf #elf .elf-adventures-head h3,.np-win--elf #elf .elf-collection h3 { margin:0; color:#28553f; font:900 18px/1.1 var(--body); }
.np-win--elf #elf .elf-adventures-head p,.np-win--elf #elf .elf-collection-hint { margin:6px 0 11px; color:#705b3e; font:700 12px/1.35 var(--body); }
.np-win--elf #elf .elf-adventure-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.np-win--elf #elf .elf-adventure { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"icon copy" "state state"; gap:3px 7px; min-height:92px; padding:9px; border:2px solid #c7954d; border-radius:16px; color:#50321b; background:linear-gradient(145deg,#fff8d9,#f5d48b); text-align:left; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.np-win--elf #elf .elf-adventure:hover,.np-win--elf .elf-adventure:focus-visible { transform:translateY(-2px); box-shadow:0 6px 14px #73501c33; }
.np-win--elf #elf .elf-adventure.is-earned { border-color:#267650; background:linear-gradient(145deg,#eaffea,#bce8bb); }
.np-win--elf #elf .elf-adventure-icon { grid-area:icon; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#fff4c7; font-size:18px; }
.np-win--elf #elf .elf-adventure strong { display:block; font:900 13px/1.1 var(--body); }
.np-win--elf #elf .elf-adventure small { display:block; margin-top:3px; color:#705b3e; font:700 11px/1.15 var(--body); }
.np-win--elf #elf .elf-adventure-state { grid-area:state; width:max-content; margin-top:2px; padding:2px 7px; border-radius:999px; color:#6c4b24; background:#fff0b2; font:900 10px/1.2 var(--body); font-style:normal; }
.np-win--elf #elf .elf-adventure.is-earned .elf-adventure-state { color:#155539; background:#a7dfac; }
.np-win--elf #elf .elf-task-status { min-height:1.35em; margin:9px 0 0; color:#426747; font:800 13px/1.35 var(--body); }
.np-win--elf #elf .elf-keepsake { margin-top:20px; padding:14px; border:1px solid #92c6bb; border-radius:22px; background:linear-gradient(145deg,#eaf8f3,#b7ded4); box-shadow:0 12px 28px #092f2c38,inset 0 0 0 3px #ffffff8c; perspective:900px; }
.np-win--elf #elf .elf-id-kicker { margin:0 0 9px; color:#174f48; font:900 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; text-align:center; }
.np-win--elf #elf .elf-id-card { position:relative; overflow:hidden; border:2px solid #e9c569; border-radius:18px; color:#fff9dc; background:radial-gradient(circle at 85% 20%,#397e73 0 8%,transparent 24%),linear-gradient(135deg,#0b403d,#176b60 54%,#0b3838); box-shadow:0 9px 22px #06302d52,inset 0 0 0 2px #ffffff20; transform-origin:50% 85%; animation:elf-id-arrive .72s cubic-bezier(.2,.9,.25,1.18) both; isolation:isolate; }
.np-win--elf #elf .elf-id-card::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.2; background-image:radial-gradient(circle,#fff 1px,transparent 1.5px); background-size:18px 18px; }
.np-win--elf #elf .elf-id-scan { position:absolute; z-index:5; top:-35%; left:-18%; width:24%; height:170%; pointer-events:none; background:linear-gradient(90deg,transparent,#d8fffaa8,transparent); filter:blur(3px); transform:rotate(18deg); animation:elf-id-scan 3.8s 1s ease-in-out infinite; }
.np-win--elf #elf .elf-id-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; padding:10px 12px; border-bottom:1px solid #f0d48780; background:#062f31cc; }
.np-win--elf #elf .elf-id-header strong { display:block; color:#fff4bd; font:900 17px/1 Georgia,serif; letter-spacing:.12em; }
.np-win--elf #elf .elf-id-header small { display:block; margin-top:3px; color:#bde6dd; font:800 8px/1 var(--body); letter-spacing:.13em; }
.np-win--elf #elf .elf-id-snowmark { display:grid; place-items:center; width:35px; aspect-ratio:1; border:2px solid #f3d277; border-radius:50%; color:#fff; font-size:21px; box-shadow:0 0 13px #d7fff4aa; }
.np-win--elf #elf .elf-id-clearance { padding-left:10px; border-left:1px solid #d8bd6f99; color:#a9d8cf; font:800 7px/1.15 var(--body); letter-spacing:.1em; text-align:center; }
.np-win--elf #elf .elf-id-clearance strong { margin-top:2px; color:#fff1a7; font:900 11px/1 var(--body); letter-spacing:.08em; }
.np-win--elf #elf .elf-id-body { display:grid; grid-template-columns:96px minmax(0,1fr) 58px; align-items:center; gap:11px; padding:12px; }
.np-win--elf #elf .elf-id-photo { position:relative; align-self:stretch; min-height:125px; padding:5px 5px 20px; border:2px solid #eed486; border-radius:12px; background:linear-gradient(#a9e4e2,#e9f8dc); box-shadow:inset 0 0 12px #165a5575; }
.np-win--elf #elf .elf-id-avatar { display:grid; place-items:end center; height:100%; min-height:100px; overflow:hidden; border-radius:8px; }
.np-win--elf #elf .elf-id-avatar svg { width:91px; height:auto; transform:translateY(12px); }
.np-win--elf #elf .elf-id-photo-label { position:absolute; right:5px; bottom:4px; left:5px; color:#154d46; font:900 7px/1 var(--body); letter-spacing:.13em; text-align:center; }
.np-win--elf #elf .elf-id-copy { display:grid; align-content:center; gap:5px; min-width:0; }
.np-win--elf #elf .elf-id-field { color:#9fd8cd; font:900 8px/1 var(--body); letter-spacing:.14em; }
.np-win--elf #elf .elf-id-name { color:#fff4bd; font:900 clamp(20px,3cqw,29px)/1.02 Georgia,serif; overflow-wrap:anywhere; text-shadow:0 2px 0 #082d2b; }
.np-win--elf #elf .elf-id-title { color:#fff; font:800 12px/1.2 var(--body); }
.np-win--elf #elf .elf-id-access { display:flex; align-items:center; gap:6px; margin-top:4px; color:#d9ffc9; font:900 9px/1 var(--body); letter-spacing:.08em; }
.np-win--elf #elf .elf-id-status-dot { width:8px; aspect-ratio:1; border-radius:50%; background:#76f08c; box-shadow:0 0 0 3px #76f08c33,0 0 10px #76f08c; animation:elf-id-pulse 1.8s ease-in-out infinite; }
.np-win--elf #elf .elf-id-zone { color:#b6dcd5; font:800 7px/1.25 var(--body); letter-spacing:.04em; }
.np-win--elf #elf .elf-id-hologram { position:relative; display:grid; place-content:center; width:54px; aspect-ratio:1; overflow:hidden; border:2px solid #ffe7a2; border-radius:50%; color:#123f3b; background:conic-gradient(from 20deg,#9ef4de,#f6dc7c,#d8a7ef,#8debdc,#f6dc7c); box-shadow:0 0 14px #fff5b876; text-align:center; animation:elf-id-seal 4s ease-in-out infinite; }
.np-win--elf #elf .elf-id-hologram span { font:900 17px/.9 Georgia,serif; }
.np-win--elf #elf .elf-id-hologram small { font:900 5px/1 var(--body); letter-spacing:.08em; }
.np-win--elf #elf .elf-id-code { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 12px; padding:8px 0; border-top:1px solid #e0c56e70; border-bottom:1px solid #e0c56e70; }
.np-win--elf #elf .elf-id-code span:first-child { display:flex; align-items:baseline; gap:8px; }
.np-win--elf #elf .elf-id-code small { color:#8fc5bc; font:800 7px/1 var(--body); letter-spacing:.12em; }
.np-win--elf #elf .elf-id-number { color:#fff4bd; font:900 11px/1 ui-monospace,monospace; letter-spacing:.08em; }
.np-win--elf #elf .elf-id-bars { width:86px; height:20px; opacity:.72; background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 5px,#f2d373 5px 7px,transparent 7px 10px); }
.np-win--elf #elf .elf-id-stamps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:9px 12px 12px; }
.np-win--elf #elf .elf-id-stamps span { min-height:39px; display:grid; grid-template-columns:auto 1fr; place-items:center; gap:4px; padding:5px; border:1px solid #91bbb4; border-radius:9px; color:#91bbb4; background:#062d2fa8; font:800 14px/1 var(--body); text-align:center; opacity:.58; }
.np-win--elf #elf .elf-id-stamps small { color:inherit; font:900 6px/1.1 var(--body); letter-spacing:.04em; }
.np-win--elf #elf .elf-id-stamps span.is-earned { border-color:#f1d476; color:#fff2a8; background:#28685c; box-shadow:0 0 12px #f1d47640; opacity:1; }
.np-win--elf #elf .elf-id-note { display:block; margin:9px 2px 0; color:#315e56; font:700 11px/1.25 var(--body); text-align:center; }
.np-win--elf #elf .elf-id-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.np-win--elf #elf .elf-id-actions button { min-height:44px; border:2px solid #a96e28; border-radius:12px; color:#493018; background:linear-gradient(#fff2a7,#efbc49); box-shadow:0 3px 0 #99591b; font:900 13px var(--body); }
.np-win--elf #elf .elf-keepsake.is-unsaved { border-color:#d38b58; }
@keyframes elf-id-arrive { from { opacity:0; transform:translateY(18px) rotateX(-8deg) scale(.96); } to { opacity:1; transform:none; } }
@keyframes elf-id-scan { 0%,42% { left:-24%; opacity:0; } 50% { opacity:.7; } 72%,100% { left:112%; opacity:0; } }
@keyframes elf-id-pulse { 50% { transform:scale(1.25); filter:brightness(1.2); } }
@keyframes elf-id-seal { 0%,100% { transform:rotate(-2deg); filter:hue-rotate(0); } 50% { transform:rotate(2deg) scale(1.04); filter:hue-rotate(35deg); } }
.np-win--elf #elf .elf-collection { margin:20px 0 2px; padding-top:16px; border-top:1px dashed #bd904b; }
.np-win--elf #elf .elf-collection-list { display:grid; gap:7px; }
.np-win--elf #elf .elf-saved-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.np-win--elf #elf .elf-saved-open,.np-win--elf #elf .elf-saved-remove { min-height:44px; border-radius:12px; font:800 13px var(--body); }
.np-win--elf #elf .elf-saved-open { overflow:hidden; padding:8px 11px; border:1px solid #6d9b78; color:#24543d; background:#e8f5dc; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.np-win--elf #elf .elf-saved-open[aria-current="true"] { border-width:2px; background:#cbeac5; }
.np-win--elf #elf .elf-saved-remove { padding:8px 10px; border:1px solid #b36c55; color:#742e24; background:#ffe3d7; }
@media (max-width:699px) and (orientation:portrait) {
  .np-win--elf #elf .elf-adventure-grid { grid-template-columns:1fr; }
  .np-win--elf #elf .elf-adventure { min-height:70px; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"icon copy state"; align-items:center; }
  .np-win--elf #elf .elf-adventure-state { margin:0; }
  .np-win--elf #elf .elf-id-header { grid-template-columns:auto minmax(0,1fr) auto; padding:9px; }
  .np-win--elf #elf .elf-id-header strong { font-size:14px; }
  .np-win--elf #elf .elf-id-body { grid-template-columns:82px minmax(0,1fr); gap:9px; padding:10px; }
  .np-win--elf #elf .elf-id-photo { min-height:112px; }
  .np-win--elf #elf .elf-id-avatar { min-height:87px; }
  .np-win--elf #elf .elf-id-avatar svg { width:78px; }
  .np-win--elf #elf .elf-id-hologram { position:absolute; right:9px; bottom:58px; width:42px; opacity:.9; }
  .np-win--elf #elf .elf-id-zone { padding-right:42px; }
  .np-win--elf #elf .elf-id-bars { width:64px; }
  .np-win--elf #elf .elf-id-stamps span { grid-template-columns:1fr; font-size:13px; }
}

/* Phase 4 design proof — a native, code-drawn workshop scene. This is an
   approved visual-direction proof, not final commissioned artwork. */
.np-win--elf #elf {
  --elf-ink:#17392f;
  --elf-evergreen:#124b3d;
  --elf-pine:#0b332d;
  --elf-berry:#a9383b;
  --elf-berry-deep:#752625;
  --elf-gold:#e6b74d;
  --elf-paper:#fff6d8;
  --elf-snow:#f4fffa;
}
.np-win--elf #elf .elf-form:not([hidden]) {
  grid-template-columns:minmax(0,1.28fr) minmax(300px,.72fr);
  gap:clamp(15px,2.7vw,38px);
  padding:clamp(12px,2.2vw,28px);
  border:1px solid rgba(254,229,151,.32);
  border-radius:30px;
  background:
    radial-gradient(circle at 18% 6%,rgba(255,234,165,.16),transparent 13%),
    radial-gradient(circle at 92% 12%,rgba(96,220,184,.18),transparent 23%),
    linear-gradient(142deg,#071f31 0%,#093b3d 52%,#08282e 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 24px 52px rgba(0,12,24,.36);
}
.np-win--elf #elf .elf-form:not([hidden])::before {
  opacity:.64;
  background-image:
    radial-gradient(circle,rgba(255,248,207,.92) 0 1px,transparent 1.7px),
    radial-gradient(circle,rgba(129,235,201,.42) 0 1px,transparent 1.7px);
  background-position:0 0,23px 19px;
  background-size:49px 55px,71px 79px;
}
.np-win--elf #elf .elf-form:not([hidden])::after {
  content:""; position:absolute; inset:8px; z-index:0; pointer-events:none;
  border:1px solid rgba(255,239,181,.18); border-radius:22px;
}
.np-win--elf #elf .elf-welcome-scene {
  min-height:clamp(320px,56dvh,610px);
  border:2px solid rgba(247,214,139,.58);
  border-radius:26px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/58px 100%,
    linear-gradient(#145749 0 67%,#0f4037 67% 70%,#825129 70% 100%);
  box-shadow:inset 0 0 0 4px rgba(20,60,50,.45),inset 0 1px rgba(255,255,255,.28),0 18px 40px #0119278c;
}
.np-win--elf #elf .elf-welcome-scene::before {
  z-index:1; inset:auto 0 0; height:30%;
  border-radius:0;
  background:
    linear-gradient(90deg,transparent 0 4%,rgba(255,218,140,.22) 4.5% 5%,transparent 5.5% 94%,rgba(255,218,140,.19) 94.5% 95%,transparent 95.5%),
    repeating-linear-gradient(90deg,#774625 0 11%,#9d6333 11.5% 23%,#6e3d24 23.5% 35%);
  box-shadow:inset 0 5px 0 #4b2d20,inset 0 8px 0 #d5a45955;
}
.np-win--elf #elf .elf-welcome-scene::after {
  content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,.12),transparent 17% 80%,rgba(0,19,30,.24));
  mix-blend-mode:screen;
}
.np-win--elf #elf .elf-stage-sky {
  z-index:1; left:8%; top:14%; right:auto; bottom:auto; width:28%; height:43%;
  border:clamp(5px,.7cqw,10px) solid #a46f37; border-radius:18px 18px 8px 8px;
  background:
    radial-gradient(circle at 71% 22%,#fff5bd 0 4%,#ffe6a6 5% 8%,transparent 9%),
    radial-gradient(circle at 22% 16%,#bff7ed 0 1px,transparent 2px),
    radial-gradient(circle at 80% 38%,#d9fff5 0 1px,transparent 2px),
    linear-gradient(160deg,#113f6b,#164d66 60%,#6cb3b6);
  box-shadow:inset 0 0 0 2px #523523,inset 0 -12px 15px #05284488,0 7px 0 #5c3523;
}
.np-win--elf #elf .elf-stage-window {
  position:absolute; z-index:2; left:8%; top:14%; width:28%; height:43%;
  overflow:hidden; border-radius:13px 13px 5px 5px; pointer-events:none;
  box-shadow:inset 0 0 0 2px #d7ad60;
}
.np-win--elf #elf .elf-stage-window::before,
.np-win--elf #elf .elf-stage-window::after {
  content:""; position:absolute; z-index:2; background:#a8753b99;
}
.np-win--elf #elf .elf-stage-window::before { top:0; bottom:0; left:48%; width:5px; }
.np-win--elf #elf .elf-stage-window::after { left:0; right:0; top:48%; height:5px; }
.np-win--elf #elf .elf-stage-window span { position:absolute; left:13%; right:13%; bottom:-8%; height:40%; border-radius:50% 50% 0 0; background:linear-gradient(#dffaf1,#77b7ae 56%,#3b807c); }
.np-win--elf #elf .elf-stage-window i { position:absolute; z-index:3; display:block; width:5px; height:5px; border-radius:50%; background:#faffdf; box-shadow:0 0 9px #fff5b8; }
.np-win--elf #elf .elf-stage-window i:nth-child(2) { top:20%; left:23%; }
.np-win--elf #elf .elf-stage-window i:nth-child(3) { top:37%; right:22%; transform:scale(.7); }
.np-win--elf #elf .elf-stage-window i:nth-child(4) { top:13%; right:14%; transform:scale(.45); }
.np-win--elf #elf .elf-stage-garland {
  position:absolute; z-index:5; top:6%; left:4%; right:4%; height:12%;
  display:flex; justify-content:space-around; align-items:flex-start;
  border-top:clamp(2px,.3cqw,4px) solid #183f31; border-radius:50%;
}
.np-win--elf #elf .elf-stage-garland i {
  display:block; width:clamp(8px,1.2cqw,16px); aspect-ratio:1; margin-top:clamp(5px,.8cqw,12px);
  border:1px solid #71462b; border-radius:50% 50% 45% 45%; background:#ffdf77;
  box-shadow:0 0 12px #ffd76d,0 2px 0 #563423;
}
.np-win--elf #elf .elf-stage-garland i:nth-child(3n) { margin-top:clamp(12px,2.1cqw,28px); background:#ed6b68; box-shadow:0 0 12px #ec6a6b,0 2px 0 #563423; }
.np-win--elf #elf .elf-stage-garland i:nth-child(4n) { background:#81dfb7; box-shadow:0 0 12px #7de2ba,0 2px 0 #563423; }
.np-win--elf #elf .elf-stage-pines { z-index:3; bottom:27%; width:11%; height:22%; opacity:.8; }
.np-win--elf #elf .elf-stage-pines--left { left:11%; }
.np-win--elf #elf .elf-stage-pines--right { right:auto; left:24%; height:18%; }
.np-win--elf #elf .elf-stage-gifts { z-index:5; left:7%; bottom:14%; width:24%; height:18%; }
.np-win--elf #elf .elf-stage-machine {
  z-index:4; left:37%; right:14%; top:22%; bottom:23%;
  border-color:#d5a95a; border-radius:15% 15% 11% 11%/11% 11% 8% 8%;
  background:
    radial-gradient(circle at 83% 23%,rgba(255,236,144,.74) 0 1.5%,transparent 2.5%),
    linear-gradient(#be4944 0 9%,#a83038 10% 14%,#195b50 15% 100%);
  box-shadow:inset 0 0 0 3px #ffe3a1,inset 0 0 0 8px #6e3826,0 9px 0 #653124,0 20px 28px #04182788;
}
.np-win--elf #elf .elf-stage-snowcap { top:-12%; height:28%; background:linear-gradient(#fffefa,#d8f1e9 55%,#8ec5bc 57%,#fbffff); }
.np-win--elf #elf .elf-stage-lights { top:19%; left:11%; right:11%; }
.np-win--elf #elf .elf-stage-display {
  left:12%; top:36%; width:54%; height:51%; border-color:#e8c36d;
  background:linear-gradient(#0b2d44 0 49%,#12675c 50%); box-shadow:inset 0 0 0 3px #71351f,inset 0 16px 22px #03162599,0 4px 0 #61351f;
}
.np-win--elf #elf .elf-stage-display span { top:11%; font-size:clamp(9px,1.35cqw,19px); letter-spacing:.15em; }
.np-win--elf #elf .elf-stage-display b { top:31%; width:34%; border-color:#f9dda0; font-size:clamp(20px,3.3cqw,48px); }
.np-win--elf #elf .elf-stage-workbench {
  position:absolute; z-index:6; left:31%; right:5%; bottom:13%; height:13%;
  border:3px solid #5d351f; border-radius:12px 12px 5px 5px;
  background:linear-gradient(#d09a57 0 15%,#93552d 16% 100%);
  box-shadow:0 8px 0 #4d2d20,0 14px 20px #03192677;
}
.np-win--elf #elf .elf-stage-workbench::before {
  content:""; position:absolute; left:9%; right:9%; top:24%; height:3px;
  background:repeating-linear-gradient(90deg,#66381f 0 9%,transparent 10% 20%);
}
.np-win--elf #elf .elf-stage-workbench span,
.np-win--elf #elf .elf-stage-workbench i,
.np-win--elf #elf .elf-stage-workbench b {
  position:absolute; display:block; bottom:72%; border:2px solid #f4d58a; border-radius:4px;
  box-shadow:inset 0 2px #fff6,0 3px 5px #3d241b66;
}
.np-win--elf #elf .elf-stage-workbench span { left:16%; width:14%; height:45%; background:#b83940; }
.np-win--elf #elf .elf-stage-workbench i { left:43%; width:12%; height:62%; background:#2b8970; }
.np-win--elf #elf .elf-stage-workbench b { right:15%; width:17%; height:36%; background:#e1a74e; }
.np-win--elf #elf .elf-welcome-avatar {
  z-index:8; right:3%; bottom:14%; width:37%;
  filter:drop-shadow(0 14px 8px #03182488);
}
.np-win--elf #elf .elf-welcome-avatar::before { background:#ffd97758; }
.np-win--elf #elf .elf-stage-token {
  z-index:9; left:auto; right:12%; bottom:10%; width:clamp(44px,6.8cqw,70px);
  border-color:#f4d789; color:#a8502b; background:radial-gradient(circle,#fffdec,#f5cb68);
}
.np-win--elf #elf .elf-card--welcome {
  z-index:3; align-self:stretch; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(23px,3.1vw,42px);
  border:2px solid #f4d788; border-radius:26px;
  color:#3b3020;
  background:
    linear-gradient(90deg,rgba(144,94,38,.09) 1px,transparent 1px) 0 0/32px 100%,
    radial-gradient(circle at 15% 7%,#fffff5,#fff0bf 58%,#eac66f);
  box-shadow:inset 0 0 0 4px rgba(255,250,222,.86),inset 0 0 0 7px rgba(169,109,40,.34),0 17px 32px #00172466;
}
.np-win--elf #elf .elf-card--welcome::before {
  content:"NORTH POLE WORKSHOP"; display:inline-flex; align-self:flex-start; margin-bottom:13px;
  padding:6px 10px; border:1px solid #9d6930; border-radius:999px; color:#70431f;
  background:#ffe7a4; box-shadow:0 2px #b77a32; font:900 10px/1 var(--body); letter-spacing:.13em;
}
.np-win--elf #elf .elf-card--welcome .elf-eyebrow { color:#9a5930; font-size:12px; letter-spacing:.12em; }
.np-win--elf #elf .elf-card--welcome .elf-hohoho { margin:8px 0 13px; color:#174839; font-size:clamp(40px,4.7vw,63px); line-height:.95; text-shadow:0 2px #fffbea; }
.np-win--elf #elf .elf-card--welcome .elf-intro-sub { max-width:31ch; color:#59472e; font-size:clamp(15px,1.25vw,18px); line-height:1.5; }
.np-win--elf #elf .elf-card--welcome .elf-reveal {
  min-height:60px; margin-top:27px; border-color:#7a3029; border-radius:16px; color:#fff7ce;
  background:linear-gradient(#cb5650,#a93335 55%,#852726); box-shadow:inset 0 2px #fff5,0 5px 0 #6d2823,0 12px 20px #7f342a44;
  font-size:17px; letter-spacing:.01em;
}
.np-win--elf #elf .elf-card--welcome .elf-reveal:hover,
.np-win--elf #elf .elf-card--welcome .elf-reveal:focus-visible { transform:translateY(-1px); filter:brightness(1.06); }
.np-win--elf #elf .elf-personalize-toggle { margin-top:17px; color:#19533e; font-size:14px; }
.np-win--elf #elf .elf-details { border-top-color:#b68a49; }
.np-win--elf #elf .elf-welcome-saved { border-color:#58724d; background:#eff8d7c9; }
.np-win--elf #elf .elf-hint { margin-top:14px; color:#6e5839; }

.np-win--elf #elf .elf-result:not([hidden]) {
  position:relative; overflow:hidden; padding:clamp(10px,1.6vw,22px);
  border:1px solid rgba(244,216,137,.42); border-radius:28px;
  background:
    radial-gradient(ellipse at 10% 15%,rgba(95,221,185,.16),transparent 23%),
    radial-gradient(ellipse at 89% 8%,rgba(255,222,130,.19),transparent 18%),
    linear-gradient(150deg,#082b42,#124e49 58%,#082c34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 52px #00162488;
}
.np-win--elf #elf .elf-result:not([hidden])::before {
  content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.46;
  background-image:radial-gradient(circle,#fff8d0 0 1px,transparent 1.7px); background-size:53px 67px;
  mask-image:linear-gradient(#000,transparent 70%);
}
.np-win--elf #elf .elf-result > * { position:relative; z-index:1; }
.np-win--elf #elf .elf-reveal-head {
  padding:clamp(12px,1.7vw,18px) clamp(16px,2.4vw,28px);
  border:2px solid #eac774; border-radius:18px;
  background:linear-gradient(105deg,#fff3c5,#f4d47e 55%,#e7b755);
  box-shadow:inset 0 0 0 3px #fff9db,0 7px 16px #001d2d66;
}
.np-win--elf #elf .elf-reveal-head .elf-eyebrow { color:#8d512b; }
.np-win--elf #elf .elf-reveal-head .elf-name { margin:4px 0 5px; color:#164837; font-size:clamp(34px,4.5vw,59px); line-height:.95; text-shadow:0 2px #fff9df; }
.np-win--elf #elf .elf-reveal-head .elf-title { margin:0; color:#71522d; font:800 clamp(13px,1.3vw,17px)/1.3 var(--body); }
.np-win--elf #elf .elf-builder { gap:clamp(14px,2.4vw,28px); }
.np-win--elf #elf .elf-preview {
  position:relative; border:2px solid #e7c66f; border-radius:22px;
  background:
    radial-gradient(ellipse at 50% 83%,rgba(255,225,125,.3),transparent 23%),
    linear-gradient(180deg,#155a5a 0 64%,#0e3e3d 64%);
  box-shadow:inset 0 0 0 4px rgba(4,43,42,.36),0 10px 22px #001b2c66;
}
.np-win--elf #elf .elf-preview::before {
  content:"ELF PORTRAIT"; position:absolute; z-index:2; top:12px; left:50%; transform:translateX(-50%);
  padding:5px 9px; border:1px solid #d5ac59; border-radius:999px; color:#fff0b7; background:#164a40d9;
  font:900 10px/1 var(--body); letter-spacing:.12em;
}
.np-win--elf #elf .elf-preview::after {
  content:""; position:absolute; z-index:1; left:9%; right:9%; bottom:10%; height:13%; border-radius:50%;
  background:#ffe28744; filter:blur(12px);
}
.np-win--elf #elf .elf-preview-cap { position:relative; z-index:2; margin:0 0 13px; color:#fff6d0; font:900 12px/1.2 var(--body); letter-spacing:.06em; text-shadow:0 2px #07312e; }
.np-win--elf #elf .elf-controls {
  padding:clamp(12px,1.7vw,20px); border:2px solid #e5c46d; border-radius:22px;
  background:
    linear-gradient(90deg,rgba(137,94,39,.08) 1px,transparent 1px) 0 0/28px 100%,
    linear-gradient(#fff8dd,#f1d589);
  box-shadow:inset 0 0 0 3px #fff9df,0 10px 20px #00192a55;
}
.np-win--elf #elf .elf-controls-head { padding-bottom:10px; border-bottom:1px dashed #bd8d45; }
.np-win--elf #elf .elf-build-title { color:#164c3b; }
.np-win--elf #elf .elf-surprise { border:1px solid #8b4030; color:#fff8d6; background:linear-gradient(#c14e46,#8f2d2c); box-shadow:0 3px 0 #6d2925; }
.np-win--elf #elf .elf-adventures { border-top-color:#c4954b; }
.np-win--elf #elf .elf-adventure { border-color:#bd8740; border-radius:17px; background:linear-gradient(145deg,#fff9db,#f1ce77); box-shadow:0 4px 0 #d3a85b55; }
.np-win--elf #elf .elf-adventure.is-earned { border-color:#287250; background:linear-gradient(145deg,#f0ffe2,#b9e4b5); }
.np-win--elf #elf .elf-keepsake { border-color:#83bdb1; background:linear-gradient(145deg,#eaf8f3,#add8ce); }
.np-win--elf #elf .elf-id-card { border-color:#e9c569; background:radial-gradient(circle at 85% 20%,#397e73 0 8%,transparent 24%),linear-gradient(135deg,#0b403d,#176b60 54%,#0b3838); }
.np-win--elf #elf .elf-id-actions button { border-color:#803a2d; color:#fff8d3; background:linear-gradient(#c95850,#923030); box-shadow:0 3px 0 #702825; }
.np-win--elf #elf .elf-actions { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap:9px; }
.np-win--elf #elf .elf-claim { min-height:52px; border-color:#793127; color:#fff8d6; background:linear-gradient(#ce5b52,#a13232 58%,#852827); box-shadow:inset 0 2px #fff5,0 5px 0 #6c2722; font-size:16px; }
.np-win--elf #elf .elf-new,.np-win--elf #elf .elf-startover { border-color:#d8b363; color:#f7ebc4; background:#1a5948; box-shadow:0 4px 0 #0d352d; font-weight:900; }
.np-win--elf #elf .elf-claim-status { color:#ffe8a7; }

@media (max-width:699px) and (orientation:portrait) {
  .np-win--elf #elf .elf-form:not([hidden]) {
    grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(220px,32dvh) minmax(0,1fr);
    gap:10px; padding:8px; border-radius:20px;
  }
  .np-win--elf #elf .elf-welcome-scene { min-height:0; border-radius:18px; }
  .np-win--elf #elf .elf-stage-sky,.np-win--elf #elf .elf-stage-window { top:17%; width:25%; height:42%; }
  .np-win--elf #elf .elf-stage-sky { left:7%; }
  .np-win--elf #elf .elf-stage-window { left:7%; }
  .np-win--elf #elf .elf-stage-machine { left:33%; right:15%; top:24%; bottom:23%; }
  .np-win--elf #elf .elf-stage-workbench { left:29%; right:4%; bottom:12%; }
  .np-win--elf #elf .elf-welcome-avatar { width:36%; right:3%; bottom:13%; }
  .np-win--elf #elf .elf-stage-token { right:10%; bottom:8%; }
  .np-win--elf #elf .elf-stage-gifts { left:5%; bottom:13%; }
  .np-win--elf #elf .elf-card--welcome { justify-content:flex-start; padding:18px 17px; border-radius:20px; }
  .np-win--elf #elf .elf-card--welcome::before { margin-bottom:10px; }
  .np-win--elf #elf .elf-card--welcome .elf-hohoho { font-size:39px; }
  .np-win--elf #elf .elf-card--welcome .elf-intro-sub { font-size:14px; }
  .np-win--elf #elf .elf-card--welcome .elf-reveal { min-height:54px; margin-top:16px; }
  .np-win--elf #elf .elf-result:not([hidden]) { padding:8px; border-radius:20px; }
  .np-win--elf #elf .elf-reveal-head { padding:12px 14px; border-radius:15px; }
  .np-win--elf #elf .elf-reveal-head .elf-name { font-size:clamp(31px,10vw,43px); }
  .np-win--elf #elf .elf-preview { min-height:155px; }
  .np-win--elf #elf .elf-controls { border-radius:18px; }
  .np-win--elf #elf .elf-actions { grid-template-columns:1fr 1fr; }
  .np-win--elf #elf .elf-claim { grid-column:1 / -1; min-height:52px; }
}
@media (orientation:landscape) and (max-height:560px) {
  .np-win--elf #elf .elf-form:not([hidden]) { grid-template-columns:minmax(190px,.88fr) minmax(250px,1.12fr); gap:10px; padding:9px; }
  .np-win--elf #elf .elf-welcome-scene { min-height:0; }
  .np-win--elf #elf .elf-card--welcome { padding:15px 17px; border-radius:18px; }
  .np-win--elf #elf .elf-card--welcome::before { margin-bottom:7px; padding:4px 8px; }
  .np-win--elf #elf .elf-card--welcome .elf-hohoho { font-size:31px; }
  .np-win--elf #elf .elf-card--welcome .elf-reveal { min-height:44px; margin-top:10px; }
  .np-win--elf #elf .elf-result:not([hidden]) { padding:8px; gap:6px; }
  .np-win--elf #elf .elf-reveal-head { padding:8px 12px; }
  .np-win--elf #elf .elf-reveal-head .elf-name { font-size:32px; }
  .np-win--elf #elf .elf-controls { padding:9px 11px; }
  .np-win--elf #elf .elf-actions { gap:6px; }
  .np-win--elf #elf .elf-claim { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  .np-win--elf #elf .elf-card--welcome .elf-reveal:hover,
  .np-win--elf #elf .elf-card--welcome .elf-reveal:focus-visible { transform:none; }
}
@media (max-width:699px) and (orientation:portrait) {
  .np-win--elf .np-win-bar { gap:10px; padding-left:12px; padding-right:12px; }
  .np-win--elf .np-win-back { gap:6px; padding:10px 13px; font-size:0; }
  .np-win--elf .np-win-back::after { content:"Back"; font:700 14px/1 var(--body); }
  .np-win--elf .np-win-title { font-size:clamp(18px,5.2vw,22px); letter-spacing:-.025em; }
}

/* Phase 5 selected scene masters — David chose portrait B for phones and
   landscape B for wider workshops. UI, text, and the customizable elf remain
   live code so the scene art never bakes in a visitor identity. */
.np-win--elf #elf .elf-welcome-scene {
  overflow:hidden;
  background-color:#133f35;
  background-image:
    linear-gradient(90deg,rgba(3,28,27,.10),rgba(3,28,27,0) 54%),
    url("../img/elf-workshop/scene-landscape-b.png");
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  box-shadow:inset 0 0 0 1px rgba(255,239,176,.34),0 20px 42px rgba(0,14,26,.30);
}
.np-win--elf #elf .elf-welcome-scene::before,
.np-win--elf #elf .elf-welcome-scene::after { content:none; }
.np-win--elf #elf .elf-stage-sky,
.np-win--elf #elf .elf-stage-window,
.np-win--elf #elf .elf-stage-garland,
.np-win--elf #elf .elf-stage-pines,
.np-win--elf #elf .elf-stage-gifts,
.np-win--elf #elf .elf-stage-machine,
.np-win--elf #elf .elf-stage-snowcap,
.np-win--elf #elf .elf-stage-lights,
.np-win--elf #elf .elf-stage-display,
.np-win--elf #elf .elf-stage-workbench,
.np-win--elf #elf .elf-stage-token { display:none; }
.np-win--elf #elf .elf-welcome-avatar {
  z-index:2;
  right:4%;
  bottom:6%;
  width:31%;
  filter:drop-shadow(0 13px 8px rgba(3,24,24,.56));
}
.np-win--elf #elf .elf-welcome-avatar::before { background:rgba(255,218,110,.34); }

@media (max-width:699px) and (orientation:portrait) {
  .np-win--elf #elf .elf-form:not([hidden]) {
    grid-template-rows:minmax(280px,42dvh) minmax(0,1fr);
  }
  .np-win--elf #elf .elf-welcome-scene {
    background-image:
      linear-gradient(90deg,rgba(3,28,27,.12),rgba(3,28,27,0) 54%),
      url("../img/elf-workshop/scene-portrait-b.png");
    background-position:center 48%;
    background-size:cover;
  }
  .np-win--elf #elf .elf-welcome-avatar {
    right:4%;
    bottom:5%;
    width:34%;
  }
}

/* One SVG owns all artwork geometry. Containers only fit/crop the completed
   composition, so glasses, expressions and the real neck cannot scale apart. */
.np-win--elf #elf .elf-raster-avatar {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  isolation:isolate;
}
.np-win--elf #elf .elf-portrait-art {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  margin:0;
  transform:none;
  pointer-events:none;
  user-select:none;
}
.np-win--elf #elf .elf-avatar {
  height:100%;
  align-self:stretch;
  padding-top:24px;
  box-sizing:border-box;
  position:relative;
  z-index:2;
}
@media (max-width:699px) and (orientation:portrait) {
  .np-win--elf #elf .elf-preview { grid-template-rows:minmax(0,1fr); }
}
/* Short phones scroll the portrait and choices together, keeping the name and
   completion actions reachable instead of crushing the controls into a sliver. */
@media (max-width:699px) and (orientation:portrait) and (max-height:700px) {
  .np-win--elf #elf .elf-builder {
    display:block;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    touch-action:pan-y;
    scrollbar-gutter:stable;
  }
  .np-win--elf #elf .elf-preview {
    height:180px;
    min-height:0;
    margin:0 auto 12px;
  }
  .np-win--elf #elf .elf-controls { height:auto; overflow:visible; }
}
@media (orientation:landscape) and (max-height:560px) {
  .np-win--elf #elf .elf-preview::before { display:none; }
  .np-win--elf #elf .elf-avatar { padding-top:0; }
}
body.np-win-open:has(.np-win--elf.is-open) .snow-canvas { max-width:100%; }
.np-win--elf #elf .elf-avatar .elf-raster-avatar {
  width:min(100%,260px);
  max-height:520px;
}
.np-win--elf #elf .elf-welcome-avatar .elf-raster-avatar {
  aspect-ratio:2 / 5;
  height:auto;
}
.np-win--elf #elf .elf-welcome-avatar .elf-portrait-art {
  height:auto;
  aspect-ratio:2 / 5;
}
.np-win--elf #elf .elf-id-avatar .elf-raster-avatar { height:110px; }
.np-win--elf #elf .elf-id-avatar .elf-portrait-art { width:100%; height:100%; transform:none; }
.np-win--elf #elf .elf-swatch--expression {
  padding:2px;
  overflow:hidden;
  border-color:#87612f;
  background:#fff2cf;
}
.np-win--elf #elf .elf-swatch--expression .elf-portrait-art { width:100%; height:100%; }
.np-win--elf #elf .elf-swatch--expression.is-active {
  outline:3px solid #1d6a50;
  outline-offset:-4px;
}
.np-win--elf #elf .elf-swatch--art {
  position:relative;
  overflow:hidden;
  border-color:#87612f;
  background:linear-gradient(145deg,#fffbe3,#dfbd72);
}
.np-win--elf #elf .elf-swatch--art::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--elf-swatch-image);
  background-repeat:no-repeat;
  background-size:118px auto;
  background-position:center 42%;
  filter:drop-shadow(0 2px 1px rgba(37,25,12,.2));
}
.np-win--elf #elf .elf-swatch--art[data-elf-layer="hat"]::before {
  background-position:center 27%;
}
.np-win--elf #elf .elf-swatch--art[data-elf-layer="outfit"]::before {
  background-position:center 55%;
}
.np-win--elf #elf .elf-swatch--art.is-active {
  outline:3px solid #1d6a50;
  outline-offset:-4px;
  box-shadow:inset 0 0 0 2px #fff7cd,0 3px 0 #83501e;
}

/* Visible, replayable parcel delivery; no character geometry changes. */
.np-win--elf #elf .elf-swatch--extra { width:auto; min-width:54px; height:auto; min-height:52px; padding:5px 7px; display:grid; place-items:center; gap:2px; }
.np-win--elf #elf .elf-extra-label { color:#493018; font:800 11px/1.1 var(--body); white-space:nowrap; }
.np-win--elf #elf .elf-delivery-scene[hidden] { display:none; }
.np-win--elf #elf .elf-delivery-scene { margin:12px 0; padding:10px; border:2px solid #b98536; border-radius:18px; background:#fff5ce; box-shadow:0 4px 0 #ac783733; }
.np-win--elf #elf .elf-delivery-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#254e3c; font:900 16px/1.15 var(--body); }
.np-win--elf #elf .elf-delivery-seal { display:grid; place-items:center; flex:none; width:28px; height:28px; border:2px solid #b98536; border-radius:50%; background:#ffe396; color:#7a4922; }
.np-win--elf #elf .elf-delivery-art { display:block; width:100%; height:clamp(90px,12vh,130px); margin:6px 0; }
.np-win--elf #elf .elf-delivery-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#254e3c; font:800 13px/1.3 var(--body); }
.np-win--elf #elf #elfDeliveryReplay { flex:none; min-height:44px; padding:7px 12px; border:2px solid #a66c2a; border-radius:12px; color:#493018; background:#ffe39a; font:900 12px/1.2 var(--body); }
.np-win--elf #elf #elfDeliveryReplay:focus-visible { outline:3px solid #175d4d; outline-offset:3px; }
.np-win--elf #elf #elfDeliveryReplay:disabled { opacity:.55; cursor:wait; }
.np-win--elf #elf .elf-delivery-sparkles { opacity:0; }
.np-win--elf #elf .elf-delivery-scene.is-sending .elf-delivery-parcel { animation:elfParcelTravel 1.8s ease-in forwards; transform-origin:86px 70px; }
.np-win--elf #elf .elf-delivery-scene.is-delivered .elf-delivery-parcel { opacity:0; }
.np-win--elf #elf .elf-delivery-scene.is-delivered .elf-delivery-sparkles { opacity:1; animation:elfParcelSparkle .6s ease-out 1; transform-origin:318px 55px; }
.np-win--elf #elf .elf-delivery-scene.is-delivered .elf-delivery-seal { color:#fff4c4; background:#26734f; border-color:#26734f; }
@keyframes elfParcelTravel { 0%,12% { transform:translate(0,0) rotate(0deg); } 60% { transform:translate(170px,20px) rotate(9deg); } 82% { transform:translate(230px,33px) rotate(16deg) scale(.72); opacity:1; } 100% { transform:translate(232px,100px) rotate(20deg) scale(.5); opacity:0; } }
@keyframes elfParcelSparkle { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) {
  .np-win--elf #elf .elf-delivery-scene .elf-delivery-parcel,
  .np-win--elf #elf .elf-delivery-scene .elf-delivery-sparkles { animation:none !important; }
}
@media (orientation:landscape) and (max-height:560px) {
  .np-win--elf #elf .elf-delivery-art { height:90px; }
}

.np-win--elf #elf .elf-delivery-scene.is-compact { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:4px 8px; padding:6px; }
.np-win--elf #elf .elf-delivery-scene.is-compact .elf-delivery-heading { grid-column:1 / -1; font-size:12px; }
.np-win--elf #elf .elf-delivery-scene.is-compact .elf-delivery-seal { width:20px; height:20px; }
.np-win--elf #elf .elf-delivery-scene.is-compact .elf-delivery-art { height:84px; margin:0; }
.np-win--elf #elf .elf-delivery-scene.is-compact .elf-delivery-footer { flex-direction:column; justify-content:center; gap:3px; font-size:11px; }
.np-win--elf #elf .elf-delivery-scene.is-compact #elfDeliveryReplay { padding:5px 8px; font-size:11px; }

.np-win--elf #elf .elf-swatch--extra { color:#493018; background:#fff5cf; border-color:#b98536; }
.np-win--elf #elf .elf-swatch--extra.is-active { color:#fff5cf; background:#235b43; border-color:#173e2c; }
.np-win--elf #elf .elf-swatch--extra.is-active .elf-extra-label { color:#fff5cf; }

/* North Pole Party accomplishment; the live modular elf remains the central hero. */
.np-win--elf #elf .elf-party-scene[hidden] { display:none; }
.np-win--elf #elf .elf-party-scene {
  position:relative;
  isolation:isolate;
  min-height:clamp(280px,46vh,470px);
  margin:12px 0;
  overflow:hidden;
  border:3px solid #e8bd58;
  border-radius:22px;
  background:#0b2852;
  box-shadow:0 6px 18px rgba(19,42,52,.28),inset 0 0 0 2px rgba(255,248,206,.7);
}
.np-win--elf #elf .elf-party-backdrop,
.np-win--elf #elf .elf-party-backdrop img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.np-win--elf #elf .elf-party-backdrop img { object-fit:cover; object-position:center; }
.np-win--elf #elf .elf-party-friends {
  position:absolute;
  z-index:3;
  bottom:-3%;
  width:min(46%,330px);
  height:auto;
  filter:drop-shadow(0 6px 5px rgba(8,22,38,.3));
  opacity:0;
}
.np-win--elf #elf .elf-party-friends--left { left:-3%; transform:translateX(-18%) scale(.9); transform-origin:left bottom; }
.np-win--elf #elf .elf-party-friends--right { right:-4%; transform:translateX(18%) scale(.9); transform-origin:right bottom; }
.np-win--elf #elf .elf-party-hero {
  position:absolute;
  z-index:4;
  left:50%;
  bottom:-3%;
  width:min(24%,165px);
  transform:translateX(-50%);
  filter:drop-shadow(0 8px 7px rgba(8,22,38,.35));
}
.np-win--elf #elf .elf-party-hero svg { display:block; width:100%; height:auto; }
.np-win--elf #elf .elf-party-fireworks { position:absolute; z-index:2; inset:2% 8% 42%; pointer-events:none; }
.np-win--elf #elf .elf-party-fireworks i {
  position:absolute;
  width:8px;
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
  background:#fff5b0;
  box-shadow:0 -34px #ffd25f,24px -24px #ff7587,34px 0 #7df2dd,24px 24px #ffe17c,0 34px #ff728d,-24px 24px #87d7ff,-34px 0 #f6d969,-24px -24px #8ce8bc;
}
.np-win--elf #elf .elf-party-fireworks i:nth-child(1){left:13%;top:20%}
.np-win--elf #elf .elf-party-fireworks i:nth-child(2){left:36%;top:8%;filter:hue-rotate(45deg)}
.np-win--elf #elf .elf-party-fireworks i:nth-child(3){left:61%;top:22%;filter:hue-rotate(95deg)}
.np-win--elf #elf .elf-party-fireworks i:nth-child(4){left:82%;top:6%;filter:hue-rotate(150deg)}
.np-win--elf #elf .elf-party-fireworks i:nth-child(5){left:50%;top:48%;filter:hue-rotate(205deg)}
.np-win--elf #elf .elf-party-banner {
  position:absolute;
  z-index:6;
  left:12px;
  top:12px;
  display:grid;
  gap:2px;
  width:min(38%,280px);
  padding:8px 14px;
  transform:none;
  border:2px solid rgba(255,226,135,.9);
  border-radius:15px;
  color:#fff8d2;
  background:rgba(16,65,66,.88);
  box-shadow:0 3px 10px rgba(4,19,36,.3);
  text-align:center;
  font:800 12px/1.25 var(--body);
}
.np-win--elf #elf .elf-party-banner strong { color:#ffe183; font:900 19px/1.05 Georgia,serif; }
.np-win--elf #elf #elfPartyReplay {
  position:absolute;
  z-index:7;
  right:10px;
  bottom:10px;
  min-height:44px;
  padding:7px 12px;
  border:2px solid #a66c2a;
  border-radius:12px;
  color:#493018;
  background:#ffe39a;
  box-shadow:0 3px 0 #7c461e;
  font:900 12px/1.2 var(--body);
}
.np-win--elf #elf #elfPartyReplay:focus-visible { outline:3px solid #fff4b8; outline-offset:3px; }
.np-win--elf #elf #elfPartyReplay:disabled { opacity:.6; cursor:wait; }
.np-win--elf #elf .elf-party-scene.is-celebrating .elf-party-friends--left { animation:elfPartyLeft 1s .15s cubic-bezier(.2,.8,.2,1) forwards,elfPartyBounce .75s 1.2s ease-in-out 4; }
.np-win--elf #elf .elf-party-scene.is-celebrating .elf-party-friends--right { animation:elfPartyRight 1s .3s cubic-bezier(.2,.8,.2,1) forwards,elfPartyBounce .75s 1.35s ease-in-out 4; }
.np-win--elf #elf .elf-party-scene.is-celebrating .elf-party-hero { animation:elfPartyHero 1.1s .35s cubic-bezier(.2,.9,.2,1) both,elfPartyHeroCheer .8s 1.55s ease-in-out 3; }
.np-win--elf #elf .elf-party-scene.is-celebrating .elf-party-fireworks i { animation:elfPartyBurst 1s ease-out 3; }
.np-win--elf #elf .elf-party-scene.is-celebrating .elf-party-fireworks i:nth-child(2){animation-delay:.35s}
.np-win--elf #elf .elf-party-scene.is-celebrating .elf-party-fireworks i:nth-child(3){animation-delay:.7s}
.np-win--elf #elf .elf-party-scene.is-celebrating .elf-party-fireworks i:nth-child(4){animation-delay:1.05s}
.np-win--elf #elf .elf-party-scene.is-celebrating .elf-party-fireworks i:nth-child(5){animation-delay:1.4s}
.np-win--elf #elf .elf-party-scene.is-complete .elf-party-friends { opacity:1; }
.np-win--elf #elf .elf-party-scene.is-complete .elf-party-friends--left { transform:translateX(0) scale(1); }
.np-win--elf #elf .elf-party-scene.is-complete .elf-party-friends--right { transform:translateX(0) scale(1); }
@keyframes elfPartyLeft { to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes elfPartyRight { to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes elfPartyBounce { 50%{translate:0 -7px} }
@keyframes elfPartyHero { from{opacity:0;transform:translateX(-50%) translateY(24%) scale(.82)} to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} }
@keyframes elfPartyHeroCheer { 50%{transform:translateX(-50%) translateY(-8px) rotate(-2deg)} }
@keyframes elfPartyBurst { 0%{opacity:0;transform:scale(.18)} 28%{opacity:1} 80%,100%{opacity:0;transform:scale(1.22)} }
@media (max-width:699px) and (orientation:portrait) {
  .np-win--elf #elf .elf-party-scene { min-height:clamp(330px,56vh,500px); }
  .np-win--elf #elf .elf-party-backdrop img { object-position:center 42%; }
  .np-win--elf #elf .elf-party-banner { left:50%; width:min(88%,440px); transform:translateX(-50%); }
  .np-win--elf #elf .elf-party-friends { width:43%; bottom:-1%; }
  .np-win--elf #elf .elf-party-friends--left { left:-15%; }
  .np-win--elf #elf .elf-party-friends--right { right:-17%; }
  .np-win--elf #elf .elf-party-hero { width:min(38%,150px); bottom:-2%; }
  .np-win--elf #elf .elf-party-fireworks { inset:8% 4% 56%; }
  .np-win--elf #elf #elfPartyReplay { right:8px; bottom:8px; }
}
.np-win--elf #elf .elf-party-scene.is-compact { min-height:240px; }
.np-win--elf #elf .elf-party-scene.is-compact .elf-party-banner { top:6px; padding:5px 9px; }
.np-win--elf #elf .elf-party-scene.is-compact .elf-party-banner strong { font-size:15px; }
.np-win--elf #elf .elf-party-scene.is-compact .elf-party-friends { width:38%; }
.np-win--elf #elf .elf-party-scene.is-compact .elf-party-hero { width:min(21%,110px); bottom:-4%; }
@media (prefers-reduced-motion:reduce) {
  .np-win--elf #elf .elf-party-scene *,
  .np-win--elf #elf .elf-party-scene::before,
  .np-win--elf #elf .elf-party-scene::after { animation:none !important; transition:none !important; }
  .np-win--elf #elf .elf-id-card,
  .np-win--elf #elf .elf-id-scan,
  .np-win--elf #elf .elf-id-status-dot,
  .np-win--elf #elf .elf-id-hologram { animation:none !important; transition:none !important; }
}

/* Viewport density review, September 2026. Layout only: the shared 512x1280
   character coordinate system and every approved layer remain unchanged. */
.np-win.np-win--elf .np-win-body {
  max-width:1440px;
  height:100%;
  max-height:1000px;
  align-self:start;
  padding:clamp(6px,1vw,14px);
  padding-bottom:max(clamp(6px,1vw,14px),env(safe-area-inset-bottom));
}
.np-win--elf #elf .elf-result:not([hidden]) {
  padding:clamp(8px,1vw,14px);
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:8px;
}
.np-win--elf #elf .elf-result:has(.elf-claim-status:not(:empty)) {
  grid-template-rows:auto minmax(0,1fr) auto auto;
}
.np-win--elf #elf .elf-claim-status:empty { display:none; }
.np-win--elf #elf .elf-claim-status { margin:0; min-height:0; font-size:13px; line-height:1.3; }
.np-win--elf #elf .elf-reveal-head { padding:8px 14px; }
.np-win--elf #elf .elf-reveal-head .elf-eyebrow { margin:0; font-size:11px; }
.np-win--elf #elf .elf-reveal-head .elf-name {
  margin:2px 0 3px;
  font-size:clamp(30px,3.3vw,46px);
  line-height:1.12;
}
.np-win--elf #elf .elf-reveal-head .elf-title { font-size:14px; }
.np-win--elf #elf .elf-builder { gap:12px; grid-template-columns:minmax(190px,.65fr) minmax(0,1.35fr); }
.np-win--elf #elf .elf-preview {
  width:100%; max-width:none; margin:0; padding:12px;
  display:flex; flex-direction:column;
}
.np-win--elf #elf .elf-avatar { padding-top:22px; }
.np-win--elf #elf .elf-avatar .elf-raster-avatar { max-height:520px; width:min(100%,260px); }
.np-win--elf #elf .elf-preview-cap { margin:4px 0 0; text-align:center; flex:none; }
.np-win--elf #elf .elf-controls { padding:12px; container:elf-tools / inline-size; }
.np-win--elf #elf .elf-controls-head { padding-bottom:8px; gap:8px; margin:0; }
.np-win--elf #elf .elf-build-title { font-size:21px; }
.np-win--elf #elf .elf-surprise { padding:7px 10px; white-space:nowrap; }
.np-win--elf #elf .elf-ctrl { margin:0; min-width:0; }
.np-win--elf #elf .elf-ctrl-label { color:#69451e; margin:0 0 6px; font-size:12px; line-height:1.2; }
.np-win--elf #elf #elfControlList { display:grid; gap:12px; margin-top:10px; }
.np-win--elf #elf .elf-swatches { gap:6px; }
.np-win--elf #elf .elf-swatch { flex:none; min-width:44px; min-height:44px; }
.np-win--elf #elf .elf-swatch--extra { min-height:52px; padding:4px 6px; }
.np-win--elf #elf .elf-adventures { margin-top:14px; padding-top:12px; }
.np-win--elf #elf .elf-adventures-head p { font-size:13px; line-height:1.35; margin:6px 0 10px; }
.np-win--elf #elf .elf-adventure { min-height:82px; padding:8px; gap:4px 6px; }
.np-win--elf #elf .elf-task-status:empty { display:none; }
.np-win--elf #elf .elf-keepsake { margin-top:14px; padding:10px; }
.np-win--elf #elf .elf-id-name { font-size:clamp(20px,3cqw,28px); line-height:1.1; overflow-wrap:normal; word-break:normal; }
.np-win--elf #elf .elf-id-header { gap:6px; }
.np-win--elf #elf .elf-id-body { grid-template-columns:88px minmax(0,1fr) 54px; gap:8px; padding:10px; }
.np-win--elf #elf .elf-id-code { gap:8px; flex-wrap:wrap; }
.np-win--elf #elf .elf-id-code span:first-child { flex-wrap:wrap; gap:5px; }
.np-win--elf #elf .elf-collection { margin-top:14px; padding-top:12px; }
.np-win--elf #elf .elf-actions { gap:8px; }
.np-win--elf #elf .elf-new,.np-win--elf #elf .elf-startover { padding:8px; font-size:14px; }
.np-win--elf #elf .elf-form:not([hidden]) { padding:12px; gap:18px; grid-template-columns:minmax(0,1.1fr) minmax(310px,.9fr); }
.np-win--elf #elf .elf-card--welcome { padding:clamp(16px,2vw,26px); }
.np-win--elf #elf .elf-card--welcome .elf-hohoho { font-size:clamp(34px,3.5vw,48px); }
.np-win--elf #elf .elf-card--welcome .elf-month { min-height:44px; }
.np-win--elf #elf .elf-card--welcome .elf-input { font-size:16px; }
@container elf-tools (min-width:540px) {
  .np-win--elf #elf #elfControlList { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 16px; }
  .np-win--elf #elf .elf-ctrl:last-child { grid-column:1 / -1; }
}
@container elf-tools (min-width:650px) {
  .np-win--elf #elf .elf-collection-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container elf-tools (max-width:539px) and (min-width:360px) {
  .np-win--elf #elf .elf-ctrl { display:grid; grid-template-columns:92px minmax(0,1fr); gap:8px; align-items:center; }
  .np-win--elf #elf .elf-ctrl-label { margin:0; white-space:nowrap; }
}
@container elf-tools (max-width:449px) {
  .np-win--elf #elf .elf-adventure-grid { grid-template-columns:1fr; }
  .np-win--elf #elf .elf-adventure { min-height:60px; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"icon copy state"; align-items:center; }
  .np-win--elf #elf .elf-id-body { grid-template-columns:72px minmax(0,1fr); }
  .np-win--elf #elf .elf-id-hologram { position:static; grid-column:1; width:38px; margin:0 auto; }
  .np-win--elf #elf .elf-id-zone { padding:0; }
  .np-win--elf #elf .elf-id-header { grid-template-columns:auto minmax(0,1fr); }
  .np-win--elf #elf .elf-id-clearance { grid-column:1 / -1; display:flex; justify-content:center; gap:6px; border:0; padding:0; }
  .np-win--elf #elf .elf-id-clearance br { display:none; }
  .np-win--elf #elf .elf-id-clearance strong { margin:0; }
  .np-win--elf #elf .elf-id-header strong { font-size:14px; letter-spacing:.08em; }
  .np-win--elf #elf .elf-id-stamps { gap:4px; margin:8px; }
  .np-win--elf #elf .elf-id-stamps span { grid-template-columns:1fr; }
}
@media (max-width:699px) and (orientation:portrait) {
  .np-win--elf .np-win-bar { padding-top:6px; padding-bottom:6px; gap:6px; }
  .np-win--elf .np-win-back { padding:8px 10px; }
  .np-win--elf .np-win-title { font-size:clamp(17px,4.8vw,21px); }
  .np-win--elf #elf .elf-form:not([hidden]) {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:clamp(150px,27dvh,250px) minmax(0,1fr);
    gap:8px; padding:8px; border-radius:20px;
  }
  .np-win--elf #elf .elf-welcome-scene { min-height:0; }
  .np-win--elf #elf .elf-welcome-avatar { width:min(29%,calc(23dvh * .4)); bottom:4%; }
  .np-win--elf #elf .elf-card--welcome { padding:14px; }
  .np-win--elf #elf .elf-card--welcome::before { margin-bottom:6px; }
  .np-win--elf #elf .elf-card--welcome .elf-hohoho { font-size:34px; margin:4px 0 6px; }
  .np-win--elf #elf .elf-card--welcome .elf-intro-sub { font-size:14px; }
  .np-win--elf #elf .elf-card--welcome .elf-reveal { margin-top:10px; min-height:48px; }
  .np-win--elf #elf .elf-personalize-toggle { margin-top:8px; }
  .np-win--elf #elf .elf-welcome-saved { margin-top:8px; padding:8px; }
  .np-win--elf #elf .elf-reveal-head { padding:6px 8px; }
  .np-win--elf #elf .elf-reveal-head .elf-name { font-size:clamp(29px,8.5vw,36px); }
  .np-win--elf #elf .elf-reveal-head .elf-title { font-size:13px; }
  .np-win--elf #elf .elf-builder {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:clamp(144px,20dvh,180px) minmax(0,1fr); gap:8px;
  }
  .np-win--elf #elf .elf-preview { display:flex; flex-direction:row; padding:6px 12px; height:100%; min-height:0; justify-content:center; gap:14px; }
  .np-win--elf #elf .elf-preview::before { content:none; }
  .np-win--elf #elf .elf-avatar { padding-top:0; width:74px; height:100%; flex:0 1 90px; }
  .np-win--elf #elf .elf-avatar svg { max-height:100%; }
  .np-win--elf #elf .elf-preview-cap { margin:0; flex:0 1 auto; }
  .np-win--elf #elf .elf-controls { padding:10px; }
  .np-win--elf #elf .elf-build-title { font-size:18px; }
  .np-win--elf #elf .elf-surprise { font-size:13px; }
  .np-win--elf #elf .elf-claim { min-height:48px; }
  .np-win--elf #elf .elf-new,.np-win--elf #elf .elf-startover { font-size:13px; padding:6px 4px; }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:700px) {
  .np-win--elf #elf .elf-builder { display:block; overflow-x:hidden; overflow-y:auto; }
  .np-win--elf #elf .elf-preview { height:144px; margin:0 0 8px; }
  .np-win--elf #elf .elf-controls { height:auto; overflow:visible; }
}
@media (orientation:landscape) and (max-height:560px) {
  .np-win--elf #elf .elf-form:not([hidden]) { grid-template-columns:minmax(140px,.7fr) minmax(0,1.3fr); gap:10px; padding:8px; }
  .np-win--elf #elf .elf-welcome-scene { min-height:0; }
  .np-win--elf #elf .elf-reveal-head { padding:4px 10px; }
  .np-win--elf #elf .elf-reveal-head .elf-name { font-size:28px; }
  .np-win--elf #elf .elf-builder { grid-template-columns:minmax(130px,.45fr) minmax(0,1.55fr); gap:8px; }
  .np-win--elf #elf .elf-preview { padding:6px; }
  .np-win--elf #elf .elf-avatar { padding-top:0; }
  .np-win--elf #elf .elf-claim { min-height:44px; }
}

/* Reserve banner clearance from actual scene height, including short panels. */
.np-win--elf #elf .elf-party-scene { min-height:0; height:clamp(260px,43dvh,430px); }
.np-win--elf #elf .elf-party-scene.is-compact { min-height:0; height:clamp(150px,calc(100dvh - 240px),240px); }
.np-win--elf #elf .elf-party-hero,
.np-win--elf #elf .elf-party-scene.is-compact .elf-party-hero {
  height:calc(100% - 66px); width:auto; aspect-ratio:2 / 5; max-width:38%; bottom:0;
}
.np-win--elf #elf .elf-party-hero svg { height:100%; width:100%; }