/* KORNEI — сайт shop.kornei.net.
   Одна горячая вещь — раскалённая табличка с адресом сервера. Всё остальное матовое и спокойное.
   Цвета рангов и лиг — те же, что в игре (§-коды), только тёмные чуть осветлены для читаемости. */

/* ── шапка ── */
/* KORNEI (02.11): матовое стекло (blur + saturate); где backdrop-filter нет — плотный фон */
.bar{position:sticky;top:0;z-index:40;isolation:isolate;background:rgba(27,14,10,.96);border-bottom:1px solid var(--rim)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .bar{background:rgba(27,14,10,.66);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px)}
}
/* при прокрутке шапка «собирается»: плотнее фон и тень (только opacity слоя), логотип чуть меньше (scale) */
.bar::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(23,11,8,.55);box-shadow:0 12px 32px -14px rgba(0,0,0,.75);
  opacity:0;transition:opacity var(--t-mid) var(--ease-out);pointer-events:none}
.bar.is-condensed::before{opacity:1}
.bar__logo{transform-origin:0 50%;transition:scale var(--t-mid) var(--ease-out)}
.bar.is-condensed .bar__logo{scale:.9}
.bar__nav.seg a[aria-current="true"]{border-bottom-color:transparent}
.bar__in{display:flex;align-items:center;gap:20px;height:var(--bar-h)}
.bar__logo{font-size:22px;line-height:1;text-decoration:none;color:var(--gold);text-shadow:.07em .07em 0 var(--blood)}
.bar__nav{display:flex;gap:4px;margin-left:auto}
.bar__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-weight:600;font-size:15px;color:var(--dust);text-decoration:none;border-bottom:2px solid transparent}
.bar__nav a:hover{color:var(--bone)}
.bar__nav a[aria-current="true"]{color:var(--bone);border-bottom-color:var(--ember)}
.bar__online{display:none;align-items:center;gap:8px;font-size:14px;color:var(--dust);white-space:nowrap}
@media (min-width:860px){
  .bar__nav{margin-left:32px}
  .bar__online:not([hidden]){display:inline-flex;margin-left:auto}
}
@media (max-width:380px){ .bar__nav a{padding:0 7px} .bar__logo{font-size:19px} }

.dot{display:inline-block;width:9px;height:9px;flex:none;background:#6E5248}
.dot.is-on{background:var(--ok);box-shadow:0 0 0 3px rgba(91,227,106,.18)}
.dot.is-off{background:var(--bad)}

/* ── объявление (из панели) ── */
.banner{background:var(--ash);border-bottom:1px solid var(--rim)}
.banner__in{display:flex;align-items:center;gap:12px;min-height:48px;padding-block:8px}
.banner__text{flex:1;min-width:0;font-weight:600;font-size:15px;color:var(--bone);border-left:3px solid var(--ember);padding-left:12px;overflow-wrap:anywhere}
a.banner__text{text-decoration:underline;text-decoration-color:var(--ember)}
a.banner__text:hover{color:var(--spark)}
.banner__close{flex:none;display:grid;place-items:center;width:44px;height:44px;background:none;border:0;color:var(--dust);cursor:pointer}
.banner__close svg{width:20px;height:20px}
.banner__close:hover{color:var(--bone)}

/* ═════════════ Играть ═════════════ */
.hero{position:relative;padding:28px 0 64px;
  background:radial-gradient(90% 60% at 10% 70%,rgba(200,30,30,.12),transparent 70%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:980px){
  .hero{padding:56px 0 88px}
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:72px;align-items:start}
}

/* Вордмарк — побуквенно, как градиентное KORNEI в игре (§4 → §c → §6), с «3D»-тенью. */
.mark{font-family:var(--f-display);font-weight:400;font-size:clamp(56px,16vw,100px);line-height:.92;letter-spacing:-.01em;margin:0 0 18px;
  text-shadow:.028em .028em 0 #8F1A0E,.056em .056em 0 #3F0707}
.mark__k{color:#C81E1E}.mark__o{color:#D73A1C}.mark__r{color:#E8641A}
.mark__n{color:#EE831C}.mark__e{color:#F2A41C}.mark__i{color:#FFD23F}
.lead{font-size:17px;line-height:1.55;color:var(--dust);max-width:46ch;margin-bottom:32px}
@media (min-width:720px){ .lead{font-size:19px} }

/* ── раскалённая табличка с адресом ── */
.plate-wrap{position:relative;isolation:isolate;display:flex;max-width:100%}
.plate-wrap::before{content:"";position:absolute;inset:-14px -10px -18px;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 70% at 45% 55%,rgba(232,100,26,.55),rgba(200,30,30,.22) 50%,transparent 78%);
  filter:blur(16px);opacity:.85;animation:heat 3.6s ease-in-out infinite alternate}
.plate{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:24px;min-height:92px;max-width:100%;
  padding:16px 24px 16px 26px;border:0;background:none;color:var(--bone);cursor:pointer;text-align:left}
.plate::before{content:"";position:absolute;inset:0;z-index:-3;
  background:linear-gradient(100deg,#7A0E0E 0%,#C81E1E 22%,#E8641A 52%,#F2A41C 78%,#FFD23F 100%);
  clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.plate::after{content:"";position:absolute;inset:3px;z-index:-2;
  background:radial-gradient(120% 160% at 0% 0%,#3E150C 0%,#26100A 55%,#1E0C08 100%);
  box-shadow:inset 0 1px 0 rgba(255,210,63,.18);
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
/* блик жара: одна медленная волна света по табличке — единственная фоновая анимация на сайте */
.plate__sheen{position:absolute;inset:3px;z-index:-1;overflow:hidden;pointer-events:none;
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.plate__sheen::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,196,80,.16) 45%,rgba(255,230,150,.22) 50%,rgba(255,196,80,.16) 55%,transparent);
  transform:translateX(-120%) skewX(-12deg);animation:sheen 5.5s cubic-bezier(.45,0,.25,1) infinite 1.2s}
.plate__ip{-webkit-user-select:text;user-select:text;font-family:var(--f-display);font-weight:400;font-size:clamp(26px,7.4vw,54px);line-height:1.05;white-space:nowrap;
  background:linear-gradient(180deg,#FFF5CF 0%,#FFD23F 42%,#F2A41C 72%,#E8641A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,160,40,.45))}
.plate__act{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--dust);white-space:nowrap;
  transition:color var(--t-fast)}
.plate__act svg{width:20px;height:20px;flex:none}
/* «Скопировать» → «Скопировано»: значок копии уходит, галочка «пружинит» на его место */
.plate__act .i-copy,.plate__act .i-check{transition:opacity var(--t-fast) var(--ease-out),scale var(--t-mid) var(--ease-spring)}
.plate__act .i-check{position:absolute;left:0;top:50%;margin-top:-10px;opacity:0;scale:.3}
.plate.is-copied .plate__act .i-copy{opacity:0;scale:.3}
.plate.is-copied .plate__act .i-check{opacity:1;scale:1}
/* наклон и блик за курсором (desktop, app.js ставит --rx/--ry/--lx/--ly) */
.plate{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--t-slow) var(--ease-out)}
.plate.is-tilting{transition:transform 90ms linear}
.plate__sheen::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--t-mid);
  background:radial-gradient(220px circle at var(--lx,50%) var(--ly,50%),rgba(255,214,120,.2),transparent 65%)}
.plate.is-tilting .plate__sheen::after{opacity:1}
.plate:hover::after{background:radial-gradient(120% 160% at 0% 0%,#4A190D 0%,#2B120B 55%,#200D08 100%)}
.plate:hover .plate__act{color:var(--bone)}
.plate:focus-visible{outline-offset:5px}
.plate.is-copied .plate__act{color:var(--ok)}
.plate-wrap:hover::before{opacity:1}
@keyframes heat{from{opacity:.7;transform:scale(.985)}to{opacity:1;transform:scale(1.015)}}
@keyframes sheen{0%{transform:translateX(-120%) skewX(-12deg)}55%,100%{transform:translateX(300%) skewX(-12deg)}}
@media (max-width:560px){
  .plate-wrap{display:block}
  .plate{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px;min-height:0}
}

.plate-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:16px;font-size:15px;color:var(--dust)}
.plate-meta b{color:var(--bone);font-weight:700}
.online{display:inline-flex;align-items:center;gap:8px}
.online b{color:var(--bone)}

.hero__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero__links .btn{min-height:48px;flex:1 1 auto}
@media (min-width:560px){ .hero__links .btn{flex:0 0 auto} }
.handle{color:var(--gold);font-weight:600}

.howto{margin-top:44px;max-width:720px}
.howto__title{font-size:18px;font-weight:700;margin-bottom:14px}
.steps{list-style:none;counter-reset:step;display:grid;gap:12px}
.steps li{counter-increment:step;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:baseline;align-content:start;color:var(--dust)}
.steps li::before{content:counter(step);font-family:var(--f-display);font-size:20px;color:var(--gold);line-height:1}
.steps b{color:var(--bone);font-weight:700}
.howto__note{margin-top:16px;font-size:14px;color:var(--smoke);max-width:62ch}
@media (min-width:980px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .steps li{grid-template-columns:minmax(0,1fr);gap:6px;font-size:15px}
}

/* ── режимы ── */
.modes{border-top:1px solid var(--rim);padding-top:20px}
@media (min-width:980px){ .modes{border-top:0;border-left:1px solid var(--rim);padding:6px 0 0 32px;margin-top:8px} }
.modes__title{font-size:18px;font-weight:700;margin-bottom:8px}
.modes__list{list-style:none}
.modes__list li{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid var(--rim)}
.modes__name{font-weight:600;color:var(--bone)}
.elo-tag{font-size:12px;font-weight:700;line-height:1;padding:4px 6px 3px;color:var(--gold);border:1px solid rgba(242,164,28,.45)}
.modes__count{margin-left:auto;font-family:var(--f-display);font-weight:400;font-size:18px;color:var(--bone);font-variant-numeric:tabular-nums}
.modes__count:empty{display:none}
.modes__count.is-zero{color:var(--smoke)}
.modes__note{margin-top:12px;font-size:14px;color:var(--smoke)}

/* ═════════════ Секции ═════════════ */
.sec{padding:64px 0 72px;border-top:1px solid var(--rim)}
@media (min-width:980px){ .sec{padding:88px 0 96px} }
.sec__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}
.sec__title{font-size:clamp(36px,8.5vw,56px);line-height:1;color:var(--bone);margin-bottom:12px}
.sec__lead{color:var(--dust);max-width:60ch}
.sec__lead a{color:var(--bone);text-decoration-color:var(--ember)}
.sec__lead a:hover{color:var(--spark)}
.loading,.empty{color:var(--smoke);padding:24px 0;overflow-wrap:anywhere}
.sub{font-size:20px;font-weight:700;margin-bottom:14px}
.note{border-left:3px solid var(--ember);background:var(--ash);padding:12px 16px;margin:-8px 0 24px;max-width:72ch;color:var(--bone);font-weight:500;white-space:pre-line;overflow-wrap:anywhere}

/* ═════════════ Донат ═════════════ */
.paystate{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:-8px 0 24px;padding:16px 18px;background:var(--ash);border:1px solid var(--rim-2);border-left:4px solid var(--ok)}
.paystate.is-pending{border-left-color:var(--gold)}
.paystate.is-fail{border-left-color:var(--bad)}
.paystate__text{flex:1 1 320px;min-width:0;font-weight:600;overflow-wrap:anywhere}
.paystate__text a{color:var(--spark)}
.paystate:focus{outline:none}

.shop{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width:1000px){ .shop{grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start} }

.nickbar{max-width:480px;margin-bottom:28px}
.chatinput{display:flex;align-items:center;gap:10px;padding:0 14px;background:rgba(0,0,0,.42);border:1px solid var(--rim-2)}
.chatinput:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,164,28,.22)}
.chatinput__caret{color:var(--smoke);font-weight:700}
.chatinput input{flex:1;min-width:0;min-height:50px;background:none;border:0;outline:none;font-size:19px;font-weight:600;color:var(--bone)}
.chatinput input::placeholder{color:#7D6155}
.chatinput.is-bad{border-color:var(--bad)}

.cats,.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{min-height:42px;padding:0 16px;font-weight:600;font-size:15px;color:var(--dust);background:transparent;border:1px solid var(--rim-2);border-radius:2px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:color var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.chip:hover{color:var(--bone);border-color:#8A4630}
.chip:active{transform:scale(.96);transition-duration:60ms}
/* с подложкой K.seg выбранный пункт прозрачный — его фон и рамку рисует скользящая подложка */
.seg > .chip[aria-selected="true"]{background:transparent;border-color:transparent;box-shadow:none}
.chip[aria-selected="true"]{color:var(--bone);background:#3A1E16;border-color:var(--ember);box-shadow:inset 0 -2px 0 var(--ember)}

/* карточки рангов: верхняя кромка цвета ранга, строка чата «как в игре» */
.ranks{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:640px){ .ranks{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rank{--rank:#FFFF55;position:relative;display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--ash);border:1px solid var(--rim);border-top:3px solid var(--rank);
  transition:transform var(--t-mid) var(--ease-out)}
/* карточка ранга: на ПК приподнимается, снизу разгорается свечение цвета ранга (готовая тень, меняется только opacity) */
.rank::after{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;transition:opacity var(--t-mid) var(--ease-out);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--rank) 45%,transparent),0 18px 40px -18px color-mix(in srgb,var(--rank) 60%,transparent)}
@media (hover:hover) and (pointer:fine){
  .rank:hover{transform:translateY(-3px)}
  .rank:hover::after{opacity:1}
}
.rank__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rank__name{font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.05;overflow-wrap:anywhere}
.price{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1;color:var(--spark);white-space:nowrap;font-variant-numeric:tabular-nums}
.price small{font-size:.7em;margin-left:2px}
.chatline{padding:7px 10px;background:rgba(0,0,0,.5);font-weight:500;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.chatline__cap{display:block;font-size:12px;color:var(--smoke);margin-bottom:2px;font-weight:500}
.perks{list-style:none;display:grid;gap:6px;font-size:14.5px;color:var(--dust)}
.perks li{position:relative;padding-left:16px}
.perks li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--rank,var(--ember))}
.more-perks summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--gold);list-style:none;padding:4px 0}
.more-perks summary::-webkit-details-marker{display:none}
.more-perks summary::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.more-perks[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.more-perks .perks{margin-top:6px}
.rank__buy{margin-top:auto;padding-top:4px}
.buy{display:flex;align-items:center;gap:12px}
.rank__buy .btn--add{width:100%}
.buy__in{font-size:14px;font-weight:600;color:var(--ok)}
.good__side .buy__in{display:none}

/* остальные товары — строками */
.goods{list-style:none;border-top:1px solid var(--rim)}
.ranks + .goods{margin-top:24px}
.good{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rim)}
.good__img{grid-row:span 2;width:52px;height:52px;object-fit:cover;background:var(--soot);image-rendering:pixelated}
.good__img--none{display:grid;place-items:center;font-family:var(--f-display);color:var(--gold);font-size:20px}
.good__name{font-weight:700;font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.good > *{min-width:0}
.good__desc{grid-column:2;font-size:14.5px;color:var(--dust);overflow-wrap:anywhere}
.good__side{grid-column:3;grid-row:1 / span 2;display:flex;align-items:center;gap:16px}
@media (max-width:560px){
  .good{grid-template-columns:52px minmax(0,1fr)}
  .good__side{grid-column:2;grid-row:auto;justify-content:space-between;margin-top:8px}
}

.qty{display:inline-flex;align-items:center;border:1px solid var(--rim-2);background:rgba(0,0,0,.3)}
.qty button{display:grid;place-items:center;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--bone);font-size:22px;line-height:1}
.qty button:hover{background:rgba(255,255,255,.07)}
.qty output{min-width:32px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.qty--sm button{width:36px;height:36px;font-size:19px}
.qty--sm output{min-width:24px;font-size:15px}

/* корзина */
.checkout{display:grid;gap:16px;padding:22px;background:var(--ash);border:1px solid var(--rim);border-top:3px solid var(--ember);scroll-margin-top:calc(var(--bar-h) + 16px)}
@media (min-width:1000px){ .checkout{position:sticky;top:calc(var(--bar-h) + 20px)} }
.checkout__title{font-size:22px;font-weight:700}
.checkout__to{font-size:15px;color:var(--dust);margin-top:-8px}
.checkout__to b{color:var(--bone)}
.checkout__empty{color:var(--smoke);font-size:15px}
.lines{display:grid;gap:14px}
.lines:empty{display:none}
.line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--rim)}
.line__name{font-weight:700;overflow-wrap:anywhere}
.line__sum{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.line .qty{grid-column:1}
.line__field{grid-column:1 / -1}
.line__field .input{min-height:40px;font-size:15px}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:4px;color:var(--dust);font-weight:600}
.total b{font-family:var(--f-display);font-weight:400;font-size:30px;color:var(--spark);font-variant-numeric:tabular-nums}
.msg{font-size:14px;color:var(--smoke);overflow-wrap:anywhere}
.msg.is-bad{color:var(--bad);font-weight:600}
.msg.is-ok{color:var(--ok);font-weight:600}
.paylink{font-weight:600;color:var(--spark)}

/* полоска корзины на телефоне */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(37,20,16,.97);border-top:1px solid var(--rim-2)}
.cartbar__sum{color:var(--dust);font-weight:600}
.cartbar__sum b{font-family:var(--f-display);font-weight:400;font-size:20px;color:var(--spark);margin-left:4px}
@media (min-width:1000px){ .cartbar{display:none!important} }
body.has-cartbar .foot{padding-bottom:96px}
body.has-cartbar .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

/* ═════════════ Топы ═════════════ */
.updated{font-size:14px;color:var(--smoke)}
.board{min-height:120px;max-width:920px}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px;max-width:760px;margin:8px 0 28px}
.pod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0}
.pod--1{order:2}.pod--2{order:1}.pod--3{order:3}
.pod__star{font-size:30px;line-height:1}
.pod--1 .pod__star{font-size:40px}
.pod__name{font-weight:700;font-size:16px;line-height:1.25;max-width:100%;overflow-wrap:anywhere}
.pod__league{font-size:13px;font-weight:600}
.pod__elo{font-family:var(--f-display);font-weight:400;font-size:22px;color:var(--bone);margin-top:2px;font-variant-numeric:tabular-nums}
.pod--1 .pod__elo{font-size:28px}
.pod__base{width:100%;margin-top:8px;display:grid;place-items:center;background:var(--ash);border:1px solid var(--rim);border-top:3px solid var(--medal);
  font-family:var(--f-display);font-weight:400;font-size:34px;color:var(--medal);height:64px}
.pod--1{--medal:#FFD23F}.pod--2{--medal:#D9CFC7}.pod--3{--medal:#D88A52}
.pod--1 .pod__base{height:112px;font-size:46px;background:linear-gradient(180deg,#3A1B10,var(--ash))}
.pod--2 .pod__base{height:84px}
.pod--empty .pod__name{color:var(--smoke);font-weight:500}
@media (min-width:720px){ .pod__name{font-size:18px} .pod--1 .pod__name{font-size:20px} }

.tablebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:12px}
.search{position:relative;flex:1 1 260px;max-width:360px}
.search svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--smoke);pointer-events:none}
.search .input{padding-left:40px}
.count{font-size:14px;color:var(--smoke)}

.ranktable{width:100%;font-variant-numeric:tabular-nums}
.ranktable th{font-size:13px;font-weight:600;color:var(--smoke);text-align:left;padding:8px 10px;border-bottom:1px solid var(--rim-2)}
.ranktable td{padding:11px 10px;border-bottom:1px solid var(--rim);vertical-align:middle}
.ranktable .num{text-align:right;white-space:nowrap}
.ranktable td.place{width:52px;color:var(--smoke);font-weight:700}
.ranktable td.name{font-weight:600;overflow-wrap:anywhere}
.ranktable td.elo{font-family:var(--f-display);font-weight:400;font-size:17px}
.ranktable td.peak{color:var(--smoke)}
.ranktable tbody tr:hover td{background:rgba(255,255,255,.025)}
.ranktable tr.is-me td{background:rgba(242,164,28,.08)}
.league{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;white-space:nowrap}
.league__star{font-size:16px;line-height:1}
@media (max-width:640px){
  .ranktable .peak,.league__name{display:none}
  .ranktable th,.ranktable td{padding-inline:6px}
  .ranktable td.place{width:40px}
}
.board__more{margin-top:16px}

.board-empty{padding:28px;background:var(--ash);border:1px solid var(--rim);max-width:640px}
.board-empty p{color:var(--dust);margin-bottom:16px}
.board-empty .board-empty__title{color:var(--bone);font-weight:700;font-size:18px;margin-bottom:8px}

.leagues{margin-top:48px}
.ladder{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:920px}
@media (min-width:720px){ .ladder{grid-template-columns:repeat(5,minmax(0,1fr))} }
.ladder li{display:grid;gap:2px;padding:10px 12px;background:var(--ash);border-left:3px solid var(--tier)}
.ladder__name{font-weight:700;color:var(--tier)}
.ladder__min{font-size:13px;color:var(--smoke)}

.minitops{--cols:3;display:grid;grid-template-columns:minmax(0,1fr);gap:36px 40px;margin-top:56px}
@media (min-width:760px){ .minitops{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .minitops{grid-template-columns:repeat(var(--cols),minmax(0,1fr))} }
.minitop h3{font-size:20px;font-weight:700;margin-bottom:10px}
.minitop ol{list-style:none}
.minitop li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--rim)}
.minitop .p{color:var(--smoke);font-weight:700;font-variant-numeric:tabular-nums}
.minitop .n{font-weight:600;overflow-wrap:anywhere}
.minitop .n small{color:var(--gold);font-weight:700;margin-right:6px;font-size:13px}
.minitop .v{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--bone)}
.minitop .v b{font-family:var(--f-display);font-weight:400;font-size:17px}
.minitop .v small{color:var(--smoke);margin-left:6px;font-size:13px}
.minitop .btn{margin-top:12px}
.minitop .select{margin-bottom:6px;font-weight:600;cursor:pointer}

/* ═════════════ Новости ═════════════ */
.feed{border-top:1px solid var(--rim)}
.post{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:28px 0;border-bottom:1px solid var(--rim);scroll-margin-top:calc(var(--bar-h) + 16px)}
.post > *{min-width:0}
.post__date{font-size:14px;font-weight:600;color:var(--smoke)}
.post__title{font-size:22px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.post__title a{text-decoration:none}
.post__title a:hover{color:var(--spark);text-decoration:underline;text-decoration-color:var(--ember)}
.post__text{color:var(--dust);max-width:68ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;white-space:pre-line;overflow-wrap:anywhere}
.post__read{justify-self:start;font-weight:600;color:var(--gold);text-decoration:none;padding:6px 0}
.post__read:hover{text-decoration:underline}
.post__img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ash)}
@media (min-width:860px){
  .post{grid-template-columns:150px minmax(0,1fr) 260px;gap:8px 32px;align-items:start}
  .post__date{grid-row:1 / span 3;padding-top:4px}
  .post__title,.post__text,.post__read{grid-column:2}
  .post__img{grid-column:3;grid-row:1 / span 3}
}
.more{margin-top:24px}

/* окно новости */
/* KORNEI (02.11): окно не шире экрана минус поля — длинный заголовок-ссылка переносится, а не раздвигает окно */
.reader{width:min(760px,calc(100vw - 2 * var(--gutter)));max-width:calc(100vw - 2 * var(--gutter));max-height:calc(100% - 32px);padding:0;color:var(--bone);background:var(--ash);border:1px solid var(--rim-2);border-top:3px solid var(--ember)}
.reader::backdrop{background:rgba(12,5,3,.78)}
.reader__bar{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;gap:8px;padding:10px;background:var(--ash);border-bottom:1px solid var(--rim)}
.reader__close{width:44px;padding:0}
.reader__body{min-width:0;padding:20px 22px 28px}
@media (min-width:720px){ .reader__body{padding:28px 40px 40px} }
.reader__img{width:100%;max-height:420px;object-fit:cover;margin-bottom:22px}
.reader__date{font-size:14px;font-weight:600;color:var(--smoke);margin-bottom:8px}
.reader__title{font-size:clamp(24px,5vw,32px);font-weight:700;line-height:1.2;margin-bottom:18px;overflow-wrap:anywhere}
.reader__text{max-width:66ch;color:var(--bone);font-size:17px;line-height:1.65;overflow-wrap:anywhere}
.reader__status{padding:10px 22px 0;font-size:14px;color:var(--bad);font-weight:600;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.reader__text p + p{margin-top:14px}
.reader__text a,.post__text a{color:var(--spark);overflow-wrap:anywhere}

/* ═════════════ Подвал ═════════════ */
.foot{border-top:1px solid var(--rim);background:#170B08;padding:48px 0 40px;color:var(--dust)}
.foot__grid{display:grid;gap:28px}
@media (min-width:860px){ .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start} .foot__legal{grid-column:1 / -1} }
.foot__logo{font-size:28px;text-decoration:none;color:var(--gold);text-shadow:.07em .07em 0 var(--blood)}
.foot__brand p{margin:6px 0 14px}
.ipmini{display:inline-flex;align-items:baseline;gap:12px;min-height:44px;padding:8px 14px;background:var(--ash);border:1px solid var(--rim-2);cursor:pointer;color:var(--spark);font-family:var(--f-display);font-size:18px}
.ipmini:hover{border-color:var(--ember)}
.ipmini__port{font-family:var(--f-body);font-size:14px;color:var(--dust)}
.foot__links{display:grid;gap:4px;align-content:start}
.foot__links a{display:block;padding:9px 0;color:var(--bone);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.foot__links a:hover{color:var(--spark)}
.foot__links a span{color:var(--gold)}
.foot__extra{display:contents}
.foot__legal{font-size:13px;color:var(--smoke);border-top:1px solid var(--rim);padding-top:20px}

/* ═════════════ Движение (KORNEI 02.11) ═════════════
   Один главный момент — «зажигание» первого экрана: буквы KORNEI проступают из марева, затем текст,
   затем раскаляется табличка с адресом и появляются кнопки. Всё остальное — ответ на действие человека.
   Только transform/translate/scale, opacity, filter. При prefers-reduced-motion base.css выключает всё. */

@media (prefers-reduced-motion:no-preference){
  /* буквы — из жаркого марева (filter blur + opacity у строчных span — без сдвига, кернинг цел) */
  .mark > span:not(.sr){animation:haze .9s var(--ease-out) both}
  .mark__k{animation-delay:.02s}.mark__o{animation-delay:.07s}.mark__r{animation-delay:.12s}
  .mark__n{animation-delay:.17s}.mark__e{animation-delay:.22s}.mark__i{animation-delay:.27s}
  .mark{animation:rise-in .9s var(--ease-out) both}
  .lead{animation:rise-in .7s var(--ease-out) .32s both}
  .plate{animation:plate-in .8s var(--ease-spring) .46s both}
  .plate-wrap::before{animation:ignite 1.2s var(--ease-out) .56s both,heat 3.6s ease-in-out 1.76s infinite alternate}
  .plate-meta{animation:rise-in .6s var(--ease-out) .72s both}
  .hero__links{animation:rise-in .6s var(--ease-out) .82s both}
  .howto{animation:rise-in .7s var(--ease-out) .94s both}
  .modes{animation:rise-in .8s var(--ease-out) .62s both}
}
@keyframes haze{from{opacity:0;filter:blur(10px)}}
@keyframes plate-in{from{opacity:0;translate:0 12px;scale:.97}}
@keyframes ignite{from{opacity:0;transform:scale(.8)}to{opacity:.85;transform:scale(1)}}

/* живой онлайн — тихий пульс вокруг зелёной точки */
.dot{position:relative}
.dot.is-on::after{content:"";position:absolute;inset:0;background:var(--ok);opacity:0;animation:ping 2.6s var(--ease-out) 1.2s infinite;pointer-events:none}
@keyframes ping{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}

/* появление при прокрутке (K.reveal): прячем только при html.rv-on — без JS/IO всё видно */
.rv-on .rv:not(.rv-in){opacity:0}
.rv-in{animation:rv-rise var(--t-slow) var(--ease-out) var(--rv-d,0ms) both}
@keyframes rv-rise{from{opacity:0;translate:0 22px}}

/* пьедестал: столбики вырастают снизу, игроки поднимаются на них — второе, первое, третье место */
.podium.rv-in{animation:none}
.podium.rv-in .pod{animation:pod-rise .75s var(--ease-spring) both}
.podium.rv-in .pod__base{transform-origin:50% 100%;animation:base-grow .7s var(--ease-out) both}
.podium.rv-in .pod--2,.podium.rv-in .pod--2 .pod__base{animation-delay:.08s}
.podium.rv-in .pod--1,.podium.rv-in .pod--1 .pod__base{animation-delay:.2s}
.podium.rv-in .pod--3,.podium.rv-in .pod--3 .pod__base{animation-delay:.32s}
@keyframes pod-rise{from{opacity:0;translate:0 28px}}
@keyframes base-grow{from{transform:scaleY(.25)}}

/* строки топа после поиска / «Показать ещё» — быстрая лесенка */
.results.is-anim tbody tr{animation:row-in 260ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 22ms)}
@keyframes row-in{from{opacity:0;translate:0 8px}}

/* корзина: значок количества и полоска «К оплате» */
.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:8px;border-radius:2px;vertical-align:2px;
  font:700 13px/1 var(--f-body);color:#2A0D05;background:linear-gradient(180deg,#FFD23F,#E8641A);font-variant-numeric:tabular-nums}
.cartbar .badge{margin:0 0 0 2px}
.cartbar:not([hidden]){animation:bar-up var(--t-mid) var(--ease-out) both}
@keyframes bar-up{from{translate:0 100%}}
.line{transform-origin:50% 0}
.paystate:not([hidden]){animation:rise-in var(--t-mid) var(--ease-out) both}
.banner:not([hidden]){animation:fade-in var(--t-slow) var(--ease-out) both}

/* смена вкладки (каталог, топ): View Transitions — плавная смена только этого блока, страница не мигает */
#catalog{view-transition-name:catalog}
#board{view-transition-name:board}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(catalog),::view-transition-group(board){animation-duration:var(--t-mid);animation-timing-function:var(--ease-out)}
/* старое уходит быстро, новое входит с небольшой паузой — без «двойной экспозиции» текста */
::view-transition-old(catalog),::view-transition-old(board){animation:fade-out 100ms var(--ease-in) both}
::view-transition-new(catalog),::view-transition-new(board){animation:vt-in 280ms var(--ease-out) 70ms both}
@keyframes vt-in{from{opacity:0;translate:0 8px}}

/* окно новости: картинка проявляется после открытия */
.reader[open] .reader__img{animation:fade-in var(--t-slow) var(--ease-out) .08s both}