/* =====================================================================
   BreakThrough Education — campaign (strict linear questline) styling
   Karabo's guidance bar, province lock states + next-step pulse,
   task-node lock badges, and the first-run intro. Loaded after world.css.
   ===================================================================== */

/* ---------- country map ----------
   Provinces stay visually clean (no outline / fill / fog — the traced
   polygons don't match the painted borders well enough). They remain
   invisible but tappable; a single pin marks the next stop. */
.cmap-hot polygon.cmp-current, .cmap-hot polygon.cmp-done, .cmap-hot polygon.cmp-locked,
.cmap-hot polygon.cmp-current:hover, .cmap-hot polygon.cmp-done:hover, .cmap-hot polygon.cmp-locked:hover,
.cmap-hot polygon:hover, .cmap-hot polygon:focus-visible { fill: transparent; stroke: transparent; outline: none; }

/* "go here next" pin at the current province's centre */
.cmap-goto { position: absolute; transform: translate(-50%,-100%); z-index: 16; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cmap-goto .goto-lbl {
  font-family: var(--font); font-weight: 800; font-size: .78rem; color: #21303f; white-space: nowrap;
  background: linear-gradient(135deg, #ffe08a, #f3c969); padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.45); animation: goto-bob 1.8s ease-in-out infinite;
}
.cmap-goto .goto-dot {
  width: 14px; height: 14px; border-radius: 50%; background: #ffe08a; border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(255,224,138,.7); animation: goto-pulse 1.8s ease-out infinite;
}
@keyframes goto-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes goto-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,224,138,.7); } 100% { box-shadow: 0 0 0 18px rgba(255,224,138,0); } }
@media (prefers-reduced-motion: reduce) { .cmap-goto .goto-lbl, .cmap-goto .goto-dot { animation: none; } }

/* ---------- biome task nodes: campaign lock states ---------- */
.b-node .nlock, .b-node .ndone {
  position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: .62rem; line-height: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
.b-node .nlock { background: #2a3550; color: #cfd8ee; }
.b-node .ndone { background: #1f9d55; color: #fff; font-weight: 900; }
.b-node.locked { cursor: default; }
.b-node.locked .disc { filter: grayscale(.75) brightness(.62); opacity: .9; }
.b-node.locked .tag { opacity: .6; }
.b-node.done .disc { box-shadow: 0 6px 16px rgba(0,0,0,.4), 0 0 0 2px rgba(120,230,150,.6) inset; }
/* the current task — strong "do me" beacon */
.b-node.active .disc { box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 22px -2px var(--ka, #f3c969); }
.b-node.active .disc::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 3px solid #ffe08a; animation: node-ring 1.6s ease-out infinite; pointer-events: none;
}
@keyframes node-ring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .b-node.active .disc::after { animation: none; opacity: .5; } }

/* ---------- signpost task markers (replace the disc buttons) ---------- */
.b-node.sign { transform: translate(-50%,-100%); display: block; width: 0; }
.b-node.sign:hover { transform: translate(-50%,-103%); }
.b-node.sign .sp-post { position: absolute; left: -4px; bottom: 0; width: 8px; height: 52px; border-radius: 3px;
  background: linear-gradient(90deg,#5b3b1e,#8a5a2c 45%,#5b3b1e); box-shadow: 0 4px 8px rgba(0,0,0,.5); }
.b-node.sign .sp-plank { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  min-width: 92px; max-width: 200px; padding: 8px 14px; border-radius: 6px; text-align: center;
  color: #3a2412; font-weight: 800; font-size: .82rem; line-height: 1.15; white-space: normal;
  border: 2px solid #8a5a2c; box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
  background-image: repeating-linear-gradient(90deg, rgba(120,80,30,.10) 0 6px, transparent 6px 13px), linear-gradient(180deg,#e8c489,#cda063); }
.b-node.sign .sp-plank::before { content:""; position:absolute; left:50%; top:-7px; transform:translateX(-50%); width:14px; height:9px; background:#5b3b1e; border-radius:2px; }
/* completion / lock seal — on the RIGHT EDGE of the plank */
.b-node.sign .sp-seal { position: absolute; top: -10px; right: -12px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 900; box-shadow: 0 2px 6px rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.7); }
.b-node.sign .sp-seal.done { background: #1f9d55; color: #fff; }
.b-node.sign .sp-seal.lock { background: #5b5b66; color: #dfe4ef; }
.b-node.sign.active .sp-plank { background-image: linear-gradient(180deg,#ffe6b0,#f0c074); border-color: #a8702f;
  box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 26px -2px #ffcf6b; transform-origin: 50% -7px; animation: sp-sway 3.2s ease-in-out infinite; }
.b-node.sign.active .sp-lantern { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); font-size: 1.1rem;
  filter: drop-shadow(0 0 8px #ffc23b); animation: sp-bob 2.4s ease-in-out infinite; }
.b-node.sign.locked .sp-plank { background-image: linear-gradient(180deg,#b9b3a6,#938d80); border-color: #6b665b; color: #43403a; }
.b-node.sign.locked .sp-post { filter: grayscale(.4) brightness(.85); }
@keyframes sp-sway { 0%,100% { transform: translateX(-50%) rotate(-2.2deg); } 50% { transform: translateX(-50%) rotate(2.2deg); } }
@keyframes sp-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .b-node.sign.active .sp-plank, .b-node.sign.active .sp-lantern { animation: none; } }

/* ---------- Karabo guidance bar ---------- */
.campaign-bar {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 18;
  display: flex; align-items: center; gap: 14px; max-width: min(680px, 94vw);
  padding: 10px 14px 10px 12px; border-radius: 18px;
  background: rgba(10,16,30,.82); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 46px rgba(0,0,0,.55);
  animation: cb-in .45s var(--ease, cubic-bezier(.2,.8,.2,1)) both;
}
@keyframes cb-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cb-portrait {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem;
  border: 3px solid var(--ka, #f3c969); background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.18), rgba(10,16,30,.85));
  box-shadow: 0 0 16px -2px var(--ka, #f3c969); animation: keeper-bob 4s ease-in-out infinite;
}
.cb-text { display: flex; flex-direction: column; gap: 1px; color: #eef3ff; font-family: var(--font); line-height: 1.3; }
.cb-name { font-size: .72rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ka, #f3c969); }
.cb-line { font-size: .95rem; font-weight: 600; }
.cb-line b { font-weight: 800; color: #fff; }
.cb-continue {
  flex: 0 0 auto; margin-left: 4px; cursor: pointer; border: 0; border-radius: 12px;
  font-family: var(--font); font-weight: 800; font-size: .9rem; color: #21303f; padding: 11px 18px;
  background: linear-gradient(135deg, #ffe08a, #f3c969); box-shadow: 0 8px 20px -6px rgba(243,201,105,.8);
  transition: transform .15s var(--ease), box-shadow .15s;
}
.cb-continue:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -6px rgba(243,201,105,.9); }
@media (max-width: 560px) {
  /* full-width bottom bar (was centred + content-width, which squeezed the text one word per line) */
  .campaign-bar { left: 10px; right: 10px; transform: none; max-width: none; animation: none;
    gap: 10px; padding: 10px 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .cb-text { flex: 1; min-width: 0; }
  .cb-portrait { width: 42px; height: 42px; font-size: 1.25rem; }
  .cb-line { font-size: .86rem; }
  .cb-continue { padding: 10px 14px; font-size: .82rem; }
}

/* ---------- HUD language selector (immersive / logged-in learners) ---------- */
.hud-lang { position: relative; }
.hud-btn.lang { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-weight: 800; font-size: .82rem; padding: 0 12px; width: auto; border-radius: 999px; }
.hud-btn.lang .lang-cur { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-btn.theme { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; padding: 0 12px; width: auto; border-radius: 999px; }
.hud-btn.nudge { animation: lang-nudge 1.5s ease-in-out infinite; }
@keyframes lang-nudge { 0%,100% { box-shadow: 0 0 0 0 rgba(255,224,138,.6); } 50% { box-shadow: 0 0 0 10px rgba(255,224,138,0); } }
.hud-theme { position: relative; }
.hud-theme-pop { min-width: 210px; }
.hud-lang-pop .sw { display: inline-flex; gap: 3px; margin-right: 6px; }
.hud-lang-pop .sw i { width: 13px; height: 13px; border-radius: 3px; display: block; }
.hud-lang-pop {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 230px; max-height: 62vh; overflow: auto; display: none; z-index: 60;
  background: rgba(12,18,32,.96); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; box-shadow: 0 18px 46px rgba(0,0,0,.55); padding: 6px;
}
.hud-lang-pop.open { display: block; }
.wlang-head { font-family: var(--font); font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: #9fb2d0; padding: 8px 12px 4px; }
.hud-lang-pop button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: 0; color: #eef3ff; font-family: var(--font); padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.hud-lang-pop button:hover { background: rgba(255,255,255,.08); }
.hud-lang-pop button.active { background: rgba(243,201,105,.16); }
.hud-lang-pop .nm { display: flex; flex-direction: column; line-height: 1.15; font-weight: 800; font-size: .92rem; }
.hud-lang-pop .nm small { font-weight: 600; font-size: .72rem; color: #9fb2d0; }
.hud-lang-pop .tick { color: #ffe08a; font-weight: 900; }
.hud-lang-pop .code { font-size: .7rem; font-weight: 800; color: #7e8ea8; text-transform: uppercase; }
@media (max-width: 560px) { .hud-btn.lang .lang-cur { display: none; } .hud-lang-pop { min-width: 200px; } }

.ci-lang { background: rgba(243,201,105,.14); border: 1px dashed rgba(243,201,105,.5); border-radius: 12px; padding: 10px 14px !important; color: #ffe6a8 !important; }

/* ---------- first-run intro overlay ---------- */
.campaign-intro {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; overflow-y: auto;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: radial-gradient(900px 600px at 50% 40%, rgba(10,20,36,.86), rgba(4,7,14,.94));
  opacity: 0; transition: opacity .4s var(--ease); backdrop-filter: blur(6px);
}
.campaign-intro.show { opacity: 1; }
.campaign-intro .ci-card {
  width: 100%; max-width: 460px; max-height: calc(100dvh - 40px); overflow-y: auto;
  text-align: center; color: #eef3ff; padding: 30px 28px; border-radius: 24px;
  background: rgba(14,20,34,.9); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px rgba(0,0,0,.6);
  transform: translateY(14px) scale(.96); transition: transform .4s var(--ease);
}
.campaign-intro.show .ci-card { transform: none; }
.ci-portrait {
  width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 3rem;
  border: 4px solid var(--ka, #f3c969); background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.2), rgba(10,16,30,.85));
  box-shadow: 0 0 30px -4px var(--ka, #f3c969); animation: keeper-bob 4s ease-in-out infinite;
}
.campaign-intro h2 { font-family: var(--font); font-size: 1.6rem; margin: 0 0 8px; }
.campaign-intro p { font-family: var(--font); font-size: 1rem; line-height: 1.5; color: #c4d2ea; margin: 0 0 10px; }
.ci-begin {
  margin-top: 14px; cursor: pointer; border: 0; border-radius: 14px; font-family: var(--font); font-weight: 800; font-size: 1.05rem;
  color: #21303f; padding: 13px 26px; background: linear-gradient(135deg, #ffe08a, #f3c969); box-shadow: 0 10px 26px -6px rgba(243,201,105,.85);
  transition: transform .15s var(--ease);
}
.ci-begin:hover { transform: translateY(-2px); }
@media (max-width: 560px) {
  .campaign-intro .ci-card { padding: 22px 18px; border-radius: 18px; }
  .ci-portrait { width: 70px; height: 70px; font-size: 2.2rem; margin-bottom: 10px; border-width: 3px; }
  .campaign-intro h2 { font-size: 1.3rem; }
  .campaign-intro p { font-size: .92rem; line-height: 1.45; }
  .ci-begin { font-size: 1rem; padding: 12px 22px; width: 100%; }
}