/* ===========================================================================
   cnd.css — CINDERWAKE shell + DOM interface
   ---------------------------------------------------------------------------
   PORTRAIT FIRST, ~380px, because the Klever dApp browser is portrait-only
   (hard rule 8) and that is where this is played.

   ⚠ EVERY SELECTOR IS PREFIXED `cnd-` OR SCOPED UNDER #cnd-wrap. §8.5: one
   component's unscoped `.bg{position:fixed;inset:0}` once threw a nebula over
   the whole exchange page. A game's stylesheet loads alongside the shared
   header and the wallet bundle, and an unprefixed `.card` or `.pool` here
   would restyle them.

   ⚠ TAP TARGETS ARE >= 44px on every control. The footer tap-jacking class of
   bug came from controls that measured fine and were overlapped by something
   else; the steppers here are 44x44 with the arena under them, not over them.
   ======================================================================== */

/* ⚠ Scoped, never global. Without this every .cnd-card is width:100% PLUS
   14px of padding, so it overflows the 12px screen gutter and clips the overall
   badge and the + steppers off the right edge — measured at 390px portrait. */
#cnd-wrap, #cnd-wrap *, #cnd-wrap *::before, #cnd-wrap *::after { box-sizing: border-box; }

#cnd-wrap {
  position: relative;
  width: 100%;
  min-height: 100svh;
  background: #07050d;
  color: #e9e2f2;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

#cnd-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: rgba(10, 7, 18, 0.92);
  border-bottom: 1px solid rgba(201, 168, 76, 0.22);
  position: sticky; top: 0; z-index: 6;
}
.cnd-title {
  font-family: Cinzel, Georgia, serif; font-size: 15px; letter-spacing: 0.16em;
  color: #f0dfb4;
}
.cnd-spacer { flex: 1; }
.cnd-hub {
  color: #b9aecd; text-decoration: none; font-size: 13px;
  padding: 8px 10px; min-height: 44px; display: flex; align-items: center;
}
#cnd-wrap .onyx-earned {
  display: flex; align-items: center; gap: 6px;
  font: 600 12px/1 ui-monospace, Menlo, monospace; color: #ffd98a;
}
#cnd-wrap .onyx-earned .lbl { opacity: 0.6; font-size: 10px; letter-spacing: 0.1em; }

/* The Phaser canvas sits behind the UI during a fight and is the only thing
   visible on the arena/roster screens (where #cnd-ui covers it). */
#cnd-game {
  position: fixed; inset: 0; z-index: 0;
}
#cnd-game canvas { display: block; }

#cnd-ui { position: relative; z-index: 4; }

/* ── full-screen menu screens ─────────────────────────────────────────── */
.cnd-screen {
  min-height: 100svh; background: linear-gradient(180deg, #0a0714 0%, #120a1c 60%, #0a0712 100%);
  padding: 14px 12px 40px; display: flex; flex-direction: column; gap: 12px;
}
.cnd-head { padding: 18px 4px 4px; }
.cnd-h1 {
  margin: 0; font-family: Cinzel, Georgia, serif; font-size: 30px;
  letter-spacing: 0.22em; color: #f3e3c2; text-align: center;
}
.cnd-sub {
  margin: 10px 6px 0; font-size: 13px; line-height: 1.55; color: #a99fbe; text-align: center;
}
.cnd-topbar-title {
  font-family: Cinzel, Georgia, serif; letter-spacing: 0.12em; font-size: 14px; color: #f0dfb4;
}
.cnd-back {
  background: none; border: 1px solid rgba(185, 174, 205, 0.3); color: #b9aecd;
  border-radius: 8px; min-height: 44px; padding: 0 12px; font-size: 13px;
}

.cnd-card {
  background: rgba(22, 15, 34, 0.86);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 12px; padding: 13px 14px; text-align: left; width: 100%;
  color: inherit;
}
.cnd-arena-card { display: block; cursor: pointer; }
.cnd-arena-card:active { background: rgba(34, 22, 50, 0.95); }
.cnd-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cnd-card-title { font-family: Cinzel, Georgia, serif; font-size: 17px; color: #f0dfb4; }
.cnd-cap {
  font: 700 12px/1 ui-monospace, Menlo, monospace; color: #ffd98a;
  border: 1px solid rgba(255, 217, 138, 0.35); border-radius: 6px; padding: 4px 7px;
}
.cnd-card-blurb { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #a99fbe; }
.cnd-card-meta { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cnd-chip {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: rgba(120, 104, 160, 0.22); color: #cbbfe0;
}
.cnd-chip-done { background: rgba(88, 217, 119, 0.18); color: #8fe3a6; }
.cnd-sound { display: flex; justify-content: center; margin-top: 4px; }
.cnd-soundbtn {
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  font: 700 11px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.14em;
  background: rgba(20, 13, 32, 0.9); color: #7d7492;
  border: 1px solid rgba(185, 174, 205, 0.22);
}
.cnd-soundbtn-on { color: #ffd98a; border-color: rgba(255, 217, 138, 0.4); }

.cnd-note { margin-top: auto; padding: 14px 6px 0; font-size: 11.5px; line-height: 1.5; color: #7d7492; }

/* ── the cap counter: the centre of the design ────────────────────────── */
.cnd-pool {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 12px;
  background: rgba(255, 217, 138, 0.08); border: 1px solid rgba(255, 217, 138, 0.3);
}
.cnd-pool-over { background: rgba(217, 88, 94, 0.12); border-color: rgba(217, 88, 94, 0.5); }
.cnd-pool-n { font: 700 26px/1 ui-monospace, Menlo, monospace; color: #ffd98a; }
.cnd-pool-over .cnd-pool-n { color: #ff8c92; }
.cnd-pool-l { font-size: 12px; color: #a99fbe; }

.cnd-picker-l { margin: 0 0 8px; font-size: 12px; color: #a99fbe; }
.cnd-picker-row { display: flex; gap: 8px; }
.cnd-swap {
  flex: 1; min-height: 44px; border-radius: 10px; font-size: 13px;
  background: rgba(30, 20, 46, 0.9); color: #e9e2f2;
  border: 1px solid rgba(185, 174, 205, 0.26);
}
.cnd-swap:active { background: rgba(48, 32, 70, 0.95); }

.cnd-collection { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cnd-own {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 52px; padding: 7px 10px; border-radius: 10px; text-align: left;
  background: rgba(20, 13, 32, 0.9); color: #cbbfe0;
  border: 1px solid rgba(185, 174, 205, 0.2);
}
.cnd-own-on { border-color: #ffd98a; background: rgba(255, 217, 138, 0.1); color: #f3e3c2; }
.cnd-own-n { font-family: Cinzel, Georgia, serif; font-size: 13.5px; }
.cnd-own-g { font-size: 10.5px; color: #8c83a6; }
.cnd-own-on .cnd-own-g { color: #c0ab7e; }
.cnd-grant {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; text-align: center;
  background: rgba(198, 126, 255, 0.12); border: 1px solid rgba(198, 126, 255, 0.4);
  font-size: 12.5px; color: #e0cdf7;
}

.cnd-unit-name { display: flex; align-items: baseline; gap: 8px; }
.cnd-unit-n { font-family: Cinzel, Georgia, serif; font-size: 16px; color: #f0dfb4; }
.cnd-unit-role { font-size: 11px; letter-spacing: 0.1em; color: #8c83a6; text-transform: uppercase; }
.cnd-overall { font: 700 12px/1 ui-monospace, Menlo, monospace; color: #cbbfe0; }

.cnd-tax { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 4px; }
.cnd-taxbtn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 44px; padding: 5px 9px; border-radius: 8px;
  background: rgba(14, 9, 24, 0.8); border: 1px solid rgba(185, 174, 205, 0.18);
  color: #e9e2f2;
}
.cnd-taxbtn-l { font-size: 9.5px; letter-spacing: 0.12em; color: #7d7492; text-transform: uppercase; }
.cnd-taxbtn-v { font-size: 12.5px; color: #d8cdec; }

.cnd-attr { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.cnd-attr-lab { display: flex; align-items: baseline; gap: 6px; width: 62px; flex: none; }
.cnd-attr-s { font: 700 10.5px/1 ui-monospace, Menlo, monospace; color: #8c83a6; letter-spacing: 0.06em; }
.cnd-attr-v { font: 700 14px/1 ui-monospace, Menlo, monospace; color: #f0e7ff; }
.cnd-track { flex: 1; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.cnd-track-fill { height: 100%; background: linear-gradient(90deg, #7a5cc4, #ffd98a); }
.cnd-steps { display: flex; gap: 5px; flex: none; }
.cnd-step {
  width: 44px; height: 44px; border-radius: 9px; font-size: 19px; line-height: 1;
  background: rgba(38, 26, 56, 0.95); color: #e9e2f2;
  border: 1px solid rgba(185, 174, 205, 0.26);
}
.cnd-step:active { background: rgba(64, 44, 92, 1); }

.cnd-derived {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 11px;
  padding-top: 9px; border-top: 1px solid rgba(185, 174, 205, 0.14);
  font: 600 11px/1 ui-monospace, Menlo, monospace; color: #9d94b6;
}

.cnd-go {
  width: 100%; min-height: 52px; border-radius: 12px; margin-top: 6px;
  font-family: Cinzel, Georgia, serif; font-size: 15px; letter-spacing: 0.16em;
  color: #1a1108; background: linear-gradient(180deg, #ffd98a, #d9a84c);
  border: none;
}
.cnd-go:disabled { opacity: 0.4; }
.cnd-go-ghost {
  background: none; color: #cbbfe0; border: 1px solid rgba(185, 174, 205, 0.35);
}

/* ── combat HUD ───────────────────────────────────────────────────────── */
/* ⚠ SCOPED WITH THE ID ON PURPOSE. The element carries BOTH `cnd-ui` and
   `cnd-hud`, and `#cnd-ui { position: relative }` (specificity 100) outranks a
   bare `.cnd-hud { position: fixed }` (10). So the HUD was never fixed: it sat
   in normal flow under the topbar, ended 354px short of the bottom of the
   viewport, and pushed the action panel up over the combatants. Measured, not
   guessed — .cnd-actions rendered at top 276 / bottom 490 of an 844px
   viewport, when it should end at ~834.

   This is the §8.5 blast-radius lesson in miniature: the fix is to raise THIS
   rule's specificity, never to drop `position: relative` from #cnd-ui, which
   the menu screens rely on. */
#cnd-ui.cnd-hud {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  /* ⚠ 162px, MEASURED. The 52px this started as was sized for the HUD in
     normal flow, where the topbar had already pushed it down. Now that the HUD
     is genuinely fixed (see the specificity note above) the padding is measured
     from the VIEWPORT top, and 52 put the turn rail at y67 — underneath the
     shared header (49-88) and the game topbar (88-153). Those two together end
     at 153; 162 clears them with a hair of breathing room. If the shared header
     ever changes height this needs re-measuring, which is why the number is
     commented rather than merely written. */
  pointer-events: none; padding: calc(162px + env(safe-area-inset-top, 0px)) 10px
                                calc(10px + env(safe-area-inset-bottom, 0px));
}
#cnd-ui.cnd-hud > * { pointer-events: auto; }
.cnd-rail-lab {
  font: 700 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.18em;
  color: #7d7492; margin-bottom: 5px;
}
.cnd-rail { display: flex; gap: 5px; }
.cnd-pip {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(120, 108, 150, 0.5); border: 1.5px solid rgba(255, 255, 255, 0.18);
  font: 700 10px/1 ui-monospace, Menlo, monospace; color: #efe9fb;
}
.cnd-pip-foe { background: rgba(214, 96, 110, 0.55); }
.cnd-pip-now { border-color: #ffd98a; box-shadow: 0 0 0 2px rgba(255, 217, 138, 0.28); }

.cnd-log { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.cnd-logline {
  font-size: 11.5px; color: #a99fbe; background: rgba(8, 5, 14, 0.82);
  border-radius: 5px; padding: 3px 7px; align-self: flex-start; max-width: 100%;
}
.cnd-log-good { color: #8fe3a6; }
.cnd-log-bad { color: #ff9ba0; }
.cnd-log-sys { color: #7d7492; }

/* A scrim under the action panel. Without it the combatant sprites bleed
   through the ability cards and both become hard to read — visible in the
   phase-2 capture as ghost limbs across the Strike card. */
.cnd-actions {
  margin-top: auto;
  padding: 8px 6px 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(7,5,13,0) 0%, rgba(7,5,13,0.82) 14%, rgba(7,5,13,0.94) 100%);
}
.cnd-wait { height: 8px; }
.cnd-turnof {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 4px 6px;
}
.cnd-turnof-n { font-family: Cinzel, Georgia, serif; font-size: 15px; color: #f0dfb4; }
.cnd-turnof-f { font: 700 11px/1 ui-monospace, Menlo, monospace; color: #6cc4de; }
.cnd-abilities { display: flex; flex-direction: column; gap: 6px; }
.cnd-ability {
  text-align: left; border-radius: 11px; padding: 9px 12px; min-height: 52px;
  background: rgba(20, 13, 32, 0.94); border: 1px solid rgba(201, 168, 76, 0.28);
  color: #e9e2f2;
}
.cnd-ability:active { background: rgba(40, 26, 62, 0.98); }
.cnd-ability-off { opacity: 0.42; }
.cnd-ability-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cnd-ability-n { font-size: 14px; color: #f0dfb4; }
.cnd-ability-c { font: 700 11px/1 ui-monospace, Menlo, monospace; color: #6cc4de; }
.cnd-ability-d { display: block; font-size: 11px; line-height: 1.4; color: #9d94b6; margin-top: 3px; }

/* ── result ───────────────────────────────────────────────────────────── */
.cnd-result {
  position: fixed; inset: 0; z-index: 9; display: flex;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(5, 3, 10, 0.82);
}
.cnd-result-card {
  width: 100%; max-width: 380px; border-radius: 16px; padding: 20px 18px;
  background: rgba(18, 11, 28, 0.98); border: 1px solid rgba(201, 168, 76, 0.3);
}
.cnd-result-h {
  margin: 0; text-align: center; font-family: Cinzel, Georgia, serif;
  font-size: 22px; letter-spacing: 0.14em;
}
.cnd-win { color: #ffd98a; }
.cnd-loss { color: #ff9ba0; }
.cnd-result-sub { margin: 9px 0 14px; text-align: center; font-size: 12.5px; color: #a99fbe; }
.cnd-result-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cnd-result-row {
  display: flex; justify-content: space-between; font-size: 12.5px; color: #9d94b6;
  padding: 5px 0; border-bottom: 1px solid rgba(185, 174, 205, 0.1);
}
.cnd-result-v { font: 700 12.5px/1 ui-monospace, Menlo, monospace; color: #e9e2f2; }
.cnd-result-btns { display: flex; flex-direction: column; gap: 8px; }

@media (min-width: 520px) {
  .cnd-screen { max-width: 480px; margin: 0 auto; }
  #cnd-ui.cnd-hud { max-width: 480px; margin: 0 auto; }
}