/* WINGED — The Circuit. Styling for the campaign screen only.
   The screen shell (.screen/.shead/.sbody) comes from menu.css; everything here
   is scoped under #campaign so it cannot reach the match or the collection. */

#campaign .sbody { padding: 0; }
#cmpbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 30px; }
#cmpbody::-webkit-scrollbar { width: 8px; }
#cmpbody::-webkit-scrollbar-thumb { background: #3a4b57; border-radius: 4px; }

.cmpwrap { max-width: 1020px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* ---------------- act header ---------------- */
.cmpact { display: flex; gap: 16px; align-items: center;
  background: linear-gradient(180deg, rgba(16,24,31,.88), rgba(9,14,19,.92));
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
.cmpact-box { width: 74px; height: 96px; flex: none; border-radius: 7px;
  background: #10181f center/cover no-repeat; border: 1px solid var(--gold-d);
  box-shadow: 0 5px 16px rgba(0,0,0,.7); }
.cmpact-tx { min-width: 0; flex: 1; }
.cmpact-tx h3 { margin: 0 0 4px; font-size: 14px; letter-spacing: 3.5px; font-weight: normal; color: var(--gold-l); }
.cmpact-tx p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.5; opacity: .78; }
.cmpprog { height: 6px; border-radius: 4px; background: rgba(255,255,255,.09); overflow: hidden; }
.cmpprog span { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-d), var(--gold) 70%, var(--gold-l));
  box-shadow: 0 0 12px rgba(224,185,95,.5); transition: width .35s ease; }
.cmpprog-l { margin-top: 5px; font-size: 10.5px; letter-spacing: 1.4px; opacity: .55; }

/* ---------------- the circuit ---------------- */
.cmpmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; position: relative; }
.cmpnode { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 10px 12px; border-radius: 12px; cursor: pointer; text-align: center;
  color: var(--cream); font-family: inherit;
  background: linear-gradient(180deg, rgba(16,24,31,.9), rgba(9,14,19,.94));
  border: 1px solid rgba(224,185,95,.16);
  box-shadow: 0 5px 18px rgba(0,0,0,.5); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.cmpnode:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--gold); }
.cmpnode.locked { opacity: .38; cursor: default; filter: grayscale(.7); }
.cmpnode.open { border-color: var(--gold); box-shadow: 0 0 26px rgba(224,185,95,.22), 0 5px 18px rgba(0,0,0,.6); }
.cmpnode.open::after { content: ""; position: absolute; inset: -2px; border-radius: 13px; pointer-events: none;
  border: 1px solid rgba(224,185,95,.45); animation: cmpPulse 2.2s ease-in-out infinite; }
@keyframes cmpPulse { 0%,100% { opacity: .25 } 50% { opacity: .9 } }
.cmpnode.done { border-color: rgba(111,207,107,.5); }
.cmpnode-box { width: 78px; height: 100px; border-radius: 7px; position: relative;
  background: #0f171e center/cover no-repeat; border: 1px solid rgba(224,185,95,.35);
  box-shadow: 0 5px 14px rgba(0,0,0,.7); }
.cmpnode-mark { position: absolute; right: -7px; top: -8px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
  background: linear-gradient(180deg, #1d2b36, #0d151c); border: 1px solid var(--gold-d);
  box-shadow: 0 3px 8px rgba(0,0,0,.8); }
.cmpnode.done .cmpnode-mark { color: #8fe08a; border-color: #46803f; }
.cmpnode-n { font-size: 9.5px; letter-spacing: 2px; opacity: .45; margin-top: 3px; }
.cmpnode-nm { font-size: 13px; color: var(--gold-l); line-height: 1.25; }
.cmpnode-s { font-size: 10.5px; opacity: .6; line-height: 1.3; }

/* ---------------- the deck strip ---------------- */
.cmpdeck { background: linear-gradient(180deg, rgba(14,21,28,.8), rgba(8,13,18,.88));
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px 13px; }
.cmpdeck-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.cmpdeck-h b { font-size: 11px; letter-spacing: 3px; color: var(--gold-l); font-weight: normal; }
.cmpdeck-h span { font-size: 11.5px; opacity: .6; }
.cmpdeck-h em { font-style: normal; color: #8fe08a; opacity: .95; }
.cmpdeck-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cmpchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 20px;
  font-size: 11.5px; background: rgba(255,255,255,.05); border: 1px solid rgba(224,185,95,.16); }
.cmpchip i { font-style: normal; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; background: linear-gradient(180deg, #2b3d4b, #16222c); border: 1px solid rgba(224,185,95,.3); }
.cmpchip b { font-weight: normal; opacity: .55; font-size: 10.5px; }

/* ---------------- briefing ---------------- */
.cmpbrief { display: flex; gap: 18px; align-items: flex-start;
  background: linear-gradient(180deg, rgba(16,24,31,.9), rgba(9,14,19,.94));
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,.55); }
.cmpbrief-por { width: 112px; height: 112px; flex: none; border-radius: 50%;
  background: #16222c center/cover no-repeat;
  box-shadow: 0 0 0 3px rgba(224,185,95,.35), 0 6px 20px rgba(0,0,0,.75); }
.cmpbrief-tx { min-width: 0; flex: 1; }
.cmpbrief-k { font-size: 10px; letter-spacing: 2.4px; opacity: .45; }
.cmpbrief-tx h3 { margin: 3px 0 8px; font-size: 21px; font-weight: normal; color: var(--gold-l); }
.cmpbrief-tw { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.cmpbrief-lo { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; opacity: .62; font-style: italic; }
.cmpfacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cmpfacts li { display: flex; gap: 10px; font-size: 12px; align-items: baseline;
  padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.035); }
.cmpfacts b { flex: none; width: 88px; font-weight: normal; letter-spacing: 1.2px;
  font-size: 10px; opacity: .5; text-transform: uppercase; }
.cmpfacts span { min-width: 0; }
.cmpnote { margin-top: 11px; font-size: 11.5px; opacity: .6; padding: 7px 10px; border-radius: 7px;
  background: rgba(255,255,255,.04); border-left: 2px solid var(--gold-d); }

.cmpfoot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cmpgo { padding: 13px 26px; border-radius: 10px; cursor: pointer; font-family: inherit;
  font-size: 14.5px; letter-spacing: 2.5px; font-weight: bold; color: #241a05;
  border: 1px solid var(--gold-d); text-shadow: 0 1px 0 rgba(255,255,255,.28);
  background: linear-gradient(180deg, var(--gold-l), var(--gold) 48%, #a97f2e);
  box-shadow: 0 5px 18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4); }
.cmpgo:hover { filter: brightness(1.08); }

/* ---------------- reward pick ---------------- */
.cmpreward-h { text-align: center; }
.cmpreward-h h3 { margin: 4px 0 6px; font-size: 20px; font-weight: normal; color: var(--gold-l);
  letter-spacing: 1.5px; }
.cmpreward-h p { margin: 0 auto; max-width: 470px; font-size: 12.5px; line-height: 1.55; opacity: .72; }
.cmprow { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cmpcard { width: 194px; display: flex; flex-direction: column; gap: 5px; position: relative;
  padding: 11px 12px 13px; border-radius: 11px; cursor: pointer; text-align: left; color: var(--cream);
  font-family: inherit;
  background: linear-gradient(180deg, rgba(22,32,41,.94), rgba(10,16,21,.96));
  border: 1px solid rgba(224,185,95,.3);
  box-shadow: 0 6px 20px rgba(0,0,0,.6); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cmpcard:hover { transform: translateY(-5px); border-color: var(--gold);
  box-shadow: 0 0 30px rgba(224,185,95,.26), 0 10px 26px rgba(0,0,0,.7); }
.cmpcard.gale { border-color: rgba(57,169,224,.4); }
.cmpcard.gale:hover { border-color: var(--crystal); box-shadow: 0 0 30px rgba(57,169,224,.3), 0 10px 26px rgba(0,0,0,.7); }
.cc-cost { position: absolute; right: 9px; top: 9px; z-index: 2; width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; color: #06222f;
  background: linear-gradient(180deg, #d5f4ff, #39a9e0 60%, #11445f); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.7); box-shadow: 0 2px 7px rgba(0,0,0,.8); }
.cc-art { display: block; height: 104px; border-radius: 7px; background: #0f171e center/cover no-repeat;
  border: 1px solid rgba(0,0,0,.5); }
.cc-nm { font-size: 13.5px; color: var(--gold-l); line-height: 1.2; }
.cc-st { display: flex; gap: 9px; font-size: 12px; }
.cc-st b { color: #9fd8ef; font-weight: normal; }
.cc-st i { color: #a9d287; font-style: normal; }
.cc-kind { font-size: 10px; letter-spacing: 2px; color: var(--crystal); opacity: .9; }
.cc-kw { font-size: 9.5px; letter-spacing: 1.4px; color: var(--gold); opacity: .85; }
.cc-tx { font-size: 11px; line-height: 1.45; opacity: .68; }

/* ---------------- act complete ---------------- */
.cmpdone { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(20,29,38,.92), rgba(9,14,19,.95));
  border: 1px solid var(--gold-d); border-radius: 13px; padding: 22px 20px 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.cmpdone-box { width: 92px; height: 120px; border-radius: 8px; background: #10181f center/cover no-repeat;
  border: 1px solid var(--gold-d); box-shadow: 0 6px 20px rgba(0,0,0,.8); }
.cmpdone h3 { margin: 4px 0 0; font-size: 19px; letter-spacing: 4px; font-weight: normal; color: var(--gold-l); }
.cmpdone p { margin: 0; max-width: 520px; font-size: 12.5px; line-height: 1.6; opacity: .78; }
.cmpdone-next b { color: var(--gold-l); }

/* ---------------- reset confirm ---------------- */
#cmpconfirm { display: none; position: absolute; inset: 0; z-index: 5; align-items: center; justify-content: center;
  background: rgba(4,7,10,.8); }
#cmpconfirm .box { max-width: 380px; padding: 20px 22px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, rgba(24,34,44,.98), rgba(10,16,21,.99));
  border: 1px solid var(--gold-d); box-shadow: 0 10px 40px rgba(0,0,0,.8); }
#cmpconfirm h4 { margin: 0 0 8px; font-size: 15px; font-weight: normal; color: var(--gold-l); }
#cmpconfirm p { margin: 0 0 15px; font-size: 12.5px; line-height: 1.5; opacity: .75; }
#cmpconfirm .r { display: flex; gap: 9px; justify-content: center; }

/* ---------------- phone ---------------- */
@media (max-width: 760px) {
  #cmpbody { padding: 12px 12px 24px; }
  .cmpwrap { gap: 12px; }
  .cmpact { padding: 11px 12px; gap: 12px; }
  .cmpact-box { width: 56px; height: 74px; }
  .cmpact-tx h3 { font-size: 12.5px; letter-spacing: 2.5px; }
  .cmpact-tx p { font-size: 11.5px; }
  /* Four boxes across a 375px screen is 78px of art each — the names wrap to
     three lines and the circuit stops reading as a route. Two by two instead. */
  .cmpmap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .cmpnode { padding: 10px 7px; }
  .cmpnode-box { width: 66px; height: 86px; }
  .cmpnode-nm { font-size: 12px; }
  .cmpbrief { flex-direction: column; align-items: center; text-align: center; padding: 14px; gap: 12px; }
  .cmpbrief-por { width: 88px; height: 88px; }
  .cmpbrief-tx h3 { font-size: 18px; }
  .cmpfacts li { flex-direction: column; gap: 2px; text-align: left; }
  .cmpfacts b { width: auto; }
  .cmpfoot { justify-content: stretch; }
  .cmpfoot .cmpgo { flex: 1; padding: 13px 12px; font-size: 13px; letter-spacing: 1.5px; }
  .cmprow { gap: 10px; }
  /* Three reward cards side by side do not fit; one column reads better than
     two-and-a-stray. */
  .cmpcard { width: 100%; max-width: 330px; }
  .cc-art { height: 118px; }
  .cmpdone { padding: 18px 14px; }
  .cmpdone h3 { font-size: 16px; letter-spacing: 2.5px; }
}

/* ---------------- the Two Winds markers ----------------
   Everything below is the expansion made visible: a NEW badge on a reward
   tile, a tint on a Flight chip, and the deck the circuit pays out. */
/* LEFT, not right, and that is the whole point of this rule.
   The NEW pill shipped at `right: 6px; top: 6px` and `.cc-cost` sits at
   `right: 9px; top: 9px` — same corner, same z-index, and the pill is written
   into the tile AFTER the gem (campaign.js:352-355), so equal z-index means the
   pill paints over the number. Measured on the real reward panel: the badge
   covered 52% of the cost gem and `elementFromPoint` at the gem's centre
   returned `.cc-new`, against 0% and `.cc-cost` on the one tile in the same
   panel with no badge.
   That is worse than it sounds. rollChoices() guarantees at least two of the
   three tiles are Two Winds (NEW_TILES_MIN = 2), so on a normal reward screen
   the Breeze cost — the number you choose a card by, on a 20-card deck — is
   unreadable on the majority of the tiles, and it is unreadable on exactly the
   tiles the whole change exists to sell. */
.cc-new { position: absolute; left: 6px; top: 6px; z-index: 2;
  padding: 2px 6px; border-radius: 20px; font-size: 8.5px; letter-spacing: 1.2px;
  color: #0b1016; background: linear-gradient(180deg, #9fe39a, #4fa64a);
  box-shadow: 0 2px 6px rgba(0,0,0,.7); }
.cmpnew { color: #9fe39a; font-style: normal; }
.cmpchip.new { border-color: rgba(111,207,107,.5); }
.cmpchip.new i { background: radial-gradient(circle at 35% 30%, #9fe39a, #2f6b2b); }

/* ---------------- side select ---------------- */
.cmpsides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cmpside-card { display: flex; gap: 14px; align-items: flex-start; text-align: left;
  padding: 14px; border-radius: 13px; cursor: pointer; color: var(--cream); font-family: inherit;
  background: linear-gradient(180deg, rgba(16,24,31,.9), rgba(9,14,19,.94));
  border: 1px solid rgba(224,185,95,.2); box-shadow: 0 6px 22px rgba(0,0,0,.5);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.cmpside-card:hover { transform: translateY(-3px); border-color: var(--gold);
  box-shadow: 0 0 26px rgba(224,185,95,.2), 0 6px 22px rgba(0,0,0,.6); }
.cmpside-box { width: 84px; height: 110px; flex: none; border-radius: 8px;
  background: #10181f center/cover no-repeat; border: 1px solid var(--gold-d);
  box-shadow: 0 5px 16px rgba(0,0,0,.7); }
.cmpside-tx { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cmpside-tx b { font-size: 16px; color: var(--gold-l); font-weight: normal; letter-spacing: 1px; }
.cmpside-tx i { font-style: normal; font-size: 12.5px; line-height: 1.5; opacity: .8; }
.cmpside-tx ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.cmpside-tx li { font-size: 11.5px; opacity: .78; display: flex; gap: 8px; }
.cmpside-tx li span { flex: none; width: 116px; opacity: .55; letter-spacing: .4px; }
.cmpside-tx li em { font-style: normal; color: #9fe39a; }
.cmpside { font-size: 10.5px; letter-spacing: 2px; opacity: .6; margin-left: 6px; }

/* ---------------- the flights this circuit pays ---------------- */
.cmpflights { background: linear-gradient(180deg, rgba(14,21,28,.8), rgba(8,13,18,.88));
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px 13px; }
.cmpflight-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.cmpflight { display: flex; gap: 11px; align-items: center; padding: 9px 11px; border-radius: 10px;
  background: rgba(9,14,19,.6); border: 1px dashed rgba(224,185,95,.2); opacity: .62; }
.cmpflight.got { opacity: 1; border-style: solid; border-color: rgba(111,207,107,.45); }
.cmpflight-box { position: relative; width: 44px; height: 58px; flex: none; border-radius: 6px;
  background: #0f171e center/cover no-repeat; border: 1px solid rgba(224,185,95,.28);
  filter: grayscale(.75) brightness(.75); }
.cmpflight.got .cmpflight-box { filter: none; }
.cmpflight-mark { position: absolute; right: -6px; top: -7px; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; line-height: 1;
  background: linear-gradient(180deg, #1d2b36, #0d151c); border: 1px solid var(--gold-d); }
.cmpflight.got .cmpflight-mark { color: #8fe08a; border-color: #46803f; }
.cmpflight-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmpflight-tx b { font-size: 12.5px; color: var(--gold-l); font-weight: normal; }
.cmpflight-tx i { font-style: normal; font-size: 11.5px; opacity: .85; }
.cmpflight-tx em { font-style: normal; font-size: 10px; letter-spacing: .3px; opacity: .55; }

/* ---------------- "deck won" banner on the reward screen ---------------- */
.cmpearned { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(28,40,26,.9), rgba(12,20,14,.92));
  border: 1px solid rgba(111,207,107,.42);
  box-shadow: 0 0 26px rgba(111,207,107,.14), 0 5px 18px rgba(0,0,0,.55); }
.cmpearned-box { width: 56px; height: 74px; flex: none; border-radius: 7px;
  background: #0f171e center/cover no-repeat; border: 1px solid rgba(111,207,107,.5);
  box-shadow: 0 4px 12px rgba(0,0,0,.7); }
.cmpearned-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cmpearned-tx b { font-size: 12px; letter-spacing: 2px; color: #9fe39a; font-weight: normal; }
.cmpearned-tx i { font-style: normal; font-size: 14px; color: var(--gold-l); }
.cmpearned-tx em { font-style: normal; font-size: 11.5px; line-height: 1.5; opacity: .72; }

@media (max-width: 720px) {
  .cmpsides { grid-template-columns: 1fr; gap: 11px; }
  .cmpside-box { width: 66px; height: 88px; }
  .cmpside-tx li { flex-direction: column; gap: 0; }
  .cmpside-tx li span { width: auto; }
  .cmpflight-row { grid-template-columns: 1fr; }
  .cmpearned { flex-wrap: wrap; }
}