/* Parchment + Forest Beastiarium Theme */
/* Palette */
:root{
  --bg-wood:#1a1f18;
  --bg-deck:#10140f;
  --paper:#f4ecd9;
  --paper-ink:#2a231a;
  --ink:#211a13;
  --muted:#6f6559;
  --leaf:#3a5f3a;
  --leaf-soft:#5f8b5f;
  --accent:#b08a57;
  --ring:rgba(90, 122, 58, 0.35);
  --line:#cdbf9d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"EB Garamond", Georgia, "Times New Roman", serif;
  color:var(--ink);
  /* non-repeating, full viewport foresty gradient */
  background:
   radial-gradient(1200px 800px at 20% -10%, rgba(95,139,95,0.20), transparent 60%),
   radial-gradient(1200px 800px at 120% 10%, rgba(58,95,58,0.18), transparent 60%),
   linear-gradient(180deg, var(--bg-wood), var(--bg-deck));
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat;
  min-height:100%;
  overflow-x:hidden;
}

/* Desk vignette overlay (non-repeating) */
.desk-bg::before{
  content:""; position:fixed; inset:-10% -10% -10% -10%;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(0,0,0,0.18), transparent 70%),
    radial-gradient(1200px 600px at 50% 100%, rgba(0,0,0,0.25), transparent 70%);
  z-index:0;
}

.container{max-width:1100px;margin:0 auto;padding:24px;position:relative;z-index:1}

.site-header{
  color:#e9e3d5;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.0));
  border-bottom:1px solid rgba(0,0,0,0.35);
  text-shadow:0 1px 0 rgba(0,0,0,0.6);
}
.site-header h1{margin:0;font-family:Cinzel, serif; letter-spacing:0.7px}
.tagline{margin:6px 0 0;color:#dcd4c4; opacity:.85}

.site-footer{
  margin-top:32px;
  color:#dacfbf;
  border-top:1px solid rgba(0,0,0,0.35);
}

/* Book frame */
.book-wrap{padding-top:28px;padding-bottom:28px}
.book{
  position:relative;
  border-radius:18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 2px 0 rgba(0,0,0,0.5);
  background:
    /* leaf tint edges */
    radial-gradient(1200px 500px at -10% 10%, rgba(58,95,58,0.15), transparent 60%),
    radial-gradient(1200px 500px at 110% 90%, rgba(58,95,58,0.12), transparent 60%),
    linear-gradient(180deg, #f9f2e2, #efe2c6 70%, #ead7b6);
  border:1px solid rgba(0,0,0,0.4);
  overflow:hidden;
}

/* Parchment pages */
.page{
  background:
    radial-gradient(1400px 800px at 50% -20%, rgba(255,255,255,0.35), transparent 50%),
    radial-gradient(1000px 600px at 50% 120%, rgba(239,225,200,0.6), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px),
    linear-gradient(180deg, #f7efdb, #efe2c6);
  color:var(--paper-ink);
  border:1px solid #ddcba9;
}

.card{
  border-radius:16px;
  padding:18px;
  margin:16px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 6px 18px rgba(0,0,0,0.08) inset;
}

.page-title{
  font-family:Cinzel, serif;
  margin:6px 0 12px;
  position:relative;
}
.page-title::after{
  content:""; display:block; height:2px; margin-top:8px;
  background: linear-gradient(90deg, transparent, #7aa77a, #c9b99a, transparent);
}

.hint{font-weight:400;color:var(--muted);font-size:13px;margin-left:8px}
.note{color:var(--muted);font-size:14px}
.link-btn{
  display:inline-block; padding:.4rem .7rem; margin-left:.4rem;
  background:linear-gradient(180deg, #e6f1e6, #d8ead8);
  border:1px solid #b6d0b6; border-radius:10px; color:#274227; text-decoration:none; font-weight:700;
}

/* Foresty vine border accents */
.picker{margin:16px; position:relative}
.picker::before{
  content:""; position:absolute; inset:6px; border-radius:14px; pointer-events:none;
  box-shadow: 0 0 0 1px rgba(122,167,122,0.35) inset, 0 0 0 2px rgba(255,255,255,0.2) inset;
  mask-image: radial-gradient(10px 10px at 0 0, transparent 9px, #000 10px),
              radial-gradient(10px 10px at 100% 0, transparent 9px, #000 10px),
              radial-gradient(10px 10px at 0 100%, transparent 9px, #000 10px),
              radial-gradient(10px 10px at 100% 100%, transparent 9px, #000 10px);
  mask-composite: exclude;
}

.controls{display:flex;gap:8px;justify-content:flex-end;margin:8px 16px}
.grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;}

.grid-2{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px;margin:0 16px}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} }

.picker h3{font-family:Cinzel, serif;margin:4px 0 10px}

.picker .grid .option{
  display:flex;gap:12px;align-items:flex-start;
  background:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.25));
  border:1px solid #d6c6a7;
  border-radius:14px;
  padding:10px;
  cursor:pointer;
  transition:transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.picker .grid .option:hover{transform:translateY(-1px)}
.option.selected{
  border-color:#7aa77a;
  box-shadow:0 0 0 3px var(--ring);
}
.option .thumb{
  width:72px;height:72px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35));
  border:1px solid #d6c6a7;
  display:grid;place-items:center; overflow:hidden;
}
.option .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.option .meta{flex:1}
.option .meta h4{margin:2px 0 2px;font-size:17px}
.option .meta p{margin:0;color:#6c5c4d;font-size:13px}

/* Buttons */
.btn{
  appearance:none;border:none;border-radius:12px;padding:10px 14px;
  background:linear-gradient(180deg, #f5e8cd, #e8d6b5);
  color:#3a2e23;
  border:1px solid #d6c6a7;font-weight:700;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 0 rgba(0,0,0,0.05);
}
.btn:hover{filter:brightness(1.02)}
.btn.primary{background:linear-gradient(180deg, #a8d0a8, #7aa77a);border-color:#6b996b;color:#162616}
.btn.ghost{background:linear-gradient(180deg, #f9f2e2, #eee1c7)}

.actions{display:flex;gap:10px;align-items:center;margin:16px}

.muted{color:#7c6b5a;font-size:13px}

.output-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
#description{
  width:100%;border:1px solid #d6c6a7;background:#fbf6ea;color:#3b2f22;
  border-radius:12px;padding:12px;margin-top:10px;font-family:inherit;line-height:1.6;
}

/* Image fallbacks */
.option .thumb .placeholder{
  width:100%;height:100%;display:grid;place-items:center;color:#8a7b6b; font-weight:600; font-size:12px; opacity:.9;
}

/* Blur when age gate active */
.blurred{ filter: blur(6px); pointer-events:none; user-select:none; }

/* Age gate modal */
.agegate{
  position:fixed; inset:0; display:grid; place-items:center; padding:20px;
  background:rgba(0,0,0,0.6); z-index:9999;
}
.age-card{
  width:min(520px, 96vw);
  background:
    radial-gradient(800px 400px at 50% -20%, rgba(255,255,255,0.3), transparent 60%),
    linear-gradient(180deg, #faf2df, #efe0c4);
  border:1px solid #d6c6a7; border-radius:16px; padding:18px;
  color:#2c241b; text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
}
.age-card h2{margin:8px 0 6px; font-family:Cinzel, serif;}
.age-actions{display:flex;gap:10px;justify-content:center;margin-top:10px}

.agegate[hidden] { display: none !important; }