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

:root{
  --navy:#1B1B3A;
  --navy-2:#252550;
  --gold:#FFC857;
  --coral:#FF6B6B;
  --teal:#4ECDC4;
  --cream:#FFF8EC;
  --ink:#1B1B3A;
  --radius:18px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Inter',sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
}

h1,h2,h3,.display{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
}

a{color:inherit;text-decoration:none}

/* ---- Header / ticket strip ---- */
header.site{
  background:var(--navy);
  color:var(--cream);
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  border-bottom:4px dashed var(--gold);
}
header.site .logo{
  font-family:'Fredoka',sans-serif;
  font-size:1.4rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}
header.site .logo .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--coral);
  box-shadow:14px 0 0 var(--gold), 28px 0 0 var(--teal);
}
nav.site a{
  margin-left:18px;
  font-weight:600;
  font-size:.92rem;
  opacity:.85;
}
nav.site a:hover{opacity:1}

/* ---- Hero ---- */
.hero{
  background:var(--navy);
  color:var(--cream);
  padding:64px 24px 80px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero h1{
  font-size:clamp(2rem,5vw,3.2rem);
  margin-bottom:14px;
}
.hero p.sub{
  max-width:520px;
  margin:0 auto 28px;
  opacity:.85;
  font-size:1.05rem;
}
.ticket-eyebrow{
  display:inline-block;
  font-family:'Fredoka',sans-serif;
  background:var(--gold);
  color:var(--navy);
  padding:5px 14px;
  border-radius:999px;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:16px;
}

/* ---- Game cards grid (home page) ---- */
.games{
  max-width:1000px;
  margin:-44px auto 60px;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  position:relative;
  z-index:2;
}
.game-card{
  background:#fff;
  border-radius:var(--radius);
  padding:26px 22px;
  box-shadow:0 14px 30px rgba(27,27,58,.14);
  border-top:6px solid var(--coral);
  transition:transform .15s ease;
}
.game-card:nth-child(2){border-top-color:var(--teal)}
.game-card:nth-child(3){border-top-color:var(--gold)}
.game-card:hover{transform:translateY(-4px)}
.game-card h3{font-size:1.25rem;margin-bottom:8px}
.game-card p{font-size:.92rem;color:#555;margin-bottom:16px}
.btn{
  display:inline-block;
  background:var(--navy);
  color:var(--cream);
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  padding:10px 20px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:.95rem;
}
.btn:hover{background:#30306a}
.btn.coral{background:var(--coral);color:var(--navy)}
.btn.gold{background:var(--gold);color:var(--navy)}

/* ---- Ad slots ---- */
.ad-slot{
  max-width:1000px;
  margin:30px auto;
  padding:0 24px;
}
.ad-slot .placeholder{
  border:2px dashed #c9c2ad;
  border-radius:10px;
  padding:18px;
  text-align:center;
  font-size:.8rem;
  color:#999;
  background:#fbfaf6;
}

/* ---- Game page layout ---- */
main.game{
  max-width:760px;
  margin:0 auto;
  padding:46px 24px 80px;
  text-align:center;
}
main.game h1{font-size:2rem;margin-bottom:8px}
main.game p.intro{color:#555;max-width:520px;margin:0 auto 30px}

.wheel-wrap{
  position:relative;
  width:min(360px,84vw);
  margin:0 auto 26px;
}
.pointer{
  position:absolute;
  top:-14px;left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:24px solid var(--coral);
  z-index:5;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
canvas#wheel{
  width:100%;height:auto;
  border-radius:50%;
  box-shadow:0 10px 30px rgba(27,27,58,.25);
  border:6px solid var(--navy);
}

.input-row{
  display:flex;
  gap:8px;
  max-width:420px;
  margin:0 auto 14px;
}
.input-row input{
  flex:1;
  padding:11px 14px;
  border-radius:10px;
  border:2px solid #ddd6c4;
  font-size:1rem;
  font-family:'Inter',sans-serif;
}
.input-row input:focus{outline:2px solid var(--teal)}

.chips{
  display:flex;flex-wrap:wrap;gap:8px;
  max-width:480px;margin:0 auto 24px;
  justify-content:center;
}
.chip{
  background:var(--navy);
  color:var(--cream);
  padding:6px 12px;
  border-radius:999px;
  font-size:.85rem;
  display:flex;align-items:center;gap:6px;
}
.chip button{
  background:none;border:none;color:var(--gold);
  cursor:pointer;font-weight:700;font-size:.9rem;
}

.result-banner{
  font-family:'Fredoka',sans-serif;
  font-size:1.6rem;
  background:var(--gold);
  color:var(--navy);
  display:inline-block;
  padding:12px 28px;
  border-radius:14px;
  margin:18px 0;
  min-height:1.5em;
}

select{
  padding:11px 14px;
  border-radius:10px;
  border:2px solid #ddd6c4;
  font-size:1rem;
  font-family:'Inter',sans-serif;
  margin-bottom:18px;
}

.content-block{
  text-align:left;
  max-width:700px;
  margin:50px auto 0;
}
.content-block h2{font-size:1.3rem;margin-bottom:10px;margin-top:28px}
.content-block p{color:#444;margin-bottom:12px}
.content-block details{
  background:#fff;border-radius:10px;padding:14px 18px;margin-bottom:10px;
  border:1px solid #eee5d0;
}
.content-block summary{font-weight:600;cursor:pointer}

footer.site{
  background:var(--navy);
  color:var(--cream);
  text-align:center;
  padding:34px 24px;
  font-size:.85rem;
  opacity:.8;
}
footer.site a{text-decoration:underline}

/* ---- Mode toggle tabs ---- */
.mode-toggle{
  display:inline-flex;
  background:#fff;
  border-radius:999px;
  padding:5px;
  margin-bottom:30px;
  box-shadow:0 4px 14px rgba(27,27,58,.1);
}
.mode-toggle button{
  border:none;
  background:none;
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:.95rem;
  padding:9px 20px;
  border-radius:999px;
  cursor:pointer;
  color:#777;
}
.mode-toggle button.active{
  background:var(--navy);
  color:var(--cream);
}

/* ---- Race track ---- */
.race-field{
  background:linear-gradient(180deg,#cdeec2,#b7e2a8);
  border:6px solid var(--navy);
  border-radius:var(--radius);
  padding:18px 14px;
  margin:0 auto 24px;
  max-width:560px;
  box-shadow:0 14px 30px rgba(27,27,58,.18);
}
.lane{
  margin-bottom:10px;
}
.lane:last-child{margin-bottom:0}
.lane-label{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:.8rem;
  margin-bottom:3px;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lane-track{
  position:relative;
  height:34px;
  background:repeating-linear-gradient(90deg,#a9d89a,#a9d89a 18px,#9fd08f 18px,#9fd08f 36px);
  border-radius:8px;
  border:2px solid rgba(27,27,58,.25);
  overflow:hidden;
}
.finish-flag{
  position:absolute;
  right:2px;top:50%;
  transform:translateY(-50%);
  font-size:1.1rem;
  z-index:1;
}
.horse{
  position:absolute;
  top:50%;
  left:0%;
  transform:translate(0,-50%) scaleX(-1);
  font-size:1.5rem;
  transition:left .05s linear;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.25));
}

/* ---- Carousel ---- */
.carousel-wrap{
  position:relative;
  max-width:560px;
  margin:0 auto 24px;
}
.carousel-marker{
  position:absolute;
  top:-6px;left:50%;
  transform:translateX(-50%);
  font-size:1.3rem;
  color:var(--coral);
  z-index:5;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.3));
}
.carousel-track{
  overflow:hidden;
  background:var(--navy);
  border-radius:var(--radius);
  padding:18px 0;
  border:6px solid var(--gold);
  box-shadow:0 14px 30px rgba(27,27,58,.25);
}
.carousel-strip{
  display:flex;
  will-change:transform;
}
.carousel-card{
  flex:0 0 120px;
  width:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:3px solid var(--coral);
  border-radius:14px;
  background:#fff;
  margin:0 6px;
  padding:10px 4px;
}
.carousel-horse{font-size:1.8rem}
.carousel-name{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:.78rem;
  color:var(--navy);
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100px;
}

@media (prefers-reduced-motion: reduce){
  .horse{transition:none !important}
  .carousel-strip{transition:none !important}
}