/* =============================================================================
   Vestra's Gambit — web game design system.
   Derived from the LOCKED card design: slate + gilt, Cormorant + EB Garamond.
   Every colour, type size and motion curve is a token here; alternatives (COA review)
   are theme blocks on :root[data-theme="…"] so a new default is a one-line swap.
   ============================================================================= */
:root {
  --ui: 1;                    /* interface scale, set by app/scale.js from the window size */
  /* ground */
  --g-night: #0d0c0f;
  --g-night-2: #141217;
  --g-slate: #1b1c20;
  --g-slate-2: #24262b;
  --g-slate-3: #2e3036;
  --g-ink: #e7dfcd;           /* chalk */
  --g-ink-2: #b9ae98;
  --g-ink-3: #847a68;
  /* gilt */
  --g-gold: #d6bb78;
  --g-gold-2: #c9a24e;
  --g-gold-deep: #8c6a2c;
  --g-gilt: linear-gradient(135deg, #f3dfa2 0%, #c8a24f 22%, #8c6a2c 45%, #e6cb84 62%, #a9853a 80%, #efd99a 100%);
  --g-hair: rgba(201, 162, 78, 0.42);
  --g-hair-soft: rgba(201, 162, 78, 0.18);
  /* souls */
  --g-you: #86d6ff;           /* your side, available actions */
  --g-you-glow: rgba(134, 214, 255, 0.45);
  --g-them: #e8906a;          /* the opponent */
  --g-them-glow: rgba(232, 144, 106, 0.42);
  --g-good: #9fd3a0;
  --g-warn: #e8c46a;
  --g-bad: #e0735e;
  /* type */
  --g-display: 'Cormorant SC', 'Cormorant', Georgia, serif;
  --g-italic: 'Cormorant', Georgia, serif;
  --g-body: 'EB Garamond', Georgia, serif;
  --g-fs-xs: 12px; --g-fs-s: 14px; --g-fs-m: 16px; --g-fs-l: 20px; --g-fs-xl: 28px; --g-fs-2xl: 40px; --g-fs-3xl: 64px;
  /* shape + motion */
  --g-r: 10px;
  --g-ease: cubic-bezier(.2, .8, .2, 1);
  --g-ease-io: cubic-bezier(.65, 0, .35, 1);
  --g-t-fast: 140ms; --g-t: 260ms; --g-t-slow: 520ms;
  --g-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75), 0 3px 8px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.gambit {
  margin: 0; background: var(--g-night); color: var(--g-ink); font-family: var(--g-body); font-size: var(--g-fs-m);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
body.gambit::before { /* candle-lit tavern night: warm pool of light, cool edges, fine grain */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(214, 170, 96, .16) 0%, rgba(214, 170, 96, .05) 38%, transparent 62%),
    radial-gradient(90% 60% at 50% 110%, rgba(40, 60, 90, .22) 0%, transparent 60%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, .7) 100%),
    var(--g-night);
}
body.gambit::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
#gambit-root { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- top bar */
.g-topbar { position: relative; z-index: 20; display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 20px;
  border-bottom: 1px solid var(--g-hair-soft); background: linear-gradient(180deg, rgba(20, 18, 23, .92), rgba(13, 12, 15, .7)); backdrop-filter: blur(6px); }
.g-brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--g-ink); }
.g-brand .g-wm-v { font-family: var(--g-italic); font-style: italic; font-weight: 600; font-size: 18px; color: var(--g-gold); }
.g-brand .g-wm-g { font-family: var(--g-display); font-weight: 700; font-size: 24px; letter-spacing: .06em; background: var(--g-gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-nav { display: flex; gap: 4px; margin-left: 12px; }
.g-nav a { color: var(--g-ink-2); text-decoration: none; font-family: var(--g-display); font-weight: 600; font-size: 15px; letter-spacing: .08em; padding: 8px 14px; border-radius: 8px; transition: color var(--g-t-fast), background var(--g-t-fast); }
.g-nav a:hover { color: var(--g-ink); background: rgba(255, 255, 255, .04); }
.g-nav a[aria-current="page"] { color: var(--g-gold); box-shadow: inset 0 -2px 0 var(--g-gold-2); border-radius: 8px 8px 0 0; }
.g-top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: var(--g-fs-s); color: var(--g-ink-2); }
.g-back { color: var(--g-ink-3); text-decoration: none; font-family: var(--g-display); letter-spacing: .08em; font-size: 13px; }
.g-back:hover { color: var(--g-ink); }

/* ---------------------------------------------------------------- screens */
.g-screen { flex: 1; min-height: 0; overflow: auto; overflow-x: hidden; padding: 36px clamp(16px, 4vw, 56px) 64px; animation: g-rise var(--g-t-slow) var(--g-ease) both; }
.g-screen.g-full { padding: 0; overflow: hidden; }
@keyframes g-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.g-wrap { max-width: 1320px; margin: 0 auto; }
.g-eyebrow { font-family: var(--g-display); font-weight: 600; letter-spacing: .22em; font-size: 13px; color: var(--g-gold-2); text-transform: uppercase; }
.g-title { font-family: var(--g-display); font-weight: 700; font-size: var(--g-fs-2xl); letter-spacing: .03em; line-height: 1.05; margin: 6px 0 10px; text-wrap: balance; }
.g-lede { font-size: 19px; color: var(--g-ink-2); max-width: 62ch; line-height: 1.5; margin: 0; }
.g-rule { height: 1px; border: 0; margin: 28px 0; background: linear-gradient(90deg, transparent, var(--g-hair) 20%, var(--g-hair) 80%, transparent); }

/* ---------------------------------------------------------------- slate panels */
.g-panel { position: relative; border-radius: 14px; padding: 22px 24px;
  background: linear-gradient(180deg, rgba(38, 40, 46, .88), rgba(24, 25, 29, .92));
  box-shadow: var(--g-shadow), inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 0 1px rgba(0, 0, 0, .5); }
.g-panel::after { content: ""; position: absolute; inset: 5px; border-radius: 10px; border: .75px solid var(--g-hair-soft); pointer-events: none; }
.g-panel h2:not(.vg-name), .g-panel h3:not(.vg-name) { font-family: var(--g-display); font-weight: 700; letter-spacing: .05em; margin: 0 0 8px; }
.g-panel h2:not(.vg-name) { font-size: 24px; } .g-panel h3:not(.vg-name) { font-size: 19px; }
.g-muted { color: var(--g-ink-3); }
.g-grid { display: grid; gap: 22px; }

/* ---------------------------------------------------------------- buttons */
.g-btn { --b: var(--g-slate-2); white-space: nowrap; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px;
  font-family: var(--g-display); font-weight: 700; font-size: 16px; letter-spacing: .1em; color: var(--g-ink); text-decoration: none; cursor: pointer;
  border: 0; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--b) 100%, #fff 6%), var(--b));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--g-hair-soft), inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 14px -6px rgba(0, 0, 0, .8);
  transition: transform var(--g-t-fast) var(--g-ease), box-shadow var(--g-t) var(--g-ease), filter var(--g-t); }
.g-btn:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--g-hair), inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 20px -8px rgba(0, 0, 0, .8); transform: translateY(-1px); }
.g-btn:active { transform: translateY(1px); }
.g-btn:focus-visible { outline: 2px solid var(--g-you); outline-offset: 3px; }
.g-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.g-btn-primary { color: #1a1206; background: linear-gradient(180deg, #f1dc9c 0%, #d9b866 48%, #b89040 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px -8px rgba(214, 170, 96, .55); text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
.g-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 28px -8px rgba(214, 170, 96, .7); }
.g-btn-you { color: #06141c; background: linear-gradient(180deg, #c4ecff, #6cc6f4); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 26px -4px var(--g-you-glow); }
.g-btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--g-hair-soft); }
.g-btn-lg { min-height: 56px; padding: 0 30px; font-size: 19px; }
.g-btn-sm { min-height: 34px; padding: 0 14px; font-size: 13px; }

/* ---------------------------------------------------------------- cards at any size */
.g-cardbox { --w: 200px; width: var(--w); height: calc(var(--w) * 528 / 378); position: relative; flex: none; }
.g-cardbox > .vg-card { position: absolute; left: 0; top: 0; transform: scale(calc(var(--w) / 378px)); transform-origin: 0 0; }
@supports not (transform: scale(calc(10px / 5px))) { .g-cardbox > .vg-card { zoom: calc(var(--w) / 378); } }
.g-card-hover { transition: transform var(--g-t) var(--g-ease), filter var(--g-t); }
.g-card-hover:hover { transform: translateY(-6px) scale(1.02); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.g-card-unowned > .vg-card { filter: grayscale(.9) brightness(.42) contrast(.9); }
.g-card-unowned::after { content: "Not yet found"; position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--g-display); letter-spacing: .14em; font-size: 13px; color: var(--g-ink-2); padding: 6px 12px; border-radius: 99px; background: rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1px var(--g-hair-soft); }

/* ---------------------------------------------------------------- chips, badges, fields */
.g-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; font-size: 13px; color: var(--g-ink-2); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--g-hair-soft); font-variant-numeric: tabular-nums; }
.g-chip b { color: var(--g-ink); font-weight: 600; }
.g-chip[aria-pressed="true"] { color: var(--g-gold); box-shadow: inset 0 0 0 1px var(--g-gold-2); background: rgba(201, 162, 78, .08); }
button.g-chip { cursor: pointer; font-family: var(--g-body); }
.g-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--g-ink-3); letter-spacing: .08em; text-transform: uppercase; font-family: var(--g-display); }
.g-input, .g-select { min-height: 42px; padding: 0 12px; border-radius: 8px; border: 0; font: inherit; font-family: var(--g-body); text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--g-ink);
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--g-hair-soft), inset 0 2px 4px rgba(0, 0, 0, .5); }
.g-input:focus, .g-select:focus { outline: 2px solid var(--g-you); outline-offset: 1px; }

/* ---------------------------------------------------------------- toasts + modal */
.g-toasts { position: fixed; z-index: 90; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.g-toast { pointer-events: auto; padding: 12px 20px; border-radius: 10px; background: rgba(20, 19, 24, .96); color: var(--g-ink); box-shadow: var(--g-shadow), inset 0 0 0 1px var(--g-hair-soft); font-size: 15px; animation: g-rise var(--g-t) var(--g-ease) both; max-width: 560px; }
.g-toast.bad { box-shadow: var(--g-shadow), inset 0 0 0 1px rgba(224, 115, 94, .6); }
.g-modal-veil { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 40%, rgba(10, 10, 12, .72), rgba(4, 4, 6, .9)); animation: g-fade var(--g-t) both; }
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
.g-modal { max-width: 720px; width: 100%; animation: g-rise var(--g-t-slow) var(--g-ease) both; }

/* ---------------------------------------------------------------- loading + gate */
.g-center { height: 100%; display: grid; place-items: center; text-align: center; padding: 24px; }
.g-sigil-spin { width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--g-hair); position: relative; animation: g-spin 3.6s linear infinite; }
.g-sigil-spin::before, .g-sigil-spin::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid transparent; border-top-color: var(--g-gold); border-left-color: var(--g-gold-2); }
.g-sigil-spin::after { inset: 20px; border-top-color: var(--g-you); animation: g-spin 1.8s linear infinite reverse; }
@keyframes g-spin { to { transform: rotate(360deg); } }

:root[data-coa-sides="silvercrimson"] { --g-you: #c9dcee; --g-you-glow: rgba(201, 220, 238, .4); --g-them: #d2474e; --g-them-glow: rgba(210, 71, 78, .42); }
:root[data-coa-sides="jadeviolet"] { --g-you: #58e0ad; --g-you-glow: rgba(88, 224, 173, .42); --g-them: #b27cff; --g-them-glow: rgba(178, 124, 255, .42); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* ---------------------------------------------------------------- phone widths */
@media (max-width: 820px) {
  .g-topbar { flex-wrap: wrap; height: auto; padding: 10px 14px 0; gap: 8px 14px; }
  .g-nav { order: 3; width: calc(100% + 28px); margin: 0 -14px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--g-hair-soft); }
  .g-nav::-webkit-scrollbar { display: none; }
  .g-nav a { white-space: nowrap; padding: 10px 10px; font-size: 14px; }
  .g-top-right > span { display: none; }
  .g-screen { padding: 22px 16px 48px; }
}

/* ---------------------------------------------------------------- inspect: big card preview, front and centre */
.inspect { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(6, 6, 8, .35), rgba(6, 6, 8, .72)); animation: g-fade .12s both; }
.inspect-card { display: flex; flex-direction: column; align-items: center; gap: 12px; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .85)); animation: inspect-in .16s var(--g-ease) both; }
@keyframes inspect-in { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.inspect-stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.inspect-stats span { font-family: var(--g-display); letter-spacing: .1em; font-size: 14px; padding: 5px 12px; border-radius: 99px; background: rgba(10, 11, 14, .92); box-shadow: inset 0 0 0 1px var(--g-hair); color: var(--g-ink); }
/* drag ghost: the card follows the pointer while dragged */
.drag-ghost { position: fixed; z-index: 96; left: 0; top: 0; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .8)); transition: opacity .15s; }
.drag-ghost.over { filter: drop-shadow(0 0 18px rgba(127, 211, 255, .9)) drop-shadow(0 30px 40px rgba(0, 0, 0, .8)); }
.drag-ghost.nope { opacity: .55; }
.mt-card.lifted { opacity: .25; }

/* ---------------------------------------------------------------- one interface scale for every resolution (app/scale.js) */
.g-topbar, .g-screen:not(.g-full) > *, .g-gate, .g-center > *, .g-modal, .g-ceremony-stage, .g-toasts, .coa-fab { zoom: var(--ui); }
.g-topbar { height: auto; min-height: 56px; }
/* smallest text is never below 13 px before scaling */
.g-eyebrow { font-size: 13.5px; }
.g-chip { font-size: 14px; }
.g-muted { font-size: max(1em, 14px); }
/* readable floors: the small-caps display face renders lowercase at ~70 %, so its labels need more size */
.g-back { font-size: 14.5px; }
.g-eyebrow { font-size: 14px; }
.g-btn-sm { font-size: 14px; }
.g-field { font-size: 14px; }