:root {
  --ink: #120704;
  --ink-2: #1b0b07;
  --brown: #35140b;
  --red: #7c1c16;
  --red-deep: #4a0e0b;
  --gold: #d8a94f;
  --gold-hi: #f4d187;
  --felt: #075a40;
  --felt-2: #043f2f;
  --cream: #f1ddba;
  --paper: #f6eddb;
  --muted: #bda88b;
  --line: rgba(216, 169, 79, .25);
  --shadow: 0 25px 80px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--cream); background: radial-gradient(circle at 50% 0%, #311309 0, var(--ink) 38%, #0d0503 100%); font-family: Inter, system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--gold); color: var(--ink); }

.noise { position: fixed; inset: 0; opacity: .18; pointer-events: none; z-index: 999; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; z-index: 0; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(218,168,73,.10), rgba(218,168,73,0) 67%); transition: opacity .25s; }

.topbar { position: fixed; inset: 0 0 auto; height: 74px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(18px, 4vw, 64px); z-index: 90; border-bottom: 1px solid transparent; transition: .28s ease; }
.topbar.scrolled { background: rgba(16, 6, 3, .86); backdrop-filter: blur(18px); border-color: var(--line); }
.brand { justify-self: start; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(216,169,79,.62); color: var(--gold-hi); transform: rotate(45deg); border-radius: 8px; background: rgba(18,7,4,.6); }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-family: Cinzel, serif; font-size: 17px; letter-spacing: .12em; }
.brand-copy small { color: var(--gold); font-size: 10px; letter-spacing: .26em; margin-top: 5px; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nav a { color: #d8c6a7; transition: color .2s; }
.nav a:hover { color: var(--gold-hi); }
.mini-cta { justify-self: end; border: 1px solid var(--gold); color: var(--gold-hi); padding: 11px 16px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .12em; background: rgba(18,7,4,.5); transition: .2s; }
.mini-cta:hover { background: var(--gold); color: var(--ink); }

.hero { min-height: 760px; height: 100svh; max-height: 980px; position: relative; overflow: hidden; display: flex; align-items: center; }
.hero-image { position: absolute; inset: 0; background-image: url('assets/casinu-banner.webp'); background-position: center; background-size: cover; transform: scale(1.03); filter: saturate(.95) contrast(1.03); }
.hero-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,4,2,.97) 0%, rgba(11,4,2,.84) 28%, rgba(11,4,2,.14) 56%, rgba(11,4,2,.42) 100%), linear-gradient(0deg, rgba(11,4,2,.95) 0%, transparent 31%, rgba(11,4,2,.34) 100%); }
.hero-content { position: relative; z-index: 2; width: min(720px, 47vw); margin-left: clamp(24px, 7vw, 120px); margin-top: 44px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--gold-hi); font-size: 11px; font-weight: 800; letter-spacing: .18em; padding: 9px 13px; border: 1px solid rgba(216,169,79,.42); border-radius: 999px; background: rgba(18,7,4,.42); backdrop-filter: blur(10px); }
.live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #dc4a36; box-shadow: 0 0 0 5px rgba(220,74,54,.12); animation: pulse 1.9s infinite; }
.hero h1 { font-family: Bebas Neue, sans-serif; font-size: clamp(108px, 14vw, 210px); line-height: .78; letter-spacing: -.015em; margin: 28px 0 22px; text-shadow: 0 13px 50px rgba(0,0,0,.48); }
.gold { color: var(--gold-hi); background: linear-gradient(180deg, #fff0b8 0%, #d8a94f 52%, #a56a1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-kicker { font-family: Cinzel, serif; font-size: clamp(18px, 2vw, 29px); font-weight: 800; letter-spacing: .035em; line-height: 1.24; margin: 0 0 18px; }
.hero-kicker em { color: var(--gold-hi); font-style: normal; }
.hero-copy { max-width: 630px; font-size: 14px; line-height: 1.8; color: #d3c0a2; margin: 0; }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.btn { min-width: 204px; height: 54px; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; padding: 0 18px; font-size: 11px; letter-spacing: .12em; font-weight: 900; border-radius: 5px; transition: transform .22s, background .22s, color .22s; }
.btn:hover { transform: translateY(-3px); }
.btn-gold { background: linear-gradient(135deg, var(--gold-hi), #bd7823); color: #1a0a05; box-shadow: 0 12px 34px rgba(216,169,79,.18); }
.btn-ghost { border: 1px solid rgba(241,221,186,.35); background: rgba(18,7,4,.4); backdrop-filter: blur(12px); }
.corner-card { position: absolute; right: 5vw; font-family: Cinzel, serif; width: 68px; height: 96px; background: var(--paper); color: #121212; border-radius: 8px; padding: 8px; font-weight: 800; box-shadow: var(--shadow); opacity: .92; }
.corner-card-a { bottom: 16%; transform: rotate(14deg); }
.corner-card-k { bottom: 12%; right: 9vw; color: #8b1712; transform: rotate(-11deg); }
.scroll-cue { position: absolute; z-index: 3; bottom: 25px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 9px; letter-spacing: .18em; font-weight: 800; color: #c7ad88; }
.scroll-cue i { font-style: normal; font-size: 18px; animation: bob 1.4s infinite ease-in-out; }

.ticker-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: #160805; padding: 13px 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 28s linear infinite; }
.ticker-track span { font-family: Cinzel, serif; color: var(--gold-hi); font-weight: 800; font-size: 12px; letter-spacing: .18em; padding: 0 28px; }

.section { position: relative; width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 120px 0; z-index: 1; }
.section-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 900; letter-spacing: .19em; color: var(--gold); margin-bottom: 22px; }
.section-tag::before { content: ''; width: 36px; height: 1px; background: var(--gold); margin-right: 11px; }

.lore-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(55px, 8vw, 118px); align-items: center; }
.portrait-wrap { position: relative; padding: 18px; }
.portrait-wrap::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold); transform: rotate(-2.5deg); opacity: .5; }
.portrait-frame { position: relative; overflow: hidden; border: 1px solid rgba(216,169,79,.55); background: #2a1008; box-shadow: var(--shadow); }
.portrait-frame img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(.08) saturate(.94); }
.portrait-frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(0,0,0,.38); pointer-events: none; }
.portrait-stamp { position: absolute; left: 20px; bottom: 20px; z-index: 2; border: 2px solid rgba(244,209,135,.82); color: var(--gold-hi); font-family: Bebas Neue, sans-serif; font-size: 24px; line-height: .84; letter-spacing: .07em; padding: 11px 13px 8px; transform: rotate(-5deg); background: rgba(18,7,4,.55); }
.chip { position: absolute; width: 54px; height: 54px; border-radius: 50%; border: 7px dashed rgba(255,255,255,.72); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.chip::after { content:''; position:absolute; inset:7px; border:2px solid rgba(255,255,255,.55); border-radius:50%; }
.chip-red { background:#8a201a; }.chip-green { background:#126a48; }.chip-blue { background:#24517d; }
.c1 { right:-13px; top:11%; transform:rotate(17deg); }.c2 { right:4%; bottom:-22px; }.c3 { left:-11px; bottom:18%; transform:rotate(-21deg); }
.lore-copy .overline { color: #a99376; font-size: 10px; letter-spacing: .18em; font-weight: 800; }
.lore-copy h2, .section-head h2, .cta h2 { font-family: Cinzel, serif; font-size: clamp(42px, 5.4vw, 78px); line-height: .98; letter-spacing: -.035em; margin: 10px 0 26px; }
.lore-copy > p:not(.overline) { color: #cdb89a; line-height: 1.8; font-size: 15px; max-width: 650px; }
.lore-copy strong { color: #f0d7aa; }
.quote-card { margin-top: 34px; border-left: 2px solid var(--gold); padding: 4px 0 4px 22px; position: relative; }
.quote-card > span { position: absolute; right: 7%; top: -35px; font-family: Georgia, serif; color: rgba(216,169,79,.22); font-size: 110px; }
.quote-card p { font-family: Cinzel, serif; font-size: 18px; line-height: 1.5; margin: 0 0 8px; position: relative; z-index:1; }
.quote-card b { font-size: 10px; letter-spacing: .12em; color: var(--gold); }

.rules { width: min(1370px, calc(100% - 40px)); }
.section-head { max-width: 850px; margin-bottom: 52px; }
.section-head p { color: #a99478; max-width: 640px; line-height: 1.7; }
.rule-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rule-card { min-height: 290px; padding: 26px; border: 1px solid rgba(255,255,255,.08); position: relative; overflow: hidden; transition: transform .25s ease, border-color .25s ease; }
.rule-card:hover { transform: translateY(-8px); border-color: rgba(216,169,79,.48); }
.rule-card::after { content:''; position:absolute; width:180px; height:180px; border-radius:50%; right:-70px; bottom:-80px; border:1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 22px rgba(255,255,255,.02), 0 0 0 44px rgba(255,255,255,.018); }
.rule-card.red { background: linear-gradient(145deg, #721811, #2a0c08); }.rule-card.black { background: linear-gradient(145deg, #1e1e1b, #090907); }.rule-card.gold-card { background: linear-gradient(145deg, #7b581d, #251706); }.rule-card.green { background: linear-gradient(145deg, #0c5e41, #06261c); }
.rule-card .suit { font-size: 54px; display:block; margin-bottom: 46px; line-height: 1; color: rgba(255,255,255,.8); }
.rule-card small { font-size: 9px; letter-spacing:.18em; color: rgba(255,255,255,.55); font-weight:800; }
.rule-card h3 { font-family: Bebas Neue, sans-serif; font-size: 38px; letter-spacing:.035em; margin: 8px 0 6px; }
.rule-card p { font-size: 12px; line-height:1.65; color: rgba(255,255,255,.68); margin:0; max-width: 250px; }

.chart-section { width: min(1370px, calc(100% - 40px)); }
.chart-shell { background: #090806; border: 1px solid rgba(216,169,79,.36); box-shadow: var(--shadow); position: relative; }
.chart-shell::before { content:''; position:absolute; inset:-9px; border:1px solid rgba(216,169,79,.12); pointer-events:none; }
.chart-topline { min-height: 100px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 20px 27px; border-bottom:1px solid rgba(216,169,79,.2); background:linear-gradient(90deg,#160a05,#0a0907); }
.chart-topline > div { display:grid; grid-template-columns:auto auto; column-gap:9px; align-items:center; }
.chart-topline small { font-size:9px; letter-spacing:.18em; font-weight:900; color:#b79d79; }
.chart-topline h2 { grid-column: 1/-1; font-family:Cinzel,serif; margin:4px 0 0; font-size:24px; letter-spacing:.03em; }
.dex-link { font-size:10px; letter-spacing:.14em; font-weight:900; color:var(--gold-hi); border:1px solid rgba(216,169,79,.42); padding:12px 15px; }
.chart-frame { position:relative; height: min(680px, 70vh); min-height: 500px; overflow:hidden; background:#111; }
.chart-frame iframe { width:100%; height:100%; border:0; display:block; }
.chart-corner { position:absolute; width:54px; height:54px; background:rgba(18,7,4,.94); border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold-hi); font-size:22px; pointer-events:none; }
.chart-corner.tl { left:12px; top:12px; }.chart-corner.br { right:12px; bottom:12px; color:#b42a20; transform:rotate(180deg); }
.chart-footer { display:flex; justify-content:space-between; gap:20px; padding:15px 24px; background:#140905; border-top:1px solid rgba(216,169,79,.17); font-size:9px; letter-spacing:.16em; color:#8e7b62; }
.chart-footer b { color:#d7c4a2; }
.chart-footer button { border:0; background:none; color:inherit; font:inherit; padding:0; cursor:pointer; }
.chart-footer button:hover b { color:var(--gold-hi); }
.chart-footer i { font-style:normal; color:var(--gold); }

.roadmap { width: min(1370px, calc(100% - 40px)); }
.roadmap-table { position:relative; padding: 44px; background: radial-gradient(circle at 50% 40%, #0d6a4b 0, var(--felt) 48%, var(--felt-2) 100%); border: 12px solid #3a190c; outline: 1px solid #8a5e27; border-radius: 120px; box-shadow: inset 0 0 70px rgba(0,0,0,.35), var(--shadow); display:grid; grid-template-columns: repeat(5,1fr); gap:15px; overflow:hidden; }
.felt-lines { position:absolute; inset:25px; border:1px solid rgba(225,191,113,.28); border-radius:96px; pointer-events:none; }
.felt-lines::before { content:'CASINU · HOUSE TABLE · ALL INU'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap; font-family:Cinzel,serif; font-size:clamp(18px,2vw,31px); color:rgba(238,220,174,.075); letter-spacing:.15em; }
.road-card { position:relative; z-index:1; background:rgba(5,31,22,.75); border:1px solid rgba(247,224,178,.18); backdrop-filter:blur(8px); padding:17px; min-height:330px; display:flex; flex-direction:column; gap:20px; border-radius:16px; transition:.25s; }
.road-card:hover, .road-card.active { background:rgba(17,43,30,.92); border-color:rgba(244,209,135,.52); transform:translateY(-6px); }
.playing-card { width:88px; height:122px; border-radius:8px; background:var(--paper); color:#111; box-shadow:0 10px 24px rgba(0,0,0,.25); padding:8px; display:grid; grid-template-rows:auto 1fr auto; font-family:Cinzel,serif; font-weight:800; transition: transform .25s; }
.road-card:hover .playing-card { transform:rotate(-5deg) translateY(-3px); }
.playing-card span { align-self:center; justify-self:center; font-size:35px; }
.playing-card i { justify-self:end; transform:rotate(180deg); font-style:normal; }
.playing-card.red-suit { color:#9a1912; }
.playing-card.joker { background:linear-gradient(135deg,#f7e9c5,#d9ad55); color:#3a180b; }
.playing-card.joker span { font-size:14px; letter-spacing:.1em; }
.road-card small { color:#e2c785; font-size:9px; letter-spacing:.16em; font-weight:900; }
.road-card h3 { font-family:Bebas Neue,sans-serif; font-size:34px; letter-spacing:.04em; margin:5px 0 8px; }
.road-card p { font-size:12px; line-height:1.65; color:#b9cfc4; margin:0; }
.road-card.finale { background:rgba(94,54,13,.45); }

.cta { width:min(1370px, calc(100% - 40px)); padding-bottom: 140px; }
.cta-panel { min-height:520px; border:1px solid rgba(216,169,79,.42); background: linear-gradient(112deg, rgba(77,17,11,.95), rgba(21,8,5,.98) 52%, rgba(5,58,41,.92)); padding:clamp(36px,6vw,82px); display:grid; grid-template-columns:1.1fr .9fr; align-items:center; overflow:hidden; position:relative; }
.cta-panel::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 72% 50%, rgba(239,189,91,.17), transparent 28%); }
.cta-copy { position:relative; z-index:2; }
.cta-copy > p { color:#c5af90; line-height:1.7; max-width:560px; }
.social-row { display:flex; gap:10px; margin-top:30px; flex-wrap:wrap; }
.social-btn { width:170px; min-height:74px; border:1px solid rgba(216,169,79,.27); padding:14px 15px; display:flex; flex-direction:column; justify-content:space-between; background:rgba(11,5,3,.35); transition:.22s; }
.social-btn:hover { transform:translateY(-4px); border-color:var(--gold); background:rgba(216,169,79,.08); }
.social-btn b { font-family:Cinzel,serif; font-size:12px; }
.social-btn span { color:#9d876b; font-size:8px; letter-spacing:.15em; font-weight:900; }
.cta-art { min-height:350px; position:relative; z-index:1; }
.big-chip { position:absolute; width:250px; height:250px; left:50%; top:48%; transform:translate(-50%,-50%) rotate(-8deg); border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle,#123d2e 0 48%,#e3bd67 49% 53%,#0b2c22 54% 69%,#e3bd67 70% 74%,#0b2c22 75%); box-shadow:0 25px 60px rgba(0,0,0,.45); border:8px dashed #f3dfad; color:#f6e7bf; font-family:Bebas Neue,sans-serif; font-size:34px; letter-spacing:.06em; }
.big-chip span { font-size:46px; }
.fan-card { position:absolute; width:115px; height:160px; padding:12px; border-radius:10px; background:var(--paper); color:#151515; font-family:Cinzel,serif; font-weight:800; font-size:23px; border:1px solid #c9a661; box-shadow:0 14px 36px rgba(0,0,0,.32); left:50%; top:50%; transform-origin:50% 120%; }
.fc1 { transform:translate(-50%,-58%) rotate(-33deg) translateY(-120px); }.fc2 { color:#991e17; transform:translate(-50%,-58%) rotate(-11deg) translateY(-145px); }.fc3 { transform:translate(-50%,-58%) rotate(11deg) translateY(-145px); }.fc4 { color:#991e17; transform:translate(-50%,-58%) rotate(33deg) translateY(-120px); }

footer { border-top:1px solid var(--line); padding:36px clamp(20px,5vw,75px); display:grid; grid-template-columns:1fr minmax(300px,680px) 1fr; gap:30px; align-items:center; background:#0b0402; color:#7e6d59; }
.footer-brand { display:grid; grid-template-columns:auto auto; align-items:center; justify-self:start; column-gap:9px; }
.footer-brand span { grid-row:1/3; color:var(--gold); font-size:26px; }
.footer-brand strong { font-family:Cinzel,serif; color:#d7be91; font-size:13px; letter-spacing:.12em; }
.footer-brand small { font-size:8px; letter-spacing:.18em; }
footer p { font-size:10px; line-height:1.6; text-align:center; margin:0; }
.footer-links { justify-self:end; display:flex; gap:15px; font-size:9px; font-weight:900; letter-spacing:.16em; color:#bca37d; }
.footer-links a:hover { color:var(--gold-hi); }

.reveal { opacity:0; transform:translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@keyframes pulse { 0%,100%{ box-shadow:0 0 0 5px rgba(220,74,54,.10) } 50%{ box-shadow:0 0 0 9px rgba(220,74,54,.02) } }
@keyframes bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }
@keyframes ticker { to{ transform:translateX(-50%) } }

@media (max-width: 1080px) {
  .nav { display:none; }
  .topbar { grid-template-columns:1fr 1fr; }
  .hero-content { width:min(670px, 76vw); margin-left:6vw; }
  .hero-vignette { background:linear-gradient(90deg,rgba(11,4,2,.97) 0,rgba(11,4,2,.82) 44%,rgba(11,4,2,.32) 100%),linear-gradient(0deg,rgba(11,4,2,.92),transparent 38%); }
  .rule-grid { grid-template-columns:repeat(2,1fr); }
  .roadmap-table { grid-template-columns:repeat(2,1fr); border-radius:70px; }
  .road-card.finale { grid-column:1/-1; min-height:250px; display:grid; grid-template-columns:110px 1fr; align-items:center; }
  .cta-panel { grid-template-columns:1fr; }
  .cta-art { margin-top:30px; }
  footer { grid-template-columns:1fr; text-align:center; }
  .footer-brand,.footer-links { justify-self:center; }
}

@media (max-width: 720px) {
  .topbar { height:64px; padding:0 15px; }
  .brand-copy { display:none; }
  .mini-cta { font-size:9px; padding:10px 12px; }
  .hero { min-height:820px; align-items:flex-end; padding-bottom:85px; }
  .hero-image { background-position:58% center; }
  .hero-vignette { background:linear-gradient(0deg,rgba(11,4,2,.98) 0%,rgba(11,4,2,.89) 47%,rgba(11,4,2,.28) 78%,rgba(11,4,2,.28) 100%); }
  .hero-content { width:auto; margin:0 20px; }
  .hero h1 { font-size:108px; margin:20px 0 16px; }
  .hero-copy { font-size:13px; line-height:1.65; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .btn { width:100%; }
  .corner-card { display:none; }
  .scroll-cue { display:none; }
  .section { width:min(100% - 28px,1240px); padding:85px 0; }
  .lore-grid { grid-template-columns:1fr; gap:48px; }
  .portrait-wrap { padding:9px; }
  .lore-copy h2,.section-head h2,.cta h2 { font-size:43px; }
  .rule-grid { grid-template-columns:1fr; }
  .rule-card { min-height:225px; }
  .rule-card .suit { margin-bottom:28px; }
  .chart-topline { align-items:flex-start; flex-direction:column; }
  .chart-frame { min-height:530px; height:65vh; }
  .chart-footer { flex-direction:column; gap:9px; }
  .roadmap-table { grid-template-columns:1fr; border-width:8px; border-radius:38px; padding:24px; }
  .road-card, .road-card.finale { grid-column:auto; min-height:unset; display:grid; grid-template-columns:92px 1fr; align-items:center; }
  .playing-card { width:76px; height:108px; }
  .cta-panel { padding:34px 24px; }
  .social-row { display:grid; grid-template-columns:1fr; }
  .social-btn { width:100%; }
  .cta-art { min-height:330px; transform:scale(.82); }
  footer { padding:32px 20px; }
}

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