html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

@media (hover: none) {
  .option:hover:not(.selected) {
    transform: none;
    border-color: var(--line);
    background: #0a1727;
    color: #d8e1eb;
  }
}

body {
  min-height: 100dvh;
  overflow-wrap: anywhere;
}

button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: none) {
  .option:hover { transform: none; }
}

@media (max-width: 800px) {
  body { background: radial-gradient(circle at 50% 0, #102a43 0, transparent 28%), var(--bg); }
  .ambient { display: none; }
  .topbar {
    height: 60px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    position: relative;
    z-index: 2;
  }
  .brand { gap: 9px; font-size: .94rem; }
  .brand-mark { width: 30px; height: 30px; border-radius: 7px; }
  .shell { width: min(calc(100% - 28px), 680px); }
  .view { min-height: calc(100dvh - 116px); padding: 28px 0 44px; }
  .hero-card { padding: 10px 0; }
  .hero-card h1 { font-size: clamp(2.35rem, 11vw, 3.65rem); margin: 12px 0 18px; letter-spacing: -.045em; }
  .hero-copy { font-size: 1rem; line-height: 1.75; }
  .feature-row { gap: 10px; margin: 28px 0 30px; }
  .feature-row div { flex: 1; min-width: 0; padding: 12px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(13,26,43,.72); }
  .feature-row strong { font-size: 1.2rem; }
  .primary-btn, .secondary-btn { width: 100%; min-height: 56px; }
  .micro { text-align: center; }
  .setup-panel { padding: 24px 18px; border-radius: 20px; }
  .setup-panel h2 { font-size: 1.65rem; line-height: 1.3; }
  .setup-panel > p { font-size: .92rem; }
  .choice { min-height: 58px; padding: 10px; font-size: .94rem; }
  .test-head { margin-bottom: 16px; gap: 12px; position: sticky; top: 0; padding: 8px 0; background: linear-gradient(var(--bg) 72%, transparent); z-index: 3; }
  .icon-btn { width: 48px; height: 48px; flex: 0 0 48px; }
  .question-card { padding: 26px 18px; min-height: 0; border-radius: 20px; }
  .question-card h2 { font-size: 1.35rem; line-height: 1.55; margin: 14px 0 24px; }
  .option { min-height: 68px; padding: 14px; font-size: .96rem; line-height: 1.55; }
  .option:active { transform: scale(.99); border-color: var(--cyan); }
  .option-key { flex-basis: 34px; height: 34px; margin-right: 12px; }
  .result-top { align-items: center; margin-bottom: 24px; gap: 16px; }
  .result-top h1 { font-size: clamp(2.15rem, 10vw, 3.2rem); letter-spacing: -.045em; }
  .type-emblem { width: 82px; height: 82px; min-width: 82px; border-radius: 22px; font-size: 2.1rem; }
  .result-grid .panel, .champion-panel { padding: 22px 18px; border-radius: 20px; }
  .panel-title { align-items: flex-start; }
  .champion-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "rank rank" "icon detail"; column-gap: 14px; align-items: center; padding: 17px; }
  .champion-rank { grid-area: rank; }
  .champion-icon { grid-area: icon; margin: 10px 0 0; }
  .champion-card h4 { grid-area: detail; align-self: start; margin-top: 10px; }
  .champion-card p { grid-area: detail; align-self: end; margin: 30px 0 2px; }
  .result-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .disclaimer { padding: 0 8px; }
  footer { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); line-height: 1.6; }
}

@media (max-width: 480px) {
  .shell { width: calc(100% - 24px); }
  .eyebrow, .small-label, .step-label, .question-tag { letter-spacing: .13em; }
  .feature-row { gap: 7px; }
  .feature-row div { padding: 10px 7px; }
  .feature-row span { font-size: .72rem; }
  .choice-grid, .choice-grid.compact { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 6px; }
  .result-top { display: flex; }
  .type-emblem { display: grid; width: 68px; height: 68px; min-width: 68px; border-radius: 19px; font-size: 1.8rem; }
  .result-grid .panel, .champion-panel { padding: 20px 16px; }
  .panel-title { flex-wrap: wrap; }
  .panel-title > .muted { width: 100%; }
  .result-actions { grid-template-columns: 1fr; }
  .result-actions .primary-btn { order: -1; }
}

@media (max-width: 360px) {
  .brand { font-size: .86rem; }
  .hero-card h1 { font-size: 2.15rem; }
  .feature-row strong { font-size: 1.05rem; }
  .feature-row span { font-size: .68rem; }
  .question-card { padding: 22px 14px; }
  .option { padding: 12px; }
  .result-top { display: block; }
  .type-emblem { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}