/* =========================================================
   SUMMIT SLOTS — Landing (royal blue + gold slots theme)
   Free-play social casino slots · virtual credits only · 18+
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #0a1240;
  --bg-2: #0e1a56;
  --bg-3: #122067;
  --panel: rgba(255,255,255,0.05);
  --panel-2: rgba(10,18,64,0.72);
  --line: rgba(255,255,255,0.10);

  --gold: #ffcc33;
  --gold-2: #ffe08a;
  --gold-deep: #f5a623;
  --grad-gold: linear-gradient(180deg, #ffe58a 0%, #ffcc33 45%, #f0a91e 100%);

  --green: #57d33f;
  --grad-green: linear-gradient(180deg, #7ff05f, #47c62f);
  --pink: #ff4fa3;
  --grad-pink: linear-gradient(180deg, #ff77bd, #f0348e);
  --purple: #9b5cff;
  --cyan: #35d0ff;
  --magenta: #ff4d8d;

  --txt: #ffffff;
  --txt-dim: #c3cdf2;
  --txt-faint: #8a97cf;

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-gold: 0 8px 0 #b9781a, 0 16px 34px -10px rgba(0,0,0,.6);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg); color: var(--txt); line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1,h2,h3,h4 { font-family: 'Fredoka', sans-serif; line-height: 1.08; font-weight: 700; letter-spacing: .01em; }
::selection { background: var(--gold); color: #08122e; }

/* ---------- Ambient background ---------- */
.bg-fx { position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(155,92,255,.28), transparent 60%),
    radial-gradient(900px 620px at 10% 110%, rgba(53,208,255,.16), transparent 60%),
    radial-gradient(700px 520px at 100% 60%, rgba(255,204,51,.10), transparent 60%),
    linear-gradient(180deg, #0a1240 0%, #0c1650 60%, #0a1038 100%);
}
.bg-stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity:.5;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,224,138,.8), transparent),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 90% 55%, rgba(53,208,255,.7), transparent);
  background-size: 600px 600px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
section { position: relative; }
.section-pad { padding: 60px 0; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:16px; cursor:pointer;
  padding: 14px 30px; border-radius: 16px; border: 2px solid rgba(0,0,0,.15);
  transition: transform .12s var(--ease), filter .2s; white-space: nowrap; text-transform: uppercase; letter-spacing:.02em; }
.btn:active { transform: translateY(3px); }
.btn-play { background: var(--grad-green); color: #08300a; border-color: #2f8f1e;
  box-shadow: 0 6px 0 #2f8f1e, 0 14px 28px -8px rgba(87,211,63,.5); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.btn-play:hover { filter: brightness(1.06); }
.btn-play:active { box-shadow: 0 3px 0 #2f8f1e, 0 10px 20px -8px rgba(87,211,63,.5); }
.btn-gold { background: var(--grad-gold); color:#5b3b00; border-color:#c88a15;
  box-shadow: 0 6px 0 #c88a15, 0 14px 28px -8px rgba(245,166,35,.5); }
.btn-gold:active { box-shadow: 0 3px 0 #c88a15, 0 10px 20px -8px rgba(245,166,35,.5); }
.btn-lg { padding: 17px 40px; font-size: 19px; border-radius: 18px; }

/* ---------- Pills ---------- */
.pill { display:inline-flex; align-items:center; gap:8px; font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; color: var(--gold-2);
  padding: 7px 15px; border-radius: 999px; border:1px solid rgba(255,204,51,.4); background: rgba(255,204,51,.08); }
.pill .dot { width:8px;height:8px;border-radius:50%;background:var(--green); box-shadow:0 0 10px var(--green); }

/* ---------- Header ---------- */
.site-header { position: fixed; top:0; left:0; right:0; z-index: 100; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent; }
.site-header.scrolled { background: rgba(8,15,52,.82); backdrop-filter: blur(16px); border-bottom-color: rgba(255,204,51,.18); }
.nav { display:flex; align-items:center; justify-content:space-between; height: 74px; }
.brand { display:flex; align-items:center; gap:11px; font-family:'Fredoka',sans-serif; font-weight:700; font-size:22px; white-space:nowrap; }
.brand .mark { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:22px;
  background: var(--grad-gold); box-shadow: 0 4px 0 #c88a15, 0 0 18px rgba(255,204,51,.5); }
.brand .wm { background: var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 2px 6px rgba(0,0,0,.3); }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a { font-family:'Fredoka',sans-serif; font-weight:500; font-size:15px; color: var(--txt-dim); padding:9px 14px; border-radius:10px; transition:.2s; }
.nav-links a:hover { color:#fff; background: rgba(255,255,255,.06); }
.nav-cta { display:flex; align-items:center; gap:12px; }
.nav-cta .btn { padding: 11px 22px; font-size: 14px; }
.nav-toggle { display:none; background:none; border:1px solid rgba(255,204,51,.35); border-radius:10px; width:44px; height:44px; cursor:pointer; color: var(--gold); }
.nav-toggle span { display:block; width:20px; height:2px; background: currentColor; margin:4px auto; }

/* ---------- Hero ---------- */
.hero { padding: 122px 0 50px; }
.hero-grid { display:grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items:center; }
.hero h1 { font-size: clamp(38px, 6vw, 66px); line-height:1.02; margin: 16px 0 16px; }
.hero h1 .gold { background: var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead { font-size: 18px; color: var(--txt-dim); max-width: 500px; margin-bottom: 26px; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-badges { display:flex; gap:18px; flex-wrap:wrap; margin-top: 24px; }
.hero-badges .b { display:flex; align-items:center; gap:8px; font-size:13.5px; color: var(--txt-dim); font-weight:500; }
.hero-badges .b i { color: var(--gold); font-style:normal; font-size:15px; }

/* Gold framed screen */
.screen-frame { position: relative; border-radius: 22px; padding: 10px;
  background: linear-gradient(180deg,#ffe58a,#f0a91e); box-shadow: 0 24px 60px -18px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.15) inset;
  transform: rotate(-1.2deg); }
.screen-frame img { border-radius: 14px; display:block; width:100%; }
.screen-frame.flat { transform: none; }
.hero-visual { position: relative; }
.hero-visual .float-badge { position:absolute; bottom:-14px; left:-14px; z-index:3; background: var(--grad-pink); color:#fff;
  font-family:'Fredoka'; font-weight:700; font-size:14px; padding:10px 18px; border-radius: 14px; border:2px solid #c8266f;
  box-shadow: 0 6px 0 #c8266f, 0 12px 24px -8px rgba(0,0,0,.5); transform: rotate(-4deg); }

/* ---------- Marquee ---------- */
.marquee { border-top:1px solid rgba(255,204,51,.18); border-bottom:1px solid rgba(255,204,51,.18); padding: 13px 0; overflow:hidden; background: rgba(255,204,51,.05); }
.marquee-track { display:flex; gap:44px; white-space:nowrap; width:max-content; animation: scroll 26s linear infinite; }
.marquee-track span { font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; color: var(--gold-2); display:flex; align-items:center; gap:12px; letter-spacing:.04em; text-transform:uppercase; }
.marquee-track span::before { content:"⛰"; font-size:13px; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Section heading ---------- */
.sec-head { max-width: 680px; margin: 0 auto 36px; text-align:center; }
.sec-head h2 { font-size: clamp(28px, 4.4vw, 46px); margin: 12px 0 12px; }
.sec-head h2 .gold { background: var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sec-head p { color: var(--txt-dim); font-size: 16.5px; }

/* ---------- Slot rooms ---------- */
.rooms { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.room { border-radius:18px; padding:10px; background: linear-gradient(180deg,#ffe58a,#e59a12); box-shadow: 0 10px 26px -10px rgba(0,0,0,.6); }
.room-inner { border-radius:12px; background: linear-gradient(180deg,#14235f,#0c1544); border:1px solid rgba(255,255,255,.08); padding:16px 14px 18px; text-align:center; position:relative; overflow:hidden; }
.room .badge { display:inline-block; font-family:'Fredoka'; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:5px 14px; border-radius:8px; margin-bottom:12px; }
.room .badge.play { background: var(--grad-green); color:#08300a; }
.room .badge.locked { background: linear-gradient(180deg,#3a4a86,#243363); color:#c3cdf2; }
.room .badge.soon { background: linear-gradient(180deg,#2b60d6,#1c3f9e); color:#dbe6ff; }
.room .art { height: 120px; border-radius:10px; margin-bottom:12px; display:grid; place-items:center; font-size:52px;
  background: radial-gradient(circle at 50% 40%, rgba(155,92,255,.4), rgba(10,18,64,.6)); border:1px solid rgba(255,255,255,.08); }
.room h3 { font-size:19px; }
.room .req { font-family:'Fredoka'; font-size:12.5px; color: var(--gold-2); margin-top:5px; }
.room .req.grey { color: var(--txt-faint); }

/* ---------- Screenshot showcase ---------- */
.shots { display:grid; grid-template-columns: 1fr 1fr; gap:26px; align-items:start; }
.shot .cap { text-align:center; margin-top:14px; font-family:'Fredoka'; font-weight:600; color: var(--gold-2); font-size:15px; }

/* ---------- Bento features ---------- */
.bento { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.card { position:relative; padding:24px; border-radius:16px; background: var(--panel); border:1px solid rgba(255,204,51,.16);
  transition: transform .3s var(--ease), border-color .3s, background .3s; }
.card:hover { transform: translateY(-5px); border-color: rgba(255,204,51,.5); background: rgba(255,255,255,.07); }
.card .ic { width:52px; height:52px; border-radius:13px; display:grid; place-items:center; margin-bottom:15px; font-size:26px;
  background: rgba(255,204,51,.12); border:1px solid rgba(255,204,51,.3); }
.card h3 { font-size:20px; margin-bottom:7px; }
.card p { color: var(--txt-dim); font-size:14.5px; }
.bento .card:nth-child(1), .bento .card:nth-child(6) { grid-column: span 1; }

/* ---------- Steps ---------- */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.step { text-align:center; padding:24px 18px; border-radius:16px; border:1px solid rgba(255,204,51,.16); background: var(--panel); }
.step .n { width:52px; height:52px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; font-family:'Fredoka'; font-weight:700; font-size:24px; color:#5b3b00; background: var(--grad-gold); box-shadow: 0 4px 0 #c88a15; }
.step h3 { font-size:18px; margin-bottom:6px; }
.step p { color: var(--txt-dim); font-size:14px; }

/* ---------- Rewards row ---------- */
.rewards { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.reward { min-width: 110px; text-align:center; padding:16px 12px; border-radius:14px; background: linear-gradient(180deg,#14235f,#0c1544); border:2px solid rgba(255,204,51,.35); }
.reward .amt { font-family:'Fredoka'; font-weight:700; font-size:22px; color: var(--gold-2); display:flex; align-items:center; justify-content:center; gap:6px; }
.reward .amt .c { width:20px;height:20px;border-radius:50%;background:var(--grad-gold);display:inline-grid;place-items:center;font-size:10px;color:#5b3b00; }
.reward .day { font-family:'Fredoka'; font-size:12px; color: var(--txt-faint); text-transform:uppercase; margin-top:4px; letter-spacing:.08em; }
.reward.hot { border-color: var(--pink); box-shadow: 0 0 22px rgba(255,79,163,.35); }

/* ---------- Two-card compliance ---------- */
.split2 { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.split2 .card { text-align:center; }
.split2 .card .ic { margin:0 auto 15px; }

/* ---------- FAQ ---------- */
.faq { max-width:780px; margin:0 auto; display:grid; gap:12px; }
.faq details { border:1px solid rgba(255,204,51,.18); border-radius:14px; background: var(--panel); overflow:hidden; transition: border-color .3s, background .3s; }
.faq details[open] { border-color: rgba(255,204,51,.45); background: rgba(255,255,255,.06); }
.faq summary { list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:'Fredoka'; font-weight:600; font-size:16.5px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color: var(--gold-2); }
.faq summary .chev { width:10px;height:10px;border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold); transform:rotate(45deg); transition: transform .3s; flex:none; margin-top:-4px; }
.faq details[open] summary .chev { transform: rotate(-135deg); margin-top:2px; }
.faq .ans { padding:0 22px 20px; color: var(--txt-dim); font-size:14.5px; line-height:1.75; }

/* ---------- CTA band ---------- */
.cta-band { text-align:center; padding:54px 34px; border-radius:24px; position:relative; overflow:hidden;
  background: linear-gradient(160deg, rgba(155,92,255,.25), rgba(53,208,255,.12)); border:2px solid rgba(255,204,51,.35); }
.cta-band::before { content:""; position:absolute; width:520px;height:520px;border-radius:50%; background: var(--grad-gold); filter: blur(130px); opacity:.22; top:-220px; left:50%; transform: translateX(-50%); }
.cta-band h2 { font-size: clamp(28px,4vw,46px); position:relative; }
.cta-band p { color: var(--txt-dim); font-size:17px; margin:12px auto 24px; max-width:540px; position:relative; }
.cta-band .hero-cta { justify-content:center; position:relative; }

/* ---------- Disclaimer ---------- */
.disclaimer { border:1px solid rgba(255,255,255,.1); border-radius:14px; background: rgba(0,0,0,.2); padding:22px 24px; }
.disclaimer .age { display:inline-flex; align-items:center; gap:10px; font-family:'Fredoka'; font-weight:700; color: var(--gold-2); margin-bottom:10px; }
.disclaimer .age .p { width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:rgba(255,204,51,.12);border:1px solid rgba(255,204,51,.4);font-size:14px; }
.disclaimer p { color: var(--txt-faint); font-size:13.5px; line-height:1.7; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid rgba(255,204,51,.16); padding:36px 0 26px; margin-top:8px; background: rgba(0,0,0,.25); }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--line); }
.footer-links { display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a { color: var(--txt-dim); font-size:14px; }
.footer-links a:hover { color: var(--gold-2); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:20px; color: var(--txt-faint); font-size:12.5px; flex-wrap:wrap; }

/* ---------- Reveal ---------- */
.reveal { opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; margin: 6px auto 0; }
  .rooms { grid-template-columns: repeat(2,1fr); }
  .bento, .steps { grid-template-columns: repeat(2,1fr); }
  .shots { grid-template-columns: 1fr; }
  .nav-links, .nav-cta .btn { display:none; }
  .nav-toggle { display:block; }
  .nav-links.open { display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:stretch; padding:14px 22px 22px; background: rgba(8,15,52,.98); backdrop-filter: blur(16px); border-bottom:1px solid rgba(255,204,51,.2); gap:4px; }
  .nav-links.open a { padding:13px 14px; }
}
@media (max-width: 560px) {
  .section-pad { padding: 44px 0; }
  .rooms, .bento, .steps, .split2 { grid-template-columns: 1fr; }
  .hero { padding: 100px 0 40px; }
  .footer-top { flex-direction:column; align-items:flex-start; }
}

/* =======================================================
   ENTER-THE-GAME redesign
   ======================================================= */

/* HUD top bar (game-style) */
.hud { position: fixed; top:0; left:0; right:0; z-index:100; transition: background .3s, border-color .3s; border-bottom: 2px solid transparent; }
.hud.scrolled { background: linear-gradient(180deg, rgba(10,18,64,.97), rgba(10,18,64,.85)); backdrop-filter: blur(14px); border-bottom-color: rgba(255,204,51,.4); }
.hud-inner { display:flex; align-items:center; justify-content:space-between; height:70px; }
.hud .brand { display:flex; align-items:center; gap:11px; }
.hud .brand img.ic { height:44px; width:44px; border-radius:12px; box-shadow:0 0 16px rgba(255,204,51,.45); }
.hud .brand .wm { font-family:'Fredoka'; font-weight:700; font-size:23px; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hud-right { display:flex; align-items:center; gap:14px; }
.hud .coinchip { display:flex; align-items:center; gap:8px; padding:6px 15px 6px 6px; border-radius:999px; background: rgba(0,0,0,.4); border:2px solid rgba(255,204,51,.5); font-family:'Fredoka'; font-weight:700; font-size:15px; color:var(--gold-2); }
.hud .coinchip .c { width:26px;height:26px;border-radius:50%;background:var(--grad-gold);display:grid;place-items:center;font-size:12px;color:#5b3b00; box-shadow:0 0 10px rgba(255,204,51,.5); }
.hud .lvl { font-family:'Fredoka'; font-weight:600; font-size:13px; color:#cdd8ff; }
@media(max-width:680px){ .hud .coinchip, .hud .lvl { display:none; } }

/* Immersive full-screen hero */
.hero-full { position: relative; min-height: 100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding: 96px 20px 60px; overflow:hidden; }
.hero-full .bg { position:absolute; inset:0; z-index:0; background: url('../img/mountain-bg.webp') center 30%/cover no-repeat; }
.hero-full .bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,18,64,.5) 0%, rgba(10,18,64,.28) 38%, rgba(10,18,64,.9) 100%); }
.hero-full .inner { position:relative; z-index:2; max-width: 780px; }
.hero-full .kicker { display:inline-flex; align-items:center; gap:9px; font-family:'Fredoka'; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); font-size:13px; margin-bottom:16px; padding:7px 16px; border-radius:999px; border:1px solid rgba(255,204,51,.45); background:rgba(0,0,0,.3); }
.hero-full .kicker .dot{ width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green); }
.hero-full h1 { font-size: clamp(44px, 8.5vw, 96px); line-height:.94; text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 16px 44px rgba(0,0,0,.6); }
.hero-full h1 .gold { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-full .sub { font-size: clamp(17px,2.4vw,21px); color:#e9edff; margin: 18px auto 32px; max-width: 560px; text-shadow:0 2px 12px rgba(0,0,0,.7); }
.play-glow { font-size: 22px !important; padding: 20px 56px !important; border-radius: 22px !important; animation: pulseBtn 1.9s ease-in-out infinite; }
@keyframes pulseBtn { 0%,100%{ transform: scale(1); box-shadow: 0 8px 0 #2f8f1e, 0 0 0 rgba(120,240,95,0);} 50%{ transform: scale(1.045); box-shadow: 0 8px 0 #2f8f1e, 0 0 46px rgba(120,240,95,.7);} }
.hero-full .ribbon { margin-top: 26px; display:flex; flex-wrap:wrap; justify-content:center; gap: 8px 20px; font-family:'Fredoka'; font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#d5deff; }
.hero-full .ribbon span { display:flex; align-items:center; gap:7px; }
.hero-full .ribbon span::before{ content:"●"; color:var(--gold); font-size:8px; }
.mascot-hero { position:absolute; z-index:3; bottom:-8px; left: 2%; width: clamp(150px, 21vw, 290px); filter: drop-shadow(0 16px 30px rgba(0,0,0,.55)); animation: bobf 4s ease-in-out infinite; pointer-events:none; }
@keyframes bobf { 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-16px) rotate(-2deg);} }
.scroll-cue { position:absolute; bottom: 20px; left:50%; z-index:4; width:22px; height:22px; border-right:3px solid var(--gold); border-bottom:3px solid var(--gold); transform: translateX(-50%) rotate(45deg); animation: cue 1.6s infinite; opacity:.85; }
@keyframes cue { 0%,100%{ margin-top:0; opacity:.85;} 50%{ margin-top:10px; opacity:.4;} }
@media(max-width:760px){ .mascot-hero{ left:auto; right:-8%; bottom:-4px; width: 150px; opacity:.9; } }

/* Climbing-rope trail (games) */
.trail { position:relative; max-width: 660px; margin:0 auto; display:grid; gap:16px; padding-left: 36px; }
.trail::before { content:""; position:absolute; left:15px; top:14px; bottom:14px; width:4px; border-radius:4px; background: repeating-linear-gradient(180deg, var(--gold) 0 9px, transparent 9px 18px); opacity:.7; }
.trail .node { position:relative; display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; background: linear-gradient(180deg,#15265f,#0e1a52); border:2px solid rgba(255,204,51,.32); box-shadow: 0 10px 26px -12px rgba(0,0,0,.6); }
.trail .node::before { content:""; position:absolute; left:-28px; top:50%; transform:translateY(-50%); width:16px;height:16px;border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); border:3px solid #0a1240; }
.trail .node .ico { font-size:30px; width:56px;height:56px; display:grid;place-items:center; border-radius:13px; background: radial-gradient(circle at 50% 40%, rgba(155,92,255,.4), rgba(10,18,64,.55)); border:1px solid rgba(255,255,255,.1); }
.trail .node .name { font-family:'Fredoka'; font-weight:700; font-size:19px; }
.trail .node .sub { font-family:'Fredoka'; font-size:13px; color:var(--gold-2); margin-top:2px; }
.trail .node .sub.grey { color:var(--txt-faint); }
.trail .node .st { font-family:'Fredoka'; font-weight:700; font-size:12px; padding:7px 15px; border-radius:9px; text-transform:uppercase; white-space:nowrap; }
.trail .node .st.play { background:var(--grad-green); color:#08300a; }
.trail .node .st.locked { background:linear-gradient(180deg,#3a4a86,#243363); color:#c3cdf2; }
.trail .node .st.soon { background:linear-gradient(180deg,#2b60d6,#1c3f9e); color:#dbe6ff; }

/* Tilted floating screenshots + mascot */
.shots-tilt { display:flex; justify-content:center; align-items:center; gap:30px; flex-wrap:wrap; }
.shot-tilt { border-radius:18px; padding:9px; background: linear-gradient(180deg,#ffe58a,#f0a91e); box-shadow: 0 26px 54px -18px rgba(0,0,0,.75); max-width: 460px; transition: transform .3s var(--ease); }
.shot-tilt img { border-radius:12px; }
.shot-tilt:nth-child(1){ transform: rotate(-3deg); } .shot-tilt:nth-child(1):hover{ transform: rotate(-1deg) translateY(-6px); }
.shot-tilt:nth-child(2){ transform: rotate(3deg); } .shot-tilt:nth-child(2):hover{ transform: rotate(1deg) translateY(-6px); }

/* section with mascot beside */
.with-mascot { display:grid; grid-template-columns: 200px 1fr; gap:30px; align-items:center; }
.with-mascot .m img { width:100%; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); animation: bobf 5s ease-in-out infinite; }
@media(max-width:760px){ .with-mascot { grid-template-columns:1fr; text-align:center; } .with-mascot .m { max-width:170px; margin:0 auto; } }

/* ---- Mobile fixes (Enter-the-Game) ---- */
@media (max-width: 680px) {
  /* HUD: drop the wordmark so icon + Play + menu fit */
  .hud .brand .wm { display: none; }
  .hud-inner { height: 64px; }
  .hud .brand img.ic { height: 40px; width: 40px; }
  .hud-right { gap: 10px; }
  .hud-right .btn-play { padding: 10px 16px; font-size: 13px; }

  /* Hero: fit the headline, tighten spacing */
  .hero-full { padding: 82px 16px 56px; }
  .hero-full .inner { padding: 0; }
  .hero-full h1 { font-size: clamp(34px, 9vw, 48px); line-height: 1.0; }
  .hero-full .sub { font-size: 16px; margin: 14px auto 26px; }
  .hero-full .kicker { font-size: 11.5px; letter-spacing: .1em; }
  .play-glow { font-size: 18px !important; padding: 17px 40px !important; }
  .hero-full .ribbon { gap: 6px 14px; font-size: 11.5px; }

  /* Buttons & CTA: don't let them hit the edges */
  .btn-lg { padding: 15px 26px; font-size: 16px; }
  .cta-band { padding: 40px 20px; }
  .cta-band .btn { max-width: 100%; }

  /* Trail nodes: tighten */
  .trail { padding-left: 28px; }
  .trail::before { left: 12px; }
  .trail .node { padding: 13px 13px; gap: 11px; }
  .trail .node::before { left: -24px; width: 13px; height: 13px; }
  .trail .node .ico { width: 46px; height: 46px; font-size: 24px; }
  .trail .node .name { font-size: 17px; }
  .trail .node .st { font-size: 11px; padding: 6px 11px; }
}
@media (max-width: 380px) {
  .hero-full h1 { font-size: 32px; }
  .hud-right .btn-play { padding: 9px 13px; }
}