:root{
  --bg-primary:#070807;--bg-secondary:#0d0e0c;--bg-deep:#050605;
  --surface:#12130f;--surface-light:#191a15;--surface-glass:rgba(20,19,15,.88);
  --wood-dark:#24160f;--wood:#3a2416;--wood-light:#604025;
  --gold:#c89a52;--gold-light:#e6c27a;--gold-dark:#806033;
  --candle:#ffb84d;--candle-soft:#e48a32;--ghost:#8fafa7;--ghost-light:#b9d8d0;
  --magic:#704b87;--magic-light:#9a6db5;--text-primary:#f1e8d7;
  --text-secondary:#b9ae9d;--text-muted:#7f786d;--border:rgba(200,154,82,.38);
  --primary:var(--gold);--primary-hover:var(--gold-light);--text:var(--text-primary);
  --text-muted-base:var(--text-muted);--vip:var(--gold-light);--card-radius:16px;
  --button-radius:13px;--chip-radius:11px;color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
html{background:var(--bg-deep);scrollbar-color:var(--gold-dark) var(--bg-deep)}
body{background:radial-gradient(circle at 88% 5%,rgba(112,75,135,.16),transparent 24%),radial-gradient(circle at 8% 30%,rgba(255,184,77,.07),transparent 27%),linear-gradient(180deg,var(--bg-primary),var(--bg-secondary) 52%,var(--bg-deep));background-attachment:fixed;color:var(--text-primary);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.18;background-image:linear-gradient(90deg,transparent 0 49%,rgba(230,194,122,.018) 50%,transparent 51%),repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 5px);background-size:96px 100%,100% 5px}
body:after{content:"";position:fixed;left:-15%;right:-15%;bottom:-18%;height:48%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,rgba(143,175,167,.08),transparent 65%);animation:innMist 20s ease-in-out infinite alternate}
@keyframes innMist{to{transform:translate3d(5%,0,0);opacity:.6}}@keyframes candleFlicker{0%,100%{filter:brightness(1)}45%{filter:brightness(1.12)}52%{filter:brightness(.92)}70%{filter:brightness(1.06)}}
h1,h2,.brand-copy b,.detail-copy h1,.genre-tile b{font-family:Georgia,"Times New Roman",serif}
.topbar{background:linear-gradient(180deg,rgba(18,12,8,.97),rgba(8,8,7,.94));border-bottom:1px solid var(--gold-dark);box-shadow:0 8px 30px rgba(0,0,0,.5),0 1px 12px rgba(255,184,77,.08);padding-bottom:11px}
.brand{display:flex;align-items:center;gap:10px}.brand-sigil{display:grid;place-items:center;width:37px;height:37px;border:1px solid var(--gold-dark);border-radius:7px;color:var(--gold-light);background:linear-gradient(145deg,var(--wood),#100c09);box-shadow:inset 0 0 9px rgba(255,184,77,.08),0 0 12px rgba(255,184,77,.08)}
.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy b{font-size:18px;color:var(--gold-light);letter-spacing:.01em;text-shadow:0 2px 9px #000}.brand-copy small{font-size:8px;margin-top:5px;color:var(--text-secondary);letter-spacing:.1em}
.icon-btn,.back{background:linear-gradient(145deg,var(--wood-dark),#0c0b09);border-color:var(--gold-dark);color:var(--gold-light);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(230,194,122,.05);transition:.22s}.icon-btn:hover,.back:hover{border-color:var(--candle);box-shadow:0 0 15px rgba(255,184,77,.17)}.icon-btn:active,.back:active{transform:scale(.95)}
.hero{position:relative;overflow:hidden;max-width:900px;padding:46px 24px;background:linear-gradient(145deg,rgba(47,29,18,.9),rgba(11,11,9,.97));border:1px solid var(--gold-dark);border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.52),inset 0 0 45px rgba(255,184,77,.035)}
.hero:before{content:"";position:absolute;inset:-60% 20% 55%;background:radial-gradient(circle,rgba(255,184,77,.24),transparent 68%);pointer-events:none;animation:candleFlicker 5s ease-in-out infinite}.hero:after{content:"";position:absolute;inset:auto 12% 0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-light),transparent);box-shadow:0 0 12px rgba(255,184,77,.5)}
.hero-icon{display:inline-grid;place-items:center;width:64px;height:64px;font-size:31px;color:var(--candle);border:1px solid var(--gold-dark);border-radius:50%;background:radial-gradient(circle,rgba(255,184,77,.18),rgba(36,22,15,.95) 70%);text-shadow:0 0 16px rgba(255,184,77,.48);box-shadow:0 0 26px rgba(255,184,77,.1)}
.eyebrow{color:var(--gold);letter-spacing:.18em;text-shadow:0 0 10px rgba(255,184,77,.16)}.hero h1,.page-head h1,.detail-copy h1{color:var(--gold-light);text-shadow:0 3px 14px #000}.hero>p:not(.eyebrow),.page-subtitle{color:var(--text-secondary)}
.btn{transition:transform .2s,box-shadow .22s,border-color .22s,filter .22s}.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.975)}
.primary{color:#1a1009;background:linear-gradient(135deg,var(--gold-dark),var(--gold-light));border-color:var(--candle);box-shadow:0 9px 28px rgba(255,184,77,.17),inset 0 1px rgba(255,255,255,.25)}.primary:hover{background:linear-gradient(135deg,var(--gold),#f3cf87)}
.action-grid .btn{background:linear-gradient(145deg,rgba(58,36,22,.8),rgba(12,11,9,.95));border-color:rgba(200,154,82,.32);color:var(--text-secondary)}.action-grid .btn:hover{color:var(--gold-light);border-color:var(--gold);box-shadow:0 0 17px rgba(255,184,77,.1)}.action-grid .trending,.action-grid .rated{color:var(--candle)}.action-grid .vip{color:#c29bd3}.action-grid .like{color:#d39b91}.action-grid .new{color:#b5c998}
.page-head{margin-top:8px;align-items:center}.page-head h1{font-size:clamp(30px,7vw,49px);line-height:1;margin-bottom:4px}.page-subtitle{margin:0;font-size:13px}
.search-wrap{background:linear-gradient(145deg,rgba(49,30,19,.72),rgba(11,11,9,.96));border:1px solid var(--gold-dark);border-radius:13px;box-shadow:inset 0 0 18px rgba(0,0,0,.25),0 9px 25px rgba(0,0,0,.3);transition:.22s}.search-wrap>span{color:var(--gold-light);font-size:22px;text-shadow:0 0 10px rgba(255,184,77,.28)}.search-wrap:focus-within{border-color:var(--candle);box-shadow:0 0 0 2px rgba(200,154,82,.13),0 0 21px rgba(255,184,77,.12)}.search-wrap input{font-size:16px;color:var(--text-primary)}.search-wrap input::placeholder{color:#938979}.search-wrap button{color:var(--text-secondary);cursor:pointer}
.chips,.alphabet{scrollbar-width:none;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}.chips::-webkit-scrollbar,.alphabet::-webkit-scrollbar{display:none}
.chip,.alphabet button{min-height:42px;scroll-snap-align:start;background:linear-gradient(145deg,rgba(54,33,20,.75),rgba(12,11,9,.95));border:1px solid rgba(128,96,51,.72);border-radius:10px;color:var(--text-secondary);box-shadow:inset 0 0 7px rgba(0,0,0,.28);transition:.2s}.chip:hover,.alphabet button:hover{color:var(--gold-light);border-color:var(--gold)}
.chip.active,.alphabet button.active{color:#1a1009;background:linear-gradient(145deg,var(--gold),var(--gold-light));border-color:var(--candle);box-shadow:0 0 15px rgba(255,184,77,.18),inset 0 1px rgba(255,255,255,.22)}
.chip.vip-chip{color:#d1addf;border-color:rgba(154,109,181,.65);background:linear-gradient(135deg,rgba(112,75,135,.35),rgba(34,21,30,.92))}.chip.vip-chip.active{color:#f2e9f5;background:linear-gradient(135deg,var(--magic),#392342);border-color:var(--gold);box-shadow:0 0 15px rgba(154,109,181,.25)}
.story-card{position:relative;background:linear-gradient(155deg,rgba(42,27,18,.9),rgba(9,9,7,.98));border-color:rgba(128,96,51,.62);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 0 0 1px rgba(230,194,122,.025);transition:.23s}.story-card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(130deg,rgba(230,194,122,.08),transparent 17%,transparent 82%,rgba(112,75,135,.06))}.story-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 20px 42px rgba(0,0,0,.6),0 0 17px rgba(255,184,77,.1)}.story-card:active{transform:scale(.977)}
.cover:after{content:"";position:absolute;inset:auto 0 0;height:23%;background:linear-gradient(transparent,rgba(5,6,5,.68));pointer-events:none}.badge{z-index:2;color:#2a1709;background:linear-gradient(135deg,var(--gold),var(--gold-light));border:1px solid #f0d398;box-shadow:0 3px 14px rgba(0,0,0,.35)}.badge.vip{color:#f4e9f7;background:linear-gradient(135deg,var(--magic),#35203d);border-color:var(--gold);box-shadow:0 0 13px rgba(154,109,181,.25)}
.card-body{position:relative;z-index:2;border-top:1px solid rgba(200,154,82,.18)}.card-body h3{color:var(--text-primary);font-family:Georgia,"Times New Roman",serif;font-weight:700}.card-body p,.meta{color:var(--text-secondary)}.meta+.meta{margin-top:7px;color:var(--text-muted)}
.detail-cover{border:1px solid var(--gold-dark);box-shadow:0 25px 55px rgba(0,0,0,.58),0 0 19px rgba(255,184,77,.08)}.detail-copy .author,.detail-copy .description{color:var(--text-secondary)}.detail-copy .description:before{content:"📖 About This Tale";display:block;color:var(--gold-light);font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:700;margin-bottom:12px}
.genre-tile,.panel{background:linear-gradient(145deg,rgba(50,31,19,.82),rgba(10,10,8,.97));border-color:var(--gold-dark);box-shadow:0 12px 28px rgba(0,0,0,.36)}.genre-tile{transition:.2s}.genre-tile:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(255,184,77,.1)}select,textarea{background:#12130f;border-color:var(--gold-dark);color:var(--text-primary)}.danger{background:linear-gradient(135deg,#5d2920,#984332)}
.empty{color:var(--text-secondary)}.empty:before{content:"♧";display:block;color:var(--ghost);font-size:31px;margin-bottom:10px;opacity:.66;text-shadow:0 0 14px rgba(143,175,167,.24)}.skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg,#12130f,#282119,#12130f);background-size:200%}.skeleton:after{content:"";position:absolute;left:50%;top:50%;width:16px;height:23px;border:1px solid var(--ghost);border-radius:50% 50% 42% 42%;opacity:.22;box-shadow:0 0 15px rgba(143,175,167,.25);animation:ghostDrift 2.8s ease-in-out infinite}@keyframes ghostDrift{50%{transform:translate(8px,-8px);opacity:.42}}
.bottom-nav{background:linear-gradient(180deg,rgba(32,21,14,.93),rgba(7,7,6,.98));border-top-color:var(--gold-dark);box-shadow:0 -14px 34px rgba(0,0,0,.5);backdrop-filter:blur(18px)}.bottom-nav button{min-height:54px;color:var(--text-muted);transition:.2s}.bottom-nav button:hover,.bottom-nav button.is-active{color:var(--gold-light);text-shadow:0 0 10px rgba(255,184,77,.25);transform:translateY(-2px)}.bottom-nav button.is-active span{color:var(--candle)}
.toast{background:rgba(36,25,17,.97);border-color:var(--gold-dark);box-shadow:0 0 17px rgba(255,184,77,.1)}
@media(max-width:650px){main{padding:15px 14px}.hero{padding:35px 18px;border-radius:16px}.hero h1{font-size:clamp(34px,11vw,50px)}.story-grid{gap:10px}.story-card{border-radius:13px}.card-body h3{font-size:14px}.chips,.alphabet{margin-inline:-14px;padding-inline:14px}.brand-copy b{font-size:16px}.brand-copy small{letter-spacing:.04em}}
@media(max-width:340px){.story-grid{grid-template-columns:1fr}.card-body h3{font-size:16px}.brand-copy small{display:none}}
@media(min-width:900px){.bottom-nav{background:rgba(20,14,10,.96);border-color:var(--gold-dark);box-shadow:0 -10px 35px rgba(0,0,0,.42)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* The Listening Inn immersive visual system — presentation only. */
:root{
  --bg-primary:#060605;--bg-secondary:#0b0907;--bg-elevated:#12100c;
  --wood-dark:#1b1009;--wood:#322015;--wood-light:#54351f;
  --gold-dark:#745126;--gold:#c49145;--gold-light:#e8c477;
  --candle:#ffad3d;--candle-light:#ffd28a;--parchment:#e9d5aa;
  --parchment-light:#f4e7cb;--ghost:#8cb7c2;--ghost-light:#c1e0e5;
  --magic-purple:#6f3b88;--magic-purple-light:#a35fc5;
  --text-primary:#f3e8d1;--text-secondary:#bcae98;--text-muted:#817668;
}
body{background:radial-gradient(ellipse 70% 34% at 18% 4%,rgba(116,63,23,.17),transparent 70%),radial-gradient(ellipse 52% 34% at 100% 28%,rgba(89,50,112,.15),transparent 68%),linear-gradient(180deg,#050504,#0c0906 42%,#050403 100%);background-attachment:fixed}
body:before{opacity:.38;background-image:repeating-linear-gradient(92deg,rgba(255,211,135,.018) 0 1px,transparent 1px 46px),repeating-linear-gradient(3deg,transparent 0 19px,rgba(0,0,0,.16) 20px),radial-gradient(circle at 18% 20%,rgba(255,194,95,.06),transparent 22%);background-size:auto}
body:after{left:-28%;right:-28%;bottom:-10%;height:55%;background:radial-gradient(ellipse,rgba(134,177,187,.09),transparent 58%);filter:blur(16px)}

.inn-splash{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;justify-items:center;text-align:center;padding:28px;background:linear-gradient(rgba(4,3,2,.18),rgba(4,3,2,.78)),url('/static/listening-inn-hero.png') center/cover no-repeat;animation:splashAway .75s ease 1.75s forwards}
.inn-splash:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,transparent,rgba(0,0,0,.72) 82%)}
.inn-splash>*{position:relative}.inn-splash strong{font:800 clamp(38px,12vw,76px)/.95 Georgia,"Times New Roman",serif;color:var(--gold-light);text-shadow:0 3px 0 #3a1d08,0 0 24px rgba(255,168,50,.4)}.inn-splash>span{margin:14px 0 28px;color:var(--parchment);letter-spacing:.08em;font-size:11px}.splash-candle{font-size:42px;color:var(--candle);filter:drop-shadow(0 0 16px #ff8617);animation:candleFlicker 1.5s infinite}.splash-progress{width:min(260px,72vw);height:8px;border:1px solid var(--gold);border-radius:8px;padding:2px;background:#090603;box-shadow:0 0 14px rgba(255,173,61,.2)}.splash-progress i{display:block;width:82%;height:100%;border-radius:4px;background:linear-gradient(90deg,#6e3e17,var(--candle-light));box-shadow:0 0 10px var(--candle)}.inn-splash small{margin-top:11px;color:var(--parchment)}
@keyframes splashAway{to{opacity:0;visibility:hidden;pointer-events:none}}

.topbar{min-height:72px;padding-inline:max(15px,calc((100vw - 1180px)/2));background:linear-gradient(180deg,rgba(23,13,7,.98),rgba(7,5,3,.96));border-bottom:1px solid #8c5b26;box-shadow:inset 0 -1px rgba(255,211,131,.08),0 10px 35px rgba(0,0,0,.72),0 2px 15px rgba(255,142,28,.1)}
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:linear-gradient(90deg,transparent,#7a4a1d 20%,#e9b85f 50%,#7a4a1d 80%,transparent);opacity:.7}
.brand-sigil{width:41px;height:41px;border-radius:50% 50% 45% 45%;font-size:21px;background:radial-gradient(circle at 50% 28%,#5b3920,#130c07 70%);border-color:#b07a36;box-shadow:inset 0 1px #eac67f,inset 0 -8px 14px #0a0502,0 0 15px rgba(255,167,49,.16)}
.brand-copy b{font-size:21px;letter-spacing:-.025em;color:var(--gold-light);text-shadow:0 2px 0 #281305,0 0 17px rgba(255,177,57,.28)}.brand-copy small{font-size:7px;letter-spacing:.08em;color:#c6a875}

main{max-width:1180px}.inn-wordmark{text-align:center;margin:7px 0 13px;padding:10px 10px 12px;position:relative;background:linear-gradient(90deg,transparent,rgba(80,43,20,.2),transparent)}.inn-wordmark:after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#d39943,transparent)}.inn-wordmark span{display:block;font:italic 15px Georgia,serif;color:var(--parchment)}.inn-wordmark strong{display:block;font:800 clamp(39px,10vw,68px)/.82 Georgia,"Times New Roman",serif;color:var(--gold-light);letter-spacing:-.05em;text-shadow:0 3px 0 #321907,0 0 20px rgba(255,171,44,.23)}.inn-wordmark small{display:block;margin-top:12px;color:#c8a66b;font-size:9px;letter-spacing:.09em;text-transform:uppercase}
.home-search{display:flex;align-items:center;gap:12px;width:100%;min-height:55px;margin:0 0 12px;padding:0 18px;text-align:left;border:1px solid #9f6930;border-radius:12px;color:#c7b79e;background:linear-gradient(145deg,rgba(37,23,14,.96),rgba(8,7,5,.99));box-shadow:inset 0 1px rgba(248,215,153,.1),inset 0 -10px 22px rgba(0,0,0,.28),0 8px 22px rgba(0,0,0,.5),0 0 13px rgba(255,168,49,.08);cursor:pointer}.home-search span{font-size:23px;color:var(--gold-light);text-shadow:0 0 11px rgba(255,173,61,.35)}
.inn-hero{max-width:none;margin:0 0 14px;padding:0;min-height:330px;border-radius:15px;border:1px solid transparent;background:linear-gradient(#0b0805,#0b0805) padding-box,linear-gradient(135deg,#edc578,#60401f 45%,#bd7730 100%) border-box;box-shadow:inset 0 0 0 2px rgba(37,20,10,.9),0 19px 39px rgba(0,0,0,.7),0 0 19px rgba(255,159,38,.09)}.inn-hero:before,.inn-hero:after{display:none}.inn-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;filter:saturate(.92) contrast(1.04)}.hero-vignette{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,4,2,.12) 53%,rgba(5,3,2,.93) 100%),linear-gradient(90deg,rgba(0,0,0,.18),transparent 28% 72%,rgba(0,0,0,.15))}
.welcome-scroll{position:absolute;left:8%;right:8%;bottom:14px;z-index:3;padding:12px 24px;color:#2a170b;background:linear-gradient(110deg,#b7894b,#ecd39e 18%,#d2ad6a 72%,#916333);clip-path:polygon(3% 0,97% 0,100% 20%,97% 50%,100% 80%,97% 100%,3% 100%,0 80%,3% 50%,0 20%);box-shadow:0 8px 24px rgba(0,0,0,.58),0 0 15px rgba(255,177,55,.25)}.welcome-scroll .eyebrow{margin:0;color:#2d1808;font:800 19px Georgia,serif;letter-spacing:.03em;text-shadow:none}.welcome-scroll h1{margin:2px 0;font-size:28px;color:#2a1407;background:none;-webkit-text-fill-color:initial;text-shadow:none}.welcome-scroll p:last-child{margin:0;color:#4b2b15;font:600 12px Georgia,serif}
.inn-plaques{grid-template-columns:repeat(4,1fr);gap:8px;margin:11px 0 26px}.inn-plaques .btn{min-height:59px;padding:9px 6px;border-radius:9px;font-size:12px;background:linear-gradient(145deg,#3b2415,#120c08 72%);border:1px solid #8c602e;color:var(--parchment);box-shadow:inset 0 1px rgba(255,223,164,.1),inset 0 -8px 15px rgba(0,0,0,.3),0 6px 14px rgba(0,0,0,.45)}.inn-plaques .btn:hover{border-color:var(--candle-light);color:var(--gold-light);box-shadow:inset 0 1px rgba(255,231,182,.18),0 0 16px rgba(255,173,61,.18)}.inn-plaques .vip{background:linear-gradient(145deg,#4f2b5e,#180e1b 72%);border-color:#a87b47}

.section{position:relative}.section:before{content:"";position:absolute;left:-6px;top:17px;width:3px;height:32px;border-radius:4px;background:var(--candle);box-shadow:0 0 14px rgba(255,173,61,.65)}.section h2{font:700 25px Georgia,serif;color:var(--gold-light);text-shadow:0 2px 10px #000}.section-head{padding-left:9px}.section-head .chip{min-height:35px}
.library-canopy{position:relative;height:86px;margin:-15px -14px 18px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(rgba(8,5,3,.28),rgba(6,4,2,.9)),url('/static/listening-inn-hero.png') center 42%/cover;border-bottom:1px solid #9e6c32;box-shadow:0 10px 25px rgba(0,0,0,.55)}.library-canopy p{font:800 clamp(24px,7vw,39px) Georgia,serif;color:var(--gold-light);text-shadow:0 3px 2px #1f0d03,0 0 15px rgba(255,171,49,.24)}.spectral-guest{position:absolute;right:6%;bottom:-7px;color:var(--ghost-light);font-size:44px;opacity:.28;text-shadow:0 0 16px rgba(140,183,194,.65)}
.page-head h1{font-size:clamp(34px,9vw,54px);color:var(--gold-light);text-shadow:0 3px 0 #271306,0 0 15px rgba(255,177,54,.12)}.page-head .eyebrow{font-size:10px;letter-spacing:.22em}.back,.icon-btn{border-radius:9px;background:linear-gradient(145deg,#3b2414,#0d0906);border-color:#93642e;box-shadow:inset 0 1px rgba(255,223,158,.09),0 7px 15px rgba(0,0,0,.4)}
.search-wrap{min-height:58px;border:1px solid transparent;border-radius:12px;background:linear-gradient(145deg,#27180f,#0a0806) padding-box,linear-gradient(100deg,#7c5228,#e2b568 45%,#67431f) border-box;box-shadow:inset 0 1px rgba(255,237,199,.08),inset 0 -11px 21px rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.48),0 0 12px rgba(255,173,61,.08)}.search-wrap:focus-within{border-color:transparent;box-shadow:inset 0 1px rgba(255,237,199,.15),0 0 0 2px rgba(255,190,79,.12),0 0 21px rgba(255,173,61,.2)}
.chip,.alphabet button{border-radius:9px;border-color:#765027;background:linear-gradient(145deg,#362115,#0f0b07 80%);box-shadow:inset 0 1px rgba(255,225,170,.06),inset 0 -6px 12px rgba(0,0,0,.25),0 5px 11px rgba(0,0,0,.35)}.chip.active,.alphabet button.active{background:linear-gradient(145deg,#f0d18b,#b77a32);border-color:#ffe3a2;color:#241305;box-shadow:inset 0 1px #fff0c8,0 0 17px rgba(255,173,61,.3),0 7px 15px rgba(0,0,0,.45)}.chip.vip-chip{background:linear-gradient(145deg,#563061,#1a101d);border-color:#b08651;color:#e7c77e}
.alphabet button{min-width:43px;height:43px;padding:0 11px;font-family:Georgia,serif;font-size:16px}

.story-grid{gap:13px}.story-card{border:1px solid transparent;border-radius:13px;background:linear-gradient(160deg,#2d1b10,#090806 78%) padding-box,linear-gradient(140deg,#d9a65c,#62411f 48%,#b67b3a) border-box;box-shadow:inset 0 1px rgba(255,226,173,.08),0 15px 29px rgba(0,0,0,.67),-2px 0 11px rgba(255,157,32,.05)}.story-card:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;box-shadow:inset 1px 0 rgba(255,224,165,.12),inset -1px -1px rgba(20,8,2,.8)}.story-card:hover{border-color:transparent;box-shadow:0 20px 37px rgba(0,0,0,.72),0 0 18px rgba(255,173,61,.16)}.cover{border-radius:12px 12px 0 0}.badge{border-radius:7px;background:linear-gradient(145deg,#e3b967,#9e6227);color:#241205;border:1px solid #ffe1a2;box-shadow:inset 0 1px #fff0c9,0 4px 12px rgba(0,0,0,.5)}.badge.vip{background:linear-gradient(145deg,#633975,#27152e);color:#f5d98f;border-color:#d6a75c;box-shadow:0 0 14px rgba(151,86,181,.35),0 4px 12px rgba(0,0,0,.5)}.card-body{padding:11px 10px;background:linear-gradient(160deg,rgba(42,25,15,.98),rgba(9,8,6,.99));border-top-color:#765027}.card-body h3{font-size:15px;color:var(--parchment-light)}.card-body p{color:#b8a58d}.meta{padding-top:7px;border-top:1px solid rgba(196,145,69,.12);font-size:10px}
.detail-hero{position:relative;padding:16px;border:1px solid transparent;border-radius:16px;background:linear-gradient(145deg,rgba(35,22,14,.88),rgba(7,6,4,.96)) padding-box,linear-gradient(120deg,#c18c44,#55371a) border-box;box-shadow:0 18px 44px rgba(0,0,0,.58)}.detail-copy h1{font-family:Georgia,serif;color:var(--gold-light)}.detail-copy .description{border-top-color:#75502a;line-height:1.7}.detail-copy .description:before{content:"⭐ About This Tale";text-transform:uppercase;letter-spacing:.04em}.detail-actions .btn{border-color:#81582d;background:linear-gradient(145deg,#3b2415,#120c08)}.detail-actions .primary{color:#251307;background:linear-gradient(145deg,#efcc83,#ad702c)}
.genre-tile,.panel{border:1px solid transparent;background:linear-gradient(145deg,#302015,#0b0906) padding-box,linear-gradient(130deg,#9e6c34,#4c3219) border-box;box-shadow:inset 0 1px rgba(255,232,187,.06),0 13px 26px rgba(0,0,0,.5)}
.empty{min-height:190px;display:grid;place-content:center;padding:45px 20px;color:var(--text-secondary);font-family:Georgia,serif;background:radial-gradient(circle,rgba(113,158,169,.07),transparent 56%)}.empty:before{content:"👻";font-size:49px;filter:grayscale(.45) drop-shadow(0 0 13px rgba(140,183,194,.35));animation:ghostDrift 4s ease-in-out infinite}.skeleton:before{content:"Searching the shelves…";position:absolute;left:0;right:0;bottom:24px;text-align:center;color:#b9a98f;font:italic 13px Georgia,serif}
.bottom-nav{left:9px;right:9px;bottom:8px;border:1px solid transparent;border-radius:17px;padding:8px 5px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(39,25,16,.94),rgba(6,5,3,.99)) padding-box,linear-gradient(100deg,#765027,#dfb368 50%,#65421e) border-box;box-shadow:inset 0 1px rgba(255,231,184,.08),0 17px 37px rgba(0,0,0,.75),0 0 15px rgba(255,163,36,.08);backdrop-filter:blur(18px)}.bottom-nav button{position:relative;font-size:20px}.bottom-nav button.is-active{color:var(--gold-light);text-shadow:0 0 12px rgba(255,173,61,.42)}.bottom-nav button.is-active:after{content:"";position:absolute;left:35%;right:35%;bottom:-2px;height:2px;background:var(--candle-light);box-shadow:0 0 8px var(--candle)}
@media(max-width:650px){body{padding-bottom:104px}main{padding:15px 13px}.inn-hero{min-height:315px}.inn-hero>img{object-position:center 46%}.welcome-scroll{left:5%;right:5%;padding:10px 18px}.welcome-scroll h1{font-size:23px}.inn-plaques{grid-template-columns:repeat(4,minmax(0,1fr))}.inn-plaques .btn{font-size:10px}.library-canopy{margin-inline:-13px}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.card-body h3{font-size:13px}.bottom-nav{min-height:71px}.brand-copy small{max-width:210px}}
@media(max-width:370px){.inn-wordmark strong{font-size:35px}.inn-wordmark small{font-size:7px}.inn-hero{min-height:285px}.welcome-scroll .eyebrow{font-size:16px}.inn-plaques{grid-template-columns:repeat(2,1fr)}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-body{padding:9px 8px}.card-body h3{font-size:12px}.brand-copy small{display:none}}
@media(min-width:651px){.library-canopy{margin:0 0 24px;border:1px solid #855a2b;border-radius:16px}.inn-hero{min-height:470px}.bottom-nav{max-width:560px;left:50%;right:auto;width:calc(100% - 18px);transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.inn-splash{animation-duration:.01ms!important;animation-delay:.01ms!important}}
.status-badge{position:absolute;z-index:2;left:8px;bottom:8px;padding:4px 7px;border:1px solid rgba(234,196,119,.65);border-radius:7px;background:rgba(18,12,7,.9);color:#eed39c;font:700 9px/1 system-ui,sans-serif;box-shadow:0 4px 10px rgba(0,0,0,.48);backdrop-filter:blur(5px)}
.empty strong{display:block;color:var(--ghost-light);font-size:19px}.empty span{display:block;margin-top:7px;color:var(--text-secondary);font-size:13px}

/* Persisted global Innkeeper themes. Values come from the server-approved manifest. */
html[data-inn-theme] body{background-color:var(--theme-bg-a);background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.56)),var(--theme-background),linear-gradient(155deg,var(--theme-bg-a),var(--theme-bg-b));background-size:auto,cover,auto;background-attachment:fixed;color:var(--theme-ink)}
html[data-inn-theme] .topbar,html[data-inn-theme] .bottom-nav{border-color:var(--theme-accent);box-shadow:inset 0 1px rgba(255,255,255,.06),0 15px 34px rgba(0,0,0,.7),0 0 15px color-mix(in srgb,var(--theme-accent) 25%,transparent)}
html[data-inn-theme] .inn-hero{background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.7)),var(--theme-background);background-size:cover;background-position:center}
html[data-inn-theme]:not([data-inn-theme="cozy-tavern"]) .inn-hero>img{opacity:.2;mix-blend-mode:luminosity}
html[data-inn-theme] .inn-splash{background-image:var(--theme-splash);background-size:cover;background-position:center}
html[data-inn-theme] .inn-splash>*{visibility:hidden}
html[data-inn-theme] .chip.active,html[data-inn-theme] .alphabet button.active,html[data-inn-theme] .primary{background:linear-gradient(145deg,var(--theme-accent),var(--theme-accent-2));border-color:var(--theme-accent);color:var(--theme-bg-a)}
html[data-inn-theme] .page-head h1,html[data-inn-theme] .section h2{color:var(--theme-ink)}
.theme-logo-live{display:block;width:min(100%,430px);height:auto;margin:auto;border-radius:15px;box-shadow:0 12px 28px rgba(0,0,0,.52),0 0 16px color-mix(in srgb,var(--theme-accent) 28%,transparent)}
.inn-wordmark:has(.theme-logo-live)>span,.inn-wordmark:has(.theme-logo-live)>strong,.inn-wordmark:has(.theme-logo-live)>small{display:none}
.theme-nav-icon{display:block;width:27px;height:27px;margin:0 auto 2px}.theme-action-icon{display:block;width:27px;height:27px;margin:0 auto 4px}.bottom-nav button:has(.theme-nav-icon){font-size:0}.bottom-nav button:has(.theme-nav-icon) span{font-size:10px}.inn-plaques .btn:has(.theme-action-icon){font-size:10px}
.theme-status{margin:12px 0 18px;padding:13px 15px;border:1px solid var(--theme-accent,var(--gold));border-radius:12px;background:color-mix(in srgb,var(--theme-surface,#17120d) 90%,transparent);color:var(--theme-ink,var(--parchment));box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.42)}
.theme-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:15px}.theme-card{overflow:hidden;border:1px solid color-mix(in srgb,var(--theme-accent,var(--gold)) 65%,#28180c);border-radius:16px;background:linear-gradient(145deg,var(--theme-surface,#21150d),var(--theme-bg-a,#080604));box-shadow:inset 0 1px rgba(255,255,255,.06),0 15px 30px rgba(0,0,0,.52)}.theme-card.is-current{box-shadow:0 0 0 2px var(--theme-accent,var(--gold)),0 15px 32px rgba(0,0,0,.6)}.theme-card-visual{position:relative;height:220px;overflow:hidden;background:#080604}.theme-card-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(.92) contrast(1.04)}.theme-card-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.88))}.theme-card-logo{position:absolute;z-index:1;left:10px;right:10px;bottom:10px;display:block;width:calc(100% - 20px);height:auto;border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.65)}.theme-card-copy{padding:13px}.theme-card h2{margin:0;color:var(--theme-ink,var(--parchment));font:700 21px Georgia,serif}.theme-card p{margin:5px 0 11px;color:var(--text-secondary);font-size:12px}.theme-icon-sample{display:flex;gap:8px}.theme-icon-sample img{width:36px;height:36px}.theme-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 13px 13px}.theme-card-actions .btn:only-child{grid-column:1/-1}
.theme-screen-previews{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:10px 0 12px;padding:7px;border:1px solid color-mix(in srgb,var(--theme-accent,var(--gold)) 35%,transparent);border-radius:10px;background:rgba(0,0,0,.28);overflow:hidden}.theme-screen-previews img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,.55)}
@media(max-width:650px){.theme-gallery{grid-template-columns:1fr}.theme-card{border-radius:14px}}
.sample-player{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:.9rem 0;padding:.75rem;border:1px solid color-mix(in srgb,var(--theme-accent,var(--gold)) 45%,transparent);border-radius:14px;background:rgba(8,6,4,.72);box-shadow:inset 0 1px rgba(255,255,255,.04)}
.sample-player audio{display:none}.sample-player progress{flex:1 1 140px;height:7px;accent-color:var(--theme-accent,var(--gold))}.sample-toggle{min-height:42px}.sample-player span{font-size:.82rem;color:var(--text-secondary)}.sample-unavailable{font-style:italic}

/* The original Inn uses hand-drawn brass navigation glyphs. Generated rooms
   replace them with their own complete icon families. */
.bottom-nav .nav-glyph{display:grid;place-items:center;width:31px;height:31px;margin:0 auto 2px;border-radius:10px;color:#c99a52;background:radial-gradient(circle at 50% 20%,rgba(255,210,125,.13),transparent 68%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.7))}
.bottom-nav .nav-glyph svg{display:block;width:26px;height:26px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.bottom-nav button.is-active .nav-glyph{color:#ffe09b;background:radial-gradient(circle,rgba(255,174,57,.22),transparent 70%);filter:drop-shadow(0 0 7px rgba(255,174,57,.5))}html[data-inn-theme] .bottom-nav .nav-glyph{display:none}

.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:820px;margin:10px auto 0}.more-card{position:relative;min-height:142px;padding:18px 14px;text-align:left;border:1px solid transparent;border-radius:17px;color:var(--text-primary);background:linear-gradient(145deg,rgba(58,37,23,.96),rgba(12,9,7,.98)) padding-box,linear-gradient(135deg,#6b4526,#d2a45e 48%,#4b301b) border-box;box-shadow:inset 0 1px rgba(255,231,184,.08),inset 0 -22px 35px rgba(0,0,0,.23),0 14px 30px rgba(0,0,0,.52);cursor:pointer;transition:transform .18s,box-shadow .18s}.more-card:active{transform:scale(.975)}.more-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px rgba(255,231,184,.11),0 17px 35px rgba(0,0,0,.62),0 0 15px rgba(255,173,61,.09)}.more-card .more-icon{display:grid;place-items:center;width:43px;height:43px;margin-bottom:14px;border:1px solid #9a6d36;border-radius:13px;color:var(--gold-light);font:700 23px Georgia,serif;background:radial-gradient(circle at 45% 30%,rgba(255,204,117,.17),rgba(22,13,8,.82));box-shadow:inset 0 1px rgba(255,255,255,.08),0 7px 16px rgba(0,0,0,.4)}.more-card strong,.more-card small{display:block}.more-card strong{font:700 20px Georgia,serif;color:var(--parchment-light)}.more-card small{margin-top:6px;color:var(--text-secondary);line-height:1.35}.more-card.themes:after,.more-card.admin:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 88% 12%,rgba(157,81,198,.22),transparent 40%)}.more-card.admin{grid-column:1/-1;min-height:120px;background:linear-gradient(145deg,rgba(49,30,20,.97),rgba(15,9,13,.98)) padding-box,linear-gradient(110deg,#8e6638,#e0b871 50%,#724683) border-box}

.admin-overview{max-width:930px;margin:auto}.admin-welcome{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid #8d632e;border-radius:17px;background:linear-gradient(135deg,rgba(75,47,27,.92),rgba(18,12,9,.96));box-shadow:inset 0 1px rgba(255,231,184,.1),0 14px 32px rgba(0,0,0,.54)}.admin-welcome h2,.admin-welcome p{margin:2px 0}.admin-seal{display:grid;place-items:center;flex:0 0 58px;height:58px;border:1px solid #d5a95c;border-radius:50%;font-size:28px;color:var(--gold-light);background:radial-gradient(circle,#603c20,#130d09 72%);box-shadow:0 0 18px rgba(255,174,57,.18)}.admin-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.admin-metrics article{padding:15px 8px;text-align:center;border:1px solid #634322;border-radius:14px;background:linear-gradient(160deg,rgba(44,29,18,.93),rgba(9,8,6,.96));box-shadow:inset 0 1px rgba(255,234,195,.05)}.admin-metrics strong,.admin-metrics span{display:block}.admin-metrics strong{font:700 25px Georgia,serif;color:var(--gold-light)}.admin-metrics span{margin-top:4px;font-size:11px;color:var(--text-secondary)}
.admin-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.admin-tool-grid button{display:grid;grid-template-columns:42px 1fr;gap:2px 11px;min-height:105px;padding:15px;text-align:left;color:var(--text-primary);border:1px solid #75502a;border-radius:15px;background:linear-gradient(150deg,rgba(50,33,21,.94),rgba(13,10,8,.98));box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.42);cursor:pointer}.admin-tool-grid button>span{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border:1px solid #8e6434;border-radius:12px;color:var(--gold-light);font-size:22px}.admin-tool-grid strong{align-self:end;font:700 17px Georgia,serif}.admin-tool-grid small{color:var(--text-secondary);line-height:1.3}.admin-note{margin-top:13px;padding:14px;border-left:3px solid var(--gold);border-radius:0 12px 12px 0;color:var(--text-secondary);background:rgba(46,30,18,.65);font-size:12px;line-height:1.5}

.admin-search{max-width:760px;margin:0 auto 14px}.member-list{display:grid;gap:9px;max-width:760px;margin:auto}.member-summary{padding:4px 3px 8px;color:var(--text-secondary)}.member-summary strong{color:var(--gold-light);font:700 20px Georgia,serif}.member-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;border:1px solid #694623;border-radius:14px;background:linear-gradient(150deg,rgba(43,29,19,.96),rgba(11,9,7,.98));box-shadow:inset 0 1px rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.35)}.member-avatar{display:grid;place-items:center;width:46px;height:46px;border:1px solid #ae7f43;border-radius:50%;color:var(--parchment-light);font:700 20px Georgia,serif;background:radial-gradient(circle at 35% 25%,#694525,#21150e 70%)}.member-copy{min-width:0}.member-copy strong,.member-copy span,.member-copy small{display:block;overflow:hidden;text-overflow:ellipsis}.member-copy strong{color:var(--parchment-light)}.member-copy span{margin:3px 0;color:var(--text-secondary);font-size:12px;white-space:nowrap}.member-copy small{color:var(--text-muted);font-size:10px}.member-copy i{display:inline-block;margin:0 4px 3px 0;padding:2px 6px;border:1px solid #76522d;border-radius:9px;color:var(--gold-light);font-style:normal;text-transform:capitalize}.member-open{padding:8px 10px;border:1px solid #9a6c36;border-radius:10px;color:var(--gold-light);text-decoration:none;background:#21150e}.member-pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 0}.member-pager .btn{padding:9px 12px}

.theme-status{display:flex;flex-direction:column;gap:5px}.theme-status strong{color:var(--gold-light);font:700 18px Georgia,serif}.original-theme-wordmark{position:absolute;z-index:2;left:16px;right:16px;bottom:18px;text-align:center;text-shadow:0 3px 8px #000}.original-theme-wordmark small,.original-theme-wordmark strong{display:block}.original-theme-wordmark small{color:var(--gold-light);font-size:10px;letter-spacing:.2em}.original-theme-wordmark strong{color:#f4dfb1;font:700 28px Georgia,serif}.original-icon-sample{display:flex;gap:8px}.original-icon-sample span{display:grid;place-items:center;width:36px;height:36px;border:1px solid #8f6535;border-radius:10px;color:var(--gold-light);background:#21150e;font-size:18px}

html[data-inn-theme] .more-card,html[data-inn-theme] .admin-tool-grid button,html[data-inn-theme] .member-card,html[data-inn-theme] .admin-metrics article{border-color:color-mix(in srgb,var(--theme-accent) 58%,#241509);background:linear-gradient(150deg,color-mix(in srgb,var(--theme-surface) 88%,#000),color-mix(in srgb,var(--theme-bg-a) 88%,#000));color:var(--theme-ink)}html[data-inn-theme] .more-card .more-icon,html[data-inn-theme] .admin-tool-grid button>span{border-color:var(--theme-accent);color:var(--theme-accent-2)}
@media(max-width:430px){.more-grid,.admin-tool-grid{grid-template-columns:1fr 1fr}.more-card{min-height:132px;padding:14px 12px}.more-card strong{font-size:17px}.admin-metrics{grid-template-columns:repeat(3,1fr)}.admin-metrics strong{font-size:21px}.admin-tool-grid button{grid-template-columns:36px 1fr;padding:12px;gap:2px 8px}.admin-tool-grid button>span{width:34px;height:34px}.member-card{grid-template-columns:42px minmax(0,1fr) auto;padding:10px}.member-avatar{width:42px;height:42px}.member-open{padding:7px 8px}}