/* ==========================================================================
   Riftstake — reusable components
   Cards, buttons, chips, meters, switches, modal, toasts.
   ========================================================================== */

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--felt-2), var(--felt-1));
  color:var(--ink);
  padding:10px 18px;
  border-radius:var(--r-md);
  font-size:.86rem; font-weight:700; letter-spacing:.01em;
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--e-out),
             border-color var(--t-fast) var(--e-out),
             box-shadow var(--t-fast) var(--e-out),
             filter var(--t-fast) var(--e-out);
}
.btn:hover:not(:disabled){
  border-color:var(--line-strong);
  transform:translateY(-2px);
  box-shadow:var(--sh-2);
}
.btn:active:not(:disabled){ transform:translateY(0) scale(.985); }
.btn:disabled{ opacity:.38; cursor:not-allowed; }

.btn--primary{
  background:linear-gradient(160deg, var(--ember-soft), var(--ember) 45%, #d4491f);
  border-color:transparent; color:#221007;
  box-shadow:var(--sh-1), var(--glow-ember);
}
.btn--primary:hover:not(:disabled){ filter:brightness(1.08); }

.btn--brass{
  background:linear-gradient(160deg, var(--brass-soft), var(--brass) 50%, #a97f3f);
  border-color:transparent; color:#231a0a;
}
.btn--brass:hover:not(:disabled){ filter:brightness(1.07); }

.btn--ghost{ background:transparent; box-shadow:none; }
.btn--sm{ padding:6px 12px; font-size:.76rem; border-radius:var(--r-sm); }
.btn--full{ width:100%; }

/* ── Ledger chips ──────────────────────────────────────────────────────── */

.ledger{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }

.chip{
  position:relative;
  display:flex; align-items:center; gap:var(--s-2);
  padding:7px 15px 7px 11px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:linear-gradient(180deg, var(--felt-2), var(--felt-0));
  box-shadow:var(--sh-1);
  transition:border-color var(--t-med) var(--e-out), transform var(--t-med) var(--e-spring);
}
.chip__ico{ width:17px; height:17px; flex:none; }
.chip__val{ font-weight:700; font-size:.9rem; }
.chip__sub{ font-size:.66rem; color:var(--ink-faint); }

.chip--gold    .chip__val{ color:var(--brass); }
.chip--shard   .chip__val{ color:var(--el-tempest); }
.chip--essence .chip__val{ color:var(--good); }

/* A gain briefly lights the chip up. Added and removed by ui.js. */
.chip.is-bumped{ transform:translateY(-3px) scale(1.05); border-color:var(--brass-deep); }

.chip--level{ padding-left:var(--s-2); }
.xp-ring{ width:26px; height:26px; flex:none; transform:rotate(-90deg); }
.xp-ring circle{ fill:none; stroke-width:4; stroke-linecap:round; }
.xp-ring__bg{ stroke:var(--felt-3); }
.xp-ring__fg{
  stroke:var(--ember);
  stroke-dasharray:100.5;         /* 2πr with r=16 */
  stroke-dashoffset:100.5;
  transition:stroke-dashoffset var(--t-slow) var(--e-out);
}

/* ── Panels ────────────────────────────────────────────────────────────── */

.panel{
  background:linear-gradient(170deg, var(--felt-1), var(--felt-0));
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:var(--s-5);
  box-shadow:var(--sh-2);
}

/* ── Bars / meters ─────────────────────────────────────────────────────── */

.bar{
  height:8px; flex:1; min-width:110px;
  border-radius:var(--r-pill);
  background:var(--felt-3);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(26,16,11,.38);
}
.bar > i{
  display:block; height:100%; width:0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--brass), var(--ember));
  transition:width var(--t-slow) var(--e-out);
}

/* ── Switch ────────────────────────────────────────────────────────────── */

.switch{ display:inline-flex; align-items:center; gap:var(--s-2); cursor:pointer; user-select:none; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch__track{
  width:36px; height:20px; flex:none;
  border-radius:var(--r-pill);
  background:var(--felt-3);
  border:1px solid var(--line);
  padding:2px;
  transition:background var(--t-med) var(--e-out), border-color var(--t-med) var(--e-out);
}
.switch__knob{
  display:block; width:14px; height:14px; border-radius:50%;
  background:var(--ink-faint);
  transition:transform var(--t-med) var(--e-spring), background var(--t-med) var(--e-out);
}
.switch input:checked + .switch__track{ background:var(--ember-deep); border-color:var(--ember); }
.switch input:checked + .switch__track .switch__knob{ transform:translateX(16px); background:var(--ember); }
.switch input:focus-visible + .switch__track{ outline:2px solid var(--ember); outline-offset:3px; }
.switch__label{ font-size:.76rem; color:var(--ink-dim); font-weight:600; }

/* ── Filter pills ──────────────────────────────────────────────────────── */

.filters{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.filter-group{
  display:flex; gap:2px; padding:3px;
  background:var(--felt-0);
  border:1px solid var(--line-soft);
  border-radius:var(--r-pill);
}
.filter-group button{
  background:none; border:none; cursor:pointer;
  padding:5px 11px; border-radius:var(--r-pill);
  font-size:.74rem; font-weight:700; color:var(--ink-faint);
  transition:color var(--t-fast), background var(--t-fast);
}
.filter-group button:hover{ color:var(--ink-dim); }
.filter-group button.is-on{ background:var(--felt-3); color:var(--ink); }
.filter-group[data-filter="element"] button[data-val="ember"].is-on  { color:var(--el-ember);   }
.filter-group[data-filter="element"] button[data-val="verdant"].is-on{ color:var(--el-verdant); }
.filter-group[data-filter="element"] button[data-val="tempest"].is-on{ color:var(--el-tempest); }
.filter-group[data-filter="element"] button[data-val="tide"].is-on   { color:var(--el-tide);    }
.filter-group[data-filter="rarity"] button[data-val="rare"].is-on     { color:var(--r-rare);      }
.filter-group[data-filter="rarity"] button[data-val="epic"].is-on     { color:var(--r-epic);      }
.filter-group[data-filter="rarity"] button[data-val="legendary"].is-on{ color:var(--r-legendary); }

/* ==========================================================================
   CARD
   The centrepiece. Structure:
     .card > .card__frame > [ .card__art, .card__scrim, .card__top,
                              .card__body, .card__foot, .card__sheen ]
   Badges (.card__count, .card__deck-toggle) sit outside the clipped frame.
   ========================================================================== */

.card{
  position:relative;
  width:var(--card-w);
  aspect-ratio:5 / 7;
  flex:none;
  border-radius:var(--card-r);
  transition:transform var(--t-med) var(--e-out), filter var(--t-med) var(--e-out);
}

.card__frame{
  position:relative;
  width:100%; height:100%;
  border-radius:inherit;
  overflow:hidden;
  display:flex; flex-direction:column;
  padding:9px;
  background:linear-gradient(165deg, var(--felt-2) 0%, var(--felt-0) 62%);
  border:1px solid color-mix(in srgb, var(--rar) 40%, var(--line));
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Generated SVG artwork fills the frame; text sits on top of a scrim. */
.card__art{ position:absolute; inset:0; }
.card__art svg{ width:100%; height:100%; display:block; }

/* Animated bits inside the generated artwork. Each element carries its own
   --d (delay) and --t (duration) so a card's motes never move in lockstep. */
.rs-mote{
  animation:mote-drift var(--t, 6s) var(--e-in-out) infinite alternate;
  animation-delay:calc(var(--d, 0s) * -1);
}
@keyframes mote-drift{
  from{ transform:translateY(4px);  opacity:.15; }
  to  { transform:translateY(-9px); opacity:.9;  }
}

.rs-aura{ animation:aura-breathe 4.5s var(--e-in-out) infinite; transform-origin:50% 50%; }
@keyframes aura-breathe{
  0%,100%{ transform:scale(1);    opacity:.55; }
  50%    { transform:scale(1.14); opacity:1;   }
}

.rs-eye{ animation:eye-glow 3.2s var(--e-in-out) infinite; }
@keyframes eye-glow{
  0%,100%{ opacity:1;   }
  46%    { opacity:1;   }
  50%    { opacity:.25; }
  54%    { opacity:1;   }
}

/* Portraits are decorative — freeze them when motion is reduced. */
@media (prefers-reduced-motion: reduce){
  .rs-mote, .rs-aura, .rs-eye{ animation:none; opacity:.7; }
}

.card__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(49,37,31,.48) 0%,
    rgba(49,37,31,.02) 26%,
    rgba(49,37,31,.20) 52%,
    rgba(49,37,31,.78) 78%,
    rgba(49,37,31,.92) 100%);
}

.card__top,
.card__body,
.card__foot{ position:relative; }

.card__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-1); }

.card__element{
  width:23px; height:23px; flex:none;
  border-radius:7px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--el) 88%, #000);
  box-shadow:0 0 12px -2px var(--el), inset 0 1px 0 rgba(255,255,255,.3);
}
.card__element svg{ width:14px; height:14px; fill:#150e0a; }

.card__rarity{
  font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  padding:3px 7px; border-radius:5px;
  color:var(--rar);
  background:color-mix(in srgb, var(--rar) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--rar) 28%, transparent);
  backdrop-filter:blur(3px);
}

.card__body{ margin-top:auto; }
.card__name{
  font-family:var(--font-display); font-weight:700;
  font-size:.95rem; line-height:1.12;
  margin:0 0 3px;
  text-wrap:balance;
  text-shadow:0 2px 8px rgba(26,16,11,.8);
}
.card__ability{
  font-size:.63rem; line-height:1.34; color:var(--ink-dim);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card__ability b{ color:var(--rar); }

.card__foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:7px; padding-top:6px;
  border-top:1px solid rgba(255,246,237,.12);
}
.card__power{
  display:flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-weight:700; font-size:1.1rem;
  color:var(--ink);
  text-shadow:0 1px 6px rgba(26,16,11,.7);
}
.card__power svg{ width:12px; height:12px; fill:var(--brass); }
.card__lv{
  font-family:var(--font-mono); font-size:.62rem; font-weight:700;
  color:var(--brass);
  padding:2px 6px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--brass) 14%, transparent);
}

/* Hover sheen — a light sweep across the foil. */
.card__sheen{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(112deg, transparent 34%, rgba(255,255,255,.14) 47%, transparent 60%);
  background-size:260% 100%;
  transition:opacity var(--t-med) var(--e-out);
}
.card.is-clickable:hover .card__sheen{ opacity:1; animation:sheen 1s var(--e-out); }
@keyframes sheen{ from{ background-position:130% 0; } to{ background-position:-60% 0; } }

/* Interaction */
.card.is-clickable{ cursor:pointer; }
.card.is-clickable:hover{ transform:translateY(-6px) scale(1.025); }
.card.is-clickable:active{ transform:translateY(-2px) scale(1.005); }

/* Unowned cards read as silhouettes. */
.card.is-locked .card__frame{ filter:grayscale(.85) brightness(.62) contrast(.92); }
.card.is-locked .card__name{ letter-spacing:.14em; }

/* Rarity treatments */
.card[data-rarity="epic"] .card__frame,
.card[data-rarity="legendary"] .card__frame{
  box-shadow:var(--sh-2), inset 0 0 0 1px color-mix(in srgb, var(--rar) 22%, transparent),
             0 0 26px -10px var(--rar);
}
/* Legendary: a slow conic sweep inside the clipped frame — no @property needed. */
.card[data-rarity="legendary"]:not(.is-locked) .card__frame::after{
  content:""; position:absolute; inset:-60%;
  background:conic-gradient(from 0deg,
    transparent 0 8%, rgba(240,178,60,.55) 16%, transparent 26% 58%,
    rgba(255,240,204,.45) 68%, transparent 78% 100%);
  animation:spin 6s linear infinite;
  mix-blend-mode:screen; opacity:.16; pointer-events:none;
}

/* Deck membership */
.card.in-deck .card__frame{
  border-color:var(--ember);
  box-shadow:var(--sh-2), 0 0 0 2px color-mix(in srgb, var(--ember) 35%, transparent),
             0 0 30px -8px var(--ember);
}

/* Badges */
.card__count{
  position:absolute; top:-7px; left:-7px; z-index:2;
  font-family:var(--font-mono); font-size:.64rem; font-weight:700;
  padding:2px 7px; border-radius:var(--r-pill);
  background:var(--felt-3); border:1px solid var(--line);
  color:var(--ink-dim);
  box-shadow:var(--sh-1);
}
.card__count.is-new{ background:var(--ember); border-color:transparent; color:#201007; }

.card__deck-toggle{
  position:absolute; top:-8px; right:-8px; z-index:2;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  cursor:pointer;
  border:1px solid var(--line);
  background:var(--felt-2);
  color:var(--ink-dim);
  font-size:1rem; font-weight:700; line-height:1;
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--e-spring), background var(--t-fast), color var(--t-fast);
}
.card__deck-toggle:hover{ transform:scale(1.15); background:var(--felt-3); color:var(--ink); }
.card.in-deck .card__deck-toggle{ background:var(--ember); border-color:transparent; color:#201007; }

/* Mini variant — deck strip, order picker */
.card--mini{ --card-w:104px; }
.card--mini .card__frame{ padding:6px; border-radius:12px; }
.card--mini .card__ability,
.card--mini .card__lv{ display:none; }
.card--mini .card__name{ font-size:.68rem; }
.card--mini .card__rarity{ font-size:.5rem; padding:2px 5px; }
.card--mini .card__element{ width:18px; height:18px; border-radius:5px; }
.card--mini .card__element svg{ width:11px; height:11px; }
.card--mini .card__power{ font-size:.82rem; }
.card--mini .card__foot{ margin-top:5px; padding-top:4px; }

/* Large variant — detail panel, duel arena */
.card--lg{ --card-w:200px; }

/* Grid entrance — staggered via inline --i */
.card-grid{ display:flex; flex-wrap:wrap; gap:var(--s-4); }
.card-grid .card{
  animation:rise-in .42s var(--e-out) both;
  animation-delay:calc(var(--i, 0) * 18ms);
}

/* ── Modal ─────────────────────────────────────────────────────────────── */

.veil{
  position:fixed; inset:0; z-index:var(--z-veil);
  display:grid; place-items:center; padding:var(--s-5);
  background:rgba(30,22,18,.76);
  backdrop-filter:blur(7px);
  animation:flash-in .25s var(--e-out);
}
.veil[hidden]{ display:none; }
@keyframes flash-in{ from{ opacity:0; } to{ opacity:1; } }

.reveal{
  position:relative;
  width:100%; max-width:720px;
  display:flex; flex-direction:column; align-items:center; gap:var(--s-5);
  padding:var(--s-6);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:linear-gradient(170deg, var(--felt-1), var(--felt-0));
  box-shadow:var(--sh-3);
  animation:pop-in .32s var(--e-spring) both;
}
.reveal__title{ font-size:1.3rem; text-align:center; }
.reveal__note{ color:var(--ink-faint); font-size:.82rem; text-align:center; min-height:1.2em; }
.reveal__stage{
  display:flex; align-items:center; justify-content:center;
  gap:var(--s-3); flex-wrap:wrap;
  min-height:250px;
}

/* Rarity rays behind the revealed card */
.reveal__rays{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit; overflow:hidden; opacity:0;
  transition:opacity var(--t-slow) var(--e-out);
}
.reveal__rays.is-on{ opacity:.5; }
.reveal__rays i{
  position:absolute; top:50%; left:50%;
  width:200%; height:200%; margin:-100% 0 0 -100%;
  background:conic-gradient(from 0deg,
    transparent 0 3%, var(--ray, var(--brass)) 4%, transparent 5% 12%,
    transparent 0 15%, var(--ray, var(--brass)) 16%, transparent 17% 25%);
  animation:spin 22s linear infinite;
  filter:blur(1px);
}
.reveal > *:not(.reveal__rays){ position:relative; z-index:1; }

/* Flip card */
.flip{ width:var(--card-w); aspect-ratio:5 / 7; perspective:1000px; }
.flip__inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .62s var(--e-in-out);
}
.flip.is-flipped .flip__inner{ transform:rotateY(180deg); }
.flip__face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--card-r); }
.flip__face--back{ transform:rotateY(180deg); }
.flip__face .card{ width:100%; }
.flip.is-shaking{ animation:shake .5s var(--e-in-out); }

.card-back{
  width:100%; height:100%; border-radius:var(--card-r);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:var(--sh-2);
}
.card-back svg{ width:100%; height:100%; display:block; }

/* ── Rules sheet ───────────────────────────────────────────────────────── */

.rules{
  width:100%; max-width:720px; max-height:86vh;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:linear-gradient(170deg, var(--felt-1), var(--felt-0));
  box-shadow:var(--sh-3);
  animation:pop-in .3s var(--e-spring) both;
}
.rules__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-5) var(--s-5) var(--s-3);
  border-bottom:1px solid var(--line-soft);
}
.rules__head h3{ font-size:1.3rem; }
.rules__body{ overflow-y:auto; padding:var(--s-4) var(--s-5) var(--s-5); }

.rules__sec + .rules__sec{ margin-top:var(--s-5); }
.rules__sec h4{
  font-family:var(--font-body); font-size:.68rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
  margin-bottom:var(--s-2);
}
.rules__sec p{ font-size:.85rem; line-height:1.55; color:var(--ink-dim); }
.rules__sec p + p{ margin-top:var(--s-2); }
.rules__sec b{ color:var(--ink); }
.rules__note{ font-size:.8rem !important; color:var(--ink-faint) !important; }

.rules__cycle{
  display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap;
  margin-bottom:var(--s-2) !important;
}
.rules__el{
  font-weight:700; font-size:.8rem; color:var(--el);
  padding:3px 10px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--el) 16%, transparent);
}
.rules__arrow{ color:var(--ink-faint); font-size:.7rem; }

.rules__table{ width:100%; border-collapse:collapse; margin:var(--s-3) 0; }
.rules__table td{
  padding:9px 10px 9px 0; vertical-align:top;
  font-size:.8rem; line-height:1.45; color:var(--ink-dim);
  border-top:1px solid var(--line-soft);
}
.rules__table tr:first-child td{ border-top:none; }
.rules__name{ font-weight:800; color:var(--ink); white-space:nowrap; }
.rules__cost{ color:var(--brass); white-space:nowrap; font-size:.76rem !important; }
.rules__hooks{
  display:block; font-family:var(--font-body); font-weight:600;
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:2px;
}
.rules__sigil{ width:44px; padding-right:var(--s-3) !important; }
.rules__sigil svg{ width:30px; height:26px; display:block; color:var(--brass); opacity:.85; }

@media (max-width:560px){
  .rules__head, .rules__body{ padding-left:var(--s-4); padding-right:var(--s-4); }
}

/* ── Toasts ────────────────────────────────────────────────────────────── */

.toasts{
  position:fixed; top:var(--s-4); right:var(--s-4); z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:var(--s-2);
  max-width:300px; pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:var(--s-2);
  padding:10px 14px;
  border:1px solid var(--line);
  border-left:3px solid var(--ink-faint);
  border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--felt-2), var(--felt-1));
  box-shadow:var(--sh-2);
  font-size:.81rem; line-height:1.35;
  animation:toast-in .3s var(--e-spring) both;
}
.toast b{ color:var(--ink); }
.toast.is-out{ animation:toast-out .35s var(--e-out) forwards; }
.toast--good     { border-left-color:var(--good); }
.toast--bad      { border-left-color:var(--bad); }
.toast--rare     { border-left-color:var(--r-rare); }
.toast--epic     { border-left-color:var(--r-epic); }
.toast--legendary{ border-left-color:var(--r-legendary); box-shadow:var(--sh-2), 0 0 22px -6px var(--r-legendary); }
@keyframes toast-in { from{ opacity:0; transform:translateX(20px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes toast-out{ to  { opacity:0; transform:translateX(20px) scale(.94); } }

/* ── Text fields ───────────────────────────────────────────────────────── */

.field{ display:flex; flex-direction:column; gap:5px; }
.field__label{
  font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
}
.field__input{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--felt-0);
  color:var(--ink);
  font-family:inherit; font-size:.9rem;
  transition:border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.field__input:focus{
  outline:none;
  border-color:var(--ember);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ember) 22%, transparent);
}

/* ── Bounty counter ────────────────────────────────────────────────────── */

.bounty-btn{ border-color:var(--line-soft); }
.bounty-btn__count{
  padding:1px 7px;
  border-radius:var(--r-pill);
  background:var(--felt-3);
  font-size:.68rem; font-weight:700; color:var(--ink-dim);
}
.bounty-btn__count.is-full{ background:color-mix(in srgb, var(--good) 26%, transparent); color:var(--good); }

/* ── Bounty rows ───────────────────────────────────────────────────────── */

.quest__lede{ color:var(--ink-faint); font-size:.8rem; line-height:1.5; margin-bottom:var(--s-4); }
.quest__period{
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:var(--s-3);
}
.quest{
  padding:var(--s-3);
  margin-bottom:var(--s-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:var(--felt-0);
}
.quest.is-done{ border-color:color-mix(in srgb, var(--good) 45%, transparent); }
.quest.is-done .bar > i{ background:var(--good); }
.quest__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); }
.quest__text{ font-size:.85rem; font-weight:600; }
.quest__count{ font-size:.74rem; color:var(--ink-faint); flex:none; }
.quest .bar{ margin:var(--s-2) 0 6px; }
.quest__reward{ font-size:.7rem; color:var(--brass); }
.quest.is-done .quest__reward{ color:var(--good); }

/* ── Notice sheet actions ──────────────────────────────────────────────── */

.notice__actions{
  display:flex; gap:var(--s-2); flex-wrap:wrap;
  margin-top:var(--s-4);
}

/* ── Settings & Records ────────────────────────────────────────────────── */

.set__blurb{ color:var(--ink-faint); font-size:.79rem; line-height:1.5; margin-bottom:var(--s-3); }
.set__note{ color:var(--ink-faint); font-size:.72rem; line-height:1.45; margin-top:var(--s-2); }

/* Segmented choice — language, motion. */
.choice{
  display:flex; gap:3px; flex-wrap:wrap;
  padding:3px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-pill);
  background:var(--felt-0);
  width:fit-content; max-width:100%;
}
.choice__opt{
  border:none; cursor:pointer;
  padding:7px 15px;
  border-radius:var(--r-pill);
  background:transparent; color:var(--ink-faint);
  font-family:inherit; font-size:.79rem; font-weight:700;
  transition:background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.choice__opt:hover{ color:var(--ink); }
.choice__opt.is-on{
  background:linear-gradient(180deg, var(--felt-3), var(--felt-2));
  color:var(--ink);
  box-shadow:var(--sh-1);
}

/* Definition rows — account facts, purse. */
.set__rows{
  display:grid; grid-template-columns:auto 1fr;
  gap:6px var(--s-4);
  font-size:.82rem;
}
.set__rows dt{ color:var(--ink-faint); }
.set__rows dd{ text-align:right; font-family:var(--font-mono); font-size:.78rem; }

/* Odds tables — one block per pack. */
.odds-block{ margin-top:var(--s-4); }
.odds-block h5{ font-size:.88rem; font-weight:700; }
.odds-block__sub{
  font-size:.68rem; color:var(--ink-faint);
  letter-spacing:.06em; margin-bottom:var(--s-2);
}
.odds-block .dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--rar); margin-right:7px; vertical-align:middle;
}
/* A gap worth noticing is coloured; anything inside a couple of points of
   the printed odds stays neutral, because it is noise. */
.odds-delta.up  { color:var(--good); }
.odds-delta.down{ color:var(--bad); }