:root {
  --bg: 225 18% 6%;
  --fg: 34 22% 90%;
  --line: rgba(202, 207, 220, .09);
  --line-strong: rgba(202, 207, 220, .15);
  --red: #ed4b42;
  --paper: #e8e3d8;
  --font: 'DM Sans', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: hsl(var(--bg)); }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: hsl(var(--fg));
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 82% 2%, rgba(126, 28, 23, .13), transparent 28rem),
    radial-gradient(circle at 12% 80%, rgba(17, 48, 62, .13), transparent 30rem),
    hsl(var(--bg));
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }

.grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .7;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(177, 186, 204, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177, 186, 204, .035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, .45) 55%, transparent 100%);
}

/* ---- navigation bar (same as the sites) ---- */
.nav {
  position: fixed;
  inset: 1rem 1rem auto;
  z-index: 30;
  max-width: 1180px;
  margin: 0 auto;
  padding: .75rem 1rem;
  border-radius: 1rem;
  background: rgba(12, 14, 19, .78);
  border: 1px solid var(--line);
  box-shadow: 0 16px 55px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: .75rem; }
.brand img { width: 2.75rem; height: 2.75rem; border-radius: .75rem; object-fit: contain; }
.brand__copy { display: grid; line-height: 1; }
.brand__copy strong { color: #f1eee7; font-size: .88rem; letter-spacing: .13em; }
.brand__copy small { margin-top: .3rem; color: #777b86; font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; }

/* ---- home ---- */
.home { flex: 1; width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 6.5rem 0 3rem; }
.hero { display: grid; justify-items: center; gap: .9rem; text-align: center; margin-bottom: 3rem; }
.kicker { color: var(--red); font-size: .66rem; font-weight: 700; letter-spacing: .3em; }
.hero h1 {
  color: #f1eee7;
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.hero p { max-width: 34rem; color: #8a8f9a; font-size: 1rem; line-height: 1.6; }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.choice {
  --accent: var(--red);
  position: relative;
  display: grid;
  grid-template-rows: 17rem auto;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(27, 30, 38, .92), rgba(13, 15, 20, .96));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
  transition: transform .25s ease-out, border-color .3s ease, box-shadow .3s ease;
  isolation: isolate;
  animation: rise .7s cubic-bezier(.22, .8, .2, 1) both;
}
/* both universes share the RedSide red */
.choice--peche { --accent: var(--red); }
.choice:hover, .choice:focus-visible {
  transform: perspective(1200px) translateY(-8px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .55), 0 0 60px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}
.choice__glow {
  position: absolute;
  inset: -20% -10% 40%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 65%);
  opacity: .8;
  transition: opacity .3s ease;
}
.choice:hover .choice__glow { opacity: 1; }
.choice__art { position: relative; display: grid; place-items: center; overflow: hidden; }
.art {
  position: absolute;
  user-select: none;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .55));
  translate: var(--px, 0px) var(--py, 0px);
  transition: transform .5s cubic-bezier(.22, .8, .2, 1), translate .25s ease-out;
}
.art--binder { height: 92%; transform: translateX(-20%) rotate(-4deg); animation: float 6s ease-in-out infinite; }
.art--booster { height: 74%; transform: translateX(46%) rotate(8deg); animation: float 5s ease-in-out infinite reverse; }
.choice--tcg:hover .art--binder { transform: translateX(-22%) rotate(-2deg) scale(1.05); }
.choice--tcg:hover .art--booster { transform: translateX(50%) rotate(4deg) scale(1.08); }
.art--fish { width: 54%; max-width: 14rem; transform: translateX(-34%) rotate(-8deg); animation: float 5.5s ease-in-out infinite; }
.art--rod { height: 90%; transform: translateX(58%) rotate(14deg); opacity: .95; animation: float 6.5s ease-in-out infinite reverse; }
.choice--peche:hover .art--fish { transform: translateX(-34%) rotate(-3deg) scale(1.07); }
@keyframes float { 50% { translate: 0 -10px; } }

.choice__body { display: grid; gap: .55rem; padding: 1.5rem 1.75rem 1.75rem; border-top: 1px solid var(--line); background: rgba(8, 9, 12, .35); }
.choice__tag { color: var(--accent); font-size: .6rem; font-weight: 700; letter-spacing: .22em; }
.choice__body strong { color: #f1eee7; font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; }
.choice__text { max-width: 30rem; color: #9a9ea8; font-size: .88rem; line-height: 1.55; }
.choice__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  justify-self: start;
  margin-top: .6rem;
  padding: .7rem 1.1rem;
  border-radius: .8rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: #fff2ed;
  font-size: .78rem;
  font-weight: 700;
  transition: background-color .25s ease, gap .25s ease;
}
.choice:hover .choice__cta { background: color-mix(in srgb, var(--accent) 32%, transparent); gap: .85rem; }

/* ---- footer (same as the sites) ---- */
.footer {
  width: min(1180px, calc(100% - 2rem));
  margin: 1rem auto 0;
  padding: 1.35rem 0 1.6rem;
  border-top: 1px solid var(--line);
  color: #686d78;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: center;
}
.footer__red, .footer__author { color: var(--red); transition: opacity .2s; }
.footer__red:hover, .footer__author:hover { opacity: .75; }

@media (max-width: 860px) {
  .choices { grid-template-columns: 1fr; }
  .choice { grid-template-rows: 14rem auto; }
  .home { padding-top: 6.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .art, .choice, .hero > * { animation: none; }
  .choice { transition: none; }
}

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.chips i {
  padding: .3rem .65rem;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .03);
  color: #b0b4bd;
  font-size: .64rem;
  font-style: normal;
  font-weight: 600;
}
.hero > * { animation: rise .7s cubic-bezier(.22, .8, .2, 1) both; }
.hero h1 { animation-delay: .08s; }
.hero p { animation-delay: .16s; }
.choice--tcg { animation-delay: .22s; }
.choice--peche { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

.choice__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .6rem; }
.choice__row .choice__cta { margin-top: 0; }
.choice__row .chips { margin-top: 0; }