/* Guides: characters from the studio's games who show up beside a section and point it out.
   Desktop: the guide stands in the empty middle of the section's heading row, feet on the row's baseline.
   Narrow screens: the heading row gets its own band above the heading, so a guide never sits on text.
   Guides are decorative; their lines repeat what the section already says. guides.js plays the frames. */
.guide-slot{position:relative;flex:1 1 auto;align-self:stretch;min-width:0;pointer-events:none}
.guide{position:absolute;right:20px;bottom:0;display:flex;align-items:flex-end;gap:12px}
.guide-sprite{flex:none;background-repeat:no-repeat;background-position:0 0}
.guide-sprite.pixel{image-rendering:pixelated}
.guide .guide-line{position:relative;max-width:260px;margin-bottom:var(--line-lift,120px);padding:12px 36px 12px 16px;background:var(--gl-bg,#f2f0ea);color:var(--gl-fg,#14141d);font:var(--gl-font,600 15px/1.35 Barlow,Arial,sans-serif);letter-spacing:var(--gl-track,0);text-transform:var(--gl-case,none);border:var(--gl-border,0);box-shadow:var(--gl-shadow,4px 4px 0 rgba(13,13,22,.55));opacity:0;transform:translateY(8px);pointer-events:auto}
.guide .guide-line::after{content:"";position:absolute;right:-12px;bottom:14px;border:8px solid transparent;border-left:12px solid var(--gl-bg,#f2f0ea);border-right:0}
.guide .guide-line.is-shown{opacity:1;transform:none}
.guide .guide-close{position:absolute;top:2px;right:2px;width:32px;height:32px;min-width:0;min-height:0;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit;opacity:.6;font:400 20px/1 Barlow,Arial,sans-serif;cursor:pointer;-webkit-appearance:none;appearance:none}
.guide .guide-close:hover{opacity:1;background:transparent}
.guide .guide-close:focus-visible{outline:2px solid #df672c;outline-offset:-2px}
.guide.flip .guide-sprite{transform:scaleX(-1)}
.model-feature .guide .guide-line{box-shadow:4px 4px 0 rgba(76,87,103,.35);background:#fffdf8}
.model-feature .guide .guide-line::after{border-left-color:#fffdf8}
/* Band: a strip of its own above a section (game pages), on every screen size. */
.guide-slot[data-band]{display:block;flex:none;width:100%;height:var(--band,200px);margin:0 0 8px}
.guide-slot[data-side=left] .guide{right:auto;left:20px;flex-direction:row-reverse}
.guide-slot[data-side=left] .guide .guide-line::after{right:auto;left:-12px;border-left:0;border-right:12px solid var(--gl-bg,#f2f0ea)}
.guide-slot[data-band][data-place=center] .guide{right:auto;left:50%;transform:translateX(-50%)}
@media(prefers-reduced-motion:no-preference){
  .guide .guide-line{transition:opacity .25s ease-out,transform .25s ease-out}
  .guide.m-hover .guide-sprite{animation:guide-hover 2.6s ease-in-out infinite}
}
@keyframes guide-hover{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(max-width:1100px){
  .section-head:has(.guide-slot){flex-wrap:wrap}
  .guide-slot{order:-1;flex:none;width:100%;height:var(--band,160px);align-self:stretch}
  .guide-slot[data-band]{height:var(--band-narrow,160px)}
  .guide{right:0}
  .guide-slot[data-side=left] .guide{left:0}
}
@media(max-width:560px){
  .guide .guide-line{max-width:200px;font-size:14px}
}

/* Each game page's balloons, in that page's own materials */
.bw-site .guide{--gl-bg:var(--tan);--gl-fg:var(--ink);--gl-font:700 17px/1.25 var(--sans);--gl-shadow:3px 3px 0 var(--edge)}
.ash-site .guide{--gl-bg:#221a15;--gl-fg:var(--ink);--gl-font:400 18px/1.3 var(--fell);--gl-border:1px solid var(--bronze);--gl-shadow:0 10px 24px rgba(0,0,0,.45)}
.cal-site .guide{--gl-bg:var(--panel);--gl-fg:var(--ink);--gl-font:700 15px/1.45 var(--sans);--gl-border:1px solid var(--rose);--gl-shadow:0 10px 24px rgba(27,26,51,.18)}
.drac-site .guide{--gl-bg:var(--stone-2);--gl-fg:var(--bone);--gl-font:400 16px/1.35 var(--pixel);--gl-border:2px solid var(--blood);--gl-shadow:4px 4px 0 rgba(8,6,10,.65)}
.null-site .guide{--gl-bg:var(--n800);--gl-fg:var(--n50);--gl-font:400 15px/1.4 var(--mono);--gl-border:1px solid var(--border);--gl-shadow:0 0 0 1px rgba(0,168,255,.18),0 10px 24px rgba(0,0,0,.5)}
.nova-site .guide{--gl-bg:var(--panel-2);--gl-fg:var(--cream);--gl-font:600 15px/1.35 var(--chakra);--gl-border:2px solid var(--ember);--gl-shadow:0 0 18px rgba(255,77,41,.25)}
.null-site .guide .guide-line{box-shadow:inset 3px 0 0 var(--accent),var(--gl-shadow)}
/* Dark characters on dark pages get a thin rim and a glow in the page's own light */
.ash-site .guide-sprite{filter:drop-shadow(0 0 1px rgba(230,223,211,.55)) drop-shadow(0 0 16px rgba(200,160,56,.4))}
.drac-site .guide-sprite{filter:drop-shadow(0 0 1px rgba(236,232,226,.4)) drop-shadow(0 0 14px rgba(242,182,90,.3))}
.bw-site .guide-sprite{filter:drop-shadow(0 0 1px rgba(239,228,200,.45)) drop-shadow(0 6px 14px rgba(20,22,15,.6))}
.nova-site .guide-sprite{filter:drop-shadow(0 0 10px rgba(255,77,41,.45))}
.null-site .guide-sprite{filter:drop-shadow(0 0 10px rgba(0,168,255,.25))}