/* Solo Leveling final polish: use the exact supplied reveal frame and make mobile actions immediately obvious. */
#result .result-portrait-stage .result-frame{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  z-index:4!important;
  pointer-events:none!important;
}
#result .result-portrait-stage #resultPortrait{
  /* Square portrait aperture: the supplied frame already defines the visible window. */
  clip-path:none!important;
  -webkit-clip-path:none!important;
  border-radius:0!important;
  object-fit:cover!important;
  object-position:center 44%!important;
  overflow:visible!important;
  z-index:2!important;
}
#result .result-portrait-stage .result-portrait-glow{z-index:1!important;}

/* High-contrast CTA on desktop and touch screens. */
#start .start-copy .cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-width:250px;
  min-height:56px;
  padding:16px 24px;
  border:1px solid #c3eaff;
  border-radius:10px;
  background:linear-gradient(115deg,#176de0 0%,#4c45e8 54%,#722ee7 100%);
  color:#fff;
  font:800 12px/1.2 Inter,system-ui,sans-serif;
  letter-spacing:.12em;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  box-shadow:0 0 0 3px rgba(64,147,255,.16),0 10px 30px rgba(38,101,236,.38),inset 0 1px 0 rgba(255,255,255,.26);
  isolation:isolate;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
#start .start-copy .cta::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:6px;
  pointer-events:none;
}
#start .start-copy .cta span{margin:0;font-size:20px;line-height:1;}
#start .start-copy .cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 0 0 4px rgba(64,147,255,.2),0 14px 38px rgba(38,101,236,.48),inset 0 1px 0 rgba(255,255,255,.3);
}
#start .start-copy .cta:focus-visible{outline:3px solid #e8f7ff;outline-offset:4px;}

/* Make quiz answers comfortable to tap and keep the controls on-screen on mobile. */
@media(max-width:600px){
  .topbar{min-height:54px;padding:0 13px;gap:10px;}
  .logo{font-size:14px;letter-spacing:.08em;}
  .top-links{display:none;}
  .sound-toggle{min-height:34px;padding:7px 9px;font-size:8px;white-space:nowrap;}

  #start .start-shell{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:5px;
    min-height:0;
    padding:10px 15px 28px;
    align-items:start;
  }
  #start .start-art{
    width:100%;
    height:clamp(215px,31svh,270px);
    min-height:0;
    max-height:none;
    aspect-ratio:auto;
    border-radius:18px;
    border:1px solid rgba(117,201,255,.3);
    box-shadow:0 12px 34px rgba(0,0,0,.35);
    background:#07142a;
  }
  #start .start-bg{object-fit:cover!important;object-position:center 53%!important;opacity:1!important;filter:saturate(1.1) contrast(1.04)!important;}
  #start .art-shade{background:linear-gradient(180deg,rgba(3,8,22,.02) 35%,rgba(3,8,22,.23) 100%)!important;}
  #start .start-copy{padding:9px 2px 0;}
  #start .eyebrow{font-size:8px;letter-spacing:.16em;line-height:1.4;margin:0 0 7px;}
  #start .start-copy h1{font-size:clamp(25px,7.4vw,32px);line-height:1.12;letter-spacing:-.03em;}
  #start .lead{font-size:12px;line-height:1.55;margin:9px 0 10px;max-width:none;}
  #start .feature-row{gap:7px;margin:10px 0 13px;font-size:9px;line-height:1.4;}
  #start .start-copy .cta{
    display:flex;
    width:100%;
    min-width:0;
    min-height:56px;
    padding:15px 18px;
    border-radius:10px;
    font-size:12px;
    letter-spacing:.13em;
    box-shadow:0 0 0 3px rgba(64,147,255,.16),0 8px 24px rgba(38,101,236,.4),inset 0 1px 0 rgba(255,255,255,.28);
  }
  #start .note{font-size:10px;line-height:1.5;margin:9px 0 0;}

  #quiz .quiz-shell{min-height:calc(100svh - 54px);padding:16px 13px 30px;}
  #quiz .quiz-top{gap:10px;margin-bottom:17px;}
  #quiz .back-btn{min-height:40px;padding:10px 11px;font-size:11px;white-space:nowrap;}
  #quiz .progress-meta{font-size:10px;margin-bottom:7px;}
  #quiz .progress{height:5px;}
  #quiz .question-card{padding:20px 15px;border-radius:15px;}
  #quiz .question-kicker{font-size:9px;}
  #quiz .question-card h2{font-size:clamp(22px,6.2vw,29px);line-height:1.3;margin:12px 0 9px;}
  #quiz .question-hint{font-size:11px;line-height:1.5;margin:0 0 17px;}
  #quiz .answers{gap:9px;}
  #quiz .answer{
    min-height:56px;
    padding:13px 12px;
    gap:10px;
    border-radius:10px;
    font-size:12px;
    line-height:1.45;
    touch-action:manipulation;
  }
  #quiz .answer .letter{flex-basis:29px;width:29px;height:29px;font-size:10px;}
  #quiz .quiz-note{font-size:10px;line-height:1.5;margin:14px 4px 0;}

  #result .result-shell{padding:8px 8px 30px!important;}
  #result .result-card{padding:15px 11px 19px!important;border-radius:17px!important;}
  #result .result-site-header{gap:7px;padding:0 0 10px!important;margin-bottom:9px!important;}
  #result .result-site-logo{font-size:12px!important;letter-spacing:.04em!important;}
  #result .result-index{font-size:7px!important;letter-spacing:.06em!important;}
  #result .result-brand{font-size:16px!important;letter-spacing:.08em!important;}
  #result .result-kicker{font-size:7px!important;letter-spacing:.17em!important;}
  #result .result-portrait-stage{width:min(100%,315px)!important;margin:5px auto 2px!important;}
  #result .result-card h1{font-size:clamp(29px,8.4vw,38px)!important;overflow-wrap:anywhere;}
  #result .result-card .pathway{font-size:11px!important;line-height:1.45!important;margin:6px 0 10px!important;}
  #result .tags.centered{gap:6px!important;margin-bottom:12px!important;}
  #result .tags span{font-size:7px!important;padding:6px 7px!important;letter-spacing:.07em!important;}
  #result .result-message{font-size:12px!important;line-height:1.7!important;}
  #result .score-block{margin:13px 0 11px!important;}
  #result .score-block strong{font-size:27px!important;}
  #result .score-block span{font-size:7px!important;letter-spacing:.14em!important;}
  #result .result-actions.centered-actions{max-width:none!important;margin-top:12px!important;}
  #result .share-button,#result .profile-button{min-height:48px!important;font-size:10px!important;letter-spacing:.07em!important;padding:12px 10px!important;}
  #result .quick-panel{padding:16px 11px!important;}
  #result .quick-title{font-size:9px!important;letter-spacing:.13em!important;}
  #result .insight-panel>p{font-size:12px!important;line-height:1.7!important;}
  #result .panel-subtitle{font-size:10px!important;line-height:1.5!important;}
  #result .match-panel .close-list{grid-template-columns:1fr!important;gap:8px!important;}
  #result .match-panel .close-card{min-height:70px!important;flex-wrap:nowrap!important;align-items:center!important;gap:9px!important;padding:8px!important;}
  #result .match-panel .close-card img{flex:0 0 43px!important;width:43px!important;height:49px!important;}
  #result .match-panel .close-card strong{font-size:10px!important;}
  #result .match-panel .close-card .close-info>small{font-size:8px!important;}
  #result .match-panel .close-percent b{font-size:13px!important;}
  #result .match-panel .close-percent small{font-size:6px!important;}
  #result .ft-crosslinks{padding:16px 12px!important;margin-top:16px!important;}
  #result .crosslinks-heading h2{font-size:20px!important;line-height:1.3!important;}
  #result .crosslinks-heading p{font-size:12px!important;line-height:1.5!important;}
  #result .crosslinks-grid{grid-template-columns:1fr!important;gap:8px!important;}
  #result .crosslinks-grid a{padding:13px!important;}
  #result .crosslinks-grid strong{font-size:12px!important;}
  #result .crosslinks-grid span{font-size:11px!important;line-height:1.45!important;}
  #result .disclaimer{font-size:9px!important;line-height:1.6!important;margin-top:18px!important;}
}
@media(max-width:380px){
  #start .start-shell{padding-left:12px;padding-right:12px;}
  #start .start-art{height:clamp(205px,30svh,240px);}
  #start .start-copy h1{font-size:25px;}
  #start .lead{font-size:11.5px;}
  #start .feature-row{font-size:8px;gap:5px;}
  #quiz .quiz-shell{padding-left:10px;padding-right:10px;}
  #quiz .question-card{padding:18px 12px;}
  #quiz .answer{font-size:11.5px;padding:12px 10px;}
  #result .result-shell{padding-left:5px!important;padding-right:5px!important;}
  #result .result-card{padding-left:9px!important;padding-right:9px!important;}
}
@media(prefers-reduced-motion:reduce){
  #start .start-copy .cta,#start .start-copy .cta:hover{transition:none;transform:none;}
  .answer{transition:none!important;}
}



/* FINAL APERTURE FIX: the asset canvas is square, but the ornate frame's
   transparent viewing window is oval. This rule is intentionally in the LAST
   stylesheet so older square/no-clip overrides cannot leak the portrait outside. */
#result .result-card .result-portrait-stage img#resultPortrait {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 44% !important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  border-radius: 0 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  z-index: 2 !important;
  overflow: hidden !important;
  transform: none !important;
  filter: none !important;
}
#result .result-card .result-portrait-stage img.result-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  clip-path: none !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

/* v7 cache marker: final aperture rules live in index.html after all linked CSS. */

/* Dynamic trait reading panel on the final reveal. */
#result .trait-panel{border-color:rgba(217,183,110,.38)!important;background:radial-gradient(ellipse at 50% 0%,rgba(154,117,203,.13),transparent 60%),linear-gradient(135deg,rgba(20,17,32,.96),rgba(9,10,20,.97))!important;}
#result .trait-reading{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:left;}
#result .trait-row{min-width:0;padding:13px;border:1px solid rgba(217,183,110,.18);border-radius:10px;background:rgba(5,7,16,.46);}
#result .trait-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:9px;}
#result .trait-name{font-size:10px;font-weight:800;letter-spacing:.06em;color:#eee3cc;}
#result .trait-value{font:700 15px Cinzel,Georgia,serif;color:#e5c77d;white-space:nowrap;}
#result .trait-meter{height:5px;border-radius:99px;overflow:hidden;background:rgba(217,183,110,.13);}
#result .trait-meter>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8970b8,#e5c77d);box-shadow:0 0 12px rgba(217,183,110,.22);}
#result .trait-desc{margin:9px 0 0;color:#bdb2c9;font-size:10px;line-height:1.6;}
#result .trait-summary{margin:14px 0 0;padding:12px 14px;border-left:2px solid #d9b76e;background:rgba(217,183,110,.06);color:#d8c9ad;font-size:11px;line-height:1.7;text-align:left;}
@media(max-width:760px){#result .trait-reading{grid-template-columns:1fr;gap:8px;}#result .trait-row{padding:11px;}#result .trait-row-top{margin-bottom:7px;}#result .trait-desc{font-size:10px;}#result .trait-summary{font-size:10px;}}