/* Home page only (build.py page_index → layout(extra_head=…)): linked from / alone, never bundled into site.css.
   Every class starts with hm-; the shared pieces it reuses (.classes/.class-pick from class_tiles(), .db-quick from db_quick_form(),
   .btn, .eyebrow, .lead) are only restyled inside .hm-* containers, so /talents/, /abilities/ and 404.html keep their look. */

/* ---- the line-art icon in its medallion (icons: 64-unit viewBox, 2-unit stroke; the stroke is re-thickened per size) */
.hm-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;color:var(--accent-2);
  background:radial-gradient(circle at 50% 36%,#e0b25b2e,transparent 70%),linear-gradient(160deg,#252e3c,#131922);
  border:1px solid #8a6d2e8c;box-shadow:inset 0 0 0 3px #0e111699,inset 0 0 0 4px #e0b25b1a;transition:box-shadow .2s,border-color .2s}
.hm-ic svg{width:38px;height:38px;stroke-width:2.5;filter:drop-shadow(0 0 5px #f0d28a40)}
.hm-ic-sm{width:40px;height:40px;border-radius:11px}
.hm-ic-sm svg{width:28px;height:28px;stroke-width:3.2}

/* ---- top: hero (left) + talent calculator class picker (right) */
/* DOM order intro → calc → search → kpis (phones read the class picker right after the title); desktop puts calc on the right */
.hm-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"intro calc" "search calc" "kpis calc";
  grid-template-rows:auto auto 1fr;gap:18px 32px;align-items:start;padding-top:18px}
.hm-intro{grid-area:intro;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-top:8px}
.hm-calc{grid-area:calc}
.hm-search{grid-area:search;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}   /* minmax(0,…): the search input's intrinsic width must not widen a phone page */
.hm-kpis{grid-area:kpis}
.hm-intro h1{font-size:clamp(1.9rem,1.1rem + 1.8vw,2.6rem);line-height:1.12;max-width:21ch;text-shadow:0 2px 18px #000a}
.hm-intro .lead{font-size:1.04rem;max-width:58ch;color:var(--text-2);text-shadow:0 1px 10px #000c}
.hm-search .db-quick{margin:4px 0 0;padding:14px 16px 16px;border:1px solid var(--line-2);border-radius:12px;background:#141922e6;box-shadow:var(--shadow)}
.hm-search .db-quick label{margin-bottom:8px;color:var(--text)}
.hm-search .db-quick-line input{height:46px;padding-left:40px;border-radius:8px;background:#0e1116 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5ad9d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 13px 50%/18px}
.hm-search .db-quick-line .btn{height:46px;padding:0 20px;border-radius:8px}
.hm-actions{display:flex;flex-wrap:wrap;gap:10px}
.hm-actions .btn{min-height:42px;padding:9px 16px;font-size:.95rem}
.hm-kpis{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;border-top:1px solid #e0b25b33}
.hm-kpis li{display:grid;gap:1px;padding:12px 18px 0 0;margin-right:18px;border-right:1px solid var(--line)}
.hm-kpis li:last-child{border-right:0;margin-right:0}
@media (min-width:1100px) and (max-width:1219px){.hm-kpis li{padding-right:12px;margin-right:12px}}   /* the narrow two-column hero keeps all five in one row */
.hm-kpis b{font-family:var(--font-display);font-size:1.5rem;line-height:1.1;color:var(--accent-2);font-variant-numeric:tabular-nums}
.hm-kpis span{font-size:.82rem;color:var(--text-2)}

.hm-calc{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:18px;border:1px solid #8a6d2e80;border-radius:14px;
  background:radial-gradient(circle at 85% 0%,#e0b25b1f,transparent 45%),linear-gradient(160deg,#1b2230f5,#12171ff5);
  box-shadow:inset 0 0 0 4px #0e111680,inset 0 0 0 5px #e0b25b14,var(--shadow);scroll-margin-top:16px}
.hm-calc-head{display:flex;align-items:center;gap:12px}
.hm-calc-head h2{font-size:1.3rem}
.hm-calc-head p{font-size:.86rem;color:var(--text-2)}
.hm-calc .classes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hm-calc .class-pick{flex-direction:column;justify-content:center;gap:6px;min-height:104px;padding:12px 6px 10px;text-align:center;border-radius:10px;background:#0e1116b3}
.hm-calc .class-pick img{width:44px;height:44px;border-radius:10px}
.hm-calc .class-pick b{font-size:.98rem}
.hm-calc .class-pick small{font-size:.76rem}
.hm-legend{padding-top:12px;border-top:1px solid var(--line);font-size:.8rem;line-height:1.5;color:var(--text-3)}

/* ---- the news strip between the hero and the groups (printed only while a news release is installed): emblem, heading and the
   link to /news/ are static; the list is empty in the markup and core.js newsChrome() fills it with the newest headlines of
   /news/latest.json (li > a > small «1 октября · обновление» + span title, two lines at most). Its height is reserved here — one
   row of 68 px; on a phone two rows, where only the two newest are shown — so filling it moves nothing; while it is still empty
   after 1.5 s (no script, no pointer) one quiet line says what the section holds. The headlines share the row equally, however
   many there are (three thirds, two halves, one whole): the section may hold two articles, and no column stays blank. */
.hm-news{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 28px;min-width:0;margin-top:6px;padding:12px 18px;border:1px solid #8a6d2e80;border-radius:12px;
  background:radial-gradient(circle at 0% 50%,#e0b25b1a,transparent 36%),linear-gradient(180deg,#1b2230f2,#151a23f2);box-shadow:inset 0 1px 0 #ffffff08}
.hm-news-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px}
.hm-news-head .hm-ic{grid-row:1/span 2}
.hm-news-head h2{align-self:end;font-size:1.2rem;line-height:1.2}
.hm-news-all{justify-self:start;display:inline-flex;align-items:center;min-height:40px;font-size:.88rem;font-weight:500;white-space:nowrap}
.hm-news-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px 10px;min-height:68px;margin:0;padding:0;list-style:none}
.hm-news-list li{min-width:0}
.hm-news-list a{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:2px;height:68px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#0e1116b3;
  color:var(--text);text-decoration:none;transition:border-color .2s}
.hm-news-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;line-height:1.3;color:var(--text-3)}
.hm-news-list span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:.9rem;font-weight:600;line-height:1.3}
.hm-news-list:empty::before{content:"Патчноты беты по датам, известные проблемы и объявления разработчиков — на русском.";grid-column:1/-1;align-self:center;
  font-size:.88rem;line-height:1.4;color:var(--text-2);opacity:0;animation:hm-news-wait .01s 1.5s forwards}
@keyframes hm-news-wait{to{opacity:1}}
@media (hover:hover){
  .hm-news-list a:hover{border-color:var(--accent-dim);color:var(--text)}
  .hm-news-list a:hover span{color:var(--accent-2)}
}
@media (prefers-reduced-motion:reduce){.hm-news-list a{transition:none}}
@media (max-width:1099px){   /* tablets: the heading row (the link to the section on its right) above the headlines */
  .hm-news{grid-template-columns:minmax(0,1fr)}
  .hm-news-head{grid-template-columns:auto auto minmax(0,1fr)}
  .hm-news-head .hm-ic{grid-row:auto}
  .hm-news-head h2{align-self:center}
  .hm-news-all{justify-self:end}
}
@media (max-width:900px){   /* two headlines side by side at most: three would be cut to a few words each */
  .hm-news-list li:nth-child(n+3){display:none}
}
@media (max-width:640px){   /* phones: the link under the heading, the two headlines one per row (2 × 68 + 8) */
  .hm-news{padding:12px 14px}
  .hm-news-head{grid-template-columns:auto minmax(0,1fr)}
  .hm-news-head .hm-ic{grid-row:1/span 2}
  .hm-news-head h2{align-self:end}
  .hm-news-all{justify-self:start}
  .hm-news-list{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);min-height:144px;align-content:start}
}

/* ---- section groups: a titled row each; desktop keeps one five-column rhythm (5 · 5 · 3 + 2) */
.hm-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:34px 14px;margin-top:10px}
.hm-group{grid-column:1/-1;grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:14px;align-content:start;min-width:0}   /* head + cards: two rows of .hm-groups, so heads side by side share a height */
.hm-group-forever{grid-column:span 3}
.hm-group-tools{grid-column:span 2}
.hm-group-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.hm-group-head h2{font-size:1.35rem;color:var(--text)}
.hm-group-head p{font-size:.86rem;color:var(--text-3);text-wrap:pretty}
.hm-group-head:after{content:"";flex:1 1 0;min-width:0;align-self:center;height:1px;background:linear-gradient(90deg,#e0b25b4d,transparent)}
.hm-cards{--n:5;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px;height:100%}
.hm-group-forever .hm-cards{--n:3}.hm-group-tools .hm-cards{--n:2}   /* no inline style: the count of cards per group lives here */
.hm-group-forever .hm-cards,.hm-group-tools .hm-cards{grid-auto-rows:1fr}

.hm-card,.hm-discord{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:6px;padding:18px 18px 20px;
  border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#1b2230f2,#151a23f2);box-shadow:inset 0 1px 0 #ffffff08;
  color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s,background-color .2s}
.hm-card .hm-ic{margin-bottom:8px}
.hm-card-t{font-family:var(--font-display);font-weight:700;font-size:1.1rem;line-height:1.2}
.hm-card-d{font-size:.88rem;line-height:1.45;color:var(--text-2)}
@media (hover:hover){   /* :hover only where a pointer really hovers (a tap on a phone leaves no lifted card); the lift only without reduced motion */
  .hm-card:hover,.hm-discord:hover{border-color:var(--accent-dim);color:var(--text)}
  .hm-card:hover .hm-card-t,.hm-discord:hover .hm-card-t{color:var(--accent-2)}
  .hm-card:hover .hm-ic,.hm-discord:hover .hm-ic{border-color:var(--accent);box-shadow:inset 0 0 0 3px #0e111699,inset 0 0 0 4px #e0b25b33,0 0 18px #e0b25b33}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.hm-card:hover,.hm-discord:hover{transform:translateY(-2px)}}
.hm-card:focus-visible,.hm-discord:focus-visible,.hm-calc .class-pick:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.hm-badge{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;font-family:var(--font);font-size:.7rem;font-weight:600;letter-spacing:.02em;vertical-align:3px}
.hm-badge-beta{color:var(--teal-2);background:#48b2a61f;border:1px solid #48b2a659}
.hm-badge-new{color:var(--green);background:#61c2901a;border:1px solid #61c29059}
.hm-group-head .hm-badge{font-size:.72rem;line-height:1.2;vertical-align:middle}
@media (min-width:1100px){.hm-card .hm-badge{position:absolute;top:18px;right:16px;margin:0}}   /* beside the medallion: titles keep one line */
@media (min-width:1100px) and (max-width:1219px){.hm-card{padding:16px 14px 18px}.hm-card-t{font-size:1rem}}   /* five narrow columns: fewer two-line titles */

.hm-discord{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:2px 16px;padding:16px 20px;border-color:var(--accent-dim);
  background:radial-gradient(circle at 0% 50%,#e0b25b1c,transparent 40%),linear-gradient(180deg,#1b2230f2,#151a23f2)}
.hm-discord .hm-ic{grid-row:1/span 2}
.hm-discord .hm-ic svg{width:26px;height:26px;filter:none}
.hm-discord .hm-card-t{color:var(--accent-2)}

@media (prefers-reduced-motion:reduce){.hm-card,.hm-discord,.hm-ic{transition:none}}

/* ---- tablets: hero above the picker; two cards a row, icon on the left */
@media (max-width:1099px){
  .hm-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "calc" "search" "kpis";grid-template-rows:none;gap:20px}
  .hm-calc .classes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .hm-groups{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .hm-group-forever,.hm-group-tools{grid-column:1/-1}
  .hm-cards{grid-template-columns:repeat(2,minmax(0,1fr));height:auto}
  .hm-group-forever .hm-cards,.hm-group-tools .hm-cards{grid-auto-rows:auto}
  .hm-cards>.hm-card:last-child:nth-child(odd){grid-column:1/-1}
  .hm-card{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;gap:3px 14px;padding:14px 16px}
  .hm-card .hm-ic{grid-row:1/span 2;margin:0}
}
@media (min-width:641px) and (max-width:1099px){.hm-calc .classes{display:flex;flex-wrap:wrap;justify-content:center}.hm-calc .class-pick{flex:0 0 calc((100% - 32px)/5)}}   /* 5 + 4, the four centred */
@media (min-width:641px) and (max-width:820px){.hm-calc .class-pick{flex-basis:calc((100% - 16px)/3)}}

/* ---- phones: one column; compact cards (44 px medallion), the class picker 3 × 3 */
@media (max-width:640px){
  .hm-top{padding-top:4px;gap:16px}
  .hm-intro{gap:10px;padding-top:0}
  .hm-intro .lead{font-size:.95rem}
  .hm-search .db-quick{padding:12px}
  .hm-legend{font-size:.76rem}
  .hm-actions .btn{flex:1 1 auto;justify-content:center}
  .hm-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 0}
  .hm-kpis li{padding:10px 8px 0 0;margin:0;border-right:0}
  .hm-kpis b{font-size:1.25rem}
  .hm-kpis span{font-size:.76rem;line-height:1.25}
  .hm-calc{padding:14px 12px;border-radius:12px}
  .hm-calc .classes{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .hm-calc .class-pick{min-height:92px;padding:10px 4px 8px;gap:5px}
  .hm-calc .class-pick img{width:38px;height:38px}
  .hm-calc .class-pick b{font-size:.86rem}
  .hm-calc .class-pick small{font-size:.7rem}
  .hm-cards{grid-template-columns:minmax(0,1fr);gap:8px}
  .hm-group{gap:10px}
  .hm-group-head{display:grid;gap:2px}
  .hm-group-head:after{content:none}
  .hm-group-head h2{font-size:1.2rem}
  .hm-card{padding:12px 14px;gap:2px 12px;border-radius:10px}
  .hm-ic{width:44px;height:44px;border-radius:12px}
  .hm-ic svg{width:32px;height:32px;stroke-width:2.9}
  .hm-card-t{font-size:1.02rem}
  .hm-card-d{font-size:.84rem}
  .hm-discord{padding:12px 14px;gap:2px 12px}
}
@media (max-width:370px){.hm-calc .class-pick b{font-size:.8rem}}   /* 360 px: «Чернокнижник» keeps a margin inside its card */