/* J-1005-TYPING-BARD-TALE. Landing only. The bard is decoration.
   The scroll is the button. Hero cards, the theme picker and the boards
   stay above him wherever the boxes meet. */
@font-face {
  font-family: "IM Fell English";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/im-fell-english-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2010-2015, U+2018-201F, U+20AC, U+2122, U+2212, U+FEFF;
}

#screen-title.land > .card.hero { position: relative; }
/* The landing must not grow a sideways scrollbar. Clip transformed ink
   (the scroll wiggle) without trapping vertical scroll. */
/* The corridor light layer is wider than the window. Make body its
   containing block and clip the sideways overflow so the landing
   cannot scroll left or right. Vertical scrolling stays on the viewport. */
body:has(#screen-title.land.active) {
  position: relative;
  overflow-x: clip !important;
}
/* The landing corridor light layer is wider than the window and was the
   sideways scrollbar. Fixed positioning keeps the same top-of-page art
   and takes it out of the document's scroll width. */
body:has(#screen-title.land.active) .mfx-light {
  position: fixed !important;
}
.app:has(> #screen-title.land.active) {
  max-width: 100%;
  overflow-x: clip;
}
.app:has(> #screen-title.land.active) #btn-fullscreen {
  overflow: hidden;
}
#screen-title.land .class-card { z-index: 4; }
#screen-title.land .hero > h1,
#screen-title.land .hero > p:not(.foot-note),
#screen-title.land .theme-row,
#screen-title.land .scoreboard-shell,
#screen-title.land .tt-museum,
#screen-title.land #btn-howto,
#screen-title.land .foot-note { position: relative; z-index: 5; }
#screen-title.land #bard-tale-audio { position: absolute; width: 0; height: 0; overflow: hidden; }

#screen-title.land .bard-stage {
  /* A real grid row after the two class cards.  Do not span the cards' rows:
     that made the scroll a visual and hit-test overlap at narrow widths. */
  grid-area: bard;
  position: relative;
  z-index: 1;
  align-self: start;
  justify-self: center;
  width: min(560px, 100%);
  height: 230px;
  min-height: 230px;
  margin-top: 18px;
  pointer-events: none;
}

#screen-title.land .bard-figure {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(120px, 34%, 186px);
  aspect-ratio: 398 / 540;
  z-index: 1;
  pointer-events: none;
}
#screen-title.land .bard-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  will-change: opacity;
}
#screen-title.land .bard-figure img.is-on { opacity: 1; }
#screen-title.land .bard-figure::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 22%;
  bottom: -6px;
  height: 16px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
  z-index: -1;
  pointer-events: none;
}

/* Rest just right of the parchment. On a tight width the pair may cover the Mage plate. */
#screen-title.land .bard-fairies { position:absolute; left:0; top:0; width:clamp(108px,18%,138px); aspect-ratio:400/360; z-index:2; opacity:0; pointer-events:none; overflow:visible; transform:translateX(0); transition:transform 260ms cubic-bezier(.2,.8,.25,1); }
#screen-title.land .bard-fairies.is-out { opacity:1; }
/* J-1005-26: Hold the rejected scratch pack off demosite pending ChatGPT-desk's replacement. */
#screen-title.land .bard-fairies { display:none !important; }
#screen-title.land .bard-fairies.is-entering { transform:translateX(-32%); }
/* Natural end only. The lane starts just right of the parchment, so this
   slide carries every pixel behind that right edge while 05-exit plays.
   Early Stop never adds is-exiting. */
#screen-title.land .bard-fairies.is-exiting { transform:translateX(calc(-100% - 20px)); transition-duration:.7s; transition-timing-function:linear; }
#screen-title.land .bard-fairy-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; transition:opacity 88ms linear; }
#screen-title.land .bard-fairy-fx { position:absolute; inset:-10%; background:url("../assets/bard/fairies-scratch/06-fx/01-03a-dissolve-to-sparkle-dens.webp") 15% 80%/24% auto no-repeat,url("../assets/bard/fairies-scratch/06-fx/04-04a-sparkle-dense-to-sparkle-fade.webp") 85% 32%/22% auto no-repeat,url("../assets/bard/fairies-scratch/06-fx/07-05a-sparkle-fade-to-gone.webp") 65% 12%/18% auto no-repeat; opacity:.82; animation:fairy-fx-drift 3.4s ease-in-out infinite alternate; }
@keyframes fairy-fx-drift { from { transform:translateY(2px) rotate(-1deg); filter:hue-rotate(0); } to { transform:translateY(-8px) rotate(2deg); filter:hue-rotate(32deg); } }
#screen-title.land .bard-fairies.is-poof .bard-fairy-fx { animation-duration:.55s; opacity:1; }

/* Notes share the bard's box so they track resize and fullscreen.
   Their distinct stacking slot keeps them above the bard, but beneath the
   parchment, and they never take clicks. */
#screen-title.land .bard-notes {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(120px, 34%, 186px);
  aspect-ratio: 398 / 540;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
  container-type: inline-size;
  font-size: 15px;
  font-size: clamp(12px, 12cqw, 20px);
}
#screen-title.land .bard-note {
  position: absolute;
  left: 58%;
  top: 50%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  font-family: Georgia, "Palatino Linotype", Palatino, serif;
  font-size: 1em;
  line-height: 1;
  color: #ffe7a8;
  text-shadow:
    0 0 3px rgba(255, 236, 180, .95),
    0 0 8px rgba(255, 186, 70, .85),
    0 0 14px rgba(255, 140, 40, .45);
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  --dx: 2.2em;
  --dy: -8em;
  --wob: 0.55em;
  --r0: -10deg;
  --r1: 8deg;
  --r2: -14deg;
  --r3: 12deg;
  --r4: -6deg;
  --life: 2.6s;
  animation: bard-note-float var(--life) ease-out forwards;
}
#screen-title.land .bard-note.is-spark {
  color: #fff8dc;
  font-size: 0.72em;
  text-shadow:
    0 0 4px rgba(255, 252, 230, 1),
    0 0 10px rgba(255, 214, 120, .9);
}
@keyframes bard-note-float {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(var(--r0)) scale(0.62);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(calc(var(--dx) * 0.08), calc(var(--dy) * 0.16), 0) rotate(var(--r1)) scale(1);
  }
  46% {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(calc(var(--dx) * 0.36 + var(--wob)), calc(var(--dy) * 0.52), 0) rotate(var(--r2)) scale(1.12);
  }
  78% {
    opacity: 0.8;
    transform: translate(-50%, -50%) translate3d(calc(var(--dx) * 0.74 - var(--wob) * 0.3), calc(var(--dy) * 0.84), 0) rotate(var(--r3)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(var(--dx), var(--dy), 0) rotate(var(--r4)) scale(0.82);
  }
}

#screen-title.land .bard-scroll-wrap {
  position: absolute;
  left: calc(clamp(120px, 34%, 186px) + 8px);
  bottom: 0;
  width: min(336px, calc(100% - clamp(120px, 34%, 186px) - 12px));
  z-index: 3;
  transform-origin: 50% 88%;
  pointer-events: none;
}

@media (max-width: 700px) {
  /* Keep the complete Bard control beneath, rather than inside, the two
     narrow class-card columns. */
  #screen-title.land .bard-stage {
    width: min(430px, 100%);
    height: 205px;
    min-height: 205px;
    margin-top: 14px;
  }
}
/* Mouse click focuses the scroll without a ring. Keyboard focus is below. */
#screen-title.land .bard-scroll-wrap:focus,
#screen-title.land .bard-scroll-wrap:focus-within,
#screen-title.land .bard-scroll:focus:not(:focus-visible),
#screen-title.land .bard-stop:focus:not(:focus-visible),
#screen-title.land .bard-scroll :focus:not(:focus-visible) {
  outline: none;
}
#screen-title.land .bard-scroll {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  aspect-ratio: 520 / 363;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: url("../assets/bard/scroll-cta.webp?v=bardtale2") center / 100% 100% no-repeat;
  cursor: pointer;
  color: #3b2414;
  pointer-events: auto;
}
#screen-title.land .bard-stage.is-open .bard-scroll,
#screen-title.land .bard-stage.is-retry .bard-scroll {
  background-image: url("../assets/bard/scroll-blank.webp?v=bardtale2");
}
#screen-title.land .bard-scroll:focus-visible,
#screen-title.land .bard-stop:focus-visible {
  outline: 1px solid rgba(232, 195, 106, .7);
  outline-offset: 3px;
}
#screen-title.land .bard-cta-live { display: none !important; }
#screen-title.land .bard-retry[hidden],
#screen-title.land .bard-hint[hidden],
#screen-title.land .bard-lyrics[hidden],
#screen-title.land .bard-stop[hidden] { display: none !important; }

#screen-title.land .bard-lyrics,
#screen-title.land .bard-retry {
  position: absolute;
  left: 11.9%;
  right: 11.9%;
  top: 25.3%;
  bottom: 25.1%;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "IM Fell English", "Fell Lore", Georgia, serif;
  font-size: 14.4px;
  line-height: 1.25;
  color: #3b2414;
}
#screen-title.land .bard-lyrics,
#screen-title.land .bard-line { white-space: normal; overflow-wrap: break-word; }
#screen-title.land .bard-line {
  display: block;
  margin: 0;
  opacity: 1;
  color: #2a170b;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
#screen-title.land .bard-retry:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}
#screen-title.land .bard-hint {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 18%;
  margin: 0;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(244, 228, 196, .82);
  color: #6b3a12;
  font-family: "IM Fell English", Georgia, serif;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
#screen-title.land .bard-stop {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(59, 36, 20, .45);
  background: rgba(244, 228, 196, .94);
  color: #3b2414;
  font: 700 16px/30px Georgia, serif;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
}

@keyframes bard-wiggle {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-3.5deg); }
  70% { transform: rotate(3.5deg); }
}
#screen-title.land .bard-scroll-wrap.is-wiggle {
  animation: bard-wiggle 1.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  #screen-title.land .bard-scroll-wrap.is-wiggle { animation: none; }
  #screen-title.land .bard-note { animation: none; opacity: 0; }
  #screen-title.land .bard-scroll {
    box-shadow: 0 0 0 1px rgba(232, 195, 106, .95);
    animation: bard-pulse 0.4s ease-out 1;
  }
  #screen-title.land .bard-lyrics { scroll-behavior: auto; }
}
@keyframes bard-pulse {
  from { opacity: .55; }
  to { opacity: 1; }
}

/* 701–1100: heroes sit in two columns. The Bard and parchment are the next
   grid row, fully under both Play As plates. The scroll used to be
   position:absolute inside a short stage, so it painted upward over the
   buttons. In flow, the row is as tall as the parchment. */
@media (min-width: 701px) and (max-width: 1100px) {
  #screen-title.land .bard-fairies { z-index: 0; }
  #screen-title.land .bard-stage {
    grid-area: bard !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    align-self: start;
    justify-self: center;
    width: min(500px, 94%);
    height: auto !important;
    min-height: 0 !important;
    margin: 18px auto 0 !important;
    z-index: 1;
  }
  #screen-title.land .bard-figure {
    left: 0;
    bottom: 0;
    width: 132px;
  }
  #screen-title.land .bard-notes {
    left: 0;
    bottom: 0;
    width: 132px;
  }
  /* J-1005-53: start past the 132px Bard so the parchment never covers him. */
  #screen-title.land .bard-scroll-wrap {
    position: relative;
    left: 140px;
    bottom: auto;
    width: min(360px, calc(100% - 148px));
  }
}

/* Phone: strip between the hero cards and the leaderboards. */
@media (max-width: 700px) {
  #screen-title.land > .card.hero {
    grid-template-areas:
      "title title"
      "intro intro"
      "theme theme"
      "warr mage"
      "bard bard"
      "board board"
      "museum museum"
      "howto howto"
      "foot foot";
  }
  #screen-title.land .bard-stage {
    /* This is a real grid row, never an overlay between the two class cards.
       Keep both declarations important because the tablet stage rules above
       intentionally set explicit grid coordinates. */
    grid-area: bard !important;
    grid-column: 1 / -1;
    grid-row: auto !important;
    display: flex;
    align-items: flex-end;
    justify-self: stretch;
    width: auto;
    height: auto;
    margin: 12px 8px 0;
    z-index: 4;
    display: block;
  }
  #screen-title.land .bard-figure {
    position: absolute;
    left: 2px;
    bottom: 6px;
    width: 68px;
    height: auto;
    aspect-ratio: 398 / 540;
    z-index: 1;
  }
  #screen-title.land .bard-notes {
    left: 2px;
    bottom: 6px;
    width: 68px;
    z-index: 2;
  }
  /* The parchment is full width, so the pair dances on the Mage card.
     Enter and the natural-end exit drop behind the parchment. Stop poofs in place. */
  #screen-title.land .bard-fairies { z-index: 1; width: 118px; }
  #screen-title.land .bard-fairies.is-entering { transform: translate(-34%, 50%); }
  #screen-title.land .bard-fairies.is-exiting { transform: translate(calc(-100% - 20px), 64%); }
  #screen-title.land .bard-scroll-wrap {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
  }
  #screen-title.land .bard-scroll {
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 520 / 363;
    min-height: 44px;
  }
  #screen-title.land .bard-lyrics,
  #screen-title.land .bard-retry {
    left: 8%;
    right: 11%;
    top: 20%;
    bottom: 30%;
    font-size: 14.4px;
    line-height: 1.2;
  }
  #screen-title.land .bard-stage.is-idle .bard-scroll {
    background-image: url("../assets/bard/scroll-blank.webp?v=bardtale2");
  }
  #screen-title.land .bard-stage.is-idle .bard-cta-live {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 24% 12% 22% 26%;
    text-align: center;
    font-family: "IM Fell English", Georgia, serif;
    font-size: 15px;
    line-height: 1.15;
    color: #2a170b;
  }
  #screen-title.land .bard-stop { top: 6px; right: 8px; width: 32px; height: 32px; }
}

/* J-1005-45: phone. Keep the Bard visible to the left of the parchment
   instead of hidden behind it. Still its own row under both Play As plates. */
@media (max-width: 700px) {
  /* J-1005-53: the Bard ends at 70px; leave a gap (wiggle included) so the parchment never covers him. */
  #screen-title.land .bard-scroll-wrap {
    margin-left: 82px;
    width: calc(100% - 82px);
  }
  #screen-title.land .bard-stage.is-idle .bard-cta-live { inset: 24% 14% 22% 14%; }
}

/* J-1005-45: wide desktop has room. The Bard and parchment sit in the empty
   middle cell under the word theme, centred between the Warrior and the Mage.
   Below 1260px the middle column is too narrow, so the 3-column layout keeps
   the full-width row under both Play As plates. */
@media (min-width: 1260px) {
  #screen-title.land > .card.hero {
    grid-template-areas:
      "title  title  title"
      "warr   intro  mage"
      "warr   theme  mage"
      "warr   bard   mage"
      "board  board  board"
      "museum museum museum"
      "howto  howto  howto"
      "foot   foot   foot";
  }
  /* J-1005-46: sit low in the gap, level with the Play As plates, so the
     monsters in the hall stay visible above the parchment. */
  #screen-title.land .bard-stage {
    align-self: end;
    justify-self: center;
    width: min(540px, 100%);
    margin: 12px 0 16px;
  }
}
/* Short laptop screens shrink the hero art, so the hero row is barely taller
   than the stage. A smaller Bard and parchment keep the hall monsters clear. */
@media (min-width: 1260px) and (max-height: 860px) {
  #screen-title.land .bard-stage {
    width: min(380px, 100%);
    height: 170px;
    min-height: 170px;
  }
}

/* The 320–360px range still keeps both choices side by side, but the desktop
   art scale leaves too little breathing room above their plates.  Trim only
   the art stage; card text and the two Play As targets retain their usable
   width and a visible gutter. */
@media (max-width: 360px) {
  #screen-title.land > .card.hero { --sd-art-h: 150px; }
}

/* Desk #82537: until the Bard's song is downloaded, a "Scroll Loading.."
   bar takes the parchment's place. The scroll keeps its box so nothing
   around it moves when it appears. */
#screen-title.land .bard-stage.is-loading .bard-scroll,
#screen-title.land .bard-stage.is-loading .bard-stop { visibility: hidden; }
#screen-title.land .bard-scroll-loading {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  box-sizing: border-box;
  border: 1px solid rgba(232, 195, 106, .75);
  border-radius: 6px;
  background: rgba(20, 14, 8, .82);
  overflow: hidden;
  pointer-events: none;
}
#screen-title.land .bard-scroll-loading-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(64, 196, 92, .45);
  transition: width .2s linear;
}
#screen-title.land .bard-scroll-loading-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #f3dfae;
  font: 700 0.9rem/1 Georgia, "Times New Roman", serif;
  letter-spacing: .04em;
}

/* J-1005-51 fairy pack (A-N, 30 fps). Courtney 12:11 PM: small (about a Play As button tall),
   standing on top of the bottom scroll roll, in front of the parchment (z above .bard-scroll-wrap's 3).
   --fairy-k = standing height / Play As button height. The rejected scratch pack (.bard-fairies) stays hidden. */
#screen-title.land .bard-fairy-pack { position:absolute; left:0; top:0; width:84px; height:50px; z-index:4;
  pointer-events:none; opacity:0; transition:opacity 220ms linear; --fairy-k:1.1; }
#screen-title.land .bard-fairy-pack.is-out { opacity:1; }
#screen-title.land .bard-fairy-pack canvas { display:block; width:100%; height:100%; }
/* Lyrics sit higher in the parchment so the pair on the bottom roll covers fewer words. */
#screen-title.land .bard-stage .bard-lyrics { top:19%; bottom:37%; }
@media (max-width: 700px) { #screen-title.land .bard-stage .bard-lyrics { top:15%; bottom:38%; } }
/* J-1005-51 sparkles (desk #83173): a particle canvas around the pair, wider than the fairy box so
   glitter and dust can trail off; never takes clicks. */
#screen-title.land .bard-fairy-pack canvas.bard-fairy-sparkles { position:absolute; display:block;
  left:-60%; top:-90%; width:220%; height:210%; pointer-events:none; z-index:0; }
/* the fairies draw over their own sparkles so faces stay clean; trails and twinkles show around them */
#screen-title.land .bard-fairy-pack canvas:not(.bard-fairy-sparkles) { position:relative; z-index:1; }
/* J-1007-BARD-ILLUS: one faded mono engraving per stanza behind the words. It fills most of the
   parchment (scroll-blank.webp's open sheet is about x 10-90%, y 21-78%); the lyrics stay on top.
   Two layers cross-fade as the song moves on; the art is brown ink on transparent. */
#screen-title.land .bard-illus { position:absolute; left:11%; right:11%; top:21%; bottom:23%; pointer-events:none; }
#screen-title.land .bard-illus img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity 1400ms ease-in-out; }
#screen-title.land .bard-illus img.is-on { opacity:.3; }
#screen-title.land .bard-stage:not(.is-open) .bard-illus { display:none; }
#screen-title.land .bard-scroll > .bard-lyrics { z-index:1; }
@media (prefers-reduced-motion: reduce) { #screen-title.land .bard-illus img { transition:none; } }