/* ─────────────────────────────────────────────────────────────
   Quests for Esteria: the tavern skin.
   A cosy fantasy-RPG look: lamplit wood behind, slate panels with
   gold trim, cream item cards, starred character cards, round pill
   buttons and a line of dialogue. Loaded after each Esteria page's
   own styles, so it only has to say what changes.
   ───────────────────────────────────────────────────────────── */
:root {
  --night: #161722; --slate: #3b4255; --slate-2: #4a5366; --slate-ink: #5a6275;
  --gold: #d3bc8e; --gold-hi: #f2dcae; --gold-deep: #a9773a;
  --gold-line: rgba(211,188,142,.45); --gold-faint: rgba(211,188,142,.16);
  --cream: #ece5d8; --cream-dim: #c6bcab; --cream-faint: #958d80;
  --lamp: #ffc76d; --glass: #74e3d4;
  /* Card backgrounds by rank: gold for the regulars, violet for what's in the dark. */
  --five: radial-gradient(circle at 86% 72%, rgba(255,214,140,.32), transparent 52%), linear-gradient(165deg, #2e2223 0%, #523a2c 45%, #8a5e34 85%, #a8743a 100%);
  --four: radial-gradient(circle at 50% 22%, rgba(190,150,255,.3), transparent 55%), linear-gradient(165deg, #1d1a2e 0%, #36294f 45%, #5c4588 85%, #6c529c 100%);
  --panel: linear-gradient(180deg, rgba(40,43,62,.93), rgba(27,29,43,.93));
  --frame: inset 0 0 0 4px rgba(18,19,28,.55), inset 0 0 0 5px rgba(211,188,142,.16);

  /* The page's own names, pointed at the new colours. */
  --oak: #161722; --oak-2: #20222f; --grain: #4a4560; --grain-hi: #7d6b4f;
  --parch: var(--cream); --parch-dim: var(--cream-dim); --parch-faint: var(--cream-faint);
  --paper: var(--cream); --paper-edge: var(--gold); --ink: var(--slate);
  --ember: var(--gold); --ember-hi: var(--gold-hi); --amethyst: #a98ae0; --wine: #9c5b46;
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --deco: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --sc: 'Cinzel', Georgia, serif;
}

/* ── The room: warm wood, a chandelier overhead, stained glass catching the light ── */
body { font: 400 1.06rem/1.6 var(--body); background: linear-gradient(180deg, #241a18 0%, #1b1619 38%, #15151e 100%) fixed, #161722; }
body::before {
  background:
    radial-gradient(640px 380px at 50% -80px, rgba(255,199,109,.26), transparent 70%),
    radial-gradient(460px 320px at 8% 16%, rgba(116,227,212,.09), transparent 70%),
    radial-gradient(460px 320px at 92% 20%, rgba(214,120,170,.09), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,220,170,.028) 0 2px, transparent 2px 150px),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.62) 100%);
}
a { color: var(--gold-hi); text-decoration-color: var(--gold-line); }
a:hover, a:focus-visible { color: #fff6e2; text-decoration-color: var(--gold-hi); }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: .02em; }

/* ── Top bar ── */
.top { background: linear-gradient(180deg, rgba(20,21,32,.97), rgba(20,21,32,.9)); border-bottom: 1px solid var(--gold-line); }
.top::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; rotate: 45deg; background: var(--gold); box-shadow: 0 0 8px rgba(255,214,140,.6); }
.home { font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: var(--cream-dim); }
.top nav a, .top nav .menu-btn { font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .04em; color: var(--cream-dim); }
.top nav a:hover, .top nav a[aria-current], .top nav .menu-btn:hover, .top nav .menu.open > .menu-btn, .top nav .menu.cur > .menu-btn { color: var(--gold-hi); border-color: var(--gold); text-shadow: 0 0 12px rgba(255,214,140,.45); }
@media (max-width: 560px) {
  .home { font-size: .85rem; white-space: nowrap; }
  .top nav a, .top nav .menu-btn { font-size: .85rem; padding: .35rem .5rem; }
}
.menu-list { background: rgba(24,26,38,.98); border: 1px solid var(--gold-line); border-radius: 8px; box-shadow: 0 16px 34px rgba(0,0,0,.5); }

/* ── Hero: a banner in an ornate frame ── */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 600; font-size: .9rem; letter-spacing: .1em; color: var(--gold); }
.eyebrow::before, .eyebrow::after { content: '\2726'; font-size: .8em; color: var(--lamp); }
.title { font-family: var(--deco); font-weight: 700; font-size: clamp(2.3rem, 6.6vw, 5.2rem); line-height: 1.04; color: var(--cream); text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 36px rgba(255,199,109,.35); }
.title em { color: var(--gold-hi); background: linear-gradient(180deg, #fff3d6 0%, #f2dcae 45%, #c9a467 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lede { font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--cream-dim); }
.tag { font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .06em; padding: .32rem .85rem; border: 1px solid var(--gold-line); border-radius: 999px; background: rgba(20,21,32,.55); color: var(--cream-dim); }
.tag.hot { background: linear-gradient(180deg, #f2dcae, #c9a467); border-color: var(--gold-hi); color: #3a2d1e; }
.hero-art { transform: none; padding: 6px; background: #12131c; border: 1px solid var(--gold); border-radius: 10px; outline: 1px solid var(--gold-line); outline-offset: 6px; box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 80px rgba(255,199,109,.16); }

/* A line of dialogue, the way an RPG shows one: a name in gold, the words, and a little arrow to carry on. */
.say { position: relative; margin: 1.8rem 0 0; padding: .9rem 1.6rem 1.5rem; text-align: center; max-width: 34rem;
  background: linear-gradient(90deg, transparent, rgba(10,10,16,.78) 14%, rgba(10,10,16,.78) 86%, transparent); }
.say b { display: block; margin-bottom: .3rem; font-family: var(--display); font-size: 1.05rem; letter-spacing: .06em; color: var(--lamp); }
.say b::after { content: ''; display: block; width: 7rem; height: 1px; margin: .3rem auto 0; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.say span { display: block; color: #f6f0e4; font-size: 1.1rem; }
.say::after { content: ''; position: absolute; left: 50%; bottom: .45rem; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--gold-hi); border-bottom: 0; }

/* ── Buttons: round pills with a ring, like an RPG's confirm button ── */
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.5rem .55rem .65rem; font: 700 1.02rem/1.2 var(--body); letter-spacing: .01em;
  color: var(--slate); background: var(--cream); border: 0; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: box-shadow .2s, background-color .2s; }
.btn::before { content: ''; flex: none; width: 1.35em; height: 1.35em; border-radius: 50%; border: .22em solid #dba642; box-sizing: border-box; }
.btn:hover, .btn:focus-visible { color: var(--slate); background: #fff8ea; box-shadow: 0 0 0 3px rgba(255,231,179,.55), 0 0 22px rgba(255,214,140,.45); }
.btn.quiet { color: var(--cream); background: rgba(59,66,85,.85); box-shadow: inset 0 0 0 1px var(--gold-line), 0 4px 14px rgba(0,0,0,.35); }
.btn.quiet::before { border-color: var(--cream-dim); }
.btn.quiet:hover, .btn.quiet:focus-visible { color: #fff; background: rgba(74,83,102,.95); box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 0 3px rgba(255,231,179,.35), 0 0 22px rgba(255,214,140,.3); }

/* ── Sections: centred titles with a gold flourish, a starred rule between them ── */
section + section { border-top: 0; background: linear-gradient(90deg, transparent 10%, var(--gold-line) 44%, transparent 47.5%, transparent 52.5%, var(--gold-line) 56%, transparent 90%) 50% 0 / 100% 1px no-repeat; }
section + section::before { background: none; color: var(--gold); }
.sec-head { flex-direction: column; align-items: center; text-align: center; gap: .35rem; margin-bottom: 2rem; }
.sec-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.45rem); color: var(--cream); text-shadow: 0 0 22px rgba(255,199,109,.22); }
.sec-head h2::after { content: ''; display: block; width: 240px; max-width: 70vw; height: 14px; margin: .55rem auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14'%3E%3Cpath d='M4 7h96M140 7h96' stroke='%23d3bc8e' stroke-opacity='.7'/%3E%3Cpath d='M120 1l6 6-6 6-6-6z' fill='%23f2dcae'/%3E%3Cpath d='M104 7l4-3 4 3-4 3zM128 7l4-3 4 3-4 3z' fill='%23d3bc8e' fill-opacity='.75'/%3E%3C/svg%3E") center / contain no-repeat; }
.sec-head span { font-family: var(--body); font-style: italic; font-size: 1rem; color: var(--cream-faint); }
.lead { font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1.3; color: var(--gold-hi); }
.drop::first-letter { font-family: var(--deco); font-weight: 700; font-size: 3em; color: var(--gold); }
ul.list li::before { content: '\25C6'; font-size: .7em; top: .45em; color: var(--gold); }

/* ── The quest board: character cards on the tavern wall ── */
.board { border: 1px solid var(--gold-line); outline: 0; border-radius: 14px;
  background: repeating-linear-gradient(90deg, transparent 0 140px, rgba(0,0,0,.18) 140px 142px), linear-gradient(180deg, #3a2a20, #2a1f19);
  box-shadow: inset 0 0 0 6px rgba(16,12,10,.45), inset 0 0 0 7px var(--gold-faint), inset 0 0 70px rgba(0,0,0,.55), 0 24px 50px rgba(0,0,0,.45); }
/* Two cards to a row on wide screens, so the words get a proper column beside each character. */
.notes { gap: 1.8rem 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }
.note, .note:nth-child(odd), .note:nth-child(even), .note:nth-child(3n) { transform: none; }
.note { color: var(--cream); border: 1px solid rgba(242,220,174,.55); border-radius: 10px; padding: 1.4rem 1.2rem 1.15rem;
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.2), inset 0 0 0 5px rgba(242,220,174,.2), 0 14px 30px rgba(0,0,0,.5); }
.note.art { background: var(--five); }
.note.beast { background: var(--four); }
/* A gem at the top instead of a pin. */
.note::before { top: -8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 2px; rotate: 45deg; background: linear-gradient(135deg, #fff3d6, #c9a467); box-shadow: 0 0 10px rgba(255,214,140,.7); }
.note.beast::before { background: linear-gradient(135deg, #f1e6ff, #9c7ad6); box-shadow: 0 0 10px rgba(190,150,255,.7); }
.note h3 { font-size: 1.4rem; color: #fff6e2; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.note h3::before { content: '\2605\2605\2605\2605\2605'; display: block; margin-bottom: .3rem; font-family: var(--body); font-size: .85rem; letter-spacing: .12em; color: #ffcc4d; text-shadow: 0 0 8px rgba(255,190,60,.55); }
.note.beast h3::before { content: '\2605\2605\2605\2605'; }
.note .role { font-family: var(--body); font-weight: 700; font-size: .85rem; letter-spacing: .02em; color: var(--gold-hi); }
.note p { font-size: 1rem; line-height: 1.5; }
.note q { color: #fbf4e6; background: rgba(0,0,0,.22); border-left: 2px solid rgba(242,220,174,.55); border-radius: 0 6px 6px 0; padding: .5rem .75rem; }
.note.art { gap: 1rem; align-items: start; }
.note.art > div { align-self: start; }
.note.art img.portrait { align-self: end; width: clamp(120px, 13vw, 160px); filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.note.art img.portrait.half { width: clamp(150px, 16vw, 200px); }
.note.beast img.creature { height: 210px; }
/* On a phone there's no room beside the character, so they stand at the top of the card, like the creatures. */
@media (max-width: 560px) {
  .note.art { grid-template-columns: 1fr; gap: .4rem; }
  .note.art img.portrait, .note.art img.portrait.half { order: -1; justify-self: center; width: auto; max-width: 100%; height: 210px; margin: -.3rem 0 .4rem; }
}
.sketch, .sketch:nth-child(odd), .sketch:nth-child(even) { transform: none; }
.sketch { background: var(--cream); border: 1px solid var(--gold); border-radius: 10px; padding: .6rem .6rem 0; box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 5px rgba(169,119,58,.35), 0 14px 30px rgba(0,0,0,.5); }
.sketch::before, .sketch::after { content: none; }
.sketch figure { margin: 0; }
.sketch img { border-radius: 6px; }
.sketch:hover, .sketch:focus-visible { transform: translateY(-4px); outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.sketch figcaption { font-family: var(--body); font-size: .95rem; color: var(--slate-ink); }
.sketch figcaption b { color: var(--slate); }
.board-credit { font-family: var(--body); color: var(--cream-dim); }
.board-credit b { color: var(--gold-hi); }

/* ── Video and captures in gold frames ── */
.video, .slides-stage { border: 1px solid var(--gold); outline: 1px solid var(--gold-line); outline-offset: 5px; border-radius: 8px; overflow: hidden; background: #12131c; }
.slides:not(.ready) .slides-stage a { border: 1px solid var(--gold); border-radius: 8px; overflow: hidden; }
.slide-arrow { width: 2.8rem; height: 2.8rem; padding: 0; border-radius: 50%; font: 700 1.3rem/1 var(--body); color: var(--cream); background: rgba(20,21,32,.78); border: 1px solid var(--gold-line); }
.slide-arrow:hover, .slide-arrow:focus-visible { color: #fff; border-color: var(--gold-hi); background: rgba(20,21,32,.95); box-shadow: 0 0 16px rgba(255,214,140,.4); }
.slides-where { font-family: var(--display); font-weight: 700; }
.slides-where b { color: var(--gold-hi); }
.slides-dots { gap: .6rem; }
.slides-dots button { width: .7rem; height: .7rem; rotate: 45deg; border: 1px solid var(--gold-line); background: transparent; }
.slides-dots button[aria-current] { background: var(--gold-hi); border-color: var(--gold-hi); box-shadow: 0 0 10px rgba(255,214,140,.6); }
.lightbox { background: rgba(10,10,16,.94); }
.lightbox img { border: 1px solid var(--gold); border-radius: 8px; }

/* ── Panels: slate with a double gold line ── */
.link, .how > div, .filters, .crew li { background: var(--panel); border: 1px solid var(--gold-line); border-radius: 10px; box-shadow: var(--frame), 0 10px 26px rgba(0,0,0,.35); }
.link, .how > div { position: relative; }
.link::before, .how > div::before { content: ''; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; rotate: 45deg; background: var(--gold); }
.link b, .how b { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--gold-hi); }
.link span, .how p { font-size: 1rem; color: var(--cream-dim); }
.link:hover, .link:focus-visible { border-color: var(--gold-hi); }

/* ── The crew: round portraits in gold rings ── */
.crew-group h3 { justify-content: center; font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .12em; color: var(--gold); }
.crew-group h3::before, .crew-group h3::after { content: ''; flex: 1; height: 1px; max-width: 16rem; }
.crew-group h3::before { background: linear-gradient(90deg, transparent, var(--gold-line)); }
.crew-group h3::after { background: linear-gradient(90deg, var(--gold-line), transparent); }
.crew li { padding: .85rem 1rem; }
.crew img { border-radius: 50%; border: 2px solid var(--gold); outline: 1px solid var(--gold-line); outline-offset: 3px; background: radial-gradient(circle at 50% 30%, #6c529c, #1d1a2e); }
.crew b { font-family: var(--body); font-weight: 800; font-size: 1.08rem; color: var(--cream); }
.crew span { font-family: var(--body); font-size: .9rem; line-height: 1.35; color: #cdb991; }

/* ── Merch on the game page: inventory tiles ── */
.merch a { border: 0; border-radius: 10px; overflow: hidden; background: var(--cream); color: var(--slate); box-shadow: 0 0 0 1px var(--gold-line), 0 10px 24px rgba(0,0,0,.4); }
.merch a:hover, .merch a:focus-visible { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 22px rgba(255,214,140,.35); }
.merch img { background: var(--five); border-bottom: 0; border-radius: 0 0 22px 0; }
.merch b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--slate); }
.merch span { font-family: var(--body); font-weight: 700; color: var(--slate-ink); }
.merch span.gone { color: #8f8a80; }

/* ── The shop: cream item cards, priced in coin ── */
.product { background: var(--cream); color: var(--slate); border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--gold-line), 0 14px 34px rgba(0,0,0,.45); }
.product img { background: var(--five); border-bottom: 0; border-radius: 0 0 28px 0; }
.product h3 { font-size: 1.35rem; line-height: 1.2; color: var(--slate); }
.product .price { display: flex; align-items: center; gap: .45rem; font: 800 1.55rem/1 var(--body); color: var(--slate); }
.product .price::before { content: ''; flex: none; width: .85em; height: .85em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff1c4, #e2b04a 45%, #a9772d 100%); box-shadow: inset 0 0 0 2px rgba(120,80,20,.45); }
.product .price.gone { font-size: 1.2rem; color: #8f8a80; }
.product .price.gone::before, .product .price:empty::before { content: none; }
.product .about { color: var(--slate-ink); font-size: .98rem; line-height: 1.5; }
.product .more { font-family: var(--body); font-weight: 700; font-size: .95rem; color: var(--gold-deep); text-decoration-color: rgba(169,119,58,.4); }
.product .more:hover { color: var(--slate); }
.product .pick b { font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .1em; color: #8a7a5f; }
.opts button { font: 700 1.02rem/1 var(--body); padding: .6rem 1rem; color: var(--slate); background: #fff9ee; border: 1px solid #d6c9b1; border-radius: 999px; }
.opts button:hover { border-color: var(--slate); }
.opts button[aria-pressed="true"] { color: var(--cream); background: var(--slate); border-color: var(--slate); box-shadow: 0 0 0 2px rgba(211,188,142,.9); }
.opts button[disabled] { color: #a49d90; border-style: dashed; }
.opts button[disabled]:hover { border-color: #d6c9b1; }
.opts button.dim { color: #7a7f8c; border-style: dashed; }
.product .btn { display: flex; justify-content: center; padding: .7rem 1rem; font: 800 1.08rem/1.2 var(--body); color: var(--cream); background: linear-gradient(180deg, var(--slate-2), var(--slate)); }
.product .btn::before { border-color: #e5b54f; }
.product .btn:hover, .product .btn:focus-visible { color: #fff; background: linear-gradient(180deg, #56607a, var(--slate)); }
.product .msg { color: #9c5b2e; }

/* ── Shop filters: tabs that light up when chosen ── */
.filters { padding: 1.1rem 1.3rem; }
.frow > b { font-family: var(--display); font-weight: 700; font-size: .9rem; letter-spacing: .1em; color: var(--gold); }
.chips button { font: 700 .98rem/1 var(--body); padding: .5rem .9rem; color: var(--cream); background: rgba(236,229,216,.06); border: 1px solid var(--gold-line); border-radius: 999px; }
.chips button:hover { border-color: var(--gold-hi); }
.chips button[aria-pressed="true"] { color: var(--slate); background: var(--cream); border-color: var(--cream); box-shadow: 0 0 0 3px rgba(242,220,174,.22), 0 0 14px rgba(255,214,140,.3); }
.fcount { font-family: var(--body); }
.fclear { font-family: var(--body); font-weight: 700; color: var(--gold-hi); }
.empty { border: 1px dashed var(--gold-line); border-radius: 10px; color: var(--cream-dim); }

/* ── Footer ── */
footer { border-top: 1px solid var(--gold-line); background: rgba(12,12,20,.55); color: var(--cream-faint); font-size: .98rem; }