/* Kuwal Store base (P0b): reset, typography, layout utilities. Scoped under html.ks so admin/legacy never leak. */
:where(html.ks) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--ks-header-h) + 16px); }
:where(html.ks) *, :where(html.ks) *::before, :where(html.ks) *::after { box-sizing: border-box; }
:where(html.ks) body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--ks-font-body); font-size: 1rem; line-height: 1.6;
  color: var(--ks-text); background: var(--ks-bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden; /* legacy style.css is not loaded; keeps 360px free of horizontal scroll */
}
:where(html.ks) body::before, :where(html.ks) body::after { content: none; }
:where(html.ks) main { flex: 1 0 auto; display: block; }
:where(html.ks) #ks-main { overflow-x: clip; }
:where(html.ks) :where([data-theme]) { background-color: var(--ks-bg); color: var(--ks-text); font-family: var(--ks-font-body); }
:where(html.ks) h1, :where(html.ks) h2, :where(html.ks) h3, :where(html.ks) h4, :where(html.ks) p, :where(html.ks) figure, :where(html.ks) blockquote, :where(html.ks) dl, :where(html.ks) dd { margin: 0; }
:where(html.ks) ul, :where(html.ks) ol { margin: 0; padding: 0; }
:where(html.ks) img, :where(html.ks) svg, :where(html.ks) video, :where(html.ks) canvas { display: block; max-width: 100%; }
:where(html.ks) img, :where(html.ks) video { height: auto; }
:where(html.ks) a { color: var(--ks-primary-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(html.ks) a:hover { color: var(--ks-primary-hover); }
:where(html.ks) :where([data-theme="games"]) a:hover { color: var(--ks-text); }
:where(html.ks) button, :where(html.ks) input, :where(html.ks) select, :where(html.ks) textarea { font: inherit; color: inherit; }
:where(html.ks) button { cursor: pointer; }
:where(html.ks) [hidden] { display: none !important; }
:where(html.ks) ::selection { background: var(--ks-primary); color: var(--ks-on-primary); }
:where(html.ks) table { border-collapse: collapse; }

/* focus */
:where(html.ks) :focus-visible { outline: 3px solid var(--ks-focus); outline-offset: 2px; }
:where(html.ks) :focus:not(:focus-visible) { outline: none; }

/* skip link */
.ks-skip {
  position: fixed; left: 12px; top: -80px; z-index: 1000; padding: 12px 18px; min-height: 44px;
  background: var(--ks-primary-ink, #1E3A8A); color: #fff; border-radius: var(--ks-r-md);
  font-weight: 700; text-decoration: none; transition: top var(--ks-dur-1) var(--ks-ease);
}
.ks-skip:focus { top: 12px; color: #fff; }
.ks-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* layout */
.ks-container { width: 100%; max-width: calc(var(--ks-container) + var(--ks-gutter) * 2); margin-inline: auto; padding-inline: var(--ks-gutter); }
.ks-container--narrow { max-width: calc(760px + var(--ks-gutter) * 2); }
.ks-container--wide { max-width: calc(1440px + var(--ks-gutter) * 2); }
.ks-section { padding-block: var(--ks-s-8); position: relative; }
.ks-section--tight { padding-block: var(--ks-s-7); }
.ks-section--flush { padding-block: 0; }
.ks-section--alt { background: var(--ks-surface-2); }
.ks-section--wash { background: var(--ks-wash); }
.ks-section--defer { content-visibility: auto; contain-intrinsic-size: auto 640px; }
@media (min-width: 768px) { .ks-section { padding-block: var(--ks-s-9); } .ks-section--tight { padding-block: var(--ks-s-8); } }

/* typography */
.ks-h1, .ks-h2, .ks-h3, .ks-h4 { font-family: var(--ks-font-display); font-weight: var(--ks-h-weight); letter-spacing: var(--ks-h-track); color: var(--ks-text); text-wrap: balance; }
.ks-h1 { font-size: clamp(2.25rem, 1.4rem + 4vw, 4.5rem); line-height: 1.05; }
.ks-h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.1; }
.ks-h3 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem); line-height: 1.25; }
.ks-h4 { font-size: 1.0625rem; line-height: 1.35; }
.ks-lead { font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); line-height: 1.5; color: var(--ks-muted); text-wrap: pretty; max-width: 42ch; }
.ks-text-muted { color: var(--ks-muted); }
.ks-small { font-size: .875rem; line-height: 1.5; }
.ks-caption { font-size: .75rem; line-height: 1.4; color: var(--ks-muted); }
.ks-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--ks-font-display);
  font-size: .8125rem; font-weight: 700; letter-spacing: var(--ks-eyebrow-track); color: var(--ks-primary-ink);
}
[data-theme="games"] .ks-eyebrow { color: var(--ks-primary-ink); }
[data-theme="games"] .ks-eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }
[data-theme="software"] .ks-eyebrow { color: var(--ks-primary); }
.ks-center { text-align: center; }
.ks-center .ks-lead { margin-inline: auto; }
.ks-prose { max-width: 68ch; line-height: 1.7; }
.ks-prose > * + * { margin-top: 1em; }

/* grid / flex utilities */
.ks-grid { display: grid; gap: var(--ks-s-4); }
.ks-grid--2, .ks-grid--3, .ks-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ks-grid--1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ks-grid { gap: var(--ks-s-5); } .ks-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ks-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ks-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .ks-grid--stack-sm { grid-template-columns: minmax(0, 1fr); } }
.ks-flex { display: flex; gap: var(--ks-s-3); }
.ks-flex--wrap { flex-wrap: wrap; }
.ks-flex--center { align-items: center; }
.ks-flex--between { justify-content: space-between; }
.ks-flex--col { flex-direction: column; }
.ks-stack > * + * { margin-top: var(--ks-s-4); }
.ks-stack--lg > * + * { margin-top: var(--ks-s-5); }
.ks-gap-2 { gap: var(--ks-s-2); } .ks-gap-4 { gap: var(--ks-s-4); } .ks-gap-5 { gap: var(--ks-s-5); }
.ks-mt-4 { margin-top: var(--ks-s-4); } .ks-mt-5 { margin-top: var(--ks-s-5); } .ks-mt-6 { margin-top: var(--ks-s-6); } .ks-mt-7 { margin-top: var(--ks-s-7); }
.ks-split { display: grid; gap: var(--ks-s-6); align-items: center; }
@media (min-width: 900px) { .ks-split { grid-template-columns: 1fr 1fr; gap: var(--ks-s-8); } .ks-split--reverse > :first-child { order: 2; } }
.ks-rail { display: flex; gap: var(--ks-s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--ks-s-3); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ks-rail::-webkit-scrollbar { display: none; }
.ks-rail > * { flex: 0 0 auto; scroll-snap-align: start; }
.ks-rail { scroll-padding-inline: var(--ks-gutter); overscroll-behavior-x: contain; }
/* phones: soft edge fades only on the side that still has content (JS sets data-rail-scrolled / data-rail-end) */
@media (max-width: 767px) {
  .ks-rail { --_fl: 0px; --_fr: 20px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--_fl), #000 calc(100% - var(--_fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--_fl), #000 calc(100% - var(--_fr)), transparent 100%); }
  .ks-rail[data-rail-scrolled] { --_fl: 20px; }
  .ks-rail[data-rail-end] { --_fr: 0px; }
}