/* Daily Doodle · "Ballpoint and highlighter". The whole app is a notebook: ruled paper,
   thin navy ballpoint lines with a fine jitter (SVG filter #wobFine), highlighter swipes
   behind the words that matter. The drawing page is the one plain white thing. */

:root {
  /* paper */
  --paper: #fbfbf9; --rule: #e4e9f2; --margin: #f0b7c0;
  --card: #ffffff; --page: #ffffff; /* drawing page, never changes */
  /* ink */
  --ink: #1e2a4a; --ink-2: #4b5570; --ink-3: #7a8299;
  --ink-disabled: #aeb6c8; --on-ink: #fbfbf9; --ink-pressed: #0f1830;
  /* highlighters (multiply blend in light) */
  --hl-yellow: #fff176; --hl-pink: #ff8fb1; --hl-green: #9be7a3; --hl-blend: multiply;
  /* verdicts and status */
  --pass: #1f8a4c; --fail: #d62839; --online: #22c55e;
  /* fixed pen defaults, join order; each game owns one */
  --pen-1: #9b30ff; --pen-2: #ff6a00; --pen-3: #0a84ff; --pen-4: #1fb35a; --pen-5: #ff2d87; --pen-6: #00a6a6;
  --game-team: var(--pen-1); --game-challenge: var(--pen-2); --game-daily: var(--pen-6);
  /* lines */
  --line: 2px; --line-thin: 1.5px; --line-stamp: 2.4px;
  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --gutter: 24px;
  --safe-top: max(54px, env(safe-area-inset-top));
  --safe-bottom: max(34px, env(safe-area-inset-bottom));
  /* radii */
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-pill: 999px;
  --shadow-float: 0 6px 18px rgba(30, 42, 74, 0.18);
  /* type */
  --display: 'Covered By Your Grace', 'Segoe Print', 'Bradley Hand', cursive;
  --body: 'Atkinson Hyperlegible', -apple-system, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171a24; --rule: #242a3a; --margin: #4a2f3a; --card: #1f2432;
    --ink: #e8ebf3; --ink-2: #aeb6c8; --ink-3: #7a8299; --ink-disabled: #4b5570; --on-ink: #171a24; --ink-pressed: #c9cfdd;
    --hl-yellow: #6b5e12; --hl-pink: #7a2f48; --hl-green: #1d5a33; --hl-blend: normal;
    --pass: #4ade80; --fail: #ff5c6a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html {
  background: var(--paper) repeating-linear-gradient(0deg, var(--rule) 0 1px, transparent 1px 28px);
  background-attachment: fixed;
}
body {
  color: var(--ink);
  font: 400 15px/1.4 var(--body);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* It's a game, not a document: no text selection, no long-press callout or loupe,
     no double-tap zoom. Without this, iOS Safari selects stray text while you draw. */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
input { -webkit-user-select: text; user-select: text; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: inherit; }

/* One phone-sized column. On a computer it just sits in the middle. The pink margin
   line belongs to the column so it lines up with the content. */
.frame {
  position: relative;
  max-width: 430px; margin: 0 auto;
  min-height: 100dvh;
  padding: var(--safe-top) var(--gutter) var(--safe-bottom);
  display: flex; flex-direction: column;
}
.frame::before {
  content: ""; position: absolute; left: 44px; top: 0; bottom: 0; width: 1px;
  background: var(--margin); pointer-events: none;
}
.frame > * { position: relative; }

/* --- Type ---------------------------------------------------------------------- */
.display-xl, .display-l, .display-m, .display-s { font-family: var(--display); font-weight: 400; color: var(--ink); margin: 0; }
.display-xl { font-size: 46px; line-height: 1; }
.display-l { font-size: 40px; line-height: 1.05; }
.display-m { font-size: 30px; line-height: 1.1; }
.display-s { font-size: 26px; line-height: 1; }
.lead { font-size: 15px; line-height: 1.4; color: var(--ink-2); margin: 0; }
.body { font-size: 14px; line-height: 1.35; color: var(--ink-2); margin: 0; }
.meta { font-size: 13px; line-height: 1.3; color: var(--ink-3); margin: 0; }
.label { font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.micro { font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* --- Hand-drawn outlines --------------------------------------------------------
   Outlines are not CSS borders: each outlined thing holds an <svg class="line"> with one
   wobbled rect (see ui.js). The svg is inset 1px so the 2px stroke lands on the edge. */
.line {
  position: absolute; left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px);
  overflow: visible; pointer-events: none; shape-rendering: geometricPrecision;
}
.line rect { fill: none; stroke: var(--ink); stroke-width: var(--line); }
.line .inner { stroke-width: var(--line-thin); }

/* Highlighter swipe: a skewed wobbled rect behind text. */
.hl { position: relative; display: inline-block; }
.hl > .swipe {
  position: absolute; left: -4px; width: calc(100% + 8px); bottom: 1px; height: 16px;
  overflow: visible; mix-blend-mode: var(--hl-blend); pointer-events: none;
  transform-origin: left center;
}
.hl > .swipe rect { fill: var(--hl-yellow); }
.hl.pink > .swipe rect { fill: var(--hl-pink); }
.hl.green > .swipe rect { fill: var(--hl-green); }
.hl > .txt { position: relative; }
.hl.draw-in > .swipe { animation: dd-swipe .24s var(--ease) both; }

.wordmark { font: 46px/1 var(--display); color: var(--ink); text-decoration: none; }
.wordmark.hl > .swipe { left: -6px; width: calc(100% + 9px); bottom: 6px; height: 20px; }
.wordmark.small { font-size: 26px; }

/* --- Buttons --------------------------------------------------------------------- */
.btn {
  position: relative; height: 56px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border: 0; background: none; cursor: pointer;
  font: 700 17px/1 var(--body); color: var(--ink); text-decoration: none;
  touch-action: manipulation; transition: transform 80ms;
}
.btn > :not(.line) { position: relative; }
.btn .line rect { fill: var(--card); }
.btn.primary { color: var(--on-ink); }
.btn.primary .line rect { fill: var(--ink); stroke: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:active .line rect { fill: var(--rule); }
.btn.primary:active .line rect { fill: var(--ink-pressed); }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--ink-disabled); pointer-events: none; }
.btn:disabled .line rect, .btn[aria-disabled="true"] .line rect { fill: none; stroke: var(--ink-disabled); stroke-dasharray: 6 5; }
.btn svg.icon { width: 20px; height: 20px; flex: none; }
.btn.small { height: 48px; width: 104px; font-size: 15px; padding: 0 10px; flex: none; }
.stack { display: grid; gap: 10px; }

.pill-btn {
  position: relative; height: 44px; padding: 0 14px; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--body); color: var(--ink);
  flex: none; touch-action: manipulation;
}
.pill-btn > :not(.line) { position: relative; }
.pill-btn .line rect { fill: var(--card); }
.pill-btn:active { transform: translateY(1px); }
.pill-btn svg.icon { width: 18px; height: 18px; }

.icon-btn {
  position: relative; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; flex: none;
  display: inline-grid; place-items: center; color: var(--ink); touch-action: manipulation;
}
.icon-btn > :not(.line) { position: relative; }
.icon-btn .line rect { fill: var(--card); }
.icon-btn svg.icon { width: 22px; height: 22px; }
.icon-btn:active { transform: translateY(1px); }

.text-link { font: 700 14px/1 var(--body); color: var(--ink); background: none; border: 0; text-decoration: underline; padding: 12px; cursor: pointer; }

svg.icon { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Text input ---------------------------------------------------------------------- */
.field {
  position: relative; height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
}
.field .line rect { fill: var(--card); }
.field > :not(.line) { position: relative; }
.field .label { flex: none; }
.field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0;
  font: 700 18px/1 var(--body); color: var(--ink);
}
.field input::placeholder { font-weight: 400; color: var(--ink-disabled); }
.field .label.hl > .swipe { height: 12px; bottom: -4px; transform: skewX(-6deg) scaleX(0); transition: transform .24s var(--ease); }
.field:focus-within .label.hl > .swipe { transform: skewX(-6deg) scaleX(1); }

/* --- Game cards (Home) ------------------------------------------------------------------- */
.card {
  position: relative; height: 104px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 40px 1fr 30px; align-items: center; column-gap: 14px; padding: 0 16px 0 20px;
  color: var(--ink); text-decoration: none; touch-action: manipulation;
}
.card .line rect { fill: var(--card); }
.card > :not(.line) { position: relative; }
.card .dot { width: 40px; height: 40px; border-radius: 50%; background: var(--game); display: grid; place-items: center; color: #fff; }
.card .dot svg { width: 22px; height: 22px; opacity: 0; }
.card .title { display: flex; align-items: center; gap: 8px; font: 30px/1.1 var(--display); }
.card .pitch { font-size: 14px; line-height: 1.35; color: var(--ink-2); margin-top: 2px; }
.card .arrow { width: 30px; height: 24px; color: var(--ink); }
.card .tag { font: 700 11px/1 var(--body); letter-spacing: .08em; padding: 3px 6px; border-radius: var(--r-sm); background: var(--hl-pink); color: var(--ink); }
.card:active { transform: translateY(1px); }
.card:active .line rect { fill: var(--rule); }
.card .line .inner { display: none; }
.card.selected .line .inner { display: inline; }
.card.selected .dot svg { opacity: 1; }
.card:disabled, .card[aria-disabled="true"] { pointer-events: none; color: var(--ink-disabled); }
.card:disabled .line rect { stroke: var(--ink-disabled); stroke-dasharray: 6 5; fill: none; }
.card:disabled .dot { background: none; border: 1.5px dashed var(--ink-disabled); }
.card:disabled .pitch, .card:disabled .arrow { color: var(--ink-disabled); }

/* --- Pills on the page (dark) ------------------------------------------------------- */
.page-pill {
  position: absolute; left: 50%; top: 45%; transform: translateX(-50%); z-index: 4;
  max-width: calc(100% - 24px); padding: 0 16px; height: 40px; display: flex; align-items: center;
  border-radius: var(--r-pill); background: #1e2a4a; color: #fbfbf9; box-shadow: var(--shadow-float);
  font: 700 13px/1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; animation: dd-pill-in .2s var(--ease) both;
}
.page-pill.top { top: 12px; }
.page-pill.dimmed { opacity: .55; transition: opacity .3s; }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 76px); transform: translateX(-50%); z-index: 40;
  padding: 0 16px; height: 40px; display: flex; align-items: center; border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-ink); font: 700 13px/1 var(--body); box-shadow: var(--shadow-float);
  animation: dd-pill-in .2s var(--ease) both; white-space: nowrap;
}

/* --- Ripple rings, loading ring, stamps, bubble -------------------------------------- */
.ripple { color: var(--ink); overflow: visible; }
.ripple .ring { transform-box: fill-box; transform-origin: center; animation: dd-ripple 2.4s ease-out infinite; }
.ripple .ring:nth-of-type(2) { animation-delay: .8s; }
.ripple .ring:nth-of-type(3) { animation-delay: 1.6s; }
.loading-ring { width: 56px; height: 56px; color: var(--ink); }
.loading-ring circle { stroke-dasharray: 100; stroke-dashoffset: 100; animation: dd-loading 1.4s ease-in-out infinite alternate; }

.stamp {
  position: absolute; left: 50%; top: 42%; z-index: 3; pointer-events: none;
  width: calc(var(--pw, 342px) * .82); aspect-ratio: 200 / 90; display: grid; place-items: center;
  transform: translate(-50%, -50%) rotate(-8deg); color: #1e2a4a; /* on the white page: always light-mode ink */
}
.stamp.slam { animation: dd-stamp .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stamp .word { position: relative; font: calc(var(--pw, 342px) * .117) / 1 var(--display); letter-spacing: .06em; }
.stamp.verdict { width: calc(var(--pw, 224px) * .9); }
.stamp.verdict .word { font-size: calc(var(--pw, 224px) * .25); }
.stamp.pass { color: #1f8a4c; }
.stamp.fail { color: #d62839; }

/* --- Motion ------------------------------------------------------------------------ */
@keyframes dd-ripple { 0% { transform: scale(.4); opacity: 0 } 30% { opacity: 1 } 100% { transform: scale(1); opacity: 0 } }
@keyframes dd-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes dd-dots { 0%, 80%, 100% { transform: translateY(0) } 40% { transform: translateY(-6px) } }
@keyframes dd-stamp {
  0% { transform: translate(-50%, -50%) rotate(-20deg) scale(1.8); opacity: 0 }
  60% { transform: translate(-50%, -50%) rotate(-8deg) scale(.96); opacity: 1 }
  100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1) }
}
@keyframes dd-draw { to { stroke-dashoffset: 0 } }
@keyframes dd-swipe { from { transform: skewX(-6deg) scaleX(0) } to { transform: skewX(-6deg) scaleX(1) } }
@keyframes dd-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes dd-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes dd-pill-in { from { opacity: 0; transform: translate(-50%, 8px) } to { opacity: 1; transform: translate(-50%, 0) } }
@keyframes dd-loading { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }
@keyframes dd-pop-in { from { opacity: 0; transform: scale(.8) } to { opacity: 1; transform: none } }
.fade-in { animation: dd-fade .2s var(--ease) both; }
.rise-in { animation: dd-rise .2s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .ripple .ring { animation: none; opacity: .35 }
  .ripple .ring:nth-of-type(2) { opacity: .25 } .ripple .ring:nth-of-type(3) { opacity: .15 }
  .stamp.slam { animation: dd-fade .15s both }
  .loading-ring circle { animation: none; stroke-dashoffset: 0 }
  .hl.draw-in > .swipe { animation: none }
  * { transition-duration: .15s !important; animation-duration: .15s !important; animation-iteration-count: 1 !important; }
}

/* --- Home ------------------------------------------------------------------------- */
.home .wordmark { align-self: flex-start; margin-top: 8px; }
.home h1 { margin-top: 20px; }
.home .lead { margin-top: 4px; }
.home .field { margin-top: 20px; }
.home .cards { margin-top: 20px; display: grid; gap: 12px; }
.home #open { margin-top: 20px; }
.home .footer { margin-top: auto; padding-top: 16px; text-align: center; }

/* Invite / bad link / loading: content sits in the lower half, above the keyboard. */
.centered { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; }
.invite .content { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.invite .field { margin-top: 14px; }
.invite .actions { margin-top: auto; padding-top: 24px; display: grid; gap: 14px; text-align: center; }
.missing .cross { width: 120px; height: 120px; color: var(--fail); margin-top: 64px; align-self: center; }
.missing h1 { margin-top: 24px; text-align: center; }
.missing .lead { text-align: center; max-width: 300px; align-self: center; margin-top: 8px; }
.missing .btn { margin-top: auto; }

/* --- Small phones (iPhone SE size, or Safari toolbars showing) -------------------------- */
@media (max-height: 700px) {
  .home .display-l { font-size: 36px; }
  .home .lead { font-size: 14px; line-height: 1.35; }
  .home h1, .home .field, .home .cards, .home #open { margin-top: 14px; }
  .home .field { height: 50px; }
  .home .cards { gap: 10px; }
  .card { height: 88px; grid-template-columns: 34px 1fr 30px; padding-left: 18px; }
  .card .dot { width: 34px; height: 34px; }
  .card .title { font-size: 27px; }
  .card .pitch { font-size: 13px; }
  .home #open { height: 52px; }
  .home #open:not([hidden]) ~ .footer { display: none; }
  .frame { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

.card .pitch { display: block; }
.card > span:nth-child(3) { min-width: 0; }
.wordmark { align-self: flex-start; }
.wordmark { white-space: nowrap; }

/* --- Terms and privacy --------------------------------------------------------------- */
.legal { padding-bottom: 48px; min-height: auto; }
.legal h1 { margin: 20px 0 4px; }
.legal h2 { font: 26px/1.1 var(--display); margin: 26px 0 6px; color: var(--ink); }
.legal p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0 0 10px; }
.legal p strong { color: var(--ink); }
.legal a { color: var(--ink); font-weight: 700; }
.legal code { font-size: 13px; background: var(--rule); padding: 1px 4px; border-radius: 4px; }
.legal { -webkit-user-select: text; user-select: text; }
.footer-links { display: flex; justify-content: center; gap: 14px; margin-top: 8px; font-size: 13px; }
.footer-links a { color: var(--ink-3); text-decoration: none; font-weight: 700; }
.home .footer .footer-links { display: flex; }

/* Home, in steps: 1 name, 2 let's draw, then the other games. */
.home .step { margin-top: 22px; display: grid; gap: 8px; }
.home .step:first-of-type { margin-top: 26px; }
.home .step > .label { color: var(--ink); }
.home .step .field { margin-top: 0; }
.home .step .cards { margin-top: 0; }
.home .btn.big { height: 64px; font-size: 20px; }
.home .step-note { text-align: center; }
.home .step.other > .label { color: var(--ink-2); }
@media (max-height: 700px) {
  .home .step { margin-top: 14px; gap: 6px; }
  .home .step:first-of-type { margin-top: 16px; }
  .home .btn.big { height: 56px; }
  .home .step-note { display: none; }
}

/* The other games sit low on the page, smaller and quieter: name + Let's draw is the main thing. */
.home .step.other { margin-top: auto; padding-top: 40px; gap: 8px; }
.home .step.other ~ .footer { margin-top: 18px; }
.home .step.other .cards { gap: 8px; }
.home .step.other .card { height: 72px; grid-template-columns: 28px 1fr 24px; column-gap: 12px; padding: 0 14px 0 16px; }
.home .step.other .card .dot { width: 28px; height: 28px; }
.home .step.other .card .dot svg { width: 16px; height: 16px; }
.home .step.other .card .title { font-size: 23px; }
.home .step.other .card .pitch { font-size: 12.5px; margin-top: 0; }
.home .step.other .card .arrow { width: 24px; height: 20px; }
@media (max-height: 700px) {
  .home .step.other { padding-top: 22px; }
  .home .step.other .card { height: 64px; }
  .home .step.other .card .title { font-size: 21px; }
}

/* --- Press feedback: a small shrink and a darker fill, on every tappable thing ------------ */
.btn, .card, .pill-btn, .icon-btn, .plan, a.day { transition: transform 90ms var(--ease); }
.btn .line rect, .card .line rect, .pill-btn .line rect, .icon-btn .line rect, .plan .line rect, a.day .line rect { transition: fill 90ms; }
.btn.pressed, .btn:active { transform: translateY(1px) scale(.975); }
.card.pressed, .card:active, a.day.pressed, a.day:active, .plan.pressed, .plan:active { transform: translateY(1px) scale(.985); }
.pill-btn.pressed, .pill-btn:active, .icon-btn.pressed, .icon-btn:active { transform: scale(.93); }
.btn.pressed .line rect, .card.pressed .line rect, .pill-btn.pressed .line rect, .icon-btn.pressed .line rect,
.plan.pressed .line rect, a.day.pressed .line rect { fill: var(--rule); }
.btn.primary.pressed .line rect { fill: var(--ink-pressed); }
.text-link.pressed, .text-link:active { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .btn.pressed, .card.pressed, .pill-btn.pressed, .icon-btn.pressed, .plan.pressed, a.day.pressed { transform: none; }
}
/* No colour dots on the social mode cards: they pulled too much attention. */
.home .step.other .card { grid-template-columns: 1fr 24px; padding-left: 18px; }
.home .step.other .card .dot { display: none; }