@layer reset, tokens, components;
@import url("/static/css/tokens.css");
@layer components {

/* ═══════════════════ ПОЛКА И КОРОБКА ═══════════════════ */

.shelf{
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  --gap:var(--shelf-gap);
}
.shelf--cheats,.shelf--rel,.shelf--tier{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:1040px){.shelf--cheats,.shelf--rel,.shelf--tier{--cols:2}}
@media (max-width:680px){.shelf--cheats,.shelf--rel,.shelf--tier{--cols:1}}

/* карточка = сцена: коробка + свет под ней */
.card{
  position:relative;
  display:block;
  padding:var(--card-pad);
  text-decoration:none;
  color:inherit;
  isolation:isolate;
  perspective:1150px;
}
/* свет на «полу»: живёт отдельно от коробки, чтобы не крутиться вместе с ней */
.card::after{
  content:"";
  position:absolute;
  left:50%;bottom:20px;
  width:86%;height:62%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 62% 48% at 50% 100%,var(--glow,rgba(255,255,255,.22)),transparent 72%);
  filter:blur(16px);
  opacity:.72;
  transition:opacity .5s ease,transform .5s ease;
  transform-origin:50% 100%;
  z-index:-2;
}
.card:hover::after,.card:focus-visible::after{opacity:1;transform:translateX(-50%) scale(1.18)}
/* тень касания: узкая и плотная, прямо под основанием */
.card::before{
  content:"";position:absolute;left:50%;bottom:38px;
  width:60%;height:16px;transform:translateX(-50%) skewX(-16deg);transform-origin:50% 100%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.95),transparent 72%);
  filter:blur(5px);z-index:-1;pointer-events:none;
  transition:transform .5s ease,opacity .5s ease;
}
.card:hover::before,.card:focus-visible::before{transform:translateX(-50%) skewX(-16deg) scaleX(1.18);opacity:.85}

.box{
  position:relative;
  width:var(--box-w);height:var(--box-h);
  margin-inline:auto;
  transform-style:preserve-3d;
  transform:rotateX(3deg) rotateY(34deg);
  transition:transform .55s cubic-bezier(.22,.7,.28,1);
}
.card:hover .box,.card:focus-visible .box{transform:rotateX(2deg) rotateY(20deg) translateY(-10px)}

.face{position:absolute;top:50%;left:50%;overflow:hidden;background:#090c12;backface-visibility:hidden}
/* арт персонажа шире грани: общее правило img{max-width:100%} режет кадр коробки */
.face img{max-width:none}
/* передняя грань */
.face--front{
  width:var(--box-w);height:var(--box-h);
  transform:translate(-50%,-50%) translateZ(calc(var(--box-d) / 2));
  border:1px solid rgba(255,255,255,.08);
}
/* задняя стенка — её не видно, но без неё коробка просвечивает насквозь */
.face--back{
  width:var(--box-w);height:var(--box-h);
  transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--box-d) / 2));
  background:linear-gradient(160deg,#0d121a,#020407);
}
/* торец с маркой — тот, что смотрит на зрителя */
.face--side{
  width:var(--box-d);height:var(--box-h);
  transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--box-w) / 2));
  background:linear-gradient(90deg,#080b10 0%,#2b323f 45%,#151a22 100%);
  /* нижней кромки у торца нет: на лицевой грани низ отбит рамкой с отступом,
     и светлая полоса торца по самому краю читалась ступенькой на стыке */
  box-shadow:inset -1px 0 0 rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
}
/* дальний торец — уходит в тень */
.face--side-far{
  width:var(--box-d);height:var(--box-h);
  transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--box-w) / 2));
  background:linear-gradient(90deg,#0a0e14,#020408);
}
/* верх: тонкая полоска, которая и делает предмет предметом */
.face--top{
  width:var(--box-w);height:var(--box-d);
  transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--box-h) / 2));
  background:linear-gradient(180deg,#262d39,#0c1016);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.14);
}
/* низ: коробка стоит на нём, поэтому он самый тёмный */
.face--bottom{
  width:var(--box-w);height:var(--box-d);
  transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--box-h) / 2));
  background:linear-gradient(180deg,#04060a,#000204);
}

/* ─────────── лицо коробки ─────────── */
.print{position:absolute;inset:0}
.print__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:center/cover no-repeat;opacity:.55;filter:saturate(.75) contrast(1.05)}
.print__hero{position:absolute;left:50%;bottom:74px;width:104%;height:66%;transform:translateX(-50%);object-fit:contain;object-position:bottom center;filter:drop-shadow(0 18px 30px rgba(0,0,0,.75))}
/* Ролик с живым персонажем лежит ровно поверх картинки и проявляется, только
   когда действительно пошёл. Пока он грузится, видна картинка под ним — иначе
   на долю секунды зияла бы дыра, и коробка моргала бы на каждом наведении. */
/* Своя сцена на всю коробку: без приглушения, это и есть лицо коробки.
   Затемнение под название — только снизу, верх сцены остаётся чистым. */
.print__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.print--art::after{background:linear-gradient(180deg,transparent 0%,transparent 58%,rgba(0,0,0,.35) 72%,rgba(0,0,0,.88) 92%)}
.print__hero--live{opacity:0;transition:opacity .2s linear}
.card.is-live .print__hero--live{opacity:1}
/* Пока ролик играет, статичную картинку убираем. Она нужна только до запуска:
   персонаж на ней стоит в начальной позе, и стоит ролику его сдвинуть, как
   из-за движущегося силуэта выглядывает второй, неподвижный. */
.card.is-live .print__hero:not(.print__hero--live){opacity:0;transition:opacity .2s linear}
/* затемнение снизу, чтобы название читалось на любой картинке */
.print::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 26%,rgba(0,0,0,.2) 52%,rgba(0,0,0,.86) 88%)}
/* блик по грани — стекло упаковки */
.gloss{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(105deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.03) 20%,transparent 44%),
    /* контровой свет по дальнему ребру — он и отделяет коробку от чёрного фона */
    linear-gradient(to left,rgba(255,255,255,.34),rgba(255,255,255,.1) 3%,transparent 13%),
    linear-gradient(to top,rgba(255,255,255,.26),rgba(255,255,255,.07) 4%,transparent 15%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.38),
             inset 1px 0 0 rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.12)}
.front__in{position:absolute;inset:0;padding:var(--card-face-pad);display:flex;flex-direction:column;z-index:2}
.brand{font-family:var(--display);font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.8)}
.front__bottom{margin-top:auto;text-align:center}
.game{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,29px);line-height:.98;letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 3px 18px rgba(0,0,0,.8)}
.game--long{font-size:20px}
.meta{margin-top:var(--s-2);display:flex;align-items:center;justify-content:center;gap:var(--gap-inline);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.meta b{font-weight:600;color:#fff}

/* торец — вертикальное название, как на настоящей коробке */
.spine{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-weight:600;
  font-size:clamp(16px,calc(var(--box-d) * .27),26px);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.92);white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ─────────── коробка чита ─────────── */
.card--cheat{--box-w:238px;--box-h:338px;--box-d:82px}
.card--cheat .face--front{background:linear-gradient(160deg,#101620,#03060b 62%)}
.card--cheat .print::after{background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,.9) 100%)}
.dev{position:absolute;inset:0;display:flex;flex-direction:column;padding:var(--card-face-pad);z-index:2}
/* лого приводим к одной светлоте: цвет разработчика не должен спорить с монохромом.
   тёмные лого разворачиваем инверсией — в базе это флаг у разработчика */
.dev__mark{margin:auto;display:flex;flex-direction:column;align-items:center;gap:var(--gap-inline)}
/* лого в родном цвете: по нему покупатель узнаёт разработчика быстрее, чем
   по названию. тёмное лого на чёрной коробке не видно — его разворачиваем,
   а поворот оттенка на 180° возвращает цвету его оттенок после инверсии */
.dev__logo{display:block;max-width:168px;max-height:66px;width:auto;height:auto;object-fit:contain;
  filter:invert(var(--logo-invert,0)) hue-rotate(calc(var(--logo-invert,0) * 180deg))}
.dev__name{margin:0;font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.01em;text-align:center;color:rgba(255,255,255,.9)}
.dev__top{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-inline-tight)}
/* DMA — другой класс железа и другая цена вопроса, поэтому видно сразу,
   ещё до того, как прочитано название */
.dev__dma{font-family:var(--display);font-size:9px;font-weight:600;letter-spacing:.14em;padding:2px 5px;
  color:#0b0e14;background:rgba(255,255,255,.86);line-height:1.2}
.dev__tags{list-style:none;margin:0 0 var(--s-3);padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:4px}
.dev__tags li{font-size:9px;letter-spacing:.12em;line-height:1;padding:4px 6px;color:rgba(255,255,255,.78);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.card--top .dev__tags{margin-bottom:50px}
/* надёжность — как возрастной штамп на настоящей коробке: угол лицевой грани.
   уровень кодируется высотой штрихов, не цветом */
.dev__row{display:flex;align-items:center;gap:var(--gap-inline-tight);white-space:nowrap}
.rel{display:flex;align-items:flex-end;gap:var(--rel-bar-gap);height:12px;flex:none;--seg:rgba(255,255,255,.2)}
.rel i{width:3px;background:var(--seg)}
.rel i:nth-child(1){height:5px}
.rel i:nth-child(2){height:8px}
.rel i:nth-child(3){height:12px}
.rel--1 i:nth-child(1),.rel--2 i:nth-child(-n+2),.rel--3 i:nth-child(-n+3){background:#fff}
.card:hover .dev__st,.card:focus-visible .dev__st{color:rgba(255,255,255,.92)}
.dev__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap-inline-tight);
  padding-top:var(--card-foot-pad);border-top:1px solid rgba(255,255,255,.12)}
.dev__price{font-family:var(--display);font-size:19px;letter-spacing:-.02em;line-height:1;white-space:nowrap;flex:none}
.dev__price span{display:block;font-family:var(--text);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:var(--s-1)}
.st{display:inline-block;width:24px;height:5px;background:currentColor;flex:none;color:#fff}
.st--upd{background:none;box-shadow:inset 0 0 0 1px currentColor;color:rgba(255,255,255,.5)}
.dev__st{display:flex;flex-direction:column;align-items:flex-end;gap:var(--gap-inline);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.68);line-height:1;
  transition:color .45s ease}

/* ─────────── наведение ───────────
   коробка поворачивается — и всё на ней ведёт себя так, как повело бы на настоящей:
   блик едет по грани, дальний план отстаёт от ближнего, надписи выходят из тени */
.game,.spine,.dev__logo{transition:filter .45s ease,text-shadow .45s ease,opacity .45s ease}
/* бегущий блик: живёт отдельно от кромок, иначе уехали бы и они */
.gloss::before{
  content:"";position:absolute;inset:-25% -45%;
  background:linear-gradient(102deg,transparent 32%,rgba(255,255,255,.03) 39%,rgba(255,255,255,.19) 48%,
             rgba(255,255,255,.03) 58%,transparent 67%);
  transform:translateX(-19%);
  transition:transform .7s cubic-bezier(.3,.6,.3,1),opacity .5s ease;
  opacity:.75;
}
/* переливающийся блик при наведении — только у первой тройки: на сорока
   коробках он мельтешил и раздражал. остальные на наведение только
   приподнимаются */
.card--top:hover .gloss::before,.card--top:focus-visible .gloss::before,
.card:not(.card--cheat):hover .gloss::before,.card:not(.card--cheat):focus-visible .gloss::before{transform:translateX(24%);opacity:1}
.card--cheat:not(.card--top):hover::after,.card--cheat:not(.card--top):focus-visible::after{transform:translateX(-50%);opacity:.72}

/* печать намертво приклеена к картону: ничего нарисованного не двигаем,
   иначе арт начинает плавать внутри коробки. двигается только свет */
.card:hover .spine,.card:focus-visible .spine{filter:brightness(1.35)}
.card:hover .dev__logo,.card:focus-visible .dev__logo{filter:invert(var(--logo-invert,0)) hue-rotate(calc(var(--logo-invert,0) * 180deg)) brightness(1.12)}

@media (prefers-reduced-motion:reduce){
  .box,.gloss::before{transition:none}
  .card:hover .box{transform:rotateX(3deg) rotateY(34deg)}
  .card:hover .gloss::before{transform:translateX(-19%)}
}
@media (max-width:640px){
  :root{--box-w:206px;--box-h:292px;--box-d:74px}
  .card--cheat{--box-w:196px;--box-h:278px;--box-d:66px}
}

/* ─────────── широкая полка ───────────
   на странице игры коробка лежит горизонтально: в узкую вертикальную при
   шести колонках не помещались ни лого, ни теги, ни статус крупно. здесь
   три в ряд, слева лого, справа всё остальное — как читают список сборок.
   поворот меньше обычного: широкая грань при 34° сжималась и текст мельчал */
.shelf--wide{--cols:3;--gap:var(--s-3) var(--s-6)}
/* без перспективы: с ней крышка сходилась к точке обзора и края шли вкось */
.shelf--wide .card{padding:var(--s-3) 0 var(--s-6);perspective:none}
.shelf--wide .card--cheat,.shelf--wide .card--top{--box-w:340px;--box-h:196px;--box-d:84px}
/* Один наклон на всю полку. Варианты надёжности и топ задают коробке свой
   поворот и перекос — на сетке из сорока штук это читалось как хаос, и при
   прокрутке кружилась голова. Здесь все стоят одинаково и почти прямо:
   видна только крышка сверху. При наведении коробка не крутится, а чуть
   приподнимается. Селектор тяжелее, чем у вариантов, — намеренно. */
.shelf--wide .card.card--cheat .box,
.shelf--wide .card.card--cheat:hover .box,
.shelf--wide .card.card--cheat:focus-visible .box{transform:rotateX(-17deg)}
.shelf--wide .card.card--cheat:hover .box,
.shelf--wide .card.card--cheat:focus-visible .box{transform:rotateX(-17deg) translateY(-4px)}
.lid{display:none}
.shelf--wide .lid{display:flex;align-items:center;height:100%;padding:0 var(--s-4)}
.shelf--wide .lid b{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.16em;padding:3px 8px;color:#0b0e14;background:rgba(255,255,255,.9)}
.shelf--wide .dev__dma{display:none}
.print__wm{display:none}
.shelf--wide .print__wm{display:block;position:absolute;right:-34px;top:50%;height:150%;width:auto;max-width:none;
  transform:translateY(-50%) rotate(-8deg);opacity:.14;pointer-events:none;
  filter:invert(var(--logo-invert,0)) hue-rotate(calc(var(--logo-invert,0) * 180deg)) blur(.4px)}
.shelf--wide .print__wm--img{width:300px;aspect-ratio:1;height:auto;background:center/contain no-repeat}
.shelf--wide .print__wm--mono{height:auto;font-family:var(--display);font-weight:800;font-size:260px;line-height:1;color:#fff;opacity:.06}
.shelf--wide .card--top .print__wm{opacity:.1}
/* крышка повёрнута на 17°, и всё на ней сжато по высоте до sin 17° ≈ 0,29.
   буквы растягиваем обратно, иначе надпись читается как штрихкод */
.shelf--wide .lid b{display:inline-block;transform:scaleY(3.42)}
.shelf--wide .face--top{background:linear-gradient(0deg,#2a313d,#151a22)}
.shelf--wide .card--top .face--top{background:linear-gradient(0deg,#2b2620,#14110d)}
.shelf--wide .card::before{bottom:20px}
.shelf--wide .card::after{bottom:14px;height:70%}
.shelf--wide .spine{font-size:12px;letter-spacing:.24em}
.shelf--wide .dev{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:var(--s-4);
  grid-template-rows:auto auto 1fr auto;
  grid-template-areas:"logo top" "logo name" "logo tags" "bottom bottom";
  padding:var(--s-4) var(--s-4) var(--s-3)}
.shelf--wide .dev__mark{display:contents}
.shelf--wide .dev__logo,.shelf--wide .dev__mono{grid-area:logo;align-self:start;width:76px;height:76px;max-width:none;max-height:none;
  object-fit:contain;padding:8px;box-sizing:border-box;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.dev__mono{display:none}
.shelf--wide .dev__mono{display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:34px;color:rgba(255,255,255,.88)}
.shelf--wide .dev__top{grid-area:top;min-width:0}
.shelf--wide .brand{font-size:10px}
.shelf--wide .dev__name{grid-area:name;text-align:left;font-size:21px;font-weight:700;line-height:1.1;letter-spacing:-.01em;
  margin-top:var(--s-1);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.shelf--wide .dev__tags{grid-area:tags;justify-content:flex-start;align-self:start;margin:var(--s-2) 0 0}
.shelf--wide .dev__tags li{font-size:10px;padding:4px 7px}
.shelf--wide .dev__tags .dev__more{box-shadow:none;color:rgba(255,255,255,.5)}
.shelf--wide .dev__dma{font-size:9px}
.shelf--wide .dev__bottom{grid-area:bottom;align-items:center;margin-top:var(--s-3)}
.shelf--wide .dev__price{font-size:22px}
.shelf--wide .dev__price span{display:inline;margin:0 var(--s-1) 0 0;font-size:10px}
.shelf--wide .dev__st{flex-direction:row;gap:var(--s-3);font-size:10px}
/* топ: поясок становится ярлыком в верхнем углу, рамка ближе к краю */
.shelf--wide .obi{top:-1px;bottom:auto;left:auto;right:var(--s-4);height:22px;padding:0 var(--s-2);gap:var(--s-2)}
.shelf--wide .obi b{font-size:10px}
.shelf--wide .obi i{display:none}
.shelf--wide .card--top .frame{inset:5px}
.shelf--wide .card--top .frame::before{inset:-5px}
.shelf--wide .card--top .dev__tags{margin-bottom:0}
/* на странице игры название игры на коробке лишнее — мы и так в ней.
   DMA уже на крышке, так что верхняя строка не нужна целиком */
.shelf--wide .dev__top{display:none}
.shelf--wide .card--top .dev__name{padding-right:56px}
@media (max-width:1180px){.shelf--wide{--cols:2}}
@media (max-width:760px){.shelf--wide{--cols:1}}
@media (max-width:420px){
  .shelf--wide .card--cheat{--box-w:300px;--box-h:180px}
  .shelf--wide .card--top{--box-w:304px;--box-h:184px}
  .shelf--wide .dev__name{font-size:18px}
}

/* ─────────── фильтр полки ─────────── */
.dma-plate{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-5);padding:var(--s-3) var(--s-4);
  text-decoration:none;color:var(--t-1);box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.02);
  transition:color .2s ease,background .2s ease}
.dma-plate b{font-family:var(--display);font-size:12px;letter-spacing:.16em;padding:3px 8px;color:#0b0e14;background:rgba(255,255,255,.9)}
.dma-plate span{flex:1;min-width:0;font-size:var(--fs-s)}
.dma-plate i{font-style:normal;color:var(--foil)}
.dma-plate:hover{color:var(--t-0);background:rgba(255,255,255,.05)}
.dma-plate:focus-visible{outline:2px solid var(--foil);outline-offset:3px}
.filters{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5);flex-wrap:wrap;margin-bottom:var(--s-5)}
.filters__row{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.filters button{font:inherit;font-size:var(--fs-s);display:inline-flex;align-items:center;gap:var(--s-2);min-height:40px;padding:0 var(--s-4);
  color:var(--t-1);background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:color .2s ease,background .2s ease}
.filters button i{font-style:normal;font-size:var(--fs-l);color:var(--t-2);font-variant-numeric:tabular-nums}
.filters button:hover{color:var(--t-0);background:rgba(255,255,255,.05)}
.filters button.is-on{color:#12100c;background:var(--foil);box-shadow:none;font-weight:600}
.filters button.is-on i{color:rgba(18,16,12,.6)}
.filters button:focus-visible,.filters select:focus-visible{outline:2px solid var(--foil);outline-offset:3px}
/* функции — вторая ступень: мельче и тише групп, на всю ширину под ними */
.filters__row--feat{flex-basis:100%;gap:6px}
.filters__row--feat button{min-height:32px;padding:0 var(--s-3);font-size:var(--fs-l);letter-spacing:.06em}
.filters__sep{width:1px;height:24px;background:var(--line);margin:0 var(--s-1)}
.filters__sort{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-s);color:var(--t-2)}
.filters__sort select{font:inherit;color:var(--t-0);background:var(--bg-1);border:0;box-shadow:inset 0 0 0 1px var(--line);min-height:40px;padding:0 var(--s-3)}
.filters__empty{color:var(--t-1);padding:var(--s-6) 0}
.filters__empty button{font:inherit;color:var(--foil);background:none;border:0;text-decoration:underline;cursor:pointer;padding:0}
.shelf .card[hidden]{display:none}

/* ─────────── уровни оформления ───────────
   одна шкала, а не две: коробка тем дороже собрана, чем выше позиция.
   топ — это издание с бумажным пояском и фольгой, а не ещё один цвет */
.card--top{
  --box-w:244px;--box-h:346px;--box-d:92px;
  --glow:rgba(255,226,160,1);
  --foil-text:linear-gradient(104deg,#d8cfbc 0%,#fffdf6 17%,#eae1cd 33%,#fffefa 50%,#e0d6c2 66%,#fff8ea 83%,#d8cfbc 100%);
  /* фольга-заливка для букв. НЕ называть её --foil: тот токен — цвет бренда,
     и его переопределение градиентом ломает любой color:var(--foil) внутри коробки */
  --foil-v:linear-gradient(183deg,#ded5c2 0%,#fffdf6 14%,#e6ddc9 28%,#fffaef 44%,#ded5c2 60%,#fffdf6 78%,#e7dec9 100%);
}
/* лакированный чёрный: свет сверху, углы в тень */
.card--top .face--front{background:radial-gradient(128% 86% at 50% 0%,#2b2724 0%,#0e0d0c 52%,#040404 100%)}
.card--top .face--side{background:linear-gradient(90deg,#050505 0%,#191510 38%,#241f18 52%,#100d0a 74%,#040404 100%);
  box-shadow:inset 0 2px 0 rgba(255,240,208,.5)}

.card--top .dev__name{background:var(--foil-text)}
.card--top .spine{background:var(--foil-v)}
.card--top .dev__name,.card--top .spine{
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
}
.card--top .dev__logo{
  filter:invert(var(--logo-invert,0)) hue-rotate(calc(var(--logo-invert,0) * 180deg))
    drop-shadow(0 2px 3px rgba(0,0,0,.95));
  opacity:1;
}
/* тиснёная рамка: тонкая фольга, под ней тень — оттого кромка выглядит выдавленной */
.card--top .frame{
  position:absolute;inset:9px;z-index:3;pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,244,219,.62),
    inset 0 1px 0 1px rgba(0,0,0,.8),
    0 0 0 3px rgba(0,0,0,.75),
    0 0 0 4px rgba(255,244,219,.22);
}
/* контровой свет у топа тёплый и сильнее, чем у остальных */
.card--top .gloss{
  box-shadow:inset -1px 0 0 rgba(255,246,224,.85),inset 0 -1px 0 rgba(255,246,224,.6),
             inset 1px 0 0 rgba(255,246,224,.16),inset 0 1px 0 rgba(255,246,224,.2);
}
.card--top .face--front::after,.card--top .face--side::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset -2px 0 0 rgba(255,238,200,.95),inset 0 -2px 0 rgba(255,238,200,.8),
             inset 0 0 30px rgba(255,214,140,.3);
  opacity:.45;transition:opacity .5s ease;
}
.card--top .face--side::after{box-shadow:inset 0 0 22px rgba(255,214,140,.32)}
.card--top:hover .face--front::after,.card--top:hover .face--side::after,
.card--top:focus-visible .face--front::after,.card--top:focus-visible .face--side::after{opacity:1}
.card--top:hover::after,.card--top:focus-visible::after{transform:translateX(-50%) scale(1.45)}

/* лак: широкий мягкий блик по глянцевой грани, он и делает коробку дорогой на вид */
.card--top .frame::before{
  content:"";position:absolute;inset:-9px;pointer-events:none;
  background:linear-gradient(108deg,rgba(255,250,238,.16) 0%,rgba(255,250,238,.05) 14%,transparent 34%,
             transparent 62%,rgba(255,244,222,.07) 78%,transparent 92%);
}

/* поясок: не бумажная наклейка, а тёмная лента с тиснением */
.obi{
  position:absolute;left:0;right:0;bottom:70px;height:34px;z-index:4;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap-inline);padding:var(--obi-pad);
  background:linear-gradient(180deg,#191511 0%,#0a0908 52%,#15110d 100%);
  box-shadow:0 3px 12px rgba(0,0,0,.8),
             inset 0 1px 0 rgba(255,244,219,.55),inset 0 -1px 0 rgba(255,244,219,.3);
}
.obi b{
  font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.06em;
  background:var(--foil-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.obi i{font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,234,208,.52)}


}