:root{
  /* Giggle-style pastels */
  --sky: #fffdcf;
  --sky-deep: #fdffbd;
  --ink: #0e1726;
  --ink-2: #334155;
  --card: #ffffff;
  --card-tint: #ffffffb8;
  --line: #e6f3ff;
  --accent: #7c5cff; /* purple */
  --accent-2: #ffb347; /* peach */
  --accent-3: #ff7ab6; /* pink */
  --good: #3ddc97;

  --radius-xl: 24px;
  --shadow: 0 20px 60px rgba(15, 30, 60, .15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, Segoe UI, Roboto, system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -20%, #fff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(1200px 700px at 120% 120%, #ffe8ff 0%, rgba(255,232,255,0) 60%),
    var(--sky);
}

/* top */
.top{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; background:rgba(255,255,255,.6); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px}
.brand .splash{filter: drop-shadow(0 6px 14px rgba(255,140,200,.35))}
.muted{color:var(--ink-2)}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{
  padding:10px 14px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink); cursor:pointer; font-weight:700;
  box-shadow:0 6px 16px rgba(25,50,80,.06);
}
.tab[aria-selected="true"]{outline:3px solid var(--accent); outline-offset:2px}
.actions{display:flex; gap:8px}
.btn{
  padding:10px 14px; border-radius:14px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-weight:700; cursor:pointer;
  box-shadow:0 10px 30px rgba(25,50,80,.08);
}
.btn.ghost{background:linear-gradient(180deg,#fff, #fff7);}

/* layout */
.layout{display:grid; gap:16px; padding:18px; grid-template-columns: 1fr 360px}
@media (max-width:1100px){ .layout{grid-template-columns:1fr} }

.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:var(--shadow); overflow:hidden;
}

/* Live */
.live{display:flex; align-items:center; justify-content:space-between; padding:16px 18px}
.kicker{font-weight:800; color:var(--accent)}
.headline{font-size:20px; font-weight:900}
.label{font-size:12px}
.live-right{display:grid; grid-template-columns:auto auto auto; align-items:center; gap:10px}
.progress{height:12px; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:#f3f7ff}
.progress.big{height:16px; width:min(560px, 48vw)}
.bar{height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-3), var(--accent-2))}
.time{font-weight:900; font-variant-numeric:tabular-nums}

/* Heats */
.heats-panel{display:grid; grid-auto-rows:min-content}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:linear-gradient(180deg,#fff,#fff7)}
.heats{display:grid; gap:14px; padding:14px; grid-template-columns: repeat(4, minmax(240px, 1fr))}
@media (max-width:1400px){ .heats{grid-template-columns: repeat(3, minmax(240px, 1fr))} }
@media (max-width:980px){ .heats{grid-template-columns: repeat(2, minmax(240px, 1fr))} }
@media (max-width:640px){ .heats{grid-template-columns: 1fr} }

.heat{border:1px solid var(--line); border-radius:18px; background:#fff; padding:12px; display:grid; gap:10px; box-shadow:0 10px 30px rgba(25,50,80,.06)}
.hhead{display:flex; align-items:center; justify-content:space-between}
.tag{font-size:12px; padding:3px 10px; border:1px solid var(--line); border-radius:999px; background:#f7fbff}
.slots{display:grid; gap:8px}
.slot{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:#fcfeff; font-size:12px}
.heat .btn{justify-self:start}

/* Right column / leaderboard */
.side{display:grid; grid-template-rows:auto auto 1fr; gap:12px; padding:12px}
.side-head{padding:12px 14px; font-weight:900; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#fff7)}
.search{display:flex; gap:8px; padding:0 12px}
input[type="text"]{flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#fff}
.board{max-height:420px; overflow:auto; display:grid; gap:8px; padding:0 12px 12px}
.row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff}
.tiny{font-size:12px}

/* holders skeleton */
.skeleton{padding:12px}
.skeleton .row.sk{height:38px; border-radius:12px; background:linear-gradient(90deg,#eef7ff 0%,#f7fbff 40%,#eef7ff 80%); margin-bottom:8px; animation:shine 1.3s linear infinite}
@keyframes shine{0%{background-position:-200px 0} 100%{background-position:200px 0}}
.skeleton .tiny{padding:4px 2px}

/* Modals */
.modal{position:fixed; inset:0; display:none; place-items:center; z-index:9999}
.modal[aria-hidden="false"]{display:grid}
.modal-backdrop{position:absolute; inset:0; background:rgba(15,25,40,.35); backdrop-filter:blur(8px)}
.modal-card{position:relative; z-index:1; width:min(1120px,96vw); border-radius:var(--radius-xl); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.close{position:absolute; right:12px; top:10px; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:#fff}
.viewer-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#fff7)}
.viewer-title{display:flex; align-items:center; gap:8px}
.chip{padding:2px 8px; background:#e8f7ee; border:1px solid #d6f3e4; border-radius:999px; color:#116a4a; font-weight:800; font-size:12px}
.viewer-tools{display:flex; align-items:center; gap:10px}

/* onboarding */
.modal-card.intro{padding:26px 26px 18px}
.intro-badge{display:inline-block; padding:6px 10px; border-radius:999px; background:#ffe8ff; border:1px solid #ffd5ff; font-weight:800; color:#8a3a9f; margin-bottom:8px}
.modal-card.intro h1{margin:6px 0 10px; font-size:28px}
.pill{display:inline-block; margin:0 6px 6px 0; padding:4px 10px; border-radius:999px; background:#f7fbff; border:1px solid var(--line); font-weight:800}
.bullets{margin:10px 0 0 18px}
.bullets li{margin:6px 0}
.cta{display:flex; gap:10px; margin-top:14px}
.btn.primary{background:linear-gradient(180deg,#8c79ff,#7c5cff); color:#fff; border-color:#6d55ff}

/* Track (same geometry, pastel frame) */
.track-rect{
  position:relative; width:100%; height:min(60vw,560px);
  background-image:url(images/bg.png); border:18px solid transparent; border-image:url(images/outer.png) 16 round;
  overflow:hidden;
}
.track-rect::before{
  content:''; position:absolute; inset:12% 8%;
  background-image:url(images/mud.png);
  border:16px solid transparent; border-image:url(images/inner.png) 16 fill round; border-radius:16px;
}
.tree{position:absolute; right:10%; top:36%; width:140px; pointer-events:none}
.startline{position:absolute; left:12%; top:10%; width:12px; height:80%;
  background:linear-gradient(45deg,#000 25%,#fff 25%,#fff 50%,#000 50%,#000 75%,#fff 75%);
  background-size:12px 12px; border-radius:3px; z-index:2}

/* Horses (sprites) */
.horse{position:absolute; transform:translate(-50%,-50%); z-index:3}
.horse.runLeft,.horse.runRight{width:96px; height:60px; background-image:url(images/horse2.png)}
.horse.runUp,.horse.runDown{width:48px; height:64px; background-image:url(images/horse2.png)}
.horse .rider{position:absolute; left:40px; top:8px}
.horse .rider .head{width:32px; height:32px; background-image:url(images/head0.png)}
.horse .rider .body{width:32px; height:32px; background-image:url(images/body0.png)}
.horse.runRight{background-position:0 -320px; animation:horseRight steps(1) .5s infinite}
.horse.runRight .rider .body{background-position:-96px -320px}
.horse.runRight .rider .head{background-position:0 -96px}
@keyframes horseRight{0%,100%{background-position:0 -320px}50%{background-position:0 -512px}}
.horse.runLeft{background-position:0 -256px; animation:horseLeft steps(1) .5s infinite}
.horse.runLeft .rider .body{background-position:-32px -320px}
.horse.runLeft .rider .head{background-position:0 -32px}
@keyframes horseLeft{0%,100%{background-position:0 -256px}50%{background-position:0 -450px}}
.horse.runDown{background-position:48px 192px; animation:horseDown steps(1) .75s infinite}
.horse.runDown .rider{left:8px; top:-8px}
.horse.runDown .rider .body{background-position:-64px -320px}
.horse.runDown .rider .head{background-position:0 -64px}
@keyframes horseDown{0%,100%{background-position:48px -192px}33%{background-position:48px -380px}66%{background-position:48px 0}}
.horse.runUp{background-position:0 192px; animation:horseUp steps(1) .75s infinite}
.horse.runUp .rider{left:8px; top:-8px}
.horse.runUp .rider .body{background-position:0 -320px}
.horse.runUp .rider .head{background-position:0 0}
@keyframes horseUp{0%,100%{background-position:0 -192px}33%{background-position:0 -380px}66%{background-position:0 0}}
/* Intro modal layout (fixed) */
.modal-card.intro{
  width: min(980px, 96vw);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;            /* не даём контенту вылезать */
  border-radius: 24px;
}

/* Banner block */
.intro-media{
  margin: 0;
  width: 100%;
  aspect-ratio: 21/9;          /* аккуратная панорама */
  background: #f5f8ff;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.intro-banner{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text block */
.intro-content{
  padding: 22px 26px 20px;
  display: grid;
  gap: 12px;
}
.intro-badge{display:inline-block; padding:6px 10px; border-radius:999px; background:#ffe8ff; border:1px solid #ffd5ff; font-weight:800; color:#8a3a9f}
.intro-content h1{margin: 4px 0 6px; font-size: 26px; line-height: 1.2}
.lead{font-size:16px; font-weight:700; margin:6px 0 2px}
.bullets{margin: 2px 0 0 18px; padding: 0}
.bullets li{margin: 6px 0; line-height: 1.35}
.pill{display:inline-block; margin:0 6px 6px 0; padding:4px 10px; border-radius:999px; background:#f7fbff; border:1px solid var(--line); font-weight:800; white-space:nowrap}

.cta{display:flex; gap:10px; margin-top: 8px; flex-wrap: wrap}
.btn.primary{background:linear-gradient(180deg,#8c79ff,#7c5cff); color:#fff; border-color:#6d55ff}

/* На узких экранах — компактнее заголовок */
@media (max-width: 520px){
  .intro-content{padding:18px}
  .intro-content h1{font-size:22px}
}