/* Phone layout: natural document flow, contained illustrations, readable choices. */
@media screen and (max-width:680px){
 .site-shell{width:100%;max-width:520px;margin-inline:auto;padding-inline:16px}
 .topbar{height:68px;grid-template-columns:minmax(0,1fr) auto;gap:8px}
 .brand{gap:7px}.brand-mark{width:30px;height:34px;flex-basis:30px}.brand-mark svg{width:30px;height:34px}
 .brand-name{font-size:17px;letter-spacing:0}.brand-sub{font-size:10px;letter-spacing:0}
 .topbar-tools{gap:6px}.header-tool{min-width:44px;height:38px;padding:0 11px;font-size:16px}.print-tool{min-width:56px}
 .hero{display:flex;flex-direction:column;align-items:center;padding:24px 0 12px;gap:0}
 .hero-copy{display:contents}.hero .eyebrow{order:0;font-size:10px;letter-spacing:.06em}
 .hero h1{order:1;width:100%;font-size:clamp(29px,8vw,37px);line-height:1.3;margin:12px 0 10px;letter-spacing:-.035em}
 .hero-desc{order:2;font-size:14px;line-height:1.8;max-width:330px;padding:0;margin:0 auto 8px}
 .hero-stage{order:3;width:100%;max-width:390px;margin:0 auto 8px;display:block}
 .hero-stage .hero-art{display:block;width:100%;position:static}
 .hero-group-illustration{display:block;width:100%;height:auto;max-height:285px;object-fit:contain}
 .hero-peek,.hero-sparkle{display:none}
 .hero-actions{order:4;display:flex;flex-direction:column;width:100%;gap:13px}
 .hero-actions .btn-primary{width:min(100%,310px);min-height:52px;font-size:21px;background:#f5bd42;color:#402d1b;box-shadow:0 4px 0 #d79a26}
 .hero-actions .btn-secondary{padding:3px 8px;border:0;box-shadow:none;background:none;font-size:13px;color:#786451}
 .hero-note{order:5;margin:13px 0 0;font-size:11px;line-height:1.7;text-align:center;justify-content:center}.hero-note .scribble{display:none}
 .hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:100%;margin:10px auto 26px;padding:14px 4px;font-size:11px;line-height:1.5;border-radius:18px;text-align:center}
 .hero-metrics i{display:none}.hero-metrics span+span{border-left:1px solid #e8d4ac}.hero-metrics:before{display:none}
 .section{padding:26px 0 30px}.section h2{font-size:25px;line-height:1.4}.section-kicker{font-size:10px}.section-head{gap:8px;margin-bottom:17px}.section-intro{font-size:13px;line-height:1.8}
 .trait-card{padding:16px;grid-template-columns:40px minmax(0,1fr);gap:0 12px}.trait-card p{font-size:13px}.trait-number{display:none}
 .home-art-callout{padding:12px;gap:12px}.home-art-callout p{font-size:13px}.home-art-callout img{width:36%}
 .character-card:nth-child(5),.gallery-grid .character-card:nth-child(5){grid-column:auto}
 #home-character-grid .character-card:nth-child(n+5){display:none}
 #home-character-grid .card-back{height:135px;min-height:135px}
 .gallery-grid .card-back,.gallery-grid .character-card:nth-child(5) .card-back{height:170px;min-height:170px}
 .character-card:nth-child(5) .character-avatar,.gallery-grid .character-card:nth-child(5) .character-avatar{height:155px}
 .page-head{padding:24px 0 18px}.page-head h1{font-size:28px}.page-head p{font-size:14px;line-height:1.8}
 .quiz-layout{display:block}.quiz-aside{display:none}.quiz-topline{flex-wrap:wrap;gap:8px}.progress-wrap{min-width:170px}.quiz-topline>.text-button:last-child{display:none}
 .question-card{padding:22px 16px;border-radius:22px}.question-title{font-size:22px;line-height:1.6}.question-subtitle{font-size:13px;line-height:1.7;margin-bottom:18px}
 .options{grid-template-columns:minmax(0,1fr);gap:10px}.option{padding:14px 12px;gap:10px;min-height:64px}.option-text{font-size:15px;line-height:1.7}.option-letter{width:30px;height:30px;flex-basis:30px;font-size:14px}.option-check{flex:0 0 18px}
 .question-actions .btn{min-height:46px;font-size:15px}.question-tip{font-size:11px}
 .result-wrap{padding-top:0}.result-main{gap:18px}.result-main>div{min-width:0}.result-title{font-size:32px;overflow-wrap:anywhere}.result-art{width:190px;height:235px}.result-description,.role-identity p{font-size:14px;line-height:1.9}.result-tags{flex-wrap:wrap}
 .report-card{padding:23px 17px}.report-card p{font-size:15px;line-height:1.95}.report-card h2{font-size:21px;line-height:1.5}.report-card h3{font-size:18px}.story-card{padding:15px 13px}.report-dimension{grid-template-columns:85px minmax(0,1fr) 28px;font-size:12px}
 .result-bottom-actions{flex-wrap:wrap;gap:10px}.result-bottom-actions .btn{min-width:100px;font-size:13px;min-height:46px}
 .site-footer{font-size:11px;line-height:1.8}.modal{width:calc(100% - 28px);max-height:85dvh;overflow:auto}
 html.font-large .hero h1{font-size:40px!important}
 html.font-large :is(.hero-desc,.option-text,.report-card p,.role-identity p,.result-description){font-size:18px!important}
 html.font-large :is(.question-title,.report-card h2){font-size:25px!important}
 html.font-large .brand-name{font-size:17px!important}html.font-large .brand-sub{font-size:10px!important}
}
@media screen and (max-width:359px){.site-shell{padding-inline:12px}.brand-name{font-size:15px}.brand-sub{font-size:9px}.brand-mark{flex-basis:26px;width:26px}.header-tool{padding:0 9px;min-width:40px}.print-tool{min-width:50px}.hero h1{font-size:28px}}