/* Visual polish layer — purely cosmetic, layered over style.css. */
:root{--gold-hi:#f6e2a8;--gold-lo:#a3803f}

h1,h2,h3,#menu h1,.chapter-card h3,#modal h2,.scene-heading h2,#loader h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}
.eyebrow,.scene-heading span,.inventory-heading,#menu h1 small,#menu h1 span{font-family:'Cinzel',Georgia,serif}

/* Lacquered gilt frame around the whole game */
#game{border:6px solid transparent;border-image:linear-gradient(135deg,#f3d99a,#8a6731 25%,#e8c886 50%,#6f5226 75%,#dcbc78) 1;box-shadow:inset 0 0 0 1px #1c281f,inset 0 0 0 3px #e7c98544}

/* Cinematic light falloff + film grain over the 3D view */
.vignette{box-shadow:none;background:radial-gradient(ellipse 75% 70% at 50% 48%,transparent 62%,#02100a88 100%),linear-gradient(#0b1c2366,transparent 22%,transparent 78%,#07140f66)}
.vignette::after{content:'';position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#stage::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 60% 45% at 50% 0%,#ffd99a14,transparent 70%)}

/* Loader & menu */
#loader{background:radial-gradient(ellipse at 50% 40%,#2a4d3f,#06140f 75%)}
.load-emblem{text-shadow:0 0 28px #f2cf8a88,0 0 60px #f2cf8a33}
.load-track i{background:linear-gradient(90deg,transparent,var(--gold-hi),transparent)}
#menu{background:linear-gradient(90deg,#04140fef 0%,#071c16d6 38%,#071c1630 78%,transparent)}
#menu h1{background:linear-gradient(180deg,#fff3cf 10%,#e4c27c 55%,#a7813f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 14px #000a);text-shadow:none;font-weight:600}
#menu h1 small,#menu h1 span{-webkit-text-fill-color:#d8b874}
.title-ornament{text-shadow:0 0 12px #f2cf8a66}
.menu-description{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-style:italic;color:#d3d6c2}

/* Buttons */
.primary{background:linear-gradient(160deg,#f6e2a8,#d2b06a 45%,#9f7c3e);border-color:#fbe7b4;box-shadow:0 6px 26px #0006,inset 0 1px 0 #fff8,inset 0 -2px 6px #6b4f2244;text-shadow:0 1px 0 #fff5}
.primary:hover{background:linear-gradient(160deg,#fff0c4,#e2c27e 45%,#b18d4c)!important;box-shadow:0 6px 30px #e9c98140,inset 0 1px 0 #fffa}
.secondary{backdrop-filter:blur(4px)}
button:hover:not(:disabled){box-shadow:0 0 14px #e7c98522}

/* HUD & inventory */
#hud{background:linear-gradient(#04140fd9,#04140f55 60%,transparent)}
.scene-heading h2{font-size:21px;letter-spacing:1px;color:#f6e7c0;text-shadow:0 2px 10px #000,0 0 22px #e7c98533}
.nav{background:radial-gradient(circle,#0a221aa8,#0a221a40);border:1px solid #d2b67633;color:#f2dfb0;backdrop-filter:blur(3px)}
.nav:hover{border-color:#e9d29b88;text-shadow:0 0 12px #f5d58f}
#inventory{background:linear-gradient(#183b2ee6,#06150fef);border-top:1px solid #d7bb79aa;box-shadow:0 -8px 30px #0007,inset 0 1px 0 #f2d99a33;backdrop-filter:blur(6px)}
#items button{background:radial-gradient(circle at 50% 35%,#2f5544aa,#12291fcc);border-color:#c9ab6c55;box-shadow:inset 0 1px 0 #ffffff12}
#items button.selected{box-shadow:0 0 16px #f2d38f55,inset 0 0 10px #f2d38f22}

/* Dialogs, toasts, labels */
#modalLayer{background:radial-gradient(ellipse at center,#04170f88,#020b07cc)}
#modal{background:linear-gradient(150deg,#24443598,#0b241ce8 55%),linear-gradient(#0d2a20,#0d2a20);border-color:#cfb173;box-shadow:0 30px 120px #000c,0 0 0 1px #0007,inset 0 0 0 4px #d6ba7914,inset 0 1px 0 #f6e2a833;backdrop-filter:blur(10px)}
#modal h2{font-size:27px;color:#f6e6bd}
#modalBody .clue{background:radial-gradient(ellipse at center,#123326aa,#06180fcc);font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;box-shadow:inset 0 0 24px #000a}
#toast,#hoverLabel{backdrop-filter:blur(6px);box-shadow:0 8px 30px #0008}
#hoverLabel{font-family:'Cormorant Garamond',Georgia,serif;font-size:15px}

/* Ending */
#end .end-seal{text-shadow:0 0 30px #ffe4a3aa,0 0 80px #ffe4a344}
#end .end-panel{backdrop-filter:blur(8px)}
#end h1{background:linear-gradient(180deg,#fff3cf,#d9b46c);-webkit-background-clip:text;background-clip:text;color:transparent}
#cinematic p{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(19px,2.6vw,30px)}

/* TEMP: garden preview button */

/* Passage between the chamber and the garden */
#veil{position:absolute;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .9s ease}
#veil.on{opacity:1;pointer-events:auto}
#veil.dark{background:#050a08;transition-duration:.7s}
#veil.light{background:radial-gradient(circle at 50% 55%,#fffdf2 0%,#fff1c8 30%,#f4d58e 60%,#c9a35a 100%);transition-duration:1.1s}
#veil.light.on{animation:veilBloom 1.1s ease-out}
@keyframes veilBloom{from{clip-path:circle(0% at 50% 55%)}to{clip-path:circle(75% at 50% 55%)}}

/* Gold glint on objects still worth a look — visible without a mouse */
.hotspot.glint{opacity:1;overflow:visible}
.hotspot.glint::before{content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;pointer-events:none;
 background:radial-gradient(circle,#fff8dc 0 1.5px,#f3cf7acc 2.5px,transparent 4px),linear-gradient(90deg,transparent 46%,#ffe7a8 50%,transparent 54%),linear-gradient(0deg,transparent 46%,#ffe7a8 50%,transparent 54%);
 filter:drop-shadow(0 0 4px #f5c96a);animation:glint 3.2s ease-in-out infinite;animation-delay:var(--twinkle,0s)}
@keyframes glint{0%,55%,100%{opacity:0;transform:scale(.3) rotate(0)}70%{opacity:.9;transform:scale(1) rotate(45deg)}85%{opacity:.35;transform:scale(.7) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.hotspot.glint::before{animation:none;opacity:.6}}

/* Let the dawn landscape show through the final screen */
#end{background:linear-gradient(90deg,#071d1cd0,#09281a70 40%,#09281a00 68%)}
#end .end-panel{background:linear-gradient(135deg,#163929a8,#102e2440)}
@media (max-width:600px){#end{background:linear-gradient(#071d1c55,#071d1cb0 55%,#071d1c55)}}

/* Bigger publisher logo on the menu and the final screen */
#brand{transition:width .4s ease}
#brand{width:200px}#inventory{width:min(720px,calc(100% - 460px))}
@media(max-width:1100px){#brand{width:170px}#inventory{width:min(720px,calc(100% - 400px))}}
@media(max-width:780px){#brand{width:155px}#inventory{width:calc(100% - 185px)}}
#game:has(#menu:not(.hidden)) #brand,#game:has(#end:not(.hidden)) #brand{width:240px}
@media(max-width:600px){#game:has(#menu:not(.hidden)) #brand,#game:has(#end:not(.hidden)) #brand{width:170px}}

/* "Developed by Slyness": jade-and-gold shimmer with twinkling sparkles */
#menu .credit,#end .credit-inline{font:12px Arial!important;letter-spacing:1.5px}
.slyness{position:relative;display:inline-block;margin:0 14px 0 4px;font:600 15px 'Cinzel',serif;letter-spacing:2px;
 background:linear-gradient(100deg,#58b997 0%,#7dffc2 25%,#fff6d8 40%,#f5d58f 55%,#58b997 80%,#7dffc2 100%);background-size:250% 100%;
 -webkit-background-clip:text;background-clip:text;color:transparent;animation:slyShimmer 4s linear infinite,slyGlow 3s ease-in-out infinite}
.slyness::before,.slyness::after{content:'✦';position:absolute;color:#f5d58f;font-size:9px;-webkit-text-fill-color:#f5d58f;text-shadow:0 0 6px #ffd27a;animation:slyTwinkle 2.4s ease-in-out infinite}
.slyness::before{left:-10px;top:-4px}
.slyness::after{right:-12px;bottom:-2px;animation-delay:1.2s;color:#7dffc2;-webkit-text-fill-color:#7dffc2;text-shadow:0 0 6px #7dffc2}
@keyframes slyShimmer{to{background-position:-250% 0}}
@keyframes slyGlow{0%,100%{filter:drop-shadow(0 0 2px #58b99766)}50%{filter:drop-shadow(0 0 8px #7dffc2aa) drop-shadow(0 0 14px #f5d58f55)}}
@keyframes slyTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.slyness,.slyness::before,.slyness::after{animation:none}}

/* The scene fills the whole frame; the inventory floats over it */
#stage,#game.cinematic #stage{bottom:0}
.use-hint{margin:12px auto 4px;text-align:center;font:italic 14px "Cormorant Garamond",Georgia,serif;color:#cdb98a;opacity:.8}

/* Leaderboard — jade scroll with gold medals */
.board{margin:14px auto 6px;max-width:420px;text-align:left}
.board-panel{width:min(460px,92vw);max-height:92%;overflow:auto;padding:30px 26px 24px;text-align:center;border:1px solid #d8ba6855;border-radius:10px;background:linear-gradient(135deg,#163929f2,#0c241be8);box-shadow:0 20px 80px #000a,inset 0 1px 0 #f2d99a33;animation:endingReveal .6s ease both}
.board-panel h2{font-family:'Cinzel',serif;font-weight:600;letter-spacing:2px;margin:8px 0 4px;background:linear-gradient(180deg,#fff3cf,#d9b46c);-webkit-background-clip:text;background-clip:text;color:transparent}
#leaderboard{background:#04100ccc;backdrop-filter:blur(4px);z-index:30}
.board-list{list-style:none;margin:0;padding:0;counter-reset:none}
.board-list li{display:flex;align-items:center;gap:12px;padding:7px 12px;margin:4px 0;border-radius:6px;background:linear-gradient(90deg,#ffffff0d,#ffffff03);border:1px solid #d7bb7922;font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;color:#f0e6c9}
.board-list li.mine{border-color:#7dffc2aa;background:linear-gradient(90deg,#58b99744,#58b99711);box-shadow:0 0 18px #58b99744;animation:mineGlow 2.4s ease-in-out infinite}
@keyframes mineGlow{50%{box-shadow:0 0 26px #7dffc266}}
.board-rank{flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:50%;font:600 13px 'Cinzel',serif;color:#cdb98a;border:1px solid #d7bb7955}
.board-rank.medal-1{background:radial-gradient(circle at 35% 30%,#fff3c4,#e2b650 55%,#8a6420);color:#3b2a0a;border:0;box-shadow:0 0 12px #f5c96a88}
.board-rank.medal-2{background:radial-gradient(circle at 35% 30%,#ffffff,#c9cfd2 55%,#7c868b);color:#2a3033;border:0}
.board-rank.medal-3{background:radial-gradient(circle at 35% 30%,#ffd9b8,#c27f4e 55%,#6f3f1f);color:#2e1708;border:0}
.board-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-time{font:600 14px 'Cinzel',serif;letter-spacing:1px;color:#e9cf8f}
.board-empty{justify-content:center;font-style:italic;color:#cdb98a!important}
.board-note{margin:8px 0 0;text-align:center;font:italic 15px 'Cormorant Garamond',Georgia,serif;color:#cdb98a}
.board-note:empty{display:none}
.board-rank-line{text-align:center;margin:0 0 8px;font:600 17px 'Cinzel',serif;letter-spacing:1px;color:#7dffc2;text-shadow:0 0 12px #58b99788}
.board-form{text-align:center;margin-bottom:12px}
.board-form label{display:block;margin-bottom:8px;font:italic 17px 'Cormorant Garamond',Georgia,serif;color:#f0e6c9}
.board-form label b{font:600 17px 'Cinzel',serif;color:#e9cf8f;font-style:normal;letter-spacing:1px}
.board-form div{display:flex;gap:8px;justify-content:center}
.board-form input{flex:1;max-width:230px;padding:9px 12px;border-radius:6px;border:1px solid #d7bb7988;background:#071a14cc;color:#f6ead0;font:17px 'Cormorant Garamond',Georgia,serif;outline:none}
.board-form input:focus{border-color:#f2d99a;box-shadow:0 0 0 3px #e9c98133}
.board-form .primary{margin:0;padding:9px 18px}
#closeBoard{margin-top:16px}
@media(max-width:600px){.board-list li{font-size:16px;padding:6px 10px}.board-panel{padding:22px 16px}}
/* Loader waits for a click so the browser lets the intro sounds play. */
#loader.ready{cursor:pointer}
#loader.ready .load-track{visibility:hidden}
#loader.ready #loadText{font:600 13px Cinzel,serif;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);animation:breathe 2s infinite}
/* No visible scrollbars (Windows shows them as a bar): panels still scroll by wheel or touch. */
.menu-panel,.end-panel,.board-panel,#modalBody{scrollbar-width:none}
.menu-panel::-webkit-scrollbar,.end-panel::-webkit-scrollbar,.board-panel::-webkit-scrollbar,#modalBody::-webkit-scrollbar{display:none}
#end .end-dragon{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#end .end-panel{position:relative;z-index:1}
@media (max-width:800px){#end .end-dragon{display:none}}
#cinematic{box-shadow:none}