/* ============================================================
   BigGameFishing — «Охота за крупным заносом»
   Океанская тема: глубокий нави + бирюза + латунь/янтарь + коралл
   ============================================================ */
:root{
  --abyss:#04101c;        /* самый тёмный, фон */
  --deep:#071f33;         /* панели */
  --deep2:#0a2942;        /* панели светлее */
  --line:#143b56;         /* границы */
  --teal:#19e3d4;         /* бирюза — основной акцент */
  --teal-d:#0fb6c2;
  --brass:#f4b740;        /* латунь/янтарь */
  --brass-d:#d8941b;
  --coral:#ff6a4d;        /* «улов» / срочное */
  --foam:#eaf6ff;         /* текст */
  --mute:#7fa6c0;         /* приглушённый текст */
  --gold:#ffd45e;
  --radius:16px;
  --shadow:0 18px 44px rgba(0,0,0,.45);
  --font:"Segoe UI",system-ui,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--foam);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(25,227,212,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 20%, rgba(244,183,64,.07), transparent 55%),
    linear-gradient(180deg,#061a2b 0%, var(--abyss) 60%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.5;
  overflow-x:hidden;
}
/* контурные линии глубины (фон-текстура) */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(0deg,transparent 0 38px,rgba(20,59,86,.18) 38px 39px);
  mask:linear-gradient(180deg,transparent,#000 30%,#000 80%,transparent);
}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px;position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Тикер «клюёт сейчас» ---------- */
.bite-ticker{
  background:linear-gradient(90deg,rgba(255,106,77,.16),rgba(7,31,51,.6));
  border-bottom:1px solid var(--line);
  font-size:13.5px;overflow:hidden;white-space:nowrap;position:relative;z-index:3;
}
.bite-ticker .wrap{display:flex;align-items:center;gap:14px;padding:8px 18px}
.bite-ticker .live{
  display:inline-flex;align-items:center;gap:7px;font-weight:800;color:var(--coral);
  letter-spacing:.5px;flex:none;text-transform:uppercase
}
.bite-ticker .dot{width:9px;height:9px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 0 0 rgba(255,106,77,.6);animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,106,77,.55)}70%{box-shadow:0 0 0 12px rgba(255,106,77,0)}100%{box-shadow:0 0 0 0 rgba(255,106,77,0)}}
.ticker-track{display:inline-flex;gap:34px;animation:scroll 32s linear infinite;color:var(--mute)}
.ticker-track b{color:var(--gold)}
.ticker-track span{flex:none}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Шапка ---------- */
header.site{position:sticky;top:0;z-index:20;background:rgba(4,16,28,.82);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;gap:22px;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo .mark{width:46px;height:46px;flex:none}
.logo .txt b{font-size:21px;font-weight:900;letter-spacing:.3px;line-height:1}
.logo .txt b .a{color:var(--foam)} .logo .txt b .b{color:var(--teal)}
.logo .txt small{display:block;font-size:10.5px;letter-spacing:3px;color:var(--mute);text-transform:uppercase;margin-top:3px}
nav.main{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
nav.main a{padding:9px 14px;border-radius:10px;font-size:13.5px;color:var(--mute);
  font-weight:600;transition:.18s;white-space:nowrap}
nav.main a:hover{color:var(--foam);background:var(--deep2)}
nav.main a.cta{background:linear-gradient(180deg,var(--brass),var(--brass-d));color:#1a1206;font-weight:800}

/* ---------- Hero / Сонар ---------- */
.hero{display:grid;grid-template-columns:420px 1fr;gap:30px;align-items:center;padding:44px 0 30px}
.sonar{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at center, #06283f 0%, #04161f 70%);
  border:2px solid var(--line);box-shadow:var(--shadow),inset 0 0 60px rgba(0,0,0,.6);overflow:hidden
}
.sonar .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(25,227,212,.16)}
.sonar .ring.r2{inset:16%}.sonar .ring.r3{inset:32%}.sonar .ring.r4{inset:48%}
.sonar .cross{position:absolute;background:rgba(25,227,212,.13)}
.sonar .cross.h{left:0;right:0;top:50%;height:1px}.sonar .cross.v{top:0;bottom:0;left:50%;width:1px}
.sonar .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(25,227,212,0) 0deg, rgba(25,227,212,0) 268deg, rgba(25,227,212,.10) 340deg, rgba(25,227,212,.42) 359deg, rgba(25,227,212,.7) 360deg);
  animation:spin 5s linear infinite;mix-blend-mode:screen}
@keyframes spin{to{transform:rotate(360deg)}}
.sonar .blip{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--brass);
  box-shadow:0 0 12px var(--brass);transform:translate(-50%,-50%);opacity:0;animation:blip-pulse 5s linear infinite}
.sonar .blip.big{width:17px;height:17px;background:var(--coral);box-shadow:0 0 18px var(--coral)}
.sonar .blip i{position:absolute;left:16px;top:-3px;font-size:11px;font-style:normal;color:var(--foam);white-space:nowrap;text-shadow:0 1px 3px #000}
/* точка загорается при проходе стрелки, держится ~4.2с из 5с, затем тухнет */
@keyframes blip-pulse{0%{opacity:0}1.5%{opacity:1}82%{opacity:1}100%{opacity:0}}
.sonar-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.sonar-label{font-size:11px;letter-spacing:3px;color:var(--teal);text-transform:uppercase;text-align:center}

.hero-copy h1{font-size:42px;line-height:1.08;font-weight:900;letter-spacing:-.5px}
.hero-copy h1 .hl{color:var(--brass)}
.hero-copy p.sub{color:var(--mute);font-size:16px;margin:16px 0 22px;max-width:520px}
.hero-stats{display:flex;gap:26px;margin-bottom:26px;flex-wrap:wrap}
.hero-stats .s b{font-size:26px;font-weight:900;color:var(--teal)}
.hero-stats .s span{display:block;font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:1px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:12px;font-weight:800;font-size:15px;cursor:pointer;border:0;transition:.18s}
.btn-primary{background:linear-gradient(180deg,var(--teal),var(--teal-d));color:#022}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--foam)}
.btn-ghost:hover{border-color:var(--teal)}

/* ---------- Заголовки секций ---------- */
.sec{padding:34px 0}
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sec-head h2{font-size:26px;font-weight:900;letter-spacing:-.3px}
.sec-head .ic{font-size:24px}
.sec-head .hint{margin-left:auto;color:var(--mute);font-size:13px}
.rope{height:3px;background:repeating-linear-gradient(90deg,var(--brass) 0 10px,transparent 10px 18px);
  opacity:.4;border-radius:2px;margin:6px 0 0}

/* ---------- Трофейная доска ---------- */
.trophies{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trophy{background:linear-gradient(180deg,var(--deep2),var(--deep));border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;position:relative;overflow:hidden}
.trophy::after{content:"🎣";position:absolute;right:-6px;bottom:-10px;font-size:54px;opacity:.07}
.trophy .mult{font-size:30px;font-weight:900;color:var(--gold);line-height:1}
.trophy .game{font-weight:700;margin:8px 0 2px;font-size:15px}
.trophy .at{color:var(--mute);font-size:13px}
.trophy .who{display:inline-block;margin-top:10px;font-size:12px;color:var(--teal);
  border:1px solid var(--line);padding:3px 9px;border-radius:20px}

/* ---------- Карта клёва / рейтинг казино ---------- */
.spots{display:flex;flex-direction:column;gap:14px}
.spot{display:grid;grid-template-columns:50px 160px 1fr 1fr 240px;gap:16px;align-items:center;
  background:linear-gradient(180deg,var(--deep2),var(--deep));border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;transition:.2s;position:relative}
.spot:hover{border-color:rgba(25,227,212,.5);transform:translateY(-2px);box-shadow:var(--shadow)}
.spot.top{border-color:rgba(244,183,64,.55);background:linear-gradient(180deg,#13314a,#0a2238)}
.spot .rank{font-size:22px;font-weight:900;color:var(--mute);text-align:center}
.spot.top .rank{color:var(--brass)}
.spot .rank small{display:block;font-size:9px;letter-spacing:1px;color:var(--mute);font-weight:700}
.spot .brand{display:flex;flex-direction:column;gap:10px}
.spot .brand .logo-box{height:74px;display:flex;align-items:center;justify-content:center;
  background:#06203a;border:1px solid var(--line);border-radius:10px}
.spot .brand .logo-box img{max-height:68px;width:auto}
.spot .depth{display:flex;flex-direction:column;gap:6px}
.spot .depth .row{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.5px}
.spot .gauge{height:9px;border-radius:6px;background:#06203a;overflow:hidden;position:relative}
.spot .gauge i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;
  background:linear-gradient(90deg,var(--teal-d),var(--teal),var(--brass))}
.spot .bait{font-size:14px;color:var(--foam)}
.spot .bait .lbl{display:block;font-size:11px;color:var(--brass);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.spot .bait b{color:var(--gold)}
.spot .act{display:flex;flex-direction:column;gap:9px}
.promocode{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;box-sizing:border-box;max-width:100%;
  background:#05192c;border:1px dashed var(--brass-d);border-radius:9px;padding:8px 11px;cursor:pointer;transition:.15s}
.promocode:hover{background:#082338}
.promocode .code{font-weight:800;letter-spacing:.5px;color:var(--gold);font-size:13px;white-space:nowrap}
.promocode .cp{font-size:10.5px;color:var(--mute);white-space:nowrap}
.promocode.copied{border-color:var(--teal)}
.promocode.copied .cp{color:var(--teal)}
.spot .act .btn{justify-content:center;padding:12px}
.btn-catch{background:linear-gradient(180deg,var(--brass),var(--brass-d));color:#1a1206}
.btn-catch:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* ---------- Полоски-фичи ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.feat{background:var(--deep);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.feat .ic{font-size:26px;margin-bottom:10px}
.feat h3{font-size:16px;margin-bottom:6px}
.feat p{color:var(--mute);font-size:13.5px}

/* ---------- Футер ---------- */
footer.site{margin-top:40px;border-top:1px solid var(--line);background:rgba(4,16,28,.6);padding:30px 0}
footer .cols{display:flex;gap:40px;flex-wrap:wrap;color:var(--mute);font-size:13.5px}
footer .age{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--coral);color:var(--coral);
  padding:6px 12px;border-radius:10px;font-weight:800;font-size:13px}
footer p{color:var(--mute);font-size:12.5px;margin-top:16px;max-width:760px}

/* ---------- Адаптив ---------- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:24px}
  .sonar{max-width:300px;margin:0 auto}
  .trophies{grid-template-columns:repeat(2,1fr)}
  .feats{grid-template-columns:1fr}
  .hero-copy h1{font-size:32px}
  .spot{grid-template-columns:40px 1fr;grid-template-areas:"rank brand" "depth depth" "bait bait" "act act";gap:12px}
  .spot .rank{grid-area:rank}.spot .brand{grid-area:brand}.spot .depth{grid-area:depth}
  .spot .bait{grid-area:bait}.spot .act{grid-area:act}
  nav.main{display:none}
  .cmp-wrap{overflow-x:auto}
  .filterbar{flex-direction:column;align-items:stretch}
  .filterbar .sort{margin-left:0}
}

/* ============================================================
   ВНУТРЕННИЕ СТРАНИЦЫ
   ============================================================ */
.page-hero{padding:34px 0 10px}
.crumbs{font-size:12.5px;color:var(--mute);margin-bottom:12px;letter-spacing:.3px}
.crumbs a:hover{color:var(--teal)}
.page-hero h1{font-size:34px;font-weight:900;letter-spacing:-.5px;display:flex;align-items:center;gap:12px}
.page-hero h1 .ic{font-size:30px}
.page-hero .lead{color:var(--mute);font-size:15.5px;margin-top:12px;max-width:720px}

/* фильтр-бар */
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--deep);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:22px 0}
.filterbar .flbl{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:1px;margin-right:2px}
.chip{padding:8px 14px;border-radius:20px;border:1px solid var(--line);background:#06203a;
  color:var(--mute);font-size:13px;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap}
.chip:hover{color:var(--foam);border-color:var(--teal-d)}
.chip.active{background:linear-gradient(180deg,var(--teal),var(--teal-d));color:#022;border-color:transparent}
.filterbar .sort{margin-left:auto;display:flex;align-items:center;gap:8px}
.filterbar select{background:#06203a;color:var(--foam);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer}
.count{color:var(--mute);font-size:13px;margin:0 0 16px}
.spot.hidden{display:none}
.bait-card.hidden{display:none}

/* таблица-эхолот (сравнение) */
.cmp-wrap{border:1px solid var(--line);border-radius:14px;overflow:hidden}
table.cmp{width:100%;border-collapse:collapse;font-size:14px;background:var(--deep)}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.cmp th{background:#06203a;color:var(--mute);text-transform:uppercase;font-size:11.5px;letter-spacing:1px}
table.cmp tr:hover td{background:rgba(25,227,212,.04)}
table.cmp td.c{text-align:center}
table.cmp .rk{font-weight:900;color:var(--brass)}
table.cmp .nm{display:flex;align-items:center;gap:10px;font-weight:700}
table.cmp .nm img{height:26px;width:auto}
table.cmp .mini-gauge{height:7px;width:90px;border-radius:5px;background:#06203a;overflow:hidden;display:inline-block;vertical-align:middle}
table.cmp .mini-gauge i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--brass))}
table.cmp .pill{background:#06203a;border:1px solid var(--line);border-radius:14px;padding:3px 10px;font-size:12px;color:var(--gold);font-weight:700}

/* гайды / снаряжение */
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.guide-card{background:linear-gradient(180deg,var(--deep2),var(--deep));border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;transition:.2s;position:relative;overflow:hidden}
.guide-card:hover{transform:translateY(-3px);border-color:rgba(25,227,212,.5);box-shadow:var(--shadow)}
.guide-card .num{position:absolute;right:14px;top:8px;font-size:46px;font-weight:900;color:rgba(25,227,212,.08)}
.guide-card .ic{font-size:30px;margin-bottom:12px}
.guide-card h3{font-size:17px;margin-bottom:8px}
.guide-card p{color:var(--mute);font-size:14px}
.guide-card .more{display:inline-block;margin-top:14px;color:var(--teal);font-weight:700;font-size:13.5px}

/* журнал рыбака / отзывы + мутные воды */
.log-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.review{background:var(--deep);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.review .top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.review .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--teal-d),var(--deep2));
  display:flex;align-items:center;justify-content:center;font-weight:900;color:#022;flex:none}
.review .who b{display:block;font-size:14.5px}.review .who span{font-size:12px;color:var(--mute)}
.review .stars{margin-left:auto;color:var(--gold);font-size:14px;letter-spacing:1px}
.review p{color:#cfe3f2;font-size:14px}
.review .catch{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--brass);
  border:1px solid var(--brass-d);border-radius:14px;padding:3px 10px}
.murky{background:linear-gradient(180deg,rgba(255,106,77,.10),var(--deep));border:1px solid rgba(255,106,77,.4);
  border-radius:var(--radius);padding:20px}
.murky .top{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--coral);font-weight:800}
.murky p{color:#e9c9bf;font-size:14px}

/* CTA-полоса */
.cta-band{background:linear-gradient(120deg,#0a2942,#06283f);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px}
.cta-band h3{font-size:20px;font-weight:900}
.cta-band p{color:var(--mute);font-size:14px;margin-top:4px}
.cta-band .btn{margin-left:auto}

/* карточки-наживки (страница Наживки) */
.bait-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bait-card{background:linear-gradient(180deg,var(--deep2),var(--deep));border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px;transition:.2s}
.bait-card:hover{transform:translateY(-3px);border-color:rgba(244,183,64,.5);box-shadow:var(--shadow)}
.bait-card .bc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bait-card .bc-top img{height:32px;width:auto}
.bait-card .tag{font-size:11px;font-weight:800;color:#022;background:var(--brass);padding:3px 9px;border-radius:14px;white-space:nowrap}
.bait-card .tag.dep{background:var(--teal)}
.bait-card .tag.fs{background:var(--gold)}
.bait-card .tag.bezdep{background:var(--coral);color:#fff}
.bait-card .bonus{font-size:16px;font-weight:700;line-height:1.35}
.bait-card .meta{font-size:12.5px;color:var(--mute);margin-top:-4px}
.bait-card .btn{justify-content:center;margin-top:auto}

@media(max-width:900px){
  .guide-grid{grid-template-columns:1fr}
  .log-grid{grid-template-columns:1fr}
  .bait-grid{grid-template-columns:1fr}
  .page-hero h1{font-size:26px}
  .cta-band .btn{margin-left:0}
}