/* Fiction page owner: scene, interactions, dialogs, and touch modes. */
/* =========================================================
   FICTION DESKTOP — width-first artwork display
   The previous layout fit the image by height, which exposed
   blurred side bars on wider desktop viewports. This version
   fits the artwork by width so both left and right edges of
   the image remain visible across the screen.
   ========================================================= */
.fiction-page{
  margin:0;
  min-height:100vh;
  background:#05030a;
}

.fiction-page .fiction-scene-shell{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:hidden;
  background:#05030a;
}

.fiction-page .fiction-art-stage{
  position:relative;
  flex:0 0 auto;
  width:100vw;
  line-height:0;
}

.fiction-page .fiction-scene-shell::before,
.fiction-page .fiction-scene-shell::after{
  content:none;
  display:none;
}

.fiction-page .fiction-scene-art{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  max-height:none;
  object-fit:contain;
  box-shadow:none;
}

/* =========================================================
   FICTION DESKTOP — hover menu
   50% translucent panel; individual menu labels glow on hover.
   Desktop only; mobile remains unchanged.
   ========================================================= */
.fiction-page .fiction-cover-zone{
  position:absolute;
  z-index:5;
  left:40.23%;
  top:16.93%;
  width:18.60%;
  height:53.30%;
  cursor:pointer;
}

/* Invisible hover bridge between the cover and its menu.
   This prevents the panel from vanishing while the pointer
   crosses the visual gap to reach the menu. */
.fiction-page .fiction-cover-zone::before{
  content:"";
  position:absolute;
  top:-18%;
  right:100%;
  width:74%;
  height:136%;
  background:transparent;
  pointer-events:auto;
}

.fiction-page .fiction-cover-menu{
  position:absolute;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  top:0;
  bottom:0;
  left:auto;
  right:130%;
  width:100%;
  height:auto;
  transform:translate(18px,0) scale(.985);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  padding:clamp(25px,1.65vw,31px) clamp(24px,1.75vw,34px);
  border:1px solid rgba(239,198,107,.82);
  border-radius:3px;
  background:rgba(13,5,25,.50);
  -webkit-backdrop-filter:blur(3px) saturate(1.08);
  backdrop-filter:blur(3px) saturate(1.08);
  box-shadow:
    0 20px 48px rgba(0,0,0,.52),
    0 0 0 4px rgba(76,37,104,.20) inset,
    0 0 0 5px rgba(239,198,107,.13) inset,
    0 0 25px rgba(118,52,178,.20),
    inset 0 0 32px rgba(76,27,110,.22);
  clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
  transition:opacity .26s ease,transform .26s ease,visibility .26s ease;
  line-height:1;
}

/* Small crown-like ornaments make the panel feel carved rather than UI-flat. */
.fiction-page .fiction-cover-menu::before,
.fiction-page .fiction-cover-menu::after{
  content:"✦  ◆  ✦";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  color:#f2cb72;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(8px,.58vw,11px);
  letter-spacing:.20em;
  line-height:1;
  white-space:nowrap;
  text-shadow:
    0 0 7px rgba(255,222,141,.78),
    0 0 14px rgba(135,65,181,.42);
}

.fiction-page .fiction-cover-menu::before{top:9px}
.fiction-page .fiction-cover-menu::after{bottom:9px}

.fiction-page .fiction-cover-menu ul{
  width:100%;
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
}

/* Fine inner filigree line. */
.fiction-page .fiction-cover-menu ul::before{
  content:"";
  position:absolute;
  inset:-10px -10px;
  pointer-events:none;
  border-top:1px solid rgba(239,198,107,.20);
  border-bottom:1px solid rgba(239,198,107,.20);
  box-shadow:
    0 -1px 0 rgba(98,51,130,.24) inset,
    0 1px 0 rgba(98,51,130,.24) inset;
}

.fiction-page .fiction-cover-menu li{
  position:relative;
  z-index:1;
  padding:clamp(7px,.63vw,12px) clamp(10px,.65vw,13px);
  color:#f3d584;
  font-family:"Cormorant SC",Georgia,"Times New Roman",serif;
  font-size:clamp(15px,1.08vw,21px);
  font-weight:600;
  letter-spacing:.14em;
  text-align:center;
  cursor:pointer;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  text-shadow:0 1px 2px rgba(0,0,0,.92);
  transition:
    color .18s ease,
    text-shadow .18s ease;
}


.fiction-page .fiction-cover-menu .fiction-menu-royal-road{
  white-space:nowrap;
}

.fiction-page .fiction-menu-royal-road-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.fiction-page .fiction-cover-menu li + li{
  border-top:1px solid rgba(239,198,107,.16);
}

/* Keep hover crisp: glow only, no scaling or tracking shift. */
.fiction-page .fiction-cover-menu li:hover{
  color:#fff8d8;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 0 5px rgba(255,248,211,.78),
    0 0 11px rgba(255,211,104,.72),
    0 0 20px rgba(177,96,238,.38);
}

@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .fiction-page .fiction-cover-zone:hover .fiction-cover-menu,
  .fiction-page .fiction-cover-zone:focus-within .fiction-cover-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(0,0) scale(1);
  }
}

/* Tablet: keep the Fiction book-information menu visible by default.
   Why the wider touch-aware range: real tablets do not all report <=1023 CSS px.
   Examples include 1024px portrait and up to 1366px landscape.
   Desktop/laptop widths above 1023 stay hover-driven unless the device reports
   coarse/no-hover input. */
@media (min-width:768px) and (max-width:1023px),
       (min-width:768px) and (max-width:1366px) and (hover:none),
       (min-width:768px) and (max-width:1366px) and (pointer:coarse){
  .fiction-page .fiction-cover-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(0,0) scale(1);
  }
}


/* =========================================================
   FICTION TOUCH — cover information menu always visible
   Desktop remains hover-driven.
   ========================================================= */

/* Portrait touch keeps the physical viewport, so capability media works. */
@media (hover:none) and (pointer:coarse){
  .fiction-page.fiction-portrait-stage .fiction-cover-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(0,0) scale(1);
  }
}

/* Fiction landscape virtualizes the CSS viewport to 1672px, so width-based
   mobile/tablet queries no longer identify the device. Use the explicit
   runtime state class instead. */
html.fiction-virtual-landscape .fiction-page .fiction-cover-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(0,0) scale(1);
}


/* =========================================================
   FICTION DESKTOP v10.55 — simple gem aura
   A restrained soft halo around the gemstone only.
   ========================================================= */
.fiction-page .fiction-magic-streams{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  mix-blend-mode:screen;
}

.fiction-page .fiction-simple-aura{
  opacity:.58;
  filter:url(#fiction-soft-glow);
  transform-box:fill-box;
  transform-origin:center;
  animation:fiction-simple-aura-breathe 3.6s ease-in-out infinite;
}

@keyframes fiction-simple-aura-breathe{
  0%,100%{
    opacity:.44;
    transform:scale(.96);
  }
  50%{
    opacity:.64;
    transform:scale(1.035);
  }
}

@media (prefers-reduced-motion:reduce){
  .fiction-page .fiction-simple-aura{
    animation:none;
  }
}


/* =========================================================
   FICTION DESKTOP v10.57 — four frame-gem twinkles
   Soft, slow, unsynchronised pulses like distant starlight.
   ========================================================= */
.fiction-page .fiction-frame-gem-glow{
  position:absolute;
  inset:0;
  z-index:4;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  mix-blend-mode:screen;
}

.fiction-page .frame-gem-twinkle{
  opacity:.18;
  filter:url(#fiction-frame-star-soft);
  transform-box:fill-box;
  transform-origin:center;
  animation-name:fiction-frame-gem-twinkle;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

.fiction-page .frame-gem-top{
  animation-duration:5.8s;
  animation-delay:-1.4s;
}

.fiction-page .frame-gem-right{
  animation-duration:6.6s;
  animation-delay:-4.2s;
}

.fiction-page .frame-gem-bottom{
  animation-duration:7.1s;
  animation-delay:-2.7s;
}

.fiction-page .frame-gem-left{
  animation-duration:6.2s;
  animation-delay:-5.0s;
}

@keyframes fiction-frame-gem-twinkle{
  0%, 100%{
    opacity:.12;
    transform:scale(.96);
  }
  42%{
    opacity:.18;
    transform:scale(.99);
  }
  50%{
    opacity:.52;
    transform:scale(1.055);
  }
  58%{
    opacity:.20;
    transform:scale(1);
  }
}

@media (prefers-reduced-motion:reduce){
  .fiction-page .frame-gem-twinkle{
    animation:none;
    opacity:.18;
  }
}


/* =========================================================
   FICTION DESKTOP NAVIGATION v10.81
   Mirrors the homepage top navigation exactly.
   Desktop only; mobile remains untouched.
   ========================================================= */
.fiction-page .fiction-topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:20;
  display:flex;
  gap:20px;
  padding:24px clamp(24px,3vw,54px);
  background:transparent;
  color:var(--ivory);
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}
.fiction-page .fiction-topbar .brand-mini,
.fiction-page .fiction-topbar .nav a,
.fiction-page .fiction-topbar .nav-official{
  color:#f4e5c8;
}
.fiction-page .fiction-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-page .fiction-topbar .nav a,
.fiction-page .fiction-topbar .nav-official{
  border-color:transparent;
  background:transparent;
}
.fiction-page .fiction-topbar .nav a:hover,
.fiction-page .fiction-topbar .nav a:focus-visible,
.fiction-page .fiction-topbar .nav-official:hover,
.fiction-page .fiction-topbar .nav-official:focus-visible{
  border-color:rgba(239,198,107,.34);
  background:rgba(8,6,15,.16);
}


/* =========================================================
   FICTION NAV v10.86 — robust SZ flag dropdown
   Hidden state is NOT dependent on hover/pointer media queries.
   ========================================================= */
.fiction-page .fiction-topbar{
  align-items:flex-start;
  justify-content:space-between;
}

.fiction-page .fiction-nav-dropdown{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
}

.fiction-page .fiction-nav-trigger{
  position:relative;
  z-index:22;
}

/* Invisible hover corridor so the flag stays open while the cursor
   travels from SZ down into the menu. */
.fiction-page .fiction-nav-dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:-4px;
  width:153px;
  height:14px;
  z-index:20;
  background:transparent;
  pointer-events:auto;
}

/* CRITICAL: hidden by default on every desktop environment.
   This overrides the global .nav { display:flex } styling safely. */
.fiction-page .fiction-nav-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  z-index:21;

  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;

  min-width:136px;
  padding:12px 14px 28px;
  box-sizing:border-box;

  clip-path:polygon(
    0 0,
    100% 0,
    100% 86%,
    50% 100%,
    0 86%
  );

  background:rgba(11,5,24,.50);
  -webkit-backdrop-filter:blur(5px) saturate(1.08);
  backdrop-filter:blur(5px) saturate(1.08);

  border-top:1px solid rgba(239,198,107,.58);
  box-shadow:
    inset 1px 0 0 rgba(239,198,107,.42),
    inset -1px 0 0 rgba(239,198,107,.42),
    inset 0 1px 0 rgba(255,226,151,.18),
    inset 0 0 20px rgba(98,49,132,.20),
    0 16px 30px rgba(0,0,0,.38);
  filter:drop-shadow(0 3px 4px rgba(239,198,107,.16));

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px);
  transform-origin:top left;

  transition:
    opacity .20s ease,
    transform .20s ease,
    visibility .20s ease;
}

.fiction-page .fiction-nav-menu a{
  display:block;
  width:100%;
  font-family:"Cormorant SC",Georgia,"Times New Roman",serif;
  padding:8px 12px;
  white-space:nowrap;
  text-align:center;
}

/* Reveal only when the SZ control/dropdown is actually hovered
   or keyboard-focused. */
.fiction-page .fiction-nav-dropdown:hover .fiction-nav-menu,
.fiction-page .fiction-nav-dropdown:focus-within .fiction-nav-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.fiction-page .fiction-topbar .nav-official{
  margin-left:auto;
  font-family:Garamond,Georgia,"Times New Roman",serif;
}


/* =========================================================
   FICTION OFFICIAL CONTACT v10.93 — professional contact dialog
   Desktop Fiction only.
   ========================================================= */


/* FICTION CONTACT — keep copyright name together */


/* =========================================================
   FICTION LADY MESSAGE v10.97 — desktop hover speech
   ========================================================= */
.fiction-page .fiction-lady-zone{
  position:absolute;
  z-index:6;
  left:62.5%;
  top:12%;
  width:27%;
  height:65%;
  cursor:default;
}

.fiction-page .fiction-lady-speech{
  position:absolute;
  left:57.4%;
  top:73.85%;
  right:auto;
  width:min(390px,30vw);
  box-sizing:border-box;
  padding:22px 25px;
  border:1px solid rgba(239,198,107,.58);
  border-radius:18px;
  background:rgba(11,5,24,.50);
  color:#f4e5c8;
  font-family:Garamond,"EB Garamond","Cormorant Garamond","Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(18px,1.12vw,22px);
  line-height:1.56;
  letter-spacing:.005em;
  text-align:left;
  box-shadow:
    inset 0 0 22px rgba(116,65,155,.16),
    0 14px 36px rgba(0,0,0,.46);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.985);
  transform-origin:center;
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}

/* Compact comic-style speech tail.
   Short, lightly curved, and aimed toward the lady's face. */
.fiction-page .fiction-lady-tail{
  position:absolute;
  z-index:2;
  left:20%;
  top:-29px;
  width:50px;
  height:30px;
  overflow:visible;
  pointer-events:none;
  transform:translateX(-50%);
}

.fiction-page .fiction-lady-tail-border-cover{
  fill:rgb(11,5,24);
}

.fiction-page .fiction-lady-tail-fill{
  fill:rgba(11,5,24,.50);
}

.fiction-page .fiction-lady-tail-line{
  fill:none;
  stroke:rgba(239,198,107,.58);
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.fiction-page .fiction-lady-speech p{
  position:relative;
  z-index:3;
  margin:0;
}

.fiction-page .fiction-lady-speech span{
  color:#f3d584;
}

@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .fiction-page .fiction-lady-zone:hover .fiction-lady-speech,
  .fiction-page .fiction-lady-zone:focus-within .fiction-lady-speech{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%) scale(1);
  }
}


/* Artwork wrapper used by every mode. */
.fiction-page .fiction-art-stage > picture{
  display:block;
  width:100%;
  line-height:0;
}

/* =========================================================
   FICTION DESKTOP — viewport artwork behavior
   Match the immersive desktop portals: the 1672 × 941 artwork
   covers one viewport, preserves its aspect ratio, and is anchored
   to the top so any vertical excess is cropped from the bottom only.
   Hotspots remain attached to the artwork stage.
   Mobile/tablet remain unchanged.
   ========================================================= */
@media (min-width:768px){
  .fiction-page{
    width:100vw;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
  }

  .fiction-page .fiction-scene-shell{
    width:100vw;
    height:100vh;
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:0;
    overflow:hidden;
  }

  .fiction-page .fiction-art-stage{
    position:relative;
    flex:0 0 auto;
    width:max(100vw,177.68vh);
    aspect-ratio:1672 / 941;
    margin:0;
    line-height:0;
    overflow:hidden;
  }

  .fiction-page .fiction-art-stage > picture{
    display:block;
    width:100%;
    height:100%;
    margin:0;
    line-height:0;
  }

  .fiction-page .fiction-scene-art{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    margin:0;
    object-fit:cover;
    object-position:50% 50%;
  }
}


/* =========================================================
   FICTION TABLET — menu fit + touch feedback
   Tablet only. Keep the always-visible panel from v13.58, nudge the
   longest Royal Road label left so it remains inside the frame, and
   suppress the browser's blue tap-highlight flash on the cover/menu.
   Desktop hover behavior and the text-first mobile experience are unchanged.
   ========================================================= */
@media (min-width:768px) and (max-width:1023px),
       (min-width:768px) and (max-width:1366px) and (hover:none),
       (min-width:768px) and (max-width:1366px) and (pointer:coarse){
  .fiction-page .fiction-menu-royal-road-link{
    display:inline-block;
    transform:translateX(-18px);
  }

  .fiction-page .fiction-cover-zone,
  .fiction-page .fiction-cover-hotspot,
  .fiction-page .fiction-cover-menu,
  .fiction-page .fiction-cover-menu li,
  .fiction-page .fiction-menu-trigger{
    -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
    tap-highlight-color:transparent;
  }

  .fiction-page .fiction-cover-hotspot,
  .fiction-page .fiction-menu-trigger{
    touch-action:manipulation;
  }

  .fiction-page .fiction-cover-hotspot:active,
  .fiction-page .fiction-menu-trigger:active,
  .fiction-page .fiction-menu-trigger:focus:not(:focus-visible){
    background:transparent !important;
    box-shadow:none !important;
  }

  .fiction-page .fiction-menu-trigger:focus:not(:focus-visible){
    outline:none !important;
  }
}
/* Cover navigation geometry belongs to the cover component, not a viewport
   breakpoint. Portrait-stage still reports the physical phone width to CSS
   media queries even though its artwork is a 1672px master canvas. */
.fiction-page .fiction-cover-hotspot{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  background:transparent;
  text-decoration:none;
  cursor:pointer;
}
.fiction-page .fiction-cover-menu{z-index:2;}

@media (min-width:768px),
       (max-width:767px) and (hover:none) and (pointer:coarse){
  .fiction-page .fiction-menu-trigger{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    letter-spacing:inherit;
    text-align:inherit;
    cursor:pointer;
  }

  .fiction-page .fiction-title-dialog{
    /* Common frame/skin; active mode owns geometry and typography. */
    --fiction-body-size:var(--fd-body-size,clamp(19px,1.22vw,22px));
    position:var(--fd-position,relative);
    width:var(--fd-dialog-width,min(760px,calc(100vw - 120px)));
    height:var(--fd-dialog-height,auto);
    max-width:var(--fd-dialog-max-width,none);
    max-height:var(--fd-dialog-max-height,min(78vh,760px));
    box-sizing:border-box;
    padding:0;
    overflow:hidden;
    border:1.5px solid rgba(221,184,104,.92);
    border-radius:22px;
    background:
      radial-gradient(circle at 50% -8%,rgba(157,82,201,.18),transparent 39%),
      linear-gradient(180deg,rgba(28,10,47,.95),rgba(8,3,17,.965));
    color:#f5e8cf;
    box-shadow:
      0 30px 92px rgba(0,0,0,.76),
      0 0 30px rgba(110,49,157,.18),
      0 0 0 1px rgba(78,41,101,.72),
      inset 0 1px 0 rgba(255,241,196,.13),
      inset 0 -1px 0 rgba(121,73,31,.20),
      inset 0 0 58px rgba(95,37,137,.13);
    -webkit-backdrop-filter:blur(10px) saturate(1.08);
    backdrop-filter:blur(10px) saturate(1.08);
  }

  /* Quiet inner line: a jewelry-box finish rather than a second heavy frame. */
  .fiction-page .fiction-title-dialog::before{
    content:"";
    position:absolute;
    inset:7px;
    z-index:1;
    pointer-events:none;
    border:1px solid rgba(244,216,149,.26);
    border-radius:15px;
    box-shadow:
      inset 0 0 0 1px rgba(91,52,24,.13),
      0 0 12px rgba(255,222,143,.025);
  }

  /* A single restrained metallic glint across the lacquered top edge. */
  .fiction-page .fiction-title-dialog::after{
    content:"";
    position:absolute;
    z-index:1;
    top:4px;
    left:28px;
    right:28px;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,231,166,.42) 24%,rgba(255,242,195,.62) 50%,rgba(255,231,166,.42) 76%,transparent);
    opacity:.72;
  }

  .fiction-page .fiction-title-dialog::backdrop{
    background:rgba(3,1,8,.66);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
  }

  .fiction-page .fiction-title-dialog-shell{
    position:relative;
    z-index:2;
    overflow:auto;
    width:var(--fd-shell-width,auto);
    height:var(--fd-shell-height,auto);
    max-width:var(--fd-shell-max-width,none);
    max-height:var(--fd-shell-max-height,min(78vh,760px));
    box-sizing:border-box;
    padding:var(--fd-shell-padding,30px clamp(48px,4.6vw,68px) 16px);
    scrollbar-width:none;
  }
  .fiction-page .fiction-title-dialog-shell::-webkit-scrollbar{display:none;}

  /* Two quiet royal stars are the only decorative motif on the frame. */
  .fiction-page .fiction-title-frame-star{
    position:absolute;
    z-index:4;
    left:50%;
    width:118px;
    height:18px;
    transform:translateX(-50%);
    color:#e8c875;
    font-family:Georgia,"Times New Roman",serif;
    font-size:16px;
    line-height:18px;
    text-align:center;
    pointer-events:none;
    text-shadow:0 0 7px rgba(240,202,113,.28),0 0 16px rgba(126,71,186,.16);
  }
  .fiction-page .fiction-title-frame-star.top{top:16px;}
  /* Bottom ornament lives in its own footer zone so content can never collide with it.
     With 16px shell padding below an 18px-high star, its center stays 18px
     inside the 7px inset inner border. */
  .fiction-page .fiction-title-frame-star.bottom{
    position:relative;
    display:block;
    left:auto;
    top:auto;
    bottom:auto;
    transform:none;
    margin:8px auto 0;
  }
  .fiction-page .fiction-title-frame-star::before,
  .fiction-page .fiction-title-frame-star::after{
    content:"";
    position:absolute;
    top:50%;
    width:42px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(219,177,91,.55));
  }
  .fiction-page .fiction-title-frame-star::before{left:0;}
  .fiction-page .fiction-title-frame-star::after{right:0;transform:scaleX(-1);}

  .fiction-page .fiction-title-dialog-inner{
    position:relative;
    z-index:3;
    padding:5px 0 8px;
  }

  .fiction-page .fiction-title-dialog-heading{
    margin:0;
    color:#f4d98d;
    font-family:"Cormorant SC",Georgia,"Times New Roman",serif;
    font-size:var(--fd-heading-size,clamp(31px,2.45vw,44px));
    font-weight:600;
    letter-spacing:.115em;
    line-height:1.04;
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 15px rgba(209,147,255,.20);
  }

  .fiction-page .fiction-title-dialog-kicker{
    margin:var(--fd-kicker-margin,7px 0 17px);
    color:rgba(244,229,200,.80);
    font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    font-size:var(--fd-kicker-size,clamp(16px,1.08vw,19px));
    font-style:italic;
    font-weight:500;
    letter-spacing:.06em;
    text-align:center;
    text-transform:none;
  }

  .fiction-page .fiction-title-dialog-divider{
    width:min(220px,44%);
    height:1px;
    margin:var(--fd-divider-margin,0 auto 21px);
    border:0;
    background:linear-gradient(90deg,transparent,rgba(239,198,107,.42),transparent);
  }

  .fiction-page .fiction-title-dialog-copy{
    margin:0 auto;
    max-width:var(--fd-copy-max,660px);
    font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    font-size:var(--fiction-body-size);
    font-weight:500;
    line-height:1.62;
    letter-spacing:.002em;
    text-align:left;
  }

  .fiction-page .fiction-title-dialog-copy p{margin:0 0 .92em;}
  .fiction-page .fiction-title-dialog-copy p:last-child{margin-bottom:0;}

  .fiction-page .fiction-title-dialog-copy .fiction-title-resonance{
    color:#f3d584;
    font-style:italic;
  }

  /* Genre uses the same restrained royal frame, but enters straight into the body. */
  .fiction-page .fiction-genre-dialog .fiction-title-dialog-heading{
    max-width:var(--fd-genre-heading-max,660px);
    margin-left:auto;
    margin-right:auto;
    font-size:var(--fd-genre-heading-size,clamp(28px,2.1vw,38px));
    line-height:1.08;
    letter-spacing:.09em;
  }

  .fiction-page .fiction-genre-dialog .fiction-title-dialog-divider{
    margin-top:8px;
    margin-bottom:7px;
  }

  /* Synopsis has no kicker, so its heading flows directly into the divider. */
  .fiction-page .fiction-synopsis-dialog .fiction-title-dialog-divider{
    margin-top:8px;
    margin-bottom:14px;
  }

  /* Characters — a restrained royal gallery rather than a directory of UI cards. */
  .fiction-page .fiction-characters-dialog{
    width:min(1040px,calc(100vw - 88px));
    max-height:min(86vh,840px);
  }

  .fiction-page .fiction-characters-dialog .fiction-title-dialog-shell{
    max-height:min(86vh,840px);
    padding-left:clamp(44px,4.4vw,68px);
    padding-right:clamp(44px,4.4vw,68px);
  }

  .fiction-page .fiction-characters-bookline{
    margin:8px auto 0;
    color:rgba(242,221,177,.84);
    font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    font-size:clamp(18px,1.15vw,20px);
    font-style:italic;
    font-weight:500;
    line-height:1.25;
    text-align:center;
    letter-spacing:.015em;
  }

  .fiction-page .fiction-characters-bookline span{
    color:#e8c975;
  }

  .fiction-page .fiction-characters-dialog .fiction-title-dialog-divider{
    margin-top:12px;
    margin-bottom:24px;
  }

  .fiction-page .fiction-character-grid{
    display:flex;
    flex-direction:column;
    gap:0;
    width:100%;
    margin:0 auto;
    align-items:center;
  }

  /* Characters — editorial royal ledger.
     Identity sits on the left, relationship context on the right,
     with one restrained gilt rule separating each entry. */
  .fiction-page .fiction-character-card{
    position:relative;
    width:min(92%,900px);
    min-width:0;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:minmax(220px,.78fr) minmax(0,1.62fr);
    grid-template-rows:auto auto;
    column-gap:clamp(34px,4vw,60px);
    row-gap:2px;
    padding:24px 0 25px 54px;
    border:0;
    border-bottom:1px solid rgba(226,190,106,.38);
    border-radius:0;
    background:none;
    box-shadow:none;
  }

  .fiction-page .fiction-character-card:last-child{
    border-bottom:0;
  }

  /* Small insignia: rank marker, not decoration floating over a frame. */
  .fiction-page .fiction-character-card::before{
    content:attr(data-emblem);
    position:absolute;
    left:8px;
    top:24px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(227,188,102,.48);
    border-radius:50%;
    background:rgba(28,10,42,.58);
    color:#efd17d;
    font-family:Georgia,"Times New Roman",serif;
    font-size:14px;
    line-height:1;
    text-shadow:0 0 6px rgba(240,203,115,.14);
  }

  .fiction-page .fiction-character-card::after{
    content:none;
  }

  .fiction-page .fiction-character-name{
    position:relative;
    z-index:1;
    grid-column:1;
    grid-row:1;
    align-self:start;
    margin:0;
    color:#f2d78a;
    font-family:"Cormorant SC",Georgia,"Times New Roman",serif;
    font-size:clamp(23px,1.55vw,27px);
    font-weight:600;
    line-height:1.04;
    letter-spacing:.085em;
    text-align:left;
    text-shadow:0 1px 2px rgba(0,0,0,.58);
  }

  .fiction-page .fiction-character-honorific{
    font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    font-size:.82em;
    font-style:italic;
    font-weight:600;
    letter-spacing:.03em;
    color:rgba(242,215,138,.94);
  }

  .fiction-page .fiction-character-proper-name{
    font-family:"Cormorant SC",Georgia,"Times New Roman",serif;
    font-style:normal;
    font-weight:600;
    letter-spacing:.085em;
    color:#f2d78a;
  }

  .fiction-page .fiction-character-role{
    position:relative;
    z-index:1;
    grid-column:1;
    grid-row:2;
    margin:3px 0 0;
    color:rgba(246,232,205,.86);
    font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    font-size:var(--fiction-body-size);
    font-style:italic;
    font-weight:500;
    line-height:1.28;
    text-align:left;
  }

  .fiction-page .fiction-character-role::after{
    content:none;
  }

  .fiction-page .fiction-character-relationships{
    position:relative;
    z-index:1;
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
    margin:0;
    max-width:none;
    color:rgba(247,234,210,.94);
    font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    font-size:var(--fiction-body-size);
    font-weight:500;
    line-height:1.46;
    text-align:left;
  }

  .fiction-page .fiction-character-relationships strong{
    display:block;
    margin:0 0 4px;
    color:#dfbd68;
    font-size:.72em;
    font-weight:650;
    line-height:1.1;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .fiction-page .fiction-genre-tags{
    margin:22px auto 0;
    max-width:660px;
    color:#e7c97c;
    font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    font-size:clamp(17px,1.08vw,19px);
    font-weight:600;
    line-height:1.55;
    letter-spacing:.025em;
    text-align:center;
  }

  /* Lore — a compact royal codex within the established Fiction frame. */
  .fiction-page .fiction-lore-dialog{
    width:min(920px,calc(100vw - 96px));
    max-height:min(86vh,840px);
  }

  .fiction-page .fiction-lore-dialog .fiction-title-dialog-shell{
    max-height:min(86vh,840px);
    padding-left:clamp(50px,5vw,78px);
    padding-right:clamp(50px,5vw,78px);
  }

  .fiction-page .fiction-lore-dialog .fiction-title-dialog-divider{
    margin-top:8px;
    margin-bottom:20px;
  }

  .fiction-page .fiction-lore-section{
    margin:0 auto;
    max-width:760px;
  }

  .fiction-page .fiction-lore-section + .fiction-lore-section{
    margin-top:28px;
    padding-top:25px;
    border-top:1px solid rgba(226,190,106,.30);
  }

  .fiction-page .fiction-lore-section-title{
    margin:0 0 14px;
    color:#e8c975;
    font-family:"Cormorant SC",Georgia,"Times New Roman",serif;
    font-size:clamp(21px,1.45vw,26px);
    font-weight:600;
    line-height:1.15;
    letter-spacing:.075em;
    text-align:center;
  }

  .fiction-page .fiction-lore-dialog .fiction-title-dialog-copy{
    max-width:760px;
  }

  .fiction-page .fiction-lore-dialog .fiction-title-dialog-copy strong{
    color:#efd17d;
    font-weight:600;
  }

  .fiction-page .fiction-lore-dialog .fiction-title-dialog-copy em{
    color:rgba(247,229,193,.92);
  }

  .fiction-page .fiction-lore-compact-title{
    margin:22px 0 12px;
    color:#dfbd68;
    font-family:"Cormorant SC",Georgia,"Times New Roman",serif;
    font-size:clamp(18px,1.22vw,21px);
    font-weight:600;
    line-height:1.2;
    letter-spacing:.09em;
    text-align:left;
  }

  .fiction-page .fiction-lore-compact-title:first-child{
    margin-top:0;
  }

  /* World — shrink-wrap the popup around the rendered map itself.
     The map frame contributes 8px (1px border + 7px padding) per side, while the shell
     contributes 60px. This places the visible map edge on the same horizontal coordinate
     as TITLE body copy: about 62px in from the popup's inner frame on both left and right. */
  .fiction-page .fiction-world-dialog{
    width:fit-content;
    max-width:calc(100vw - 120px);
    max-height:min(92vh,980px);
  }

  .fiction-page .fiction-world-dialog .fiction-title-dialog-shell{
    width:fit-content;
    max-width:100%;
    max-height:min(92vh,980px);
    padding:30px 60px 18px;
  }

  .fiction-page .fiction-world-dialog .fiction-title-dialog-divider{
    margin-top:8px;
    margin-bottom:18px;
  }

  .fiction-page .fiction-world-map-wrap{
    position:relative;
    width:fit-content;
    max-width:100%;
    margin:0 auto;
    padding:7px;
    box-sizing:border-box;
    border:1px solid rgba(226,190,106,.46);
    border-radius:12px;
    background:rgba(8,3,17,.58);
    box-shadow:
      0 16px 38px rgba(0,0,0,.34),
      inset 0 0 0 1px rgba(255,235,178,.08);
  }

  .fiction-page .fiction-world-map{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:calc(min(92vh,980px) - 126px);
    object-fit:contain;
    border-radius:7px;
    user-select:none;
    -webkit-user-drag:none;
  }

  .fiction-page .fiction-title-close{
    position:absolute;
    z-index:5;
    top:13px;
    right:19px;
    width:28px;
    height:28px;
    padding:0;
    border:0;
    background:transparent;
    color:rgba(244,229,200,.76);
    font-family:Georgia,"Times New Roman",serif;
    font-size:27px;
    font-weight:400;
    line-height:26px;
    cursor:pointer;
    text-shadow:0 0 9px rgba(182,106,236,.14);
    transition:color .18s ease,text-shadow .18s ease,transform .18s ease;
  }
  .fiction-page .fiction-title-close:hover,
  .fiction-page .fiction-title-close:focus-visible{
    color:#fff1bd;
    text-shadow:0 0 10px rgba(255,211,104,.30),0 0 18px rgba(177,96,238,.18);
    transform:scale(1.06);
    outline:none;
  }
}


/* =========================================================
   FICTION SMALL-VIEWPORT FALLBACK
   Used only before/outside the touch portrait stage. The active portrait
   stage owns its own master geometry below, so these rules never fight it.
   ========================================================= */
@media (max-width:767px){
  .fiction-page:not(.fiction-portrait-stage) .fiction-cover-zone,
  .fiction-page .fiction-magic-streams,
  .fiction-page .fiction-frame-gem-glow,
  .fiction-page .fiction-topbar,
  .fiction-page .fiction-lady-zone{
    display:none !important;
  }

  .fiction-page:not(.fiction-portrait-stage) .fiction-scene-shell{
    height:100svh !important;
    min-height:100svh !important;
    display:block !important;
    overflow:hidden !important;
    background:#05030a;
  }

  .fiction-page:not(.fiction-portrait-stage) .fiction-art-stage{
    width:100vw !important;
    height:100svh !important;
    margin:0 !important;
    transform:none !important;
  }

  .fiction-page:not(.fiction-portrait-stage) .fiction-art-stage > picture{
    display:block;
    width:100%;
    height:100%;
  }

  .fiction-page:not(.fiction-portrait-stage) .fiction-scene-art{
    display:block;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  .fiction-page:not(.fiction-portrait-stage) .fiction-title-dialog,
  .fiction-page .contact-dialog{
    display:none !important;
  }
}

@media (max-width:600px){
  .room-notice{padding:38px 24px 28px}
}

/* Tablet tap state owns visibility while the SZ trigger remains focused.
   Without a closed-state rule, :focus-within can leave the menu on screen
   after a second tap even though aria-expanded is false. */
@media (min-width:768px){
  html.szm-tablet-nav-mode .fiction-page .fiction-nav-dropdown:not(.szm-open) .fiction-nav-menu{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
  }
  html.szm-tablet-nav-mode .fiction-page .fiction-nav-dropdown.szm-open .fiction-nav-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
}

/* =========================================================
   FICTION TOUCH LANDSCAPE — 1672 × 941 master
   Activated only by fiction.js through html.fiction-virtual-landscape.
   ========================================================= */
html.fiction-virtual-landscape{
  width:1672px;
  min-width:1672px;
  overflow-x:hidden;
  overflow-y:auto;
  background:#07040f;
}

html.fiction-virtual-landscape body.fiction-page{
  width:1672px;
  min-width:1672px;
  height:auto;
  min-height:941px;
  overflow-x:hidden;
  overflow-y:auto;
  background:#05030a;
}

html.fiction-virtual-landscape body.fiction-page .fiction-scene-shell{
  width:1672px;
  height:941px;
  min-height:941px;
  display:block;
  overflow:hidden;
}

html.fiction-virtual-landscape body.fiction-page .fiction-art-stage{
  width:1672px;
  height:941px;
  aspect-ratio:auto;
  margin:0;
}

html.fiction-virtual-landscape body.fiction-page .fiction-scene-art{
  width:1672px;
  height:941px;
  object-fit:cover;
}

/* =========================================================
   FICTION TOUCH PORTRAIT — 1672 × 941 master stage
   fiction.js adds .fiction-portrait-stage only on touch portrait devices.
   This single owner works for phones and tablets; no physical-width gate.
   ========================================================= */
.fiction-page.fiction-portrait-stage .fiction-scene-shell{
  width:1672px;
  height:941px;
  min-height:941px;
  display:block;
  overflow:hidden;
  background:#05030a;
}

.fiction-page.fiction-portrait-stage .fiction-art-stage{
  position:relative;
  width:1672px;
  height:941px;
  aspect-ratio:auto;
  margin:0;
  transform:none;
  overflow:hidden;
}

.fiction-page.fiction-portrait-stage .fiction-art-stage > picture{
  display:block;
  width:1672px;
  height:941px;
  margin:0;
}

.fiction-page.fiction-portrait-stage .fiction-scene-art{
  display:block;
  width:1672px;
  height:941px;
  max-width:none;
  max-height:none;
  margin:0;
  object-fit:cover;
  object-position:center center;
}

/* =========================================================
   FICTION PORTRAIT TOUCH — canonical menu controls + dialogs
   The component styling above is shared with desktop; this block only
   corrects physical-vw sizing and the legacy mobile dialog hide.
   ========================================================= */
@media (max-width:767px) and (hover:none) and (pointer:coarse){

  /* Menu lives on the 1672px master canvas. Match desktop-at-master values. */
  .fiction-page.fiction-portrait-stage .fiction-cover-menu{
    padding:27.588px 29.26px;
  }

  .fiction-page.fiction-portrait-stage .fiction-cover-menu::before,
  .fiction-page.fiction-portrait-stage .fiction-cover-menu::after{
    font-size:9.698px;
  }

  .fiction-page.fiction-portrait-stage .fiction-cover-menu li{
    padding:10.534px 10.868px;
    font-size:18.058px;
  }

  .fiction-page.fiction-portrait-stage .fiction-menu-trigger{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    appearance:none;
    -webkit-appearance:none;
    background:transparent;
    color:inherit;
    font:inherit;
    letter-spacing:inherit;
    line-height:inherit;
    text-align:inherit;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }

}

/* =========================================================
   FICTION DIALOG MODE — PORTRAIT TOUCH
   Owns popup geometry/typography independently from landscape.
   ========================================================= */
@media (orientation:portrait) and (hover:none) and (pointer:coarse){
  .fiction-page.fiction-portrait-stage{
    --fd-body-size:18px;
    --fd-dialog-width:min(680px,74svh);
    --fd-dialog-height:min(330px,80svw);
    --fd-dialog-max-width:min(680px,74svh);
    --fd-dialog-max-height:min(330px,80svw);
    --fd-shell-width:100%;
    --fd-shell-height:100%;
    --fd-shell-max-width:none;
    --fd-shell-max-height:none;
    --fd-shell-padding:38px 46px 18px;
    --fd-heading-size:34px;
    --fd-kicker-size:17px;
    --fd-kicker-margin:5px 0 12px;
    --fd-divider-margin:0 auto 15px;
    --fd-copy-max:100%;
    --fd-genre-heading-size:30px;
    --fd-genre-heading-max:100%;
  }

  .fiction-page.fiction-portrait-stage .fiction-title-dialog[open]{
    position:fixed;
    left:50vw;
    top:50vh;
    right:auto;
    bottom:auto;
    margin:0;
    transform:translate(-50%,-50%) rotate(90deg);
    transform-origin:50% 50%;
    overflow:hidden;
  }

  .fiction-page.fiction-portrait-stage .fiction-title-dialog-shell{
    overflow:auto;
  }

  .fiction-page.fiction-portrait-stage .fiction-characters-dialog,
  .fiction-page.fiction-portrait-stage .fiction-lore-dialog,
  .fiction-page.fiction-portrait-stage .fiction-world-dialog{
    width:var(--fd-dialog-width);
    height:var(--fd-dialog-height);
    max-width:var(--fd-dialog-max-width);
    max-height:var(--fd-dialog-max-height);
  }

  .fiction-page.fiction-portrait-stage .fiction-characters-dialog .fiction-title-dialog-shell,
  .fiction-page.fiction-portrait-stage .fiction-lore-dialog .fiction-title-dialog-shell,
  .fiction-page.fiction-portrait-stage .fiction-world-dialog .fiction-title-dialog-shell{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    padding:38px 46px 18px;
  }

  .fiction-page.fiction-portrait-stage .fiction-characters-dialog .fiction-title-dialog-shell{
    padding-left:42px;
    padding-right:42px;
  }

  .fiction-page.fiction-portrait-stage .fiction-character-card{
    grid-template-columns:minmax(170px,.78fr) minmax(0,1.62fr);
    grid-template-rows:auto auto;
    column-gap:28px;
    row-gap:2px;
    padding:18px 0 19px 42px;
  }

  .fiction-page.fiction-portrait-stage .fiction-lore-dialog .fiction-title-dialog-shell,
  .fiction-page.fiction-portrait-stage .fiction-world-dialog .fiction-title-dialog-shell{
    padding-left:44px;
    padding-right:44px;
  }

  .fiction-page.fiction-portrait-stage .fiction-world-map{
    max-height:245px;
  }
}

/* =========================================================
   FICTION DIALOG MODE — TOUCH LANDSCAPE
   Owns popup geometry/typography in the 1672px virtual viewport.
   ========================================================= */
html.fiction-virtual-landscape .fiction-page{
  --fd-body-size:32px;
  --fd-dialog-width:min(1160px,70vw);
  --fd-dialog-height:min(620px,78vh);
  --fd-dialog-max-width:min(1160px,70vw);
  --fd-dialog-max-height:min(620px,78vh);
  --fd-shell-width:100%;
  --fd-shell-height:100%;
  --fd-shell-max-width:none;
  --fd-shell-max-height:none;
  --fd-shell-padding:38px 60px 24px;
  --fd-heading-size:56px;
  --fd-kicker-size:27px;
  --fd-kicker-margin:7px 0 16px;
  --fd-divider-margin:0 auto 18px;
  --fd-copy-max:980px;
  --fd-genre-heading-size:50px;
  --fd-genre-heading-max:980px;
}

html.fiction-virtual-landscape .fiction-page .fiction-title-dialog{
  width:var(--fd-dialog-width);
  height:var(--fd-dialog-height);
  max-width:var(--fd-dialog-max-width);
  max-height:var(--fd-dialog-max-height);
}

html.fiction-virtual-landscape .fiction-page .fiction-title-dialog-shell{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  overflow:auto;
  box-sizing:border-box;
  padding:var(--fd-shell-padding);
}

html.fiction-virtual-landscape .fiction-page .fiction-title-dialog-copy{
  max-width:var(--fd-copy-max);
}

html.fiction-virtual-landscape .fiction-page .fiction-genre-dialog .fiction-title-dialog-heading{
  max-width:var(--fd-genre-heading-max);
}

html.fiction-virtual-landscape .fiction-page .fiction-characters-dialog{
  width:min(1280px,76vw);
  max-width:min(1280px,76vw);
}

html.fiction-virtual-landscape .fiction-page .fiction-characters-dialog .fiction-title-dialog-shell{
  padding-left:64px;
  padding-right:64px;
}

html.fiction-virtual-landscape .fiction-page .fiction-lore-dialog{
  width:min(1220px,73vw);
  max-width:min(1220px,73vw);
}

html.fiction-virtual-landscape .fiction-page .fiction-lore-dialog .fiction-title-dialog-shell{
  padding-left:68px;
  padding-right:68px;
}

html.fiction-virtual-landscape .fiction-page .fiction-lore-dialog .fiction-title-dialog-copy,
html.fiction-virtual-landscape .fiction-page .fiction-lore-section{
  max-width:1040px;
}

html.fiction-virtual-landscape .fiction-page .fiction-world-dialog{
  width:min(1260px,75vw);
  max-width:min(1260px,75vw);
}

html.fiction-virtual-landscape .fiction-page .fiction-world-dialog .fiction-title-dialog-shell{
  width:100%;
  max-width:none;
  padding:38px 64px 24px;
}

html.fiction-virtual-landscape .fiction-page .fiction-world-map{
  max-height:calc(min(620px,78vh) - 150px);
}