/* v15.26 LIBRARY — sole owner of Library visual/layout rules. Shared canvas mechanics live in stage.css. */

/* =========================================================
   PAGE + ARTWORK
   ========================================================= */
.library-page{
  position:relative;
  margin:0;
  min-height:100vh;
  overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#130a24 0%,#08050f 58%,#040308 100%);
}

.library-page .library-scene-shell{
  position:relative;
  z-index:0;
  width:100vw;
  height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.library-page .library-scene{
  position:relative;
  width:max(100vw,177.68vh);
  aspect-ratio:1672 / 941;
  line-height:0;
  overflow:hidden;
  isolation:isolate;
  background:#08050f;
  box-shadow:0 0 90px rgba(64,28,102,.16);
}

.library-page .library-art{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}

/* =========================================================
   PORTAL HIT TARGETS
   Coordinates are tied to the 1672×941 master artwork.
   ========================================================= */
.library-page .library-portal{
  position:absolute;
  z-index:4;
  display:block;
  outline:none;
  cursor:pointer;
  overflow:visible;
  border-radius:48% 48% 8% 8% / 30% 30% 7% 7%;
  -webkit-tap-highlight-color:transparent;
}

.library-page .library-portal-fiction{
  left:9.28%;
  top:34.38%;
  width:22.27%;
  height:32.44%;
  z-index:5;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  opacity:1;
  -webkit-clip-path:polygon(
    8% 29%,20% 20%,34% 17%,42% 5%,55% 5%,62% 19%,76% 21%,88% 30%,
    100% 28%,91% 43%,84% 56%,80% 73%,72% 91%,53% 100%,32% 96%,
    20% 83%,13% 67%,2% 63%,0% 45%
  );
  clip-path:polygon(
    8% 29%,20% 20%,34% 17%,42% 5%,55% 5%,62% 19%,76% 21%,88% 30%,
    100% 28%,91% 43%,84% 56%,80% 73%,72% 91%,53% 100%,32% 96%,
    20% 83%,13% 67%,2% 63%,0% 45%
  );
}


.library-page .library-portal:focus-visible{
  outline:1px solid rgba(244,211,139,.72);
  outline-offset:4px;
}

/* =========================================================
   LIBRARY HOME SIGIL
   Keep the portal scene visually clean: only the small SZ home link remains.
   ========================================================= */
.library-page .library-home-topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:0;
  padding:24px clamp(24px,3vw,54px);
  background:transparent;
  box-shadow:none;
  border:0;
  pointer-events:none;
}

.library-page .library-home-topbar .brand-mini{
  color:#f4e5c8;
  pointer-events:auto;
}

.library-page .library-home-topbar .mini-sigil{
  background:rgba(8,6,15,.12);
  border-color:rgba(239,198,107,.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

/* =========================================================
   FICTION OVERLAY
   Desktop uses the original responsive rule. Touch devices keep the same
   1672px-master typography instead of being resized by physical vw.
   ========================================================= */
.library-page .library-fiction-glow-label{
  position:absolute;
  z-index:6;
  left:20.79%;
  top:63.29%;
  transform:translate(-50%,-50%);
  display:block;
  width:max-content;
  margin:0;
  padding:0;
  font-family:"Cormorant SC","Times New Roman",serif;
  font-size:clamp(18px,1.55vw,30px);
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  opacity:1;
  color:rgba(255,224,118,.92);
  -webkit-text-stroke:.10px rgba(255,244,190,.88);
  text-rendering:geometricPrecision;
  text-shadow:
    0 0 1px rgba(255,250,220,1),
    0 0 3px rgba(255,232,150,1),
    0 0 6px rgba(255,193,66,.96),
    0 0 10px rgba(194,100,255,.62);
  filter:none;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

@media (hover:none) and (pointer:coarse){
  .library-page .library-fiction-glow-label{
    left:20.79%;
    font-size:25.916px;
  }
}

/* =========================================================
   KNOWLEDGE PORTAL
   ========================================================= */
.library-page .library-knowledge-hotspot{
  position:absolute;
  z-index:24;
  display:block;
  left:34%;
  top:63%;
  width:32%;
  height:23%;
  border-radius:18% 18% 34% 34% / 18% 18% 22% 22%;
  background:transparent;
  outline:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.library-page .library-knowledge-label{
  position:absolute;
  z-index:25;
  left:50%;
  top:72.7%;
  transform:translate(-50%,-50%);
  width:max-content;
  font-family:"Ballet",cursive;
  font-size:clamp(36px,3.10vw,60px);
  font-weight:400;
  line-height:.86;
  letter-spacing:0;
  opacity:.50;
  color:rgba(255,224,118,.96);
  text-shadow:
    0 0 2px rgba(255,250,220,.92),
    0 0 7px rgba(255,193,66,.68),
    0 0 12px rgba(194,100,255,.38);
  transition:opacity .22s ease,text-shadow .22s ease;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

.library-page .library-knowledge-hotspot:focus-visible{
  outline:1px solid rgba(255,224,118,.88);
  outline-offset:4px;
}

@media (hover:hover) and (pointer:fine){
  .library-page .library-knowledge-hotspot:hover + .library-knowledge-label{
    opacity:1;
    text-shadow:
      0 0 2px rgba(255,250,220,1),
      0 0 7px rgba(255,193,66,.92),
      0 0 14px rgba(194,100,255,.58);
  }

  .library-page .library-knowledge-hotspot:hover{
    filter:drop-shadow(0 0 12px rgba(239,198,107,.22));
  }
}

.library-page .library-knowledge-hotspot:focus-visible + .library-knowledge-label{
  opacity:1;
  text-shadow:
    0 0 2px rgba(255,250,220,1),
    0 0 7px rgba(255,193,66,.92),
    0 0 14px rgba(194,100,255,.58);
}

/* Portrait touch uses a pinned Ballet face so transformed-stage rendering does
   not depend on a late Google Fonts swap. */
@font-face{
  font-family:"SZ Ballet Portrait";
  font-style:normal;
  font-weight:100 900;
  font-display:block;
  src:url("https://cdn.jsdelivr.net/fontsource/fonts/ballet:vf@5.3.0/latin-wght-normal.woff2") format("woff2-variations");
}

@media (orientation:portrait) and (pointer:coarse){
  .library-page .library-stage-viewport[data-stage-portrait-fit="contain"] .library-knowledge-label{
    font-family:"SZ Ballet Portrait","Ballet",cursive;
    font-size:51.832px;
    font-synthesis:none;
  }
}

@media (hover:none) and (pointer:coarse){
  .library-page .library-knowledge-label{opacity:1}
}

/* =========================================================
   TOUCH MASTER CANVAS — Library page content only.
   Generic viewport/rotation mechanics are owned by stage.css.
   ========================================================= */
html.sz-stage-active body.library-page .skip-link{display:none}

html.sz-stage-active body.library-page .library-scene-shell{
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:1672px;
  height:941px;
  min-width:1672px;
  min-height:941px;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  overflow:hidden;
  z-index:0;
}

html.sz-stage-active body.library-page .library-scene{
  display:block;
  position:relative;
  width:1672px;
  height:941px;
  min-width:1672px;
  min-height:941px;
  max-width:none;
  max-height:none;
  aspect-ratio:auto;
  margin:0;
  padding:0;
  overflow:hidden;
}

html.sz-stage-active body.library-page .library-art-picture,
html.sz-stage-active body.library-page .library-art{
  display:block;
  position:absolute;
  inset:0;
  width:1672px;
  height:941px;
  max-width:none;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  object-fit:cover;
  object-position:50% 50%;
}

html.sz-stage-active body.library-page .library-home-topbar{
  display:flex;
  position:absolute;
  left:0;
  top:0;
  right:auto;
  width:1672px;
  box-sizing:border-box;
  padding:24px 50px;
  z-index:50;
  background:transparent;
  box-shadow:none;
  border:0;
}


/* =========================================================
   v15.73 — Reader Discovery lantern hotspot.
   The interaction is anchored to the small gold lantern on the table,
   using the same 1672×941 master-art coordinates on every device.
   Library-owned only; no shared shell or stage mechanics changed.
   ========================================================= */
.library-page .library-reader-discovery-hotspot{
  position:absolute;
  z-index:28;
  left:58.55%;
  top:46.55%;
  width:7.35%;
  height:20.55%;
  display:block;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-clip-path:polygon(50% 0,62% 7%,67% 14%,77% 20%,84% 32%,92% 49%,86% 70%,75% 84%,64% 91%,61% 98%,39% 98%,36% 91%,25% 84%,14% 70%,8% 49%,16% 32%,23% 20%,33% 14%,38% 7%);
  clip-path:polygon(50% 0,62% 7%,67% 14%,77% 20%,84% 32%,92% 49%,86% 70%,75% 84%,64% 91%,61% 98%,39% 98%,36% 91%,25% 84%,14% 70%,8% 49%,16% 32%,23% 20%,33% 14%,38% 7%);
}

.library-page .library-reader-discovery-hotspot:focus-visible{
  outline:1px solid rgba(255,224,118,.9);
  outline-offset:5px;
}

.library-page .library-reader-discovery-label{
  position:absolute;
  z-index:29;
  left:62.23%;
  top:56.83%;
  transform:translate(-50%,-50%);
  width:max-content;
  margin:0;
  padding:0;
  font-family:"Cormorant SC","Times New Roman",serif;
  font-size:clamp(12px,.88vw,16px);
  font-weight:600;
  line-height:1;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:rgba(255,225,151,.68);
  text-shadow:0 1px 7px rgba(0,0,0,.82),0 0 8px rgba(255,190,74,.22);
  opacity:.72;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  transition:opacity .2s ease,color .2s ease,text-shadow .2s ease;
}

@media (hover:hover) and (pointer:fine){
  .library-page .library-reader-discovery-hotspot:hover + .library-reader-discovery-label{
    opacity:1;
    color:#ffe4a4;
    text-shadow:0 1px 7px rgba(0,0,0,.82),0 0 10px rgba(255,201,94,.48);
  }
}

.library-page .library-reader-discovery-hotspot:focus-visible + .library-reader-discovery-label{
  opacity:1;
  color:#ffe4a4;
  text-shadow:0 1px 7px rgba(0,0,0,.82),0 0 10px rgba(255,201,94,.48);
}

@media (hover:none) and (pointer:coarse){
  .library-page .library-reader-discovery-label{
    font-size:14px;
    opacity:.9;
  }
}

/* =========================================================
   v15.82 — Official Contact restore.
   Keep Library navigation minimal: SZ home sigil + Official Contact only.
   ========================================================= */
.library-page .library-home-topbar .nav-official{
  position:absolute;
  top:24px;
  right:clamp(24px,3vw,54px);
  z-index:2;
  color:#f4e5c8;
  pointer-events:auto;
  border-color:transparent;
  background:transparent;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}

.library-page .library-home-topbar .nav-official:hover,
.library-page .library-home-topbar .nav-official:focus-visible{
  color:#fff3c7;
  border-color:rgba(239,198,107,.46);
  background:rgba(8,6,15,.18);
}

/* =========================================================
   v16.63 — PERSONAL GROWTH FLOWER-VASE HOTSPOT
   One 1672×941 master-art target, shared across desktop/mobile/tablet.
   Polygon follows the bouquet and vase; keep clear of the Fiction teapot
   and leave the Knowledge book navigable immediately below the vase.
   ========================================================= */
.library-page .library-personal-growth-hotspot{
  position:absolute;
  z-index:30;
  display:block;
  left:30.60%;
  top:40.50%;
  width:12.40%;
  height:24.90%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  outline:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-clip-path:polygon(
    6% 27%,17% 16%,30% 11%,43% 0%,56% 10%,71% 0%,83% 13%,
    95% 20%,100% 39%,86% 55%,75% 57%,72% 83%,64% 99%,
    36% 99%,27% 83%,24% 59%,3% 56%,0% 42%
  );
  clip-path:polygon(
    6% 27%,17% 16%,30% 11%,43% 0%,56% 10%,71% 0%,83% 13%,
    95% 20%,100% 39%,86% 55%,75% 57%,72% 83%,64% 99%,
    36% 99%,27% 83%,24% 59%,3% 56%,0% 42%
  );
}

.library-page .library-personal-growth-hotspot:focus-visible{
  outline:2px solid rgba(255,224,164,.95);
  outline-offset:3px;
}


/* v16.107 — permanent Personal Growth label on the flower vase.
   Matches Reader Discovery: visible at rest, brighter on hover/focus, no box. */
.library-page .library-personal-growth-label{
  position:absolute;
  z-index:31;
  left:36.80%;
  top:58.55%;
  transform:translate(-50%,-50%);
  width:max-content;
  margin:0;
  padding:0;
  font-family:"Cormorant SC","Times New Roman",serif;
  font-size:clamp(12px,.82vw,15px);
  font-weight:600;
  line-height:1;
  letter-spacing:.065em;
  text-transform:uppercase;
  color:rgba(255,225,151,.74);
  text-shadow:0 1px 7px rgba(0,0,0,.88),0 0 8px rgba(255,190,74,.24);
  opacity:.82;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  transition:opacity .2s ease,color .2s ease,text-shadow .2s ease;
}

@media (hover:hover) and (pointer:fine){
  .library-page .library-personal-growth-hotspot:hover + .library-personal-growth-label{
    opacity:1;
    color:#ffe4a4;
    text-shadow:0 1px 7px rgba(0,0,0,.88),0 0 10px rgba(255,201,94,.50);
  }
}

.library-page .library-personal-growth-hotspot:focus-visible + .library-personal-growth-label{
  opacity:1;
  color:#ffe4a4;
  text-shadow:0 1px 7px rgba(0,0,0,.88),0 0 10px rgba(255,201,94,.50);
}

@media (hover:none) and (pointer:coarse){
  .library-page .library-personal-growth-label{
    font-size:14px;
    opacity:.94;
  }
}