/* CardVerse visual experience — image-first, shared with the cross-platform art direction. */
:root {
  --cv-ink: #09080c;
  --cv-panel: rgba(19, 16, 23, .82);
  --cv-panel-solid: #151219;
  --cv-cream: #fff5de;
  --cv-gold: #f4c76a;
  --cv-gold-deep: #a87123;
  --cv-coral: #ff6c5f;
  --cv-line: rgba(255, 234, 190, .18);
  --cv-soft: #cfc4cf;
  --cv-radius: 28px;
  --cv-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}

html { background: var(--cv-ink); }

body.portal-body {
  background:
    radial-gradient(circle at 80% 4%, rgba(115, 24, 71, .18), transparent 25rem),
    radial-gradient(circle at 10% 36%, rgba(26, 104, 112, .14), transparent 30rem),
    #09080c;
  color: var(--cv-cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.portal-body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: .07;
  background-image: url('/assets/cardverse/themes/classic/overlay.webp');
  background-size: 900px auto;
  pointer-events: none;
}

.site-header {
  background: linear-gradient(180deg, rgba(8, 6, 10, .96), rgba(8, 6, 10, .82));
  border-bottom-color: rgba(244, 199, 106, .2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .24);
}

.nav-shell { width: min(1500px, calc(100% - 2rem)); min-height: 76px; }
.brand { color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; }
.brand-mark { width: 44px; height: 44px; border-radius: 15px; box-shadow: 0 0 24px rgba(244, 199, 106, .2); }
.nav-links a { color: #d8cfd8; }
.nav-links a:hover, .nav-links a:focus-visible { background: rgba(244, 199, 106, .1); color: #fff6df; }
.nav-account { border-color: rgba(244, 199, 106, .4); background: linear-gradient(135deg, rgba(244, 199, 106, .13), transparent); }

.eyebrow {
  color: var(--cv-gold);
  font-size: .72rem;
  letter-spacing: .19em;
}

h1, h2, h3 { color: #fff8e9; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.025em; }

.button {
  border-radius: 999px;
  padding-inline: 1.35rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px) scale(1.01); }
.button-primary {
  background: linear-gradient(135deg, #ffe49b, #e4ad46 56%, #b66d22);
  color: #211306;
  box-shadow: 0 14px 34px rgba(210, 140, 44, .24), inset 0 1px rgba(255,255,255,.55);
}
.button-secondary { background: rgba(16, 11, 18, .52); border-color: rgba(255, 239, 205, .3); backdrop-filter: blur(12px); }

/* Home hero */
.cv-hero {
  position: relative;
  isolation: isolate;
  width: min(1600px, calc(100% - 2rem));
  min-height: min(780px, calc(100vh - 100px));
  margin: 1rem auto 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  align-items: center;
  border: 1px solid rgba(255, 230, 176, .22);
  border-radius: 34px;
  background: #171018 url('/assets/cardverse/themes/classic/menu.webp') center / cover no-repeat;
  box-shadow: var(--cv-shadow);
}

.cv-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 6, 10, .93) 0%, rgba(8, 6, 10, .78) 38%, rgba(8, 6, 10, .12) 72%, rgba(8, 6, 10, .3)),
    linear-gradient(0deg, rgba(8, 6, 10, .8), transparent 38%);
}

.cv-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8%;
  opacity: .25;
  background: url('/assets/cardverse/themes/classic/overlay.webp') center / cover no-repeat;
  mix-blend-mode: screen;
  animation: cv-drift 16s ease-in-out infinite alternate;
}

.cv-hero-copy { max-width: 780px; padding: clamp(2.3rem, 6vw, 6.5rem); }
.cv-live-badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.4rem;
  padding: .55rem .85rem;
  border: 1px solid rgba(255, 231, 185, .24);
  border-radius: 999px;
  background: rgba(15, 11, 17, .48);
  color: #fff0c9;
  font-size: .78rem;
  font-weight: 750;
  backdrop-filter: blur(14px);
}
.cv-live-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6bf0ae; box-shadow: 0 0 16px #6bf0ae; }
.cv-hero h1 { max-width: 820px; margin: 0; font-size: clamp(3.1rem, 6.2vw, 6.6rem); line-height: .93; text-wrap: balance; text-shadow: 0 8px 35px rgba(0,0,0,.65); }
.cv-hero h1 em { color: var(--cv-gold); font-style: normal; }
.cv-hero-lead { max-width: 670px; margin: 1.6rem 0 0; color: #eee3e7; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.65; text-shadow: 0 2px 12px #000; }
.cv-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.cv-proof { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.4rem; color: #f8ead4; }
.cv-proof span { display: grid; gap: .1rem; }
.cv-proof strong { color: #fff; font-family: Georgia, serif; font-size: 1.35rem; }
.cv-proof small { color: #cbbfc7; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }

.cv-hero-art { position: relative; align-self: stretch; min-height: 650px; }
.cv-card-back {
  position: absolute;
  overflow: hidden;
  width: clamp(150px, 15vw, 250px);
  aspect-ratio: 2 / 3;
  border: 5px solid #f1dfb5;
  border-radius: 19px;
  background: #201a1e;
  box-shadow: 0 28px 58px rgba(0,0,0,.6), inset 0 0 0 2px rgba(0,0,0,.35);
}
.cv-card-back img { width: 100%; height: 100%; object-fit: cover; }
.cv-card-back:nth-child(1) { right: 34%; top: 22%; transform: rotate(-12deg); animation: cv-float-a 6s ease-in-out infinite; }
.cv-card-back:nth-child(2) { right: 10%; top: 28%; transform: rotate(9deg); animation: cv-float-b 7s ease-in-out infinite; }
.cv-card-back:nth-child(3) { right: 20%; top: 46%; transform: rotate(22deg); animation: cv-float-c 8s ease-in-out infinite; }
.cv-theme-orbit {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  gap: .55rem;
  padding: .65rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  background: rgba(7,5,9,.55);
  backdrop-filter: blur(16px);
}
.cv-theme-orbit img { width: 52px; height: 52px; border-radius: 15px; object-fit: cover; border: 1px solid rgba(255,255,255,.23); }

.section { width: min(1500px, calc(100% - 2rem)); }
.section-heading { align-items: end; }
.section-heading h2 { font-size: clamp(2.3rem, 4vw, 4.2rem); line-height: 1; }
.section-heading > p { color: var(--cv-soft); }

/* Universe cards */
.cv-universe-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.cv-universe-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 470px;
  grid-column: span 3;
  display: flex;
  align-items: end;
  border: 1px solid rgba(255, 235, 195, .16);
  border-radius: var(--cv-radius);
  background: #19131b var(--universe-art) center / cover no-repeat;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cv-universe-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(8,6,10,.98) 0%, rgba(8,6,10,.72) 35%, rgba(8,6,10,.05) 78%); }
.cv-universe-card::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0; background: var(--universe-overlay) center / cover; mix-blend-mode: screen; transition: opacity .3s ease; }
.cv-universe-card:hover { transform: translateY(-8px); border-color: rgba(244,199,106,.55); box-shadow: 0 28px 80px rgba(0,0,0,.5); }
.cv-universe-card:hover::after { opacity: .34; }
.cv-universe-content { width: 100%; padding: 1.4rem; }
.cv-universe-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cv-universe-icon { width: 64px; height: 64px; border-radius: 19px; object-fit: cover; border: 2px solid rgba(255,239,203,.42); box-shadow: 0 9px 22px rgba(0,0,0,.4); }
.cv-universe-count { color: var(--cv-gold); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cv-universe-card h3 { margin: 1rem 0 .35rem; font-family: Georgia, serif; font-size: 1.8rem; }
.cv-universe-card p { margin: 0; color: #d8ced5; font-size: .92rem; }
.cv-universe-link { display: flex; justify-content: space-between; margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.15); color: #fff0c3; font-weight: 800; }

/* Featured playable experience */
.cv-play-feature {
  position: relative;
  overflow: hidden;
  min-height: 570px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.5rem, 5vw, 5rem);
  border: 1px solid var(--cv-line);
  border-radius: 34px;
  background: #101313 url('/assets/cardverse/themes/jungle_aztec/room.webp') center / cover no-repeat;
  box-shadow: var(--cv-shadow);
}
.cv-play-feature::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,9,9,.96) 0%, rgba(7,9,9,.78) 43%, rgba(7,9,9,.08)); }
.cv-play-copy { position: relative; z-index: 2; max-width: 600px; }
.cv-play-copy h3 { font-family: Georgia, serif; font-size: clamp(2.3rem, 4.5vw, 4.5rem); line-height: 1; }
.cv-play-copy p { color: #dbe5dc; font-size: 1.05rem; }
.cv-table-art { position: relative; z-index: 1; min-height: 440px; }
.cv-table-art img:first-child { position: absolute; width: min(760px, 100%); right: -4%; top: 8%; filter: drop-shadow(0 35px 35px rgba(0,0,0,.55)); transform: rotate(-3deg); }
.cv-table-art img:last-child { position: absolute; width: 44%; right: 4%; bottom: 0; filter: drop-shadow(0 20px 25px rgba(0,0,0,.5)); animation: cv-float-b 7s ease-in-out infinite; }

/* Theme gallery */
.cv-theme-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 1rem; overflow-x: auto; padding: .5rem .2rem 1.5rem; scroll-snap-type: x mandatory; scrollbar-color: var(--cv-gold-deep) rgba(255,255,255,.06); }
.cv-theme-card { position: relative; overflow: hidden; min-height: 390px; scroll-snap-align: start; border: 1px solid var(--cv-line); border-radius: 24px; background: #181318 var(--theme-art) center / cover; }
.cv-theme-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,6,10,.98), rgba(8,6,10,.12) 70%); }
.cv-theme-card > img { position: absolute; top: 1rem; left: 1rem; width: 66px; height: 66px; border-radius: 18px; object-fit: cover; border: 2px solid rgba(255,243,214,.52); box-shadow: 0 12px 25px rgba(0,0,0,.45); }
.cv-theme-meta { position: absolute; inset: auto 1.1rem 1.1rem; }
.cv-theme-meta h3 { margin: 0 0 .3rem; font-family: Georgia, serif; font-size: 1.45rem; }
.cv-theme-meta span { color: var(--cv-gold); font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cv-mini-back { position: absolute; z-index: 2; right: 1rem; top: 1.2rem; width: 62px; height: 92px; border: 2px solid #f4e2bd; border-radius: 8px; object-fit: cover; transform: rotate(7deg); box-shadow: 0 12px 22px rgba(0,0,0,.5); }

/* Hub and catalogue */
.cv-hub-hero, .content-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(1600px, calc(100% - 2rem));
  min-height: 520px;
  margin: 1rem auto 0;
  display: flex;
  align-items: end;
  padding: clamp(2rem, 6vw, 6rem);
  border: 1px solid var(--cv-line);
  border-radius: 34px;
  background: #171117 var(--hero-art, url('/assets/cardverse/themes/classic/room.webp')) center / cover no-repeat;
  box-shadow: var(--cv-shadow);
}
.cv-hub-hero::before, .content-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(8,6,10,.94), rgba(8,6,10,.58) 52%, rgba(8,6,10,.12)), linear-gradient(0deg, rgba(8,6,10,.84), transparent 58%); }
.cv-hub-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .28; background: var(--hero-overlay) center / cover; mix-blend-mode: screen; animation: cv-drift 16s ease-in-out infinite alternate; }
.cv-hub-copy { max-width: 760px; }
.cv-hub-hero h1, .content-hero h1 { margin: 0 0 1rem; font-size: clamp(3rem, 6vw, 6rem); line-height: .95; }
.cv-hub-hero p, .content-hero p { color: #eee3e7; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.cv-hub-emblem { position: absolute; right: clamp(1rem, 7vw, 8rem); bottom: clamp(1rem, 5vw, 4rem); width: clamp(110px, 16vw, 230px); filter: drop-shadow(0 20px 30px rgba(0,0,0,.55)); animation: cv-float-a 7s ease-in-out infinite; }

.game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.game-card { position: relative; overflow: hidden; border-color: var(--cv-line); border-radius: 24px; background: rgba(23,19,25,.9); box-shadow: 0 18px 45px rgba(0,0,0,.2); transition: transform .25s ease, border-color .25s ease; }
.game-card:hover { transform: translateY(-6px); border-color: rgba(244,199,106,.5); }
.game-thumbnail { position: relative; overflow: hidden; height: 240px; display: block; background: #1a151b var(--game-art) center / cover no-repeat; }
.game-thumbnail::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,9,13,.62), transparent 60%); }
.game-thumbnail img { position: absolute; z-index: 1; right: 1rem; bottom: -2rem; width: 116px; height: 172px; border: 3px solid #f3e2bd; border-radius: 12px; object-fit: cover; transform: rotate(8deg); filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)); }
.game-card-body { padding: 1.2rem; }
.game-card h3 { font-family: Georgia, serif; font-size: 1.55rem; }
.game-card p { color: var(--cv-soft); }
.game-meta { color: #d5c8d2; }
.status-badge { background: rgba(244,199,106,.1); color: #f2d99f; }

.content-hero { min-height: 440px; align-items: end; }
.content-hero > * { position: relative; z-index: 1; }
.content-layout { gap: 1.2rem; }
.prose-card, .facts-card { border-color: var(--cv-line); background: linear-gradient(145deg, rgba(30,24,31,.94), rgba(16,14,19,.96)); box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.prose-card { color: #dcd2dc; }
.prose-card h2 { color: var(--cv-gold); font-family: Georgia, serif; }
.facts-card { border-top: 3px solid var(--cv-gold); }
.rules-version { border-inline-start-color: var(--cv-gold); background: rgba(244,199,106,.08); }
.ai-level-card { background: rgba(255,255,255,.035); border-color: var(--cv-line); }

.site-footer { width: min(1500px, calc(100% - 2rem)); border-color: var(--cv-line); color: #bfb3be; }
.site-footer strong { color: var(--cv-gold); font-family: Georgia, serif; font-size: 1.25rem; }
.site-footer a, .footer-button { color: #e6dbe3; }

@keyframes cv-drift { to { transform: translate3d(2.5%, -1.5%, 0) scale(1.04); } }
@keyframes cv-float-a { 50% { translate: 0 -12px; rotate: 1.5deg; } }
@keyframes cv-float-b { 50% { translate: 0 14px; rotate: -1.5deg; } }
@keyframes cv-float-c { 50% { translate: -8px -8px; rotate: 2deg; } }

@media (max-width: 1180px) {
  .cv-hero { grid-template-columns: 1fr .65fr; }
  .cv-universe-card { grid-column: span 6; min-height: 430px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .cv-hero { min-height: 720px; grid-template-columns: 1fr; align-items: end; background-position: 62% center; }
  .cv-hero::before { background: linear-gradient(0deg, rgba(8,6,10,.96), rgba(8,6,10,.52) 72%, rgba(8,6,10,.2)); }
  .cv-hero-copy { align-self: end; padding: 2rem; }
  .cv-hero h1 { font-size: clamp(3rem, 13vw, 5.5rem); }
  .cv-hero-art { position: absolute; inset: 0; min-height: 0; pointer-events: none; opacity: .38; }
  .cv-card-back { width: 120px; }
  .cv-card-back:nth-child(1) { right: 34%; top: 12%; }
  .cv-card-back:nth-child(2) { right: 8%; top: 16%; }
  .cv-card-back:nth-child(3) { display: none; }
  .cv-theme-orbit { display: none; }
  .cv-play-feature { grid-template-columns: 1fr; min-height: 700px; align-items: end; }
  .cv-play-feature::before { background: linear-gradient(0deg, rgba(7,9,9,.97), rgba(7,9,9,.45) 70%, transparent); }
  .cv-table-art { position: absolute; inset: 0; opacity: .5; }
  .cv-hub-emblem { top: 1rem; bottom: auto; }
}

@media (max-width: 680px) {
  .cv-hero, .cv-hub-hero, .content-hero { width: calc(100% - 1rem); border-radius: 24px; }
  .cv-hero-copy { padding: 1.4rem; }
  .cv-proof { gap: .8rem 1.2rem; }
  .cv-universe-card { grid-column: span 12; min-height: 390px; }
  .game-grid { grid-template-columns: 1fr; }
  .game-thumbnail { height: 220px; }
  .cv-hub-hero, .content-hero { min-height: 520px; padding: 1.5rem; }
  .cv-hub-emblem { width: 110px; }
  .site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .cv-hero::after, .cv-hub-hero::after, .cv-card-back, .cv-table-art img:last-child, .cv-hub-emblem { animation: none !important; }
}