/* ================================================================
   AROK Deckbuilder — matched to areignofkings.com
   Primary: vivid crimson #b51515 | Accent gold: #e8a020
   Dark bg: #0e0c0c | Header red: #8f1010
   Fonts: Cinzel (display) + EB Garamond (body)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* ── Site-matched colours ── */
  --arok-red:          #b51515;   /* primary crimson — matches site CTA */
  --arok-red-light:    #d41a1a;   /* hover state */
  --arok-red-dark:     #8f1010;   /* header bar, borders */
  --arok-red-dim:      #5a0c0c;   /* subtle borders / surface accents */

  --arok-gold:         #e8a020;   /* "ANNOUNCING" warm gold-orange */
  --arok-gold-light:   #f0ba4a;
  --arok-gold-dim:     #a06c12;

  --arok-slate:        #3e4a58;   /* site's feature-card slate bg */
  --arok-slate-dark:   #2c3440;

  /* ── Backgrounds ── */
  --arok-bg:           #0e0c0c;
  --arok-surface:      #161010;
  --arok-surface-2:    #1e1515;
  --arok-surface-3:    #261c1c;

  /* ── Borders ── */
  --arok-border:       #2e1e1e;
  --arok-border-red:   #5a0c0c;

  /* ── Text ── */
  --arok-text:         #f0e8e0;
  --arok-text-muted:   #a09090;
  --arok-text-dim:     #604848;

  /* ── Faction colours ── */
  --fc-camelot: #1a4a8a;
  --fc-eleven:  #7a1a1a;
  --fc-circle:  #5a1a7a;
  --fc-keepers: #1a5a2a;
  --fc-summer:  #8a7810;
  --fc-winter:  #1a3a7a;
  --fc-envoy:   #7a4a10;
  --fc-neutral: #3a3a46;

  --arok-font-display: 'Cinzel', 'Palatino Linotype', serif;
  --arok-font-body:    'EB Garamond', Georgia, serif;
  --arok-radius:    4px;
  --arok-radius-lg: 7px;
  --arok-shadow:    0 6px 32px rgba(0,0,0,.8);
}

/* ── Reset ──────────────────────────────────────────────────── */
.arok-deckbuilder, .arok-deckbuilder * { box-sizing: border-box; }

.arok-deckbuilder {
  font-family: var(--arok-font-body);
  font-size: 15px;
  color: var(--arok-text);
  background: var(--arok-bg);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  min-height: 80vh;
  border-top: 3px solid var(--arok-red);
}

/* ── Header — matches site nav bar ──────────────────────────── */
.arok-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1.1rem;
  background: var(--arok-red-dark);   /* site header red */
  border-bottom: 2px solid var(--arok-red);
  gap: .75rem;
  flex-wrap: wrap;
}
.arok-title {
  font-family: var(--arok-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.arok-subtitle {
  font-size: .72rem;
  color: rgba(255,255,255,.6);
  font-style: italic;
  margin-left: .4rem;
}
.arok-header-right { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.arok-login-notice { font-size: .8rem; color: rgba(255,255,255,.65); }
.arok-login-notice a { color: var(--arok-gold); }

/* ── Mobile tabs ─────────────────────────────────────────────── */
.arok-mobile-tabs { display: none; background: var(--arok-surface); border-bottom: 1px solid var(--arok-border-red); }
.arok-tab {
  flex: 1; padding: .6rem .4rem;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--arok-text-muted);
  font-family: var(--arok-font-display);
  font-size: .66rem; letter-spacing: .1em; font-weight: 600;
  cursor: pointer; text-transform: uppercase;
  transition: color .15s, border-color .15s;
}
.arok-tab.active, .arok-tab:hover {
  color: #fff; border-bottom-color: var(--arok-red);
}

/* ── Buttons — match site "EXPLORE" button style ─────────────── */
.arok-btn {
  font-family: var(--arok-font-display);
  font-size: .68rem;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
  padding: .38rem .85rem;
  border-radius: var(--arok-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.arok-btn-primary {
  background: var(--arok-red);
  color: #ffffff;
  border-color: var(--arok-red-light);
}
.arok-btn-primary:hover:not(:disabled) { background: var(--arok-red-light); }
.arok-btn-primary:disabled { opacity: .3; cursor: not-allowed; }

.arok-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.3);
}
.arok-btn-ghost:hover { border-color: var(--arok-red); color: #fff; }

.arok-btn-danger { background: transparent; color: #e05050; border-color: #7a2020; }
.arok-btn-danger:hover { background: #7a2020; color: #fff; }
.arok-btn-sm { font-size: .62rem; padding: .22rem .5rem; }

.arok-btn-inline {
  background: none; border: 1px solid var(--arok-gold-dim);
  color: var(--arok-gold); border-radius: 3px;
  font-size: .62rem; padding: 1px 7px; cursor: pointer;
  font-family: var(--arok-font-display); letter-spacing: .06em; font-weight: 600;
  margin-left: .4rem; vertical-align: middle; text-transform: uppercase;
  transition: background .12s, color .12s;
}
.arok-btn-inline:hover { background: var(--arok-red); border-color: var(--arok-red); color: #fff; }

/* ── 3-column layout ─────────────────────────────────────────── */
.arok-body {
  display: grid;
  grid-template-columns: 275px 1fr 235px;
  height: calc(100vh - 52px);
  min-height: 580px;
  overflow: hidden;
}

/* ── Panels ──────────────────────────────────────────────────── */
.arok-panel {
  overflow-y: auto; padding: .7rem .85rem;
  border-right: 1px solid var(--arok-border);
  scrollbar-width: thin;
  scrollbar-color: var(--arok-border-red) transparent;
}
.arok-panel::-webkit-scrollbar { width: 4px; }
.arok-panel::-webkit-scrollbar-thumb { background: var(--arok-border-red); border-radius: 2px; }
.arok-panel:last-child { border-right: 0; }

/* Panel heading — matches site's uppercase section labels */
.arok-panel-head {
  font-family: var(--arok-font-display);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--arok-gold);      /* matches "ANNOUNCING" gold */
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--arok-red-dim);
  margin-bottom: .65rem;
}

/* ── Form controls ───────────────────────────────────────────── */
/* ALL inputs and selects: white background, dark text for readability */
.arok-input,
.arok-select,
.arok-textarea {
  width: 100%;
  background: #ffffff;
  color: #1a1010;
  border: 1px solid #c8b8b0;
  padding: .42rem .6rem;
  border-radius: var(--arok-radius);
  font-family: var(--arok-font-body);
  font-size: .9rem;
  outline: none;
  margin-bottom: .4rem;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
.arok-input:focus,
.arok-select:focus   { border-color: var(--arok-red); outline: 1px solid rgba(181,21,21,.25); }
.arok-input::placeholder { color: #9a8888; }
.arok-select { cursor: pointer; }
.arok-select option { background: #fff; color: #1a1010; }

/* Deck name: dark themed — not a filter control */
.arok-deck-name-input {
  background: var(--arok-surface-2) !important;
  color: #fff !important;
  border-color: var(--arok-border-red) !important;
  font-family: var(--arok-font-display) !important;
  font-size: .95rem !important; font-weight: 600 !important;
  letter-spacing: .04em !important;
}
.arok-deck-name-input::placeholder { color: var(--arok-text-dim) !important; }

/* Faction select: slightly styled to stand out */
.arok-faction-select { border-color: var(--arok-red-dark) !important; }
.arok-faction-select:focus { border-color: var(--arok-red) !important; }

/* Textarea: dark themed */
.arok-textarea {
  background: var(--arok-surface-2) !important;
  color: var(--arok-text) !important;
  border-color: var(--arok-border) !important;
  resize: vertical; min-height: 60px;
}
.arok-textarea::placeholder { color: var(--arok-text-dim) !important; }

.arok-input-sm { width: calc(50% - .2rem); display: inline-block; margin-bottom: 0; }
.arok-filter-row { display: flex; gap: .4rem; margin-bottom: .4rem; }

/* ── Card search results ──────────────────────────────────────── */
.arok-results-meta { font-size: .7rem; color: var(--arok-text-dim); margin-bottom: .3rem; min-height: 1em; }
.arok-card-list    { display: flex; flex-direction: column; gap: .22rem; }

.arok-card-item {
  display: flex; align-items: center; gap: .45rem;
  padding: .38rem .55rem;
  background: var(--arok-surface-2);
  border: 1px solid var(--arok-border);
  border-left: 3px solid var(--arok-border);
  border-radius: var(--arok-radius);
  cursor: pointer; min-height: 44px;
  transition: background .1s, border-color .1s;
}
.arok-card-item:hover {
  background: var(--arok-surface-3);
  border-color: var(--arok-red-dim);
  border-left-color: var(--arok-red);
}

/* Faction left-border colours */
.arok-card-item.faction-camelot { border-left-color: var(--fc-camelot); }
.arok-card-item.faction-eleven  { border-left-color: var(--fc-eleven); }
.arok-card-item.faction-circle  { border-left-color: var(--fc-circle); }
.arok-card-item.faction-keepers { border-left-color: var(--fc-keepers); }
.arok-card-item.faction-summer  { border-left-color: var(--fc-summer); }
.arok-card-item.faction-winter  { border-left-color: var(--fc-winter); }
.arok-card-item.faction-envoy   { border-left-color: var(--fc-envoy); }
.arok-card-item.faction-neutral { border-left-color: var(--fc-neutral); }

.arok-card-cost {
  font-family: var(--arok-font-display);
  font-size: .82rem; font-weight: 700;
  color: var(--arok-gold);
  min-width: 18px; text-align: center; flex-shrink: 0;
}
.arok-card-info  { flex: 1; min-width: 0; }
.arok-card-name  {
  font-size: .86rem; font-weight: 500; color: var(--arok-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.arok-card-name.is-unique { color: var(--arok-gold-light); }
.arok-card-meta  { font-size: .68rem; color: var(--arok-text-muted); font-style: italic; line-height: 1.2; }
.arok-card-icons { display: flex; gap: 3px; font-size: .72rem; flex-shrink: 0; }
.arok-icon-combat  { color: #e05050; }
.arok-icon-guile   { color: #50b0e0; }
.arok-icon-sorcery { color: #c060e0; }
.arok-icon-faith   { color: var(--arok-gold); }
.arok-loyalty-badge {
  font-size: .6rem; background: var(--arok-surface-3);
  border: 1px solid var(--arok-gold-dim); color: var(--arok-gold-dim);
  border-radius: 2px; padding: 1px 3px; display: inline-block; margin-left: 3px;
}
.arok-bound-badge { font-size: .6rem; color: var(--arok-red-light); margin-left: 3px; }

/* ── Pagination ──────────────────────────────────────────────── */
.arok-pagination { display: flex; gap: .22rem; justify-content: center; margin-top: .55rem; flex-wrap: wrap; }
.arok-page-btn {
  font-family: var(--arok-font-display); font-size: .65rem;
  padding: .22rem .5rem; min-width: 28px; min-height: 28px;
  background: var(--arok-surface-2); border: 1px solid var(--arok-border);
  color: var(--arok-text-muted); border-radius: var(--arok-radius); cursor: pointer;
}
.arok-page-btn.active, .arok-page-btn:hover { border-color: var(--arok-red); color: #fff; background: var(--arok-red-dim); }

/* ── Deck panel ──────────────────────────────────────────────── */
.arok-deck-name-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.arok-deck-name-input { flex: 1; margin-bottom: 0 !important; }
.arok-toggle-label { display: flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--arok-text-muted); white-space: nowrap; cursor: pointer; }

/* Fixed slots */
.arok-fixed-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .6rem; }
.arok-slot-label {
  font-family: var(--arok-font-display); font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--arok-gold); margin-bottom: .22rem; display: flex; align-items: center;
}
.arok-slot-card {
  padding: .5rem .65rem; background: var(--arok-surface-2);
  border: 1px solid var(--arok-red-dim); border-radius: var(--arok-radius);
  font-size: .82rem; min-height: 42px; display: flex; align-items: center;
}
.arok-slot-empty { color: var(--arok-text-dim); font-style: italic; font-size: .75rem; }
.arok-slot-filled { justify-content: space-between; color: var(--arok-text); }
.arok-slot-remove { background: none; border: none; color: var(--arok-text-dim); cursor: pointer; font-size: .85rem; padding: 0; margin-left: .3rem; }
.arok-slot-remove:hover { color: #e05050; }

/* Zones */
.arok-zone { margin-bottom: .6rem; }
.arok-zone-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .28rem; }
.arok-zone-title {
  font-family: var(--arok-font-display); font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--arok-red-light);
}
.arok-zone-count    { font-size: .7rem; color: var(--arok-text-muted); }
.arok-zone-count.exact { color: #5c9e5c; }
.arok-zone-count.over  { color: var(--arok-gold); }
.arok-zone-count.under { color: var(--arok-text-dim); }
.arok-zone-hint { font-size: .72rem; color: var(--arok-text-dim); font-style: italic; margin: 0 0 .28rem; }
.arok-zone-cards { display: flex; flex-direction: column; gap: .2rem; }

/* Deck entries */
.arok-deck-item {
  display: flex; align-items: center; gap: .32rem;
  padding: .26rem .44rem; background: var(--arok-surface-2);
  border: 1px solid var(--arok-border); border-radius: var(--arok-radius); min-height: 36px;
}
.arok-deck-item:hover { border-color: var(--arok-red-dim); }
.arok-qty-ctrl { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.arok-qty-btn {
  width: 22px; height: 22px; background: var(--arok-surface-3);
  border: 1px solid var(--arok-border); color: var(--arok-text-muted);
  border-radius: 3px; cursor: pointer; font-size: .9rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .1s, color .1s;
}
.arok-qty-btn:hover:not(:disabled) { border-color: var(--arok-red); color: #fff; }
.arok-qty-btn:disabled { opacity: .25; cursor: not-allowed; }
.arok-qty-num { min-width: 20px; text-align: center; font-family: var(--arok-font-display); font-size: .78rem; color: var(--arok-gold); }
.arok-deck-item-name { flex: 1; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arok-deck-item-remove { background: none; border: none; color: var(--arok-text-dim); cursor: pointer; font-size: .78rem; padding: 0; flex-shrink: 0; }
.arok-deck-item-remove:hover { color: #e05050; }

/* ── Stats panel ─────────────────────────────────────────────── */
/* Site's feature cards use a slate background — use it here */
.arok-panel-stats { background: var(--arok-slate-dark); }

.arok-stat-block { margin-bottom: .75rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.arok-stat-block:last-child { border-bottom: 0; }
.arok-stat-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.45); margin-bottom: .28rem; font-family: var(--arok-font-display); }
.arok-stat-value { font-family: var(--arok-font-display); font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 1; }

/* Validation rows */
.arok-validation-row { font-size: .79rem; padding: .16rem 0; color: rgba(255,255,255,.45); transition: color .2s; }
.arok-validation-row.valid   { color: #6dbf6d; }
.arok-validation-row.invalid { color: #e05050; }

/* Icon bar */
.arok-icon-bar { display: flex; gap: .38rem; flex-wrap: wrap; }
.arok-icon-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 36px; background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--arok-radius); padding: .22rem .3rem;
}
.arok-icon-symbol { font-size: .9rem; line-height: 1; }
.arok-icon-count  { font-size: .7rem; color: rgba(255,255,255,.55); }
.arok-combat  .arok-icon-symbol { color: #e05050; }
.arok-guile   .arok-icon-symbol { color: #50b0e0; }
.arok-sorcery .arok-icon-symbol { color: #c060e0; }
.arok-faith   .arok-icon-symbol { color: var(--arok-gold); }

/* By type */
.arok-type-row { display: flex; justify-content: space-between; font-size: .78rem; padding: .1rem 0; color: rgba(255,255,255,.5); }
.arok-type-row span { color: rgba(255,255,255,.85); }

/* ── My Decks ────────────────────────────────────────────────── */
.arok-my-deck-item { padding: .38rem .52rem; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); border-radius: var(--arok-radius); margin-bottom: .26rem; }
.arok-my-deck-name { font-size: .82rem; color: #fff; margin-bottom: .18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arok-my-deck-actions { display: flex; gap: .28rem; }

/* ── Tooltip ─────────────────────────────────────────────────── */
.arok-tooltip {
  position: fixed; z-index: 99999; max-width: 285px; pointer-events: none;
  background: #1a1010; border: 1px solid var(--arok-red-dark);
  border-top: 2px solid var(--arok-red);
  border-radius: var(--arok-radius-lg); padding: .7rem .9rem;
  box-shadow: var(--arok-shadow);
}
.arok-tooltip-name { font-family: var(--arok-font-display); font-size: .86rem; font-weight: 600; color: var(--arok-gold-light); margin-bottom: .1rem; }
.arok-tooltip-subtitle { font-size: .73rem; color: var(--arok-text-muted); font-style: italic; margin-bottom: .32rem; }
.arok-tooltip-meta { font-size: .7rem; color: var(--arok-text-muted); margin-bottom: .32rem; display: flex; gap: .42rem; flex-wrap: wrap; }
.arok-tooltip-quest { display: flex; gap: .6rem; font-size: .73rem; color: var(--arok-text-muted); margin-bottom: .32rem; }
.arok-tooltip-quest strong { color: var(--arok-gold); }
.arok-tooltip-traits { font-size: .7rem; color: var(--arok-text-muted); font-style: italic; margin-bottom: .28rem; }
.arok-tooltip-text { font-size: .8rem; color: var(--arok-text); line-height: 1.5; }
.arok-tooltip-flavor { font-size: .7rem; color: var(--arok-text-dim); font-style: italic; margin-top: .32rem; border-top: 1px solid var(--arok-border); padding-top: .28rem; }

/* ── Toast ───────────────────────────────────────────────────── */
.arok-toast {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 99999;
  padding: .6rem 1rem; background: #1a1010;
  border: 1px solid var(--arok-red-dark); border-left: 3px solid var(--arok-red);
  border-radius: var(--arok-radius); color: var(--arok-text);
  font-size: .82rem; box-shadow: var(--arok-shadow); max-width: 300px;
  animation: arokFadeIn .18s ease;
}
.arok-toast.toast-success { border-left-color: #5c9e5c; }
.arok-toast.toast-error   { border-left-color: #e05050; }
@keyframes arokFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading ─────────────────────────────────────────────────── */
.arok-loading { text-align: center; padding: 1.5rem; color: var(--arok-text-dim); font-style: italic; font-size: .82rem; }

/* ── Deck list page ──────────────────────────────────────────── */
.arok-deck-list-page { padding: 1rem 0; }
.arok-deck-list-heading { font-family: var(--arok-font-display); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 1rem; }
.arok-deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: .9rem; }
.arok-deck-card { background: var(--arok-slate); border: 1px solid rgba(255,255,255,.1); border-top: 2px solid var(--arok-red); border-radius: var(--arok-radius-lg); padding: .9rem; display: flex; flex-direction: column; gap: .32rem; }
.arok-deck-card-name { font-family: var(--arok-font-display); font-size: .92rem; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.arok-deck-card-meta { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.arok-faction-badge { font-size: .64rem; padding: .1rem .38rem; border-radius: 2px; background: rgba(0,0,0,.3); border: 1px solid var(--arok-red-dark); color: var(--arok-gold); font-family: var(--arok-font-display); text-transform: uppercase; letter-spacing: .06em; }
.arok-deck-author { font-size: .76rem; color: rgba(255,255,255,.55); }
.arok-deck-desc { font-size: .8rem; color: rgba(255,255,255,.55); font-style: italic; margin: 0; }
.arok-deck-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .42rem; border-top: 1px solid rgba(255,255,255,.1); }
.arok-deck-date { font-size: .7rem; color: rgba(255,255,255,.35); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .arok-body { grid-template-columns: 245px 1fr; }
  .arok-panel-stats { display: none; }
}

@media (max-width: 640px) {
  .arok-deckbuilder { min-height: 100svh; border-top-width: 2px; }
  .arok-header { padding: .5rem .75rem; }
  .arok-title  { font-size: .88rem; }
  .arok-subtitle { display: none; }
  .arok-btn    { font-size: .62rem; padding: .3rem .6rem; }

  .arok-mobile-tabs { display: flex; }

  .arok-body {
    display: block;
    height: calc(100svh - 86px);
    overflow: hidden; position: relative;
  }

  .arok-panel {
    display: none; border-right: none;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    overflow-y: auto; padding: .65rem .75rem;
  }
  .arok-panel.arok-tab-pane.active { display: block; }
  .arok-panel-stats { background: var(--arok-slate-dark); } /* restore on mobile */

  .arok-fixed-slots { grid-template-columns: 1fr; }
  .arok-card-item   { min-height: 48px; padding: .48rem .58rem; }
  .arok-qty-btn     { width: 28px; height: 28px; font-size: 1rem; }
  .arok-deck-item   { min-height: 40px; }
  .arok-page-btn    { min-width: 32px; min-height: 32px; }

  /* Tooltip pins to bottom on mobile */
  .arok-tooltip {
    position: fixed !important;
    left: .5rem !important; right: .5rem !important;
    bottom: 1rem !important; top: auto !important;
    max-width: none;
  }
  .arok-toast { left: .5rem; right: .5rem; bottom: .5rem; max-width: none; }
}

@media (max-width: 380px) {
  .arok-header-right .arok-btn-ghost:not(#btn-save-deck) { display: none; }
}

/* ================================================================
   DASHBOARD VIEW
   ================================================================ */

#arok-dashboard { padding: 1rem; }

.arok-view { width: 100%; }

/* ── Toolbar ─────────────────────────────────────────────────── */
.arok-dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.arok-dash-filters  { display: flex; gap: .5rem; flex-wrap: wrap; }
.arok-select-sm     { width: auto; min-width: 160px; margin-bottom: 0; font-size: .82rem; padding: .35rem .55rem; }

/* ── Deck grid ───────────────────────────────────────────────── */
.arok-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
}

/* ── Deck card ───────────────────────────────────────────────── */
.arok-dash-card {
  display: flex;
  flex-direction: column;
  background: var(--arok-surface);
  border: 1px solid var(--arok-border);
  border-top: 2px solid var(--arok-red);
  border-radius: var(--arok-radius-lg);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.arok-dash-card:hover {
  border-color: var(--arok-red-light);
  box-shadow: 0 4px 20px rgba(181,21,21,.2);
}

/* ── Thumbnail strip ─────────────────────────────────────────── */
.arok-dash-card-thumbs {
  display: flex;
  gap: 0;
  background: #000;
  height: 130px;
  overflow: hidden;
}
.arok-dash-thumb {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.arok-dash-thumb + .arok-dash-thumb {
  border-left: 1px solid var(--arok-border);
}
.arok-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .2s;
}
.arok-dash-card:hover .arok-thumb-img { transform: scale(1.04); }

.arok-dash-thumb-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .25rem .4rem;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  font-size: .65rem;
  color: rgba(255,255,255,.85);
  font-family: var(--arok-font-display);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Placeholder when no image exists */
.arok-img-placeholder {
  width: 100%; height: 100%;
  background: var(--arok-surface-2);
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--arok-border);
}
.arok-dash-thumb-faction   .arok-img-placeholder::after { content: '⚜'; }
.arok-dash-thumb-destiny   .arok-img-placeholder::after { content: '★'; }

/* ── Card body ───────────────────────────────────────────────── */
.arok-dash-card-body {
  padding: .7rem .85rem .4rem;
  flex: 1;
}
.arok-dash-card-name {
  font-family: var(--arok-font-display);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arok-dash-card-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}
.arok-dash-badge {
  font-size: .62rem;
  padding: .1rem .4rem;
  border-radius: 2px;
  font-family: var(--arok-font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.badge-private { background: rgba(0,0,0,.3); border: 1px solid var(--arok-border); color: var(--arok-text-muted); }
.badge-public  { background: rgba(21,90,21,.25); border: 1px solid #3a6a3a; color: #7abf7a; }
.arok-dash-date { font-size: .72rem; color: var(--arok-text-dim); }
.arok-dash-card-desc {
  font-size: .8rem;
  color: var(--arok-text-muted);
  font-style: italic;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Card actions ────────────────────────────────────────────── */
.arok-dash-card-actions {
  display: flex;
  gap: .4rem;
  padding: .55rem .85rem .65rem;
  border-top: 1px solid var(--arok-border);
  background: rgba(0,0,0,.2);
  align-items: center;
}
.arok-dash-card-actions .arok-btn-danger { margin-left: auto; }

/* ── Empty state ─────────────────────────────────────────────── */
.arok-dash-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--arok-text-muted);
}
.arok-dash-empty p { font-size: 1rem; margin-bottom: 1rem; }

/* ── Back button ─────────────────────────────────────────────── */
.arok-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  margin-right: .5rem;
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
}
.arok-back-btn:hover { border-color: rgba(255,255,255,.5); color: #fff; }

/* ── Card thumbnails in search results ───────────────────────── */
.arok-card-item-thumb {
  width: 32px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--arok-surface-3);
}
.arok-card-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.arok-card-item-thumb.arok-img-placeholder { font-size: .9rem; }
.arok-card-item-thumb.arok-img-placeholder::after { content: ''; }

/* ── Deck zone item thumbnail ────────────────────────────────── */
.arok-deck-item-thumb {
  width: 24px; height: 34px;
  flex-shrink: 0; border-radius: 2px; overflow: hidden;
  background: var(--arok-surface-3);
}
.arok-deck-item-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ── Destiny slot thumbnail ──────────────────────────────────── */
.arok-slot-thumb {
  width: 28px; height: 38px;
  object-fit: cover; object-position: top;
  border-radius: 2px; flex-shrink: 0; margin-right: .4rem;
}
.arok-slot-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Tooltip image ───────────────────────────────────────────── */
.arok-tooltip-img-wrap {
  margin: -.7rem -.9rem .5rem;
  border-radius: var(--arok-radius-lg) var(--arok-radius-lg) 0 0;
  overflow: hidden;
  height: 120px;
}
.arok-tooltip-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}

/* ── Dashboard responsive ────────────────────────────────────── */
@media (max-width: 700px) {
  .arok-dash-grid { grid-template-columns: 1fr; }
  .arok-dash-card-thumbs { height: 110px; }
  .arok-dashboard-toolbar { flex-direction: column; align-items: stretch; }
  .arok-dashboard-toolbar .arok-btn { width: 100%; text-align: center; }
  .arok-dash-filters { flex-direction: column; }
  .arok-select-sm { width: 100%; }
}

/* ================================================================
   LOGGED-OUT SPLASH VIEW
   ================================================================ */

.arok-loggedout-view {
  padding: 0;
}

/* ── Hero section ────────────────────────────────────────────── */
.arok-loggedout-hero {
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
  background: linear-gradient(180deg, #1a0808 0%, var(--arok-bg) 100%);
  border-bottom: 1px solid var(--arok-border-red);
}
.arok-loggedout-icon {
  font-size: 2.8rem;
  color: var(--arok-red-light);
  margin-bottom: .75rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(181,21,21,.5));
}
.arok-loggedout-heading {
  font-family: var(--arok-font-display);
  font-size: 1.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  margin: 0 0 .6rem;
}
.arok-loggedout-sub {
  font-size: 1rem;
  color: var(--arok-text-muted);
  margin: 0 0 1.5rem;
  line-height: 1.6;
}
.arok-loggedout-sub strong { color: var(--arok-text); }

.arok-btn-lg {
  font-size: .82rem;
  padding: .65rem 1.75rem;
  letter-spacing: .1em;
}

.arok-loggedout-register {
  margin: .9rem 0 0;
  font-size: .82rem;
  color: var(--arok-text-dim);
}
.arok-loggedout-register a { color: var(--arok-gold); }
.arok-loggedout-register a:hover { color: var(--arok-gold-light); }

/* ── Faction preview grid ────────────────────────────────────── */
.arok-loggedout-factions {
  padding: 1.75rem 1.25rem 2rem;
}
.arok-loggedout-faction-label {
  text-align: center;
  font-family: var(--arok-font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--arok-gold);
  margin: 0 0 1.1rem;
}
.arok-loggedout-faction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}
.arok-loggedout-faction-card {
  background: var(--arok-surface);
  border: 1px solid var(--arok-border);
  border-top: 2px solid var(--arok-red-dim);
  border-radius: var(--arok-radius-lg);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.arok-loggedout-faction-card:hover {
  border-color: var(--arok-red);
  transform: translateY(-2px);
}
.arok-loggedout-faction-thumb {
  height: 90px;
  background: #000;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arok-loggedout-faction-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .2s;
}
.arok-loggedout-faction-card:hover .arok-loggedout-faction-thumb img {
  transform: scale(1.06);
}
/* Fallback icon shown when image fails/missing */
.arok-loggedout-faction-thumb-fallback {
  position: absolute;
  font-size: 2rem;
  color: var(--arok-border);
  display: none;
}
.arok-loggedout-faction-thumb.arok-img-placeholder img { display: none; }
.arok-loggedout-faction-thumb.arok-img-placeholder .arok-loggedout-faction-thumb-fallback { display: block; }

.arok-loggedout-faction-name {
  padding: .45rem .55rem;
  font-family: var(--arok-font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--arok-text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arok-loggedout-faction-card:hover .arok-loggedout-faction-name {
  color: var(--arok-text);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .arok-loggedout-hero { padding: 2rem 1rem 1.75rem; }
  .arok-loggedout-heading { font-size: 1.3rem; }
  .arok-loggedout-faction-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .55rem; }
  .arok-loggedout-faction-thumb { height: 70px; }
}

/* ================================================================
   SETUP SCREEN — Choose Faction & Destiny
   ================================================================ */

#arok-setup { padding: 1.25rem 1.1rem 2rem; }

.arok-setup-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2rem;
  align-items: start;
}

.arok-setup-heading {
  font-family: var(--arok-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  margin: 0 0 1.1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--arok-red-dim);
}

/* ── Faction grid ────────────────────────────────────────────── */
.arok-setup-faction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
}

.arok-setup-faction-card {
  position: relative;
  cursor: pointer;
  border-radius: var(--arok-radius-lg);
  overflow: hidden;
  border: 2px solid var(--arok-border);
  background: #000;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  display: block;
}
.arok-setup-faction-card:hover {
  border-color: var(--arok-red);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(181,21,21,.3);
}
.arok-setup-faction-card.selected {
  border-color: var(--arok-gold);
  box-shadow: 0 0 0 2px rgba(232,160,32,.35), 0 6px 20px rgba(181,21,21,.4);
}

/* Hide the native radio */
.arok-setup-faction-radio { position: absolute; opacity: 0; width: 0; height: 0; }

.arok-setup-faction-img-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.arok-setup-faction-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform .2s;
}
.arok-setup-faction-card:hover .arok-setup-faction-img-wrap img { transform: scale(1.05); }
.arok-setup-faction-img-wrap.arok-img-placeholder img { display: none; }
.arok-setup-faction-fallback {
  position: absolute; font-size: 3rem; color: var(--arok-border);
  display: none;
}
.arok-setup-faction-img-wrap.arok-img-placeholder .arok-setup-faction-fallback { display: block; }

.arok-setup-faction-label {
  padding: .55rem .65rem;
  text-align: center;
  font-family: var(--arok-font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--arok-text-muted);
  background: var(--arok-surface-2);
  border-top: 1px solid var(--arok-border);
  transition: color .15s;
}
.arok-setup-faction-card:hover .arok-setup-faction-label   { color: var(--arok-text); }
.arok-setup-faction-card.selected .arok-setup-faction-label { color: var(--arok-gold-light); }

/* Selected checkmark overlay */
.arok-setup-faction-card.selected::after {
  content: '✓';
  position: absolute;
  top: .4rem; right: .4rem;
  width: 22px; height: 22px;
  background: var(--arok-gold);
  color: #0e0c0c;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  font-family: sans-serif;
}

/* ── Destiny list ────────────────────────────────────────────── */
.arok-setup-right {
  position: sticky;
  top: 1rem;
}

.arok-setup-destiny-list {
  background: var(--arok-surface);
  border: 1px solid var(--arok-border);
  border-radius: var(--arok-radius-lg);
  overflow: hidden;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--arok-border-red) transparent;
}

.arok-destiny-option {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--arok-border);
  transition: background .1s;
}
.arok-destiny-option:last-child { border-bottom: none; }
.arok-destiny-option:hover { background: var(--arok-surface-2); }
.arok-destiny-option.selected { background: rgba(181,21,21,.12); }

.arok-destiny-radio {
  width: 16px; height: 16px;
  accent-color: var(--arok-red);
  cursor: pointer;
  flex-shrink: 0;
}

.arok-destiny-name {
  font-size: .9rem;
  color: var(--arok-text);
  flex: 1;
  line-height: 1.3;
}
.arok-destiny-option:hover .arok-destiny-name,
.arok-destiny-option.selected .arok-destiny-name { color: #fff; }

.arok-destiny-traits {
  font-size: .72rem;
  color: var(--arok-text-dim);
  font-style: italic;
  flex-shrink: 0;
}

/* ── Faction slot in builder (shows image) ───────────────────── */
.arok-slot-faction { gap: .5rem; }
.arok-slot-faction-inner { display: flex; align-items: center; gap: .45rem; flex: 1; min-width: 0; }
.arok-slot-thumb { width: 28px; height: 38px; object-fit: cover; object-position: top; border-radius: 2px; flex-shrink: 0; }

/* ── Setup responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .arok-setup-layout { grid-template-columns: 1fr; }
  .arok-setup-right  { position: static; }
  .arok-setup-destiny-list { max-height: 360px; }
  .arok-setup-faction-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .arok-setup-faction-img-wrap { height: 160px; }
}
@media (max-width: 500px) {
  #arok-setup { padding: .9rem .75rem 1.5rem; }
  .arok-setup-heading { font-size: .9rem; }
  .arok-setup-faction-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
  .arok-setup-faction-img-wrap { height: 130px; }
}

/* ================================================================
   BUILDER — NEW CARD TABLE + FILTER TOGGLES
   ================================================================ */

/* ── Search bar ──────────────────────────────────────────────── */
.arok-search-bar { margin-bottom: .5rem; }
.arok-search-input { margin-bottom: 0 !important; }

/* ── Filter sections ─────────────────────────────────────────── */
.arok-filter-section { margin-bottom: .55rem; }
.arok-filter-label {
  font-family: var(--arok-font-display);
  font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--arok-gold); margin-bottom: .3rem;
}

/* ── Faction toggle pills ─────────────────────────────────────── */
.arok-faction-toggles { display: flex; flex-wrap: wrap; gap: .3rem; }
.arok-faction-toggle {
  display: flex; align-items: center; gap: .28rem;
  padding: .22rem .5rem; background: var(--arok-surface-2);
  border: 1px solid var(--arok-border); border-radius: 3px;
  color: var(--arok-text-dim); cursor: pointer; font-size: .7rem;
  font-family: var(--arok-font-body); transition: all .12s;
}
.arok-faction-toggle:hover { border-color: var(--arok-red-dim); color: var(--arok-text); }
.arok-faction-toggle.active { background: var(--arok-surface-3); border-color: var(--arok-red); color: var(--arok-text); }
.arok-ft-pip {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.arok-ft-pip.faction-camelot { background: var(--fc-camelot); }
.arok-ft-pip.faction-eleven  { background: var(--fc-eleven); }
.arok-ft-pip.faction-circle  { background: var(--fc-circle); }
.arok-ft-pip.faction-keepers { background: var(--fc-keepers); }
.arok-ft-pip.faction-summer  { background: var(--fc-summer); }
.arok-ft-pip.faction-winter  { background: var(--fc-winter); }
.arok-ft-pip.faction-envoy   { background: var(--fc-envoy); }
.arok-ft-pip.faction-neutral { background: var(--fc-neutral); }
.arok-ft-label { font-size: .68rem; white-space: nowrap; }

/* ── Type toggle pills ───────────────────────────────────────── */
.arok-type-toggles { display: flex; flex-wrap: wrap; gap: .3rem; }
.arok-type-toggle {
  padding: .22rem .55rem; background: var(--arok-surface-2);
  border: 1px solid var(--arok-border); border-radius: 3px;
  color: var(--arok-text-dim); cursor: pointer; font-size: .7rem;
  font-family: var(--arok-font-display); font-weight: 600; letter-spacing: .05em;
  transition: all .12s;
}
.arok-type-toggle:hover { border-color: var(--arok-red-dim); color: var(--arok-text); }
.arok-type-toggle.active { background: var(--arok-red-dim); border-color: var(--arok-red); color: #fff; }

/* ── Cost range ──────────────────────────────────────────────── */
.arok-cost-range .arok-filter-row { align-items: center; }
.arok-cost-range .arok-input-sm   { flex: 1; margin-bottom: 0; }
.arok-cost-sep { color: var(--arok-text-dim); padding: 0 .2rem; font-size: .8rem; }

/* ── Card table ──────────────────────────────────────────────── */
.arok-card-table { margin-top: .4rem; }
/* Qty | Name | Cost | Icons  — POW moved to tooltip */
.arok-card-table-header {
  display: grid;
  grid-template-columns: 58px 1fr 24px 52px;
  gap: .25rem;
  padding: .25rem .4rem;
  font-family: var(--arok-font-display);
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--arok-text-dim);
  border-bottom: 1px solid var(--arok-border);
  margin-bottom: .15rem;
}
.arok-card-rows { display: flex; flex-direction: column; gap: 0; }

/* ── Card row ────────────────────────────────────────────────── */
.arok-card-row {
  display: grid;
  grid-template-columns: 58px 1fr 24px 52px;
  gap: .25rem;
  align-items: center;
  padding: .28rem .4rem;
  border-bottom: 1px solid var(--arok-border);
  border-left: 3px solid transparent;
  cursor: default;
  transition: background .08s;
  min-height: 36px;
}
.arok-card-row:hover { background: var(--arok-surface-2); }
.arok-card-row:last-child { border-bottom: none; }

/* Faction left border on rows */
.arok-card-row.faction-camelot { border-left-color: var(--fc-camelot); }
.arok-card-row.faction-eleven  { border-left-color: var(--fc-eleven); }
.arok-card-row.faction-circle  { border-left-color: var(--fc-circle); }
.arok-card-row.faction-keepers { border-left-color: var(--fc-keepers); }
.arok-card-row.faction-summer  { border-left-color: var(--fc-summer); }
.arok-card-row.faction-winter  { border-left-color: var(--fc-winter); }
.arok-card-row.faction-envoy   { border-left-color: var(--fc-envoy); }
.arok-card-row.faction-neutral { border-left-color: var(--fc-neutral); }

/* ── Quantity pip row ─────────────────────────────────────────── */
.arok-qty-row { display: flex; gap: 2px; align-items: center; }
.arok-qty-pip {
  width: 16px; height: 18px;
  background: var(--arok-surface-3);
  border: 1px solid var(--arok-border);
  border-radius: 3px;
  color: var(--arok-text-dim);
  font-family: var(--arok-font-display);
  font-size: .65rem; font-weight: 600;
  cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: all .1s;
}
.arok-qty-pip:hover { border-color: var(--arok-red-dim); color: var(--arok-text); }
.arok-qty-pip.active {
  background: var(--arok-red);
  border-color: var(--arok-red-light);
  color: #fff;
}
/* "0" pip active = removed */
.arok-qty-pip:first-child.active {
  background: var(--arok-surface-3);
  border-color: var(--arok-border);
  color: var(--arok-text-dim);
}

/* ── Row name column ─────────────────────────────────────────── */
.arok-row-name-wrap { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.arok-row-name {
  font-size: .83rem; color: var(--arok-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.arok-row-name.is-unique { color: var(--arok-gold-light); }
.arok-row-meta { font-size: .65rem; color: var(--arok-text-dim); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Row stat columns ────────────────────────────────────────── */
.arok-col-cost, .arok-col-str {
  font-family: var(--arok-font-display); font-size: .78rem; font-weight: 700;
  color: var(--arok-gold); text-align: center;
}
.arok-col-icons { display: flex; gap: 2px; font-size: .68rem; }

.arok-row-loading { padding: 1.2rem; text-align: center; color: var(--arok-text-dim); font-style: italic; font-size: .82rem; }

/* ── Panel search override for new layout ────────────────────── */
.arok-panel-search { display: flex; flex-direction: column; }
.arok-card-table   { flex: 1; overflow: hidden; }
.arok-card-rows    { overflow-y: auto; max-height: calc(100vh - 320px); scrollbar-width: thin; scrollbar-color: var(--arok-border-red) transparent; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .arok-card-table-header { grid-template-columns: 56px 1fr 22px 44px; font-size: .55rem; }
  .arok-card-row          { grid-template-columns: 56px 1fr 22px 44px; }
  .arok-qty-pip { width: 15px; height: 20px; font-size: .7rem; }
  .arok-card-rows { max-height: calc(100svh - 280px); }
}

/* ================================================================
   LEGALITY WARNING BANNER
   ================================================================ */

.arok-legality-banner {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .65rem 1rem;
  background: rgba(140, 90, 0, .15);
  border-bottom: 2px solid #b87820;
  color: #e8b84b;
  font-size: .84rem;
  line-height: 1.5;
}
.arok-legality-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

/* ================================================================
   FIXES: equal thirds, faction colors, save button state
   ================================================================ */

/* ── Equal three-column layout ───────────────────────────────── */
/* Override the previous fixed-width columns */
.arok-body {
  grid-template-columns: 1fr 1fr 1fr !important;
}

/* Stats panel needs the slate bg back when visible at equal width */
.arok-panel-stats { background: var(--arok-slate-dark); }

/* ── Save button: inactive vs ready state ────────────────────── */
.arok-btn-primary.arok-btn-inactive {
  opacity: .4;
  cursor: default;
}
.arok-btn-primary.arok-btn-ready {
  opacity: 1;
  cursor: pointer;
}

/* ── Faction toggle colors (short names, no pip needed) ──────── */
.arok-faction-toggles { display: flex; flex-wrap: wrap; gap: .3rem; }

.arok-faction-toggle {
  padding: .22rem .52rem;
  background: var(--arok-surface-2);
  border: 1px solid var(--arok-border);
  border-radius: 3px;
  color: var(--arok-text-dim);
  cursor: pointer;
  font-size: .7rem;
  font-family: var(--arok-font-display);
  font-weight: 600;
  letter-spacing: .04em;
  transition: all .12s;
}
.arok-faction-toggle:hover { opacity: .85; color: #fff; }

/* Each faction gets its own accent color when active */
.arok-faction-toggle.faction-toggle-camelot.active { background:#8b1c1c; border-color:#c04040; color:#fff; }
.arok-faction-toggle.faction-toggle-eleven.active  { background:#0e2a60; border-color:#2a56a8; color:#fff; }
.arok-faction-toggle.faction-toggle-circle.active  { background:#3a1060; border-color:#7a40c0; color:#fff; }
.arok-faction-toggle.faction-toggle-keepers.active { background:#0e4420; border-color:#2a8a48; color:#fff; }
.arok-faction-toggle.faction-toggle-summer.active  { background:#7a4400; border-color:#d47820; color:#fff; }
.arok-faction-toggle.faction-toggle-winter.active  { background:#0e3060; border-color:#4898d0; color:#fff; }
.arok-faction-toggle.faction-toggle-envoy.active   { background:#5c4010; border-color:#a87840; color:#fff; }
.arok-faction-toggle.faction-toggle-neutral.active { background:#3a3a3a; border-color:#8a8a8a; color:#fff; }

/* Faction left-border on card rows — matching new colors */
.arok-card-row.faction-camelot { border-left-color: #c04040; }
.arok-card-row.faction-eleven  { border-left-color: #2a56a8; }
.arok-card-row.faction-circle  { border-left-color: #7a40c0; }
.arok-card-row.faction-keepers { border-left-color: #2a8a48; }
.arok-card-row.faction-summer  { border-left-color: #d47820; }
.arok-card-row.faction-winter  { border-left-color: #4898d0; }
.arok-card-row.faction-envoy   { border-left-color: #a87840; }
.arok-card-row.faction-neutral { border-left-color: #8a8a8a; }

/* Also update dash card border tops */
.arok-dash-card.faction-camelot { border-top-color: #c04040; }
.arok-dash-card.faction-eleven  { border-top-color: #2a56a8; }
.arok-dash-card.faction-circle  { border-top-color: #7a40c0; }
.arok-dash-card.faction-keepers { border-top-color: #2a8a48; }
.arok-dash-card.faction-summer  { border-top-color: #d47820; }
.arok-dash-card.faction-winter  { border-top-color: #4898d0; }
.arok-dash-card.faction-envoy   { border-top-color: #a87840; }

/* ── Description field ───────────────────────────────────────── */
/* Already moved above slots in template — just ensure spacing */
.arok-panel-deck .arok-textarea {
  margin-bottom: .6rem;
}

/* ── Card table — wider name with equal-thirds panel ─────────── */
/* At equal thirds (~33% of viewport) we have more room */
.arok-card-table-header,
.arok-card-row {
  grid-template-columns: 60px 1fr 26px 54px !important;
}

/* ── Responsive: stack to 2 columns on tablet ────────────────── */
@media (max-width: 1100px) {
  .arok-body { grid-template-columns: 1fr 1fr !important; }
  .arok-panel-stats { display: none; }
}
@media (max-width: 640px) {
  .arok-body { display: block !important; }
}

/* ================================================================
   ICON COLOR FIXES + COST CURVE + AVG WEALTH
   ================================================================ */

/* ── Struggle icon colors ─────────────────────────────────────── */
/* Override previous definitions */
.arok-icon-combat  { color: #e05050 !important; }   /* red     */
.arok-icon-guile   { color: #4daa6a !important; }   /* green   */
.arok-icon-sorcery { color: #e07820 !important; }   /* orange  */
.arok-icon-faith   { color: #4890d8 !important; }   /* blue    */

/* Icon bar items */
.arok-combat  .arok-icon-symbol { color: #e05050 !important; }
.arok-guile   .arok-icon-symbol { color: #4daa6a !important; }
.arok-sorcery .arok-icon-symbol { color: #e07820 !important; }
.arok-faith   .arok-icon-symbol { color: #4890d8 !important; }

/* Card row icons */
.arok-card-icons .arok-icon-combat  { color: #e05050 !important; }
.arok-card-icons .arok-icon-guile   { color: #4daa6a !important; }
.arok-card-icons .arok-icon-sorcery { color: #e07820 !important; }
.arok-card-icons .arok-icon-faith   { color: #4890d8 !important; }

/* ── Cost curve ───────────────────────────────────────────────── */
.arok-cost-curve { display: flex; flex-direction: column; gap: .28rem; }

.arok-curve-row {
  display: grid;
  grid-template-columns: 20px 1fr 24px;
  align-items: center;
  gap: .35rem;
}
.arok-curve-label {
  font-family: var(--arok-font-display);
  font-size: .68rem;
  font-weight: 700;
  color: var(--arok-gold);
  text-align: right;
}
.arok-curve-bar-wrap {
  background: var(--arok-surface-3);
  border-radius: 2px;
  height: 8px;
  overflow: hidden;
}
.arok-curve-bar {
  height: 100%;
  background: var(--arok-red);
  border-radius: 2px;
  transition: width .3s ease;
  min-width: 3px;
}
.arok-curve-count {
  font-size: .7rem;
  color: var(--arok-text-muted);
  text-align: left;
}
.arok-curve-empty {
  font-size: .8rem;
  color: var(--arok-text-dim);
}

/* ── Avg wealth — smaller display value ──────────────────────── */
#stat-avg-wealth {
  font-size: 1.2rem;
}

/* ================================================================
   DECK TYPE SECTIONS + BUTTON CONTRAST
   ================================================================ */

/* ── Deck zone section headers ───────────────────────────────── */
.arok-zone-section-header {
  font-family: var(--arok-font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arok-gold);
  padding: .45rem .1rem .2rem;
  margin-top: .3rem;
  border-bottom: 1px solid var(--arok-border-red);
}
.arok-zone-section-header:first-child { margin-top: 0; }

/* ── Header button contrast ──────────────────────────────────── */
/* Buttons on the red header bar need to stand out */
.arok-header .arok-btn-primary {
  background: var(--arok-gold);
  color: #0e0c0c;
  border-color: var(--arok-gold-light);
  font-weight: 700;
}
.arok-header .arok-btn-primary:hover:not(.arok-btn-inactive) {
  background: var(--arok-gold-light);
  border-color: var(--arok-gold-light);
}
.arok-header .arok-btn-primary.arok-btn-inactive {
  background: rgba(184,134,11,.3);
  color: rgba(14,12,12,.5);
  border-color: transparent;
}
.arok-header .arok-btn-ghost {
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.4);
}
.arok-header .arok-btn-ghost:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.7);
}

/* ================================================================
   SAVE BUTTON + HEADER CONTRAST + PAGINATION VISIBILITY FIXES
   ================================================================ */

/* ── Header buttons — gold/white with !important to beat base styles ── */
.arok-header .arok-btn-primary {
  background:   var(--arok-gold)       !important;
  color:        #0e0c0c                !important;
  border-color: var(--arok-gold-light) !important;
}
.arok-header .arok-btn-primary:hover {
  background:   var(--arok-gold-light) !important;
}
.arok-header .arok-btn-primary.arok-btn-inactive {
  background:   rgba(184,134,11,.25)   !important;
  color:        rgba(0,0,0,.4)         !important;
  border-color: transparent            !important;
  cursor: default;
}
.arok-header .arok-btn-ghost {
  background:   transparent            !important;
  color:        #ffffff                !important;
  border-color: rgba(255,255,255,.5)   !important;
}
.arok-header .arok-btn-ghost:hover {
  background:   rgba(255,255,255,.15)  !important;
  border-color: #ffffff                !important;
}

/* ── Search panel: fixed flex layout so pagination is always visible ── */
.arok-panel-search {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;      /* panel itself does NOT scroll */
  padding-bottom: 0 !important;
}

/* The filters/search stay at the top, no overflow */
.arok-search-bar,
.arok-filter-section,
.arok-results-meta {
  flex-shrink: 0;
}

/* Card table fills remaining space */
.arok-card-table {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;                    /* critical for flex shrink to work */
}

/* Header row stays fixed */
.arok-card-table-header {
  flex-shrink: 0;
}

/* Card rows scroll within the table */
.arok-card-rows {
  flex: 1;
  overflow-y: auto !important;
  max-height: none !important;      /* remove fixed max-height — flex handles it */
}

/* Pagination always visible at bottom of panel */
.arok-pagination {
  flex-shrink: 0;
  padding: .5rem .4rem .6rem;
  border-top: 1px solid var(--arok-border);
  margin-top: 0;
}

/* ================================================================
   DEFINITIVE BUTTON STYLES — explicit hex, no CSS variable deps
   Targets: arok-btn-build (Build Deck), arok-btn-save (Save Deck)
   ================================================================ */

/* ── Build Deck button (setup screen) ────────────────────────── */
.arok-btn-build {
  background:   #b8860b !important;
  color:        #0e0c0c !important;
  border:       2px solid #d4a017 !important;
  font-weight:  700 !important;
  cursor:       default;
}
.arok-btn-build.arok-btn-ready {
  background:   #d4a017 !important;
  color:        #0e0c0c !important;
  border-color: #e8c040 !important;
  cursor:       pointer !important;
}
.arok-btn-build.arok-btn-ready:hover {
  background:   #e8c040 !important;
}
.arok-btn-build.arok-btn-inactive {
  background:   rgba(184,134,11,.2) !important;
  color:        rgba(14,12,12,.35) !important;
  border-color: rgba(184,134,11,.3) !important;
  cursor:       not-allowed !important;
}

/* ── Save Deck button ─────────────────────────────────────────── */
.arok-btn-save {
  background:   #b8860b !important;
  color:        #0e0c0c !important;
  border:       2px solid #d4a017 !important;
  font-weight:  700 !important;
  cursor:       default;
}
.arok-btn-save.arok-btn-ready {
  background:   #d4a017 !important;
  color:        #0e0c0c !important;
  border-color: #e8c040 !important;
  cursor:       pointer !important;
}
.arok-btn-save.arok-btn-ready:hover {
  background:   #e8c040 !important;
}
.arok-btn-save.arok-btn-inactive {
  background:   rgba(184,134,11,.2) !important;
  color:        rgba(14,12,12,.35) !important;
  border-color: rgba(184,134,11,.3) !important;
  cursor:       not-allowed !important;
}

/* ── My Decks button — bright white ghost ─────────────────────── */
#btn-my-decks,
.arok-header #btn-my-decks {
  background:   rgba(255,255,255,.15) !important;
  color:        #ffffff               !important;
  border:       2px solid #ffffff     !important;
  font-weight:  700                   !important;
}
#btn-my-decks:hover {
  background:   rgba(255,255,255,.28) !important;
}

/* ── New Deck button — already gold, reinforce ────────────────── */
#btn-new-deck,
#btn-new-deck-2 {
  background:   #d4a017 !important;
  color:        #0e0c0c !important;
  border:       2px solid #e8c040 !important;
  font-weight:  700 !important;
}
#btn-new-deck:hover,
#btn-new-deck-2:hover {
  background:   #e8c040 !important;
}

/* ── Back buttons ─────────────────────────────────────────────── */
#btn-back-dashboard,
#btn-back-setup {
  background:   transparent          !important;
  color:        #ffffff              !important;
  border:       1px solid rgba(255,255,255,.55) !important;
}
#btn-back-dashboard:hover,
#btn-back-setup:hover {
  background:   rgba(255,255,255,.15) !important;
  border-color: #ffffff              !important;
}