/* whetstone — handdrawn placeholder design system.
   Sketchy boxes are pure CSS (the classic uneven border-radius trick), so we
   need zero image assets yet. Swap in real handdrawn art later. */

:root {
  --paper:   #fdf6e8;
  --paper-2: #f6ecd6;
  --ink:     #2b2723;
  --muted:   #8a8175;
  --accent:  #e4572e;   /* warm red-orange */
  --good:    #2a9d8f;   /* teal = correct */
  --bad:     #e4572e;   /* = wrong */
  --line:    #2b2723;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  background-image: radial-gradient(var(--paper-2) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: 'Patrick Hand', ui-rounded, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline wavy; }
h1, h2, h3 { font-family: 'Caveat', cursive; font-weight: 700; line-height: 1.05; margin: 0 0 .3em; }
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(2rem, 5vw, 3rem); }
h3 { font-size: 1.7rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.center { text-align: center; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px 80px; }

/* ---------- nav ---------- */
nav.bar {
  display: flex; align-items: center; gap: 18px;
  max-width: 980px; margin: 0 auto; padding: 18px 20px;
}
nav.bar .brand { font-family: 'Caveat', cursive; font-weight: 700; font-size: 2.2rem; color: var(--ink); }
nav.bar .brand:hover { text-decoration: none; transform: rotate(-1.5deg); }
nav.bar .spacer { flex: 1; }
nav.bar a.navlink { color: var(--ink); font-size: 1.15rem; }
nav.bar a.navlink:hover { color: var(--accent); text-decoration: none; }

/* ---------- sketchy boxes ---------- */
.sketch  { border: 2.5px solid var(--line); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; }
.sketch2 { border: 2.5px solid var(--line); border-radius: 15px 225px 15px 255px/225px 15px 255px 15px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: 'Patrick Hand', sans-serif; font-size: 1.15rem;
  padding: 9px 20px; background: var(--paper); color: var(--ink); cursor: pointer;
  border: 2.5px solid var(--line); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  transition: transform .08s ease, box-shadow .08s ease; box-shadow: 2px 2px 0 var(--line);
}
.btn:hover { transform: translate(-1px,-1px) rotate(-1deg); box-shadow: 4px 4px 0 var(--line); text-decoration: none; }
.btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--line); }
.btn-primary { background: var(--accent); color: #fff5ee; }
.btn-ghost { box-shadow: none; background: transparent; }
.btn-sm { font-size: 1rem; padding: 5px 13px; box-shadow: 1.5px 1.5px 0 var(--line); }
.btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: 2px 2px 0 var(--line); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- cards ---------- */
.card {
  background: var(--paper); padding: 20px 22px; margin: 0 0 18px;
  border: 2.5px solid var(--line); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  box-shadow: 3px 3px 0 rgba(43,39,35,.18);
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 18px; }
.tilt-1 { transform: rotate(-0.7deg); } .tilt-2 { transform: rotate(0.6deg); } .tilt-3 { transform: rotate(-0.3deg); }
.card h3 { margin-bottom: .15em; }

/* ---------- pills / badges ---------- */
.pill { display: inline-block; font-size: .85rem; padding: 1px 10px; border: 2px solid var(--line);
  border-radius: 12px 4px 12px 4px/4px 12px 4px 12px; background: var(--paper-2); }
.pill.public { background: #d8f3ee; } .pill.private { background: #f3e0d8; } .pill.unlisted { background: #efe7cf; }

/* ---------- forms ---------- */
label { display: block; font-size: 1.05rem; margin: 12px 0 4px; }
input, textarea, select {
  width: 100%; font-family: 'Patrick Hand', sans-serif; font-size: 1.1rem; padding: 9px 12px;
  background: #fffdf6; color: var(--ink);
  border: 2.5px solid var(--line); border-radius: 15px 225px 15px 255px/225px 15px 255px 15px;
}
textarea { min-height: 80px; resize: vertical; }
.form-narrow { max-width: 440px; margin: 0 auto; }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 40px 0 20px; }
.hero .tag { font-size: 1.5rem; max-width: 26ch; margin: 0 auto 1.4rem; }
.hero .scribble { color: var(--accent); }
.under { position: relative; }
.under::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 8px;
  background: var(--accent); border-radius: 60% 40% 70% 30%/100% 100% 100% 100%; opacity: .85; }

/* ---------- practice / choices ---------- */
.qcard { max-width: 620px; margin: 20px auto; }
.qprompt { font-size: 1.5rem; margin-bottom: 16px; }
.choice {
  display: block; width: 100%; text-align: left; margin: 0 0 12px; font-size: 1.12rem;
  padding: 12px 16px; background: #fffdf6; color: var(--ink); cursor: pointer;
  border: 2.5px solid var(--line); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  transition: transform .06s ease;
}
.choice:hover:not([disabled]) { transform: translateX(3px) rotate(-.4deg); }
.choice.correct { background: #d8f3ee; border-color: var(--good); }
.choice.wrong   { background: #f7ddd4; border-color: var(--bad); }
.choice[disabled] { cursor: default; }
.feedback { margin-top: 10px; font-size: 1.15rem; }
.feedback .why { color: var(--muted); }

/* ---------- leaderboard ---------- */
.lb { list-style: none; padding: 0; margin: 0; max-width: 560px; }
.lb li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 10px;
  border: 2.5px solid var(--line); border-radius: 15px 225px 15px 255px/225px 15px 255px 15px; background: var(--paper); }
.lb .rank { font-family: 'Caveat', cursive; font-size: 1.8rem; width: 1.6em; text-align: center; }
.lb .nm { flex: 1; }
.lb .sc { font-weight: bold; }
.toggle { display: inline-flex; gap: 0; }
.toggle .btn { box-shadow: none; border-radius: 0; }
.toggle .btn:first-child { border-radius: 18px 4px 4px 18px/18px 4px 4px 18px; }
.toggle .btn:last-child  { border-radius: 4px 18px 18px 4px/4px 18px 18px 4px; }
.toggle .btn.on { background: var(--accent); color: #fff5ee; }

/* ---------- misc ---------- */
.statline { font-size: 1.2rem; }
.statline b { font-family: 'Caveat', cursive; font-size: 1.6rem; color: var(--accent); }
.notice { padding: 10px 14px; margin: 12px 0; background: #f7ddd4; border: 2px solid var(--bad);
  border-radius: 12px 4px 12px 4px/4px 12px 4px 12px; }
.empty { text-align: center; color: var(--muted); padding: 30px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 14px 6px 14px 6px/6px 14px 6px 14px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.2); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: .95rem; background: var(--paper-2);
  padding: 2px 6px; border-radius: 6px; word-break: break-all; }
hr.squig { border: none; height: 10px; margin: 28px 0;
  background: radial-gradient(circle at 6px -3px, transparent 8px, var(--muted) 9px, transparent 10px); background-size: 16px 12px; opacity: .4; }

/* ---------- handdrawn assets (white-bg scans → multiply blends them onto the paper) ---------- */
.brand-stone { height: 30px; margin-right: 7px; vertical-align: -7px; transform: rotate(-7deg); mix-blend-mode: multiply; }
.hero-stone  { width: clamp(110px, 20vw, 180px); display: block; margin: 4px auto 2px; transform: rotate(-4deg); mix-blend-mode: multiply; }
.status-live { height: 26px; display: block; margin: 0 auto 14px; mix-blend-mode: multiply; }
.hero-cta { gap: 20px; margin-top: 10px; }
.hero-cta a:hover { text-decoration: none; }
.imgbtn { height: 66px; cursor: pointer; mix-blend-mode: multiply; transition: transform .1s ease; }
.imgbtn:hover { transform: rotate(-2deg) scale(1.05); }