.quiz-main{padding-bottom:80px}
.quiz-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,40px);align-items:center;padding:clamp(24px,4vw,48px) clamp(18px,5vw,64px) 22px}
.quiz-hero-copy p{max-width:680px}
.quiz-hero-art{position:relative;justify-self:end;max-width:620px}
.quiz-hero-art img{width:100%;display:block;border:5px solid #b9f116;box-shadow:10px 10px 0 #09030f;border-radius:28px;background:#1a092c}
.quiz-shell{padding:8px clamp(18px,5vw,64px) 14px}
.quiz-card{background:linear-gradient(180deg,#2c0b4a,#19072b);border:4px solid #09030f;box-shadow:10px 10px 0 #09030f;border-radius:28px;padding:clamp(20px,4vw,34px);position:relative;overflow:hidden}
.quiz-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0 45%,rgba(255,255,255,.06) 45% 58%,transparent 58%);pointer-events:none}
.hidden{display:none!important}
.rules-list{padding-left:22px;max-width:800px}.rules-list li{margin:8px 0;font-size:18px}
.question-top{display:grid;gap:12px;margin-bottom:10px}.question-count{font:900 13px Arial,sans-serif;letter-spacing:1.2px;color:var(--lime2)}
.progress-bar{height:16px;border:3px solid #09030f;background:#fff4cf;border-radius:999px;overflow:hidden;box-shadow:4px 4px 0 #09030f}.progress-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--lime));transition:width .25s ease}
.question-card h2{font-size:clamp(38px,4.5vw,64px);margin:8px 0 24px;line-height:.95}
.answers-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.answer-btn{appearance:none;border:4px solid #09030f;background:#fff4cf;color:#16071f;border-radius:22px;padding:18px 18px 20px;text-align:left;font:900 19px/1.2 "Trebuchet MS",Arial,sans-serif;box-shadow:6px 6px 0 #09030f;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;min-height:110px}
.answer-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #09030f}.answer-btn small{display:block;margin-top:10px;font:900 11px Arial,sans-serif;letter-spacing:1px;color:#5c238a}
.answer-btn.selected{background:linear-gradient(180deg,#dfff73 0%,#b9f116 100%)}
.quiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.quiz-nav .btn{min-width:180px}
.result-layout{display:grid;grid-template-columns:1fr .95fr;gap:24px;align-items:center}.result-copy h2{font-size:clamp(42px,5vw,72px);margin:8px 0 16px;line-height:.92}
.result-blurb{font-size:22px;line-height:1.3;color:#fff4cf;margin:0 0 12px}.result-description{font-size:18px;line-height:1.6;max-width:760px}
.result-art-wrap{position:relative}.result-art{width:100%;display:block;border:5px solid #b9f116;border-radius:26px;box-shadow:9px 9px 0 #09030f;background:#180626}
.trait-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px}.trait-row span{display:inline-flex;align-items:center;padding:10px 14px;background:#fff4cf;color:#16041f;border:3px solid #09030f;border-radius:999px;box-shadow:4px 4px 0 #09030f;font:900 12px Arial,sans-serif;letter-spacing:1px}
.result-actions{display:flex;flex-wrap:wrap;gap:12px}
.score-panel{margin-top:24px;background:#fff4cf;color:#12051d;border:4px solid #09030f;border-radius:22px;padding:18px 18px 14px;box-shadow:6px 6px 0 #09030f}.score-panel h3{margin:0 0 14px;font-size:30px;line-height:.95}
.score-breakdown{display:grid;gap:10px}.score-item{display:grid;grid-template-columns:170px 1fr 56px;gap:10px;align-items:center}.score-item strong{font:900 12px Arial,sans-serif;letter-spacing:1px}.score-track{height:14px;border-radius:999px;border:2px solid #09030f;background:#e8ddbd;overflow:hidden}.score-track span{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--purple2),var(--lime))}
.gallery-section{padding:8px clamp(18px,5vw,64px) 24px}
.monster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.monster-card{display:flex;flex-direction:column;background:#1b082e;border:4px solid #09030f;border-radius:24px;overflow:hidden;box-shadow:7px 7px 0 #09030f}.monster-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#10051d}.monster-card .monster-copy{padding:14px 16px 18px}.monster-card h3{margin:0 0 8px;font-size:32px;line-height:.92}.monster-card p{margin:0 0 12px;font-size:15px;line-height:1.45;color:#f4ecdb}.monster-card a{align-self:flex-start}
@media(max-width:1100px){.quiz-hero,.result-layout{grid-template-columns:1fr}.quiz-hero-art{justify-self:stretch;max-width:none}.monster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.quiz-hero{padding-inline:18px}.answers-grid,.monster-grid{grid-template-columns:1fr}.question-card h2{font-size:clamp(34px,10vw,48px)}.answer-btn{min-height:unset;padding:16px 16px 18px;font-size:18px}.score-item{grid-template-columns:1fr}.quiz-nav{flex-direction:column}.quiz-nav .btn,.result-actions .btn{width:100%}.result-copy h2{font-size:clamp(40px,12vw,56px)}.result-blurb{font-size:19px}.score-panel h3{font-size:26px}}

/* Mobile-first wallpapers: 9:16 is the primary result art. */
.quiz-hero-art{max-width:420px}
.quiz-hero-art img{aspect-ratio:9/16;object-fit:cover}
.result-layout{grid-template-columns:1fr minmax(300px,460px)}
.result-art-wrap{display:flex;justify-content:center;align-items:flex-start}
.result-art{width:min(100%,440px);aspect-ratio:9/16;object-fit:cover}
.monster-grid{grid-template-columns:repeat(4,minmax(180px,1fr))}
.monster-card img{aspect-ratio:9/16;object-fit:cover}
.monster-card .monster-copy{min-height:190px}
@media(max-width:1100px){.result-layout{grid-template-columns:1fr}.result-art{width:min(100%,460px)}.quiz-hero-art{justify-self:center;width:min(100%,420px)}.monster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.quiz-hero{grid-template-columns:1fr}.quiz-hero-art{width:min(88vw,390px)}.result-art{width:min(88vw,420px)}.monster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.monster-card .monster-copy{min-height:170px;padding:12px}.monster-card h3{font-size:26px}.monster-card p{font-size:13px}.result-actions{display:grid;grid-template-columns:1fr}.result-actions .btn{width:100%}}


/* result sharing */
.result-share-box{margin:22px 0 20px;padding:18px;background:#1b082d;color:#fff4cf;border:4px solid #09030f;box-shadow:6px 7px 0 #09030f}.result-share-box>span{display:block;color:var(--orange);font:900 11px Arial;letter-spacing:1.3px}.result-share-box>strong{display:block;font-family:"PipCryp Slime",Impact,sans-serif;font-weight:400;color:var(--lime);font-size:28px;line-height:1;margin:8px 0 14px}.result-share-actions{display:flex;flex-wrap:wrap;gap:9px}.result-share-box small{display:block;margin-top:13px;color:#d6c7e1;font:800 12px/1.4 Arial}.share-flash{animation:shareflash .45s ease}@keyframes shareflash{50%{transform:translateY(-3px);filter:brightness(1.18)}}
@media(max-width:650px){.result-share-actions{display:grid;grid-template-columns:1fr}.result-share-actions .btn{width:100%}.result-share-box{padding:16px 14px}.result-share-box>strong{font-size:25px}.result-actions{display:grid!important;grid-template-columns:1fr}.result-actions .btn{width:100%}}