/* Learn Sanskrit - the shareable page for the six Sanskrit games.

   It borrows the hub's stylesheet for the palette, the brand and the footer,
   so it reads as the same site, and adds only what this page needs: large
   cards for the six games and a quiet list for everything else. The Sanskrit
   games are the page; the arcade games are a way on, not a second headline. */

/* A control is not text: holding one on a phone must not offer Select or Copy. */
button, kbd, canvas, summary, label, .sk-card, .sk-btn, .sk-more a, .icon-back, .brand {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.sk-top {
  display: flex; align-items: center; gap: 12px;
  width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 14px 0;
}
.sk-top .icon-back {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--text);
}
.sk-top .icon-back:hover { color: var(--accent); border-color: var(--accent); }

.sk-main { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 40px; }

/* ------------------------------------------------------------------ hero */
.sk-hero {
  padding: 26px 24px; margin: 6px 0 22px; border: 1px solid var(--line); border-radius: 18px;
  background:
    radial-gradient(120% 130% at 6% 0%, rgba(242, 133, 28, 0.18), rgba(0, 0, 0, 0) 60%),
    radial-gradient(120% 130% at 96% 100%, rgba(88, 88, 253, 0.2), rgba(0, 0, 0, 0) 58%),
    var(--panel);
}
/* The hero carries one game's picture beside the text. On a phone it sits on
   top, full width, so the first thing on the screen is a game, not a paragraph. */
.sk-hero { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
.sk-hero:has(.sk-feature:not([hidden])) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.sk-hero-text { order: 1; min-width: 0; }
.sk-feature {
  order: 2; display: block; position: relative; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--line); background: #141428; transition: transform 0.15s ease, border-color 0.15s ease;
}
.sk-feature:hover { transform: translateY(-3px); border-color: var(--accent); }
.sk-feature-art { display: block; aspect-ratio: 16 / 9; }
.sk-feature-art svg { display: block; width: 100%; height: 100%; }
.sk-feature-cap {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px;
  background: var(--panel); border-top: 1px solid var(--line);
}
.sk-feature-name { font-size: 18px; font-weight: 700; color: var(--accent); }
[data-theme="dark"] .sk-feature-name { color: #c4c4ff; }
.sk-feature-sub { font-size: 13.5px; color: var(--muted); }
@media (max-width: 760px) {
  .sk-hero:has(.sk-feature:not([hidden])) { grid-template-columns: 1fr; }
  .sk-feature { order: 0; }
}

.sk-kicker {
  margin: 0 0 6px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: #f2a51c;
}
.sk-hero h1 { margin: 0 0 10px; font-size: clamp(24px, 4.4vw, 36px); line-height: 1.15; letter-spacing: -0.6px; }
.sk-lede { margin: 0 0 18px; max-width: 62ch; color: var(--muted); font-size: 15.5px; line-height: 1.65; }

.sk-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 15px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.sk-btn:hover { filter: brightness(1.1); }
.sk-btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.sk-btn-ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }

/* ----------------------------------------------------- the six, up front */
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sk-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--line); background: var(--panel);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.sk-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.sk-art { display: block; aspect-ratio: 16 / 9; background: #141428; }
.sk-art svg { display: block; width: 100%; height: 100%; }
.sk-body { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; flex: 1; }
.sk-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #f2a51c; }
.sk-name { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.sk-sub { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.sk-play {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 16px; border-radius: 999px; background: var(--pill); color: var(--accent); font-weight: 700; font-size: 14px;
}
[data-theme="dark"] .sk-play { color: #c4c4ff; }
.sk-card:hover .sk-play { background: var(--accent); color: #fff; }

.sk-beta { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.sk-beta a { color: var(--accent); }
[data-theme="dark"] .sk-beta a { color: #b9b9ff; }

/* ------------------------------------ everything else, deliberately quiet */
.sk-more { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.sk-more h2 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0.2px; }
.sk-more ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 18px; }
.sk-more li { min-width: 0; }
.sk-more a {
  display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 0;
  color: var(--muted); font-size: 13px; opacity: 0.85;
}
.sk-more a b { color: var(--text); font-weight: 600; font-size: 13.5px; opacity: 0.8; }
.sk-more a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-more a:hover, .sk-more a:hover b { color: var(--accent); opacity: 1; }

@media (max-width: 900px) {
  .sk-grid { grid-template-columns: repeat(2, 1fr); }
  .sk-more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sk-hero { padding: 20px 16px; }
  .sk-grid { grid-template-columns: 1fr; gap: 14px; }
  .sk-more ul { grid-template-columns: minmax(0, 1fr); }
  .sk-actions .sk-btn { flex: 1 1 100%; }
}

/* The theme button sits at the far end of the bar, as it does on the hub. */
.sk-top .theme-btn { margin-left: auto; }

/* Inside the site shell, beside the sidebar */
.main.sk-main { width: auto; margin: 0; padding-bottom: 40px; }

/* A double tap must never zoom the page: manipulation allows scrolling and
   pinching but not the double tap zoom. On html it covers every element. */
html { touch-action: manipulation; }