/* =========================================================================
   Diagnostic IA — styles
   Fond sombre + halo chaud · orange #FF681D · iridescence orange/bleu/violet
   Chakra Petch (titres/UI) · Instrument Serif italique (contraste) · Poppins (texte)
   ========================================================================= */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --bg:#07060a;--bg2:#0e0b0a;--ink:#f7efe7;--muted:#a8978b;--dim:#6f6259;
  --orange:#FF681D;--orange-2:#FFB36B;--orange-d:#b8410b;--violet:#D98BFF;--blue:#7fc4ff;--indigo:#7C6BFF;
  --line:rgba(255,190,150,.12);--line-2:rgba(255,190,150,.22);
  --panel:rgba(20,15,12,.72);--panel-2:rgba(30,22,18,.85);
  --irid:linear-gradient(100deg,#FF681D 0%,#FFB36B 22%,#D98BFF 46%,#7fc4ff 64%,#7C6BFF 78%,#FF681D 100%);
  --irid-c:conic-gradient(from var(--a),#FF681D,#FFB36B,#D98BFF,#7fc4ff,#7C6BFF,#FF681D);
  --f-title:'Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  --f-serif:'Instrument Serif',Georgia,serif;
  --f-body:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --snap:cubic-bezier(.2,.9,.3,1.25);
  --gutter:clamp(16px,3.2vw,44px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{min-height:100svh;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--orange-2);outline-offset:3px;border-radius:8px}
em{font-style:normal}

/* ------------------------------------------------------------ BACKGROUND */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(70% 55% at 50% 42%,rgba(255,104,29,.16),transparent 70%),
  radial-gradient(40% 40% at 92% 8%,rgba(124,107,255,.10),transparent 70%),
  radial-gradient(40% 45% at 4% 96%,rgba(127,196,255,.07),transparent 70%),var(--bg)}
.bg-halo{position:absolute;left:50%;top:44%;width:min(120vw,1200px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,120,45,.22),rgba(255,104,29,.08) 45%,transparent 72%);animation:breathe 7s ease-in-out infinite}
body[data-screen="result"] .bg-halo{top:22%}
.bg-grain{position:absolute;inset:-50%;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
#app{position:relative;z-index:1}

/* ------------------------------------------------------------ SHARED UI */
.irid{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0;background:var(--irid);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite;padding-right:.08em}
@keyframes shimmer{to{background-position:-250% 0}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-title);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--orange-2)}
.led{width:8px;height:8px;background:var(--orange);box-shadow:0 0 10px var(--orange),0 0 22px rgba(255,104,29,.6);animation:blinkLed 1.4s steps(2) infinite}
@keyframes blinkLed{50%{opacity:.35}}
.mini{display:block;font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--orange-2);margin-bottom:8px}

.btn-primary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 22px;border-radius:14px;background:var(--orange);color:#1a0b04;
  font-family:var(--f-title);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;border-bottom:4px solid var(--orange-d);
  box-shadow:0 10px 30px -8px rgba(255,104,29,.6),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .25s var(--snap),box-shadow .25s,border-width .1s;overflow:hidden;white-space:nowrap}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px -8px rgba(255,104,29,.8),0 0 0 3px rgba(255,179,107,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:active{transform:translateY(2px) scale(.98);border-bottom-width:1px;transition-duration:.05s}
.btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%)}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .6s ease}
.btn-arrow{display:inline-block;transition:transform .3s var(--bounce)}
.btn-primary:hover .btn-arrow{transform:translate(3px,-3px) rotate(8deg) scale(1.2)}
.btn-primary.loading{pointer-events:none;background:repeating-linear-gradient(-45deg,var(--orange) 0 12px,#ff8a45 12px 24px);background-size:34px 34px;animation:stripes .5s linear infinite}
@keyframes stripes{to{background-position:34px 0}}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);font-family:var(--f-title);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.02);transition:transform .25s var(--snap),border-color .2s,background .2s}
.btn-ghost:hover:not(:disabled){transform:translateY(-2px);border-color:var(--orange);background:rgba(255,104,29,.08)}
.btn-ghost:active:not(:disabled){transform:scale(.96)}
.btn-ghost:disabled{opacity:.3}

.snd{position:fixed;top:14px;right:14px;z-index:40;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:rgba(12,9,8,.75);font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--orange-2);transition:border-color .2s,transform .2s var(--snap)}
.snd svg{width:16px;height:16px}
.snd:hover{border-color:var(--orange);transform:translateY(-1px)}
.snd.off{color:var(--dim)}

/* ------------------------------------------------------------ TV + HALO */
.tv-slot{position:relative;width:100%;height:100%}
.tv-mount{position:absolute;inset:0;touch-action:manipulation}
.tv-mount canvas{display:block;width:100%!important;height:100%!important}
.tv-halo{position:absolute;left:50%;top:50%;width:92%;aspect-ratio:1;max-height:110%;translate:-50% -48%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,110,40,.34),rgba(255,104,29,.12) 50%,transparent 75%)}
.tv-halo::before{content:'';position:absolute;inset:6%;border-radius:50%;background:conic-gradient(#FF681D,#FFB36B,#D98BFF,#7fc4ff,#7C6BFF,#FF681D);opacity:.22;
  -webkit-mask:radial-gradient(closest-side,transparent 62%,#000 70%,transparent 80%);mask:radial-gradient(closest-side,transparent 62%,#000 70%,transparent 80%);animation:rot 14s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes spin{to{--a:360deg}}

.speech{position:absolute;left:50%;top:2%;z-index:3;transform:translateX(-50%);max-width:min(300px,86%);padding:10px 14px;border-radius:12px;
  background:#120c09;border:2px solid var(--orange);font-family:var(--f-title);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;
  box-shadow:4px 4px 0 rgba(255,104,29,.35),0 10px 30px rgba(0,0,0,.5)}
.speech.on{opacity:1}
.speech::after{content:'';position:absolute;left:50%;bottom:-9px;width:14px;height:14px;background:#120c09;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:translateX(-50%) rotate(45deg)}

/* ------------------------------------------------------------ FX LAYER */
#fx{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}
#fx .px{position:absolute;margin:-4px 0 0 -4px;border-radius:1px;will-change:transform}
#fx .ray{position:absolute;height:3px;margin-top:-1.5px;border-radius:3px;transform-origin:0 50%}
.float-txt{position:absolute;font-family:var(--f-title);font-weight:700;font-size:18px;letter-spacing:.06em;color:var(--orange-2);text-shadow:0 0 12px rgba(255,104,29,.8),2px 2px 0 #3a1406;white-space:nowrap}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,179,107,.45),rgba(217,139,255,.18) 60%,transparent);transform:scale(0);animation:ripple .65s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ------------------------------------------------------------ TOOLTIP */
#tip{position:fixed;z-index:60;pointer-events:none;min-width:210px;max-width:280px;padding:12px 14px;border-radius:14px;background:rgba(14,10,8,.96);border:1px solid rgba(255,140,80,.4);
  box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 4px rgba(255,104,29,.08),0 0 30px rgba(217,139,255,.12);opacity:0;transform-origin:50% 100%;font-size:12.5px;line-height:1.35}
#tip.on{opacity:1}
.tip-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--f-title);font-weight:600;font-size:14px;letter-spacing:.03em}
.tip-head b{font-size:22px;color:var(--orange-2);text-shadow:0 0 12px rgba(255,104,29,.5)}
.tip-level{margin-top:2px;color:var(--muted);font-size:12px}
.tip-list{list-style:none;margin-top:10px;padding-top:8px;border-top:1px dashed var(--line-2);display:grid;gap:6px}
.tip-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#e4d6ca}
.lvl{display:inline-flex;gap:3px;flex:none}
.lvl i{width:9px;height:9px;background:#33271f;border-radius:1px}
.lvl i.on{background:var(--orange);box-shadow:0 0 6px rgba(255,104,29,.7)}
.lvl i.on:nth-child(3){background:var(--orange-2)}
.lvl i.on:nth-child(4){background:var(--violet);box-shadow:0 0 6px rgba(217,139,255,.7)}

/* ================================================================ INTRO */
.intro{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,60px);padding:72px var(--gutter) 40px;max-width:1360px;margin:0 auto}
.intro-copy{max-width:620px}
.title{margin:18px 0 18px;font-family:var(--f-title);font-weight:700;font-size:clamp(40px,6.2vw,86px);line-height:.96;letter-spacing:-.02em}
.title .irid{font-size:1.1em;line-height:.8}
.lead{max-width:520px;color:#d9ccc1;font-size:clamp(15px,1.2vw,17px)}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 28px}
.facts li{display:flex;align-items:baseline;gap:7px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:13px;color:var(--muted);transition:transform .25s var(--snap),border-color .2s}
.facts li:hover{transform:translateY(-3px) rotate(-1deg);border-color:var(--orange)}
.facts b{font-family:var(--f-title);font-size:18px;color:var(--ink)}
.gate{display:grid;gap:12px;padding:20px;border-radius:20px;background:var(--panel);border:1px solid var(--line);position:relative}
.gate>label:first-child{font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--orange-2)}
.input-row{display:flex;gap:10px}
.input-row input{flex:1;min-width:0;height:54px;padding:0 16px;border-radius:14px;border:1px solid var(--line-2);background:#0c0908;color:var(--ink);font:500 15px var(--f-body);outline:none;transition:border-color .2s,box-shadow .25s}
.input-row input::placeholder{color:#6f6259}
.input-row input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,104,29,.18),0 0 24px rgba(217,139,255,.18)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);cursor:pointer;line-height:1.45}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.check{flex:none;width:20px;height:20px;margin-top:1px;border-radius:5px;border:2px solid var(--line-2);background:#0c0908;display:grid;place-items:center;transition:transform .3s var(--bounce),background .15s,border-color .15s}
.check::after{content:'';width:9px;height:5px;border-left:2.5px solid #1a0b04;border-bottom:2.5px solid #1a0b04;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .3s var(--bounce)}
.consent input:checked+.check{background:var(--orange);border-color:var(--orange);transform:scale(1.12)}
.consent input:checked+.check::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.consent input:focus-visible+.check{outline:2px solid var(--orange-2);outline-offset:2px}
.trap{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-note{font-size:12px;color:var(--dim)}
.error{min-height:1em;font-size:13px;font-weight:500;color:#ff8a6a}
.error:empty{display:none}
.intro-stage{position:relative;height:min(78svh,700px);min-height:420px}
.intro-stage .tv-slot{position:absolute;inset:6% -4% 10%}
.intro-stage .speech{top:0}
.tv-hint{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-family:var(--f-title);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;animation:hint 2.4s ease-in-out infinite}
@keyframes hint{50%{color:var(--orange-2)}}

/* ================================================================ QUIZ */
.quiz{height:100svh;min-height:600px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(8px,1.6vh,18px);padding:14px var(--gutter) 16px;max-width:1440px;margin:0 auto}
.hud{display:flex;align-items:center;gap:18px;padding-right:110px}
.zones{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.zone{display:grid;gap:6px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.015);transition:border-color .3s,background .3s,transform .3s var(--snap)}
.zone-name{display:flex;align-items:center;gap:6px;font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zone-idx{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:#1c1512;font-size:10px;color:var(--muted);flex:none}
.zone.cur{border-color:rgba(255,104,29,.55);background:rgba(255,104,29,.07);transform:translateY(-1px)}
.zone.cur .zone-name{color:var(--ink)}
.zone.cur .zone-idx{background:var(--orange);color:#1a0b04}
.zone.done .zone-name{color:var(--orange-2)}
.zone.done .zone-idx{background:transparent;color:var(--orange-2);font-size:0}
.zone.done .zone-idx::after{content:'✓';font-size:12px}
.pips{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pips i{height:6px;border-radius:2px;background:#241b16;transform:skewX(-18deg);transition:background .25s,box-shadow .25s}
.pips i.done{background:var(--orange);box-shadow:0 0 10px rgba(255,104,29,.6)}
.zone.done .pips i{background:linear-gradient(90deg,var(--orange),var(--orange-2),var(--violet));box-shadow:0 0 10px rgba(217,139,255,.4)}
.pips i.cur:not(.done){background:#4a3325;animation:pipBlink .9s steps(2) infinite}
@keyframes pipBlink{50%{background:rgba(255,104,29,.55)}}
.hud-meta{display:flex;gap:10px;align-items:center;font-family:var(--f-title);font-weight:600;letter-spacing:.08em}
.hud-q,.hud-xp{display:inline-flex;align-items:baseline;gap:3px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);align-items:center;font-size:12px;color:var(--muted);white-space:nowrap}
.hud-q b{font-size:18px;color:var(--ink);margin-left:3px}
.hud-q small{font-size:12px}
.hud-xp{color:var(--orange-2);border-color:rgba(255,104,29,.35);background:rgba(255,104,29,.07)}
.hud-xp b{font-size:16px;margin-right:4px;min-width:3.2ch;text-align:right;display:inline-block}

.q-head{text-align:center;display:grid;justify-items:center;gap:8px}
.q-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:99px;border:1px solid rgba(255,104,29,.4);background:rgba(255,104,29,.08);font-family:var(--f-title);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-2)}
.chip-zone{padding:2px 7px;border-radius:99px;background:var(--orange);color:#1a0b04}
.chip-dot{opacity:.5}.chip-sub{color:var(--ink)}
.q-title{max-width:980px;min-height:2.16em;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;column-gap:.26em;font-family:var(--f-title);font-weight:600;font-size:clamp(24px,3.1vw,44px);line-height:1.08;letter-spacing:-.01em;outline:none;min-height:1.1em}
.q-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin-bottom:-.12em}
.q-title .w>span{display:inline-block;will-change:transform}
.q-sub{font-size:13.5px;color:var(--muted)}

.arena{position:relative;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.35fr) minmax(0,1fr);grid-template-rows:1fr 1fr;grid-template-areas:"a1 tv a2" "a3 tv a4";gap:clamp(10px,1.6vw,22px) clamp(12px,2vw,28px);align-items:center}
.tv-wrap{grid-area:tv;position:relative;height:100%;min-height:260px}
.tv-wrap .tv-slot{position:absolute;inset:8% -2% -2%}
.ans[style*="a1"],.ans[style*="a2"]{align-self:end}.ans[style*="a3"],.ans[style*="a4"]{align-self:start}
.tv-wrap .speech{top:0}

/* Answer cards */
.ans{position:relative;display:block;width:100%;border-radius:18px;text-align:left;perspective:800px;isolation:isolate;will-change:transform}
.ans::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,rgba(255,190,150,.28),rgba(255,190,150,.06) 50%,rgba(255,190,150,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;transition:opacity .2s}
.ans::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:2px;background:var(--irid-c);opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;transition:opacity .25s}
.ans-body{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:clamp(14px,1.6vw,20px) clamp(14px,1.4vw,20px);border-radius:inherit;overflow:hidden;
  background:linear-gradient(160deg,rgba(42,30,24,.92),rgba(15,11,10,.92));box-shadow:0 14px 34px -14px rgba(0,0,0,.8);
  transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--snap),box-shadow .3s,background .3s}
.ans-body::before{content:'';position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,140,70,.16),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}
.ans-key{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#1a1310;border:1.5px solid var(--line-2);border-bottom-width:4px;font-family:var(--f-title);font-weight:700;font-size:16px;color:var(--muted);transition:all .25s var(--bounce)}
.ans-text{position:relative;font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.42;color:#eadfd5}
.ans-go{position:relative;font-family:var(--f-title);font-size:18px;color:var(--dim);transition:transform .3s var(--bounce),color .2s}
@media (hover:hover){
  .ans:hover::after{opacity:.75;animation:spin 3.2s linear infinite}
  .ans:hover .ans-body{box-shadow:0 20px 40px -14px rgba(0,0,0,.85),0 0 30px -6px rgba(255,104,29,.35)}
  .ans:hover .ans-body::before{opacity:1}
  .ans:hover .ans-key{color:#1a0b04;background:var(--orange);border-color:var(--orange-d);transform:translateY(-2px) rotate(-4deg)}
  .ans:hover .ans-go{color:var(--orange-2);transform:translate(3px,-3px) scale(1.25)}
}
.ans.press .ans-body{transform:perspective(800px) scale(.955);transition-duration:.08s}
.ans.press .ans-key{border-bottom-width:1.5px;transform:translateY(2px)}
.ans.selected::after{opacity:1;animation:spin 3.2s linear infinite}
.ans.selected .ans-body{background:linear-gradient(160deg,rgba(90,40,18,.95),rgba(28,15,12,.95));box-shadow:0 0 0 1px rgba(255,104,29,.4),0 0 36px -2px rgba(255,104,29,.5),0 0 70px -10px rgba(217,139,255,.4)}
.ans.selected .ans-key{color:#1a0b04;background:var(--orange);border-color:var(--orange-d)}
.ans.selected .ans-go{color:var(--orange-2)}
.ans.selected .ans-text{color:#fff}

.zone-banner{position:absolute;inset:0;z-index:6;display:grid;place-items:center;pointer-events:none}
.zb-inner{position:relative;display:grid;justify-items:center;gap:6px;padding:26px 40px 24px;border-radius:24px;background:rgba(14,10,8,.94);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 80px rgba(255,104,29,.35)}
.zb-inner::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2.5px;background:var(--irid-c);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 2s linear infinite}
.zb-k{font-family:var(--f-title);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--orange-2)}
.zb-inner strong{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(40px,5vw,64px);line-height:1;background:var(--irid);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 3s linear infinite}
.zb-next{font-size:13px;color:var(--muted)}

.q-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.keys{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--dim)}
kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:5px;border:1px solid var(--line-2);border-bottom-width:3px;font:600 11px var(--f-title);color:var(--muted)}

/* ================================================================ RESULT */
.result{max-width:1200px;margin:0 auto;padding:70px var(--gutter) 60px}
.r-hero{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(0,1.2fr) minmax(250px,.8fr);gap:clamp(16px,2.5vw,32px);align-items:center}
.r-tv{position:relative;height:clamp(300px,34vw,400px)}
.r-tv .tv-slot{position:absolute;inset:10% -8% 0}
.r-id .eyebrow{display:flex}
.r-tag{display:inline-block;margin:16px 0 8px;padding:5px 10px;border-radius:8px;background:var(--orange);color:#1a0b04;font-family:var(--f-title);font-weight:700;font-size:12px;letter-spacing:.16em;box-shadow:4px 4px 0 rgba(255,104,29,.3)}
.r-name{font-family:var(--f-title);font-weight:700;font-size:clamp(34px,4.2vw,58px);line-height:1;letter-spacing:-.02em}
.r-name .irid{font-size:1.12em}
.r-sum{margin-top:14px;color:#d9ccc1;max-width:520px}
.r-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.badge{display:grid;gap:1px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:transform .3s var(--snap),border-color .2s}
.badge:hover{transform:translateY(-3px) rotate(-1.5deg);border-color:var(--orange)}
.badge small{font-family:var(--f-title);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.badge b{font-family:var(--f-title);font-size:15px}

.panel{position:relative;border-radius:22px;background:var(--panel);border:1px solid var(--line);padding:clamp(16px,2vw,24px);box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.panel-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.hint{color:var(--dim);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.hint::before{content:'◆ ';color:var(--orange);animation:blinkLed 1.2s steps(2) infinite}
.pre{opacity:0}

.gauge-wrap{position:relative;width:min(100%,260px);margin:0 auto}
.gauge{display:block;width:100%;overflow:visible}
.g-track{fill:none;stroke:#241b16;stroke-width:14;stroke-linecap:round}
.g-fill{fill:none;stroke:url(#gg);stroke-width:14;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,104,29,.6))}
.g-star{transform-box:fill-box;transform-origin:center}
.g-star circle{fill:#1a120e;stroke:rgba(255,190,150,.35);stroke-width:1.5}
.g-star path{fill:var(--dim)}
.g-star.on circle{fill:var(--orange);stroke:#fff3e6}
.g-star.on path{fill:#1a0b04}
.g-seg{fill:none;stroke:rgba(255,190,150,.12);stroke-width:4;stroke-linecap:round;transition:stroke .2s,stroke-width .3s var(--bounce)}
.g-seg.cur{stroke:var(--orange-2)}
.g-seg.hover{stroke:var(--violet);stroke-width:9}
.g-tick{stroke:rgba(255,190,150,.35);stroke-width:2}
.g-hit{fill:none;stroke:transparent;stroke-width:44;cursor:help;pointer-events:stroke}
.g-center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;pointer-events:none;padding-top:6px}
.g-center strong{font-family:var(--f-title);font-weight:700;font-size:60px;line-height:1;text-shadow:0 0 30px rgba(255,104,29,.45)}
.g-center small{font-family:var(--f-title);color:var(--muted);font-size:13px}
.g-level{margin-top:6px;font-family:var(--f-serif);font-style:italic;font-size:18px;color:var(--orange-2)}

.r-sec{margin-top:clamp(40px,6vw,70px)}
.sec-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sec-title span{font-family:var(--f-title);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--orange-2)}
.sec-title h2{font-family:var(--f-title);font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:-.02em}
.r-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px}

.radar{display:block;width:100%;max-width:440px;margin:0 auto;overflow:visible}
.radar .ring{fill:none;stroke:rgba(255,190,150,.11)}
.radar .ring-lbl{fill:var(--dim);font:500 9px var(--f-title)}
.radar .axis{stroke:rgba(255,190,150,.14);transition:stroke .2s}
.radar .axis.hl{stroke:var(--orange);stroke-width:2}
.radar .shape{fill:url(#rg);stroke:url(#rs);stroke-width:2.5;stroke-linejoin:round;filter:drop-shadow(0 0 12px rgba(255,104,29,.35))}
.radar .axis-lbl{fill:#e8dbcf;font:600 12.5px var(--f-title);letter-spacing:.03em;transition:fill .2s,opacity .2s}
.radar .axis-lbl.hl{fill:var(--orange-2)}
.rpt .dot,.cpt .dot{fill:#ffd6a8;stroke:var(--orange);stroke-width:2.5;transform-box:fill-box;transform-origin:center;transition:transform .35s var(--bounce)}
.rpt .halo,.cpt .halo{fill:var(--orange);opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .2s}
.rpt.hl .dot,.cpt.on .dot,.cpt.hl .dot{transform:scale(1.7)}
.rpt.hl .halo,.cpt.on .halo{opacity:.28;animation:pulse 1s ease-out infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:.5}100%{transform:scale(1.5);opacity:0}}
.radar .wedge{fill:transparent;cursor:pointer}
.dim-out{opacity:.35;transition:opacity .25s}
.rpt,.cpt,.axis-lbl,.bar-row,.insight,.curve-labels span{transition:opacity .25s}

.bars-panel{display:grid;align-content:start;gap:4px}
.bar-row{padding:10px 12px;border-radius:14px;cursor:pointer;transition:background .25s,opacity .25s,transform .3s var(--snap);outline:none}
.bar-row:hover,.bar-row.open,.bar-row:focus-visible{background:rgba(255,104,29,.07);transform:translateX(4px)}
.bar-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-family:var(--f-title);font-weight:600;font-size:14px;letter-spacing:.02em}
.bar-label small{color:var(--dim);margin-right:8px;font-size:11px}
.bar-val{font-size:18px;color:var(--orange-2);font-variant-numeric:tabular-nums;transition:transform .3s var(--bounce)}
.bar-row.open .bar-val{transform:scale(1.2)}
.bar-track{position:relative;height:12px;border-radius:99px;background:#221914;overflow:hidden}
.bar-track .tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.08);z-index:1}
.bar-fill{position:absolute;inset:0;border-radius:99px;clip-path:inset(0 100% 0 0 round 99px);background:linear-gradient(90deg,#FF681D,#FFB36B 55%,#D98BFF 85%,#7fc4ff)}
.bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-110%)}
.bar-row.open .bar-fill::after{animation:sweep .8s ease-out}
.bar-row.open .bar-fill{filter:drop-shadow(0 0 8px rgba(255,104,29,.8)) brightness(1.15)}
@keyframes sweep{to{transform:translateX(110%)}}
.bar-detail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:0;overflow:hidden;transition:max-height .35s var(--snap),margin .3s}
.bar-row.open .bar-detail{max-height:80px;margin-top:10px}
.bd{display:grid;gap:5px;padding:7px 8px;border-radius:9px;background:rgba(0,0,0,.3);border:1px solid var(--line);font-size:11px;color:var(--muted)}
.bd em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.insights{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.insight{position:relative;padding:24px;border-radius:22px;background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--snap),border-color .25s,opacity .25s}
.insight:hover{transform:translateY(-4px) rotate(-.4deg);border-color:rgba(255,104,29,.5)}
.insight.orange{background:linear-gradient(150deg,rgba(255,104,29,.2),rgba(20,15,12,.8) 60%)}
.ins-k{font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--orange-2)}
.insight h3{margin:10px 0 8px;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1}
.insight p{color:#d4c7bc;max-width:46ch}
.ins-score{position:absolute;right:20px;top:18px;font-family:var(--f-title);font-weight:700;font-size:28px;color:rgba(255,179,107,.28)}

.traj-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:10px;flex-wrap:wrap}
.traj-head h2{font-family:var(--f-title);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.05}
.traj-head p{max-width:420px;font-size:13px;color:var(--muted)}
.curve{display:block;width:100%;height:auto;overflow:visible}
.curve .grid{stroke:rgba(255,190,150,.07)}
.curve .grid-lbl{fill:var(--dim);font:500 10px var(--f-title)}
.curve .avg{stroke:rgba(217,139,255,.45);stroke-dasharray:4 6}
.curve .avg-lbl{fill:var(--violet);font:600 11px var(--f-title);letter-spacing:.04em}
.curve .area{fill:url(#ca)}
.curve .line{fill:none;stroke:url(#cl);stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(255,104,29,.55))}
.curve .cross{stroke:rgba(255,179,107,.7);stroke-width:1.5;stroke-dasharray:3 4;opacity:0;transition:transform .45s var(--snap),opacity .2s}
.curve.active .cross{opacity:1}
.curve .cval{fill:var(--ink);font:700 13px var(--f-title);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .35s var(--bounce)}
.curve .cpt.on .cval{opacity:1;transform:translateY(-4px)}
.curve .hit{fill:transparent;cursor:crosshair}
.curve-labels{position:relative;height:18px;margin:4px 0 0;font-family:var(--f-title);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.curve-labels span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;cursor:default;transition:color .2s,opacity .25s}
.curve-labels span.hl{color:var(--orange-2)}
.curve-labels b{font-weight:inherit}.curve-labels .short{display:none}

.bottom{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
.disclaimer{margin-top:22px;font-size:12px;color:var(--dim);text-align:center}

/* ============================================================ FALLBACK TV */
.tv-fallback{display:grid;place-items:center}
.fb-tv{position:relative;width:min(92%,440px);aspect-ratio:1.45;display:grid;grid-template-columns:1fr 22%;gap:5%;padding:6%;border-radius:28px;background:linear-gradient(160deg,#2c221c,#120e0c);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 30px 60px rgba(0,0,0,.6),-10px 0 40px rgba(124,107,255,.15),10px 0 40px rgba(127,196,255,.12)}
.fb-screen{position:relative;border-radius:18px;overflow:hidden;background:#000;box-shadow:inset 0 0 30px rgba(0,0,0,.9),0 0 0 3px #ff8a4a55;cursor:pointer}
.fb-screen canvas{width:100%;height:100%;object-fit:contain;display:block}
.fb-screen::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px);pointer-events:none}
.fb-screen.glitching canvas,.fb-glitch .fb-screen canvas{animation:fbGlitch .45s steps(3) 1}
@keyframes fbGlitch{0%{transform:translate(0);filter:none}33%{transform:translate(-4px,1px) skewX(4deg);filter:drop-shadow(3px 0 #f0f) drop-shadow(-3px 0 #0ff)}66%{transform:translate(3px,-1px);filter:hue-rotate(40deg)}}
.fb-panel{display:grid;align-content:center;gap:14%;justify-items:center}
.fb-panel i{width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a4a40,#1a1310);border:2px solid #b8b0a8}
.fb-panel b{width:12px;height:12px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange)}
.fb-jump{animation:fbJump .6s var(--bounce)}.fb-shake{animation:fbShake .4s}.fb-nod{animation:fbNod .5s var(--bounce)}
@keyframes fbJump{30%{transform:translateY(-14%) scaleY(1.05)}60%{transform:translateY(0) scaleY(.92)}}
@keyframes fbShake{20%,60%{transform:translateX(-4%)}40%,80%{transform:translateX(4%)}}
@keyframes fbNod{40%{transform:rotate(-4deg) translateY(-3%)}}

/* ============================================================ RESPONSIVE */
@media (max-width:1100px){
  .r-hero{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr)}
  .r-score{grid-column:1/-1}
  .zone-name{font-size:10px}
}
@media (max-width:860px){
  body{font-size:14.5px}
  .intro{grid-template-columns:1fr;padding-top:60px;gap:8px}
  .intro-stage{order:-1;height:min(46svh,400px);min-height:280px}
  .intro-stage .tv-slot{inset:13% 0 15%}
  .tv-hint{bottom:4px}
  .intro-stage{margin-bottom:10px}
  .input-row{flex-direction:column}
  .btn-primary{width:100%}
  .quiz{height:auto;min-height:100svh;grid-template-rows:auto auto auto auto;padding-top:60px;gap:12px}
  .hud{position:fixed;top:0;left:0;right:0;z-index:30;padding:10px 120px 10px 14px;background:linear-gradient(#07060a 70%,transparent)}
  .zones{gap:4px}
  .zone{padding:0;border:0;background:none}
  .zone-name{display:none}
  .zone.cur{transform:none;background:none}
  .hud-meta{display:none}
  .snd{top:8px;right:10px}
  .q-title{font-size:clamp(21px,5.8vw,28px)}
  .q-sub{display:none}
  .arena{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"tv" "a1" "a2" "a3" "a4";gap:9px}
  .tv-wrap{height:min(34svh,280px);min-height:220px;margin-bottom:12px}
  .tv-wrap .tv-slot{inset:14% 0 0}
  .speech{font-size:12.5px;padding:7px 11px}
  .ans{border-radius:15px}
  .ans-body{gap:12px;padding:12px 14px}
  .ans-key{width:30px;height:30px;font-size:14px}
  .ans-go{display:none}
  .keys{display:none}
  .q-foot{justify-content:center;padding-bottom:10px}
  .zb-inner{padding:20px 24px}
  .result{padding-top:60px}
  .r-hero{grid-template-columns:1fr}
  .r-tv{height:min(42svh,320px)}
  .r-id{text-align:center}
  .r-id .r-sum{margin-inline:auto}
  .r-badges{justify-content:center}
  .r-grid,.insights{grid-template-columns:1fr}
  .next{flex-direction:column;text-align:center}
  .bottom{flex-direction:column}
  .bottom .btn-ghost,.bottom .btn-primary{width:100%;justify-content:center}
  .curve-labels{font-size:10.5px}
  .curve-labels .full{display:none}.curve-labels .short{display:inline}
  #tip{min-width:180px}
}
@media (max-height:720px) and (min-width:861px){
  .q-sub{display:none}
  .ans-body{padding:12px 14px}
  .ans-text{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@media print{
  .bg,.snd,#fx,#tip,.r-tv,.bottom{display:none!important}
  body{background:#fff;color:#111}
  .panel,.insight,.next{background:#fff!important;border-color:#ddd;box-shadow:none;break-inside:avoid}
  .pre{opacity:1!important}
  .irid{color:#FF681D;-webkit-text-fill-color:#FF681D;background:none}
  .r-hero{grid-template-columns:1fr 1fr}
}

/* ============================================================ RESULT v2 */
.r-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 8px}
.r-tags .r-tag{margin:0}
.r-aug{position:relative;padding:5px 11px;border-radius:8px;font-family:var(--f-title);font-weight:700;font-size:12px;letter-spacing:.16em;color:#1a0b04;background:var(--irid);background-size:200% 100%;animation:shimmer 4s linear infinite;box-shadow:0 0 24px rgba(217,139,255,.45)}
.tick.aug{background:rgba(217,139,255,.55)!important;width:2px!important}

.palier{margin-top:14px;padding:12px 14px;border-radius:14px;border:1px dashed rgba(217,139,255,.35);background:rgba(217,139,255,.05);display:grid;gap:8px}
.palier p{font-size:12.5px;color:var(--muted)}
.palier p b{color:var(--ink)}
.pal-top{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-title);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pal-top b{color:var(--violet);letter-spacing:.08em;white-space:nowrap}
.pal-top span{white-space:nowrap}
.pal-track{height:8px;border-radius:99px;background:#221914;overflow:hidden}
.pal-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--orange),var(--orange-2),var(--violet));transform-origin:left;transform:scaleX(0)}
.palier.on{border:0;background:linear-gradient(135deg,rgba(255,104,29,.2),rgba(217,139,255,.18));position:relative}
.palier.on::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--irid-c);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 4s linear infinite;pointer-events:none}
.pal-badge{justify-self:start;font-family:var(--f-title);font-weight:700;font-size:15px;letter-spacing:.14em;background:var(--irid);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite}

/* FOMO statement: full orange slab, like the trailer's title cards */
.fomo{position:relative;margin-top:clamp(40px,6vw,70px);padding:clamp(28px,5vw,64px) clamp(22px,5vw,64px);border-radius:28px;background:var(--orange);color:#140803;overflow:hidden;
  background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.035) 0 2px,transparent 2px 14px);box-shadow:0 40px 90px -30px rgba(255,104,29,.6)}
.fomo-k{display:inline-block;padding:5px 10px;border-radius:8px;background:#140803;color:var(--orange);font-family:var(--f-title);font-weight:700;font-size:12px;letter-spacing:.18em}
.fomo-title{margin:18px 0 16px;font-family:var(--f-title);font-weight:700;font-size:clamp(34px,6.4vw,84px);line-height:.98;letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance}
.fomo-title>span{display:inline-block}
.fomo-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.12em;letter-spacing:0;color:#fff7ef;text-shadow:3px 3px 0 #140803;padding:0 .04em}
.fomo-sub{max-width:640px;font-size:clamp(15px,1.4vw,18px);font-weight:500;line-height:1.5}
.fomo-sub b{font-family:var(--f-title);font-weight:700;padding:1px 6px;border-radius:5px;background:#140803;color:var(--orange-2)}

/* Weekly mission: icon column (1/4) + mission (3/4) */
.mission{position:relative;display:grid;grid-template-columns:1fr 3fr;border-radius:24px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.mission-icon{display:grid;place-items:center;padding:24px 14px;background:linear-gradient(160deg,var(--orange),#e3500f);border-right:1px solid rgba(0,0,0,.2)}
.mission-icon svg{width:min(110px,70%);height:auto;filter:drop-shadow(5px 6px 0 rgba(0,0,0,.25));transition:transform .4s var(--bounce)}
.mission:hover .mission-icon svg{transform:rotate(-6deg) scale(1.06)}
.mission-icon .clip{fill:#fff4ea}
.mission-icon .clip-top{fill:#1a0b04}
.mission-icon .box{fill:none;stroke:#1a0b04;stroke-width:2.2}
.mission-icon .box.done{fill:#1a0b04}
.mission-icon .box.ghost{opacity:.35}
.mission-icon .tick{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14}
.shown .mission-icon .tick,.mission.shown .tick{animation:drawTick .5s .5s var(--snap) forwards}
@keyframes drawTick{to{stroke-dashoffset:0}}
.mission-icon .ln{fill:#1a0b04}.mission-icon .ln.dim{opacity:.3}
.mission-body{display:grid;align-content:center;gap:10px;padding:clamp(20px,3vw,34px)}
.mission-body .mini{margin:0}
.mission-body h2{font-family:var(--f-title);font-weight:600;font-size:clamp(20px,2.3vw,30px);line-height:1.18;text-wrap:balance}
.mission-check{display:inline-flex;align-items:center;gap:10px;margin-top:4px;font-family:var(--f-title);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--muted);cursor:pointer;justify-self:start;padding:8px 12px 8px 10px;border-radius:12px;border:1px solid var(--line-2);transition:border-color .2s,color .2s,background .2s}
.mission-check input{position:absolute;opacity:0;width:1px;height:1px}
.mission-check input:checked+.check{background:var(--orange);border-color:var(--orange);transform:scale(1.12)}
.mission-check input:checked+.check::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.mission-check input:focus-visible+.check{outline:2px solid var(--orange-2);outline-offset:2px}
.mission.accepted .mission-check{border-color:var(--orange);color:var(--ink);background:rgba(255,104,29,.1)}

/* Share row */
.share{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px;padding:16px 18px;border-radius:18px;border:1px solid var(--line)}
.share-k{font-family:var(--f-title);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.share-btns{display:flex;gap:8px;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:11px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink);text-decoration:none;font-family:var(--f-title);font-weight:600;font-size:13px;letter-spacing:.04em;transition:transform .25s var(--snap),background .2s,border-color .2s}
.share-btn svg{width:17px;height:17px}
.share-btn:hover{transform:translateY(-2px)}
.share-btn.in:hover{background:#0a66c2;border-color:#0a66c2}
.share-btn.x:hover{background:#000;border-color:#555}
.share-btn:not(.in):not(.x):hover{border-color:var(--orange);background:rgba(255,104,29,.1)}

/* Final CTA */
.cta{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);padding:clamp(24px,4vw,48px);border-radius:28px;background:radial-gradient(120% 140% at 0% 0%,rgba(255,104,29,.28),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(124,107,255,.2),transparent 60%),#120d0b}
.cta::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--irid-c);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 6s linear infinite;pointer-events:none}
.cta-k{font-family:var(--f-title);font-weight:700;font-size:12px;letter-spacing:.18em;color:var(--violet)}
.cta h2{margin:12px 0 12px;font-family:var(--f-title);font-weight:700;font-size:clamp(34px,4.6vw,60px);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.cta h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;background:var(--irid);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite;padding-right:.06em}
.cta-copy p{color:#d9ccc1;max-width:46ch}
.cta-list{list-style:none;display:grid;gap:8px;margin-top:18px}
.cta-list li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink)}
.cta-list li::before{content:'✦';color:var(--orange);font-size:13px}
.cta-form{display:grid;gap:8px;align-content:start;padding:20px;border-radius:20px;background:rgba(8,6,5,.6);border:1px solid var(--line)}
.cta-form label{font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-2)}
.cta-form label small{color:var(--dim);letter-spacing:.06em;text-transform:none;font-weight:500}
.cta-form input,.cta-form textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line-2);background:#0c0908;color:var(--ink);font:500 14.5px var(--f-body);outline:none;resize:vertical;transition:border-color .2s,box-shadow .25s}
.cta-form input:focus,.cta-form textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,104,29,.18)}
.cta-form textarea::placeholder{color:#6f6259}
.cta-form .btn-primary{margin-top:6px;width:100%}
.cta-note{font-size:11.5px;color:var(--dim)}
.cta-status{font-size:13px;font-weight:500}
.cta-status:empty{display:none}
.cta-status.ok{color:#9ff0b8}
.cta-status.err{color:#ff9a7a}
.cta-status a{color:var(--orange-2)}
.cta.sent .cta-form{border-color:rgba(159,240,184,.4)}
@media (max-width:860px){
  .r-tags{justify-content:center}
  .r-id .eyebrow{justify-content:center}
  .cta{grid-template-columns:1fr}
  .mission-icon{padding:18px 8px}
  .share{justify-content:center;text-align:center}
  .fomo{border-radius:22px}
}
@media print{.fomo{box-shadow:none}.cta,.share,.mission-check{display:none!important}}

/* ============================================================ SHARE MODAL */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px 16px;background:rgba(4,3,3,.78);overflow-y:auto}
.modal-card{position:relative;width:min(1000px,100%);max-height:calc(100svh - 40px);overflow-y:auto;padding:clamp(20px,3vw,34px);border-radius:26px;background:#110c0a;border:1px solid var(--line-2);box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(255,104,29,.18)}
.modal-card h2{margin:4px 0 16px;font-family:var(--f-title);font-weight:700;font-size:clamp(26px,3.2vw,38px);line-height:1.05;letter-spacing:-.01em}
.m-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);font-size:24px;line-height:1;color:var(--muted);transition:transform .25s var(--snap),color .2s,border-color .2s}
.m-close:hover{transform:rotate(90deg);color:var(--ink);border-color:var(--orange)}
.m-slides{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;min-height:120px}
.m-slide{flex:none;width:clamp(150px,19vw,190px);height:auto;aspect-ratio:1080/1350;border-radius:12px;scroll-snap-align:start;box-shadow:0 14px 30px rgba(0,0,0,.5);border:1px solid var(--line)}
.m-loading{align-self:center;font-family:var(--f-title);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);animation:hint 1.2s ease-in-out infinite}
.m-steps{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:14px;margin-top:6px}
.m-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.m-step>b{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--orange);color:#1a0b04;font-family:var(--f-title);font-size:16px}
.m-step h3{font-family:var(--f-title);font-weight:600;font-size:16px;margin-bottom:6px}
.m-step p{font-size:13px;color:var(--muted);margin-bottom:10px}
.m-step .btn-primary{width:100%;min-height:48px;font-size:13px}
.m-step textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);background:#0a0706;color:var(--ink);font:400 12.5px/1.45 var(--f-body);resize:vertical;outline:none}
.m-step textarea:focus{border-color:var(--orange)}
.m-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.m-err{color:#ff9a7a!important;margin:8px 0 0!important}
.m-err:empty{display:none}
@media (max-width:860px){.m-steps{grid-template-columns:1fr}.m-slide{width:150px}}

.site-home-link{display:block;width:max-content;margin-bottom:1.5rem;color:#FFB36B;font:600 12px var(--f-title);letter-spacing:.08em;text-decoration:underline;text-underline-offset:4px}.site-home-link:focus-visible{outline:2px solid #FFB36B;outline-offset:4px}


/* Keep the mobile form inside the viewport and the quiz choices next to the question. */
@media (max-width:860px){
  .intro{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);overflow-wrap:anywhere}
  .intro-copy,.intro-stage,.gate,.input-row{min-width:0;max-width:100%}
  .intro .eyebrow{max-width:100%;flex-wrap:wrap;line-height:1.35;letter-spacing:.1em}
  .gate{width:100%}
  .input-row input{width:100%;min-height:50px}
  .input-row .btn-primary{min-width:0;white-space:normal;line-height:1.1}
  .quiz{height:100dvh;min-height:0;grid-template-rows:auto minmax(0,1fr) auto;gap:5px;padding:50px 12px 6px;overflow:hidden}
  .q-head{gap:4px;align-content:center}
  .q-chip{padding:3px 9px;font-size:10px}
  .q-title{min-height:0;font-size:clamp(19px,5vw,24px);line-height:1.1}
  .arena{display:flex;flex-direction:column;justify-content:flex-start;gap:5px;min-height:0}
  .arena .ans{width:100%;flex:0 0 auto;align-self:stretch}
  .ans-body{min-height:49px;gap:8px;padding:7px 10px}
  .ans-key{width:29px;height:29px}
  .ans-text{font-size:clamp(12px,3.5vw,14px);line-height:1.25}
  .tv-wrap{order:5;flex:0 0 auto;width:100%;height:min(32dvh,300px);min-height:150px;max-height:none;margin:auto 0 12px}
  .tv-wrap .tv-slot{inset:0 0 -4%}
  .tv-wrap .speech{top:0}
  .q-foot{padding:0}
  .q-foot .btn-ghost{min-height:38px}
  .result{min-width:0;overflow-x:clip}
  .r-hero,.r-id,.r-score,.r-grid,.radar-panel,.bars-panel{min-width:0;width:100%}
  .r-tv{width:100%;height:150px;max-width:300px;margin:0 auto}
  .r-id .eyebrow,.r-id .r-tags,.r-id .r-badges{justify-content:center}
  .r-name{overflow-wrap:anywhere}
  .r-score{max-width:440px;margin-inline:auto}
  .r-grid .panel{min-width:0}
  .radar{max-width:calc(100% - 24px)}
  .curve-labels{font-size:10px}
  .fomo-title>span{max-width:100%;overflow-wrap:anywhere}
}
@media (max-width:400px) and (max-height:720px){
  .quiz{padding-top:43px;gap:3px}
  .q-title{font-size:19px}
  .arena{gap:4px}
  .ans-body{min-height:43px;padding:5px 9px}
  .ans-text{font-size:12px}
  .tv-wrap{height:min(30dvh,230px);min-height:150px}
  .q-foot .btn-ghost{min-height:34px}
}