/* ============================================================================
   Оракул TaroLune — контентный сайт.

   Один принцип определил здесь всё: это страница, на которую человек попал из
   поиска, чтобы ПРОЧИТАТЬ ответ. Поэтому текст крупный, строка ограничена по
   ширине, а украшений ровно столько, чтобы сайт не выглядел дешёвым — и ни
   на грамм больше. Всё, что отвлекает от чтения, здесь работает против нас:
   человек уходит, поисковик засчитывает отказ, страница падает в выдаче.

   Мобильный — основной. Больше половины запросов «гороскоп на сегодня» идут с
   телефона, поэтому размеры заданы от малого экрана вверх, а не наоборот.
   ========================================================================= */
:root{
  --bg:#0b0715; --surf:rgba(255,255,255,.035); --surf-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
  --t1:#f2eefb; --t2:#b9b1cc; --t3:#8a83a0;
  --gold:#eac678; --gold-2:#f5dfa8; --acc:#a898f5;
  --r:18px; --r-sm:13px;
  --serif:'Georgia','Times New Roman',serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--t1); overflow-x:hidden;
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acc); text-decoration:none}
a:hover{color:var(--gold)}

/* Фон. Два размытых пятна вместо картинки: весит ноль, грузится мгновенно.
   position:fixed + overflow:hidden у контейнера — иначе пятна распирают
   страницу по горизонтали и телефон ужимает весь макет. */
.aurora{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.aurora b{position:absolute; display:block; border-radius:50%; filter:blur(90px)}
.aurora .a1{width:70vw; height:70vw; max-width:780px; max-height:780px;
  top:-24%; right:-18%; background:radial-gradient(circle,rgba(234,198,120,.16),transparent 70%)}
.aurora .a2{width:64vw; height:64vw; max-width:700px; max-height:700px;
  bottom:-20%; left:-16%; background:radial-gradient(circle,rgba(168,152,245,.15),transparent 70%)}

/* --- Шапка ---------------------------------------------------------------- */
.nav{position:sticky; top:0; z-index:20; background:rgba(11,7,21,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:900px; margin:0 auto; padding:11px 16px;
  display:flex; align-items:center; gap:14px; min-width:0}
.logo{color:var(--t1); font-size:18px; white-space:nowrap}
.logo b{font-family:var(--serif); letter-spacing:-.01em}
/* Меню прокручивается вбок, а не переносится и не прячется в «бургер».
   Пять пунктов на телефон не влезают, а бургер — это лишнее нажатие до
   раздела, ради которого человек и пришёл. */
.links{display:flex; gap:16px; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; margin-left:auto; min-width:0}
.links::-webkit-scrollbar{display:none}
.links a{color:var(--t2); font-size:14.5px; white-space:nowrap; padding:4px 0;
  transition:color .16s var(--ease)}
.links a:hover{color:var(--t1)}

/* --- Каркас --------------------------------------------------------------- */
.wrap{max-width:760px; margin:0 auto; padding:0 16px}
main.wrap{padding-top:26px; padding-bottom:10px}
h1{font:700 clamp(27px,6vw,40px)/1.18 var(--serif); letter-spacing:-.02em; margin-bottom:12px}
h2{font:700 clamp(21px,4.4vw,27px)/1.25 var(--serif); margin:32px 0 12px}
h3{font:600 18px/1.3 var(--serif); margin:22px 0 8px}
p{margin-bottom:15px; color:var(--t2)}
.lead{font-size:18.5px; color:var(--t2); margin-bottom:22px}
.meta{color:var(--t3); font-size:14.5px; margin-bottom:20px}
.article p{color:var(--t1)}
.article p+p{margin-top:0}

/* --- Карточки ------------------------------------------------------------- */
.card{background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 18px; margin-bottom:16px}
.grid{display:grid; gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr))}

/* Плитка знака: символ, имя, даты. min-width:0 обязателен — без него длинное
   слово внутри сетки не даёт колонке сжаться и распирает страницу. */
.tile{display:block; background:var(--surf); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:13px 14px; min-width:0;
  transition:border-color .16s var(--ease), background .16s var(--ease)}
.tile:hover{border-color:var(--line-2); background:var(--surf-2)}
.tile .sym{font-size:21px; color:var(--gold); line-height:1}
.tile .nm{color:var(--t1); font-weight:600; margin-top:5px; font-size:15.5px}
.tile .dt{color:var(--t3); font-size:12.5px; margin-top:2px}

.big{font:700 30px/1.12 var(--serif); color:var(--gold)}
/* Аркан: число крупно, название рядом обычным кеглем. Одним куском в 34px
   «Колесо Фортуны» не влезало в колонку и ломалось на три строки. */
.arc{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin:2px 0 2px}
.arc b{font:700 30px/1 var(--serif); color:var(--gold)}
.arc span{font:600 16.5px/1.3 var(--serif); color:var(--t1)}
.pct{font:700 clamp(38px,9vw,54px)/1 var(--serif); color:var(--gold)}

.bar{height:9px; border-radius:999px; background:rgba(255,255,255,.07);
  overflow:hidden; margin:10px 0 6px}
.bar i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--acc),var(--gold))}

.note{background:var(--surf); border:1px solid var(--line);
  border-left:3px solid var(--gold); border-radius:var(--r-sm);
  padding:13px 15px; margin:18px 0; color:var(--t2); font-size:15px}

/* --- Формы ---------------------------------------------------------------- */
.field{margin-bottom:13px}
label{display:block; color:var(--t2); font-size:14px; margin-bottom:6px}
input,select{
  width:100%; padding:12px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:rgba(255,255,255,.04);
  color:var(--t1); font-size:16px; font-family:inherit;
}
input:focus,select:focus{outline:none; border-color:var(--gold)}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row>*{flex:1; min-width:min(100%,150px)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:999px; font-weight:700; font-size:16px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#241a06;
  border:0; cursor:pointer; font-family:inherit;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease)}
.btn:hover{color:#241a06; transform:translateY(-1px); box-shadow:0 8px 26px rgba(234,198,120,.24)}
.btn.ghost{background:transparent; border:1px solid var(--line-2); color:var(--t1)}
.btn.wide{width:100%}

/* --- Списки карт ---------------------------------------------------------- */
.deck{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,152px),1fr)); gap:10px}
.dcard{display:block; padding:12px 13px; border-radius:var(--r-sm);
  background:var(--surf); border:1px solid var(--line); color:var(--t1);
  font-size:14.5px; min-width:0;
  transition:border-color .16s var(--ease)}
.dcard:hover{border-color:var(--gold); color:var(--t1)}
.dcard small{display:block; color:var(--t3); font-size:12px; margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Таблица совместимости: 13 колонок не влезут никуда, поэтому прокрутка вбок
   с липким первым столбцом. Непрозрачный фон у него обязателен — иначе при
   прокрутке под него просвечивают соседние ячейки. */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -16px; padding:0 16px}
table.cm{border-collapse:collapse; font-size:13px}
table.cm th,table.cm td{padding:7px 9px; text-align:center; white-space:nowrap;
  border-bottom:1px solid var(--line)}
table.cm th{color:var(--t3); font-weight:500}
table.cm th:first-child,table.cm td:first-child{
  position:sticky; left:0; background:#0b0715; text-align:left; color:var(--t2)}
table.cm a{color:var(--t1)}
table.cm .hi{color:var(--gold); font-weight:700}

/* --- Переход в бота ------------------------------------------------------- */
.cta-block{margin:34px auto 30px}
.cta-card{background:linear-gradient(150deg,rgba(234,198,120,.09),rgba(168,152,245,.07));
  border:1px solid var(--line-2); border-radius:var(--r); padding:24px 20px; text-align:center}
.cta-card h2{margin:0 0 8px; font-size:21px}
.cta-card p{margin-bottom:16px}
.fine{color:var(--t3); font-size:13px; margin:10px 0 0}

.foot{padding:24px 16px 40px; border-top:1px solid var(--line); text-align:center}
.foot p{margin-bottom:7px; font-size:14px}

.crumbs{color:var(--t3); font-size:13.5px; margin-bottom:14px}
.crumbs a{color:var(--t3)}

@media(max-width:420px){
  body{font-size:16.5px}
  .wrap{padding:0 13px}
  .nav-in{padding:10px 13px; gap:10px}
  .logo{font-size:16.5px}
  .card{padding:17px 15px}
  .tw{margin:0 -13px; padding:0 13px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}