/* CivicQuest intro video: the very first thing a player sees */
#cq-intro { position: fixed; inset: 0; z-index: 99999; background: #0a0f0c; color: #fff; font-family: Arial, Helvetica, sans-serif;
  display: flex; align-items: center; justify-content: center; transition: opacity .35s ease; }
#cq-intro.out { opacity: 0; pointer-events: none; }
#cq-intro .cq-pane { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 16px; box-sizing: border-box; }
#cq-intro[data-state="splash"] #cq-splash,
#cq-intro[data-state="wait"] #cq-wait { display: flex; }
#cq-intro[data-state="video"] #cq-stage { display: block; }
#cq-splash { background: radial-gradient(circle at 50% 35%, #17301f 0%, #0a0f0c 70%); }
#cq-splash img { width: 96px; height: 96px; border-radius: 18px; margin-bottom: 14px; }
#cq-splash h1 { margin: 0 0 6px; font-size: clamp(28px, 6vw, 52px); letter-spacing: .5px; color: #ffd92a; }
#cq-splash p { margin: 0 0 22px; font-size: clamp(15px, 2.6vw, 20px); color: #d8e0d8; max-width: 520px; line-height: 1.4; }
.cq-btn { cursor: pointer; border: 2px solid #ffd92a; border-radius: 10px; padding: 14px 28px; font-size: clamp(16px, 2.8vw, 22px); font-weight: bold; margin: 6px; min-width: 260px; }
.cq-btn.main { background: #ffd92a; color: #1a1a0a; }
.cq-btn.alt { background: transparent; color: #ffd92a; }
.cq-btn:hover, .cq-btn:focus { filter: brightness(1.12); outline: none; }
#cq-splash .hint { margin: 18px 0 0; font-size: 14px; color: #8fa08f; }
.cq-load { width: min(360px, 80vw); margin-top: 22px; }
.cq-load .bar { height: 8px; background: #223326; border-radius: 6px; overflow: hidden; }
.cq-load .bar i { display: block; height: 100%; width: 0; background: #3fd07a; transition: width .2s; }
.cq-load .txt { margin-top: 6px; font-size: 13px; color: #8fa08f; }
#cq-stage { position: relative; width: 100%; height: 100%; background: #000; }
#cq-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
#cq-vskip { position: absolute; top: 14px; right: 14px; background: rgba(0,0,0,.65); color: #ffd92a; border: 2px solid #ffd92a; border-radius: 8px;
  padding: 10px 18px; font-size: 16px; font-weight: bold; cursor: pointer; }
#cq-vskip:hover { background: rgba(255,217,42,.2); }
#cq-vload { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: #9fb09f; background: rgba(0,0,0,.55); padding: 4px 8px; border-radius: 6px; }
#cq-wait h2 { margin: 0 0 6px; font-size: clamp(22px, 4vw, 32px); color: #ffd92a; }
#cq-replay-intro { cursor: pointer; float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 14px; color: #1a1a1a; text-decoration: underline; }