/* Карточки рангов/кейсов + окно подробностей (см. assets/cards.js). Картинки — пиксель-арт 64×48, растягиваются без размытия. */
.px{image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.cd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:16px}
.cd-grid-c{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cd{appearance:none;font:inherit;color:var(--text);text-align:left;cursor:pointer;display:flex;flex-direction:column;padding:0;min-width:0;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 9%,var(--card)),var(--card));border:1px solid var(--line2);border-radius:14px;position:relative;
  transition:transform .18s ease,border-color .18s,box-shadow .18s}
.cd:hover{border-color:var(--ac);box-shadow:0 10px 30px -14px var(--ac);transform:translateY(-3px)}
.cd:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.cd.main{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac),0 10px 34px -14px var(--ac)}
.cd-pic{position:relative;display:block;aspect-ratio:4/3;background:#0a0910;overflow:hidden;border-bottom:3px solid var(--ac)}
.cd-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.cd:hover .cd-pic img{transform:scale(1.05)}
.cd-t{position:absolute;left:8px;top:8px;min-width:26px;height:26px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(10,9,16,.78);border:1px solid var(--ac);color:var(--ac);font:.58rem/1 "Press Start 2P",monospace}
.cd-flag{position:absolute;right:8px;top:8px;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:999px;background:linear-gradient(90deg,#7b2ff7,#f107a3);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.cd-body{display:flex;flex-direction:column;gap:5px;padding:12px 13px 13px;flex:1}
.cd-n{font-size:1.15rem;font-weight:700;line-height:1.2;letter-spacing:.01em;overflow-wrap:anywhere}
.cd-rank .cd-n{background:var(--g);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;width:max-content;max-width:100%}
.cd-d{font-size:.84rem;line-height:1.35;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.4em}
.cd-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin-top:auto;padding-top:6px}
.cd-p b{font-size:1.2rem;color:#fff;font-variant-numeric:tabular-nums}
.cd-p i{font-style:normal;font-size:.78rem;color:var(--muted)}
.cd-p em{flex-basis:100%;font-style:normal;font-size:.78rem;color:var(--dim)}
.cd-go{font-size:.8rem;color:var(--ac);font-weight:500}
@media(max-width:560px){
  .cd-grid,.cd-grid-c{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cd-body{padding:10px 10px 11px}.cd-n{font-size:1rem}.cd-d{font-size:.76rem;-webkit-line-clamp:4;min-height:0}
  .cd-p b{font-size:1.05rem}.cd-flag{font-size:.6rem;padding:2px 6px}.cd-t{left:6px;top:6px}
}
@media(max-width:340px){.cd-grid,.cd-grid-c{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:no-preference){
  .cd-pic img{animation:cdfloat 5s ease-in-out infinite}
  .cd:nth-child(2n) .cd-pic img{animation-delay:-1.6s}.cd:nth-child(3n) .cd-pic img{animation-delay:-3.1s}
  @keyframes cdfloat{0%,100%{transform:scale(1.03) translateY(0)}50%{transform:scale(1.03) translateY(-2%)}}
  .cd:hover .cd-pic img{animation:none}
  .cd.t9,.cd.t10,.cd.t11,.cd.t12,.cd.main{animation:cdglow 3.2s ease-in-out infinite}
  @keyframes cdglow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 22px -4px var(--ac)}}
  .cd.t12 .cd-n{background-size:200% 100%;animation:cdshine 3s linear infinite}
  @keyframes cdshine{to{background-position:200% 0}}
  .dm:not([hidden]) .dm-box{animation:dmin .22s ease-out}
  @keyframes dmin{from{opacity:0;transform:translateY(18px) scale(.985)}}
}
/* окно подробностей: на телефоне — шторка снизу */
html.dm-lock,html.dm-lock body{overflow:hidden}
.dm{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.dm[hidden]{display:none}
.dm-bg{position:absolute;inset:0;background:rgba(6,5,10,.8);backdrop-filter:blur(3px)}
.dm-box{position:relative;display:flex;flex-direction:column;width:100%;max-width:760px;max-height:min(90vh,860px);background:var(--card);border:1px solid var(--line2);border-top:3px solid var(--ac,var(--acc));border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;outline:none}
.dm-x{position:absolute;right:10px;top:10px;z-index:3;width:40px;height:40px;border-radius:10px;border:1px solid var(--line2);background:rgba(14,13,19,.85);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.dm-x:hover{border-color:var(--acc)}.dm-x:focus-visible,.dm-b:focus-visible,.dm-tabs button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.dm-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1;-webkit-overflow-scrolling:touch}
.dm-hero{display:flex;gap:16px;align-items:flex-end;padding:0;background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 16%,#0a0910),var(--card))}
.dm-hero img{flex:0 0 auto;width:min(46%,300px);height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-bottom:3px solid var(--ac);border-right:3px solid var(--ac)}
.dm-ht{padding:16px 56px 14px 0;min-width:0;align-self:center}
.dm-tier{display:block;font-size:.8rem;color:var(--muted)}
.dm-name{margin:2px 0 6px;font-size:1.9rem;line-height:1.15;overflow-wrap:anywhere}
.dm-hero[style*="--g"] .dm-name{background:var(--g);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;width:max-content;max-width:100%}
.dm-ht p{margin:0;color:var(--text);font-size:.98rem;line-height:1.4}
.dm-body{padding:16px 18px 8px}
.dm-flag{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:rgba(123,47,247,.16);border:1px solid #5b4d86;font-size:.92rem}
.dm-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;margin:0 -2px;padding:2px}
.dm-tabs button{flex:0 0 auto;font:inherit;font-size:.9rem;border:1px solid var(--line2);border-bottom:3px solid var(--mc);background:#1d1a27;color:var(--muted);border-radius:10px 10px 0 0;padding:8px 13px;cursor:pointer;white-space:nowrap;min-height:40px}
.dm-tabs button.on{color:#fff;background:color-mix(in srgb,var(--mc) 16%,#1d1a27)}
.dm-panel{background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--mc,var(--acc));border-radius:0 0 12px 12px;padding:14px 16px;min-height:120px}
.dm-note{margin:0 0 10px;color:var(--muted);font-size:.9rem}
.dm-inh{margin:0 0 6px;color:var(--mc,var(--ac));font-size:.9rem;font-weight:500}
.dm-list{margin:0;padding-left:1.15em;font-size:.95rem}.dm-list li{margin:.32em 0;color:#fff}
.dm-list li.old{color:var(--muted)}.dm-list li.soon{color:var(--orange)}.dm-list li.soon::after{content:" · скоро";font-style:italic;font-size:.85em}
.dm-none{margin:0;color:var(--dim);font-size:.92rem}
.dm-old{margin-top:12px;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding-top:8px}.dm-old summary{color:var(--muted);font-size:.9rem}
.dm-foot{margin:14px 0 8px;font-size:.82rem;color:var(--dim)}
.dm-h{margin:6px 0 10px;font-size:1rem}
.dm-odds{list-style:none;margin:0;padding:0;font-size:.93rem}
.dm-odds li{position:relative;display:flex;justify-content:space-between;gap:12px;padding:7px 10px;margin:3px 0;border-radius:8px;background:var(--bg2);overflow:hidden;isolation:isolate}
.dm-odds .o-b{position:absolute;left:0;top:0;bottom:0;z-index:-1;background:color-mix(in srgb,var(--ac) 22%,transparent)}
.dm-odds .o-c{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.dm-odds li.rare .o-t{color:#ffd37a;font-weight:500}.dm-odds li.rare .o-b{background:rgba(255,211,122,.22)}
.dm-buy{display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#16141e}
.dm-b{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;padding:8px 12px;border-radius:12px;border:1px solid transparent;background:var(--grad,linear-gradient(90deg,#7b2ff7,#f107a3));color:#fff!important;text-decoration:none;font:inherit;cursor:pointer;min-width:0}
.dm-b b{font-size:1.15rem}.dm-b span{font-size:.78rem;opacity:.9}
.dm-b.ghost{background:transparent;border-color:var(--line2)}.dm-b:hover{filter:brightness(1.12)}.dm-b.ghost:hover{background:#1f1c29;filter:none}
.dm-ingame{margin:0;flex:1;text-align:center;font-size:.95rem}.dm-ingame b{font-size:1.2rem}.dm-ingame span{color:var(--muted);font-size:.85rem}
@media(max-width:640px){
  .dm{align-items:flex-end;padding:0}
  .dm-box{max-width:none;max-height:92vh;max-height:92dvh;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0}
  .dm-hero{flex-direction:column;align-items:stretch;gap:0}
  .dm-hero img{width:100%;border-right:0;max-height:26vh}
  .dm-ht{padding:12px 16px 10px;align-self:auto}
  .dm-name{font-size:1.6rem}.dm-body{padding:14px 14px 6px}.dm-buy{padding-left:12px;padding-right:12px}
}

/* Баннер «Комета» (assets/comet-hero.js) и усиленная карточка ранга-входа */
.ch{--ac:#6ed0ff;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin:0 0 22px;padding:20px 22px;border-radius:16px;border:1px solid var(--ac);
  background:radial-gradient(circle at 0 0,rgba(110,208,255,.22),transparent 55%),linear-gradient(135deg,rgba(123,47,247,.22),var(--card));box-shadow:0 0 0 1px rgba(110,208,255,.35),0 14px 44px -16px rgba(110,208,255,.6)}
.ch-img{width:96px;height:72px;border-radius:10px;border:2px solid var(--ac);background:#0a0910;object-fit:cover}
.ch-badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:linear-gradient(90deg,#7b2ff7,#f107a3);color:#fff}
.ch h2{margin:6px 0 4px;font-size:1.45rem}
.ch p{margin:0;color:var(--muted);font-size:.93rem}
.ch-buy{display:flex;flex-direction:column;gap:8px;min-width:250px}
.ch-b{appearance:none;font:inherit;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;border-radius:12px;padding:12px 16px;color:#fff;border:1px solid var(--line2);background:var(--card2)}
.ch-b.main{font-size:1.1rem;padding:15px 16px;border:0;background:linear-gradient(90deg,#7b2ff7,#c41a9b);box-shadow:0 8px 24px -8px #a46cff}
.ch-b:hover{filter:brightness(1.12);color:#fff}
.ch-more{text-align:center;font-size:.85rem;color:var(--muted)}
@media(max-width:760px){.ch{grid-template-columns:1fr;padding:16px;gap:12px}.ch-img{width:72px;height:54px}.ch h2{font-size:1.2rem}.ch-buy{min-width:0}}
.cd.main{box-shadow:0 0 0 2px var(--ac),0 0 34px -4px var(--ac);background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 22%,var(--card)),var(--card))}
.cd.main .cd-flag{font-size:.72rem;max-width:calc(100% - 52px);text-align:center;line-height:1.2;box-shadow:0 0 14px #f107a3}