/* Project-specific styles layered on top of Tailwind.
 *
 * Theming: colors are semantic design tokens exposed as CSS custom properties and consumed by
 * Tailwind via the `tailwind.config` in base.html (e.g. `bg-bg`, `text-fg`, `bg-accent`). Each
 * preset theme sets the tokens under a `[data-theme=...]` selector; the active theme and an
 * optional custom accent are stored in localStorage and applied before paint (see base.html).
 */

/* MTG-flavored card typography: Cinzel (titles) + EB Garamond (body), both SIL OFL.
 * Vendored under static/vendor/fonts (see that NOTICE). Exposed as `font-title` / `font-card`. */
@font-face {
  font-family: "Cinzel";
  src: url("/static/vendor/fonts/cinzel-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("/static/vendor/fonts/cinzel-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/static/vendor/fonts/ebgaramond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/static/vendor/fonts/ebgaramond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Themes: 9 palettes, each with a light + dark variant. `data-theme` is "<palette>-<mode>"; the
   settings menu stores the palette + mode separately. :root is the default (Tropic, dark).
   The two original pairs: Midnight↔Parchment (light), Slate↔Daylight (light). */

/* Tropic (trop_orange) — deep aubergine, tropical tangerine. */
:root,
[data-theme="trop-orange-dark"] {
  color-scheme: dark;
  --c-bg: #0b0014; --c-surface: #17061f; --c-surface-2: #24102e; --c-surface-3: #351a3f;
  --c-edge: #3a1f44; --c-fg: #eef6ef; --c-muted: #b295ac; --c-accent: #ff7733; --c-accent-fg: #1a0710;
}
[data-theme="trop-orange-light"] {
  color-scheme: light;
  --c-bg: #f3fbf5; --c-surface: #ffffff; --c-surface-2: #e6f6ec; --c-surface-3: #d4f4dd;
  --c-edge: #bfe6cd; --c-fg: #2a1030; --c-muted: #7a6577; --c-accent: #e85f1f; --c-accent-fg: #ffffff;
}

/* Prussian — deep navy, sky cyan. */
[data-theme="prussian-dark"] {
  color-scheme: dark;
  --c-bg: #0d2149; --c-surface: #132a5c; --c-surface-2: #1b3670; --c-surface-3: #244485;
  --c-edge: #2b4a8f; --c-fg: #eef3fb; --c-muted: #b0a08f; --c-accent: #41bbd9; --c-accent-fg: #08192e;
}
[data-theme="prussian-light"] {
  color-scheme: light;
  --c-bg: #f5f8fd; --c-surface: #ffffff; --c-surface-2: #eaf1fa; --c-surface-3: #dbe7f5;
  --c-edge: #c7d6ea; --c-fg: #0d2149; --c-muted: #5f6f88; --c-accent: #1f8faf; --c-accent-fg: #ffffff;
}

/* Pine — forest teal, sage. */
[data-theme="pine-dark"] {
  color-scheme: dark;
  --c-bg: #122320; --c-surface: #1a302b; --c-surface-2: #243f38; --c-surface-3: #2f4e46;
  --c-edge: #36564d; --c-fg: #e6f1e6; --c-muted: #9bb6ac; --c-accent: #57a7b0; --c-accent-fg: #07201f;
}
[data-theme="pine-light"] {
  color-scheme: light;
  --c-bg: #e9f2e6; --c-surface: #f4f8f2; --c-surface-2: #dbe9d6; --c-surface-3: #c8dcc3;
  --c-edge: #afd0bf; --c-fg: #1e3b36; --c-muted: #57756c; --c-accent: #387780; --c-accent-fg: #ffffff;
}

/* Walnut — dark wood, cinnamon. */
[data-theme="walnut-dark"] {
  color-scheme: dark;
  --c-bg: #211804; --c-surface: #2e2308; --c-surface-2: #3c2f10; --c-surface-3: #4c3b18;
  --c-edge: #524021; --c-fg: #f1f2eb; --c-muted: #b0a487; --c-accent: #cc7d5c; --c-accent-fg: #211705;
}
[data-theme="walnut-light"] {
  color-scheme: light;
  --c-bg: #f2f2ea; --c-surface: #ffffff; --c-surface-2: #e8e8e0; --c-surface-3: #d8dad3;
  --c-edge: #c8cabf; --c-fg: #312509; --c-muted: #786b52; --c-accent: #b86f52; --c-accent-fg: #ffffff;
}

/* Malachite — graphite, vivid green. */
[data-theme="malachite-dark"] {
  color-scheme: dark;
  --c-bg: #1c1f1d; --c-surface: #262a27; --c-surface-2: #333833; --c-surface-3: #434a44;
  --c-edge: #474e48; --c-fg: #fcfaf9; --c-muted: #9aa39c; --c-accent: #32e875; --c-accent-fg: #06210f;
}
[data-theme="malachite-light"] {
  color-scheme: light;
  --c-bg: #f7faf7; --c-surface: #ffffff; --c-surface-2: #eef3ee; --c-surface-3: #e0e8e1;
  --c-edge: #d3ddd4; --c-fg: #12211a; --c-muted: #5f6e63; --c-accent: #12a150; --c-accent-fg: #ffffff;
}

/* Lemon — near-black, electric lemon (green accent in light for legibility). */
[data-theme="lemon-dark"] {
  color-scheme: dark;
  --c-bg: #040f0f; --c-surface: #0c1717; --c-surface-2: #152121; --c-surface-3: #20302e;
  --c-edge: #2d3a3a; --c-fg: #eefaf0; --c-muted: #83a892; --c-accent: #f9e900; --c-accent-fg: #1a1a00;
}
[data-theme="lemon-light"] {
  color-scheme: light;
  --c-bg: #f7faf5; --c-surface: #ffffff; --c-surface-2: #eef4ea; --c-surface-3: #dfeeda;
  --c-edge: #cbe3c3; --c-fg: #0e2415; --c-muted: #5c7a63; --c-accent: #248232; --c-accent-fg: #ffffff;
}

/* Bubblegum — deep navy, bubblegum pink. */
[data-theme="bubblegum-dark"] {
  color-scheme: dark;
  --c-bg: #0a1045; --c-surface: #121a5c; --c-surface-2: #1c2670; --c-surface-3: #283485;
  --c-edge: #2d3a8f; --c-fg: #f3eef8; --c-muted: #9aa0c8; --c-accent: #ff6978; --c-accent-fg: #2a0a12;
}
[data-theme="bubblegum-light"] {
  color-scheme: light;
  --c-bg: #f7f6fd; --c-surface: #ffffff; --c-surface-2: #eeeefb; --c-surface-3: #dfe0f4;
  --c-edge: #ccceec; --c-fg: #0a1045; --c-muted: #6a6f9a; --c-accent: #e8455a; --c-accent-fg: #ffffff;
}

/* Midnight (dark) ↔ Parchment (light) — the original default pair. */
[data-theme="midnight-dark"] {
  color-scheme: dark;
  --c-bg: #020617; --c-surface: #0f172a; --c-surface-2: #1e293b; --c-surface-3: #334155;
  --c-edge: #334155; --c-fg: #f1f5f9; --c-muted: #94a3b8; --c-accent: #6366f1; --c-accent-fg: #ffffff;
}
[data-theme="midnight-light"] {
  color-scheme: light;
  --c-bg: #efe6d2; --c-surface: #faf4e6; --c-surface-2: #ece1c8; --c-surface-3: #ddcfa9;
  --c-edge: #d3c29c; --c-fg: #33291a; --c-muted: #7c6c4f; --c-accent: #9a6b2f; --c-accent-fg: #ffffff;
}

/* Slate (dark) ↔ Daylight (light). */
[data-theme="slate-dark"] {
  color-scheme: dark;
  --c-bg: #16181d; --c-surface: #1e2127; --c-surface-2: #272b33; --c-surface-3: #333843;
  --c-edge: #3a3f4b; --c-fg: #e8eaed; --c-muted: #9aa0ab; --c-accent: #14b8a6; --c-accent-fg: #ffffff;
}
[data-theme="slate-light"] {
  color-scheme: light;
  --c-bg: #f8fafc; --c-surface: #ffffff; --c-surface-2: #f1f5f9; --c-surface-3: #e2e8f0;
  --c-edge: #e2e8f0; --c-fg: #0f172a; --c-muted: #64748b; --c-accent: #4f46e5; --c-accent-fg: #ffffff;
}

/* Brand mark: mask the logo SVG and tint it with the current text color so it themes. */
.logo-mark {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("/static/scryme-logo.svg") center / contain no-repeat;
  mask: url("/static/scryme-logo.svg") center / contain no-repeat;
}

/* Hide x-cloak elements until Alpine initializes (avoids a flash of the busy state). */
[x-cloak] { display: none !important; }

/* Tunable custom properties, retuned live from the Settings menu (persisted to :root). Kept in a
   single :root block so the declarations don't duplicate the selector.
   --card-min drives the fluid card grid below (the "card size" slider, 6rem–15rem; default 10rem);
   --foil-speed / --spin-speed drive the card-effect animations further down. */
:root { --card-min: 10rem; --foil-speed: 5s; --spin-speed: 0.5s; }

/* Fluid card grid: columns reflow continuously with the viewport instead of stepping at fixed
   breakpoints, so resizing the window always re-lays-out the cards. The per-column minimum width is
   driven by --card-min (see above). The min(…, 47vw) cap keeps at least ~2 columns on a phone no
   matter how large a size is chosen. */
.card-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), 47vw), 1fr));
}
/* Smaller variant for thumbnail rows (printings, similar cards, binder pages). */
.card-grid-sm {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}
@media (min-width: 640px) {
  .card-grid-sm { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
}

/* Card-effect knobs (--foil-speed / --spin-speed) are declared with --card-min in the single :root
   block near the top of this file and retuned live from the Settings menu. */

/* Foil / holographic sheen for foil printings — an animated rainbow that drifts across the card,
   plus a diagonal glare sweep. Purely decorative (pointer-events off) and respects reduced motion. */
.foil { position: relative; overflow: hidden; isolation: isolate; }
.foil::before,
.foil::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.foil::before {
  background: linear-gradient(115deg,
    transparent 18%,
    rgba(255, 0, 170, 0.35), rgba(255, 200, 0, 0.30),
    rgba(0, 230, 200, 0.35), rgba(120, 120, 255, 0.35),
    transparent 82%);
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  animation: foil-shift var(--foil-speed) linear infinite;
}
.foil::after {
  background: linear-gradient(115deg, transparent 40%,
    rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  background-size: 250% 250%;
  mix-blend-mode: soft-light;
  animation: foil-glare var(--foil-speed) linear infinite;
}
.foil:hover::before, .foil:hover::after { animation-duration: calc(var(--foil-speed) * 0.45); }
@keyframes foil-shift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes foil-glare { 0% { background-position: 120% 0%; } 100% { background-position: -40% 0%; } }
@media (prefers-reduced-motion: reduce) {
  .foil::before, .foil::after { animation: none; }
}

/* Small foil badge chip (marks a foil stack). */
.foil-chip {
  background: linear-gradient(115deg, #ff5bd0, #ffd75b, #5bffce, #6f8bff);
  background-size: 300% 300%;
  animation: foil-shift var(--foil-speed) linear infinite;
  color: #1b1030;
}

/* Etched foil — a cooler, engraved look: a static crosshatch "etch" texture plus a metallic
   silver sheen sweep. Distinct from the rainbow foil above; shares the speed var and glare sweep. */
.etched { position: relative; overflow: hidden; isolation: isolate; }
.etched::before,
.etched::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.etched::before {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.10) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(175, 215, 255, 0.10) 0 2px, transparent 2px 7px);
  mix-blend-mode: overlay;
  opacity: 0.75;
}
.etched::after {
  background: linear-gradient(115deg, transparent 42%,
    rgba(210, 230, 255, 0.55) 50%, rgba(255, 255, 255, 0.40) 54%, transparent 62%);
  background-size: 250% 250%;
  mix-blend-mode: color-dodge;
  animation: foil-glare var(--foil-speed) linear infinite;
}
.etched:hover::after { animation-duration: calc(var(--foil-speed) * 0.45); }
@media (prefers-reduced-motion: reduce) { .etched::after { animation: none; } }

.etched-chip {
  background: linear-gradient(115deg, #cfe3ff, #eef5ff, #b8cbe0, #dfe9f5);
  background-size: 300% 300%;
  animation: foil-shift var(--foil-speed) linear infinite;
  color: #17324f;
}

/* Hover spin: a cursor-reactive 3-D tilt on card images/art, enabled by the `spin-on` root class
   (toggled from Settings). The transform is set inline by _card_spin.html from the pointer's
   position, so the card leans toward the cursor; this rule just smooths it (and the return) at the
   chosen speed. Only card *thumbnails/art* (links containing an image, or .card-art) get it —
   text card-name links are left alone. */
.spin-on a[href^="/card/"]:has(img),
.spin-on .card-art {
  transition: transform var(--spin-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
  transform-origin: center;
}
.spin-on a[href^="/card/"]:has(img):hover,
.spin-on .card-art:hover { z-index: 5; will-change: transform; }

/* Card-detail Transform / Rotate controls. The rotate spins the whole card (springy overshoot,
   scaled to keep a sideways card inside its column); the transform pulses the image edge-on
   (rotateY) while its src swaps, mimicking a physical card flip. Applied to a wrapper and the
   <img> respectively, so neither collides with the .card-art hover-tilt transform above. */
.art-stage {
  transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.5, 1);
  transform-origin: center;
  will-change: transform;
}
.card-fx-img {
  transition: transform 0.17s ease-in;
  transform-origin: center;
  backface-visibility: hidden;
}
.card-fx-img.is-flipping { transform: rotateY(90deg); }
@media (prefers-reduced-motion: reduce) {
  .art-stage, .card-fx-img { transition: none; }
}

/* Grid hover-flip for double-faced cards: a quick 3-D flip while the <img> src swaps mid-way. */
@keyframes grid-flip {
  0%   { transform: perspective(600px) rotateY(0); }
  50%  { transform: perspective(600px) rotateY(90deg); }
  100% { transform: perspective(600px) rotateY(0); }
}
.grid-card-img.grid-flipping { animation: grid-flip 0.34s ease; }
@media (prefers-reduced-motion: reduce) { .grid-card-img.grid-flipping { animation: none; } }

/* Hover overlay behind the grid flip button: the palette's darkest token (--c-bg) at 30%, so it
   tints toward the selected theme. The element's own opacity handles the hover fade (keeping the
   button fully opaque), so the tint stays a true 30% when shown. */
.grid-flip-overlay { background-color: color-mix(in srgb, var(--c-bg) 30%, transparent); }

/* HTMX request indicator (shown only while a request tagged with hx-indicator is in flight). */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* Indeterminate progress bar used by _busy_bar.html during uploads. */
@keyframes busy-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}
.busy-indeterminate {
  animation: busy-slide 1.1s ease-in-out infinite;
}

/* Print-friendly layout for binder / proxy / decklist sheets: drop the app chrome and
   force a light ink-on-paper palette regardless of theme. */
@media print {
  #scryme-dropzone,
  [data-print-hide] { display: none !important; }
  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  a { color: #000 !important; text-decoration: none !important; }
  .print-cols { columns: 2; }
}

/* Mana cost pips: center the glyph inside its colored circle on both axes.
   The vendored mana.css centers via `text-align` + `line-height`, but Tailwind text-size
   utilities (`text-lg`/`text-xl`, and the values inherited on card pages) set their own
   line-height, which drops the glyph below center and can nudge it off-axis. Flexbox centering
   is immune to that. The tag+double-class selector (plus !important on line-height) outranks both
   mana.css `.ms-cost` and any equal-specificity Tailwind utility regardless of load order.
   Hybrid/split pips render their glyphs via absolutely-positioned ::before/::after, which sit
   outside flex flow and keep their own offsets — so they're unaffected. */
i.ms.ms-cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  vertical-align: middle;
}