*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#130d0a;color:#f9e8ca;font:17px/1.55 Georgia,serif}
a{color:#ffe1a3}
a:focus-visible,button:focus-visible{outline:3px solid #ffdc91;outline-offset:3px}

.hero,.room-scene{position:relative;max-width:1536px;margin:auto;background:#080604}
.hero>img,.room-scene>img{width:100%;height:auto;display:block}

/* MAIN TAVERN CLICK MAP — invisible over the artwork */
.map-hotspot{position:absolute;z-index:5;display:block;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.map-hotspot:hover{background:transparent}

/* Gargoyle: upper-left stone figure */
.gargoyle-hotspot{left:.6%;top:3.3%;width:10.8%;height:18.2%;border-radius:35%}

/* Back Room: anywhere inside the visible doorway */
.back-room-hotspot{left:66.0%;top:35.0%;width:14.6%;height:31.0%;border-radius:2%}

/* Secret Room: ONLY the glowing triangular sigil */
.secret-hotspot{left:91.05%;top:47.0%;width:3.45%;height:6.6%;border-radius:18%}

/* The gargoyle's Easter-egg speech bubble */
.gargoyle-quips{position:absolute;z-index:8;left:10.3%;top:5.3%;max-width:min(390px,34vw);padding:12px 15px;border:1px solid #8c6b42;border-radius:10px;background:#160f0de8;color:#ffe7b3;box-shadow:0 8px 28px #000a;font-weight:bold;font-style:italic;text-shadow:0 1px 2px #000}
.gargoyle-quips::before{content:"";position:absolute;left:-12px;top:24px;border-width:8px 12px 8px 0;border-style:solid;border-color:transparent #8c6b42 transparent transparent}
.gargoyle-quips[hidden]{display:none}

.intro{text-align:center;padding:22px 18px 30px;background:#21150f}
.intro p{margin:4px auto;max-width:760px}
.room-nav{text-align:center;padding:22px 16px 34px;background:#21150f}
.back{display:inline-block;text-decoration:none;border:1px solid #947348;border-radius:30px;padding:9px 17px;background:#2b1c13}
.back:hover{background:#3a2619}
.footer{text-align:center;padding:20px;color:#cdb899;border-top:1px solid #6a4a2c;background:#130d0a}
.secret-page{background:#080b13}

@media(max-width:650px){
  body{font-size:15px}
  .intro{padding:16px 12px 24px}
  .gargoyle-quips{left:8%;top:21%;max-width:72vw;padding:9px 11px;font-size:12px}
  .gargoyle-quips::before{display:none}
}

/* BACK ROOM CLICK MAP — invisible over the approved artwork */
.back-room-scene .room-hotspot{position:absolute;z-index:5;display:block;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:4px}
.back-room-scene .room-hotspot:hover{background:transparent}
/* Four titled volumes on the upper-left shelf */
.book-qiretan{left:3.8%;top:11.7%;width:5.8%;height:23.6%}
.book-beyond{left:9.2%;top:11.4%;width:5.6%;height:23.9%}
.book-orrery{left:14.6%;top:11.5%;width:6.0%;height:23.8%}
.book-staircase{left:20.6%;top:12.1%;width:5.9%;height:23.1%}
/* The glowing Pensieve/basin in the lower-left */
.pensieve-hotspot{left:1.6%;top:52.2%;width:26.2%;height:25.8%;border-radius:45%}

/* Simple destination pages for Back Room volumes */
.volume-page{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:38px 18px;background:radial-gradient(circle at 50% 15%,#312014 0,#17100c 48%,#0c0807 100%)}
.volume-card{width:min(820px,94vw);padding:34px;border:1px solid #755735;border-radius:16px;background:#1c120eea;box-shadow:0 18px 60px #0009}
.volume-card h1{margin:.1em 0 .45em;color:#ffe0a1;font-size:clamp(2rem,5vw,3.6rem);line-height:1.05}
.eyebrow{margin:0 0 8px;color:#c7a876;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
.notice{color:#d8c5a6}

/* Pensieve idea form — front-end test only; no submission backend yet */
.pensieve-page{background:#090d15}
.pensieve-card{border-color:#506b78;background:#10151beF}
.moderation-note{padding:12px 14px;border-left:4px solid #87b7c7;background:#16232a;color:#dff5fb}
.idea-form{display:grid;gap:8px;margin:26px 0}
.idea-form label{margin-top:10px;color:#f0d8a9;font-weight:bold}
.idea-form label span{font-weight:normal;color:#af9f86}
.idea-form input,.idea-form select,.idea-form textarea{width:100%;padding:11px 12px;border:1px solid #6f604c;border-radius:8px;background:#0e0c0b;color:#f9e8ca;font:inherit}
.idea-form textarea{resize:vertical;min-height:170px}
.submit-thought{justify-self:start;margin-top:12px;padding:11px 18px;border:1px solid #8bb9c7;border-radius:999px;background:#17303a;color:#e6fbff;font:inherit;font-weight:bold;cursor:pointer}
.submit-thought:hover{background:#214451}
.test-notice{margin:18px 0;padding:13px 15px;border:1px solid #90713f;border-radius:8px;background:#2c2111;color:#ffe5ae}
.test-notice[hidden]{display:none}

@media(max-width:650px){
  .volume-card{padding:22px 18px}
  .pensieve-hotspot{left:0.5%;top:51.5%;width:29%;height:28%}
}

/* SECRET ROOM CLICK MAP — invisible over the approved artwork.
   Test build only: clicks confirm alignment; destinations are intentionally not assigned yet. */
.secret-room-scene .secret-object-hotspot{
  position:absolute;z-index:5;display:block;margin:0;padding:0;border:0;
  background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.secret-room-scene .secret-object-hotspot:hover{background:transparent}
/* Damaged open journal in the lower-left foreground */
.torn-journal-hotspot{left:.3%;top:75.0%;width:27.8%;height:18.8%;border-radius:8%}
/* Round crystal ball on the left side of the desk */
.crystal-ball-hotspot{left:8.4%;top:52.1%;width:8.9%;height:11.8%;border-radius:50%}
/* Blue/teal potion bottle cluster on the left shelving */
.potion-hotspot{left:4.0%;top:33.2%;width:8.3%;height:10.8%;border-radius:20%}
/* Large glowing crystal cluster high on the right shelving */
.crystal-hotspot{left:83.4%;top:23.2%;width:8.8%;height:18.5%;border-radius:28%}
/* Central glowing Pensieve basin */
.secret-pensieve-hotspot{left:34.6%;top:45.7%;width:36.2%;height:29.4%;border-radius:45%}
.secret-test-message{
  position:absolute;z-index:9;left:50%;bottom:3.5%;transform:translateX(-50%);
  width:max-content;max-width:min(88%,720px);padding:11px 15px;border:1px solid #668a99;
  border-radius:10px;background:#071117e8;color:#dff8ff;box-shadow:0 8px 28px #000b;
  text-align:center;font-weight:bold
}
.secret-test-message[hidden]{display:none}

/* Pages Torn, Pages Waiting */
.torn-pages-card{border-color:#594738;background:linear-gradient(180deg,#17120fee,#0d0b0aF2);box-shadow:0 18px 70px #000b}
.torn-pages-card h1{color:#e4c899}
.torn-pages-card p{max-width:68ch}

/* Reusable moderated comments UI */
.comments-section{margin-top:34px;padding-top:30px;border-top:1px solid #5b4939}
.comments-heading h2{margin:.1em 0 .35em;color:#e9cf9e;font-size:clamp(1.6rem,3.5vw,2.4rem)}
.comment-form{display:grid;gap:8px;margin:22px 0 28px}
.comment-form label{margin-top:8px;color:#f0d8a9;font-weight:bold}
.comment-form label span{font-weight:normal;color:#af9f86}
.comment-form input,.comment-form textarea{width:100%;padding:11px 12px;border:1px solid #6f604c;border-radius:8px;background:#0e0c0b;color:#f9e8ca;font:inherit}
.comment-form textarea{resize:vertical;min-height:150px}
.approved-comments-wrap{margin-top:30px}
.approved-comments-wrap h3,.local-moderation-panel h3{margin:.2em 0 .7em;color:#ddc08b}
.comment-card{margin:12px 0;padding:14px 16px;border:1px solid #514436;border-radius:10px;background:#110e0c}
.comment-meta{display:flex;gap:12px;align-items:baseline;justify-content:space-between;color:#ceb991;font-size:.92rem}
.comment-meta span{color:#917f67;font-size:.82rem}
.comment-text{margin:.65em 0 .1em;white-space:pre-wrap;overflow-wrap:anywhere}
.local-moderation-tools{margin-top:32px;padding-top:18px;border-top:1px dashed #554838}
.local-moderation-toggle{padding:9px 14px;border:1px solid #7d684c;border-radius:999px;background:#251a12;color:#f3d9a5;font:inherit;cursor:pointer}
.local-test-note{margin:.5em 0 0;color:#9f8d73;font-size:.88rem}
.local-moderation-panel{margin-top:18px;padding:18px;border:1px solid #6d5d48;border-radius:10px;background:#0b0a09}
.pending-comment-card{border-color:#766343}
.moderation-actions{display:flex;gap:10px;margin-top:12px}
.comment-action{padding:7px 12px;border:1px solid #7d684c;border-radius:999px;background:#20170f;color:#f5ddb0;font:inherit;cursor:pointer}
.approve-comment{border-color:#5c7f63}
.reject-comment{border-color:#8b5c5c}
.comment-status{margin:10px 0 20px}

/* Live comment moderation */
.comment-form button:disabled,.admin-page button:disabled{opacity:.55;cursor:not-allowed}
.admin-login{display:grid;gap:10px;margin:26px 0 30px;padding:18px;border:1px solid #5e5140;border-radius:10px;background:#100d0b}
.admin-login label{color:#f0d8a9;font-weight:bold}
.admin-login input{width:100%;padding:11px 12px;border:1px solid #6f604c;border-radius:8px;background:#0e0c0b;color:#f9e8ca;font:inherit}
.admin-button-row{display:flex;gap:10px;flex-wrap:wrap}
.admin-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.admin-panel-heading h2{margin:.2em 0;color:#ddc08b}
.admin-page .comment-card{margin:14px 0}

/* Projects in the Works */
.projects-card{border-color:#50646f;background:linear-gradient(180deg,#11171bee,#0b0f12f2);box-shadow:0 18px 70px #000b}
.projects-card h1{color:#d8edf4}
.projects-card p{max-width:68ch}
.project-placeholder{margin:30px 0 10px;padding:18px 20px;border:1px solid #485d67;border-radius:12px;background:#0d1519}
.project-placeholder h2{margin:.1em 0 .45em;color:#c9e0e8}


/* Tavern ambience control */
.ambient-toggle{position:absolute;z-index:9;right:1.2%;bottom:1.8%;padding:9px 13px;border:1px solid #8c6b42;border-radius:999px;background:#160f0ddc;color:#ffe7b3;font:600 14px/1.2 Georgia,serif;box-shadow:0 6px 20px #0009;cursor:pointer;backdrop-filter:blur(3px)}
.ambient-toggle:hover{background:#2a1b14}
.ambient-toggle:focus-visible{outline:3px solid #ffdc91;outline-offset:3px}
@media(max-width:650px){.ambient-toggle{right:2.5%;bottom:2.2%;font-size:12px;padding:8px 10px}}

/* Qiretan volume */
.qiretan-page{background:#080d12}
.qiretan-card{border-color:#53667a;background:linear-gradient(180deg,#101820f2,#0a0e13f5);box-shadow:0 18px 70px #000b}
.qiretan-card h1{color:#dcecff}
.qiretan-lede{font-size:1.15rem;color:#c9d8e7}
.qiretan-quote{margin:28px 0;padding:18px 20px;border-left:4px solid #718aa2;background:#0b1219;color:#e8dcc3;font-style:italic}
.qiretan-quote cite{display:block;margin-top:10px;color:#9fb4c8;font-style:normal;font-size:.92rem}
.qiretan-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:30px 0}
.qiretan-chapter{display:block;padding:18px;border:1px solid #4f6577;border-radius:12px;background:#0d151c;text-decoration:none;color:#f4e2bd;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.qiretan-chapter:hover{transform:translateY(-2px);background:#13212b;border-color:#7993a8}
.qiretan-chapter span{display:block;margin-bottom:6px;color:#d9ebfa;font-weight:bold;font-size:1.08rem}
.qiretan-chapter small{display:block;color:#aebdca;line-height:1.45}
.chapter-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid #40515f}
.qiretan-closing{margin-top:24px;padding:16px 18px;border:1px solid #52697b;border-radius:10px;background:#0c161e;color:#e4edf5}
@media(max-width:700px){.qiretan-index{grid-template-columns:1fr}.chapter-nav{flex-direction:column;align-items:flex-start}}