/* These cursors belong only to this picture-book document. */
@media (any-hover: hover) and (any-pointer: fine) {
  :root {
    --story-cursor-normal: url("assets/cursor-normal.png") 4 4, auto;
    --story-cursor-select: url("assets/cursor-select.png") 6 4, pointer;
    --story-cursor-prev: url("assets/cursor-prev.png") 1 33, w-resize;
    --story-cursor-next: url("assets/cursor-next.png") 63 33, e-resize;
    --story-cursor-loading: url("assets/cursor-loading.png") 16 16, progress;
  }
  html, body, main, .stage, .stage * {
    cursor: var(--story-cursor-normal);
  }
  button:not(:disabled), button:not(:disabled) *,
  a[href], a[href] *,
  [role="button"]:not([aria-disabled="true"]),
  [role="button"]:not([aria-disabled="true"]) *,
  .club-zoom, .club-zoom-card, .club-zoom-card * {
    cursor: var(--story-cursor-select);
  }
  #prev:not(:disabled), #prev:not(:disabled) *{cursor:var(--story-cursor-prev)}
  #next:not(:disabled), #next:not(:disabled) *{cursor:var(--story-cursor-next)}
  button:disabled, button:disabled *, [aria-disabled="true"], [aria-disabled="true"] * {
    cursor: var(--story-cursor-normal);
  }
  #stage[aria-busy="true"], #stage[aria-busy="true"] *,
  #stage .page-turn, #stage .page-turn *,
  #stage .map-transition, #stage .map-transition * {
    cursor: var(--story-cursor-loading);
  }
}

/* The in-page pointer stays visible even at the viewport's right edge. */
.story-pointer{display:none;position:fixed;left:0;top:0;width:64px;height:64px;pointer-events:none!important;z-index:2147483647;user-select:none;-webkit-user-drag:none}
@media (any-hover:hover) and (any-pointer:fine){
  html[data-story-cursor-active],html[data-story-cursor-active] *,html[data-story-cursor-active] *::before,html[data-story-cursor-active] *::after{cursor:none!important}
  html[data-story-cursor-active] .story-pointer{display:block}
}

.cover-start-bubble{position:fixed;z-index:2147483646;max-width:calc(100vw - 20px);padding:9px 16px;border:1px solid #c89c56;border-radius:16px;background:rgba(255,248,230,.72);color:#88591f;box-shadow:0 4px 14px #76501e24;white-space:nowrap;font-size:clamp(14px,1.5vw,18px);line-height:1.5;letter-spacing:.06em;pointer-events:none;user-select:none}
.cover-start-bubble::after{content:"";position:absolute;left:var(--bubble-tail-x,20px);bottom:-6px;width:10px;height:10px;background:rgba(255,248,230,.72);border-right:1px solid #c89c56;border-bottom:1px solid #c89c56;transform:rotate(45deg)}
.cover-start-bubble.below::after{top:-6px;bottom:auto;border-right:0;border-bottom:0;border-left:1px solid #c89c56;border-top:1px solid #c89c56}
@media (any-hover:hover) and (any-pointer:fine){
 html[data-story-cover-follow] #cover-start-hotspot .cover-start-label{visibility:hidden}
 html[data-story-cover-follow] #cover-start-hotspot:focus-visible .cover-start-label{visibility:visible}
}

.cover-start-art{display:block;width:clamp(135px,17vw,190px);max-width:100%;height:auto;pointer-events:none}
#cover-start-hotspot .cover-start-label{background:rgba(255,248,230,.72)}