@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fredoka:wght@500;600;700&family=Nunito:wght@500;600;700;800&display=swap');

:root {
  --ink: #24222b;
  --muted: #6d6875;
  --paper: #fffaf1;
  --cream: #fff1cd;
  --yellow: #ffd166;
  --coral: #ff8068;
  --pink: #ff80ab;
  --blue: #78d5df;
  --green: #a8d982;
  --purple: #a891d9;
  --line: #26222e;
  --shadow: 0 14px 0 rgba(36, 34, 43, .12), 0 22px 42px rgba(72, 54, 42, .14);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,255,255,.8) 0 2px, transparent 2.5px),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.65) 0 2px, transparent 2.5px),
    linear-gradient(145deg, #f9df9e 0%, #ffd8c7 48%, #bfe7e0 100%);
  background-size: 180px 180px, 240px 240px, auto;
}
button, textarea { font: inherit; }
button { cursor: pointer; }
.paper-cut { position: fixed; pointer-events: none; z-index: 0; border-radius: 50%; opacity: .65; }
.paper-cut-one { width: 270px; height: 270px; left: -130px; top: 46%; background: var(--pink); transform: rotate(18deg); }
.paper-cut-two { width: 330px; height: 210px; right: -130px; top: 9%; background: var(--blue); transform: rotate(-20deg); }
.fact-app { position: relative; z-index: 1; width: min(100% - 30px, 1000px); margin: 0 auto; padding: 24px 0 20px; }
.app-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 26px; padding-right: 175px; }
.home-link, .text-link { color: var(--ink); font-weight: 800; text-underline-offset: 4px; }
.home-link { font-family: 'DM Mono', monospace; font-size: .72rem; text-decoration: none; background: rgba(255,250,241,.6); border: 2px solid rgba(36,34,43,.8); padding: 8px 11px; border-radius: 999px; }
.home-link:hover { background: var(--paper); transform: rotate(-2deg); }
.privacy-chip { font: 500 .63rem 'DM Mono', monospace; color: #554b4d; text-transform: uppercase; letter-spacing: .05em; text-align: right; }
.screen { background: rgba(255,250,241,.82); border: 3px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); overflow: hidden; }
.intro-screen { min-height: 730px; padding: clamp(27px, 6vw, 60px); position: relative; }
.hero-copy { width: min(100%, 590px); position: relative; z-index: 1; }
.eyebrow { margin: 0 0 10px; font: 500 .72rem 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .11em; color: #79676b; }
.spark { color: #ed5b54; font-size: 1.1em; }
h1, h2, h3, .primary-button, .fact-text { font-family: 'Fredoka', sans-serif; }
h1 { font-size: clamp(3.1rem, 9vw, 6.6rem); line-height: .87; letter-spacing: -.07em; margin: 0; max-width: 670px; }
h1 span { display: block; color: var(--coral); text-shadow: 4px 4px 0 var(--ink); transform: rotate(-2deg); transform-origin: left; }
.hero-lede { max-width: 520px; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.5; margin: 27px 0 0; font-weight: 700; }
.mascot-stage { position: absolute; right: clamp(24px, 7vw, 82px); top: 128px; width: 220px; height: 270px; transform: rotate(5deg); }
.hero-boy { position: absolute; width: 260px; height: 260px; left: -1px; bottom: -10px; object-fit: contain; filter: drop-shadow(7px 9px 0 rgba(36,34,43,.9)); transform: rotate(-2deg); }
.question-bubble { position: absolute; top: -60px; right: -3px; display: grid; place-items: center; width: 66px; height: 66px; border: 3px solid var(--line); border-radius: 48% 52% 45% 55%; background: var(--blue); font: 700 2.7rem 'Fredoka'; transform: rotate(11deg); box-shadow: 5px 6px 0 var(--line); }
.stage-sticker { position: absolute; padding: 7px 9px; border: 2px solid var(--line); background: var(--green); font: 700 .68rem 'DM Mono'; box-shadow: 3px 4px 0 var(--line); }
.sticker-top { left: -20px; top: 16px; transform: rotate(-13deg); }
.sticker-bottom { right: -10px; bottom: 4px; background: var(--pink); transform: rotate(12deg); }
.plato-intro { position: relative; margin: 90px 0 0; border: 3px solid var(--line); background: var(--cream); padding: 18px 20px 20px; transform: rotate(-.7deg); }
.plato-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; font-size: 1rem; }
.plato-number { font: 500 .65rem 'DM Mono'; text-transform: uppercase; color: #846d56; letter-spacing: .08em; }
.criteria-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 16px; }
.criterion { display: flex; align-items: center; gap: 9px; }
.criterion b, .slot-number { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); background: var(--coral); font: 700 .9rem 'Fredoka'; }
.criterion:nth-child(2) b { background: var(--blue); }
.criterion:nth-child(3) b { background: var(--green); }
.criterion strong { display: block; font-size: .82rem; }
.criterion small { display: block; color: var(--muted); font-size: .69rem; line-height: 1.2; }
.how-to { display: flex; align-items: center; gap: 12px; margin: 27px auto 18px; width: min(100%, 570px); }
.how-to-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 3px solid var(--line); border-radius: 42% 58% 45% 55%; background: var(--purple); font: 700 1.1rem 'Fredoka'; transform: rotate(-8deg); }
.how-to p { font-size: .88rem; line-height: 1.35; margin: 0; }
.how-to strong { display: block; }
.primary-button { border: 3px solid var(--line); color: var(--ink); background: var(--yellow); border-radius: 14px 20px 13px 18px; box-shadow: 5px 6px 0 var(--line); padding: 12px 17px; font-size: 1rem; font-weight: 700; transition: transform .15s, box-shadow .15s, background .15s; }
.primary-button:hover:not(:disabled) { transform: translate(2px, 2px) rotate(-1deg); box-shadow: 3px 4px 0 var(--line); background: #ffdc7a; }
.primary-button:active:not(:disabled) { transform: translate(5px, 6px); box-shadow: none; }
.big-button { display: block; margin: 0 auto; min-width: 225px; }
.big-button span, .primary-button span { margin-left: 8px; font-size: 1.2em; }
.game-screen { padding: clamp(22px, 5vw, 50px); }
.game-topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.game-topline h2 { font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: .98; letter-spacing: -.04em; max-width: 600px; margin: 0; }
.faktoid-icon { padding: 0 !important; }
.faktoid-icon img { width: 100%; height: 100%; object-fit: contain; }
.score-box { flex: 0 0 auto; padding: 9px 13px; border: 3px solid var(--line); background: var(--green); transform: rotate(3deg); text-align: center; min-width: 83px; }
.score-box span { display: block; font: 500 .55rem 'DM Mono'; text-transform: uppercase; }
.score-box strong { font: 700 1.7rem 'Fredoka'; }
.progress-wrap { margin: 26px 0 18px; }
.progress-label { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font: 500 .63rem 'DM Mono'; text-transform: uppercase; }
.progress-track { height: 12px; border: 2px solid var(--line); border-radius: 999px; background: #f0dfc3; overflow: hidden; }
.progress-bar { width: 0; height: 100%; background: repeating-linear-gradient(135deg, var(--coral) 0 10px, #ffad83 10px 18px); transition: width .4s ease; }
.fact-card { position: relative; margin: 0 0 23px; min-height: 220px; padding: clamp(23px, 5vw, 42px); border: 3px solid var(--line); border-radius: 22px 16px 25px 13px; background: var(--purple); box-shadow: 8px 9px 0 var(--line); transform: rotate(.8deg); overflow: hidden; }
.fact-card::after { content: '?!'; position: absolute; right: 20px; bottom: -21px; color: rgba(255,255,255,.25); font: 700 8rem 'Fredoka'; transform: rotate(-14deg); }
.fact-card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fact-label, .fact-stamp { font: 500 .65rem 'DM Mono'; text-transform: uppercase; letter-spacing: .08em; }
.fact-stamp { padding: 5px 8px; border: 2px solid var(--line); background: var(--yellow); transform: rotate(-3deg); }
.fact-text { position: relative; z-index: 1; max-width: 760px; font-size: clamp(1.6rem, 4.4vw, 3.2rem); line-height: 1.08; letter-spacing: -.04em; margin: 25px 0 14px; }
.fact-category { position: relative; z-index: 1; display: inline-block; margin: 0; padding: 5px 9px; border: 2px solid var(--line); background: rgba(255,250,241,.58); font: 500 .63rem 'DM Mono'; text-transform: uppercase; }
.thinking-form { margin-top: 13px; }
.form-intro { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.lock-icon { display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid var(--line); background: var(--yellow); font-size: 1.1rem; transform: rotate(-5deg); }
.form-intro strong, .form-intro small { display: block; }
.form-intro strong { font: 700 1.02rem 'Fredoka'; }
.form-intro small { color: var(--muted); font-size: .78rem; }
fieldset { min-width: 0; }
.answer-fieldset { border: 0; padding: 0; margin: 0 0 19px; }
legend, .reason-field > label { display: flex; align-items: center; gap: 9px; font-size: .88rem; font-weight: 800; margin-bottom: 10px; }
.slot-number { width: 25px; height: 25px; font-size: .78rem; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.choice-card { display: block; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-face { display: block; padding: 13px 15px; border: 3px solid var(--line); border-radius: 14px 10px 15px 10px; background: var(--paper); transition: transform .15s, background .15s, box-shadow .15s; cursor: pointer; }
.choice-face b { display: block; font: 700 1.08rem 'Fredoka'; }
.choice-face small { color: var(--muted); font-size: .73rem; }
.choice-card:hover .choice-face { transform: translateY(-2px) rotate(-1deg); }
.choice-card input:focus-visible + .choice-face { outline: 4px solid #3b9ca5; outline-offset: 2px; }
.choice-card input:checked + .choice-face { box-shadow: 5px 5px 0 var(--line); transform: translate(2px, 2px); }
.choice-true input:checked + .choice-face { background: var(--green); }
.choice-false input:checked + .choice-face { background: #ffb7a6; }
.choice-belief input:checked + .choice-face { background: var(--blue); }
.reason-field { margin-bottom: 17px; }
textarea { display: block; width: 100%; border: 3px solid var(--line); border-radius: 13px 11px 15px 9px; color: var(--ink); background: #fffdf8; padding: 12px 14px; font-size: .92rem; line-height: 1.45; resize: vertical; min-height: 88px; }
textarea:focus { outline: 4px solid rgba(59,156,165,.35); border-color: #348c94; }
.reason-footer { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .7rem; padding-top: 5px; }
#reason-count { font: 500 .65rem 'DM Mono'; white-space: nowrap; }
.reveal-button { width: 100%; }
.reveal-button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; transform: none; }
.form-hint { min-height: 1.2em; margin: 10px 0 0; text-align: center; color: var(--muted); font-size: .75rem; }
.result-panel { position: relative; margin-top: 24px; padding: 24px; border: 3px solid var(--line); background: var(--cream); transform: rotate(-.7deg); }
.result-burst { position: absolute; right: 18px; top: -22px; display: grid; place-items: center; width: 55px; height: 55px; border: 3px solid var(--line); background: var(--coral); border-radius: 46% 54% 50% 44%; font: 700 2rem 'Fredoka'; transform: rotate(13deg); }
.result-kicker { margin: 0 0 3px; color: #856852; font: 500 .63rem 'DM Mono'; text-transform: uppercase; }
.result-copy h3 { font-size: 2rem; line-height: 1; margin: 0 65px 9px 0; }
.result-copy p { margin: 0; line-height: 1.5; font-size: .92rem; max-width: 700px; }
.result-reflection { margin: 20px 0; padding: 12px 14px; border-left: 6px solid var(--blue); background: rgba(255,255,255,.57); }
.result-reflection span { font: 500 .62rem 'DM Mono'; text-transform: uppercase; }
.result-reflection p { margin: 5px 0 0; font-size: .83rem; line-height: 1.45; }
.next-button { display: block; margin-left: auto; }
.finish-screen { min-height: 560px; text-align: center; padding: clamp(50px, 10vw, 100px) 28px; }
.finish-confetti { color: var(--coral); font: 700 2.3rem 'Fredoka'; letter-spacing: .25em; transform: rotate(-5deg); }
.finish-screen h2 { max-width: 650px; margin: 12px auto; font-size: clamp(2.4rem, 7vw, 5rem); line-height: .95; letter-spacing: -.05em; }
.finish-score { font-size: 1.3rem; }
.finish-score strong { font: 700 2rem 'Fredoka'; color: #d85a49; }
.finish-message { max-width: 550px; margin: 0 auto 25px; color: var(--muted); line-height: 1.5; font-size: .9rem; }
.finish-screen .text-link { display: inline-block; margin-top: 20px; font-size: .82rem; }
.app-footer { color: #665a60; text-align: center; font-size: .68rem; line-height: 1.4; padding: 19px 10px 0; }
[hidden] { display: none !important; }

@media (max-width: 700px) {
  .fact-app { width: min(100% - 18px, 1000px); padding-top: 13px; }
  .app-header { margin-bottom: 14px; padding: 46px 0 0; align-items: flex-start; }
  .privacy-chip { max-width: 160px; line-height: 1.35; }
  .intro-screen { min-height: 0; padding: 27px 21px 31px; }
  .mascot-stage { position: relative; top: auto; right: auto; margin: 82px auto 0; transform: scale(.84) rotate(5deg); transform-origin: center; }
  .plato-intro { margin-top: 55px; }
  .criteria-row { grid-template-columns: 1fr; gap: 11px; }
  .criterion { gap: 10px; }
  .how-to { margin-top: 24px; }
  .game-screen { padding: 22px 17px 28px; }
}
@media (max-width: 440px) {
  .privacy-chip { font-size: .54rem; }
  .choice-grid { gap: 7px; }
  .choice-face { padding: 11px 9px; }
  .choice-face b { font-size: .95rem; }
  .choice-face small { font-size: .65rem; }
  .reason-footer { display: block; }
  #reason-count { display: block; margin-top: 4px; }
  .game-topline h2 { font-size: 1.75rem; }
  .score-box { min-width: 70px; padding: 7px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}