/* OnlyDraws web preview.
 *
 * Inherits the site's Night palette and type so the page reads as the same
 * product as the app, not a microsite bolted on. Two accents do real work:
 * teal is Perfect Form, gold is Area Match, matching the accents those worlds
 * carry in the app. --mode-accent is swapped by play.js.
 */

:root {
  --bg: #0c0c12; --bg2: #08080c; --card: #1a1a22; --cardDeep: #141019;
  --ink: #ececf2; --muted: #8b8b9c; --faint: #6f6f85;
  --accent: #22e0d6; --onAccent: #06231f; --green: #40d08a; --orange: #ff875c; --gold: #f3c24b;
  --line: rgba(255, 255, 255, .08); --panel: rgba(255, 255, 255, .04); --maxw: 1080px;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hand: "Caveat", var(--sans);
  --mode-accent: var(--accent);
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none }
img { max-width: 100% }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px }

/* Ambient glow, tinted by the active mode so switching modes is felt and not
   just seen. */
body::before {
  content: ""; position: fixed; top: -34vh; left: 50%; transform: translateX(-50%);
  width: 900px; height: 900px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--mode-accent) 11%, transparent), transparent 62%);
  transition: background .5s ease;
}

section { position: relative; z-index: 1 }

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px);
  background: rgba(12, 12, 18, .72); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 58px }
.brand {
  display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px;
  letter-spacing: -.01em; color: var(--ink);
}
.brand .ring {
  width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--mode-accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--mode-accent) 50%, transparent); transition: border-color .4s ease;
}
.nav-cta {
  font-size: 14px; font-weight: 700; color: var(--onAccent); background: var(--accent);
  padding: 9px 16px; border-radius: 11px; box-shadow: 0 0 20px rgba(34, 224, 214, .35);
}
.nav-cta:hover { filter: brightness(1.06) }

/* ---------- Play ---------- */
/* Vertical longhands only: `.play` sits on the same element as `.wrap`, at equal
   specificity and later in the file, so a `padding` shorthand here would silently
   wipe `.wrap`'s 22px gutters and run the canvas to the screen edge. */
.play { padding-top: 26px; padding-bottom: 8px }
.play-head { text-align: center; max-width: 32em; margin: 0 auto 20px }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; color: var(--mode-accent);
  background: color-mix(in srgb, var(--mode-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--mode-accent) 24%, transparent);
  padding: 6px 13px; border-radius: 20px; transition: color .4s ease, border-color .4s ease;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mode-accent);
  box-shadow: 0 0 8px var(--mode-accent); animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .45; transform: scale(.7) } }
.play h1 {
  font-size: clamp(27px, 4.4vw, 40px); line-height: 1.08; letter-spacing: -.03em;
  font-weight: 800; margin: 14px 0 8px;
}
.play h1 .grad {
  color: var(--mode-accent);
  text-shadow: 0 0 34px color-mix(in srgb, var(--mode-accent) 45%, transparent);
  transition: color .4s ease;
}
.play-head .lede { font-size: 16px; color: var(--muted); margin: 0 }

/* Stage: board and verdict side by side on desktop, stacked on mobile. The
   verdict panel is present before the first attempt (showing the dimensions
   with empty tracks), so scoring never shifts the layout and the rubric sells
   itself before anyone draws. */
/* Tight, centered columns rather than 1fr: the board is capped so the whole
   stage (tabs, prompt, canvas, verdict) lands inside the first viewport on a
   laptop, which is the only way "play first" is actually true. */
.stage {
  display: grid; grid-template-columns: minmax(0, 500px) 336px; gap: 22px;
  align-items: start; justify-content: center; margin: 0 auto;
}

.tabs {
  display: flex; gap: 8px; padding: 5px; border-radius: 15px;
  background: var(--panel); border: 1px solid var(--line); margin: 0 0 14px;
}
.tab {
  flex: 1; appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--muted);
  padding: 10px 12px; border-radius: 11px; transition: background .18s ease, color .18s ease;
}
.tab:hover { color: var(--ink) }
.tab.on { color: var(--onAccent); background: var(--mode-accent) }
.tab:focus-visible { outline: 2px solid var(--mode-accent); outline-offset: 2px }

.prompt { font-size: 16.5px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em }
.note { font-size: 13.5px; color: var(--faint); margin: 0 0 14px }

/* Square, and also bounded by viewport height so the verdict panel is never
   pushed off screen on a short laptop or a phone in landscape. The canvas MUST
   stay square: Area Match scoring is aspect-ratio dependent (see canvas.js). */
.board-wrap { position: relative; width: min(100%, 58vh); aspect-ratio: 1; margin: 0 auto }
/* touch-action lives on the canvas alone: drawing never scrolls the page, and
   the page still scrolls from everywhere else. */
#board {
  width: 100%; height: 100%; display: block; border-radius: 20px; touch-action: none;
  background: linear-gradient(180deg, #101018, #0b0b11);
  border: 1px solid var(--line); cursor: crosshair;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 18px 46px rgba(0, 0, 0, .45);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#board-hint {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-family: var(--hand); font-size: 30px; font-weight: 700; color: rgba(255, 255, 255, .17);
}
/* `display: grid` above beats the user-agent `[hidden] { display: none }`, so the
   attribute needs an explicit rule or the hint sits on top of every result. */
#board-hint[hidden] { display: none }
#board-error {
  margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--orange);
  background: rgba(255, 135, 92, .09); border: 1px solid rgba(255, 135, 92, .26);
  padding: 10px 14px; border-radius: 12px;
}

/* Verdict */
.verdict {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 20px; position: sticky; top: 74px;
}
.verdict-head { display: flex; align-items: baseline; gap: 10px }
.score {
  font-size: 46px; font-weight: 800; letter-spacing: -.035em; line-height: 1;
  color: var(--mode-accent); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px color-mix(in srgb, var(--mode-accent) 35%, transparent);
}
/* Smaller when there is no score yet, so the placeholder does not read as a
   stray rule sitting where a number should be. */
.score.blank { color: var(--faint); text-shadow: none; font-size: 28px; opacity: .6 }
.band { font-size: 14px; font-weight: 700; color: var(--ink) }
.flavor { font-size: 13.5px; color: var(--muted); margin: 8px 0 16px; min-height: 2.6em }

.bars { display: grid; gap: 13px }
.bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px }
.bar-label { font-size: 13.5px; font-weight: 700 }
.bar-label em { font-style: normal; font-weight: 600; color: var(--orange); font-size: 12px }
.bar-score { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink) }
.bar-score.blank { color: var(--faint) }
.bar-track {
  height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; margin: 5px 0 3px;
}
.bar-track i {
  display: block; height: 100%; border-radius: 4px; background: var(--mode-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mode-accent) 55%, transparent);
  transition: width .55s cubic-bezier(.22, .8, .3, 1);
}
.bar-weight { font-size: 11.5px; color: var(--faint) }

.insight {
  font-size: 13.5px; color: var(--ink); margin: 16px 0 0; padding: 11px 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.session { font-size: 13px; color: var(--muted); margin: 14px 0 0 }
.session b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums }
.session .sep { color: var(--faint); margin: 0 7px }

.verdict-actions { display: flex; gap: 9px; margin: 16px 0 0 }
.btn {
  appearance: none; border: 0; cursor: pointer; font-family: inherit; font-size: 14.5px;
  font-weight: 700; padding: 11px 16px; border-radius: 12px; flex: 1;
  transition: filter .18s ease, background .18s ease;
}
.btn:focus-visible { outline: 2px solid var(--mode-accent); outline-offset: 2px }
.btn-primary { background: var(--mode-accent); color: var(--onAccent) }
.btn-primary:hover { filter: brightness(1.07) }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line) }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .22) }
.btn[disabled] { opacity: .4; cursor: default }
.share-status { font-size: 12.5px; color: var(--green); margin: 9px 0 0; min-height: 1.2em }

/* ---------- App panel ---------- */
.app-panel {
  margin: 40px auto 0; max-width: 940px; border: 1px solid var(--line); border-radius: 22px;
  background: var(--cardDeep); padding: 30px 26px; opacity: .72;
  transition: opacity .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.app-panel.live { opacity: 1 }
.app-panel.loud {
  border-color: rgba(34, 224, 214, .3);
  box-shadow: 0 0 0 1px rgba(34, 224, 214, .08), 0 24px 60px rgba(0, 0, 0, .4);
  background: radial-gradient(circle at 50% 0, rgba(34, 224, 214, .09), transparent 62%), var(--cardDeep);
}
.app-panel h2 {
  font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; font-weight: 800; margin: 0 0 8px;
}
.app-lede { font-size: 16px; color: var(--muted); margin: 0 0 22px; max-width: 44em }

.counts {
  display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid var(--line);
  background: var(--panel); border-radius: 16px; padding: 16px 10px; margin: 0 0 22px;
}
.count { flex: 1; min-width: 108px; text-align: center; padding: 4px 8px }
.count b {
  display: block; font-size: 24px; font-weight: 800; color: var(--accent); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.count span { font-size: 12.5px; color: var(--muted) }

.worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px }
.world {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  position: relative; transition: transform .2s ease, border-color .2s ease;
}
.world:hover { transform: translateY(-3px); border-color: rgba(34, 224, 214, .26) }
.world .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px }
.world h3 { font-size: 15.5px; font-weight: 800; margin: 0 0 4px }
.world p { font-size: 13.5px; color: var(--muted); margin: 0 }
.world .in-app {
  position: absolute; top: 14px; right: 14px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 8px;
}

.depth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 22px 0 0 }
.depth-item { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--panel) }
.depth-item h3 { font-size: 14.5px; font-weight: 800; margin: 0 0 4px }
.depth-item p { font-size: 13px; color: var(--muted); margin: 0 }

/* ---------- Final CTA ---------- */
.final {
  text-align: center; border: 1px solid rgba(34, 224, 214, .28); border-radius: 26px;
  padding: 50px 24px; margin: 40px 0 0; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 0, rgba(34, 224, 214, .12), transparent 60%), var(--cardDeep);
}
.final h2 { font-size: clamp(24px, 4vw, 34px); letter-spacing: -.02em; font-weight: 800; margin: 0 0 10px }
.final p { font-size: 16.5px; color: var(--muted); margin: 0 0 24px }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px }
.appstore {
  display: inline-flex; align-items: center; gap: 11px; background: #000; color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); padding: 12px 20px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.appstore:hover { border-color: rgba(255, 255, 255, .34) }
.appstore svg { width: 24px; height: 28px; flex: none }
.appstore .lbl { display: flex; flex-direction: column; line-height: 1.05; text-align: left }
.appstore .s { font-size: 11px; letter-spacing: .03em; opacity: .85 }
.appstore .b { font-size: 19px; font-weight: 600 }
.appstore.soon { cursor: default; background: #16161f; border-color: var(--line) }
.appstore.soon:hover { border-color: var(--line) }
/* App conversion is brand-teal, never the active mode's accent: this button is
   about the product, not about whichever mode you happen to be playing. */
.final .btn-primary { background: var(--accent); color: var(--onAccent) }
.final .note { font-size: 13px; color: var(--faint); margin: 18px 0 0 }
.final .note b { color: var(--muted); font-weight: 600 }
/* Desktop cannot install an iOS app, so its primary action is sending the link
   to a phone. Hidden on touch, where the App Store button is the real path. */
.to-phone { display: none }

/* ---------- Footer ---------- */
footer { margin-top: 64px; border-top: 1px solid var(--line); padding: 30px 0 44px; text-align: center }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); margin-bottom: 12px }
.foot-brand .ring { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--accent) }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 14px; margin-bottom: 14px }
.foot-links a { color: var(--muted) }
.foot-links a:hover { color: var(--ink) }
.foot-note { font-size: 12.5px; color: var(--faint); max-width: 42em; margin: 0 auto }

/* ---------- Responsive ---------- */
@media (hover: none) and (pointer: coarse) {
  #board { cursor: default }
}
@media (min-width: 861px) {
  /* Desktop: sending the link to a phone is the real conversion path, so it
     leads. */
  .to-phone { display: inline-flex }
}
@media (max-width: 860px) {
  .stage { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 16px }
  /* On a phone the board shares the viewport with the header and prompt, so cap
     it lower and let the verdict sit just below the fold. */
  .board-wrap { width: min(100%, 54vh) }
  .verdict { position: static }
  .worlds, .depth { grid-template-columns: repeat(2, 1fr) }
  .play { padding-top: 18px }
  .play h1 { margin: 12px 0 6px }
  .play-head { margin-bottom: 16px }
  /* Keep the canvas in the first viewport on a phone: the lede is the first
     thing to go, because the board is the pitch. */
  .play-head .lede { display: none }
  .flavor { min-height: 0 }
}
@media (max-width: 560px) {
  .worlds, .depth { grid-template-columns: 1fr }
  .count { min-width: calc(50% - 8px); flex: none }
  .score { font-size: 40px }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto }
}