html{scroll-behavior:smooth}body.visual{margin:0;background:#050b13;color:#fae7b5;font-family:Georgia,serif}
.visual .imagewrap{position:relative;max-width:1024px;margin:auto;overflow:hidden;line-height:0}
.visual .imagewrap>img{display:block;width:100%;height:auto}
.visual .hotspot{position:absolute;display:block;z-index:5;cursor:pointer;border:0;color:transparent;font-size:0;line-height:0}
.visual .hotspot:hover,.visual .hotspot:focus-visible{outline:2px solid #f2cd82;outline-offset:-2px;background:rgba(241,207,139,.12)}
.visual .video-play{position:absolute;top:24%;left:28%;width:44%;height:24%;z-index:6;background:transparent;border:0;cursor:pointer;color:transparent}
.visual .video-play:hover,.visual .video-play:focus-visible{outline:2px solid #e7cb94;background:rgba(0,0,0,.18)}
.visual .video-dialog{position:fixed;inset:0;z-index:20015;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:20px}.visual .video-dialog[hidden]{display:none}
.visual .video-dialog>div{width:min(100%,940px);position:relative}.visual .video-dialog video{width:100%;max-height:80vh;background:black;display:block}.visual .video-dialog button{position:absolute;right:0;top:-45px;color:white;background:#14253a;border:1px solid #ddc28e;padding:9px 16px;cursor:pointer}
.visual .correction{position:absolute;z-index:7;top:51.15%;left:67.3%;width:30.1%;height:32.35%;box-sizing:border-box;line-height:1.4;text-align:center;color:#edd9a7;background:radial-gradient(ellipse at 50% 24%,#287483 0%,#133744 37%,#030e19 72%);padding:0 1.2% 1%;border:1px solid #cba46e;overflow:hidden}
.visual .correction .water-symbol{height:50%;display:flex;align-items:center;justify-content:center;color:#b4e2e2;font-size:clamp(20px,6vw,72px);text-shadow:0 0 15px #91d7df}
.visual .correction h2{margin:0 0 7px;font-weight:400;font-size:clamp(11px,2.3vw,27px);text-transform:uppercase;font-variant:small-caps}
.visual .correction p{color:#f3efe3;margin:0 0 8px;text-align:left;font-size:clamp(8px,1.5vw,16px);line-height:1.3}
.visual .correction a{display:inline-block;border:1px solid #dbb46d;color:#e9d4a5;text-decoration:none;padding:5px 10px;font-size:clamp(7px,1.2vw,14px);text-transform:uppercase;line-height:1.2;white-space:nowrap}
.visual .artnav{position:absolute;left:0;right:0;bottom:0;z-index:8;height:9.3%;background:linear-gradient(to bottom,transparent,#050c16 10%,#050c16);display:flex;align-items:center;justify-content:space-around;gap:2%;padding:2% 3% 1%;box-sizing:border-box;line-height:1.4}
.visual .artnav a{flex:1;min-width:0;text-align:center;color:#e8d2a1;border:1px solid #ae8953;text-decoration:none;padding:1.1% 1%;background:rgba(0,0,0,.7);font-size:clamp(8px,1.4vw,17px)}
.visual .artnav a:hover,.visual .artnav a:focus-visible{background:#344458;color:white}
.visual .artnav a+a{border-color:#678197}
@media(max-width:590px){.visual .correction{top:51.2%;}.visual .correction .water-symbol{height:43%}.visual .correction h2{margin:0 0 3px}.visual .correction p{font-size:clamp(6px,1.6vw,11px)}.visual .correction a{font-size:6px}.visual .artnav{height:10.7%}}

/* V11: exact short-story calls to action on image-backed illustrated cards.
   Keep original artwork intact, mask the obsolete bitmap captions, and make the real link readable. */
.visual .hotspot.story-read{
  box-sizing:border-box;z-index:6;display:flex;align-items:center;justify-content:center;gap:1.1%;
  background:#01070d;color:#f1d6a1;border:1px solid #d4a764;border-radius:2px;
  font:400 clamp(8px,1.55cqw,17px)/1.15 Georgia,'Times New Roman',serif;
  letter-spacing:.045em;text-decoration:none;text-transform:uppercase;text-shadow:0 0 4px #332918;
  white-space:nowrap;
}
.visual .imagewrap{container-type:inline-size}
.visual .hotspot.story-read:hover,.visual .hotspot.story-read:focus-visible{
  background:#13243a;color:#fff2cb;outline:2px solid #f7d389;outline-offset:0;
}
.visual .hotspot.story-read .story-arrow{font-size:1.3em;margin-left:2%;font-weight:400}

/* V14: In the virtual world the visible link returns to the King Virt / Tsar Triv hub,
   not to the animals-and-stories crossroads. Hide the old artwork caption under an active label. */
.visual .hotspot.virtual-hub{
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  background:#07101a;border:1px solid #c4a06a;color:#f4d7a4;
  font:400 clamp(8px,1.45cqw,16px)/1.1 Georgia,serif;letter-spacing:.065em;
  text-align:center;text-decoration:none;white-space:nowrap;
}
.visual .hotspot.virtual-hub:hover,.visual .hotspot.virtual-hub:focus-visible{
  background:#203045;color:#fff0c8;outline:2px solid #e3bc78;
}

/* V18: one set of controls — the links sit ON artwork buttons, never over an extra navigation bar. */
.visual .art-button{
 position:absolute;z-index:8;display:flex;align-items:center;justify-content:center;
 box-sizing:border-box;padding:0 1%;text-align:center;text-decoration:none;
 background:#071019;border:1px solid #b69a65;border-radius:2px;color:#f4d6a1;
 font:400 clamp(8px,1.56cqw,17px)/1.15 Georgia,serif;letter-spacing:.018em;
 cursor:pointer;min-width:0;white-space:normal;
}
.visual .art-button:hover,.visual .art-button:focus-visible{
 background:#25374a;color:#fff1cf;outline:2px solid #f4ce8b;outline-offset:0;
}
.visual .art-button .direction{font-size:1.3em;margin:0 3%;flex-shrink:0}
/* The last illustration has NO bottom buttons. Put final-world exits BELOW the art, not on top of it. */
.visual .imagewrap.final-chapter{overflow:visible}
.visual .final-exit-nav{background:#06101a;display:flex;justify-content:center;flex-wrap:wrap;
 padding:24px 3% 30px;gap:12px;line-height:1.3;border-top:1px solid #665437}
.visual .final-exit-nav a{flex:1;min-width:190px;max-width:310px;box-sizing:border-box;
 display:flex;justify-content:center;align-items:center;text-align:center;
 font:400 14px/1.4 Georgia,serif;color:#edd7a8;border:1px solid #a88c5f;
 padding:14px 12px;text-decoration:none;min-height:51px}
.visual .final-exit-nav a:hover,.visual .final-exit-nav a:focus-visible{background:#24364b;outline:2px solid #e8c588}
@media(max-width:600px){.visual .art-button{font-size:clamp(6px,1.5cqw,10px)}
 .visual .final-exit-nav{padding:16px 4%;gap:8px}
 .visual .final-exit-nav a{min-width:100%;font-size:12px}}

.visual .art-button.tone-red{border-color:#bd3444}
.visual .art-button.tone-blue{border-color:#416b92}