/* Drawriors website: the game's own look (night indigo, toy-yellow buttons, Fredoka). */
@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-display: swap; src: url(/fonts/fredoka-latin.woff2) format('woff2'); }

:root {
  --bg: #12152e; --bg2: #1c2050; --bg3: #262b66; --ink: #ffffff; --muted: #b9c0ff;
  --yellow: #ffd23f; --yellow2: #ffb000; --yshadow: #b77900;
  --pink: #ff4f6d; --cyan: #2ec4f1; --green: #3ddc97; --purple: #7b61ff; --orange: #ff9f1c;
  --radius: 22px; --gutter: 20px; --max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 18px/1.55 Fredoka, ui-rounded, system-ui, sans-serif; overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--yellow); }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; font-weight: 700; }
h2 { font-size: clamp(30px, 4.6vw, 46px); text-align: center; }
h3 { font-size: 23px; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: #2a1f00; padding: 8px 14px; border-radius: 10px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }

/* buttons: chunky toy buttons like the game's FIGHT! button */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; color: #2a1f00;
  background: linear-gradient(var(--yellow), var(--yellow2)); border-radius: 999px;
  padding: 14px 28px; box-shadow: 0 6px 0 var(--yshadow), 0 12px 24px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--yshadow), 0 16px 28px rgba(0,0,0,.4); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--yshadow), 0 6px 12px rgba(0,0,0,.35); }
.btn-lg { font-size: 22px; padding: 18px 34px; }
.btn-sm { font-size: 16px; padding: 9px 18px; box-shadow: 0 4px 0 var(--yshadow); }
.btn-ghost { color: var(--ink); font-weight: 600; text-decoration: none; padding: 14px 6px; display: inline-flex; gap: 8px; align-items: center; }
.btn-ghost span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pink); font-size: 13px; }
.btn-ghost:hover { color: var(--yellow); }

/* header */
.top { position: sticky; top: 0; z-index: 5; background: rgba(18,21,46,.88); border-bottom: 1px solid rgba(255,255,255,.07); }
@supports (backdrop-filter: blur(8px)) { .top { background: rgba(18,21,46,.7); backdrop-filter: blur(10px); } }
.top-in { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 22px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--ink); }

/* hero */
.hero {
  position: relative; overflow: hidden; padding: 56px 0 72px;
  background: radial-gradient(110% 80% at 70% 0%, #3a2f86 0%, var(--bg2) 45%, var(--bg) 100%);
}
.hero::before { /* the end card's slow sunburst */
  content: ''; position: absolute; inset: -60%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 70% 40%, rgba(255,255,255,.045) 0 8deg, transparent 8deg 20deg);
}
.hero-in { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.wordmark { width: min(520px, 100%); margin: 0 0 18px -6px; }
.hero h1 { font-size: clamp(34px, 5vw, 56px); }
.hl { color: var(--yellow); }
.lead { font-size: 20px; color: #e6e8ff; max-width: 34em; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 26px 0 14px; }
.small { font-size: 15px; color: var(--muted); }
.hero-art { margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.tile { border-radius: var(--radius); overflow: hidden; border: 5px solid #fff; box-shadow: 0 18px 40px rgba(0,0,0,.45); background: #fff; }
.tile-a { transform: rotate(-5deg); }
.tile-b { transform: rotate(4deg) scale(1.12); border-color: var(--yellow); background: var(--bg3); }
.arrow { font-size: 40px; color: var(--yellow); text-shadow: 0 4px 0 var(--yshadow); }

/* video */
.watch { padding: 76px 0; background: var(--bg); }
.sub { text-align: center; color: var(--muted); max-width: 40em; margin: 0 auto 30px; }
.player {
  max-width: 960px; margin: 0 auto; border-radius: 26px; overflow: hidden; background: #000;
  border: 6px solid var(--purple); box-shadow: 0 0 0 6px rgba(123,97,255,.25), 0 24px 60px rgba(0,0,0,.5);
}
.player video { width: 100%; aspect-ratio: 16 / 9; }

/* how it works */
.how { padding: 76px 0; background: linear-gradient(var(--bg), var(--bg2)); }
.steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step { position: relative; background: var(--bg3); border-radius: var(--radius); padding: 0 0 22px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; }
.step h3, .step p { padding: 0 22px; }
.step h3 { margin-top: 24px; }
.step p { color: #dde0ff; font-size: 17px; margin: 0; }
.num {
  position: relative; display: grid; place-items: center; width: 50px; height: 50px; margin: -25px 0 -14px 18px;
  border-radius: 50%; font-weight: 700; font-size: 26px; color: #2a1f00; background: var(--yellow); box-shadow: 0 4px 0 var(--yshadow);
}

/* studio */
.studio { padding: 76px 0; background: var(--bg2); }
.studio-in { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: center; }
.studio h2 { text-align: left; }
.studio-copy p { color: #dde0ff; }
.shot { border-radius: 18px; border: 4px solid rgba(255,255,255,.15); box-shadow: 0 20px 50px rgba(0,0,0,.45); }

/* features */
.features { padding: 76px 0; background: var(--bg); }
.grid { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { background: var(--bg3); border-radius: 20px; padding: 22px; border-top: 6px solid var(--c, var(--purple)); }
.card h3 { font-size: 21px; margin: 10px 0 6px; }
.card p { color: #d7dbff; font-size: 16px; margin: 0; }
.ico { font-size: 34px; display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: rgba(255,255,255,.07); }
.c-pink { --c: var(--pink); } .c-orange { --c: var(--orange); } .c-cyan { --c: var(--cyan); }
.c-green { --c: var(--green); } .c-purple { --c: var(--purple); } .c-yellow { --c: var(--yellow); }

/* FAQ */
.faq { padding: 80px 0; background: linear-gradient(var(--bg), var(--bg2)); }
.faq-in { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 48px; align-items: start; }
.faq-side { position: sticky; top: 90px; }
.faq-side h2 { text-align: left; }
.faq-intro { color: var(--muted); margin-bottom: 22px; }
.promises { list-style: none; margin: 0; padding: 6px 18px; border-radius: 20px; background: rgba(61,220,151,.08); border: 2px solid rgba(61,220,151,.4); }
.promises li { display: flex; gap: 14px; align-items: center; padding: 14px 0; }
.promises li + li { border-top: 1px solid rgba(61,220,151,.25); }
.p-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(61,220,151,.15); font-size: 22px; }
.promises b { display: block; font-size: 17px; line-height: 1.25; }
.promises small { display: block; color: var(--muted); font-size: 14px; line-height: 1.35; }
.faq-main { display: grid; gap: 30px; }
.qgroup-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
.qgroup-title span { font-size: 20px; letter-spacing: 0; }
.qlist { background: var(--bg3); border-radius: 20px; overflow: hidden; }
.qa + .qa { border-top: 1px solid rgba(255,255,255,.08); }
.qa summary { cursor: pointer; list-style: none; padding: 18px 60px 18px 22px; font-weight: 600; font-size: 18px; line-height: 1.35; position: relative; transition: background .15s ease; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { background: rgba(255,255,255,.04); }
.qa summary::after { content: ''; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
.qa[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qa[open] summary { color: var(--yellow); }
.ans { padding: 0 22px 20px; color: #dde0ff; font-size: 17px; max-width: 62ch; }
.ans p { margin: 0 0 .7em; }
.ans p:last-child { margin-bottom: 0; }
.ans ul { margin: 0; padding-left: 20px; }
.ans li { margin: .4em 0; }

/* final call */
.final { padding: 80px 0 90px; text-align: center; background: radial-gradient(90% 100% at 50% 100%, #3a2f86 0%, var(--bg) 70%); }
.final-mascot { margin: 0 auto 14px; width: 120px; animation: bob 2.4s ease-in-out infinite; }
.final p { color: var(--muted); font-size: 20px; margin-bottom: 28px; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(3deg); } }

/* footer */
.foot { background: #0d1024; color: var(--muted); font-size: 15px; padding: 26px 0; }
.foot-in { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: center; }
.foot p { margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }

/* blog */
.post-wrap { max-width: 760px; margin: 0 auto; padding: 56px var(--gutter) 80px; }
.post-wrap h1 { font-size: clamp(32px, 5vw, 48px); }
.post-meta { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.post-wrap h2 { text-align: left; font-size: 28px; margin-top: 1.6em; }
.post-wrap p, .post-wrap li { color: #e2e5ff; }
.post-wrap figure { margin: 28px 0; }
.post-wrap figure img { border-radius: 16px; }
.post-wrap figcaption { color: var(--muted); font-size: 15px; margin-top: 8px; text-align: center; }
.posts { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; }
.posts a { display: block; text-decoration: none; color: var(--ink); background: var(--bg3); border-radius: 20px; padding: 22px 24px; border-left: 6px solid var(--yellow); }
.posts a:hover { background: #2f357a; }
.posts h2 { font-size: 24px; margin: 0 0 6px; }
.posts p { color: var(--muted); margin: 0; font-size: 16px; }

/* legal pages */
.legal-summary { background: rgba(61,220,151,.08); border: 2px solid rgba(61,220,151,.4); border-radius: 20px; padding: 20px 24px; margin: 8px 0 34px; }
.legal-summary h2 { margin-top: 0; font-size: 22px; }
.legal-summary ul { margin: 0; padding-left: 20px; }
.legal h2 { font-size: 24px; margin-top: 1.5em; }
.legal li { margin: .45em 0; }
.legal p, .legal li { font-size: 17px; }

/* tablet and phone */
@media (max-width: 900px) {
  .hero-in, .studio-in { grid-template-columns: 1fr; }
  .hero { padding-top: 36px; }
  .hero-art { max-width: 520px; margin: 10px auto 0; }
  .steps { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .faq-in { grid-template-columns: 1fr; gap: 30px; }
  .faq-side { position: static; }
  .faq-side h2 { text-align: center; }
  .faq-intro { text-align: center; }
  .studio h2 { text-align: center; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 17px; }
  .nav { display: none; }
  .top-in { justify-content: space-between; }
  .brand span { font-size: 20px; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .card { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; padding: 16px; border-top: 0; border-left: 6px solid var(--c, var(--purple)); }
  .card .ico { grid-row: span 2; width: 52px; height: 52px; font-size: 28px; }
  .card h3 { margin: 2px 0 4px; font-size: 19px; }
  .btn-lg { font-size: 19px; padding: 16px 26px; }
  .watch, .how, .studio, .features, .faq { padding: 56px 0; }
  .qa summary { font-size: 17px; padding: 16px 50px 16px 16px; }
  .qa summary::after { right: 20px; }
  .ans { padding: 0 16px 16px; font-size: 16px; }
  .player { border-width: 4px; border-radius: 18px; }
  .tile-b { transform: rotate(4deg) scale(1.05); }
  .arrow { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .qa summary, .qa summary::after { transition: none; }
  .final-mascot { animation: none; }
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}