/* Chromagi Game Studio — shared styles. Studio: Syne + Instrument Sans on black. Gabu page: the game's Bungee for game text. */
@font-face { font-family: "Bungee"; src: url("https://cdn.jsdelivr.net/npm/@fontsource/bungee@5/files/bungee-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Syne"; src: url("https://cdn.jsdelivr.net/npm/@fontsource/syne@5/files/syne-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Syne"; src: url("https://cdn.jsdelivr.net/npm/@fontsource/syne@5/files/syne-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("https://cdn.jsdelivr.net/npm/@fontsource/instrument-sans@5/files/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("https://cdn.jsdelivr.net/npm/@fontsource/instrument-sans@5/files/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --night: #000;         /* base: black */
  --dusk: #0f0f10;       /* raised bands */
  --veil: #2a2a2e;       /* lines, reel walls */
  --ink: #f4f4f5;        /* text */
  --haze: #9d9da6;       /* secondary text */
  --gold: #f5c451;       /* the staff, buttons */
  --fire: #ff6b3d; --water: #3fa9ff; --wind: #6fe3bf; --earth: #d2a55c;
  --chaos: linear-gradient(90deg, #ff3b5c, #ff9a3c, #ffe14d, #3cf0ff, #4d7dff, #ff3b5c);
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--night); color: var(--ink);
  font: 400 17px/1.6 "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: #fff; text-decoration-color: #ff2a5f; }
.gabu main a:not(.play-btn) { color: var(--gold); }
:focus-visible { outline: 3px solid #23dcff; outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
h2 { font: 800 clamp(32px, 5.4vw, 52px)/1.02 "Syne", sans-serif; margin: 0 0 18px; letter-spacing: -.01em; }
h3 { font: 700 21px/1.2 "Syne", sans-serif; margin: 0 0 8px; }
.gabu h2 { font: 400 clamp(30px, 5vw, 46px)/1.05 "Bungee", sans-serif; letter-spacing: .01em; }
.gabu h3 { font: 400 19px/1.2 "Bungee", sans-serif; }
p { margin: 0 0 14px; }
.muted { color: var(--haze); }

/* ---------- Wordmark: chromatic aberration ---------- */
.wordmark {
  font-family: "Syne", sans-serif; font-weight: 800; letter-spacing: .02em; color: #fff; line-height: 1; text-decoration: none;
  text-shadow: -2px 0 #ff2a5fd9, 2px 0 #23dcffd9; animation: aberr 5s ease-in-out infinite;
}
.wordmark small {
  display: block; font: 600 .3em "Instrument Sans", sans-serif; letter-spacing: .55em; margin-top: .5em;
}
@keyframes aberr {
  0%, 100% { text-shadow: -2px 0 #ff2a5fd9, 2px 0 #23dcffd9; }
  25% { text-shadow: -1px -1px #ffd02ad9, 1px 1px #2a6bffd9; }
  50% { text-shadow: 2px 0 #ff2a5fd9, -2px 0 #23dcffd9; }
  75% { text-shadow: 1px 1px #b42affd9, -1px -1px #2affb4d9; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(0, 0, 0, .82); backdrop-filter: blur(10px); }
.site-header::after { content: ""; display: block; height: 2px; background: var(--chaos); background-size: 200% 100%; animation: chaos 8s linear infinite; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 16px; }
.nav .wordmark { font-size: 22px; }
.nav .wordmark small { display: none; }
.nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.nav ul a { color: var(--haze); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav ul a:hover { color: var(--ink); }
@media (max-width: 520px) { .nav ul { gap: 14px; } .nav ul a { font-size: 13.5px; } .nav .wordmark { font-size: 17px; } }
@media (max-width: 380px) { .nav ul { gap: 10px; } .nav ul a { font-size: 13px; } .nav .wordmark { font-size: 15px; } }
@keyframes chaos { to { background-position: 200% 0; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; padding: 72px 0 88px;
  background:
    radial-gradient(55% 60% at 75% 45%, rgba(124, 82, 255, .20), transparent 70%),
    radial-gradient(35% 40% at 10% 90%, rgba(255, 107, 61, .10), transparent 70%),
    radial-gradient(35% 40% at 95% 5%, rgba(63, 169, 255, .10), transparent 70%);
}
.hero::before { /* faint star dust */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff9, transparent), radial-gradient(1px 1px at 38% 70%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 64% 14%, #fff8, transparent), radial-gradient(1px 1px at 82% 62%, #fff9, transparent),
    radial-gradient(1px 1px at 22% 84%, #fff7, transparent), radial-gradient(1.5px 1.5px at 92% 30%, #fff7, transparent),
    radial-gradient(1px 1px at 52% 40%, #fff6, transparent), radial-gradient(1px 1px at 6% 52%, #fff8, transparent);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero { padding: 44px 0 64px; } }

.title { font: 400 clamp(64px, 12vw, 132px)/.9 "Bungee", sans-serif; margin: 0 0 22px; letter-spacing: -.01em;
  text-shadow: -3px 0 rgba(255, 40, 90, .55), 3px 0 rgba(40, 220, 255, .55); }
.title span { display: block; font: 600 clamp(20px, 3vw, 28px)/1.2 "Instrument Sans", sans-serif; letter-spacing: .02em; margin-top: 12px; color: var(--haze); text-shadow: none; }
.lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--ink); max-width: 30ch; margin-bottom: 30px; }

.play-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 18px; border-radius: 14px;
  background: var(--ink); color: var(--night); text-decoration: none; font: 600 19px/1.15 "Instrument Sans", sans-serif;
}
.play-btn small { display: block; font-size: 12px; font-weight: 400; opacity: .7; }
.play-btn[aria-disabled="true"] { cursor: default; }
.play-btn:hover { color: var(--night); background: #fff; }

/* ---------- The staff ---------- */
.staff-wrap { max-width: 520px; width: 100%; justify-self: center; }
.staff {
  position: relative; border-radius: 28px; padding: 22px 22px 20px;
  background: linear-gradient(160deg, #1b1b20, #0a0a0c 60%);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
  isolation: isolate;
}
.staff::before { /* the chaos frame */
  content: ""; position: absolute; inset: -3px; border-radius: 31px; z-index: -1;
  background: var(--chaos); background-size: 300% 100%; animation: chaos 7s linear infinite;
}
.staff::after { content: ""; position: absolute; inset: 0; border-radius: 28px; z-index: -1; background: linear-gradient(160deg, #1b1b20, #0a0a0c 60%); }
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reel {
  aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; position: relative;
  background: linear-gradient(#050506, #19191e 50%, #050506);
  box-shadow: inset 0 0 0 1px var(--veil), inset 0 12px 18px -10px #000, inset 0 -12px 18px -10px #000;
}
.strip { position: absolute; inset: 0 0 auto 0; will-change: transform; }
.sym { height: 0; padding-bottom: 125%; position: relative; }
.sym svg { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; filter: drop-shadow(0 0 14px currentColor); }
.s-fire { color: var(--fire); } .s-water { color: var(--water); } .s-wind { color: var(--wind); } .s-earth { color: var(--earth); }

.spin {
  display: block; width: 100%; margin-top: 16px; padding: 16px; border: 0; border-radius: 16px; cursor: pointer;
  font: 400 24px/1 "Bungee", sans-serif; letter-spacing: .08em; color: var(--night);
  background: linear-gradient(#ffd977, var(--gold) 55%, #d99b25);
  box-shadow: 0 6px 0 #9c6a12, 0 14px 24px -8px rgba(245, 196, 81, .5);
  transition: transform .08s, box-shadow .08s;
}
.spin:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #9c6a12; }
.spin:disabled { cursor: progress; filter: saturate(.6) brightness(.85); }

.staff.win-asc { animation: flare 1.2s ease-out; }
@keyframes flare { 0% { box-shadow: 0 0 0 0 rgba(245, 196, 81, .9), 0 40px 90px -20px rgba(0,0,0,.6); } 100% { box-shadow: 0 0 0 40px rgba(245, 196, 81, 0), 0 40px 90px -20px rgba(0,0,0,.6); } }

.result { min-height: 128px; padding: 22px 6px 0; text-align: center; }
.spell { font: 400 clamp(22px, 3.4vw, 30px)/1.15 "Bungee", sans-serif; margin: 0 0 8px; color: var(--gold); transition: opacity .2s; }
.how { color: var(--haze); font-size: 16px; max-width: 44ch; margin: 0 auto; transition: opacity .2s; }
.dim { opacity: .25; }
.staff.win-asc + .result .spell { background: var(--chaos); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: chaos 3s linear infinite; }

/* ---------- Rules ---------- */
.rules { padding: 96px 0; background: var(--dusk); }
.rule-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
@media (max-width: 820px) { .rule-row { grid-template-columns: 1fr; gap: 34px; } }
.rule p { color: var(--haze); }
.mini { display: flex; gap: 6px; margin-bottom: 16px; }
.mini svg { width: 38px; height: 38px; padding: 6px; border-radius: 10px; background: var(--night); box-shadow: inset 0 0 0 1px var(--veil); }
.mini svg:has(use[href="#el-fire"]) { color: var(--fire); }
.mini svg:has(use[href="#el-water"]) { color: var(--water); }
.mini svg:has(use[href="#el-wind"]) { color: var(--wind); }
.mini svg:has(use[href="#el-earth"]) { color: var(--earth); }
.mini .odd { box-shadow: inset 0 0 0 2px var(--gold); }
.rules-foot { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--veil); font-size: 19px; max-width: 62ch; }

/* ---------- Realms ---------- */
.realms { padding: 96px 0 80px; }
.realms .sub { color: var(--haze); max-width: 58ch; }
.realm-strip {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 30px max(24px, calc((100vw - var(--max)) / 2 + 24px)) 10px;
  scroll-padding-inline: max(24px, calc((100vw - var(--max)) / 2 + 24px));
}
.realm-strip::-webkit-scrollbar { display: none; }
.realm { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; }
.realm .art {
  aspect-ratio: 4 / 5; border-radius: 22px; margin-bottom: 16px; position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.realm .art svg { width: 42%; height: 42%; filter: drop-shadow(0 0 28px currentColor); }
.realm p { color: var(--haze); font-size: 16px; }
.r-fire .art { color: #ffd2a8; background: radial-gradient(70% 50% at 50% 100%, #ff6b3d, transparent 70%), linear-gradient(#3a1410, #1c0b12); }
.r-water .art { color: #bfe6ff; background: radial-gradient(80% 45% at 50% 85%, #1f6fd1, transparent 70%), linear-gradient(#0b2246, #0b1027); }
.r-wind .art { color: #d9fff2; background: radial-gradient(60% 40% at 30% 25%, #6fe3bf88, transparent 70%), linear-gradient(#6aa7c9, #213d63); }
.r-earth .art { color: #ffe7b8; background: radial-gradient(60% 60% at 50% 55%, #8a6328, transparent 70%), linear-gradient(#3b2a14, #1a120a); }
.r-blokm .art { background: radial-gradient(60% 60% at 50% 50%, #2a2a33, transparent 70%), linear-gradient(#141418, #050506); }
.chaos-ring { width: 46%; aspect-ratio: 1; border-radius: 50%; padding: 6px; background: conic-gradient(#ff3b5c, #ff9a3c, #ffe14d, #3cf0ff, #4d7dff, #ff3b5c); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); animation: turn 9s linear infinite; filter: drop-shadow(0 0 18px #ffffff55); }
@keyframes turn { to { transform: rotate(1turn); } }

/* ---------- Studio & support ---------- */
.studio { padding: 90px 0; background: var(--dusk); }
.studio-grid, .support-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
@media (max-width: 760px) { .studio-grid, .support-grid { grid-template-columns: 1fr; gap: 18px; } }
.studio p, .support p { color: var(--haze); max-width: 60ch; }
.support { padding: 90px 0; }
.contact .mail { display: inline-block; font: 700 clamp(17px, 2.2vw, 24px)/1.2 "Syne", sans-serif; overflow-wrap: anywhere; margin-bottom: 14px; }
.contact p a { margin-right: 22px; font-weight: 600; }

/* ---------- Legal pages ---------- */
.legal { padding: 64px 0 90px; }
.legal .wrap { max-width: 760px; }
.legal .eyebrow { color: var(--haze); font-weight: 600; font-size: 15px; }
.legal h1 { font: 800 clamp(34px, 6vw, 52px)/1.02 "Syne", sans-serif; margin: 6px 0 8px; }
.legal .meta { color: var(--haze); font-size: 14px; margin-bottom: 30px; }
.legal h2 { font-size: 20px; margin: 38px 0 10px; }
.legal p, .legal li { color: #d4d4d8; }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }
.summary-box { background: var(--dusk); border-left: 4px solid #23dcff; border-radius: 12px; padding: 18px 22px; margin: 20px 0 10px; }
.summary-box p { margin: 0; color: var(--ink); }
.summary-box ul { margin: 8px 0 0; }
.btn { display: inline-block; padding: 14px 26px; border-radius: 999px; background: #fff; color: #000; font-weight: 600; text-decoration: none; }
.btn:hover { color: #000; background: #fff; box-shadow: -3px 0 0 #ff2a5f, 3px 0 0 #23dcff; text-decoration: none; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--veil); padding: 40px 0 50px; color: var(--haze); font-size: 14px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.foot .wordmark { font-size: 20px; }
.foot .wordmark small { font-size: 9px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot nav a { color: var(--haze); text-decoration: none; font-weight: 600; }
.foot nav a:hover { color: var(--ink); }
.foot .copy { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Studio home: the moving chromatic wordmark ---------- */
.s-hero { --dx: 0; --dy: 0; position: relative; overflow: hidden; padding: 120px 0 110px; background: #000; }
.big-mark { position: relative; margin: 0 0 40px; font: 800 min(110px, calc((100vw - 60px) / 9.6))/.95 "Syne", sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.big-mark .layer { display: block; }
.big-mark .r, .big-mark .c { position: absolute; inset: 0; mix-blend-mode: screen; transition: translate .3s ease-out; }
.big-mark .r { color: #ff2a5f; translate: calc(var(--dx) * -.05em) calc(var(--dy) * -.03em); animation: orbit-r 6s ease-in-out infinite, tint-r 8s linear infinite; }
.big-mark .c { color: #23dcff; translate: calc(var(--dx) * .05em) calc(var(--dy) * .03em); animation: orbit-c 6s ease-in-out infinite, tint-c 8s linear infinite; }
.big-mark .w { position: relative; color: #fff; mix-blend-mode: screen; }
@keyframes orbit-r { 0%, 100% { transform: translate(-.05em, 0); } 25% { transform: translate(-.015em, -.035em); } 50% { transform: translate(.045em, 0); } 75% { transform: translate(.015em, .035em); } }
@keyframes orbit-c { 0%, 100% { transform: translate(.05em, 0); } 25% { transform: translate(.015em, .035em); } 50% { transform: translate(-.045em, 0); } 75% { transform: translate(-.015em, -.035em); } }
@keyframes tint-r { 0%, 100% { color: #ff2a5f; } 33% { color: #ff8a1f; } 66% { color: #ff2ad4; } }
@keyframes tint-c { 0%, 100% { color: #23dcff; } 33% { color: #3b5bff; } 66% { color: #2affb0; } }
.s-lead { font: 600 clamp(22px, 3.2vw, 34px)/1.25 "Instrument Sans", sans-serif; max-width: 26ch; margin-bottom: 14px; letter-spacing: -.01em; }
.s-where { color: var(--haze); font-size: 18px; }

/* ---------- Studio home: craft ---------- */
.craft { padding: 90px 0; background: var(--dusk); }
.craft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 780px) { .craft-grid { grid-template-columns: 1fr; gap: 40px; } }
.craft h2 { font-size: clamp(24px, 3.4vw, 32px); }
.craft p { color: var(--haze); max-width: 46ch; }

/* ---------- Studio home: games ---------- */
.games { padding: 96px 0 90px; }
.feature-game {
  position: relative; display: grid; grid-template-columns: 1fr 1.15fr; margin-top: 30px; border-radius: 28px; overflow: hidden;
  background: #0b0b0d; isolation: isolate;
}
.feature-game::before { content: ""; position: absolute; inset: 0; border-radius: 28px; padding: 3px; z-index: -1;
  background: var(--chaos); background-size: 300% 100%; animation: chaos 7s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@media (max-width: 800px) { .feature-game { grid-template-columns: 1fr; } }
.fg-art { display: grid; place-items: center; padding: 40px 28px; background: radial-gradient(70% 70% at 50% 50%, rgba(124, 82, 255, .22), transparent 70%); }
.fg-reels { display: flex; gap: 12px; }
.fg-reels span { width: clamp(70px, 9vw, 104px); aspect-ratio: 4 / 5; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(#050506, #19191e 50%, #050506); box-shadow: inset 0 0 0 1px var(--veil); }
.fg-reels svg { width: 56%; height: 56%; filter: drop-shadow(0 0 14px currentColor); }
.fg-copy { padding: 40px 40px 42px 8px; }
@media (max-width: 800px) { .fg-copy { padding: 0 26px 32px; } }
.fg-status { color: var(--haze); font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.fg-copy h3 { font: 400 clamp(24px, 3.2vw, 34px)/1.05 "Bungee", sans-serif; margin-bottom: 14px; }
.fg-copy p { color: var(--haze); max-width: 50ch; }
.fg-copy .btn { margin-top: 10px; }
.games-more { color: var(--haze); margin-top: 26px; }

/* ---------- Gabu page: back to studio ---------- */
.from-studio { padding: 56px 0; background: var(--dusk); }
.from-studio p { color: var(--haze); max-width: 70ch; margin: 0; }