/* Spellspeed site. Dark only, like the game it sits on. Brand: brand/spellspeed/README.md
   Idea: every feature is a Spell card; its description is written as card text. */
@font-face { font-family: "Sora"; src: url("fonts/sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/spectral-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/spectral-normal-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/spectral-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #0b1413; --bg-2: #0e1a18; --line: #1d312e; --line-2: #2b4743;
  --fg: #e9f6f3; --muted: #93aaa5; --accent: #5fe6cf; --link: #7fe9d6;
  /* Spell card frame tones */
  --spell-frame: #1f6f60; --spell-bar: #123631; --spell-box: #0f1f1c; --card-ink: #d9e8e4;
  --f-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --f-card: "Spectral", Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.65 var(--f-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.1; text-wrap: balance; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
b, strong { color: var(--fg); font-weight: 600; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 780px; }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(11, 20, 19, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--bg); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.wordmark { font: italic 700 21px/1 var(--f-display); letter-spacing: -.02em; }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }
@media (max-width: 720px) { .nav { display: none; } .top .btn { margin-left: auto; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 16px/1 var(--f-body); padding: 14px 20px; border-radius: 8px; text-decoration: none; white-space: nowrap; border: 1px solid transparent; }
.btn-primary { background: var(--accent); color: #032019; }
.btn-primary:hover { background: #86f0de; }
.btn-ghost { color: var(--fg); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm { padding: 9px 14px; font-size: 14px; }
.btn-soon { color: var(--accent); border: 1px dashed var(--accent); cursor: default; }
.btn small { font-weight: 500; opacity: .7; }

/* Hero: copy, then the board itself */
.hero { padding-block: 64px 0; display: grid; gap: 40px; }
.hero-copy { display: grid; gap: 22px; max-width: 800px; }
.hero h1 { font-size: clamp(40px, 7vw, 80px); font-weight: 700; letter-spacing: -.035em; }
.hero h1 em { font-style: italic; color: var(--accent); }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 58ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.note { font-size: 14px; color: var(--muted); }
.shot { margin: 0; border-radius: 10px; border: 1px solid var(--line-2); overflow: hidden; background: #000; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8); }
.shot img { width: 100%; height: auto; }
.shot figcaption { font-size: 13px; color: var(--muted); padding: 10px 14px; background: var(--bg-2); border-top: 1px solid var(--line); }

/* Sections */
section { padding-block: 88px; }
.section-head { display: grid; gap: 12px; margin-bottom: 44px; max-width: 640px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 46px); }
.section-head p { color: var(--muted); }
.count { font: 600 14px/1 var(--f-display); color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 8px; margin-left: 10px; vertical-align: middle; letter-spacing: 0; }
.band { background: var(--bg-2); border-block: 1px solid var(--line); }

/* Main Deck: our own card layout (name bar, type line, art window, text box), not Konami's frame or icons.
   Cards size their type with container units, so one component serves the preview and the deck grid. */
.deckview { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; align-items: start; }
.deck-preview { position: sticky; top: 88px; display: grid; gap: 18px; }
.deck-details { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 6px; font-size: 16px; }
.deck-details li::marker { color: var(--accent); }
.deck-side { display: grid; gap: 14px; }
.deck-bar { display: flex; align-items: center; gap: 12px; font: 600 14px/1 var(--f-display); color: var(--muted); }
.deck-bar b { font-size: 22px; color: var(--fg); letter-spacing: -.01em; }
.deck-bar .count { margin-left: 0; }
.deck-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); }
.deck-pick { all: unset; cursor: pointer; display: block; border-radius: 6px; transition: transform .18s ease; }
.deck-pick:hover { transform: translateY(-4px); }
.deck-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.deck-pick[aria-pressed="true"] { transform: translateY(-4px); }
.deck-pick[aria-pressed="true"] .ycard { box-shadow: 0 0 0 2px var(--accent), 0 16px 34px -14px #000; }
@media (max-width: 900px) {
  .deckview { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .deck-preview { position: static; order: 2; max-width: 400px; width: 100%; justify-self: center; }
  .deck-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(132px, 30%); overflow-x: auto; scroll-snap-type: x mandatory; background: var(--bg-2); }
  .deck-pick { scroll-snap-align: start; }
}

.ycard { container-type: inline-size; aspect-ratio: 59 / 86; width: 100%; position: relative; overflow: hidden; display: block;
  border-radius: 2.6% / 1.8%; color: #111;
  /* Spell frame: teal-green with a faint woven grain; our own CSS, not Konami's frame artwork */
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #2bb08f 0%, #1a8f73 38%, #137360 70%, #0f5f50 100%);
  box-shadow: inset 0 0 0 2px #101614, inset 0 0 0 3px rgba(255, 255, 255, .2), 0 18px 36px -18px #000; }
.ycard > * { position: absolute; margin: 0; }
.ycard-name { left: 6.6%; right: 6.6%; top: 4.4%; height: 7.6%; display: flex; align-items: center; padding: 0 15cqw 0 2.4cqw;
  border: .55cqw solid; border-color: rgba(0, 0, 0, .55) rgba(255, 255, 255, .35) rgba(255, 255, 255, .35) rgba(0, 0, 0, .55);
  background: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .08));
  font: 600 7.4cqw/1 var(--f-card); font-variant: small-caps; letter-spacing: .02em; color: #fff; white-space: nowrap;
  text-shadow: .3cqw .3cqw 0 rgba(0, 0, 0, .55); }
.ycard-orb { right: 7.8%; top: 4.6%; width: 10.6cqw; height: 10.6cqw; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #8ff7e4, #1d8fe0 55%, #0b3c66 100%);
  box-shadow: 0 0 0 .7cqw #f4f8f6, 0 0 0 1.2cqw rgba(0, 0, 0, .4); }
.ycard-orb svg { width: 64%; height: 64%; }
.ycard-type { right: 8.4%; top: 13.9%; display: flex; align-items: center; gap: .8cqw;
  font: 700 5.4cqw/1 var(--f-card); font-variant: small-caps; letter-spacing: .02em; color: #0b0f0e; }
.ycard-type svg { width: 5cqw; height: 5cqw; padding: .5cqw; border-radius: 50%; background: #f4f0e6; color: #0b3c66; box-shadow: 0 0 0 .35cqw #0b0f0e; }
.ycard-art { left: 12%; top: 18.4%; width: 76%; aspect-ratio: 1; background: #050b0a; overflow: hidden;
  border: .9cqw solid; border-color: rgba(0, 0, 0, .55) rgba(255, 255, 255, .4) rgba(255, 255, 255, .4) rgba(0, 0, 0, .55); }
.ycard-art img, .ycard-art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ycard-code { right: 8.2%; top: 71.2%; font: 600 2.9cqw/1 var(--f-body); letter-spacing: .04em; color: #0b0f0e; }
.ycard-text { left: 6.8%; right: 6.8%; top: 74%; height: 20.4%; padding: 1.6cqw 2.4cqw; overflow: hidden;
  background: linear-gradient(#f6efe0, #ebe1cc); border: .6cqw solid; border-color: #6f5a35 #c9b48a #c9b48a #6f5a35;
  font: 4cqw/1.2 var(--f-card); text-align: justify; hyphens: auto; color: #111; }
.ycard-text .negate { font-style: italic; }
.ycard-foot { left: 6.8%; bottom: 1.9%; font: 600 2.6cqw/1 var(--f-body); letter-spacing: .04em; color: #0b0f0e; opacity: .85; }
/* The preview card catches the light as the pointer moves over it (JS sets --mx/--my); still when motion is reduced. */
.deck-preview .ycard::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .55), transparent 45%),
    linear-gradient(115deg, transparent 30%, rgba(111, 245, 220, .35) 45%, rgba(143, 134, 255, .3) 55%, transparent 70%); }
.deck-preview .ycard:hover::after { opacity: 1; }
.deck-preview .ycard { transition: transform .2s ease; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@media (prefers-reduced-motion: reduce) { .deck-preview .ycard { transform: none; } .deck-pick, .deck-pick:hover { transform: none; transition: none; } }

/* Theme art: the four in-game themes, coloured from the extension's own tokens (night.css) */
.theme-art { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 100%; height: 100%; }
.theme-art span { display: grid; align-content: end; padding: 6%; font: 600 clamp(9px, 4cqw, 15px)/1 var(--f-body); border-bottom: 3px solid; }
.th-night { background: linear-gradient(160deg, #242c2e, #111718 70%); color: #e6eeea; border-color: #4ba3bb; }
.th-classic { background: linear-gradient(160deg, #ffffff, #eef1f0 70%); color: #1b2224; border-color: #1f6e89; }
.th-abyss { background: radial-gradient(circle at 30% 10%, #101a2c, #070d1a 75%); color: #dce8f5; border-color: #4cc3e6; }
.th-ember { background: radial-gradient(circle at 50% 110%, #3a2a18, #211a14 45%, #130f0c); color: #f2e8dc; border-color: #e3a33b; }
.kbd { font: 600 13px/1 var(--f-body); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; color: var(--fg); white-space: nowrap; }

/* Plain promises */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.promises > div { padding: 22px 24px 0 0; display: grid; gap: 6px; align-content: start; }
.promises b { font: 600 19px/1.3 var(--f-display); }
.promises p { color: var(--muted); font-size: 16px; }
@media (max-width: 760px) { .promises { grid-template-columns: minmax(0, 1fr); } }

/* Rulings (FAQ) */
.rulings { border-top: 1px solid var(--line-2); }
.rulings details { border-bottom: 1px solid var(--line-2); }
.rulings summary { cursor: pointer; font: 600 19px/1.4 var(--f-display); padding-block: 20px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.rulings summary::-webkit-details-marker { display: none; }
.rulings summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 24px; line-height: 1; }
.rulings details[open] summary::after { content: "−"; }
.rulings details p { color: var(--muted); padding-bottom: 20px; max-width: 64ch; }
.rulings details p + p { margin-top: -8px; }

/* Steps (Android page) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; border-top: 1px solid var(--line-2); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding-block: 24px; border-bottom: 1px solid var(--line-2); }
.steps li::before { content: counter(step); font: 700 34px/1 var(--f-display); color: var(--accent); }
.steps h3 { font-size: 20px; margin-bottom: 6px; }
.steps p { color: var(--muted); }
.steps p + p { margin-top: 8px; }
.checksum { font: 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--muted); overflow-wrap: anywhere; }

/* Prose (privacy) */
.prose { display: grid; gap: 16px; padding-block: 56px 80px; }
.prose h1 { font-size: clamp(34px, 5vw, 50px); }
.prose h2 { font-size: 22px; margin-top: 18px; }
.prose p { color: #c6d8d4; }
.prose .meta { color: var(--muted); font-size: 15px; }

/* Closing call */
.cta { display: grid; gap: 22px; justify-items: start; }
.cta h2 { font-size: clamp(36px, 6vw, 64px); letter-spacing: -.03em; }

/* Footer */
footer { border-top: 1px solid var(--line); padding-block: 40px 56px; color: var(--muted); font-size: 14px; }
footer .wrap { display: grid; gap: 22px; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-links a { color: var(--fg); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
.fine { display: grid; gap: 6px; max-width: 90ch; }