@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400&family=Josefin+Sans:wght@300&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  --night:#100b18;
  --panel:#191322;
  --panel2:#21192d;
  --violet:#290C4F;
  --violet2:#572a86;
  --turq:#087e78;
  --mint:#27b8a2;
  --silver:#d7d0df;
  --muted:#a59bad;
  --text:#f4eff7;
  --gold:#d6b879;
  --line:#ffffff19;
  --glow:0 0 60px #52288136
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:radial-gradient(ellipse at 85% 0%,#183c3c50,transparent 30rem),radial-gradient(ellipse at 4% 24%,#4a1b6a35,transparent 33rem),var(--night);
  color:var(--text);
  font-family:'Josefin Sans',sans-serif;
  font-weight:300;
  min-height:100vh
}

button {
  font:inherit;
  color:inherit
}

.wrap {
  width:min(1100px,calc(100% - 38px));
  margin:auto
}

.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 0;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  font-family:Manrope,sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase
}

.sigil {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid #8d58c9;
  border-radius:50%;
  color:#a66be4;
  font-size:18px;
  box-shadow:0 0 20px #743c8b4a
}

.topnote {
  font-size:12px;
  color:var(--muted);
  letter-spacing:.04em
}

.hero {
  position:relative;
  overflow:hidden;
  padding:76px 0 56px;
  text-align:center
}

.hero {
  background:linear-gradient(180deg,#100b1861 0%,#100b18a8 67%,#100b18f2 100%),url('witchy-botanical.png') center 38%/cover;
  border-radius:0 0 28px 28px
}

.hero:before {
  content:"✦";
  position:absolute;
  left:13%;
  top:27px;
  color:#d6b879a6;
  font-size:14px;
  filter:drop-shadow(0 0 9px #e7c579)
}

.hero:after {
  content:"✧";
  position:absolute;
  right:15%;
  top:115px;
  color:#64c8b2;
  font-size:23px;
  filter:drop-shadow(0 0 12px #64c8b2)
}

.eyebrow {
  color:#8cd5c9;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-weight:300
}

.hero h1 {
  font-family:'Cinzel Decorative',serif;
  font-weight:400;
  font-size:clamp(40px,7.5vw,76px);
  line-height:1.04;
  letter-spacing:-.055em;
  max-width:850px;
  margin:20px auto 18px
}

.hero h1 span {
  background:linear-gradient(105deg,#d6b5f4 5%,#e7d7ed 38%,#61cbbb 94%);
  background-clip:text;
  color:transparent
}

.hero p {
  color:#c2b9cb;
  line-height:1.7;
  max-width:620px;
  margin:0 auto;
  font-size:16px
}

.hero-meta {
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:25px
}

.pill {
  font-size:12px;
  padding:8px 12px;
  border-radius:99px;
  background:#ffffff0a;
  border:1px solid var(--line);
  color:#d5cddd
}

.actions {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px
}

.btn {
  border:0;
  border-radius:12px;
  padding:14px 21px;
  font-weight:300;
  cursor:pointer;
  transition:.2s
}

.btn-primary {
  background:linear-gradient(110deg,#6f3da0,#087e78);
  box-shadow:0 8px 30px #3a1e5c66
}

.btn:hover {
  transform:translateY(-2px);
  filter:brightness(1.1)
}

.btn-ghost {
  background:#ffffff0c;
  border:1px solid var(--line)
}

.intro {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:16px;
  margin-bottom:66px
}

.info-card {
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,#21172dce,#13101ac7);
  padding:25px;
  box-shadow:var(--glow)
}

.info-card h2 {
  font:700 19px Manrope,sans-serif;
  margin:0 0 12px
}

.info-card p,.info-card li {
  color:#c1b8c8;
  font-size:14px;
  line-height:1.7
}

.info-card p {
  margin:0
}

.howto {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:20px
}

.step {
  border-top:1px solid #ffffff20;
  padding-top:12px
}

.step b {
  display:block;
  font-size:12px;
  color:#80cec0;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:6px
}

.step span {
  font-size:13px;
  line-height:1.5;
  color:#bfb5c7
}

.typegrid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin-top:17px
}

.typechip {
  position:relative;
  width:100%;
  min-height:64px;
  padding:11px 34px 10px 11px;
  text-align:left;
  color:inherit;
  font:inherit;
  border:1px solid #ffffff17;
  border-radius:11px;
  background:#ffffff06;
  cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s
}

.typechip:hover {
  border-color:#8d58c988;
  background:#21172dcc;
  transform:translateY(-1px)
}

.typechip:focus-visible {
  outline:2px solid #64c8b2;
  outline-offset:2px
}

.typechip b {
  display:block;
  font-size:12px;
  color:#e4d2f2
}

.typechip span {
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.35;
  color:#aaa0b2
}

.typechip i {
  position:absolute;
  right:11px;
  top:13px;
  color:#8cd5c9;
  font-style:normal;
  font-size:16px
}

.archetype-dialog {
  touch-action:pan-y;
  position:fixed;
  inset:0;
  margin:auto;
  padding:30px clamp(22px,5vw,40px);
  width:min(600px,calc(100% - 30px));
  max-height:min(82dvh,760px);
  overflow:auto;
  color:var(--text);
  border:1px solid #9e69ca77;
  border-radius:22px;
  background:radial-gradient(ellipse at 95% 0%,#183c3c55,transparent 20rem),linear-gradient(145deg,#21172d,#100b18);
  box-shadow:0 24px 90px #000b,0 0 60px #52288155
}

.archetype-dialog::backdrop {
  background:#07050bd9;
  backdrop-filter:blur(5px)
}

.dialog-close {
  position:sticky;
  float:right;
  top:0;
  width:38px;
  height:38px;
  margin:-12px -15px 4px 12px;
  border:1px solid #ffffff28;
  border-radius:50%;
  background:#ffffff0b;
  color:#d9c4ec;
  font-size:24px;
  line-height:1;
  cursor:pointer
}

.dialog-sigil {
  color:#b88de0;
  font-size:24px
}

.archetype-dialog h2 {
  margin:8px 44px 5px 0;
  font:400 clamp(26px,6vw,36px)/1.2 'Cinzel Decorative',serif;
  color:#f4eff7
}

.dialog-subtitle {
  margin:0 0 21px;
  color:#8cd5c9;
  font-size:13px;
  letter-spacing:.05em
}

.dialog-copy p {
  font-size:16px;
  line-height:1.75;
  color:#d1c8d8;
  margin:16px 0 0
}

.dialog-copy strong {
  color:#d9bff0;
  font-weight:400
}

.archetype-nav {
  position:sticky;
  bottom:-30px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin:22px -12px -30px;
  padding:16px 12px 18px;
  background:linear-gradient(180deg,#100b1800,#100b18 22%);
  color:#bfb5c7
}

.archetype-nav button {
  width:42px;
  height:42px;
  border:1px solid #ffffff25;
  border-radius:50%;
  background:#ffffff0a;
  color:#d9c4ec;
  font-size:22px;
  cursor:pointer
}

.archetype-nav button:hover {
  border-color:#64c8b2;
  background:#13877924
}

.archetype-nav button:first-child {
  justify-self:start
}

.archetype-nav button:last-child {
  justify-self:end
}

.archetype-counter {
  font-size:13px;
  letter-spacing:.12em;
  color:#d9c4ec
}

.caveat {
  font-size:12px!important;
  color:#9e94a5!important;
  margin-top:15px!important
}

.quiz-shell {
  display:none;
  max-width:760px;
  margin:0 auto 72px;
  scroll-margin-top:20px
}

.quiz-shell.active {
  display:block
}

.quiz-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#b8afc1;
  font-size:12px;
  margin-bottom:11px
}

.progress {
  height:5px;
  background:#ffffff12;
  border-radius:8px;
  overflow:hidden
}

.progress i {
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,#7650a0,#36b8a4);
  transition:width .35s
}

.q-card {
  margin-top:22px;
  padding:clamp(22px,5vw,38px);
  border:1px solid #ffffff20;
  border-radius:22px;
  background:linear-gradient(145deg,#21182d,#17121f);
  box-shadow:var(--glow)
}

.q-kicker {
  color:#80cec0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.2em
}

.q-card h2 {
  font:700 clamp(23px,4vw,32px)/1.3 Manrope,sans-serif;
  margin:14px 0 8px
}

.q-sub {
  color:#aca2b5;
  font-size:14px;
  margin:0 0 22px
}

.choices {
  display:grid;
  gap:10px
}

.choice {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:15px 16px;
  border:1px solid #ffffff20;
  border-radius:14px;
  cursor:pointer;
  transition:.18s;
  background:#ffffff04
}

.choice:hover {
  border-color:#7dc9be9c;
  background:#13877916
}

.choice.selected {
  border-color:#42b7a6;
  background:linear-gradient(100deg,#572a863a,#087e7830);
  box-shadow:inset 0 0 0 1px #42b7a633
}

.choice input {
  position:absolute;
  opacity:0
}

.letter {
  width:27px;
  height:27px;
  flex:0 0 27px;
  display:grid;
  place-items:center;
  border:1px solid #ffffff35;
  border-radius:8px;
  color:#c7b2de;
  font-size:12px;
  font-weight:700
}

.choice.selected .letter {
  background:#087e78;
  border-color:#55c5b4;
  color:#fff
}

.choice span:last-child {
  font-size:14px;
  line-height:1.55;
  color:#e6dfeb
}

.quiz-controls {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:20px
}

.quiz-controls .btn {
  min-width:120px
}

.btn:disabled {
  opacity:.38;
  cursor:not-allowed;
  transform:none
}

.result {
  display:none;
  max-width:860px;
  margin:0 auto 72px
}

.result.active {
  display:block
}

.result-hero {
  text-align:center;
  padding:30px 0
}

.result-hero .sigil {
  width:62px;
  height:62px;
  font-size:30px;
  margin:0 auto 20px
}

.result-hero h2 {
  font:800 clamp(34px,7vw,60px)/1.1 Manrope,sans-serif;
  margin:12px auto
}

.result-hero p {
  max-width:620px;
  margin:auto;
  color:#c6bdcf;
  line-height:1.7
}

.result-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.result-card {
  background:linear-gradient(145deg,#21172d,#15111c);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px
}

.result-card h3 {
  font:700 16px Manrope,sans-serif;
  margin:0 0 14px
}

.score-row {
  margin:14px 0
}

.score-label {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  margin-bottom:7px
}

.score-label span:last-child {
  color:#aba1b3
}

.bar {
  height:6px;
  background:#ffffff13;
  border-radius:8px;
  overflow:hidden
}

.bar i {
  height:100%;
  display:block;
  background:linear-gradient(90deg,#8d5cbc,#32b6a1);
  border-radius:8px
}

.insight {
  color:#c5bccd;
  font-size:14px;
  line-height:1.7;
  margin:0
}

.insight strong {
  color:#f0e7f4
}

.result-actions {
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:22px 0
}

.share-note {
  text-align:center;
  color:#a69bab;
  font-size:12px
}

.footer {
  border-top:1px solid var(--line);
  padding:27px 0 45px;
  color:#94899e;
  font-size:12px;
  line-height:1.7
}

.footer a {
  color:#b9a0d2
}

.footerrow {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

@media(max-width:760px) {
  .wrap {
    width:min(100% - 28px,620px)
  }

  .hero {
    padding:55px 0 40px
  }

  .hero p {
    font-size:15px
  }

  .intro {
    grid-template-columns:1fr;
    margin-bottom:46px
  }

  .typegrid {
    grid-template-columns:repeat(3,1fr)
  }

  .howto {
    grid-template-columns:1fr;
    gap:10px
  }

  .step {
    display:flex;
    gap:12px
  }

  .step b {
    min-width:56px
  }

  .topnote {
    max-width:130px;
    text-align:right;
    line-height:1.4
  }

  .result-grid {
    grid-template-columns:1fr
  }

  .q-card {
    padding:22px 17px
  }

  .choice {
    padding:13px
  }

  .quiz-controls .btn {
    min-width:0;
    flex:1
  }

  .footerrow {
    display:block
  }

  .footerrow span {
    display:block;
    margin-top:8px
  }

}

@media(max-width:380px) {
  .typegrid {
    grid-template-columns:repeat(2,1fr)
  }

  .hero h1 {
    font-size:39px
  }

  .brand {
    letter-spacing:.1em;
    font-size:11px
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important
  }

}

.brand {
  text-transform:none;
  font-family:'Cinzel Decorative',serif;
  font-weight:400
}

.sigil svg {
  width:19px;
  height:19px;
  overflow:visible
}

.hero h1 {
  font-size:clamp(34px,6.3vw,65px);
  line-height:1.2;
  letter-spacing:.015em;
  max-width:950px
}

.hero h1 span {
  background:linear-gradient(105deg,#d6b5f4 5%,#e7d7ed 38%,#61cbbb 94%);
  background-clip:text;
  color:transparent
}

@media(max-width:380px) {
  .hero h1 {
    font-size:32px
  }

}

.btn,.btn-primary,.btn-ghost {
  font-family:'Cinzel Decorative',serif;
  font-size:12px;
  font-weight:400;
  letter-spacing:.025em;
  background:rgba(41,12,79,.5);
  border:1px solid rgba(166,107,228,.72);
  color:#f4eff7;
  box-shadow:0 0 22px #54247740;
  backdrop-filter:blur(8px)
}

.btn:hover {
  background:rgba(67,27,100,.74);
  border-color:#c49cf0
}

.btn-primary,.btn-ghost {
  background:rgba(41,12,79,.5);
  border:1px solid rgba(166,107,228,.72);
  box-shadow:0 0 22px #54247740
}

.hero p {
  padding-inline:2em
}

.intro,.howto {
  gap:24px
}

.intro {
  margin-top:24px
}

/* HTML:stä erotettu staattinen linkkityyli. */
.actions a.btn {
  text-decoration: none;
}

/* Kielivalinta pysyy käytettävissä myös kapealla puhelinnäytöllä. */
.topbar {
  flex-wrap:wrap;
  gap:16px;
}

.header-tools {
  display:flex;
  align-items:center;
  gap:22px;
  margin-left:auto;
}

.language-switch {
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.language-button {
  min-height:44px;
  padding:9px 12px;
  font-size:11px;
  border-radius:10px;
}

.language-button[aria-pressed="true"] {
  background:rgba(87,42,134,.66);
  border-color:#c49cf0;
  box-shadow:inset 0 -2px 0 #c49cf0,0 0 22px #54247740;
}

.btn:focus-visible,
.archetype-nav button:focus-visible,
.dialog-close:focus-visible {
  outline:2px solid #8cd5c9;
  outline-offset:3px;
}

.choice:has(input:focus-visible) {
  outline:2px solid #8cd5c9;
  outline-offset:3px;
}

.hero h1 .hero-title-text {
  background:none;
  color:var(--text);
}

@media(max-width:760px) {
  .header-tools .topnote {
    display:none;
  }

  .header-tools {
    gap:10px;
  }

  .topbar {
    column-gap:10px;
    row-gap:12px;
  }

  .language-button {
    padding-inline:9px;
    font-size:10px;
  }
}

@media(max-width:340px) {
  .header-tools {
    margin-left:0;
  }
}