/* Guides: "Name that signal" (signal-game.js). Choice buttons and the big score come from quiz.css. */
.sg{padding:18px;margin:26px 0;display:grid;gap:14px;scroll-margin-top:90px}
.v3 .sg p{margin:0}
.sg-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:2px solid var(--v3-line)}
.sg-kicker{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--v3-blue)}
.v3 .article .sg-title,.v3 .sg-title{margin:2px 0 0;font-size:21px}
.sg-hud{display:flex;gap:14px;align-items:baseline;font-size:13.5px;font-weight:700;color:var(--v3-body)}
.sg-hud b{color:var(--v3-ink)}
.sg-score b{font-size:18px;color:var(--v3-navy)}
.sg-streak{color:#c2410c}
.sg-streak.is-on{animation:sg-pop .3s ease-out}
.sg-intro{display:grid;gap:12px;justify-items:center;text-align:center}
.sg-fan{display:flex;justify-content:center;margin:4px 0}
.sg-fan img{width:96px;height:96px;border-radius:12px;border:2px solid var(--v3-line);background:#fff;margin:0 -10px;box-shadow:0 2px 6px rgba(11,16,32,.08)}
.sg-fan img:nth-child(1){transform:rotate(-8deg) translateY(6px)}
.sg-fan img:nth-child(2){transform:rotate(-3deg)}
.sg-fan img:nth-child(3){transform:rotate(3deg)}
.sg-fan img:nth-child(4){transform:rotate(8deg) translateY(6px)}
.sg-lede{max-width:440px;font-size:15.5px;color:var(--v3-body)}
.sg-best{font-size:13.5px;color:var(--v3-body)}
.sg-clock{position:relative;height:10px;border-radius:99px;background:var(--v3-line);overflow:visible;margin-right:30px}
.sg-clock i{display:block;height:100%;width:100%;border-radius:99px;background:var(--v3-blue)}
.sg-clock span{position:absolute;right:-30px;top:-5px;font-size:13px;font-weight:800;color:var(--v3-body);width:24px;text-align:right}
.sg-clock.is-low i{background:var(--v3-red)}
.sg-clock.is-low span{color:var(--v3-red)}
.sg-ask{font-size:17px;font-weight:800;color:var(--v3-ink);text-align:center}
.sg-stage{display:flex;justify-content:center}
.sg-pic{width:min(240px,62vw);height:auto;border-radius:14px;border:2px solid var(--v3-line);background:#fff;animation:sg-in .3s ease-out}
.sg-choices{grid-template-columns:1fr 1fr}
.sg-choices .rq-choice{text-align:center;font-size:15px;padding:11px 10px}
.sg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sg-tile{padding:0;border:3px solid var(--v3-line);border-radius:14px;background:#fff;cursor:pointer;overflow:hidden;animation:sg-in .3s ease-out both}
.sg-tile:nth-child(2){animation-delay:.05s}.sg-tile:nth-child(3){animation-delay:.1s}.sg-tile:nth-child(4){animation-delay:.15s}
.sg-tile img{display:block;width:100%;height:auto;aspect-ratio:1}
.sg-tile:hover:not(:disabled){border-color:var(--v3-blue)}
.sg-tile:disabled{cursor:default;opacity:.45}
.sg-tile.is-right{opacity:1;border-color:var(--v3-green);box-shadow:0 0 0 3px #bbf7d0}
.sg-tile.is-wrong{opacity:1;border-color:var(--v3-red)}
.sg-after{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;min-height:48px}
.sg-after:empty{min-height:0}
.sg-result{display:grid;gap:2px;animation:sg-in .25s ease-out}
.sg-result b{font-size:16px}
.sg-result span{font-size:14px;color:var(--v3-body)}
.sg-result.is-right b{color:var(--v3-green)}
.sg-result.is-wrong b{color:var(--v3-red)}
.is-shake{animation:sg-shake .35s ease-in-out}
.sg-end{display:grid;gap:4px;justify-items:center;text-align:center}
.sg-rank{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--v3-blue)}
.sg-line{font-weight:800;color:var(--v3-ink)}
.sg-msg{max-width:440px;color:var(--v3-body)}
.sg-new{font-weight:800;color:var(--v3-green)}
.v3 .article .sg-sub,.v3 .sg-sub{margin:4px 0 0;font-size:15px}
.v3 .sg .sg-missed{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.v3 .sg .sg-missed li{display:flex;gap:10px;align-items:center;margin:0;padding:6px;border:2px solid var(--v3-line);border-radius:12px}
.sg-missed img{border-radius:8px;flex:none}
.sg-missed div{display:grid;gap:2px}
.sg-missed b{font-size:14.5px;color:var(--v3-ink)}
.sg-missed span{font-size:13px;color:var(--v3-body)}
.sg-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sg-flash{font-size:14px;font-weight:700;color:var(--v3-green);text-align:center;min-height:1.2em;word-break:break-word}
.sg-note{font-size:12.5px;color:var(--v3-body);text-align:center}
@keyframes sg-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes sg-pop{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:none}}
@keyframes sg-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.sg-pic,.sg-tile,.sg-result,.sg-streak.is-on{animation:none}}
@media (max-width:640px){.sg{padding:12px}.sg-grid{grid-template-columns:1fr 1fr}.sg-choices{grid-template-columns:1fr}.sg-fan img{width:72px;height:72px}}

/* IFAF signal panels (signal-art.js): the image plus its arrow overlay. */
.sg-pic.sig-pic{display:inline-block;aspect-ratio:1}
.sg-tile .sig-pic{display:block;width:100%;aspect-ratio:1}
.sg-missed .sig-pic{width:72px;height:72px;flex:none;border-radius:8px;overflow:hidden}