/* Vordenk — Help library: the royal reading room.
   Deep teal wall with a faint gold damask, a gilded frame and crown, two arched alcoves with walnut shelves,
   ten gold-foiled spines (teal, parchment and gold leaf), candlelight, and a gilded plaque for the details.
   Colours are the system colours only: deep teal shades and gold shades. */
.vkh[data-level="lib"], .vkh[data-level="lib"] .vkh-body{ background:#041a20 !important; }
.vkh-lib-gal{
  --gold1:#fbeeb8; --gold2:#ecdca0; --gold3:#d8be84; --gold4:#a58c52; --gold5:#7a5f26; --sky:#add0cc;
  justify-content:flex-start !important; align-items:center; gap:0 !important; overflow-x:hidden; overflow-y:auto;
  padding:clamp(18px,3.4svh,26px) 22px calc(16px + env(safe-area-inset-bottom)) !important;
  font-family:var(--font-latin,'Google Sans',Roboto,sans-serif) !important; color:#eef3ea;
  background:
    radial-gradient(60% 30% at 50% 7%,rgba(236,220,160,.2),transparent 70%),
    radial-gradient(90% 55% at 50% 0,#12565a 0,transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23d8be84' stroke-opacity='.13'%3E%3Cpath d='M28 2l26 26-26 26L2 28z'/%3E%3Cpath d='M28 14l14 14-14 14-14-14z'/%3E%3C/g%3E%3Cg fill='%23d8be84' fill-opacity='.16'%3E%3Ccircle cx='28' cy='28' r='2'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='56' cy='0' r='2'/%3E%3Ccircle cx='0' cy='56' r='2'/%3E%3Ccircle cx='56' cy='56' r='2'/%3E%3C/g%3E%3C/svg%3E") 0 0/56px 56px,
    radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,#062c35,#041a20 70%,#020d11) !important;
}

/* ---------- gilded frame */
.gal-frame{ position:absolute; inset:9px; pointer-events:none; border:1px solid rgba(216,190,132,.7); border-radius:3px; box-shadow:0 0 0 4px transparent, 0 0 0 5px rgba(216,190,132,.22), inset 0 0 40px rgba(0,0,0,.35); z-index:0; }
.gal-frame i{ position:absolute; width:15px; height:15px; display:grid; place-items:center; font-style:normal; font-size:9px; line-height:1; color:var(--gold2); background:#062c35; text-shadow:0 0 6px rgba(236,220,160,.6); }
.gal-frame .tl{ top:-8px; left:-8px; } .gal-frame .tr{ top:-8px; right:-8px; } .gal-frame .bl{ bottom:-8px; left:-8px; } .gal-frame .br{ bottom:-8px; right:-8px; }

/* ---------- header: crown, icon + name, flourish, title, facts */
.gal-head{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:clamp(3px,.9svh,7px); text-align:center; margin-top:clamp(10px,3.2svh,26px); }
.gh-crown{ width:30px; height:auto; display:block; filter:drop-shadow(0 0 8px rgba(236,220,160,.55)) drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.gh-brand{ display:flex; align-items:center; gap:11px; }
.gh-ico{ width:34px; height:34px; border-radius:10px; display:block; box-shadow:0 0 0 1px #041a20, 0 0 0 2.5px var(--gold3), 0 0 0 4px #041a20, 0 0 0 5px rgba(216,190,132,.5), 0 0 18px 2px rgba(216,190,132,.35); }
.gh-name{ font-size:13px; font-weight:500; letter-spacing:.52em; padding-left:.52em; text-transform:uppercase;
  background:linear-gradient(180deg,var(--gold1),var(--gold3) 55%,var(--gold4)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.gh-rule{ display:flex; align-items:center; gap:7px; width:min(270px,72%); color:var(--gold3); }
.gh-rule i{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold3)); }
.gh-rule i:last-child{ background:linear-gradient(270deg,transparent,var(--gold3)); }
.gh-rule b{ font-size:6px; font-weight:400; line-height:1; } .gh-rule b.mid{ font-size:10px; text-shadow:0 0 8px rgba(236,220,160,.8); }
.gh-title{ font-family:inherit !important; margin:0 !important; font-size:clamp(25px,7vw,32px) !important; font-weight:300 !important; letter-spacing:.07em !important; line-height:1.1; text-transform:none !important; background:none !important; filter:none !important;
  color:#f3ead0 !important; -webkit-text-fill-color:currentColor !important; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.gh-title em{ font-style:italic; font-weight:400; background:linear-gradient(180deg,var(--gold1),var(--gold3) 60%,var(--gold4)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.gh-meta{ display:flex; align-items:center; gap:9px; font-size:9.5px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--sky); opacity:.85; }
.gh-meta i{ width:4px; height:4px; transform:rotate(45deg); background:var(--gold3); }

/* ---------- alcoves: real boxes with depth (back, two side walls, ceiling, floor) in a 3D scene that tilts */
.gal-shelves{ position:relative; z-index:1; width:min(520px,100%); margin-top:clamp(14px,3.2svh,28px); perspective:1150px; perspective-origin:50% 38%; }
.gal-tilt{ transform-style:preserve-3d; transform:rotateX(calc(var(--rx,4) * 1deg)) rotateY(calc(var(--ry,-5) * 1deg));  }
.gal-sway{ transform-style:preserve-3d; display:flex; flex-direction:column; gap:clamp(14px,3.4svh,28px); }
.gal-sh{ --D:100px; position:relative; padding-top:14px; transform-style:preserve-3d; }
.al{ position:absolute; left:1.5%; right:1.5%; top:0; bottom:11px; transform-style:preserve-3d; pointer-events:none; }
.al > i{ position:absolute; display:block; }
.al-b{ inset:0; transform:translateZ(calc(var(--D) * -1));
  background:radial-gradient(70% 80% at 50% 0,rgba(236,220,160,.16),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23d8be84' stroke-opacity='.12'%3E%3Cpath d='M20 2l18 18-18 18L2 20z'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23d8be84' fill-opacity='.14'/%3E%3C/svg%3E") 0 0/40px 40px,
    linear-gradient(180deg,#0c4249,#052229); box-shadow:inset 0 0 0 1px rgba(216,190,132,.4), inset 0 0 50px rgba(0,0,0,.55); }
.al-l{ left:0; top:0; width:var(--D); height:100%; transform-origin:0 50%; transform:rotateY(90deg); background:linear-gradient(90deg,#03161b,#0a3a42 85%,#0e4850); box-shadow:inset 0 0 30px rgba(0,0,0,.5); }
.al-r{ right:0; top:0; width:var(--D); height:100%; transform-origin:100% 50%; transform:rotateY(-90deg); background:linear-gradient(270deg,#03161b,#0a3a42 85%,#0e4850); box-shadow:inset 0 0 30px rgba(0,0,0,.5); }
.al-t{ left:0; top:0; width:100%; height:var(--D); transform-origin:50% 0; transform:rotateX(-90deg); background:linear-gradient(180deg,#020c10,#06242b); }
.al-f{ left:0; bottom:0; width:100%; height:var(--D); transform-origin:50% 100%; transform:rotateX(90deg);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 9px),linear-gradient(180deg,#1b1007,#4a2f19 55%,#6a4727); }
.al-rim{ inset:-1px; transform:translateZ(1px); border:1px solid rgba(216,190,132,.8); box-shadow:inset 0 0 0 3px #031319, inset 0 0 0 4px rgba(216,190,132,.3); }
.al-cn{ position:absolute; left:-1%; right:-1%; top:-6px; height:14px; transform:translateZ(3px); border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 2px,transparent 2px 7px),linear-gradient(180deg,#f3e3a8 0,#c9a24f 28%,#7a5230 30%,#3a2410 100%);
  box-shadow:0 5px 8px -3px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.7); }
.gal-row{ position:relative; display:flex; align-items:flex-end; justify-content:center; gap:clamp(6px,1.9vw,12px); padding:0 14px; transform-style:preserve-3d; transform:translateZ(calc(var(--D) * -.5)); }
.gal-board{ position:relative; display:block; height:11px; margin:0 -2px; border-radius:2px 2px 4px 4px; transform:translateZ(2px);
  background:linear-gradient(180deg,#a98a46 0,#a98a46 1.5px,#7a5230 1.5px,#5a3a1f 55%,#3a2410 100%);
  box-shadow:0 12px 16px -8px rgba(0,0,0,.85), inset 0 1px 0 rgba(251,238,184,.65), inset 0 -2px 0 rgba(216,190,132,.35); }

/* ---------- books: solid objects (spine, covers, page block) */
.vkh-sp{ all:unset; --w:clamp(38px,11.2vw,55px); --h:min(calc(var(--bh) * .76),18.2svh); --d:72px;
  box-sizing:border-box; position:relative; cursor:pointer; flex:none; display:block; width:var(--w); height:var(--h);
  transform-style:preserve-3d; transform-origin:50% 100%; transition:transform .5s cubic-bezier(.2,.8,.2,1);
  animation:gal-rise .65s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--i) * 55ms + 120ms); }
.vkh-sp.t0{ --s1:#12595d; --s2:#041a20; --tx:#f3e7b8; --foil:#e6cf8a; --g1:#a58c52; --g2:#f3e3a8; }
.vkh-sp.t1{ --s1:#fbf5e4; --s2:#e3d8bb; --tx:#0b4046; --foil:#a98a46; --g1:#9a7b3a; --g2:#e0c777; }
.vkh-sp.t2{ --s1:#1f6f6d; --s2:#0a373c; --tx:#f8f0d4; --foil:#f3e3a8; --g1:#c9a24f; --g2:#fbeeb8; }
.vkh-sp.t3{ --s1:#f3dd96; --s2:#b8923f; --tx:#05262c; --foil:#5b4414; --g1:#5b4414; --g2:#8f7230; }
.vkh-sp:hover, .vkh-sp:focus-visible, .vkh-sp:active{ transform:translateZ(34px) rotateY(-31deg); }
.vkh-sp:focus-visible{ outline:none; }
.vkh-sp:hover .fr, .vkh-sp:focus-visible .fr{ box-shadow:0 0 18px 2px rgba(236,220,160,.5); }
.f{ position:absolute; display:block; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
/* spine (faces the room) */
.fr{ inset:0; transform:translateZ(calc(var(--d) / 2)); display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 0 8px; border-radius:2px 3px 3px 2px;
  background:linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(255,255,255,.17) 9%,transparent 25%,transparent 75%,rgba(0,0,0,.3)),linear-gradient(180deg,var(--s1),var(--s2));
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35); transition:box-shadow .3s; }
.fr::before, .fr::after{ content:""; position:absolute; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--g1),var(--g2) 50%,var(--g1)); }
.fr::before{ top:4px; } .fr::after{ bottom:4px; }
/* fore-edge (the back, never seen but kept solid) and back cover (left) */
.fk{ inset:0; transform:rotateY(180deg) translateZ(calc(var(--d) / 2)); background:repeating-linear-gradient(180deg,#f3ead0 0 2px,#d8cba6 2px 3px); }
.fl{ top:0; left:calc(50% - var(--d) / 2); width:var(--d); height:100%; transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.1)),linear-gradient(180deg,var(--s1),var(--s2)); }
/* front cover (right): gold frame, crest, title */
.fc{ top:0; left:calc(50% - var(--d) / 2); width:var(--d); height:100%; transform:rotateY(90deg) translateZ(calc(var(--w) / 2)); padding:6px;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.1) 30%,transparent 60%),linear-gradient(180deg,var(--s1),var(--s2)); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35); }
.cv{ box-sizing:border-box; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; border:1px solid var(--foil); box-shadow:inset 0 0 0 2px transparent, inset 0 0 0 3px color-mix(in srgb,var(--foil) 40%,transparent); }
.cv b{ font-weight:400; font-size:15px; line-height:1; color:var(--foil); }
.cv-t{ max-width:92%; font-size:8px; font-weight:500; letter-spacing:.03em; line-height:1.2; color:var(--tx); overflow-wrap:anywhere; }
.cv i{ font-style:normal; font-size:5.5px; letter-spacing:.3em; padding-left:.3em; color:var(--foil); }
/* page block (top) and the soft shadow it throws on the shelf */
.ft{ left:0; top:calc(50% - var(--d) / 2); width:100%; height:var(--d); transform:rotateX(90deg) translateZ(calc(var(--h) / 2));
  background:linear-gradient(90deg,var(--s2) 0 3px,#f3ead0 3px calc(100% - 3px),var(--s2) calc(100% - 3px)); }
.fs{ left:calc(var(--w) * -.3); width:calc(var(--w) * 1.6); top:calc(100% - var(--d) * .62); height:calc(var(--d) * 1.24); transform:rotateX(90deg) translateZ(1px); backface-visibility:visible;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent); }
.sp-n{ margin-top:2px; font-size:8.5px; font-weight:600; letter-spacing:.14em; padding-left:.14em; color:var(--foil); line-height:1; }
.sp-r{ flex:none; width:64%; height:3px; border-top:1px solid var(--foil); border-bottom:1px solid var(--foil); opacity:.85; }
.sp-t{ flex:1; min-height:0; max-height:100%; writing-mode:vertical-rl; text-orientation:mixed; display:flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden;
  font-size:9.8px; font-weight:500; letter-spacing:.1em; color:var(--tx); }
.vkh-sp.long .sp-t{ font-size:8.6px; letter-spacing:.05em; }
.sp-m{ margin-bottom:2px; font-size:7px; line-height:1; color:var(--foil); }
.sp-rib{ position:absolute; top:-8px; left:50%; width:5px; height:12px; margin-left:-2.5px; background:var(--rc); clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%); }
@keyframes gal-rise{ from{ opacity:0; transform:translateY(14px); } }

/* ---------- candlelight and the urn */
.gal-prop{ flex:none; display:block; align-self:flex-end; animation:gal-rise .7s cubic-bezier(.2,.8,.2,1) .7s backwards; }
.gal-prop svg{ display:block; height:min(86px,10.4svh); width:auto; filter:drop-shadow(0 4px 5px rgba(0,0,0,.6)); overflow:visible; }
.gal-prop.start{ margin-right:2px; } .gal-prop.end{ margin-left:2px; }
.gal-prop .flame{ transform-box:fill-box; transform-origin:50% 100%; animation:vkg-flick 2.6s ease-in-out infinite; }
.gal-prop .flame-glow{ animation:vkg-glow 2.6s ease-in-out infinite; }
@keyframes vkg-flick{ 0%,100%{ transform:scale(1,1) rotate(0); } 30%{ transform:scale(.94,1.07) rotate(-2deg); } 60%{ transform:scale(1.04,.96) rotate(1.5deg); } }
@keyframes vkg-glow{ 0%,100%{ opacity:.5; } 40%{ opacity:.75; } 70%{ opacity:.42; } }

/* ---------- ledger: a gilded plaque */
.gal-led{ position:relative; z-index:1; width:min(520px,100%); margin-top:clamp(16px,3.6svh,30px); padding:13px 18px 12px; text-align:center; min-height:108px;
  display:flex; flex-direction:column; align-items:center; gap:3px; border-radius:3px;
  background:linear-gradient(180deg,rgba(11,64,70,.55),rgba(4,26,32,.75)); box-shadow:inset 0 0 0 1px rgba(216,190,132,.6), inset 0 0 0 4px #041a20, inset 0 0 0 5px rgba(216,190,132,.22), 0 10px 22px -12px rgba(0,0,0,.8); }
.gal-led::before, .gal-led::after{ content:"◆"; position:absolute; top:50%; transform:translateY(-50%); font-size:7px; color:var(--gold3); text-shadow:0 0 6px rgba(236,220,160,.6); }
.gal-led::before{ left:9px; } .gal-led::after{ right:9px; }
.led-k{ font-size:9.5px; font-weight:500; letter-spacing:.32em; padding-left:.32em; text-transform:uppercase; color:var(--gold3); }
.led-t{ font-family:inherit; font-size:clamp(17px,4.8vw,20px); font-weight:400; letter-spacing:.04em; line-height:1.2;
  background:linear-gradient(180deg,var(--gold1),var(--gold3) 70%,var(--gold4)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.led-s{ font-size:12px; font-style:italic; color:var(--sky); }
.led-d{ margin:3px 0 0; max-width:34em; font-size:12px; line-height:1.45; color:#c9d8d3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.led-m{ margin-top:4px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#8fb0aa; }
.gal-led > *{ animation:led-in .25s ease both; }
@keyframes led-in{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){ .gal-tilt, .vkh-sp, .gal-prop, .gal-prop .flame, .gal-prop .flame-glow, .gal-led > *{ animation:none; transition:none; } }

/* ---------- the top bar joins the room while the library is showing */
.vkh[data-level="lib"] .vkh-top{ background:linear-gradient(180deg,#0b4046,#062c35 60%,#041a20) !important; border-bottom:1px solid rgba(216,190,132,.65) !important; box-shadow:0 1px 0 rgba(0,0,0,.5), 0 6px 14px -8px rgba(0,0,0,.7); backdrop-filter:none; }
.vkh[data-level="lib"] .vkh-title{ color:#f3ead0; text-shadow:0 1px 0 rgba(0,0,0,.5); }
.vkh[data-level="lib"] .vkh-title small{ color:#d8be84; }
.vkh[data-level="lib"] .vkh-top .vkh-btn{ background:linear-gradient(180deg,rgba(236,220,160,.14),rgba(236,220,160,.04)) !important; border-color:rgba(216,190,132,.6) !important; color:#ecdca0 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.vkh[data-level="lib"] .vkh-top .vkh-btn:hover{ background:rgba(236,220,160,.22) !important; border-color:#ecdca0 !important; }

/* ---------- short phones: keep every shelf and the plaque on one screen */
@media (max-height:700px){
  .gal-head{ margin-top:6px; gap:3px; } .gh-crown{ width:24px; } .gh-ico{ width:30px; height:30px; } .gh-title{ font-size:24px !important; }
  .gh-meta{ display:none; }
  .gal-shelves{ margin-top:12px; } .gal-sway{ gap:12px; } .gal-sh{ padding-top:11px; }
  .vkh-sp{ --h:min(calc(var(--bh) * .76),17.6svh); --d:66px; } .fr{ padding-top:10px; gap:4px; } .sp-t{ font-size:8.6px; letter-spacing:.04em; } .vkh-sp.long .sp-t{ font-size:7.6px; letter-spacing:.02em; }
  .gal-prop svg{ height:min(76px,10.4svh); }
  .gal-led{ margin-top:12px; min-height:74px; padding:9px 16px 8px; } .led-d{ display:none; } .led-s{ font-size:11.5px; }
}
}
@media (min-height:701px) and (max-height:770px){
  .gal-head{ margin-top:6px; } .gal-shelves{ margin-top:12px; } .gal-sway{ gap:12px; } .gal-led{ margin-top:12px; min-height:100px; padding:10px 18px 9px; }
}
@media (min-height:701px) and (max-height:735px){ .led-d{ display:none; } .gal-led{ min-height:84px; } }
@media (min-height:701px) and (max-height:770px){ .gh-meta{ display:none; } }

/* the 3D containers sit in front of the books, so let pointers pass through them to the books themselves */
.gal-tilt, .gal-sway, .gal-sh, .gal-row, .gal-board, .al-cn{ pointer-events:none; }
.vkh-sp, .vkh-sp .f, .vkh-sp .f *{ pointer-events:auto; }

/* the candle is a little bigger than the other props */
.gal-prop.end svg{ height:min(108px,13svh); }
@media (max-height:700px){ .gal-prop.end svg{ height:min(94px,13svh); } }

/* book 10 (the notebook) is a bigger, thicker book */
.vkh-sp.big{ --w:clamp(46px,13.2vw,64px); --h:min(calc(var(--bh) * .92),21svh); --d:86px; }
@media (max-height:700px){ .vkh-sp.big{ --h:min(calc(var(--bh) * .9),19.6svh); --d:78px; } }