/* Kronos Shop: consistent section edges, quieter motion and mobile-first fit corrections. */

/* Kronos side artwork: cinematic graphite and champagne-gold edge illustrations. */
html, body { background:#08090d !important; }
body { isolation:isolate; }
body::before {
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 58% 62% at 50% 48%,rgba(14,14,16,.92),rgba(8,9,13,.52) 74%,transparent 100%),
    linear-gradient(180deg,#08090d 0%,#0b0b0d 52%,#08090d 100%);
}
body::after {
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--ks-side-image,url("/assets/kronos-side-art.v4.png?v=1")) center / 100% 100% no-repeat;
  opacity:.28;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 7%,rgba(0,0,0,.82) 15%,rgba(0,0,0,.28) 25%,transparent 34%,transparent 66%,rgba(0,0,0,.28) 75%,rgba(0,0,0,.82) 85%,#000 93%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 7%,rgba(0,0,0,.82) 15%,rgba(0,0,0,.28) 25%,transparent 34%,transparent 66%,rgba(0,0,0,.28) 75%,rgba(0,0,0,.82) 85%,#000 93%,#000 100%);
  transition:opacity .34s ease;
  animation:ksSideArtFloat 18s ease-in-out infinite alternate;
}
@keyframes ksSideArtFloat {
  from { transform:translate3d(0,3px,0); }
  to { transform:translate3d(0,-3px,0); }
}
body.ks-art-changing::after { opacity:0 !important; }
@media (prefers-reduced-motion:reduce) {
  body::after { animation:none;transform:none;transition:none; }
}
@media (max-width:1100px) {
  body::after { opacity:.16; }
}
@media (max-width:700px) {
  body::after { display:none; }
}

/* Steam presets: move the row closer to the amount and fit the added 10k option. */
@media (min-width:1021px) {
  html body .ks-sd-right { grid-template-columns:170px minmax(0,1fr) 340px; }
  html body .ks-sd .ks-steam-quick { grid-template-columns:repeat(7,minmax(0,1fr)); }
}

/* Keep the carousel controls close to the edge without letting the gold indicator dominate. */
#kx-hero .kx-carousel {
  right:3px;
  padding:6px 4px;
  gap:4px;
  border-color:rgba(255,255,255,.09);
  border-radius:17px;
  background:rgba(7,7,7,.34);
  box-shadow:0 4px 15px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:.72;
  transition:opacity .2s ease,background .2s ease;
}
#kx-hero .kx-carousel:hover,
#kx-hero .kx-carousel:focus-within { opacity:.94;background:rgba(7,7,7,.52); }
#kx-hero .kx-carousel-arrow { width:24px;height:24px;border-color:rgba(255,255,255,.1);font-size:14px; }
#kx-hero .kx-carousel-dot { width:5px;height:5px;border-color:rgba(255,255,255,.08); }
#kx-hero .kx-carousel-dot.is-active { width:5px;height:15px;background:#c5b18b;border-color:#c5b18b; }

/* Warm, low-contrast breathing light around the Steam emblem. */
@keyframes ksSteamWarmGlow {
  0%,100% { filter:drop-shadow(0 0 6px rgba(255,255,255,.2)) drop-shadow(0 0 12px rgba(218,194,150,.12)); }
  50% { filter:drop-shadow(0 0 11px rgba(255,255,255,.42)) drop-shadow(0 0 22px rgba(218,194,150,.26)); }
}
html body .ks-sd .ks-steam-head .ks-steam-icon svg { animation:ksSteamWarmGlow 4.2s ease-in-out infinite; }
html body .ks-sd .ks-steam-head .ks-steam-icon::before {
  border-color:rgba(229,216,187,.2);
  background:radial-gradient(circle at 50% 0,rgba(255,247,226,.55) 0 2.5px,transparent 4px);
  filter:drop-shadow(0 0 5px rgba(255,247,226,.22));
}
/* Keep the mega-menu's centering transform throughout its entrance; the old plIn keyframes ended at transform:none and caused a visible sideways snap. */
@keyframes kxMenuIn {
  from { opacity:0;transform:translate(-50%,12px) scale(.985); }
  to { opacity:1;transform:translate(-50%,0) scale(1); }
}
html body .kx-mm-pn { animation:kxMenuIn .22s cubic-bezier(.22,1,.36,1) both; }
/* Keep every region/activation option fully readable instead of clamping its label. */
html body .pl-regs { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important; }
html body .pl-reg { min-height:58px; }
html body .pl-rn {
  display:block !important;min-width:0;overflow:visible !important;
  -webkit-line-clamp:unset !important;-webkit-box-orient:initial !important;
  white-space:normal;overflow-wrap:anywhere;font-size:14.5px;line-height:1.3;
}
@keyframes kronosWarmMarkPulse {
  0%,100% { filter:drop-shadow(0 0 7px rgba(255,255,255,.28)) drop-shadow(0 0 14px rgba(224,198,151,.13)); }
  50% { filter:drop-shadow(0 0 12px rgba(255,255,255,.48)) drop-shadow(0 0 24px rgba(224,198,151,.28)); }
}
html body .ks-logo img { animation:kronosWarmMarkPulse 4.6s ease-in-out infinite !important;filter:drop-shadow(0 0 7px rgba(255,255,255,.28)) drop-shadow(0 0 14px rgba(224,198,151,.13)) !important; }
html body .ks-logo:hover img { animation-play-state:paused !important;transform:scale(1.43) !important;filter:drop-shadow(0 0 12px rgba(255,255,255,.5)) drop-shadow(0 0 23px rgba(226,191,126,.31)) !important; }

/* The catalogue uses the same left/right edge as the hero and Steam block. */
#pl-root { width:100% !important;max-width:none !important;margin:30px 0 0 !important;padding:0 !important; }
.pl-head { gap:12px 18px;margin-bottom:15px; }
.pl-title { font-size:28px; }
.pl-search { flex-basis:300px;max-width:400px; }
.pl-search input {
  height:48px;
  border-radius:15px;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.035);
  transition:border-color .24s,background .24s,box-shadow .24s;
}
.pl-search input:focus { border-color:rgba(255,255,255,.54);background:rgba(255,255,255,.055);box-shadow:0 0 0 3px rgba(255,255,255,.045),0 0 22px rgba(255,255,255,.055); }
.pl-search svg { width:19px;height:19px;top:15px; }
@property --ks-find-angle { syntax:'<angle>';initial-value:0deg;inherits:false; }
@keyframes ksFindEdge { to { --ks-find-angle:360deg; } }
.pl-search { isolation:isolate; }
.pl-search::after {
  content:"";position:absolute;z-index:3;inset:-1px;padding:1px;border-radius:16px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--ks-find-angle),rgba(255,255,255,.1),rgba(255,255,255,.76),rgba(255,255,255,.1) 32%,rgba(255,255,255,.08) 70%,rgba(255,255,255,.1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .22s ease;
}
.pl-search:focus-within::after { opacity:.85;animation:ksFindEdge 3.4s linear infinite; }
.pl-search:focus-within input { border-color:transparent; }
.pl-chips { max-width:100%;gap:9px;margin-bottom:17px;overscroll-behavior-x:contain; }
.pl-chip { height:40px;padding:0 17px;font-size:13.5px;border-color:rgba(255,255,255,.14);transition:color .2s,border-color .2s,background .2s,transform .2s,box-shadow .2s; }
.pl-chip .pl-i,.pl-chip svg { width:17px;height:17px;flex:0 0 17px; }
.pl-chip:hover { transform:translateY(-1px);box-shadow:0 5px 16px rgba(255,255,255,.06); }
#pl-grid { grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch; }
#pl-grid .pl-card { min-width:0;min-height:220px;padding:17px 17px 15px !important; }
#pl-grid .pl-card .pl-lg { width:84px;height:84px; }
#pl-grid .pl-card .pl-nm { min-height:40px !important;font-size:14.5px !important; }
#pl-grid .pl-card .pl-tp { font-size:10px !important; }

/* Let the Steam emblem carry across the divider as a single, low-contrast watermark. */
html body .ks-sd-left { z-index:2;overflow:visible !important; }
html body .ks-sd-left .ks-st-mark { right:-88px !important;width:260px !important;height:260px !important;opacity:.055 !important; }
html body .ks-sd-left > *:not(.ks-st-mark) { position:relative;z-index:2; }
html body .ks-sd-right { z-index:1; }

/* Tighten the footer: its old 120px bottom padding created an empty tail on every device. */
html body .ks-foot { width:min(880px,100%);max-width:880px;padding:12px 20px 18px !important; }
html body #faq-section.ks-faq { margin:48px auto 24px !important; }

@media (max-width:1120px) and (min-width:851px) {
  #pl-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width:900px) and (min-width:701px) {
  #kx-hero.kx-hero2 { grid-template-columns:minmax(0,1.05fr) minmax(250px,.95fr);gap:5px 12px;padding:20px 26px 14px; }
  #kx-hero .kx-hl h1 { font-size:clamp(33px,4.8vw,44px); }
  #kx-hero .kx-hl p { font-size:13px; }
  #kx-hero .kx-hero-stage { min-height:0; }
  #kx-hero .kx-carousel { right:3px; }
}

@media (max-width:850px) and (min-width:561px) {
  #pl-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #pl-grid .pl-card { min-height:210px; }
}

@media (max-width:700px) {
  @keyframes kxMenuInMobile {
    from { opacity:0;transform:translateY(14px) scale(.985); }
    to { opacity:1;transform:none; }
  }
  html body .kx-mm-pn { animation:kxMenuInMobile .22s cubic-bezier(.22,1,.36,1) both; }
  #kx-hero.kx-hero2 {
    width:100%;height:auto;min-height:0;grid-template-columns:minmax(0,1fr);
    grid-template-areas:"copy" "proof";gap:0;margin:14px 0 20px;padding:23px 18px 13px;
    border-radius:23px;
  }
  #kx-hero .kx-bg { position:absolute;inset:0; }
  #kx-hero .kx-bg::after {
    background:linear-gradient(90deg,rgba(4,4,4,.86) 0%,rgba(4,4,4,.66) 55%,rgba(4,4,4,.38) 100%),
      linear-gradient(0deg,rgba(4,4,4,.54),transparent 48%);
  }
  #kx-hero .kx-hero-scene { inset:0 !important;width:100% !important;height:100% !important;aspect-ratio:auto !important;object-fit:cover !important;object-position:68% center !important; }
  #kx-hero .kx-hero-stage { display:none !important; }
  #kx-hero .kx-hl { max-width:none;padding:0; }
  #kx-hero .kx-eyebrow { margin-bottom:13px;font-size:9px;letter-spacing:.14em; }
  #kx-hero .kx-hl h1 { max-width:440px;font-size:clamp(34px,9.5vw,46px);line-height:1; }
  #kx-hero .kx-hl p { max-width:430px;margin-top:12px;font-size:13px;line-height:1.48; }
  #kx-hero .kx-cta { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px; }
  #kx-hero .kx-btn { min-width:0;min-height:45px;padding:0 8px;border-radius:11px;font-size:11.5px;white-space:normal; }
  #kx-hero .kx-btn svg { width:16px;height:16px;flex:0 0 16px; }
  #kx-hero .kx-pills { display:flex;align-items:center;justify-content:flex-start;gap:6px;margin:15px 0 0;padding-top:10px; }
  #kx-hero .kx-pill { max-width:100%;padding:7px 9px;font-size:9px;line-height:1.25;white-space:normal; }
  #kx-hero .kx-pill .pl-i { width:14px;height:14px;flex:0 0 14px; }
  #kx-hero .kx-carousel {
    position:static;flex:1 0 100%;flex-direction:row;justify-content:flex-end;transform:none;
    margin:2px 42px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;opacity:.76;
  }
  #kx-hero .kx-carousel-dots { flex-direction:row;gap:5px; }
  #kx-hero .kx-carousel-arrow,
  #kx-hero .kx-carousel-arrow[data-dir],
  #kx-hero .kx-carousel-arrow[data-dir]:hover { width:23px;height:23px;transform:none;font-size:13px; }
  #kx-hero .kx-carousel-dot.is-active { width:14px;height:5px; }

  .pl-head { align-items:stretch;gap:11px;margin-bottom:13px; }
  .pl-title { font-size:25px; }
  .pl-search { flex:1 1 100%;max-width:none; }
  .pl-search input { height:47px; }
  .pl-chips { gap:7px;margin:0 -1px 14px;padding:0 1px 5px; }
  .pl-chip { height:38px;padding:0 14px;font-size:12.5px; }
  #pl-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  #pl-grid .pl-card { min-height:202px;padding:13px 12px 12px !important;border-radius:18px !important; }
  #pl-grid .pl-card .pl-lg { width:68px;height:68px;border-radius:19px; }
  #pl-grid .pl-card .pl-nm { min-height:36px !important;margin-top:10px;font-size:13px !important; }
  #pl-grid .pl-card .pl-tp { margin-top:4px;font-size:9px !important; }

  html body .ks-sd-left { overflow:hidden !important;z-index:1; }
  html body .ks-sd-left .ks-st-mark { right:-38px !important;width:190px !important;height:190px !important; }
  html body .ks-sd-right { z-index:1; }
  html body .ks-sc-note { display:block;padding-right:64px; }
  html body .ks-foot { padding:10px 14px 14px !important; }
  html body .ks-foot-links { gap:7px 14px;margin-bottom:9px; }
  html body .ks-foot-links a { font-size:12px; }
  html body .ks-foot-tm { margin-top:6px;font-size:10.5px; }
  html body #faq-section.ks-faq { width:calc(100% - 24px);margin:34px auto 16px !important; }
}

@media (max-width:600px) {
  html body .pl-regs { grid-template-columns:minmax(0,1fr) !important; }
}

@media (max-width:380px) {
  #kx-hero.kx-hero2 { padding-right:14px;padding-left:14px; }
  #kx-hero .kx-cta { grid-template-columns:1fr;gap:7px;margin-top:13px; }
  #kx-hero .kx-btn { min-height:42px; }
  #kx-hero .kx-pill { font-size:8.5px; }
  .pl-title { font-size:23px; }
  #pl-grid .pl-card { min-height:194px;padding:12px 10px 11px !important; }
  #pl-grid .pl-card .pl-lg { width:62px;height:62px; }
  #pl-grid .pl-card .pl-nm { font-size:12px !important; }
}

@media (prefers-reduced-motion:reduce) {
  #kx-hero .kx-carousel,#kx-hero .kx-carousel-arrow,#kx-hero .kx-carousel-dot,
  .pl-chip,.pl-search input,#pl-grid .pl-card,
  #pl-grid .pl-card::before,#pl-grid .pl-card > .pl-brand-art { transition:none !important;animation:none !important; }
  html body .ks-sd .ks-steam-head .ks-steam-icon svg { animation:none !important;filter:drop-shadow(0 0 9px rgba(255,255,255,.3)) drop-shadow(0 0 16px rgba(218,194,150,.2)); }
  html body .ks-logo img { animation:kronosWarmMarkPulse 7s ease-in-out infinite !important;filter:drop-shadow(0 0 9px rgba(255,255,255,.34)) drop-shadow(0 0 18px rgba(224,198,151,.22)) !important; }
}