/* Единый дизайн-код игр AvtoPoplavok.ru — токены и шелл главной страницы.
   Подключается ПОСЛЕ инлайн-<style> каждой игры, поэтому переопределяет базу. */

:root{
  --bg:#f5faf8; --card:#ffffff; --text:#071f2b; --muted:#587071;
  --green:#0b7662; --green-2:#0e9277; --orange:#ff6b00; --yellow:#e8ff38;
  --line:#dce8e4;
  --shadow:0 18px 50px rgba(7,31,43,.12);
  --soft-shadow:0 12px 34px rgba(7,31,43,.07);
  --radius:26px; --max:1180px;
}

/* ---------- фон: один и тот же на всех играх ---------- */
html{background:var(--green)}
html,body{
  background:
    radial-gradient(circle at 18% 0%, rgba(232,255,56,.16), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(20,161,132,.55), transparent 40%),
    linear-gradient(160deg,#0b7662 0%,#14a184 100%);
  background-attachment:fixed;
  color:#fff;
}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.58; text-rendering:optimizeLegibility;
  min-height:100vh; min-height:100dvh;
}

/* ---------- верхняя панель / хлебные крошки ---------- */
.topbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px max(14px,env(safe-area-inset-left,0px));
  background:rgba(7,31,43,.22);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:14px;
}
.topbar a{color:var(--yellow); text-decoration:none; font-weight:800}
.topbar a:hover{text-decoration:underline}
.crumbs{font-size:13px; color:rgba(255,255,255,.8); padding:14px 16px 0; max-width:var(--max); margin:0 auto}
.crumbs a{color:var(--yellow)}

/* ---------- игровой блок ---------- */
.wrap{
  width:min(560px, calc(100% - 24px));
  margin:0 auto; padding:16px 0 28px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
h1{
  font-size:clamp(26px,5.4vw,40px); line-height:1.05; letter-spacing:-.035em;
  font-weight:900; text-align:center; text-shadow:0 3px 0 rgba(7,31,43,.18);
}
.lead{font-size:clamp(14px,2.4vw,17px); opacity:.92; text-align:center; max-width:52ch}

.panel{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%}
.stat{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.18);
  border-radius:18px; padding:8px 14px; text-align:center; min-width:78px;
}
.stat b{display:block; font-size:20px; font-weight:900; letter-spacing:-.02em}
.stat span{font-size:11px; opacity:.85; text-transform:uppercase; letter-spacing:.4px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 22px; border:0; border-radius:999px;
  font:inherit; font-size:16px; font-weight:900; line-height:1.2;
  color:#fff; background:var(--orange);
  box-shadow:0 14px 30px rgba(255,107,0,.28);
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 42px rgba(255,107,0,.34); background:#ff7f1f}
.btn:active{transform:translateY(0); box-shadow:0 10px 24px rgba(255,107,0,.22)}
.btn.y,.btn.yellow{background:var(--yellow); color:#0b4a3d; box-shadow:0 14px 30px rgba(232,255,56,.22)}
.btn.y:hover,.btn.yellow:hover{background:#f0ff6a}
.btn.p,.btn.pink,.btn.b,.btn.blue,.btn.green,.btn.secondary{
  background:#fff; color:var(--green); border:1px solid rgba(255,255,255,.5); box-shadow:var(--soft-shadow);
}
.btn.p:hover,.btn.pink:hover,.btn.b:hover,.btn.blue:hover,.btn.green:hover,.btn.secondary:hover{background:#f2faf7}
.btn.sel{outline:3px solid var(--yellow); outline-offset:2px}
.btn.small{min-height:40px; padding:8px 16px; font-size:14px}
.btn.icon{flex:0 0 52px; max-width:52px; padding:8px 4px}
.btn:focus-visible{outline:3px solid var(--yellow); outline-offset:3px}

.board{
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius); padding:12px;
  box-shadow:var(--shadow); touch-action:manipulation; max-width:100%;
}
canvas{display:block; border-radius:18px; max-width:100%; height:auto}
.msg{min-height:24px; font-size:16px; font-weight:800; text-align:center}

/* ---------- светлый SEO-блок как на главной ---------- */
.seo{background:var(--bg); color:var(--text)}
.seo-in{
  width:min(820px, calc(100% - 32px)); margin:0 auto;
  padding:clamp(24px,4vw,44px) 0 clamp(32px,6vw,56px);
  line-height:1.7; font-size:clamp(15px,1.7vw,17px);
}
.seo-in h2{font-size:clamp(22px,3.2vw,30px); line-height:1.15; letter-spacing:-.03em; margin:28px 0 10px; color:var(--green)}
.seo-in h3{font-size:clamp(17px,2.4vw,21px); letter-spacing:-.02em; margin:22px 0 8px}
.seo-in p{margin:10px 0; color:var(--muted)}
.seo-in li{margin:6px 0; color:var(--muted)}
.seo-in strong{color:var(--text)}
.seo-in a{color:var(--green)}
.seo details{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:16px 18px; margin:10px 0; box-shadow:var(--soft-shadow); color:var(--text);
}
.seo summary{font-weight:800; cursor:pointer}

.cta{
  display:block; margin:28px 0; padding:20px 22px;
  background:var(--orange); color:#fff!important; border-radius:var(--radius);
  text-decoration:none; font-weight:900; font-size:clamp(16px,2.2vw,19px); text-align:center;
  box-shadow:0 18px 40px rgba(255,107,0,.28); transition:transform .16s ease, box-shadow .16s ease;
}
.cta:hover{transform:translateY(-2px); box-shadow:0 22px 50px rgba(255,107,0,.34)}
.cta small{display:block; font-weight:500; font-size:13px; opacity:.92; margin-top:6px}

.gnav{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin:16px 0}
.gnav a{
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  text-decoration:none; color:var(--green); font-weight:700; font-size:15px;
  transition:transform .16s ease, box-shadow .16s ease;
}
.gnav a:hover{transform:translateY(-2px); box-shadow:var(--soft-shadow)}
.gnav a[aria-current]{background:var(--green); color:#fff; border-color:var(--green)}

/* каталог игр — широкая сетка, а не колонка игрового поля */
.wrap:has(.cards){width:min(var(--max), calc(100% - 32px))}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; width:100%}

/* ---------- адаптив ---------- */
@media (min-width:1024px){
  .wrap{width:min(680px, calc(100% - 48px)); padding:28px 0 40px; gap:18px}
  .wrap:has(.cards){width:min(var(--max), calc(100% - 48px))}
  .crumbs{padding-left:24px; padding-right:24px}
}
@media (max-width:680px){
  .topbar{font-size:13px; gap:8px; padding:10px 12px}
  .wrap{width:calc(100% - 20px); gap:12px}
  .btn{white-space:normal; padding:12px 18px}
  .gnav{grid-template-columns:1fr 1fr}
}
@media (max-width:380px){
  .wrap{width:calc(100% - 14px)}
  .gnav{grid-template-columns:1fr}
  .stat{min-width:68px; padding:6px 10px}
  .btn{font-size:15px; padding:11px 14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}