/* Solo Style quiz + guides. Page-scoped; uses tokens from main.css. */
.ss{max-width:var(--wrap);margin:0 auto;padding:2rem var(--gut) 5rem;width:100%}
.ss img{max-width:100%;height:auto;display:block}
.ss-devwarn{background:repeating-linear-gradient(45deg,var(--yellow) 0 12px,#f2c95e 12px 24px);border:3px solid var(--ink);font:800 .8rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1rem;margin:0 0 1.5rem}
.ss-note{font:italic 1.1rem/1.5 var(--serif);color:var(--ink-2)}

/* Landing */
.ss-hero{display:grid;gap:2rem;margin-bottom:3rem}
.ss-hero__title{font:clamp(3rem,10vw,6.4rem)/.9 var(--display);text-transform:uppercase;color:var(--red);margin:.5rem 0 1rem}
.ss-hero__intro{font:italic 1.35rem/1.45 var(--serif);max-width:34rem}
.ss-hero__micro{font:800 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:1rem 0 1.5rem;padding-left:.8rem;border-left:6px solid var(--teal)}
.ss-doors{list-style:none;margin:0;padding:6px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;background:var(--ink);border:3px solid var(--ink)}
.ss-door:first-child{grid-column:1/-1}
.ss-door a{display:grid;gap:.4rem;align-content:start;padding:.7rem;background:var(--cream);color:var(--ink);text-decoration:none;height:100%;transition:background-color .15s}
.ss-door a:hover,.ss-door a:focus-visible{background:var(--pink-l);color:var(--ink)}
.ss-door__img{width:100%;aspect-ratio:4/5;object-fit:contain;background:var(--paper);border:3px solid var(--ink);transition:transform .25s}
.ss-door a:hover .ss-door__img{transform:translateY(-3px)}
.ss-door:first-child .ss-door__img{max-width:16rem}
.ss-door__no{font:800 .65rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.ss-door__name{font:1.2rem/1 var(--display);text-transform:uppercase}
.ss-door__tag{font:italic .95rem/1.3 var(--serif);color:var(--ink-2)}
.ss-scene{display:block;width:100%;height:auto;border:3px solid var(--ink)}
@media(min-width:860px){
  .ss-hero{grid-template-columns:.9fr 1.3fr;align-items:center}
  .ss-doors{grid-template-columns:repeat(5,1fr)}
  .ss-door:first-child{grid-column:auto}
  .ss-door:first-child .ss-door__img{max-width:none}
}

/* Quiz */
.ss-quiz{background:var(--yellow);border:var(--line);box-shadow:10px 10px 0 var(--blue);padding:clamp(1.5rem,4vw,2.5rem);max-width:56rem;outline:none;scroll-margin-top:1rem}
.ss-quiz__title{font:clamp(2rem,5vw,3rem)/1 var(--display);text-transform:uppercase}
.ss-btn{cursor:pointer}
.ss-progress__text{font:800 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .4rem}
.ss-progress__bar{height:14px;border:3px solid var(--ink);background:var(--cream);margin-bottom:1.5rem}
.ss-progress__bar span{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(0);transition:transform .2s}
.ss-q{border:0;padding:0;margin:0}
.ss-q__text{font:800 clamp(1.3rem,3vw,1.7rem)/1.25 var(--sans);padding:0;margin-bottom:1rem;outline:none}
.ss-options{display:grid;gap:.6rem}
.ss-opt{display:flex;gap:.9rem;align-items:center;min-height:3.5rem;padding:.8rem 1rem;background:var(--cream);border:3px solid var(--ink);cursor:pointer;font-weight:700;transition:background-color .15s,box-shadow .15s}
.ss-opt input{accent-color:var(--red);width:1.4rem;height:1.4rem;flex:none;margin:0}
.ss-opt:hover{background:var(--paper)}
.ss-opt:has(input:checked){background:var(--teal);color:var(--cream);box-shadow:5px 5px 0 var(--ink)}
.ss-opt:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.ss-error{color:var(--red-d);font-weight:800;min-height:1.6em;margin:.8rem 0 0}
.ss-nav{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}
.ss-result__grid{display:grid;gap:1.5rem}
.ss-result__art{margin:0;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--cream);max-width:18rem}
.ss-result__img{width:100%}
.ss-result__name{font:clamp(2.4rem,6vw,4rem)/.95 var(--display);text-transform:uppercase;color:var(--blue);margin:.3rem 0 .6rem;outline:none}
.ss-result__tag{font:italic 600 1.4rem/1.3 var(--serif)}
.ss-result__desc{font:1.05rem/1.55 var(--serif)}
.ss-result__power{background:var(--cream);border:3px solid var(--ink);padding:.8rem 1rem;font-weight:700}
.ss-result__power .label{display:block}
.ss-result__second{font:italic 1.05rem var(--serif)}
.ss-result__second a{color:var(--red-d);font-weight:700}
@media(min-width:760px){.ss-result__grid{grid-template-columns:16rem 1fr;align-items:start}}
.ss-panel:not([hidden]){animation:ss-in .35s ease-out}
@keyframes ss-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Guide header */
.ss-ghead{display:grid;gap:1.5rem;background:var(--pink);border:var(--line);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:10px 10px 0 var(--ink);margin-bottom:3rem}
.ss-guide--resourceful-improviser .ss-ghead{background:var(--yellow)}
.ss-guide--independent-adventurer .ss-ghead{background:var(--blue);color:var(--cream)}
.ss-guide--contented-homebody .ss-ghead{background:var(--night);color:var(--cream)}
.ss-guide--master-of-systems .ss-ghead{background:var(--teal);color:var(--cream)}
.ss-ghead .kicker{color:inherit}
.ss-ghead__title{font:clamp(2.4rem,7vw,4.6rem)/.95 var(--display);text-transform:uppercase;margin:.6rem 0 .8rem}
.ss-ghead__tag{font:italic 600 clamp(1.3rem,3vw,1.7rem)/1.3 var(--serif);margin:0 0 1rem}
.ss-ghead__desc{font:1.15rem/1.6 var(--serif);max-width:36rem}
.ss-ghead__art{margin:0;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--cream);background:var(--cream);justify-self:center;max-width:26rem;width:100%}
.ss-traits{display:grid;gap:.8rem;margin:1.5rem 0 0}
.ss-trait{background:var(--cream);color:var(--ink);border:3px solid var(--ink);padding:.9rem 1.1rem}
.ss-trait--weak{background:transparent;color:inherit;border-style:dashed;border-color:currentColor}
.ss-trait dt{font:800 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.3rem}
.ss-trait dd{margin:0;font:600 1.1rem/1.4 var(--serif)}
.ss-trait--weak dd{font-style:italic;font-weight:400}
@media(min-width:860px){.ss-ghead{grid-template-columns:1.25fr 1fr;align-items:center}.ss-traits{grid-template-columns:1fr 1fr}}

/* Archive feature */
.ss-archive{background:var(--ink);color:var(--cream);padding:clamp(1.5rem,4vw,2.5rem);margin-bottom:3rem;border:var(--line)}
.ss-archive__stamp{display:inline-block;font:800 .75rem var(--sans);letter-spacing:.16em;text-transform:uppercase;border:2px solid var(--yellow);color:var(--yellow);padding:.3rem .7rem;margin:0 0 1.5rem;transform:rotate(-1.5deg)}
.ss-archive__grid{display:grid;gap:1.75rem}
.ss-archive__fig{margin:0}
.ss-archive__fig img{border:3px solid var(--cream);filter:sepia(.12)}
.ss-archive__fig figcaption{font:italic .9rem/1.4 var(--serif);margin-top:.6rem;opacity:.85}
.ss-archive__title{font:clamp(1.8rem,4vw,2.6rem)/1 var(--display);text-transform:uppercase;color:var(--yellow);margin:.3rem 0 1rem}
.ss-archive p{line-height:1.6}
.ss-archive a{color:var(--yellow)}
.ss-archive .label{color:var(--pink-l)}
@media(min-width:860px){.ss-archive__grid{grid-template-columns:1.1fr 1fr;align-items:start}}

/* Guide body */
.ss-gbody{max-width:48rem}
.ss-gtitle{font:clamp(2rem,5vw,3.2rem)/1 var(--display);text-transform:uppercase;color:var(--red);margin:.3rem 0 1rem}
.ss-lede{font:italic 1.35rem/1.5 var(--serif)}
.ss-steps{list-style:none;margin:2rem 0;padding:0;display:grid;gap:1rem}
.ss-step{display:grid;grid-template-columns:3.4rem 1fr;gap:1rem;align-items:start;background:var(--cream);border:3px solid var(--ink);padding:1.1rem 1.2rem;transition:transform .2s,box-shadow .2s}
.ss-step:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.ss-step:nth-child(5n+1) .ss-step__no{background:var(--red)}
.ss-step:nth-child(5n+2) .ss-step__no{background:var(--teal)}
.ss-step:nth-child(5n+3) .ss-step__no{background:var(--blue)}
.ss-step:nth-child(5n+4) .ss-step__no{background:var(--yellow);color:var(--ink)}
.ss-step:nth-child(5n+5) .ss-step__no{background:var(--night)}
.ss-step__no{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;color:var(--cream);font:1.6rem/1 var(--display);border:3px solid var(--ink)}
.ss-step h3{font:800 1.2rem/1.25 var(--sans);margin:.2rem 0 .4rem}
.ss-step p{margin:0;font:1.05rem/1.5 var(--serif)}
.ss-closing{font:italic 600 clamp(1.4rem,3vw,1.8rem)/1.35 var(--serif);border-top:var(--line);border-bottom:var(--line);padding:1.2rem 0;margin:2.5rem 0}
.ss-sec{margin:2.5rem 0;padding-top:1.2rem;border-top:var(--line)}
.ss-sec h2{font:2rem/1 var(--display);text-transform:uppercase}
.ss-sources{padding-left:1.2rem;font-size:.95rem}
.ss-retake{margin-top:3rem;padding:1.5rem;border:3px dashed var(--ink);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.ss-retake .kicker{margin:0}
.ss-others{margin-top:3rem}
.ss-others ul{list-style:none;padding:0;margin:.6rem 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.ss-others a{display:grid;gap:.4rem;color:var(--ink);text-decoration:none;font:1rem/1 var(--display);text-transform:uppercase}
.ss-others img{border:3px solid var(--ink);background:var(--cream);transition:transform .2s}
.ss-others a:hover img{transform:translateY(-3px)}
@media(min-width:640px){.ss-others ul{grid-template-columns:repeat(4,1fr)}}

@media (prefers-reduced-motion:reduce){.ss *,.ss *::before{transition:none!important;animation:none!important}}