/* ============================================================
   Compliance Quest — the compliance roadmap as a side-scroller.
   Page chrome only: everything inside .cq-world is generated
   with inline styles by world.js (ported from the design
   component), because the scenery is ~1,700 nodes per stage and
   is rendered once, then moved by transform alone.
   ============================================================ */

body {
  margin: 0;
  font-family: "Mulish", system-ui, sans-serif;
  color: #33404F;
  background: linear-gradient(180deg, #F4F3FB 0%, #F1F6F6 100%);
  -webkit-font-smoothing: antialiased;
}
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
/* Overlays are toggled with [hidden] and several of them are display:flex, which
   would otherwise beat the UA's display:none and leave a full-screen invisible
   layer eating every click. */
[hidden] { display: none !important; }
.cq-main { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 26px 32px 52px; }
.rm-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: #8791A0; }
.rm-footer-inner strong { color: #16273F; }

@keyframes cqPop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes bobY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes glowPulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@keyframes patrol { 0%, 100% { transform: translateX(-38px); } 50% { transform: translateX(38px); } }
@keyframes stepBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }

/* ---------------- Intro ---------------- */
.cq-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.cq-intro-copy { min-width: 0; max-width: 660px; }
.cq-intro-copy h1 { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 34px; line-height: 1.08; letter-spacing: -.5px; color: #16273F; margin: 0 0 8px; }
.cq-intro-copy p { font-size: 15px; color: #5B6675; line-height: 1.6; margin: 0; }
.cq-intro-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cq-btn {
  display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E4E8EF;
  border-radius: 13px; padding: 12px 18px; cursor: pointer;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14px; color: #43525F;
  transition: border-color .15s ease, color .15s ease;
}
.cq-btn:hover { border-color: #3C7CE0; }
.cq-btn--danger { color: #43525F; }
.cq-btn--danger:hover { border-color: #E8402A; color: #E8402A; }

/* ---------------- HUD ---------------- */
.cq-hud { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cq-card {
  flex: 1 1 230px; min-width: 230px; background: #fff; border: 1px solid #EAEDF3; border-radius: 16px;
  padding: 15px 18px; box-shadow: 0 3px 12px rgba(18, 38, 63, .045);
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
}
.cq-card--stage { flex: 1 1 260px; min-width: 260px; gap: 0; }
.cq-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cq-card-label { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: #98A2B0; }
.cq-card-value { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 14px; color: #16273F; }
.cq-card-note { font-size: 12px; color: #98A2B0; }
.cq-stage-pill {
  align-self: flex-start; display: inline-flex; align-items: center; font-family: "Poppins", sans-serif;
  font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #16273F;
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.cq-stage-name { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 19px; color: #16273F; line-height: 1.15; margin-top: 7px; }
.cq-stage-blurb { font-size: 12.5px; color: #8791A0; margin-top: 3px; }
.cq-bar { height: 9px; border-radius: 999px; background: #EDF0F5; overflow: hidden; }
.cq-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
.cq-score { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 8px; background: #16273F; border-radius: 16px; padding: 15px 20px; min-width: 150px; }
.cq-score-label { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #9DAFC4; }
.cq-score-value { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 26px; line-height: 1; color: #F0C64E; }
.cq-hearts { display: flex; gap: 4px; margin-top: 2px; }
.cq-hearts span { width: 22px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.cq-hearts span.on { background: #E8402A; }

/* ---------------- Viewport ---------------- */
.cq-frame {
  position: relative; height: 560px; overflow: hidden; border-radius: 22px; border: 1px solid #DDE3EC;
  box-shadow: 0 12px 40px rgba(18, 38, 63, .14); outline: none;
  background: linear-gradient(180deg, #1B2C48 0%, #25406A 42%, #33578C 100%);
}
.cq-frame:focus-visible { box-shadow: 0 0 0 3px #3C7CE0, 0 12px 40px rgba(18, 38, 63, .14); }
.cq-parallax { position: absolute; left: 0; bottom: 96px; width: 5000px; pointer-events: none; will-change: transform; }
.cq-parallax--far { height: 230px; }
.cq-parallax--near { height: 170px; }
.cq-world { position: absolute; left: 0; top: 0; bottom: 0; will-change: transform; }
.cq-layer { position: absolute; inset: 0; }
.cq-player { position: absolute; left: 0; bottom: 96px; width: 40px; height: 54px; will-change: transform; z-index: 6; }
.cq-sprite { position: absolute; inset: 0; }

.cq-play-chrome { position: absolute; top: 14px; right: 14px; z-index: 11; display: flex; align-items: center; gap: 9px; }
.cq-keys-hint {
  display: inline-flex; align-items: center; gap: 7px; background: rgba(9, 17, 29, .55);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 7px 13px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 12px; color: #C2CEDC;
}
.cq-pause { width: 34px; height: 34px; border-radius: 10px; background: rgba(9, 17, 29, .55); border: 1px solid rgba(255, 255, 255, .16); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cq-toast {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 11;
  background: rgba(9, 17, 29, .82); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px;
  padding: 12px 20px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14px; color: #fff;
  animation: cqPop .2s ease both; white-space: nowrap;
}

/* ---------------- Character select / start overlays ---------------- */
.cq-select, .cq-start { position: absolute; inset: 0; display: flex; flex-direction: column; }
.cq-select { z-index: 14; background: rgba(9, 16, 28, .9); backdrop-filter: blur(5px); overflow-y: auto; }
.cq-select-inner { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 18px 20px; width: 100%; }
.cq-eyebrow { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #F0C64E; }
.cq-select-title { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 25px; color: #fff; text-align: center; line-height: 1.12; }
.cq-select-sub { font-size: 13px; color: #A2B3C7; text-align: center; max-width: 520px; line-height: 1.5; }
.cq-roster { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.cq-hero-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 148px;
  padding: 13px 10px 12px; border-radius: 16px; cursor: pointer; background: rgba(9, 17, 29, .5);
  border: 2px solid rgba(255, 255, 255, .12); box-shadow: 0 8px 22px rgba(8, 16, 28, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cq-hero-card.on { background: linear-gradient(170deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); transform: translateY(-4px); }
/* the sprite box must stay exactly 40x54 at scale 1 — parts are anchored with
   paired left/right, so a different box stretches and flattens the figure */
.cq-hero-sprite { position: relative; width: 40px; height: 54px; display: block; margin: 6px 20px 2px; flex: 0 0 auto; }
.cq-hero-name { position: relative; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 13.5px; color: #fff; text-align: center; line-height: 1.2; }
.cq-hero-blurb { position: relative; font-size: 11px; color: #A2B3C7; text-align: center; line-height: 1.4; }
.cq-hero-class {
  position: relative; display: inline-flex; align-items: center; font-family: "Poppins", sans-serif; font-weight: 700;
  font-size: 9px; letter-spacing: .09em; text-transform: uppercase; background: rgba(9, 17, 29, .62);
  border-radius: 999px; padding: 3px 9px;
}
.cq-hero-perk {
  position: relative; display: inline-flex; align-items: center; gap: 5px; margin-top: 1px;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 10px; color: #F3D585;
  background: rgba(9, 17, 29, .6); border: 1px solid rgba(240, 198, 78, .4); border-radius: 8px;
  padding: 5px 8px; text-align: center; line-height: 1.25;
}
.cq-hero-tick { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(8, 16, 28, .4); }
.cq-cta {
  display: flex; align-items: center; gap: 10px; background: #E8402A; border: none; border-radius: 14px;
  padding: 15px 28px; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 16px;
  color: #fff; box-shadow: 0 8px 24px rgba(232, 64, 42, .4);
}
.cq-start { z-index: 12; background: rgba(11, 19, 32, .7); backdrop-filter: blur(3px); align-items: center; justify-content: center; gap: 16px; padding: 28px; }
.cq-start-title { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 30px; color: #fff; text-align: center; }
.cq-start-body { font-size: 15px; color: #C2CEDC; text-align: center; max-width: 460px; line-height: 1.55; }
.cq-start-keys { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.cq-start-keys > span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: #A2B3C7; }
.cq-cap { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 12.5px; color: #16273F; background: #E6EBF2; border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; padding: 5px 11px; box-shadow: 0 2px 0 #A8B4C4; }
.cq-start-alt { background: none; border: none; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 13.5px; color: #9DAFC4; text-decoration: underline; }

/* ---------------- Touch pad + text alternative ---------------- */
.cq-pad { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.cq-pad-btn { width: 66px; height: 52px; border-radius: 14px; background: #fff; border: 1px solid #DDE3EC; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(18, 38, 63, .07); }
.cq-pad-jump { height: 52px; padding: 0 30px; border-radius: 14px; background: #16273F; border: none; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; color: #fff; box-shadow: 0 4px 14px rgba(22, 39, 63, .28); }
.cq-pad-note { font-size: 13px; color: #8791A0; margin-left: 6px; }
.cq-alt { max-width: 900px; margin: 16px auto 0; font-size: 13px; line-height: 1.6; color: #8791A0; text-align: center; }

/* ---------------- Quest log panel ---------------- */
.cq-panel-overlay { position: fixed; inset: 0; background: rgba(16, 26, 40, .5); z-index: 70; }
.cq-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 94vw; background: #F7F9FC;
  z-index: 71; overflow-y: auto; box-shadow: -16px 0 48px rgba(16, 26, 40, .24);
  transform: translateX(102%); transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.cq-panel.open { transform: translateX(0); }
.cq-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-bottom: 1px solid #EFF1F6; }
.cq-panel-head h2 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px; color: #16273F; margin: 0; }
.cq-panel-head p { font-size: 12.5px; color: #8791A0; margin: 2px 0 0; }
.cq-icon-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: #F4F6FA; border: 1px solid #E4E8EF; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cq-panel-body { padding: 18px 22px 34px; display: flex; flex-direction: column; gap: 20px; }
.cq-log-stage { background: #fff; border: 1px solid #EAEDF3; border-radius: 16px; padding: 16px 18px; box-shadow: 0 3px 12px rgba(18, 38, 63, .04); }
.cq-log-stage.done { border-color: #CFEDE0; }
.cq-log-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.cq-log-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.cq-log-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cq-log-name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15.5px; color: #16273F; }
.cq-log-meta { font-size: 12px; color: #98A2B0; }
.cq-warp { flex: 0 0 auto; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 12px; color: #2F6FE0; background: #EAF1FC; border: 1px solid #D6E4FB; border-radius: 9px; padding: 6px 11px; cursor: pointer; }
.cq-log-tasks { display: flex; flex-direction: column; gap: 7px; }
.cq-task-row { display: flex; align-items: center; gap: 11px; width: 100%; background: #fff; border: 1px solid #E9ECF2; border-radius: 11px; padding: 10px 12px; cursor: pointer; text-align: left; }
.cq-task-row.done { background: #F5FBF8; border-color: #DCEEE5; }
.cq-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: #fff; border: 1.5px solid #CBD4E0; display: flex; align-items: center; justify-content: center; }
.cq-check.on { background: #1FA97A; border-color: #1FA97A; }
.cq-task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cq-task-title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 13.5px; color: #16273F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-task-row.done .cq-task-title { text-decoration: line-through; }
.cq-task-meta { font-size: 12px; color: #98A2B0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-xp-pill { flex: 0 0 auto; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 11px; color: #87680A; background: #FDF7E5; border: 1px solid #F0E3BC; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.cq-task-row.done .cq-xp-pill { color: #1FA97A; background: #E7F7F1; border-color: #CFEDE0; }

/* ---------------- Modals (battle + stage clear) ---------------- */
.cq-modal { position: fixed; inset: 0; z-index: 82; background: rgba(11, 19, 32, .68); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.cq-battle-card { width: 600px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 24px; box-shadow: 0 40px 100px rgba(8, 16, 28, .5); animation: cqPop .24s ease both; }
.cq-battle-head { position: relative; padding: 26px 28px; background: linear-gradient(150deg, #16273F, #22395C); overflow: hidden; }
.cq-battle-head-row { position: relative; display: flex; align-items: center; gap: 18px; }
.cq-battle-pills { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.cq-battle-villain { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 25px; color: #fff; line-height: 1.12; }
.cq-battle-sub { font-size: 13.5px; color: #C2CEDC; margin-top: 4px; }
.cq-pill-stage { display: inline-flex; align-items: center; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; background: rgba(9, 17, 29, .5); border-radius: 999px; padding: 4px 11px; }
.cq-pill-tool { display: inline-flex; align-items: center; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 11.5px; color: #C2CEDC; background: rgba(9, 17, 29, .42); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 4px 11px; }
.cq-battle-body { padding: 24px; }
.cq-kicker { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: #98A2B0; margin-bottom: 7px; }
.cq-battle-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 19px; color: #16273F; line-height: 1.3; margin-bottom: 12px; }
.cq-battle-why { font-size: 14.5px; color: #5B6675; line-height: 1.6; margin-bottom: 20px; }
.cq-steps { background: #FBFCFE; border: 1px solid #EFF2F7; border-radius: 16px; padding: 18px 20px; margin-bottom: 20px; }
.cq-steps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.cq-steps-head strong { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 13.5px; color: #16273F; }
.cq-steps-head span { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 12.5px; color: #8791A0; }
.cq-steps-list { display: flex; flex-direction: column; gap: 9px; }
.cq-step { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; border: 1.5px solid #E9ECF2; border-radius: 12px; padding: 12px 14px; cursor: pointer; text-align: left; }
.cq-step.on { background: #F2FBF7; border-color: #CFEDE0; }
.cq-step-text { flex: 1; font-family: "Mulish", sans-serif; font-weight: 600; font-size: 14px; color: #33404F; }
.cq-step.on .cq-step-text { color: #5B6675; text-decoration: line-through; }
.cq-hp { height: 8px; border-radius: 999px; background: #EDF0F5; overflow: hidden; margin-top: 16px; }
.cq-hp > span { display: block; height: 100%; border-radius: 999px; transition: width .35s ease; }
.cq-hp-label { font-size: 12px; color: #98A2B0; margin-top: 8px; }
.cq-battle-actions { display: flex; gap: 11px; flex-wrap: wrap; }
.cq-open-tool { flex: 1; min-width: 180px; display: flex; align-items: center; justify-content: center; gap: 9px; background: #fff; color: #16273F; text-decoration: none; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14.5px; padding: 14px 18px; border-radius: 14px; border: 1px solid #DCE1E9; }
.cq-defeat { flex: 1 1 200px; min-width: 200px; display: flex; align-items: center; justify-content: center; gap: 9px; background: #F0A99D; border: none; border-radius: 14px; padding: 14px 18px; cursor: default; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 14.5px; color: #fff; }
.cq-defeat.ready { background: #E8402A; cursor: pointer; box-shadow: 0 6px 18px rgba(232, 64, 42, .32); }
.cq-flee { width: 100%; margin-top: 12px; background: none; border: none; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 13.5px; color: #8791A0; padding: 6px; }

.cq-flash-card { width: 520px; max-width: 100%; background: linear-gradient(150deg, #16273F, #22395C); border-radius: 24px; padding: 38px 32px 30px; text-align: center; box-shadow: 0 40px 100px rgba(8, 16, 28, .55); animation: cqPop .26s ease both; position: relative; overflow: hidden; }
.cq-flash-eyebrow { position: relative; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #F0C64E; margin-top: 18px; }
.cq-flash-title { position: relative; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 29px; color: #fff; margin-top: 8px; line-height: 1.15; }
.cq-flash-body { position: relative; font-size: 14.5px; color: #C2CEDC; margin-top: 10px; line-height: 1.6; }
.cq-flash-stats { position: relative; display: flex; justify-content: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.cq-flash-stat { background: rgba(9, 17, 29, .45); border: 1px solid rgba(255, 255, 255, .16); border-radius: 13px; padding: 12px 18px; }
.cq-flash-stat b { display: block; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 19px; color: #fff; }
.cq-flash-stat span { display: block; font-size: 11.5px; color: #9DAFC4; font-weight: 600; margin-top: 3px; }
.cq-flash-cta { position: relative; margin-top: 24px; background: #E8402A; border: none; border-radius: 14px; padding: 14px 30px; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; color: #fff; box-shadow: 0 8px 22px rgba(232, 64, 42, .36); }

@media (max-width: 900px) {
  .cq-main { padding: 20px 16px 40px; }
  .cq-frame { height: 440px; }
}

/* The world is decorative motion at volume — enemies patrolling, orbs bobbing,
   gates and auras pulsing. Under reduced motion none of it animates, including
   the sprite-level keyframes applied inline by the generators. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cq-panel { transition: none !important; }
}