/* Storybook Sanctum shared theme layer.
   Source of truth: landing.html (parchment, chestnut leather, gold filigree,
   twilight amethyst). Loaded AFTER page styles; only refines surfaces, type,
   focus and touch targets — never changes layout logic, IDs or comic art. */
:root{
  --ss-bark:#171C18; --ss-chestnut:#593A2E; --ss-leather-dark:#30251F;
  --ss-parchment:#F4EBD8; --ss-parchment-soft:#EFE3CA; --ss-linen:#FFFDF8;
  --ss-ink:#26211A; --ss-sepia:#554A3C;
  --ss-gold:#C89B3C; --ss-gold-light:#E5C575; --ss-gold-deep:#7C5310;
  --ss-amethyst:#6D28D9; --ss-amethyst-deep:#4C1D95; --ss-moss:#3F684A;
  --ss-border:#D4C5A6;
  --ss-filigree:linear-gradient(90deg,transparent,rgba(200,155,60,.75) 20%,#E5C575 50%,rgba(200,155,60,.75) 80%,transparent);
  --ss-focus:0 0 0 3px rgba(229,197,117,.9),0 0 0 5px rgba(76,29,149,.55);
  --ss-font-display:'Cormorant Garamond',Georgia,serif;
  --ss-font-ui:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --ss-touch:44px;
}

/* Keyboard focus: visible gold + amethyst ring everywhere. */
:where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{
  outline:none!important;box-shadow:var(--ss-focus)!important;border-radius:8px;
}

/* Gentle parchment page wash for light pages (tips/legal/fundraiser/studio). */
body.ss-page{
  background:
    radial-gradient(900px 420px at 50% -120px,rgba(124,58,237,.10),transparent 70%),
    radial-gradient(700px 360px at 100% 0,rgba(200,155,60,.10),transparent 70%),
    var(--ss-parchment);
  color:var(--ss-ink);
}
.ss-page h1,.ss-page h2{font-family:var(--ss-font-display);letter-spacing:.01em}
.ss-page h1::after{content:'';display:block;width:120px;height:2px;margin:12px 0 4px;background:var(--ss-filigree)}
.ss-page .intro,.ss-page .contact-box,.ss-page .example{border-color:rgba(200,155,60,.35);box-shadow:0 10px 28px rgba(38,33,26,.07),inset 0 1px 0 #fff}
.ss-page .back-btn{background:linear-gradient(180deg,#7C3AED,#5B21B6);border:1px solid rgba(229,197,117,.55);box-shadow:0 8px 20px rgba(76,29,149,.25);min-height:var(--ss-touch)}
.ss-page a:not(.back-btn):not(.logo):not(.btn){color:var(--ss-amethyst-deep);text-underline-offset:3px}

/* ── Studio shell refinements (index.html + app.css) ── */
.topbar{border-bottom:1px solid transparent;border-image:var(--ss-filigree) 1;padding-bottom:8px}
.tb-title{color:var(--ss-chestnut)}
.ic-btn{min-width:var(--ss-touch);min-height:var(--ss-touch);border-color:rgba(200,155,60,.4)}
.btn-p,.disc-agree,.lulu-btn-primary{
  background:linear-gradient(180deg,#7C3AED,#5B21B6);
  border:1px solid rgba(229,197,117,.55);
  box-shadow:0 10px 24px rgba(76,29,149,.22),inset 0 1px 0 rgba(255,255,255,.18);
  min-height:var(--ss-touch);
}
.btn-g,.disc-decline,.lulu-btn-ghost{background:rgba(255,253,248,.7);border-color:rgba(89,58,46,.28);color:var(--ss-chestnut);min-height:var(--ss-touch)}
.card,.char-card,.tier-card,.account-card,.auth-panel,.lulu-panel,.dl-panel,.ttx-panel{
  border-color:rgba(200,155,60,.38);
  box-shadow:0 10px 26px rgba(38,33,26,.08),inset 0 1px 0 rgba(255,255,255,.7);
}
.slbl{color:var(--ss-gold-deep);letter-spacing:1.4px}
.finput,.tinput,.auth-input,.char-name-input,.av-edit-input,.ttx-input,.cbt-select{
  background:var(--ss-linen);border-color:var(--ss-border);color:var(--ss-ink);min-height:var(--ss-touch);
}
.finput::placeholder,.tinput::placeholder,.auth-input::placeholder{color:#8A7B66}
.finput:focus,.tinput:focus,.auth-input:focus{border-color:var(--ss-gold)}
.bnav{border-top:1px solid rgba(200,155,60,.45);background:rgba(255,253,248,.94)}
.ni{min-height:var(--ss-touch)}
.lib-empty{color:var(--ss-sepia)}
.lib-empty p{font-family:var(--ss-font-display);font-size:1.25rem;color:var(--ss-chestnut);line-height:1.35}
.auth-err{color:#9B1C1C}
.toast{background:var(--ss-leather-dark);color:var(--ss-parchment);border:1px solid rgba(229,197,117,.45)}
.prog-fill{background:linear-gradient(90deg,var(--ss-gold),#7C3AED)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── Guided Create wizard + enchanted backdrop (Create screen only) ── */
#create.cf-wizard [data-cf-step]:not([data-cf-active]){display:none!important}
#create{
  background:
    radial-gradient(600px 320px at 85% 0,rgba(109,40,217,.12),transparent 70%),
    radial-gradient(500px 300px at 0 100%,rgba(63,104,74,.10),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--ss-parchment);
}
#create::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.55;
  background:radial-gradient(circle at 8% 22%,rgba(229,197,117,.8) 0 1.3px,transparent 3px),radial-gradient(circle at 92% 30%,rgba(229,197,117,.7) 0 1.2px,transparent 3px),
  radial-gradient(circle at 85% 72%,rgba(229,197,117,.7) 0 1.4px,transparent 3px),radial-gradient(circle at 14% 80%,rgba(229,197,117,.6) 0 1.2px,transparent 3px);
  animation:cfGlim 7s ease-in-out infinite alternate}
#create{isolation:isolate}
@keyframes cfGlim{from{opacity:.3}to{opacity:.6}}
.cf-steps [data-cf-dot].on{background:linear-gradient(180deg,#7C3AED,#5B21B6);color:#fff;border-color:var(--ss-gold-light)}
.cf-steps [data-cf-dot].done{background:var(--ss-parchment-soft);color:var(--ss-chestnut);border-color:var(--ss-gold)}
.cf-wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 8px}
.cf-wiz-nav[hidden],.cf-wiz-msg[hidden],.cf-wiz-all[hidden]{display:none}
.cf-wiz-back,.cf-wiz-next{min-height:var(--ss-touch);min-width:108px;padding:10px 18px;border-radius:999px;font-family:var(--ss-font-ui);font-size:15px;font-weight:700;cursor:pointer}
.cf-wiz-back{background:rgba(255,253,248,.8);border:1.5px solid rgba(89,58,46,.35);color:var(--ss-chestnut)}
.cf-wiz-back:disabled{opacity:.4;cursor:default}
.cf-wiz-next{margin-left:auto;background:linear-gradient(180deg,var(--ss-gold-light),var(--ss-gold));border:1px solid var(--ss-gold-deep);color:var(--ss-leather-dark);box-shadow:0 4px 0 var(--ss-gold-deep),0 8px 18px rgba(38,33,26,.18)}
.cf-wiz-next[hidden]{display:none}
.cf-wiz-count{font-size:12px;font-weight:700;color:var(--ss-sepia);text-align:center}
.cf-wiz-msg{margin:0 0 10px;padding:9px 12px;border-radius:10px;background:#FFF4E5;border:1px solid var(--ss-gold);color:#7C2D12;font-size:13px}
.cf-wiz-all{display:block;margin:4px auto 14px;background:none;border:0;color:var(--ss-amethyst-deep);text-decoration:underline;font-size:12px;cursor:pointer;min-height:var(--ss-touch)}
/* Format cards: illustrative book shapes in place of emoji (shape only, no art). */
#formatPickerSection .fmt-card .fe{font-size:0;width:54px;height:70px;margin:0 0 12px;border-radius:3px 8px 8px 3px;
  background:linear-gradient(135deg,#7A4027,var(--ss-chestnut));border:2px solid var(--ss-gold);box-shadow:inset 6px 0 8px rgba(0,0,0,.35),6px 8px 14px rgba(38,33,26,.25)}
#formatPickerSection .fmt-card[data-fmt="fullcomic"] .fe{background:
  linear-gradient(var(--ss-gold-light),var(--ss-gold-light)) 50% 50%/2px 70% no-repeat,linear-gradient(var(--ss-gold-light),var(--ss-gold-light)) 50% 50%/70% 2px no-repeat,linear-gradient(135deg,#7A4027,var(--ss-chestnut))}
#formatPickerSection .fmt-card[data-fmt="childrens"] .fe{width:70px;height:62px;background:
  radial-gradient(circle at 50% 42%,var(--ss-gold-light) 0 9px,transparent 10px),linear-gradient(135deg,#7A4027,var(--ss-chestnut))}
#formatPickerSection .fmt-card[data-fmt="video"] .fe{width:76px;height:50px;border-radius:8px;background:
  conic-gradient(from 90deg at 44% 50%,transparent 0 60deg,var(--ss-gold-light) 60deg 120deg,transparent 120deg) 50% 50%/34px 34px no-repeat,linear-gradient(135deg,var(--ss-amethyst-deep),#2E1065)}
#formatPickerSection .fmt-scroll{gap:12px}
#formatPickerSection .fmt-card{min-height:170px}
@media (prefers-reduced-motion:reduce){#create::before{animation:none}}

/* ══ Create visual depth (approved enchanted prototype → app) ═════════════
   Root cause of the "flat" Create screen:
   1. The first enchanted layer was too faint (noise alpha .22, glows .10–.12,
      fireflies ~1px) and had no woodland margins at all.
   2. Cast controls kept the original plain styles: transparent dashed
      buttons in grey 13px text, 10px labels, 9px nav labels.
   3. The ≥760px "desktop studio" framing (app.css) also applied on touch
      devices with a wide layout viewport, which squeezes Create into a
      centred 680px column of tiny text. It is now limited to fine pointers.
   Decorative layers ignore pointer events; controls keep their IDs/handlers. */
#create{
  background:
    radial-gradient(520px 360px at 100% 0,rgba(109,40,217,.26),transparent 70%),
    radial-gradient(460px 340px at 0 100%,rgba(63,104,74,.22),transparent 70%),
    radial-gradient(700px 400px at 50% 40%,rgba(255,250,235,.55),transparent 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .42 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(#n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#F1E4C6,#E9D7B0);
}
#create::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.34;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='260' viewBox='0 0 90 260'%3E%3Cpath d='M20 0C50 60 5 120 35 180S30 240 20 260' fill='none' stroke='#4f5e36' stroke-width='2.2'/%3E%3Cg fill='#4f5e36'%3E%3Cpath d='M34 40c18-10 34-4 40 6-16 8-30 6-40-6z'/%3E%3Cpath d='M24 95c-14-12-14-26-10-34 12 8 16 22 10 34z'/%3E%3Cpath d='M36 150c16-14 32-12 40-4-14 12-28 12-40 4z'/%3E%3Cpath d='M30 215c-16-8-20-22-18-30 14 4 20 16 18 30z'/%3E%3C/g%3E%3Cg fill='#c89b3c'%3E%3Ccircle cx='60' cy='120' r='2.6'/%3E%3Ccircle cx='12' cy='200' r='2.2'/%3E%3Ccircle cx='66' cy='30' r='1.8'/%3E%3C/g%3E%3C/svg%3E") 0 0/72px 208px repeat-y,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='260' viewBox='0 0 90 260'%3E%3Cg transform='translate(90 0) scale(-1 1)'%3E%3Cpath d='M20 0C50 60 5 120 35 180S30 240 20 260' fill='none' stroke='#4f5e36' stroke-width='2.2'/%3E%3Cg fill='#4f5e36'%3E%3Cpath d='M34 40c18-10 34-4 40 6-16 8-30 6-40-6z'/%3E%3Cpath d='M24 95c-14-12-14-26-10-34 12 8 16 22 10 34z'/%3E%3Cpath d='M36 150c16-14 32-12 40-4-14 12-28 12-40 4z'/%3E%3Cpath d='M30 215c-16-8-20-22-18-30 14 4 20 16 18 30z'/%3E%3C/g%3E%3Cg fill='#c89b3c'%3E%3Ccircle cx='60' cy='120' r='2.6'/%3E%3Ccircle cx='12' cy='200' r='2.2'/%3E%3Ccircle cx='66' cy='30' r='1.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 100% 104px/72px 208px repeat-y}
#create::before{opacity:.9;filter:drop-shadow(0 0 4px rgba(229,197,117,.95));
  background:radial-gradient(circle at 9% 18%,#F7DC8A 0 2px,transparent 3.5px),radial-gradient(circle at 93% 27%,#F7DC8A 0 1.8px,transparent 3.5px),
  radial-gradient(circle at 86% 64%,#F7DC8A 0 2px,transparent 3.5px),radial-gradient(circle at 13% 76%,#F7DC8A 0 1.6px,transparent 3.5px),
  radial-gradient(circle at 70% 9%,#F7DC8A 0 1.4px,transparent 3px),radial-gradient(circle at 5% 48%,#F7DC8A 0 1.4px,transparent 3px)}
/* Leather header */
#create .topbar{background:linear-gradient(180deg,#6B3A26,#4A2A1D);border-bottom:3px solid var(--ss-gold);border-image:none;padding:10px 16px;min-height:60px;box-shadow:0 6px 16px rgba(38,33,26,.28)}
#create .tb-title{color:#F4EBD8;font-family:var(--ss-font-display);font-size:1.5rem;font-weight:700;letter-spacing:.02em}
#create .topbar .ic-btn{background:rgba(255,253,248,.12);border-color:rgba(229,197,117,.6);color:#F4EBD8}
#create .pad{padding:0 20px}
/* Progress pills */
#create .cf-steps{gap:8px;margin:18px 0 4px;justify-content:center}
#create .cf-steps span{font-size:13px;padding:7px 13px;background:rgba(255,253,248,.8);border:1.5px solid rgba(200,155,60,.6);color:#593A2E;box-shadow:0 2px 0 rgba(124,83,16,.25)}
#create .cf-steps [data-cf-dot].on{background:linear-gradient(180deg,#7C3AED,#4C1D95);color:#fff;border-color:#E5C575;box-shadow:0 3px 10px rgba(76,29,149,.35)}
/* Step headings: storybook display type with gold flourish */
#create .slbl.cf-step{font-size:1.9rem;color:#4A2A1D;margin-top:22px;text-shadow:0 1px 0 rgba(255,255,255,.6)}
#create .slbl.cf-step::after{content:"";flex:1;height:2px;margin-left:8px;background:var(--ss-filigree);align-self:center}
#create .cf-step-n{width:36px;height:36px;font-size:16px;box-shadow:0 0 0 3px rgba(229,197,117,.45),0 4px 10px rgba(76,29,149,.35)}
#create .cf-step-help{font-size:15px;color:#4A3F31;line-height:1.5;margin-bottom:14px}
#create .slbl{font-size:12px}
#create label{font-size:12px!important}
/* Rich parchment cards */
#create .card,#create .char-card{background:linear-gradient(180deg,#FFFDF8,#F8EFDC);border:1.5px solid rgba(200,155,60,.65);border-radius:16px;
  box-shadow:0 1px 0 #fff inset,0 3px 0 rgba(124,83,16,.18),0 14px 30px rgba(38,33,26,.16)}
#create .char-card{padding:14px}
#create .char-card.has-photo{border-color:#3F684A;box-shadow:0 0 0 3px rgba(63,104,74,.18),0 14px 30px rgba(38,33,26,.16)}
#create .char-thumb{width:68px;height:68px;border:2px solid var(--ss-gold);background:radial-gradient(circle at 50% 35%,#FFF7E3,#EAD9B4);box-shadow:inset 0 2px 6px rgba(89,58,46,.2)}
#create .char-name-input,#create .tinput{font-size:16px}
/* Cast action tiles with honest SVG UI icons (no generated art) */
#create .add-char-btn{display:flex;align-items:center;gap:14px;text-align:left;min-height:64px;padding:14px 16px;margin-top:12px;border-radius:16px;
  font-size:16px;font-weight:700;color:#4A2A1D;background:linear-gradient(180deg,#FFFDF8,#F3E6C8);border:1.5px solid rgba(200,155,60,.7);
  box-shadow:0 3px 0 rgba(124,83,16,.28),0 10px 22px rgba(38,33,26,.14);transition:transform .12s,box-shadow .12s}
#create .add-char-btn::before{content:"";flex:0 0 40px;height:40px;border-radius:12px;background:#F4EBD8 50%/24px no-repeat;border:1.5px solid rgba(200,155,60,.7)}
#create .add-char-btn:not(.reuse-char-btn){color:#FFF8E6;background:linear-gradient(180deg,#7C3AED,#4C1D95);border-color:#E5C575;box-shadow:0 4px 0 #2E1065,0 12px 26px rgba(76,29,149,.35)}
#create .add-char-btn:not(.reuse-char-btn)::before{background:rgba(255,253,248,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#E5C575' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4-6 8-6s7 2 8 6'/%3E%3Cpath d='M19 3v4M17 5h4'/%3E%3C/svg%3E") 50%/24px no-repeat;border-color:rgba(229,197,117,.8)}
#create .add-char-btn[onclick^="openReuseModal"]::before{background:#F4EBD8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#593A2E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 12a8 8 0 0 1 14-5l2 2M20 4v5h-5'/%3E%3Cpath d='M20 12a8 8 0 0 1-14 5l-2-2M4 20v-5h5'/%3E%3C/svg%3E") 50%/22px no-repeat}
#create .add-char-btn[onclick^="openSequelModal"]::before{background:#F4EBD8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#593A2E' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 5c3-1 6-1 9 1v14c-3-2-6-2-9-1z'/%3E%3Cpath d='M21 5c-3-1-6-1-9 1v14c3-2 6-2 9-1z'/%3E%3C/svg%3E") 50%/22px no-repeat}
#create .add-char-btn:active{transform:translateY(2px)}
#create .cast-info{font-size:13px;color:#4A3F31;margin-top:12px}
/* Format + style selection cards: bigger, framed, dimensional */
#formatPickerSection .fmt-card{background:linear-gradient(180deg,#FFFDF8,#F3E6C8);border-color:rgba(200,155,60,.7);box-shadow:0 3px 0 rgba(124,83,16,.25),0 14px 28px rgba(38,33,26,.16)}
#formatPickerSection .fmt-card .fn{font-family:var(--ss-font-display);font-size:1.35rem}
#formatPickerSection .fmt-card .fd{font-size:13px}
#formatPickerSection .fmt-card.on{background:linear-gradient(180deg,#F6EEFF,#E9DDFB);border-color:#6D28D9}
.cf-style-grid.cf-ready{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.cf-style-card{min-height:112px;font-size:14px;background:linear-gradient(180deg,#FFFDF8,#F3E6C8);border-color:rgba(200,155,60,.7);box-shadow:0 3px 0 rgba(124,83,16,.22),0 10px 20px rgba(38,33,26,.12)}
.cf-style-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 50% 35%,#FFF7E3,#EAD9B4);border:2px solid var(--ss-gold)}
.cf-style-group{font-size:12px;color:#593A2E}
/* Wizard nav + bottom nav legibility */
#create .cf-wiz-count{font-size:13px;color:#4A2A1D}
#create .cf-wiz-back,#create .cf-wiz-next{font-size:16px;min-height:52px}
#create .cost-row{font-size:14px}
#create .bnav{background:linear-gradient(180deg,#5A2E1A,#3E2419);border-top:2px solid var(--ss-gold)}
#create .ni-lbl{font-size:11px;color:#E8D5AA}
#create .ni.on .ni-lbl{color:#F7DC8A}
@media (max-width:420px){#create .slbl.cf-step{font-size:1.65rem}#create::after{opacity:.26;background-size:48px 139px,48px 139px}}
@media (prefers-reduced-motion:reduce){#create .add-char-btn{transition:none}}