/* ============================================================
   THE GUIDE — Pearl's plate and CHIEF's radio

   Theme-agnostic, the way base.css is: everything that carries the two
   worlds' difference comes in through the six --guide-* roles the theme
   files fill. What is *not* shared is the shape, and deliberately — see
   guide.js. Pearl is a portrait speaking from a plate; CHIEF is a
   transmission that happens to carry a picture of who sent it. Skinning
   one shape twice would have made them the same character in two
   colourways, which is the thing this app has never done.

   One rule runs through the whole file: the resting state is the final
   state, and animation only ever adds an entrance. base.css ends with a
   blanket `*{animation:none!important}` under reduced motion, and the
   prize banner had to grow an override because its resting state was off
   the bottom of the screen. Authored this way round, the guide needs no
   override — kill every animation here and it is simply already there.
   ============================================================ */

.guide-slot{width:100%;max-width:320px;display:flex;justify-content:center}
/* display:flex above would otherwise beat the hidden attribute. */
.guide-slot[hidden]{display:none}

.guide{width:100%;animation:g-in .34s var(--ease) both}
@keyframes g-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.g-face{flex:none;line-height:0}
.g-svg{display:block;width:100%;height:100%}
.g-say{display:block}

/* ---------- Pearl ----------
   Aligned to the bottom rather than the middle: she stands on the same
   line the plate rests on, which reads as somebody beside you instead of
   an avatar floating next to a text box. */
.g-princess{display:flex;align-items:flex-end;gap:10px}
.g-princess .g-face{width:54px;height:54px}

.g-plate{
  position:relative;flex:1;min-width:0;
  display:flex;flex-direction:column;gap:1px;
  padding:9px 13px 11px;
  background:var(--guide-bg);
  border:var(--bw) solid var(--guide-rule);
  border-radius:var(--r-card);
  box-shadow:var(--shadow);
}
/* The tail, drawn twice: the outer triangle is the cartoon outline the
   whole princess skin is built on, the inner one punches the fill back
   through it. Sat low, level with her muzzle. */
.g-plate::before,.g-plate::after{
  content:"";position:absolute;bottom:14px;width:0;height:0;
  border:8px solid transparent;
}
.g-plate::before{left:calc(-8px - var(--bw));border-right-color:var(--guide-rule)}
.g-plate::after{left:-6px;border-right-color:var(--guide-bg)}

.g-princess .g-name{
  font-family:var(--guide-name-font);font-size:16px;font-weight:700;line-height:1.1;
  color:var(--guide-name);
}
.g-princess .g-say{
  font-size:12.5px;line-height:1.45;font-weight:500;color:var(--guide-ink);
}

/* ---------- CHIEF ----------
   A two-part panel: a header that says who is talking and that the link
   is live, and the message under it. The helmet sits outside the strip,
   not in it, so the transmission stays a rectangle — a radio panel with a
   portrait inset in the corner reads as a video call. */
.g-racing{display:flex;align-items:flex-start;gap:9px}
.g-racing .g-face{width:46px;height:46px}

.g-strip{
  flex:1;min-width:0;overflow:hidden;
  background:var(--guide-bg);
  border:var(--bw) solid var(--guide-rule);
  border-radius:var(--r-md);
  box-shadow:var(--shadow);
}

.g-head{
  display:flex;align-items:center;gap:8px;
  padding:5px 9px;
  background:var(--surface-alt);
  border-bottom:var(--bw-thin) solid var(--guide-rule);
}
/* Only the name leans. Skewing the bar itself opens gaps at both ends of
   its own border — the same reason .prize-n and .js-stage skew the text
   and leave their containers square. */
.g-racing .g-name{
  font-family:var(--guide-name-font);font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--guide-name);
  transform:skewX(var(--skew));
}
.g-racing .g-say{
  padding:8px 10px 9px;
  font-size:11.5px;line-height:1.55;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--guide-ink);
}

/* Signal meter. Three bars lit at rest, which is the state a reader ends
   up looking at anyway once the loop is killed or the eye settles. */
.g-meter{display:inline-flex;align-items:flex-end;gap:2px;height:9px}
.g-meter i{
  width:3px;height:5px;border-radius:1px;
  background:var(--guide-meter);opacity:.26;
}
.g-meter i:nth-child(2),.g-meter i:nth-child(4){height:7px}
.g-meter i:nth-child(3){height:9px}
.g-meter i:nth-child(-n+3){opacity:1}
.g-meter i:nth-child(4),.g-meter i:nth-child(5){
  animation:g-tick 1.15s steps(1,end) infinite;
}
.g-meter i:nth-child(5){animation-delay:.38s}
@keyframes g-tick{0%,64%{opacity:.26}65%,100%{opacity:1}}

/* Live-link light. */
.g-rx{
  margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:8.5px;font-weight:700;letter-spacing:.16em;
  color:var(--text-soft);
}
.g-rx::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--guide-meter);
  animation:g-blink 1.8s ease-in-out infinite;
}
@keyframes g-blink{0%,100%{opacity:1}50%{opacity:.3}}

/* One pass of the scanline as the message lands. Pure decoration, so its
   resting state is invisible and losing it to reduced motion costs the
   panel nothing. */
.g-strip{position:relative}
.g-strip::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.16) 48%,transparent 55%);
  animation:g-sweep .5s ease-out 1;
}
@keyframes g-sweep{
  0%{opacity:1;transform:translateY(-100%)}
  100%{opacity:0;transform:translateY(100%)}
}

/* ---------- on the scoreboard ----------
   Bigger, because the results screen is a screen you have stopped on and
   there is room. Home is a passing glance and stays small. */
.guide-slot--result{max-width:340px;margin-top:2px}
.guide-slot--result .g-princess .g-face{width:70px;height:70px}
.guide-slot--result .g-princess .g-say{font-size:13.5px}
.guide-slot--result .g-princess .g-name{font-size:18px}
.guide-slot--result .g-racing .g-face{width:58px;height:58px}
.guide-slot--result .g-racing .g-say{font-size:12.5px}