/* Divisible Dash public site design system.
   Shared by the landing page, /play, /rules, /class, /support, /privacy.
   The teacher dashboard keeps its own stylesheet (teachers/css/app.css);
   both draw from the same palette so the site reads as one product.
   No emojis anywhere. Icons are drawn SVG paths or CSS shapes. */

:root {
  --bg: #0f1226;
  --bg-2: #171a35;
  --card: #1e2244;
  --card-2: #262b52;
  --line: #33386b;
  --ink: #eef0ff;
  --ink-dim: #a6abd6;
  --accent: #35d0e0;
  --accent-ink: #052b30;
  --primary: #5b6cff;
  --primary-ink: #ffffff;
  --danger: #ff5c72;
  --good: #46e08a;
  --warn: #ffcf5c;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(1100px 600px at 75% -8%, #232d63 0%, rgba(35, 45, 99, 0) 60%),
    radial-gradient(900px 500px at -10% 40%, #1b1f45 0%, rgba(27, 31, 69, 0) 55%),
    var(--bg);
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

::selection { background: rgba(53, 208, 224, 0.35); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 5.5vw, 52px); font-weight: 800; }
h2 { font-size: clamp(23px, 3.4vw, 32px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 14px; }

.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-dim); }
.muted { color: var(--ink-dim); }
.center { text-align: center; }

/* ---- Brand mark: the drawn diamond, a nod to the in-game gem ---- */
.brand-mark {
  display: inline-block;
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  border-radius: 7px;
  transform: rotate(45deg);
  box-shadow: 0 0 16px rgba(53, 208, 224, 0.45);
  flex: 0 0 auto;
}
.brand-mark.small { width: 20px; height: 20px; border-radius: 5px; }

/* ---- Layout ---- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.container.narrow { max-width: 780px; }

.section { padding: 72px 0; }
.section.tight { padding: 44px 0; }
.section.alt { background: rgba(23, 26, 53, 0.55); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---- Site navigation ---- */
.site-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(15, 18, 38, 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-nav .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink); font-weight: 800; font-size: 17px; text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }
.nav-links a { color: var(--ink-dim); font-weight: 600; font-size: 14.5px; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a.current { color: var(--ink); }
.nav-links .btn { margin-left: 6px; }

/* ---- Buttons ---- */
.btn {
  appearance: none;
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  background: var(--card-2);
  text-decoration: none;
  transition: transform 0.05s ease, filter 0.15s ease, box-shadow 0.2s ease;
}
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 22px rgba(91, 108, 255, 0.35); }
.btn.accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 22px rgba(53, 208, 224, 0.3); }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.big { padding: 15px 28px; font-size: 17px; border-radius: 14px; }
.btn.small { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }

.row-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---- Store badges ----
   Apple's and Google's own artwork, byte for byte as they supply it
   (img/app-store-badge.svg from Apple Marketing Tools, img/google-play-badge.png
   from Google). Both companies forbid redrawing or restyling their badge, so
   nothing here touches the artwork: no border, no glow, no filter, and never a
   width that would stretch it. What is left to get right is minimum height and
   the clear space around each one. Google's PNG already carries its clear space
   as transparent canvas (564x168 of artwork on a 646x250 sheet), Apple's SVG
   does not, so the padding below adds it. The two sizes differ on purpose: they
   land the visible artwork on the same 54px height. */
.store-row {
  display: flex; gap: 10px; justify-content: center;
  align-items: center; flex-wrap: wrap;
  margin: 32px 0 0;
}
.store-badge {
  display: inline-flex; align-items: center;
  text-decoration: none; border: 0; background: none;
  transition: opacity 0.15s ease;
}
.store-badge:hover { text-decoration: none; opacity: 0.88; }
.store-badge img { display: block; }

/* Apple: 54px of badge, plus a quarter of that as clear space. The
   content-box is deliberate. The site-wide border-box would count that
   padding inside the 54, shrinking the artwork to 26px and leaving Apple's
   badge half the size of Google's. */
.store-badge.apple img {
  box-sizing: content-box;
  height: 54px; width: auto; padding: 14px;
}
/* Google: the sheet is scaled so its 168/250 of artwork lands on 54px. */
.store-badge.google img { height: 80px; width: auto; }

/* A store button whose address is still a TODO. The /get/ script adds this,
   so pasting the real address in is all that is needed to bring the button
   back to life. */
.store-badge.disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* Apple and Google both require their attribution wherever the badge runs. */
.trademark-note {
  margin: 30px auto 0; max-width: 620px;
  font-size: 11.5px; line-height: 1.6; color: var(--ink-dim); opacity: 0.75;
}

/* ---- Cards and grids ---- */
.grid { display: grid; gap: 18px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid.cols-3 { grid-template-columns: 1fr; } .grid.cols-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 2px; }
.card .icon { margin-bottom: 14px; }

/* Drawn SVG icons sit in a soft tile */
.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(53, 208, 224, 0.12);
  border: 1px solid rgba(53, 208, 224, 0.3);
}
.icon svg { display: block; }

/* ---- Pills / badges ---- */
.pill {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(91, 108, 255, 0.18); color: #b9c2ff;
  border: 1px solid rgba(91, 108, 255, 0.4);
}
.pill.good { background: rgba(70, 224, 138, 0.14); color: var(--good); border-color: rgba(70, 224, 138, 0.4); }
.pill.warn { background: rgba(255, 207, 92, 0.14); color: var(--warn); border-color: rgba(255, 207, 92, 0.4); }

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; padding: 116px 0 100px; }
.hero .container { position: relative; z-index: 2; }
.hero-canvas {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  opacity: 0.68; pointer-events: none;
}
.hero-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 18, 38, 0) 40%, var(--bg) 96%);
}
.hero h1 .grad {
  background: linear-gradient(90deg, var(--accent), #7f8cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { max-width: 620px; }

/* ---- Content pages (rules, legal, support) ---- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 26px; }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose code {
  font-family: ui-monospace, Menlo, monospace; font-size: 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 6px;
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink-dim); font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; }

.callout {
  background: rgba(53, 208, 224, 0.09);
  border: 1px solid rgba(53, 208, 224, 0.35);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 16px;
}
.callout.warn { background: rgba(255, 207, 92, 0.1); border-color: rgba(255, 207, 92, 0.4); }

/* Worked example blocks on the rules page */
.example {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 16px;
  font-variant-numeric: tabular-nums;
}
.example .label { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }

/* ---- FAQ details/summary ---- */
details.faq {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 0; margin-bottom: 12px; overflow: hidden;
}
details.faq summary {
  cursor: pointer; font-weight: 700; padding: 16px 20px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid var(--ink-dim); border-bottom: 2px solid var(--ink-dim);
  transform: rotate(45deg); transition: transform 0.15s ease; margin-right: 4px;
}
details.faq[open] summary::after { transform: rotate(225deg); }
details.faq .faq-body { padding: 0 20px 16px; color: var(--ink-dim); }

/* ---- Footer ---- */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: rgba(15, 18, 38, 0.6);
  padding: 34px 0 44px;
  margin-top: 72px;
  font-size: 14px; color: var(--ink-dim);
}
.site-footer .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 22px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.site-footer .foot-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.site-footer nav { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; }
.site-footer a { color: var(--ink-dim); }
.site-footer a:hover { color: var(--ink); }
.site-footer .foot-note { flex-basis: 100%; margin-top: 10px; font-size: 13px; }

/* ---- Scroll reveal (classes are added by js/site-fx.js, so content is
        fully visible with no JS and under prefers-reduced-motion) ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
[data-reveal="2"].reveal { transition-delay: 0.1s; }
[data-reveal="3"].reveal { transition-delay: 0.2s; }

/* ---- Card hover lift ---- */
.card { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.25s ease; }
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(53, 208, 224, 0.5);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(53, 208, 224, 0.08);
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}