/* февраль · мои любимые игры */
@font-face{font-family:"Dela Gothic One";src:url(/fonts/dela-gothic-one.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Golos Text";src:url(/fonts/golos-text.woff2) format("woff2");font-weight:400 900;font-display:swap}

:root{
  --bg:#dfe2dc;--paper:#f6f6f1;--ink:#15171a;--muted:#5b615d;--soft:#c9cdc6;
  --accent:#ff4d2e;--on-accent:#fff;
  --display:"Dela Gothic One","Arial Black",Impact,sans-serif;
  --text:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --field:#fff;--placeholder:#8d928e;--danger:#c4321b;--shade:#15171a;
  --hard:4px 4px 0 var(--shade);
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315171a' stroke-width='2'/%3E%3C/svg%3E");
  color-scheme:light;
}
/* тёмная тема: по системе, если не выбрана вручную, или по кнопке */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#15171a;--paper:#1f2226;--ink:#ecebe4;--muted:#9ea49f;--soft:#33373d;
  --accent:#ff5a3c;--field:#121417;--placeholder:#6f7570;--danger:#ff7a63;--shade:#000;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ecebe4' stroke-width='2'/%3E%3C/svg%3E");
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#15171a;--paper:#1f2226;--ink:#ecebe4;--muted:#9ea49f;--soft:#33373d;
  --accent:#ff5a3c;--field:#121417;--placeholder:#6f7570;--danger:#ff7a63;--shade:#000;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ecebe4' stroke-width='2'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.5 var(--text);background:var(--bg)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1560px;margin:0 auto;padding:0 40px 64px}

/* ---- шапка ---- */
.head{position:relative;padding:48px 0 0}
.head h1{margin:0;font:400 clamp(40px,7vw,112px)/.9 var(--display);letter-spacing:-.01em;text-transform:uppercase;max-width:12ch}
.head p{margin:20px 0 0;color:var(--muted);font-size:16px;max-width:56ch}
.sticker{position:absolute;right:0;top:44px;transform:rotate(4deg);background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shade);border-radius:14px;padding:14px 22px 12px;text-align:center;font-variant-numeric:tabular-nums}
.sticker b{display:block;font:400 clamp(48px,6vw,92px)/.9 var(--display)}
.sticker>span{display:block;margin-top:6px;font-weight:700;font-size:15px}

/* 99 делений — по одному на категорию */
.ticks{display:grid;grid-template-columns:repeat(99,minmax(0,1fr));gap:3px;margin:34px 0 0;height:22px}
.ticks button{padding:0;border:0;border-radius:2px;background:var(--soft);transition:background .2s,transform .15s}
.ticks button.on{background:var(--ink)}
.ticks button:hover{background:var(--accent);transform:scaleY(1.25)}

.controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;padding:22px 0 34px;margin-bottom:6px}
.controls .gap{flex:1}
.hint-row{color:var(--muted);font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);font-weight:700;font-size:15px;white-space:nowrap;text-decoration:none;color:var(--ink);box-shadow:var(--hard);transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--shade)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--shade)}
.btn.accent{background:var(--accent);color:var(--on-accent)}
.btn.plain{box-shadow:none;border-color:transparent;background:none;color:var(--muted)}
.btn.plain:hover{color:var(--ink);transform:none;box-shadow:none;text-decoration:underline}
.btn.plain:active{transform:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--hard)}
.btn.plain:disabled{box-shadow:none}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:13px;color:var(--muted)}
.select{height:46px;min-width:180px;padding:0 38px 0 14px;border:2px solid var(--ink);border-radius:10px;font-weight:600;font-size:15px;box-shadow:var(--hard);
  background:var(--paper) var(--chevron) no-repeat right 14px center;appearance:none;-webkit-appearance:none}

/* ---- стена ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:34px 22px;list-style:none;margin:0;padding:0}
.cat{position:relative;min-width:0}
.cat-btn{display:block;width:100%;padding:0;border:0;background:none;text-align:left;color:inherit}
.cat-btn:focus-visible{outline:none}
.frame{position:relative;aspect-ratio:2/3;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper);box-shadow:var(--hard);transition:transform .12s,box-shadow .12s}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.cat-btn:hover .frame,.cat-btn:focus-visible .frame{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--accent)}
.cat-btn:focus-visible .frame{outline:3px solid var(--accent);outline-offset:4px}
.frame.empty-frame{border-style:dashed;border-color:color-mix(in srgb,var(--ink) 40%,transparent);background:color-mix(in srgb,var(--paper) 45%,transparent);box-shadow:none}
.cat-btn:hover .frame.empty-frame{border-style:solid;border-color:var(--ink);background:var(--paper);box-shadow:7px 7px 0 var(--accent)}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:13px;font-weight:600}
.empty i{font:400 46px/1 var(--display);font-style:normal;color:color-mix(in srgb,var(--ink) 25%,transparent);transition:color .12s,transform .12s}
.cat-btn:hover .empty i{color:var(--accent);transform:rotate(90deg)}
.noart{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;text-align:center;font:400 18px/1.1 var(--display);text-transform:uppercase;background:var(--paper)}
.edit{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;border:2px solid var(--ink);opacity:0;transform:scale(.7) rotate(-20deg);transition:opacity .12s,transform .12s}
.edit svg{width:14px;height:14px}
.cat-btn:hover .edit,.cat-btn:focus-visible .edit{opacity:1;transform:none}
.cap{margin-top:14px}
.cap .c{display:block;font-weight:800;font-size:15px;line-height:1.22}
.cap .g{display:block;margin-top:5px;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat.pop .frame{animation:pop .45s cubic-bezier(.2,.9,.3,1.35)}
@keyframes pop{0%{transform:scale(.9) rotate(-2deg)}100%{transform:none}}

/* подсказка «что сюда подходит» */
.tip{position:absolute;left:-10px;right:-10px;bottom:calc(100% + 12px);z-index:5;padding:12px 14px;background:var(--ink);color:var(--paper);border-radius:10px;font-size:13px;line-height:1.45;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility 0s .15s}
.tip::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:var(--ink)}
.tip b{display:block;color:var(--accent);font-weight:800;margin-bottom:3px}
.cat:hover .tip,.cat:focus-within .tip{opacity:1;visibility:visible;transform:none;transition-delay:.35s,.35s,0s}

/* ---- окно выбора ---- */
dialog{border:2px solid var(--ink);padding:0;background:var(--paper);color:var(--ink);border-radius:14px;width:min(820px,calc(100vw - 32px));max-height:min(880px,calc(100vh - 40px));box-shadow:10px 10px 0 var(--shade);overflow:hidden}
dialog::backdrop{background:rgba(8,9,10,.6)}
dialog[open]{animation:rise .2s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px) rotate(-.6deg)}to{opacity:1;transform:none}}
.dlg{display:flex;flex-direction:column;max-height:inherit}
.dlg-head{padding:24px 28px 18px;position:relative;border-bottom:2px solid var(--ink);background:var(--bg)}
.dlg-head .n{display:inline-block;font-weight:800;font-size:13px;background:var(--ink);color:var(--paper);padding:3px 9px;border-radius:6px}
.dlg-head h3{margin:12px 52px 0 0;font:400 30px/1.02 var(--display);text-transform:uppercase}
.dlg-head p{margin:10px 0 0;color:var(--muted);font-size:15px;max-width:62ch}
.dlg-close{position:absolute;right:16px;top:16px;width:42px;height:42px;padding:0;font-size:18px}
.dlg-body{padding:22px 28px;overflow:auto;flex:1;min-height:220px}
.dlg-foot{padding:16px 28px 20px;border-top:2px solid var(--ink);display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--bg)}
.dlg-foot .spacer{flex:1}

.search{width:100%;height:54px;padding:0 18px;font-size:17px;font-weight:500;border:2px solid var(--ink);border-radius:10px;background:var(--field);box-shadow:var(--hard)}
.search::placeholder{color:var(--placeholder)}
.search:focus{outline:none;box-shadow:4px 4px 0 var(--accent)}
.results{list-style:none;margin:16px 0 0;padding:0}
.results li+li{border-top:1px solid var(--soft)}
.results button{display:flex;align-items:baseline;gap:16px;width:100%;text-align:left;border:0;background:none;padding:12px 12px;font-size:16px;font-weight:600;border-radius:8px}
.results button:hover,.results button:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.results .name{flex:1;min-width:0}
.results .year{color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px;font-weight:500}
.results button:hover .year,.results button:focus-visible .year{color:var(--soft)}
.hint{color:var(--muted);font-size:14px;margin:16px 2px}
.hint.err{color:var(--danger);font-weight:600}
.picked{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.picked b{font:400 22px/1.15 var(--display)}
.picked span{color:var(--muted)}
.posters{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:16px}
.posters button{position:relative;padding:0;border:2px solid var(--ink);border-radius:8px;background:var(--bg);aspect-ratio:2/3;overflow:hidden;transition:transform .1s,box-shadow .1s}
.posters button:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shade)}
.posters button.sel{box-shadow:4px 4px 0 var(--accent);border-color:var(--accent)}
.posters img{width:100%;height:100%;object-fit:cover;display:block}
.upload{position:relative}
.upload input{position:absolute;width:1px;height:1px;opacity:0}
.upload:focus-within{outline:3px solid var(--accent);outline-offset:3px}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,10px);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:10px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:30;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

footer{margin-top:80px;padding-top:18px;border-top:2px solid var(--ink);color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

.lost{min-height:80vh;display:flex;flex-direction:column;justify-content:center;max-width:820px}
.lost h1{margin:0;font:400 clamp(44px,8vw,110px)/.92 var(--display);text-transform:uppercase}
.lost p{color:var(--muted);font-size:17px;margin:22px 0 30px}
.lost .btn{align-self:flex-start}

@media (max-width:1000px){
  .head{padding-right:0}
  .sticker{position:static;display:inline-block;margin-top:22px;transform:rotate(-3deg)}
  .ticks{gap:2px;height:18px}
}
@media (max-width:640px){
  .wrap{padding:0 16px 40px}
  .head{padding-top:30px}
  .ticks{gap:1px;height:16px}
  .controls{gap:14px}
  .controls .gap{display:none}
  .controls .btn,.controls .field{flex:1 1 calc(50% - 7px)}
  .controls .select{min-width:0;width:100%}
  .controls .btn.accent{flex-basis:100%}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .cap .c{font-size:14px}
  .tip{display:none}
  dialog{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:14px 14px 0 0;box-shadow:none;border-bottom:0}
  .dlg-head,.dlg-body,.dlg-foot{padding-left:16px;padding-right:16px}
  .dlg-head h3{font-size:22px}
  .posters{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* кнопка темы */
.theme-btn{width:46px;padding:0}
.theme-btn svg{width:20px;height:20px}
.controls .theme-btn{flex:0 0 46px}

/* ---- переключатель режима ---- */
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:var(--hard);background:var(--paper)}
.seg button{height:42px;padding:0 16px;border:0;background:none;font-weight:700;font-size:15px;color:var(--muted)}
.seg button+button{border-left:2px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:not([aria-pressed="true"]):hover{color:var(--ink)}

/* ---- режим «по одной» ---- */
.focus[hidden]{display:none}
.focus-card{display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:40px;padding:32px;background:var(--paper);border:2px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 var(--shade)}
.focus-art .frame{box-shadow:var(--hard)}
.focus-art .frame.empty-frame{box-shadow:none}
.focus-n{font-weight:800;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.focus-n b{color:var(--accent)}
.focus-title{margin:10px 0 0;font:400 clamp(28px,3.6vw,52px)/1 var(--display);text-transform:uppercase}
.focus-desc{margin:14px 0 0;color:var(--muted);font-size:16px;max-width:62ch}
.focus-body{margin-top:24px}
.focus-body .results{max-height:340px;overflow:auto}
.focus-body .posters{max-height:430px;overflow:auto;padding:4px 8px 8px 2px}
.focus-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.focus-foot:empty{display:none}
.focus-foot .spacer{flex:1}
.focus-nav{display:flex;align-items:center;gap:16px;margin-top:26px}
.focus-nav .check{margin:0 auto}
.check{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--muted);cursor:pointer;user-select:none}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.focus-done{padding:8px 0}
.focus-done h3{margin:0;font:400 clamp(26px,3vw,44px)/1 var(--display);text-transform:uppercase}
.focus-done p{color:var(--muted);margin:12px 0 22px}
.focus-done .row{display:flex;flex-wrap:wrap;gap:12px}
.focus-card.flash{animation:flash .35s cubic-bezier(.2,.8,.2,1)}
@keyframes flash{from{opacity:.4;transform:translateX(18px)}to{opacity:1;transform:none}}
.focus-card.flash-back{animation:flashb .35s cubic-bezier(.2,.8,.2,1)}
@keyframes flashb{from{opacity:.4;transform:translateX(-18px)}to{opacity:1;transform:none}}

@media (max-width:820px){
  .focus-card{grid-template-columns:1fr;gap:22px;padding:20px}
  .focus-art{max-width:180px}
}
@media (max-width:640px){
  .seg{flex:1 1 100%}
  .seg button{flex:1}
  .focus-card{padding:16px;border-radius:12px;box-shadow:5px 5px 0 var(--shade)}
  .focus-art{max-width:130px}
  .focus-nav{flex-wrap:wrap;gap:12px}
  .focus-nav .check{order:-1;flex-basis:100%;justify-content:center}
  .focus-nav .btn{flex:1}
  .focus-body .posters{max-height:none}
}
@media (prefers-reduced-motion:reduce){.focus-card.flash,.focus-card.flash-back{animation:none}}
.grid[hidden]{display:none}
@media (max-width:640px){
  .focus-card{grid-template-columns:76px minmax(0,1fr);column-gap:14px;row-gap:0;align-items:start}
  .focus-main{display:contents}
  .focus-art{grid-column:1;grid-row:1/3;max-width:none}
  .focus-art .cap{display:none}
  .focus-art .frame{border-radius:6px;box-shadow:3px 3px 0 var(--shade)}
  .focus-art .empty{font-size:0;gap:0}
  .focus-art .empty i{font-size:30px}
  .focus-n{grid-column:2}
  .focus-title{grid-column:2;font-size:22px;margin-top:6px}
  .focus-desc,.focus-body,.focus-foot{grid-column:1/-1}
  .focus-desc{font-size:14.5px}
}
@media (max-width:640px){
  .focus-foot{gap:10px}
  .focus-foot .spacer{display:none}
  .focus-foot .btn{flex:1 1 calc(50% - 5px);padding:0 10px}
}

/* ---- общее для разделов ---- */
.crumb{display:inline-block;margin-bottom:18px;font-weight:800;font-size:15px;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:1px}
.crumb::before{content:"← ";color:var(--accent)}
.crumb:hover{color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- главная ---- */
.hub-head{padding-top:64px;padding-right:70px}
.hub-head h1{font-size:clamp(64px,13vw,200px);max-width:none}
.hub-head p{font-size:18px}
.hub-theme{position:absolute;right:0;top:64px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px}
.tile{display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 var(--shade);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .12s,box-shadow .12s}
a.tile:hover,a.tile:focus-visible{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--accent);outline:none}
a.tile:active{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--shade)}
.tile-art{position:relative;height:220px;border-bottom:2px solid var(--ink);background:var(--bg);overflow:hidden}
.tile-text{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px 26px 28px;flex:1}
.tile h2{margin:0;font:400 clamp(24px,2.3vw,34px)/1.02 var(--display);text-transform:uppercase}
.tile p{margin:0 0 6px;color:var(--muted);font-size:15.5px;flex:1}
.tile .btn{pointer-events:none}
/* миниатюра «кадр + пять делений» */
.mini-shot{position:absolute;left:50%;top:24px;height:122px;aspect-ratio:16/9;transform:translateX(-50%) rotate(-2deg);background:#000;border:2px solid var(--ink);border-radius:8px;box-shadow:5px 5px 0 var(--shade);display:grid;place-items:center;
  background-image:linear-gradient(160deg,#2c3a33 0%,#1a1f24 55%,#40291f 100%)}
.mini-shot span{font:400 64px/1 var(--display);color:var(--accent)}
.mini-pips{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:6px}
.mini-pips i{width:26px;height:10px;border-radius:3px;background:var(--soft);border:2px solid var(--ink)}
.mini-pips i.on{background:var(--accent)}
a.tile:hover .mini-shot{transform:translateX(-50%) rotate(1deg) scale(1.03);transition:transform .25s}
/* миниатюра «три постера и стикер» */
.art-top i{position:absolute;top:34px;width:31%;aspect-ratio:2/3;border:2px solid var(--ink);border-radius:7px;box-shadow:4px 4px 0 var(--shade)}
.art-top .p1{left:12%;transform:rotate(-7deg);background:linear-gradient(170deg,#355c7d,#1d2b3a)}
.art-top .p2{left:34.5%;top:22px;background:linear-gradient(170deg,#e9b44c,#9b4d2a);z-index:1}
.art-top .p3{left:57%;transform:rotate(6deg);background:linear-gradient(170deg,#6a8d5a,#22352a)}
.mini-sticker{position:absolute;right:9%;top:16px;z-index:2;transform:rotate(8deg);background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--shade);padding:6px 12px 4px;font:400 34px/1 var(--display)}
a.tile:hover .art-top .p1{transform:rotate(-11deg) translateX(-6px);transition:transform .25s}
a.tile:hover .art-top .p3{transform:rotate(10deg) translateX(6px);transition:transform .25s}
/* миниатюра «отзыв» и неготовая плитка */
.bubble{position:absolute;left:12%;right:12%;top:34px;padding:18px 18px 18px 70px;background:var(--paper);border:2px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--shade)}
.bubble::after{content:"";position:absolute;left:30px;bottom:-14px;width:22px;height:22px;background:var(--paper);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:skewY(35deg) rotate(10deg)}
.bubble i{display:block;height:9px;border-radius:4px;background:var(--soft);margin:7px 0}
.thumb{position:absolute;left:16px;top:18px;width:38px;height:38px;border-radius:8px;border:2px solid var(--ink);display:grid;place-items:center;background:var(--bg)}
.thumb svg{width:20px;height:20px}
.tile.soon{background:color-mix(in srgb,var(--paper) 55%,var(--bg));border-style:dashed;box-shadow:none;color:var(--muted);cursor:not-allowed}
.tile.soon .tile-art{filter:grayscale(1);opacity:.55;border-bottom-style:dashed}
.tile.soon h2{color:var(--muted)}
.badge{display:inline-block;padding:4px 10px;border-radius:6px;background:var(--muted);color:var(--paper);font-weight:800;font-size:13px}

/* ---- угадайка ---- */
.g-head{padding-right:240px}
.g-head{padding-top:36px}
.g-head h1{font-size:clamp(32px,4.2vw,64px);max-width:none}
.g-bar{display:flex;align-items:center;gap:18px;margin:32px 0 22px}
.g-count{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.g-ticks{flex:1;margin:0;height:18px}
.g-ticks i{border-radius:2px;background:var(--soft)}
.g-ticks i.ok{background:var(--ink)}
.g-ticks i.miss{background:var(--accent)}
.g-ticks i.now{background:var(--bg);box-shadow:inset 0 0 0 2px var(--ink)}
.g-bar .theme-btn{flex:0 0 46px}
.g-stage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
.g-stage[hidden],.g-final[hidden]{display:none}
.g-shot{position:relative;aspect-ratio:16/9;background:#000;border:2px solid var(--ink);border-radius:12px;box-shadow:8px 8px 0 var(--shade);overflow:hidden}
.g-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.g-shot.flip img{animation:shot .35s cubic-bezier(.2,.8,.2,1)}
@keyframes shot{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.g-shot.won{box-shadow:8px 8px 0 var(--accent)}
.g-pips{display:flex;gap:10px;margin-top:20px}
.g-pips button{width:46px;height:40px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);font-weight:800;font-variant-numeric:tabular-nums;box-shadow:3px 3px 0 var(--shade)}
.g-pips button.on{background:var(--ink);color:var(--paper)}
.g-pips button:disabled{background:none;border-style:dashed;border-color:color-mix(in srgb,var(--ink) 35%,transparent);color:color-mix(in srgb,var(--ink) 35%,transparent);box-shadow:none;cursor:default}
.g-panel{background:var(--paper);border:2px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 var(--shade);padding:24px}
.g-worth{font-size:15px;color:var(--muted);margin-bottom:16px}
.g-worth b{color:var(--ink)}
.g-input{position:relative}
.g-sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:10;list-style:none;margin:0;padding:6px;background:var(--field);border:2px solid var(--ink);border-radius:10px;box-shadow:var(--hard);max-height:340px;overflow:auto}
.g-sugg li{display:flex;align-items:baseline;gap:12px;padding:10px 10px;border-radius:7px;font-weight:600;cursor:pointer}
.g-sugg li.on,.g-sugg li:hover{background:var(--ink);color:var(--paper)}
.g-sugg .name{flex:1;min-width:0}
.g-sugg .year{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.g-sugg li.on .year,.g-sugg li:hover .year{color:var(--soft)}
.g-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.g-actions .btn{flex:1 1 auto}
.g-panel .hint{margin:14px 2px 0;font-size:13.5px}
.g-wrong{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.g-wrong:empty{display:none}
.g-wrong li{padding:8px 12px;border-radius:8px;background:var(--bg);color:var(--muted);text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px;font-size:14px}
.g-form.shake{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.g-verdict{display:inline-block;padding:4px 10px;border-radius:6px;font-weight:800;font-size:13px;background:var(--ink);color:var(--paper)}
.g-verdict.miss{background:var(--accent);color:var(--on-accent)}
.g-answer{margin:14px 0 0;font:400 clamp(26px,2.4vw,36px)/1.02 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.g-meta{margin:8px 0 0;color:var(--muted);font-weight:600}
.g-plus{margin:14px 0 0;display:inline-block;transform:rotate(-3deg);background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--shade);padding:6px 14px 4px;font:400 28px/1 var(--display);animation:pop .45s cubic-bezier(.2,.9,.3,1.35)}
.g-result .g-actions{margin-top:22px}
/* итоги */
.g-final{background:var(--paper);border:2px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 var(--shade);padding:36px}
.g-total{display:inline-flex;align-items:baseline;gap:14px;transform:rotate(-2deg);background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--shade);padding:12px 22px 8px}
.g-total b{font:400 clamp(56px,7vw,104px)/.9 var(--display)}
.g-total span{font-weight:800;font-size:18px}
.g-final h2{margin:28px 0 0;font:400 clamp(28px,3.2vw,46px)/1 var(--display);text-transform:uppercase}
.g-final .g-actions{max-width:320px}
.g-list{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px 18px}
.g-list li{display:flex;flex-direction:column;gap:4px;min-width:0}
.g-list img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;border:2px solid var(--ink);border-radius:8px;margin-bottom:6px}
.g-list li.miss img{filter:grayscale(1);opacity:.7}
.g-list .t{font-weight:800;line-height:1.2}
.g-list .r{font-size:13px;color:var(--muted)}
.g-list li.miss .r{color:var(--danger);font-weight:600}

@media (max-width:1100px){
  .tiles{grid-template-columns:1fr 1fr}
  .g-stage{grid-template-columns:1fr}
  .g-head{padding-right:0}
}
@media (max-width:1000px){
  .hub-head{padding-right:60px}
}
@media (max-width:720px){
  .tiles{grid-template-columns:1fr;gap:24px;margin-top:36px}
  .tile-art{height:190px}
}
@media (max-width:640px){
  .hub-head{padding-top:84px;padding-right:0}
  .hub-head h1{font-size:13vw}
  .hub-theme{top:24px}
  .hub-head p{font-size:16px}
  .tile-text{padding:20px 18px 22px}
  .g-bar{flex-wrap:wrap;gap:10px 14px;margin:22px 0 16px}
  .g-ticks{order:3;flex-basis:100%;height:14px}
  .g-bar .btn.plain{margin-left:auto;padding:0 6px}
  .g-shot{border-radius:8px;box-shadow:4px 4px 0 var(--shade)}
  .g-shot.won{box-shadow:4px 4px 0 var(--accent)}
  .g-pips{gap:8px;margin-top:14px}
  .g-pips button{flex:1;width:auto}
  .g-stage{gap:20px}
  .g-panel{padding:16px;border-radius:12px;box-shadow:5px 5px 0 var(--shade)}
  .g-final{padding:20px 16px}
  .g-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
}
@media (prefers-reduced-motion:reduce){.g-shot.flip img,.g-form.shake,.g-plus{animation:none}}

/* ---- режимы угадаек ---- */
.g-filter{flex:0 0 auto;box-shadow:3px 3px 0 var(--shade)}
.g-filter button{height:38px;padding:0 12px;font-size:14px}
.mode-pixel .g-shot img{image-rendering:pixelated}
.mode-cover .g-stage{grid-template-columns:minmax(0,440px) minmax(0,420px);justify-content:start}
.mode-cover .g-shot{aspect-ratio:2/3}
.mode-cover .g-shot img{object-fit:cover}
.mode-text .g-stage{grid-template-columns:minmax(0,1fr) 380px}
.g-text{min-height:360px;background:var(--paper);border:2px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 var(--shade);padding:28px 30px}
.g-hints{list-style:none;margin:0;padding:0;counter-reset:h;display:flex;flex-direction:column;gap:16px}
.g-hints li{counter-increment:h;position:relative;padding-left:52px;font-size:clamp(17px,1.5vw,21px);line-height:1.4;font-weight:500;max-width:60ch}
.g-hints li::before{content:counter(h);position:absolute;left:0;top:-2px;width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:8px;background:var(--bg);font:400 18px/1 var(--display)}
.g-hints li:last-child::before{background:var(--ink);color:var(--paper)}
.g-hints li.new{animation:hint .4s cubic-bezier(.2,.8,.2,1)}
@keyframes hint{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.g-list .quote{display:flex;align-items:center;aspect-ratio:16/9;padding:12px 14px;border:2px solid var(--ink);border-radius:8px;background:var(--bg);font-size:13px;line-height:1.35;color:var(--muted);margin-bottom:6px;overflow:hidden}
.mode-cover .g-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.mode-cover .g-list img{aspect-ratio:2/3}
.mode-pixel .g-list img{image-rendering:pixelated}

/* плитки новых режимов на главной */
.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.art-pixel .mosaic{position:absolute;left:50%;top:26px;transform:translateX(-50%) rotate(-2deg);display:grid;grid-template-columns:repeat(10,22px);grid-auto-rows:22px;border:2px solid var(--ink);border-radius:6px;overflow:hidden;box-shadow:5px 5px 0 var(--shade)}
.art-pixel .mosaic i{display:block}
a.tile:hover .art-pixel .mosaic{transform:translateX(-50%) rotate(1deg) scale(1.03);transition:transform .25s}
.art-cover .poster{position:absolute;left:50%;top:22px;width:118px;height:176px;transform:translateX(-50%) rotate(3deg);border:2px solid var(--ink);border-radius:8px;box-shadow:5px 5px 0 var(--shade);background:linear-gradient(165deg,#f2c14e 0%,#e2583e 45%,#3b2a4d 100%)}
.art-cover .poster::before{content:"";position:absolute;left:30%;top:22%;width:40%;height:44%;border-radius:50% 50% 45% 45%;background:#1d1a24;opacity:.85}
.art-cover .lens{position:absolute;left:calc(50% - 58px);top:40px;width:62px;height:62px;border:3px solid var(--accent);border-radius:6px;box-shadow:0 0 0 999px rgba(0,0,0,.0);background:rgba(255,255,255,.08);transform:rotate(3deg)}
a.tile:hover .art-cover .lens{transform:translate(18px,30px) rotate(3deg);transition:transform .3s}
.art-desc .card{position:absolute;left:12%;right:12%;top:30px;padding:16px 18px;background:var(--paper);border:2px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--shade);transform:rotate(-1.5deg)}
.art-desc .card p{margin:0 0 9px;display:flex;gap:6px;flex-wrap:wrap}
.art-desc .card i{display:inline-block;height:10px;border-radius:3px;background:var(--soft)}
.art-desc .card i.x{background:var(--ink);height:14px;margin-top:-2px}
a.tile:hover .art-desc .card i.x{background:var(--accent);transition:background .2s}

@media (max-width:1100px){
  .tiles{grid-template-columns:1fr 1fr}
  .mode-cover .g-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:820px){
  .mode-cover .g-stage{grid-template-columns:1fr}
  .mode-cover .g-shot{max-width:420px;width:100%}
}
@media (max-width:720px){
  .tiles{grid-template-columns:1fr}
}
@media (max-width:640px){
  .g-filter{order:2;flex:1 1 auto}
  .g-filter button{flex:1}
  .g-text{padding:18px 16px;min-height:0;border-radius:12px;box-shadow:5px 5px 0 var(--shade)}
  .g-hints li{padding-left:44px;font-size:16.5px}
  .g-hints li::before{width:30px;height:30px;font-size:15px}
  .mode-cover .g-shot{width:min(100%,32vh);margin:0 auto}
}
@media (prefers-reduced-motion:reduce){.g-hints li.new{animation:none}}

/* ---- дуэли: «что вышло раньше», «выше или ниже» ---- */
.d-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:28px}
.d-pair.flip .d-card{animation:shot .35s cubic-bezier(.2,.8,.2,1)}
.d-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0 0 24px;margin:0;background:var(--paper);border:2px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 var(--shade);overflow:hidden;color:var(--ink);text-align:left;font:inherit;transition:transform .12s,box-shadow .12s,opacity .2s}
.d-card img{display:block;width:100%;height:auto;aspect-ratio:460/215;object-fit:cover;background:#000;border-bottom:2px solid var(--ink);margin-bottom:14px}
.d-name{padding:0 24px;font:400 clamp(22px,2.2vw,32px)/1.04 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.d-sub{padding:0 24px;color:var(--muted);font-size:14px;font-weight:600}
.d-val{margin-top:auto;padding:14px 24px 0;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.d-val b{font:400 clamp(30px,3.2vw,48px)/1 var(--display);color:var(--ink)}
.mode-older .d-val{font:400 clamp(22px,2.2vw,30px)/1.1 var(--display);color:var(--ink)}
button.d-card{cursor:pointer}
button.d-card .d-val{color:var(--soft);letter-spacing:.1em}
button.d-card:hover,button.d-card:focus-visible{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--accent);outline:none}
button.d-card:active{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--shade)}
.d-card.first{box-shadow:8px 8px 0 var(--accent)}
.d-card.later{opacity:.75}
.d-card.later img{filter:grayscale(.85)}
.d-card.picked::after{content:"Твой выбор";position:absolute;left:14px;top:14px;padding:4px 10px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);font-weight:800;font-size:13px}
.d-ask{display:flex;gap:12px;width:100%;margin-top:auto;padding:14px 24px 0}
.d-ask .btn{flex:1}
.d-or{align-self:center;display:grid;place-items:center;width:72px;height:72px;border:2px solid var(--ink);border-radius:50%;background:var(--ink);color:var(--paper);font:400 20px/1 var(--display);transform:rotate(-8deg)}
.d-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;min-height:76px;margin-top:30px;text-align:center}
.d-foot .hint{margin:0}
.d-say{margin:0;font-weight:600;font-size:17px;max-width:62ch}
.d-foot .btn{min-width:200px}
.d-list{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.d-list img{aspect-ratio:460/215}
.d-mini{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.d-mini img{margin-bottom:6px}
.d-mini img+img{filter:grayscale(.85);opacity:.75}
.d-list li.miss .d-mini img{filter:none;opacity:1}
.d-list li.miss .d-mini img+img{filter:grayscale(.85);opacity:.75}
@media (max-width:820px){
  .d-pair{grid-template-columns:1fr;gap:0}
  .d-or{width:56px;height:56px;font-size:16px;margin:-14px 0;position:relative;z-index:1;justify-self:center}
  .d-card{flex-direction:row;flex-wrap:wrap;align-items:center;padding:0 0 18px}
  .d-card img{margin-bottom:12px}
  .d-name,.d-sub{width:100%}
}
@media (max-width:640px){
  .d-card{display:grid;grid-template-columns:44% minmax(0,1fr);align-content:start;column-gap:12px;row-gap:4px;padding:10px 12px 12px 10px;border-radius:12px;box-shadow:5px 5px 0 var(--shade)}
  .d-card.first{box-shadow:5px 5px 0 var(--accent)}
  .d-card img{grid-row:1 / span 3;align-self:start;margin:0;border:2px solid var(--ink);border-radius:6px}
  .d-name,.d-sub{width:auto;padding:0;grid-column:2}
  .d-name{font-size:17px;line-height:1.05}
  .d-sub{font-size:12.5px}
  .d-val{grid-column:2;padding:2px 0 0;font-size:13px}
  .d-val b{font-size:22px}
  .mode-older .d-val{font-size:16px}
  .d-ask{grid-column:1 / -1;padding:10px 0 0}
  .d-card.picked::after{left:14px;top:14px;padding:1px 6px;font-size:11px;border-radius:5px}
  .d-foot{margin-top:22px;gap:12px}
  .d-foot .btn{width:100%}
  .d-say{font-size:15.5px}
  .d-list{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.d-pair.flip .d-card{animation:none}}

/* плитки дуэлей на главной */
.art-older .c{position:absolute;top:44px;width:40%;height:120px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:4px 4px 0 var(--shade);overflow:hidden}
.art-older .c::before{content:"";display:block;height:58px;border-bottom:2px solid var(--ink)}
.art-older .c1{left:7%;transform:rotate(-5deg)}
.art-older .c1::before{background:linear-gradient(120deg,#e07a3f,#7a2e1d)}
.art-older .c2{right:7%;transform:rotate(4deg)}
.art-older .c2::before{background:linear-gradient(120deg,#4f7fae,#1f2f4d)}
.art-older .c b{display:block;padding:10px 12px 0;font:400 26px/1 var(--display)}
.art-older .c2 b{color:var(--soft);letter-spacing:.08em}
.art-older .or{position:absolute;left:50%;top:84px;transform:translateX(-50%) rotate(-8deg);z-index:1;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper);font:400 13px/1 var(--display)}
a.tile:hover .art-older .c1{transform:rotate(-8deg) translateX(-6px);transition:transform .25s}
a.tile:hover .art-older .c2{transform:rotate(7deg) translateX(6px);transition:transform .25s}
.art-hilo .n{position:absolute;left:8%;top:44px;font:400 clamp(30px,2.5vw,40px)/1 var(--display);transform:rotate(-3deg)}
.art-hilo .n small{display:block;margin-top:6px;font:700 13px/1 var(--text);color:var(--muted)}
.art-hilo .ud{position:absolute;right:8%;top:30px;display:flex;flex-direction:column;gap:12px}
.art-hilo .ud i{display:grid;place-items:center;width:104px;height:56px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:4px 4px 0 var(--shade);font:400 14px/1 var(--display);font-style:normal}
.art-hilo .ud i:first-child{background:var(--accent);color:var(--on-accent)}
a.tile:hover .art-hilo .ud i:first-child{transform:translateY(-4px);transition:transform .2s}
a.tile:hover .art-hilo .ud i:last-child{transform:translateY(4px);transition:transform .2s}
@media (hover:none){.kbd{display:none}}

/* ---- энергетики: миниатюра на главной ---- */
.art-energy .can{position:absolute;bottom:-14px;width:22%;height:176px;border:2px solid var(--ink);border-radius:16px 16px 10px 10px;background:var(--paper);box-shadow:4px 4px 0 var(--shade);overflow:hidden}
.art-energy .can::before{content:"";position:absolute;left:0;right:0;top:14px;height:2px;background:var(--ink)}
.art-energy .can i{position:absolute;left:0;right:0;top:46px;height:58px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.art-energy .c1{left:20%;transform:rotate(-6deg)}
.art-energy .c1 i{background:#3f5f8f}
.art-energy .c2{left:42%;bottom:-4px;z-index:1}
.art-energy .c2 i{background:var(--accent)}
.art-energy .c3{left:63%;transform:rotate(5deg)}
.art-energy .c3 i{background:#6a8d5a}
.art-energy .mini-sticker{right:7%;top:20px}
a.tile:hover .art-energy .c1{transform:rotate(-10deg) translateX(-5px);transition:transform .25s}
a.tile:hover .art-energy .c3{transform:rotate(9deg) translateX(5px);transition:transform .25s}

/* ---- оценка игроков: миниатюра на главной ---- */
.art-meta .sc{position:absolute;top:30px;display:grid;place-items:center;width:108px;height:108px;border:2px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--shade);font:400 40px/1 var(--display)}
.art-meta .s1{left:9%;background:#6a8d5a;color:#fff;transform:rotate(-5deg)}
.art-meta .s2{left:calc(9% + 128px);top:52px;background:var(--paper);transform:rotate(4deg)}
.art-meta .s2 b{color:var(--muted)}
.art-meta .meter{position:absolute;left:9%;right:9%;bottom:24px;display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.art-meta .meter i{height:16px;border:2px solid var(--ink);border-radius:4px;background:var(--paper)}
.art-meta .meter i.on{background:var(--ink)}
.art-meta .meter i.hot{background:var(--accent)}
a.tile:hover .art-meta .s1{transform:rotate(-9deg) translateY(-4px);transition:transform .25s}
a.tile:hover .art-meta .s2{transform:rotate(8deg) translateY(4px);transition:transform .25s}

@media (max-width:640px){.art-meta .sc{top:20px;width:88px;height:88px;font-size:32px}.art-meta .s2{left:calc(9% + 104px);top:34px}.art-meta .meter{bottom:16px}.art-meta .meter i{height:13px}}

/* ---- любимые студии: миниатюра на главной ---- */
.art-studios .st{position:absolute;display:grid;place-items:center;width:30%;max-width:120px;aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;box-shadow:4px 4px 0 var(--shade);font:400 44px/1 var(--display)}
.art-studios .st::after{content:"";position:absolute;inset:7px;border:2px dashed currentColor;border-radius:50%;opacity:.45}
.art-studios .a{left:8%;top:26px;background:#3f5f8f;color:#fff;transform:rotate(-10deg)}
.art-studios .b{left:34%;top:64px;background:var(--paper);z-index:1;transform:rotate(4deg)}
.art-studios .c{left:58%;top:22px;background:#e9b44c;color:var(--ink);transform:rotate(12deg)}
.art-studios .mini-sticker{right:6%;top:auto;bottom:18px}
a.tile:hover .art-studios .a{transform:rotate(-16deg) translateX(-5px);transition:transform .25s}
a.tile:hover .art-studios .c{transform:rotate(18deg) translateX(5px);transition:transform .25s}

/* ---- энергетики: список ---- */
.e-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;margin:40px 0 0}
.e-q{flex:1 1 320px;width:auto;height:46px;font-size:16px}
.e-bar .theme-btn{flex:0 0 46px}
.e-badge[hidden]{display:none}
.e-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:800}
.e-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 22px;margin:22px 0 0;padding:22px 24px 24px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;box-shadow:var(--hard)}
.e-filters[hidden]{display:none}
.e-flabel{font-weight:700;font-size:13px;color:var(--muted)}
.e-filters .select{min-width:150px}
.e-num{height:46px;width:150px;padding:0 14px;border:2px solid var(--ink);border-radius:10px;background:var(--field);box-shadow:var(--hard);font-weight:600;font-size:15px}
.e-num::placeholder{color:var(--placeholder)}
.e-num:focus{outline:none;box-shadow:4px 4px 0 var(--accent)}
.e-filters .btn.plain{margin-left:auto}
.e-brands{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.e-chip{display:inline-flex;align-items:baseline;gap:7px;height:38px;padding:8px 14px 0;border:2px solid var(--ink);border-radius:10px;background:var(--paper);font-weight:700;font-size:14px;line-height:1.3}
.e-chip small{font-size:12px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.e-chip:hover{background:var(--bg)}
.e-chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.e-chip[aria-pressed="true"] small{color:var(--soft)}
.e-all{border-style:dashed}
.e-count{margin:34px 0 22px;font-weight:800;font-size:16px}
.e-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:40px 26px;list-style:none;margin:0;padding:0}
.e-card{min-width:0}
.e-card a{display:block;text-decoration:none;color:inherit}
.e-card a:focus-visible{outline:none}
.e-ph{position:relative}
.e-ph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:2px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:var(--hard);transition:transform .12s,box-shadow .12s}
.e-card a:hover img,.e-card a:focus-visible img{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--accent)}
.e-card a:focus-visible img{outline:3px solid var(--accent);outline-offset:4px}
.e-rank{position:absolute;left:-8px;top:-10px;min-width:34px;padding:5px 8px 3px;border-radius:8px;background:var(--ink);color:var(--paper);font:400 16px/1 var(--display);text-align:center;font-variant-numeric:tabular-nums}
.e-st{position:absolute;right:-10px;bottom:-14px;transform:rotate(-5deg);padding:6px 10px 3px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:3px 3px 0 var(--shade);font:400 24px/1 var(--display);font-variant-numeric:tabular-nums}
.e-st.top{background:var(--accent);color:var(--on-accent)}
.e-card h3{margin:22px 0 4px;font-size:16px;line-height:1.25;font-weight:700;overflow-wrap:anywhere}
.e-sub{display:flex;justify-content:space-between;gap:10px;margin:0;color:var(--muted);font-size:13.5px}
.e-sub span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-pr{flex:none;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.e-nums{display:grid;grid-template-columns:repeat(3,1fr);margin:10px 0 0;padding-top:8px;border-top:2px solid var(--ink)}
.e-nums dt{color:var(--muted);font-size:12px}
.e-nums dd{margin:0;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.e-nums .on dd{color:var(--accent)}
.e-pager{display:flex;justify-content:center;margin-top:48px}
.e-blist{margin-top:8px}
.e-bgroup h4{margin:22px 0 6px;font:400 22px/1 var(--display)}
.e-bgroup ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 14px;list-style:none;margin:0;padding:0}
.e-bgroup button{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;text-align:left;font-weight:600;font-size:15px}
.e-bgroup button small{color:var(--muted);font-variant-numeric:tabular-nums}
.e-bgroup button:hover,.e-bgroup button:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.e-bgroup button:hover small,.e-bgroup button:focus-visible small{color:var(--soft)}
.e-bgroup button.on{color:var(--accent)}

/* ---- энергетики: страница обзора ---- */
.e-rhead{padding-right:70px}
.e-rhead h1{font-size:clamp(34px,5.4vw,80px);line-height:.95;max-width:18ch;overflow-wrap:anywhere}
.e-rhead .e-meta{font-size:17px}
.e-theme{top:48px}
.e-note{margin:16px 0 0;color:var(--muted)}
.e-review{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:64px;align-items:start;margin-top:48px}
.e-photo{position:relative;margin:0}
.e-photo img{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:8px 8px 0 var(--shade)}
.e-photo .e-avg{position:absolute;top:auto;right:-20px;bottom:-26px;transform:rotate(4deg);margin:0}
.e-photo .e-avg b{font-size:clamp(44px,4.4vw,68px)}
.e-photo .e-avg span{font-size:14px}
.e-scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0}
.e-scores div{padding:14px 16px 16px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:var(--hard);min-width:0}
.e-scores dt{color:var(--muted);font-weight:700;font-size:13px}
.e-scores dd{margin:6px 0 0;font:400 clamp(30px,3vw,44px)/1 var(--display);font-variant-numeric:tabular-nums}
.e-scores .e-price{font:800 20px/1.2 var(--text);padding-top:8px;overflow-wrap:anywhere}
.e-verdict{position:relative;margin:36px 0 0;padding:22px 26px 24px;background:var(--ink);color:var(--paper);border-radius:12px}
.e-verdict::before{content:"Итог";display:block;margin-bottom:8px;font:400 15px/1 var(--display);color:var(--accent)}
.e-verdict p{margin:0;font-size:18px;line-height:1.5;font-weight:500}
.e-text{margin-top:36px;max-width:68ch;font-size:16.5px;line-height:1.65}
.e-text p{margin:0 0 1em}
.e-text b{font-weight:800}
.e-pn{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:72px}
.e-pn a{display:block;padding:18px 22px 20px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:var(--hard);text-decoration:none;font-weight:700;font-size:17px;line-height:1.3;transition:transform .12s,box-shadow .12s}
.e-pn a:hover,.e-pn a:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--accent);outline:none}
.e-pn small{display:block;margin-bottom:4px;color:var(--muted);font-weight:600;font-size:13px}
.e-prev small::before{content:"← "}
.e-next{text-align:right}
.e-next small::after{content:" →"}

@media (max-width:1000px){
  .e-review{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:48px}
  .e-scores{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .e-review{grid-template-columns:1fr;gap:56px}
  .e-photo{max-width:420px}
}
@media (max-width:640px){
  .e-bar{gap:12px;margin-top:28px}
  .e-q{flex-basis:100%}
  .e-bar .field{flex:1 1 0;min-width:0}
  .e-bar .btn{padding:0 14px}
  .e-bar .select{min-width:0;width:100%}
  .e-filters{padding:18px 16px 20px;gap:16px}
  .e-filters .field{flex:1 1 calc(50% - 8px)}
  .e-filters .field:has(.seg){flex-basis:100%}
  .e-filters .select,.e-num{width:100%;min-width:0}
  .e-filters .btn.plain{margin-left:0;padding:0 4px}
  .e-brands{flex-wrap:nowrap;overflow-x:auto;margin:24px -16px 0;padding:0 16px 8px;scrollbar-width:none}
  .e-brands::-webkit-scrollbar{display:none}
  .e-chip{flex:none}
  .e-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 16px}
  .e-st{font-size:20px;right:-6px}
  .e-card h3{font-size:14.5px;margin-top:20px}
  .e-sub{flex-direction:column;gap:0;font-size:12.5px}
  .e-nums dd{font-size:14px}
  .e-nums dt{font-size:11px}
  .e-rhead{padding-top:84px;padding-right:0}
  .e-theme{top:24px}
  .e-rhead h1{font-size:clamp(28px,9vw,44px)}
  .e-review{margin-top:32px}
  .e-photo{margin-right:12px}
  .e-scores{gap:10px}
  .e-scores div{padding:12px 12px 14px}
  .e-verdict{padding:18px 18px 20px}
  .e-verdict p{font-size:16.5px}
  .e-text{font-size:16px}
  .e-pn{grid-template-columns:1fr;gap:16px;margin-top:56px}
}