:root{
  --ink:#1B2A4A;
  --paper:#FBF8F1;
  --coral:#EF6F5B;
  --sky:#5C9EE8;
  --mint:#4FB0A5;
  --amber:#F2A93B;
  --plum:#8C5FBC;
  --line: rgba(27,42,74,0.14);
  --shadow: 0 10px 24px rgba(27,42,74,0.10);
  --radius: 18px;
  font-size: 17px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--ink);
  color: var(--paper);
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
  line-height:1.5;
  min-height:100vh;
}
h1,h2,h3{
  font-family:'Baloo 2', system-ui, sans-serif;
  margin:0 0 .3em 0;
}
::selection{ background: var(--amber); color: var(--ink); }

/* ---------- hero ---------- */
.hero{ padding: 48px 20px 32px; }
.hero-inner{ max-width:640px; margin:0 auto; text-align:center; color: var(--paper); }
.compass-mark{ width:128px; margin:0 auto 18px; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35)); }
#dial{ animation: spin 40s linear infinite; transform-origin:100px 100px; }
@media (prefers-reduced-motion: reduce){ #dial{ animation:none; } }
.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:.78rem;
  font-weight:700; opacity:.75; margin:0 0 6px;
}
.hero h1{ font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight:800; }
.hero .sub{ opacity:.92; font-size:1.02rem; max-width:520px; margin:10px auto 0; }
.hero .sub em{ font-style:normal; font-weight:700; color: var(--amber); }

@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- layout ---------- */
main{ max-width:640px; margin:0 auto; padding: 8px 16px 60px; }

.card, .area-card{
  background:#fff;
  color: var(--ink);
  border:2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px;
  margin: 18px 0;
}

.intro-text{ padding: 22px 4px 6px; }
.intro-text p{ opacity:.85; }

.num{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background: var(--ink); color: var(--paper);
  font-family:'Baloo 2',sans-serif; font-size:.9rem; font-weight:700;
  margin-right:8px; vertical-align:middle;
}

.numneg{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background: var(--paper); color: var(--ink);
  font-family:'Baloo 2',sans-serif; font-size:.9rem; font-weight:700;
  margin-right:8px; vertical-align:middle;
}


/* ---------- fields ---------- */
.field-row{ display:flex; gap:16px; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:6px; flex:1 1 200px; }
.field > span, .field legend{ font-weight:700; font-size:.92rem; }
fieldset.field{ border:none; padding:0; margin:0; }

input[type=text], textarea{
  font:inherit; padding:12px 14px; border-radius:12px;
  border:2px solid var(--line); background: var(--paper);
  color: var(--ink);
}
input[type=text]:focus, textarea:focus{
  outline: 3px solid var(--sky); outline-offset:1px; border-color: var(--sky);
}
textarea{ resize:vertical; font-family:inherit; }

.pill-group{ display:flex; gap:10px; flex-wrap:wrap; }
.pill input{ position:absolute; opacity:0; width:1px; height:1px; }
.pill span{
  display:inline-block; padding:10px 18px; border-radius:999px;
  border:2px solid var(--line); font-weight:700; cursor:pointer;
  transition: all .15s ease; user-select:none;
}
.pill input:checked + span{
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.pill input:focus-visible + span{ outline:3px solid var(--sky); outline-offset:2px; }

/* ---------- area cards ---------- */
.area-card{ border-color: color-mix(in srgb, var(--area-color) 40%, var(--line)); }
.area-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.area-icon{
  font-size:1.7rem; width:52px; height:52px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px; background: color-mix(in srgb, var(--area-color) 22%, white);
}
.area-head h3{ font-size:1.18rem; }
.area-head p{ margin:2px 0 0; opacity:.7; font-size:.9rem; }

.smiley-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  margin-bottom:16px;
}
.smiley input{ position:absolute; opacity:0; width:1px; height:1px; }
.smiley span{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 4px; border-radius:14px; border:2px solid var(--line);
  cursor:pointer; font-size:1.6rem; text-align:center; transition:.15s ease;
}
.smiley em{ font-style:normal; font-size:.66rem; font-weight:700; opacity:.65; line-height:1.1; }
.smiley input:checked + span{
  background: color-mix(in srgb, var(--area-color) 20%, white);
  border-color: var(--area-color);
  transform: translateY(-2px);
}
.smiley input:focus-visible + span{ outline:3px solid var(--sky); outline-offset:2px; }

.topic-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.topic input{ position:absolute; opacity:0; width:1px; height:1px; }
.topic span{
  display:block; padding:10px 12px; border-radius:12px;
  border:2px dashed var(--line); font-size:.88rem; font-weight:700;
  cursor:pointer; transition:.15s ease;
}
.topic input:checked + span{
  border-style:solid; border-color: var(--area-color);
  background: color-mix(in srgb, var(--area-color) 14%, white);
}
.topic input:focus-visible + span{ outline:3px solid var(--sky); outline-offset:2px; }

/* ---------- submit ---------- */
#submitBtn{
  width:100%; margin-top:8px; padding:16px; font-size:1.05rem;
  font-family:'Baloo 2',sans-serif; font-weight:700;
  background: var(--coral); color:#fff; border:none; border-radius:14px;
  cursor:pointer; box-shadow: 0 8px 18px rgba(239,111,91,0.35);
  transition: transform .12s ease;
}
#submitBtn:hover{ transform: translateY(-1px); }
#submitBtn:disabled{ opacity:.6; cursor:wait; }
.hint{ text-align:center; font-size:.85rem; opacity:.7; margin:12px 0 0; min-height:1.2em; }

/* ---------- result ---------- */
.result-card{ text-align:center; }
.result-compass{ width:200px; margin:0 auto 14px; }
#resultTitle{ font-size:1.4rem; }
#resultText{ font-size:1.02rem; opacity:.85; }

footer{ text-align:center; padding:24px; font-size:.82rem; opacity:.55; }

@media (max-width: 420px){
  .topic-grid{ grid-template-columns:1fr; }
  .smiley span{ font-size:1.3rem; padding:8px 2px; }
}