:root {color-scheme:dark; --violet:#b65bfc; --lilac:#e3b8ff; --sky:#181244; --white:#fff9ff; --border:#a36bf8; --sun:#ffde75;}
* {box-sizing:border-box}
html {min-height:100%;scroll-behavior:smooth}
body {min-height:100vh;margin:0; color:var(--white);font-family:Nunito,'Trebuchet MS',Arial,sans-serif; background:radial-gradient(circle at 12% 17%,#5c328d 0,transparent 29%),radial-gradient(circle at 82% 81%,#433b9d 0,transparent 31%),linear-gradient(135deg,#18103d,#160e39 57%,#332364); overflow-x:hidden}
button {font:inherit;touch-action:manipulation}
button:focus-visible {outline:3px solid #fff5af;outline-offset:4px}
.stars {position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sky-star {position:absolute;border-radius:50%;background:#fffbd9;box-shadow:0 0 12px 2px #f6e5ffa3;animation:twinkle var(--speed,3s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.stars:before {content:'☾';position:absolute;right:7%;top:3%;font-size:clamp(5rem,11vw,9rem);color:#fff0be;filter:drop-shadow(0 0 26px #f9cc83);opacity:.85;transform:rotate(-17deg)}
.app {position:relative;z-index:1;width:min(100% - 24px,490px);margin:18px auto 22px;padding:19px 20px 12px;min-height:735px;border:3px solid #d2a2ff;border-radius:34px;background:linear-gradient(175deg,#22205ceD,#191444FA 57%,#231650F7);box-shadow:0 0 0 5px #9665ed55,0 20px 64px #09051ec9,inset 0 0 50px #9879f026;isolation:isolate;overflow:hidden}
.app::before {content:'';position:absolute;inset:7px;z-index:-1;border:1px solid #bcaaff40;border-radius:27px;pointer-events:none}
.frame-light {position:absolute;inset:0;background:radial-gradient(ellipse at 50% 1%,#885fff30,transparent 50%);pointer-events:none;z-index:-1}
.app-header {text-align:center}
.utility-row {display:flex;justify-content:space-between;align-items:center;gap:8px}
.brand {font-size:10px;letter-spacing:2px;font-weight:900;color:#f9dc9e}
.brand span {font-size:18px;color:#ffe57c}
.sound-toggle {font-weight:900;font-size:11px;cursor:pointer;color:#ddd0ff;background:#443174;border:1px solid #946ce0;border-radius:100px;padding:8px 12px;min-width:75px}
.sound-toggle[aria-pressed=true] {background:#5442a3;color:white;box-shadow:0 0 14px #8e64fb7e}
h1 {display:flex;gap:6px;align-items:baseline;justify-content:center;position:relative;font-family:'Baloo 2','Trebuchet MS',sans-serif;font-size:clamp(2.5rem,9vw,3.45rem);font-weight:800;line-height:1.02;letter-spacing:-2px;margin:6px 0 2px;filter:drop-shadow(0px 4px 0px #120a4e)}
.title-color {background:linear-gradient(0deg,#fd54cb,#ffb8e5 74%);-webkit-background-clip:text;background-clip:text;color:transparent}
.title-guess {color:#fff; text-shadow:-2px -2px 0 #7650cd,2px 2px 0 #7650cd}
.title-star {font-family:Nunito;position:absolute;right:3%;top:-12px;font-size:32px;color:#ffeb6a;animation:twinkle 2s infinite}
.header-caption {font-weight:900;font-size:12px;letter-spacing:.4px;color:#c9bff3}
.screen {display:none;animation:screen-in .43s cubic-bezier(.2,.8,.2,1) both}
.screen.is-active {display:block}
.hero {position:relative;height:238px;margin:6px auto 0;display:flex;justify-content:center;align-items:center;isolation:isolate}
.halo {position:absolute;width:260px;height:195px;top:22px;border-radius:50%;z-index:-1;background:radial-gradient(ellipse at center,#6944bfb0 5%,#9060ec5c 49%,transparent 72%);filter:blur(5px);animation:aura 4s ease-in-out infinite}
.hero:before {content:'';position:absolute;left:calc(50% - 125px);top:26px;width:250px;height:210px;border:2px dashed #bca7ff42;border-radius:50%;transform:rotate(-15deg)}
.witch-portrait {height:218px;width:auto;max-width:min(100%,380px);object-fit:contain;position:relative;display:block;filter:drop-shadow(0 10px 22px #08051a80);animation:bob 3.3s ease-in-out infinite}
.start-portrait {height:226px;transform:translateX(-6px)}
.reveal-portrait {height:auto;width:350px;max-width:100%}
.end-portrait {height:225px}
.floating-icon {position:absolute;font-size:34px;color:#ffea97;text-shadow:0 0 18px #ffc45b;animation:twinkle 2.5s ease-in-out infinite}
.sparkle-a {left:15%;top:30px}.sparkle-b {right:14%;bottom:32px;animation-delay:.7s}
.cat {position:absolute;right:11%;bottom:9px;font-size:42px;filter:drop-shadow(0 0 11px #a484ff)}
.speech-card {position:relative;text-align:center;max-width:420px;margin:-4px auto 12px;padding:15px 17px 16px;border-radius:24px;border:2px solid #b1a1f0;background:linear-gradient(180deg,#fff 0,#fff5ff 100%);color:#33215e;box-shadow:0 7px 0 #8860ce,0 12px 25px #09082770}
.speech-card h2 {font-family:'Baloo 2','Trebuchet MS',sans-serif;font-weight:800;font-size:clamp(1.3rem,4.8vw,1.6rem);line-height:1.15;margin:0 0 4px}
.speech-card p {line-height:1.32;margin:0;font-weight:700;font-size:14px}
.speech-card::before {content:'';position:absolute;width:18px;height:18px;left:41%;top:-10px;background:#fff;border-top:2px solid #b1a1f0;border-left:2px solid #b1a1f0;transform:rotate(45deg)}
.speech-spark {position:absolute;left:10px;top:-25px;font-size:21px}
.small-label {font-size:10px;font-weight:900;letter-spacing:1.5px;text-align:center;color:#f5dfae;margin:23px 0 10px}
.all-colors {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.swatch {display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px 3px;border:2px solid #fff7;border-bottom-width:4px;border-radius:13px;background:var(--swatch);color:var(--swatch-text,#fff);font-size:clamp(9px,2.5vw,12px);font-weight:1000;letter-spacing:-.15px;text-shadow:0 1px 2px #0004;box-shadow:0 4px 12px #100b4480;transition:transform .15s}
.swatch:hover {transform:translateY(-3px)}
.magic-button,.end-button,.answer-button {border:2px solid #fff7;border-bottom-width:5px;color:white;font-weight:1000;text-shadow:0 1px 1px #0003;letter-spacing:.2px;cursor:pointer;transition:transform .15s,filter .15s,box-shadow .15s}
.magic-button:hover,.end-button:hover,.answer-button:hover {transform:translateY(-3px);filter:brightness(1.08)}
.magic-button:active,.end-button:active,.answer-button:active {transform:translateY(2px);border-bottom-width:2px}
.magic-button:disabled,.answer-button:disabled,.end-button:disabled {cursor:default;opacity:.65}
.magic-button {display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(180deg,#cf70ff,#9144dc 64%,#6e28c9);border-radius:60px;min-height:55px;padding:10px 20px;font-family:'Baloo 2','Trebuchet MS',sans-serif;font-size:17px;box-shadow:0 0 0 3px #fbe59652,0 0 24px #cb69ff66,0 6px 0 #642296}
.magic-button.wide {width:100%;margin-top:17px}
.tiny-tip {text-align:center;color:#cbc3f8;font-size:11px;font-weight:800;margin:14px auto 2px}
.progress-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 3px 6px}
.progress-text {font-size:11px;letter-spacing:1.25px;color:#ead5ff;font-weight:1000}
.step-dots {display:flex;align-items:center;gap:5px}
.step-dot {display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:1000;font-size:13px;color:#dacdfb;border:2px solid #a28bde;background:#41316c;transition:all .2s}
.step-dot.current {color:white;background:#b144d7;border-color:#ffe98b;box-shadow:0 0 10px #fedc91c2;transform:scale(1.1)}
.step-dot.done {background:#50c98f;color:white;border-color:#cbffde}
.step-line {width:20px;height:3px;border-radius:3px;background:#7166ae}
.hero-question {height:225px;margin-top:-2px}
.hero-question .witch-portrait {height:205px}
.question-speech {margin-top:-4px;padding:13px 14px}
.question-speech h2 {font-size:clamp(1.13rem,4.5vw,1.4rem)}
.question-speech p {font-size:12px;color:#7667a4}
.question-colors {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:20px 0 22px}
.question-colors .swatch {min-height:69px;font-size:17px;border-radius:19px;border-width:2px 2px 5px;box-shadow:0 7px 15px #0d083d70;animation:tile-pop .35s backwards}
.question-colors .swatch:nth-child(2) {animation-delay:.07s}
.question-colors .swatch:nth-child(3) {animation-delay:.14s}
.question-colors .swatch:nth-child(4) {animation-delay:.21s}
.answer-row {display:flex;gap:14px}
.answer-button {flex:1;min-height:64px;border-radius:24px;font-family:'Baloo 2','Trebuchet MS',sans-serif;font-size:27px;box-shadow:0 0 0 2px #fff3,0 5px 0 #0c083b}
.answer-button span {margin-right:8px}
.answer-yes {background:linear-gradient(#8ce939,#49b91d,#29860c)}
.answer-no {background:linear-gradient(#ff7e95,#eb3855,#bb2046)}
.result-top {text-align:center;margin:16px auto 0;color:#ffe48b;font-size:11px;letter-spacing:2.4px;font-weight:1000}
.hero-result {height:176px;margin:3px auto 0}
.result-halo {top:8px;height:142px}
.big-reveal {text-align:center;font-family:'Baloo 2','Trebuchet MS',sans-serif;font-size:clamp(1.65rem,6vw,2rem);line-height:1.1;color:#fff;margin:6px 0 0;text-shadow:0 3px 0 #7433a1}
.reveal-subtitle {text-align:center;font-weight:800;color:#e9d6ff;margin:4px 0 14px;font-size:12px}
.crystal-frame {position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:24px}
.crystal-orb {--orb-color:#f062c1;position:relative;border-radius:50%;width:clamp(222px,65vw,270px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border:6px solid #fff0d6;box-shadow:0 0 0 7px #ea8eff9a,0 0 47px 16px var(--orb-color),inset 0 0 38px #ffffffd1,0 16px 30px #11083cad;background:radial-gradient(circle at 28% 24%,#fff 0 7%,#fff6fddc 16%,#fff0fb91 40%,var(--orb-color) 95%);animation:orb-appear .75s cubic-bezier(.2,1.4,.4,1) both,orb-glow 3s ease-in-out .8s infinite}
.crystal-orb::before {content:'';position:absolute;left:19%;top:9%;width:29%;height:12%;background:#fff9;border-radius:50%;filter:blur(9px);transform:rotate(-31deg)}
.result-overline {font-size:14px;letter-spacing:1.2px;font-weight:1000;color:#5a2571;text-shadow:0 1px #fff7;z-index:1}
.result-name {font-family:'Baloo 2','Trebuchet MS',sans-serif;font-size:clamp(2.3rem,10vw,3.7rem);font-weight:800;line-height:1.1;color:#35144e;text-shadow:2px 3px #fff7;letter-spacing:-1px;z-index:1;max-width:95%;overflow-wrap:anywhere;text-align:center}
.crystal-spark {position:absolute;color:#fff0a9;font-size:32px;text-shadow:0 0 12px #fff;animation:twinkle 1.4s infinite}
.left-spark {left:12%;top:33%}.right-spark {right:9%;bottom:24%;animation-delay:.5s}
.orb-stand {width:142px;height:25px;border-radius:48%;margin-top:-6px;background:linear-gradient(#ffe9aa,#d98a3b,#8051a8);border:3px solid #ffe6a4;box-shadow:0 6px 18px #0007}
.result-actions {display:flex;gap:14px;justify-content:center}
.result-actions button {flex:1;max-width:220px;font-size:16px}
.end-button {border-radius:50px;min-height:55px;padding:8px 16px;background:linear-gradient(#7759ba,#4a3a8f,#30266c);box-shadow:0 5px 0 #211349}
.hero-end {height:325px;margin:35px auto 10px}.hero-end .halo {height:260px;width:300px}
.hero-end .witch-portrait {height:285px}
.goodbye-card {margin-top:0;padding:19px}.goodbye-card h2 {font-size:1.8rem}.goodbye-card p {font-size:15px}
.footer-mark {text-align:center;font-size:10px;color:#8f80ba;letter-spacing:.8px;font-weight:900;margin:19px auto 0}
.particle-layer {position:fixed;inset:0;z-index:10;pointer-events:none;overflow:hidden}
.magic-particle {position:absolute;left:0;top:0;width:9px;height:9px;border-radius:3px;background:var(--particle,#ffe679);box-shadow:0 0 12px var(--particle,#ffe679);animation:particle-fly .84s ease-out forwards;transform:translate(-50%,-50%)}
.confetti-piece {position:absolute;top:-22px;width:10px;height:17px;border-radius:3px;background:var(--confetti,#ffdd80);opacity:0;animation:confetti-fall var(--duration,2s) cubic-bezier(.25,.7,.4,1) forwards;animation-delay:var(--start,0s)}
@keyframes twinkle {0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
@keyframes aura {0%,100%{opacity:.62;transform:scale(.95)}50%{opacity:1;transform:scale(1.12)}}
@keyframes bob {0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes screen-in {from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tile-pop {from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes orb-appear {from{opacity:0;transform:scale(.35) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes orb-glow {0%,100%{filter:brightness(1);scale:1}50%{filter:brightness(1.08);scale:1.045}}
@keyframes particle-fly {0%{opacity:1;translate:0 0;rotate:0}100%{opacity:0;translate:var(--tx) var(--ty);rotate:var(--turn,300deg);scale:.1}}
@keyframes confetti-fall {0%{opacity:1;translate:0 -20px;rotate:0}100%{opacity:0;translate:var(--drift,20px) 115vh;rotate:var(--spin,760deg)}}
@media(max-width:520px){.app {margin:6px auto;padding:13px 15px 10px;width:min(100% - 10px,490px);border-radius:25px;min-height:calc(100vh - 12px)}.brand{letter-spacing:1px}.hero{height:207px}.witch-portrait,.start-portrait{height:198px}.halo {height:175px}.hero-question{height:193px}.hero-question .witch-portrait{height:185px}.speech-card{padding:13px 12px}.small-label{margin-top:19px}.hero-result{height:165px}.reveal-portrait{height:auto;width:310px}.hero-end{height:275px}.hero-end .witch-portrait{height:250px}.answer-button{min-height:60px}.question-colors .swatch {min-height:60px}.result-actions{margin-top:9px}}
@media(max-width:355px){h1{font-size:2.35rem}.all-colors{gap:4px}.swatch{font-size:9px}.brand{font-size:9px}.question-colors .swatch{font-size:14px}.speech-card p{font-size:12px}.hero{height:189px}.witch-portrait,.start-portrait{height:180px}.answer-button{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* v2 · difficulty modes, accessible 8–64-color palettes */
.level-title-row,.palette-title-row {display:flex;justify-content:space-between;align-items:end;gap:10px;margin-top:22px;margin-bottom:11px}
.level-label,.palette-label {margin:0;text-align:left}
.level-summary,.palette-help {color:#d9cbff;font-size:11px;font-weight:900;white-space:nowrap}
.level-summary {color:#ffe79d}
.level-chooser {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.level-button {background:linear-gradient(180deg,#514083,#362d65);border:2px solid #a68bdd;border-bottom-width:5px;color:#ede5ff;border-radius:17px;min-width:0;padding:10px 3px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;box-shadow:0 4px 10px #07041c60;transition:transform .16s,background .16s,box-shadow .16s}
.level-button:hover {transform:translateY(-2px)}
.level-button.selected {border-color:#ffea8e;background:linear-gradient(180deg,#8545b7,#642aa1);box-shadow:0 0 17px #d591f488}
.level-button.god-level.selected {border-color:#fff4a1;background:linear-gradient(180deg,#7e4bb7,#51227b);box-shadow:0 0 20px #ffe6a476}
.level-icon {font-size:17px;color:#ffe588;line-height:1}
.level-name {font-size:10px;font-weight:1000;letter-spacing:.2px}
.level-button strong {font-size:23px;font-weight:1000;line-height:1.04}
.level-sub {font-size:9px;color:#e9dcff;font-weight:800}
.app.app-wide {width:min(calc(100% - 28px),990px)}
.app.app-wide .all-colors {grid-template-columns:repeat(8,minmax(0,1fr))}
.all-colors .swatch {min-height:49px}
.swatch.multi {display:flex;flex-direction:column;gap:3px;min-height:65px;padding:5px 2px;line-height:1.12;text-shadow:none;text-align:center}
.swatch-family {font-size:clamp(10px,1.3vw,13px);font-weight:1000;overflow-wrap:anywhere}
.swatch-shade {font-size:clamp(8px,1.1vw,11px);font-weight:900;opacity:.94;letter-spacing:.3px;overflow-wrap:anywhere}
.swatch.multi .swatch-code {font-size:9px;letter-spacing:.1px;opacity:.84;font-weight:700}
.app.app-wide .hero-start {height:165px;margin-top:4px}
.app.app-wide .hero-start .witch-portrait {height:158px}
.app.app-wide .hero-start .halo {height:155px}
.app.app-wide .hero-start:before {display:none}
.app.app-wide .speech-card {max-width:720px}
.app.app-wide .hero-question {height:146px}
.app.app-wide .hero-question .witch-portrait {height:137px}
.app.app-wide .hero-question .halo {height:125px}
.app.app-wide .hero-question:before {display:none}
.app.app-wide .question-colors {grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:12px 0 18px}
.app.app-wide .question-colors .swatch {min-height:56px;font-size:12px;border-radius:13px;border-bottom-width:3px}
.app.app-wide .question-colors .swatch.multi {min-height:66px}
.app.app-wide .answer-row {max-width:560px;margin:0 auto}
.app.app-wide .progress-heading {max-width:710px;margin-left:auto;margin-right:auto}
.app.app-wide .question-speech {max-width:720px}
.app.app-wide .question-count-hint {max-width:710px;margin-left:auto;margin-right:auto}
.step-dots {flex-wrap:wrap;justify-content:end}
.step-dot {width:28px;height:28px;font-size:12px}
.step-line {width:10px}
.question-count-hint {color:#e3d3ff;text-align:center;font-size:11px;font-weight:900;margin:9px auto 0}
.result-shade {font-size:13px;font-weight:1000;letter-spacing:.5px;color:#46235c;background:#fff9;border-radius:16px;padding:3px 7px;margin-top:5px;z-index:1}
.result-shade:empty {display:none}
.result-caption {color:#edd8ff;text-align:center;font-size:12px;font-weight:900;margin:0 auto 15px}
.result-name.result-long {font-size:clamp(1.9rem,7vw,2.8rem)}
@media(max-width:780px){
  .app.app-wide {width:min(100% - 14px,640px);padding:15px 14px}
  .app.app-wide .all-colors,.app.app-wide .question-colors {grid-template-columns:repeat(4,minmax(0,1fr))}
  .app.app-wide .swatch-family {font-size:11px}
  .app.app-wide .swatch-shade {font-size:9px}
  .app.app-wide .step-line {width:7px}
  .app.app-wide .step-dot {width:24px;height:24px;font-size:11px}
  .app.app-wide .progress-heading {flex-wrap:wrap;justify-content:center}
  .app.app-wide .question-colors .swatch.multi {min-height:61px}
}
@media(max-width:380px){
  .level-button {padding:8px 1px;border-radius:11px}
  .level-name {font-size:9px}
  .level-sub {font-size:8px}
  .level-summary {font-size:9px}
  .palette-help {font-size:9px}
  .swatch.multi .swatch-code {font-size:8px}
  .app.app-wide .question-colors {gap:5px}
}