@font-face { font-family:'Playfair'; src:url('fonts/PlayfairDisplay-Medium.ttf'); }
@font-face { font-family:'CormorantSB'; src:url('fonts/CormorantGaramond-SemiBoldItalic.ttf'); }
@font-face { font-family:'Cinzel'; src:url('fonts/Cinzel-Bold.ttf'); }
@font-face { font-family:'Nunito'; src:url('fonts/nunito-400.ttf'); font-weight:400; }
@font-face { font-family:'Nunito'; src:url('fonts/nunito-700.ttf'); font-weight:700; }
@font-face { font-family:'Nunito'; src:url('fonts/nunito-800.ttf'); font-weight:800; }

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Nunito', sans-serif; color:#F5F1E9; min-height:100vh;
  background:
    radial-gradient(1000px 540px at 85% -10%, rgba(122,26,26,.30), transparent 62%),
    linear-gradient(180deg, #120709 0%, #170A0D 55%, #120709 100%);
  background-color:#120709; }
/* Scheme C "Burgundy Velvet" (Johnny's pick, 2026-10-23): the starfield
   sparkles are off — one wine glow on near-black, gold only in lines/labels. */
.stars { display:none; position:fixed; inset:0; pointer-events:none; opacity:.65;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 20%, #fff, transparent), radial-gradient(1px 1px at 33% 66%, #F7EF6E, transparent),
    radial-gradient(1.5px 1.5px at 56% 10%, #fff, transparent), radial-gradient(1px 1px at 72% 40%, #fff, transparent),
    radial-gradient(2px 2px at 89% 62%, #F7EF6E, transparent), radial-gradient(1px 1px at 45% 84%, #fff, transparent),
    radial-gradient(1px 1px at 7% 76%, #fff, transparent), radial-gradient(1.5px 1.5px at 93% 16%, #fff, transparent); }
.wrap { max-width:1200px; margin:0 auto; padding:28px 28px 44px; position:relative; }

header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:18px; }
.brand img { height:64px; }
.brand .name { font-family:'Cinzel'; letter-spacing:3px; font-size:13px; color:#CFAC52; }
.brand .sub { font-family:'CormorantSB'; font-style:italic; font-size:19px; color:#EFE7D6; margin-top:2px; }
.chip { font-size:12.5px; font-weight:700; color:#F5F1E9; background:rgba(207,172,82,.14);
  border:1px solid rgba(207,172,82,.5); padding:7px 13px; border-radius:999px; white-space:nowrap; }

.card { background:rgba(245,241,233,.045); border:1px solid rgba(207,172,82,.30); border-radius:22px;
  padding:26px; box-shadow:0 24px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); margin-top:22px; }
.card.first { margin-top:26px; }
.card h2 { font-family:'Cinzel'; font-size:14px; letter-spacing:3.5px; color:#CFAC52; display:flex; align-items:center; gap:10px; }
.card h2 .n { display:inline-flex; width:26px; height:26px; border-radius:50%; border:1.5px solid #CFAC52;
  align-items:center; justify-content:center; font-family:'Nunito'; font-weight:800; font-size:13px; letter-spacing:0; color:#F7EF6E; }
.note { font-size:13.5px; color:#B7AB90; margin-top:10px; }

.templates { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:18px; }
.tpl { border-radius:16px; padding:17px 18px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.10); cursor:pointer; }
.tpl.sel { border:1.5px solid #CFAC52; background:linear-gradient(160deg, rgba(207,172,82,.16), rgba(0,0,0,.35)); box-shadow:0 0 22px rgba(207,172,82,.18); }
.tpl .t { font-family:'Playfair'; font-size:20px; }
.tpl .d { font-size:12.5px; color:#B7AB90; margin-top:4px; line-height:1.5; }
.tpl .tag { display:inline-block; margin-top:10px; font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:999px;
  background:rgba(207,172,82,.2); color:#F7EF6E; border:1px solid rgba(207,172,82,.55); }
.tpl.add { cursor:default; border:1.5px dashed rgba(207,172,82,.45); }
.tpl.add .add-t { font-weight:800; font-size:15px; margin-bottom:9px; }
.tpl.add input[type=text] { width:100%; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15); color:#F5F1E9;
  border-radius:8px; padding:8px 10px; font-family:'Nunito'; font-size:13.5px; margin-bottom:8px; }
.filebtn { display:inline-block; font-family:'Nunito'; background:linear-gradient(135deg,#9E2B25,#7A1A1A); color:#FFF3E2; font-size:12.5px; font-weight:700; border:1px solid rgba(207,172,82,.30);
  padding:7px 12px; border-radius:999px; cursor:pointer; margin-right:8px; }
/* visually hidden but NOT display:none — iOS Safari refuses to open the file
   picker for display:none inputs tapped through a label. */
.vh { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip-path: inset(50%); }

.grid2 { display:grid; grid-template-columns:1fr 1.15fr; gap:22px; }
.blurb { width:100%; margin-top:16px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.1); border-radius:14px;
  padding:16px 18px; font-size:14.5px; line-height:1.6; color:#EFE7D6; font-family:'Nunito'; resize:vertical; }
.btn { display:inline-block; margin-top:14px; background:linear-gradient(135deg,#9E2B25,#7A1A1A);
  color:#FFF3E2; font-weight:800; font-size:15px; padding:12px 26px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(207,172,82,.35); box-shadow:0 10px 26px rgba(122,26,26,.45); font-family:'Nunito'; }
.mini { font-family:'Nunito'; font-weight:800; font-size:13px; padding:9px 16px; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg,#9E2B25,#7A1A1A); border:1px solid rgba(207,172,82,.30); color:#FFF3E2; }
.mini.gold { background:linear-gradient(135deg,#9E2B25,#7A1A1A); color:#FFF3E2; border-color:rgba(255,255,255,.15); }
.mini.danger { background:linear-gradient(135deg,#5E1414,#3D0B0B); border-color:rgba(255,150,130,.35); color:#F3C1B8; }
.rowbtns { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.rowbtns .mini { margin-top:14px; }

.menupick { display:flex; align-items:center; gap:12px; margin-top:16px; }
.menupick select { background:rgba(0,0,0,.4); color:#F5F1E9; border:1px solid rgba(207,172,82,.45); border-radius:10px;
  padding:9px 12px; font-family:'Nunito'; font-weight:700; font-size:14px; max-width:70%; }
.savestate { font-size:12.5px; color:#A9C6A4; font-weight:700; }
#paperWrap { margin-top:14px; border-radius:10px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.55); }
#paperWrap .paper [contenteditable] { outline:none; border-radius:4px; }
#paperWrap .paper [contenteditable]:hover { box-shadow:0 0 0 1.5px rgba(176,125,43,.45); }
#paperWrap .paper [contenteditable]:focus { box-shadow:0 0 0 1.5px #B07D2B; background:rgba(207,172,82,.08); }
.del-x { display:inline-block; margin-left:8px; color:#B03A2E; font-family:'Nunito'; font-weight:800; font-size:12px;
  cursor:pointer; vertical-align:middle; opacity:.65; }
.hint { font-size:13px; color:#B7AB90; margin-top:12px; }
.structbtns { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.editbar { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.ebtn { flex:1; min-width:110px; text-align:center; font-weight:800; font-size:14px; padding:12px 10px; border-radius:12px;
  background:linear-gradient(135deg,#9E2B25,#7A1A1A); border:1px solid rgba(207,172,82,.30); color:#FFF3E2; cursor:pointer; text-decoration:none; font-family:'Nunito'; }
.ebtn.main { background:linear-gradient(135deg,#9E2B25,#7A1A1A); color:#FFF3E2; border-color:rgba(207,172,82,.35); }
.igbar { display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.iglbl { font-size:13px; font-weight:800; color:#B7AB90; letter-spacing:.4px; }
.ig-link { font-size:13px; font-weight:800; color:#FFF3E2; text-decoration:none; padding:8px 14px; border-radius:999px;
  border:1px solid rgba(207,172,82,.30); background:linear-gradient(135deg,#9E2B25,#7A1A1A); }
/* ---------- Tap feedback (every button visibly answers a tap) ---------- */
.btn, .ebtn, .mini, .ig-link, .filebtn, .choice, .stepper .st, .tpl, button {
  transition: transform .12s ease, opacity .12s ease, filter .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .ebtn:active, .mini:active, .ig-link:active, .filebtn:active,
.choice:active, .stepper .st:active, button:active {
  transform: scale(.965);
  opacity: .72;
  filter: brightness(1.18);
}
@keyframes tapflash {
  0% { box-shadow: 0 0 0 0 rgba(207,172,82,0); }
  30% { box-shadow: 0 0 0 7px rgba(207,172,82,.38); }
  100% { box-shadow: 0 0 0 0 rgba(207,172,82,0); }
}
.tapped { animation: tapflash .55s ease-out; }

/* ---------- Wizard (4-step front flow) ---------- */
.stepper { display:flex; align-items:flex-start; margin:28px 8px 2px; pointer-events:none; }
.tstep { display:flex; flex-direction:column; align-items:center; gap:6px; width:56px; flex:none; }
.tnum { width:33px; height:33px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,.22); color:#8d8271; font-weight:800; font-size:14.5px;
  background:rgba(255,255,255,.03); font-family:'Nunito'; }
.tlab { font-size:10.5px; font-weight:700; letter-spacing:.5px; color:#8d8271; text-transform:uppercase;
  font-family:'Nunito'; text-align:center; }
.tconn { flex:1; height:2px; background:rgba(255,255,255,.14); margin-top:16px; border-radius:2px; }
.tstep.cur .tnum { background:linear-gradient(135deg,#9E2B25,#7A1A1A); color:#FFF3E2; border-color:#7A1A1A;
  box-shadow:0 4px 16px rgba(122,26,26,.45); }
.tstep.cur .tlab { color:#E3B7B1; }
.tstep.done .tnum { border-color:rgba(158,43,37,.8); color:#D98E86; background:rgba(122,26,26,.18); }
.tstep.done .tlab { color:#B7AB90; }
.tconn.done { background:#7A1A1A; }
.stepstatus { text-align:center; color:#B7AB90; font-size:13.5px; margin:8px 0 0; font-family:'Nunito'; }
.ordiv { text-align:center; color:#8d8271; font-size:12px; letter-spacing:1.4px; margin:20px 0 12px;
  text-transform:uppercase; font-family:'Nunito'; font-weight:700; }
.blockgold { display:block; width:100%; text-align:center; margin-bottom:10px; padding:14px; font-size:15.5px; }
.blockghost { display:block; width:100%; text-align:center; padding:13px; font-size:15px;
  background:linear-gradient(135deg,#8A201B,#671513);
  color:#FFF3E2; border:1px solid rgba(207,172,82,.30); border-radius:999px; font-weight:700; cursor:pointer; font-family:'Nunito'; }
.wizpanel { display:none; }
.wizpanel.on { display:block; }
h1.q { font-family:'Playfair'; font-weight:500; font-size:38px; text-align:center; margin:22px 0 26px; }
h1.q .gold { color:#CFAC52; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.choice { background:rgba(245,241,233,.045); border:1px solid rgba(207,172,82,.30); border-radius:20px;
  padding:26px; cursor:pointer; }
.choice:hover { border-color:#CFAC52; }
.choice .ic { font-size:28px; }
.choice .t { font-size:20px; font-weight:800; margin-top:10px; }
.choice .d { color:#B7AB90; font-size:14.5px; margin-top:6px; line-height:1.5; }
.openlist { margin-top:16px; background:rgba(245,241,233,.045); border:1px solid rgba(207,172,82,.30);
  border-radius:20px; padding:6px 22px; }
.modalwrap { position:fixed; inset:0; z-index:200; background:rgba(8,2,4,.74); display:flex; align-items:center; justify-content:center; padding:20px; }
.modalwrap[hidden] { display:none; }
.modalcard { background:linear-gradient(180deg,#1B0D10,#140709); border:1px solid rgba(207,172,82,.35); border-radius:20px; padding:26px 24px 22px; max-width:350px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.55); text-align:center; }
.modaltitle { font-family:var(--font-d); font-size:24px; color:var(--cream); }
.modaltext { color:#CDBFA3; font-size:14.5px; line-height:1.55; margin:10px 0 20px; }
.btn.blockdanger { background:linear-gradient(135deg,#5E1414,#3D0B0B); color:#F3D9C8; width:100%; }
.btn.dangerbtn { background:linear-gradient(135deg,#5E1414,#3D0B0B); color:#F3D9C8; padding:10px 18px; font-size:14.5px; }
.openrow { display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.07); flex-wrap:wrap; }
.openrow:last-child { border-bottom:none; }
.openrow .t { font-weight:800; font-size:16.5px; }
.openrow .d { color:#B7AB90; font-size:13px; }
.openrow .sp { flex:1; }
.tplgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:6px; }
.tplgrid .tpl { padding:18px; }
.tplgrid .sheet { background:#FEFCF5; color:#7A1A1A; border-radius:8px; padding:14px; text-align:center; min-height:96px;
  display:flex; flex-direction:column; justify-content:center; gap:7px; }
.tplgrid .sheet-t { font-family:'Playfair'; font-size:20px; line-height:1.2; }
.tplgrid .sheet .sm { font-family:'Nunito'; color:#8a7a52; font-size:11px; letter-spacing:1px; }
.tplgrid .n { font-weight:800; margin-top:13px; font-size:15.5px; }
.tplgrid .tag { float:right; margin-top:0; }
.upload { margin-top:16px; border:1.5px dashed rgba(207,172,82,.55); border-radius:18px; padding:20px 22px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:rgba(207,172,82,.05); }
.upload.strong { border-style:solid; border-color:#CFAC52; background:rgba(207,172,82,.10); }
.upload input[type=text] { background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15); color:#F5F1E9;
  border-radius:10px; padding:11px 13px; font-size:14.5px; font-family:'Nunito'; min-width:180px; }
.upload .t { font-weight:800; font-size:16.5px; }
.upload .d { color:#B7AB90; font-size:13px; }
.upload input[type=text] { background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15); color:#F5F1E9;
  border-radius:10px; padding:11px 13px; font-size:14.5px; font-family:'Nunito'; min-width:180px; }
.navrow { display:flex; justify-content:space-between; align-items:center; margin-top:26px; gap:12px; flex-wrap:wrap; }
.btn.ghost { background:linear-gradient(135deg,#8A201B,#671513); color:#FFF3E2; border:1px solid rgba(207,172,82,.30); }
.flabel { display:block; font-size:12px; font-weight:800; letter-spacing:1.6px; color:#CFAC52; margin-bottom:9px; }
.namein { width:100%; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15); color:#F5F1E9;
  border-radius:14px; padding:14px 15px; font-size:15.5px; font-family:'Nunito'; }
textarea.words { min-height:290px; }
.editorcard { margin-top:18px; }
.editorcard h2 .savestate { margin-left:auto; }
.igline { display:flex; gap:14px; align-items:center; margin-top:20px; border-top:1px solid rgba(207,172,82,.25); padding-top:16px; flex-wrap:wrap; }
@media (max-width:640px) {
  .choices { grid-template-columns:1fr; }
  h1.q { font-size:29px; }
}

.shareline { display:flex; gap:10px; margin-top:12px; }
.shareline[hidden] { display:none; }
.sharebox { margin-top:18px; border-top:1px solid rgba(207,172,82,.25); padding-top:16px; }
.sharerow { display:flex; gap:10px; flex-wrap:wrap; }
.sharerow input { flex:1; min-width:200px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15); color:#F5F1E9;
  border-radius:10px; padding:10px 12px; font-size:14px; font-family:'Nunito'; }
.shareitem { display:flex; gap:10px; align-items:center; margin-top:9px; font-size:13.5px; background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:9px 12px; flex-wrap:wrap; }
.shareitem .em { font-weight:700; }
.shareitem .lk { color:#B7AB90; font-size:12px; word-break:break-all; flex:1; min-width:180px; }
.shareline input { flex:1; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15); color:#F5F1E9;
  border-radius:10px; padding:10px 12px; font-size:13px; font-family:'Nunito'; }

.shelf { margin-top:22px; }
.hist { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:16px; }
.hcard { background:rgba(245,241,233,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:16px 18px; }
.hcard .t { font-family:'Playfair'; font-size:19px; }
.hcard .d { font-size:12.5px; color:#B7AB90; margin-top:3px; }
.pill { display:inline-block; margin-top:10px; font-size:12px; font-weight:800; padding:4px 11px; border-radius:999px;
  background:rgba(207,172,82,.16); color:#F7EF6E; border:1px solid rgba(207,172,82,.5); }

footer { text-align:center; margin-top:36px; font-family:'CormorantSB'; font-style:italic; font-size:18px; color:#97907C; }
footer .host { font-family:'Nunito'; font-style:normal; font-size:12.5px; letter-spacing:1px; color:#6F695B; margin-top:5px; }

@media (max-width: 760px) {
  .wrap { padding:20px 16px 34px; }
  .brand img { height:48px; } .brand .sub { display:none; }
  .grid2 { grid-template-columns:1fr; }
  .chip { font-size:11px; padding:6px 9px; }
}