*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --red:#B81625;--red-dark:#7A0F18;--red-bright:#E1251B;
  --cream:#F4ECD8;--cream-dark:#E8DEC4;--paper:#FAF3DD;
  --ink:#1a1410;--ink-light:#3a3028;
  --gold:#D4A24A;--yellow:#FFE53B;
  --mono:'Courier New','Menlo',monospace;
  --bg-grain:radial-gradient(circle at 1px 1px,rgba(180,160,130,.18) 0.5px,transparent 0);
}
html{width:100%;min-height:100%;background:#1a1410;font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;color:var(--ink)}
body{max-width:430px;min-height:100vh;margin:0 auto;background:var(--cream);position:relative;
  box-shadow:0 0 60px rgba(0,0,0,.4);
  background-image:var(--bg-grain);background-size:6px 6px}
.screen{display:none;flex-direction:column;min-height:100vh;position:relative}.screen.active{display:flex}

/* ========== LANDING (Poster Style) ========== */
#s-land{background:var(--red);color:#fff;align-items:stretch;position:relative;overflow:hidden;padding:0}
#s-land::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 0.5px,transparent 0);
  background-size:5px 5px;pointer-events:none}
.land-in{position:relative;z-index:2;width:100%;padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.l-logo{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.4);margin-bottom:14px;flex-shrink:0}
.l-jd{background:#fff;color:var(--red);font-size:11px;font-weight:900;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;letter-spacing:0}
.l-name{font-size:14px;font-weight:900;letter-spacing:.05em;color:#fff}.l-name span{color:#fff}
.l-sub{font-size:10px;color:rgba(255,255,255,.65);letter-spacing:.05em;font-weight:600;margin-left:auto}
/* Meta info bar */
.land-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.05em;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:24px;flex-shrink:0}
.land-meta em{font-style:normal;font-weight:900;color:#fff}
/* Kicker line */
.l-kicker{font-size:11px;letter-spacing:.35em;font-weight:700;color:rgba(255,255,255,.9);text-align:center;margin-bottom:14px;flex-shrink:0}
.l-kicker .gold{color:var(--yellow)}
/* Big poster headline */
.l-hero{font-size:64px;font-weight:900;color:#fff;line-height:.85;letter-spacing:-2px;text-transform:uppercase;font-family:'Helvetica Neue',Arial,sans-serif;text-align:left;margin-bottom:6px;flex-shrink:0}
.l-hero em{color:var(--yellow);font-style:normal}
.l-desc{font-size:13px;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.85);margin-bottom:18px;flex-shrink:0}
.l-desc b{font-weight:900;color:#fff}
/* Illust area for Joy */
.l-joy{width:100%;flex:1;min-height:200px;margin:0;position:relative;background:var(--cream);
  border:1px solid rgba(255,255,255,.5);overflow:hidden;display:flex;align-items:center;justify-content:center;animation:none}
.l-joy::before{content:"OUTLIER REPORT";position:absolute;top:10px;left:10px;background:var(--ink);color:var(--yellow);
  font-size:9px;font-weight:900;letter-spacing:.3em;padding:5px 10px;font-family:var(--mono);z-index:4}
.l-joy::after{content:"jder";position:absolute;right:14px;bottom:8px;font-family:'Brush Script MT','Snell Roundhand',cursive;
  font-size:54px;color:var(--red);font-style:italic;font-weight:400;transform:rotate(-6deg);z-index:4;letter-spacing:-1px}
.l-joy-bg{position:absolute;inset:0;background:url('../images/poster_bg.jpg') center/cover no-repeat;opacity:.45;z-index:1}
.l-joy img{width:60%;height:78%;object-fit:contain;animation:joyBob 4s ease-in-out infinite;z-index:3;position:relative;}
@keyframes joyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.l-joy-blur{display:none}
/* Hidden flip cards */
.l-cards{display:none}
.l-info{display:none}
/* Footer bar */
.l-foot-bar{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.15em;font-weight:700;
  color:rgba(255,255,255,.7);padding-top:12px;border-top:1px solid rgba(255,255,255,.4);margin-top:14px;line-height:1.8;flex-shrink:0}
.l-foot-bar div{display:flex;flex-direction:column;gap:2px}
.l-foot-bar em{font-style:normal;color:#fff;font-weight:900}
/* QR + CTA zone */
.l-qr-zone{display:flex;align-items:center;gap:12px;margin-top:14px;flex-shrink:0}
.l-qr{width:48px;height:48px;background:#fff;border-radius:4px;flex-shrink:0;
  background-image:repeating-linear-gradient(0deg,var(--ink) 0 3px,transparent 3px 6px),
    repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 6px)}
.l-qr-text{flex:1;font-size:10px;line-height:1.5;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.85)}
.l-qr-text em{font-style:normal;font-weight:900;color:#fff}
.l-btn{padding:14px 22px;background:var(--ink);color:#fff;font-size:12px;font-weight:900;
  border:none;border-radius:6px;cursor:pointer;letter-spacing:.35em;font-family:var(--mono);flex-shrink:0;
  transition:transform .12s,background .12s}
.l-btn:active{transform:scale(.97)}
.l-btn::after{content:" →";letter-spacing:0}
.l-foot{display:none}

/* ========== INVITE ========== */
#s-invite{background:var(--cream);color:var(--ink);align-items:center;justify-content:center;padding:40px 24px}
.inv-w{max-width:360px;width:100%;text-align:center}
.inv-tag{font-size:10px;color:var(--ink-light);letter-spacing:.4em;font-family:var(--mono);margin-bottom:14px;text-transform:uppercase;font-weight:900}
.inv-title{font-size:24px;font-weight:900;color:var(--ink);margin-bottom:24px;line-height:1.3;white-space:pre-line;letter-spacing:-.5px}
.inv-mini{background:var(--paper);border:1px solid var(--ink);overflow:hidden;margin-bottom:24px;
  box-shadow:6px 6px 0 var(--ink)}
.inv-stripe{height:5px;background:var(--red)}
.inv-body{padding:18px 16px;text-align:center}
.inv-code{font-size:42px;font-weight:900;line-height:1;color:var(--red);font-family:'Helvetica Neue',Arial,sans-serif}
.inv-label{font-size:16px;font-weight:900;margin-top:4px;color:var(--ink)}
.inv-desc{font-size:12px;color:var(--ink-light);margin-top:8px;line-height:1.5}
.inv-p{font-size:13px;color:var(--ink-light);line-height:1.6;margin-bottom:4px}
.inv-btn{width:100%;padding:16px;background:var(--ink);color:#fff;font-size:13px;font-weight:900;border:none;border-radius:6px;cursor:pointer;margin-top:16px;letter-spacing:.4em;font-family:var(--mono)}
.inv-btn::after{content:" →"}

/* ========== NAME ========== */
#s-name{background:var(--cream);color:var(--ink);align-items:center;justify-content:center;padding:40px 28px;position:relative}
#s-name::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px)}
.nm-w{max-width:360px;width:100%;text-align:center}
.nm-hint{font-size:11px;color:var(--ink-light);margin-bottom:24px;font-family:var(--mono);letter-spacing:.3em;font-weight:700;text-transform:uppercase}
.nm-title{font-size:36px;font-weight:900;color:var(--ink);margin-bottom:40px;line-height:1.15;letter-spacing:-1px;text-transform:uppercase;font-family:'Helvetica Neue',Arial,sans-serif}
.nm-input{border:none;border-bottom:3px solid var(--red);font-size:28px;font-weight:900;color:var(--red);text-align:center;width:180px;outline:none;padding:6px 0;background:transparent;margin-bottom:44px;display:block;margin-left:auto;margin-right:auto}
.nm-input::placeholder{color:rgba(184,22,37,.3);font-weight:400;font-size:20px}
.nm-btn{width:100%;padding:16px;background:var(--ink);color:#fff;font-size:13px;font-weight:900;border:none;border-radius:6px;cursor:pointer;opacity:.3;transition:opacity .2s,box-shadow .2s;letter-spacing:.4em;font-family:var(--mono)}
.nm-btn.ready{opacity:1;box-shadow:0 6px 0 var(--ink-light)}
.nm-btn::after{content:" →"}

/* ========== QUESTIONS ========== */
#s-q{background:var(--cream)}
#s-q::before{content:"";position:absolute;inset:0;background-image:var(--bg-grain);background-size:6px 6px;pointer-events:none}
.qh{height:54px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);position:sticky;top:0;background:var(--cream);z-index:10}
.qh-n{font-size:11px;font-family:var(--mono);color:var(--ink);letter-spacing:.3em;font-weight:900}
.qh-bar{width:160px;height:4px;background:rgba(26,20,16,.15);overflow:hidden;border-radius:0}
.qh-fill{height:100%;background:var(--red);transition:width .5s cubic-bezier(.4,0,.2,1)}
.qb{flex:1;padding:32px 22px 28px;position:relative;z-index:2}
.qb-idx{font-size:10px;font-family:var(--mono);color:var(--red);letter-spacing:.4em;margin-bottom:18px;font-weight:900}
.qb-text{font-size:24px;font-weight:900;line-height:1.35;margin-bottom:28px;color:var(--ink);letter-spacing:-.5px}
.qb-opts{display:flex;flex-direction:column;gap:10px}
.qb-opt{
  padding:14px 16px;background:var(--paper);border:1.5px solid var(--ink);
  cursor:pointer;display:flex;align-items:flex-start;gap:12px;
  transition:all .15s;text-align:left;
}
.qb-opt:active{transform:translate(2px,2px)}
.qb-opt.sel{background:var(--red);color:#fff;border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.qb-lt{width:28px;height:28px;min-width:28px;border:1.5px solid var(--ink);color:var(--ink);font-size:12px;font-family:var(--mono);display:flex;align-items:center;justify-content:center;transition:all .15s;font-weight:900;background:#fff}
.qb-opt.sel .qb-lt{background:#fff;color:var(--red);border-color:#fff}
.qb-tx{font-size:14px;line-height:1.55;font-weight:600;letter-spacing:.02em}
.qb-opt.sel .qb-tx{color:#fff}

/* ========== ANALYZING ========== */
#s-ana{background:var(--cream);color:var(--ink);align-items:center;justify-content:center;padding:40px 28px;position:relative}
#s-ana::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--red) 0 8px,transparent 8px 16px)}
.ana-w{text-align:center;max-width:320px;width:100%}
.ana-spin{width:160px;height:160px;margin:0 auto 28px;position:relative;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.ana-ring{position:absolute;inset:-4px;border:none;background:none;animation:none}
.ana-spin img{width:80%;height:80%;object-fit:contain;animation:joyBob 1.5s ease-in-out infinite;border-radius:0;filter:none}
.ana-t{font-size:24px;font-weight:900;margin-bottom:6px;color:var(--ink);text-transform:uppercase;letter-spacing:-.5px;font-family:'Helvetica Neue',Arial,sans-serif}
.ana-s{font-size:11px;color:var(--ink-light);margin-bottom:32px;line-height:1.6;letter-spacing:.2em;font-weight:700;font-family:var(--mono);text-transform:uppercase}
.ana-list{text-align:left;display:flex;flex-direction:column;gap:12px}
.ana-item{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ink-light);font-family:var(--mono);opacity:0;transform:translateY(6px);transition:all .35s;letter-spacing:.2em;font-weight:700;text-transform:uppercase}
.ana-item.show{opacity:1;transform:translateY(0)}
.ana-dot{width:8px;height:8px;min-width:8px;border-radius:0;background:rgba(26,20,16,.3);transition:background .3s}
.ana-item.done .ana-dot{background:var(--red)}

/* ========== RESULT POSTER ========== */
#s-res{background:var(--cream);overflow-y:auto;position:relative}
#s-res::before{content:"";position:absolute;inset:0;background-image:var(--bg-grain);background-size:6px 6px;pointer-events:none}
.poster-wrap{padding:14px 14px 14px;position:relative;z-index:2}
.poster{
  background:var(--paper);border:1.5px solid var(--ink);overflow:hidden;
  box-shadow:6px 6px 0 var(--ink);
  display:flex;flex-direction:column;
}
/* Top brand bar inside poster */
.poster::before{
  content:"JDTI · OUTLIER REPORT · 2026 · 06 · 11";
  display:block;background:var(--ink);color:var(--yellow);
  padding:8px 16px;font-size:9px;font-weight:900;letter-spacing:.3em;font-family:var(--mono);
}
.poster-bg{display:none}
.poster-in{padding:20px 18px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;background:transparent}
.p-pre{font-size:10px;letter-spacing:.4em;color:var(--ink-light);font-weight:900;font-family:var(--mono);margin-bottom:16px;text-transform:uppercase}
.p-char{width:240px;height:240px;margin:0 auto 12px;border:1.5px solid var(--ink);background:var(--cream);overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;box-shadow:4px 4px 0 var(--ink)}
.p-char::before{content:"OUTLIER REPORT";position:absolute;top:8px;left:8px;background:var(--ink);color:var(--yellow);
  font-size:8px;font-weight:900;letter-spacing:.3em;padding:4px 8px;font-family:var(--mono);z-index:4}
.p-char::after{content:"jder";position:absolute;right:10px;bottom:6px;font-family:'Brush Script MT','Snell Roundhand',cursive;
  font-size:40px;color:var(--red);font-style:italic;font-weight:400;transform:rotate(-6deg);z-index:4;letter-spacing:-1px}
.p-char .p-char-bg{position:absolute;inset:0;background:url('../images/poster_bg.jpg') center/cover no-repeat;opacity:.45;z-index:1}
.p-char svg,.p-char img{width:70%;height:80%;object-fit:contain;z-index:3;position:relative;}
.p-code{font-size:80px;font-weight:900;line-height:.9;letter-spacing:-2px;color:var(--red);font-family:'Helvetica Neue',Arial,sans-serif;text-transform:uppercase;margin-top:10px;margin-bottom:4px}
.p-label{font-size:18px;font-weight:900;color:var(--ink);letter-spacing:.05em;margin-bottom:14px}
.p-rarity{font-size:13px;color:var(--ink-light);margin-bottom:14px;letter-spacing:.05em;font-weight:600}
.p-rarity b{color:var(--red);font-weight:900;font-size:16px}
.p-viral{background:var(--yellow) !important;color:var(--ink) !important;border-left:5px solid var(--ink) !important;padding:14px 16px !important;border-radius:0 !important;font-weight:900 !important;font-size:14px !important;line-height:1.5 !important;margin:8px 0 14px !important;text-align:left !important;box-shadow:4px 4px 0 var(--ink)}
.p-quote{background:var(--cream) !important;border:1px solid var(--ink);padding:14px 16px;font-size:13px;line-height:1.5;color:var(--ink-light) !important;font-style:italic;letter-spacing:.02em;margin-bottom:18px}
.p-details{width:100%;text-align:left;border-top:1.5px solid var(--ink);padding-top:14px;margin-bottom:14px}
.p-detail{display:flex;gap:10px;margin-bottom:8px;font-size:12px;line-height:1.5}
.p-detail-label{color:var(--red) !important;font-weight:900;letter-spacing:.05em;min-width:80px}
.p-detail-val{color:var(--ink);font-weight:600;flex:1}
.p-tags{display:flex;flex-wrap:wrap;gap:6px;width:100%;margin-bottom:12px}
.p-tag{background:#fff !important;color:var(--ink) !important;border:1.5px solid var(--ink) !important;font-size:11px;font-weight:900;padding:5px 10px;letter-spacing:.05em;border-radius:0}
.p-foot{display:flex;align-items:center;gap:10px;border-top:1.5px solid var(--ink);padding-top:12px;width:100%;font-size:9px;letter-spacing:.3em;font-family:var(--mono);font-weight:900;color:var(--ink-light)}
.p-foot-logo{color:var(--red)}
.p-foot-dot{width:3px;height:3px;border-radius:0;background:var(--ink);margin:0 4px}
.p-foot-text{flex:1;text-align:right}

/* Bottom action buttons */
.rbtns{display:flex;flex-direction:column;gap:10px;padding:16px 14px 18px;position:relative;z-index:2}
.rbtn{padding:16px;border:1.5px solid var(--ink);font-size:13px;font-weight:900;letter-spacing:.4em;border-radius:0;cursor:pointer;font-family:var(--mono);transition:transform .12s,box-shadow .12s}
.rbtn::after{content:" →"}
.rbtn:active{transform:translate(2px,2px);box-shadow:none !important}
.rbtn-1{background:var(--red);color:#fff;box-shadow:5px 5px 0 var(--ink)}
.rbtn-2{background:#fff;color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.rbtn-3{background:var(--cream);color:var(--ink-light);font-size:11px;letter-spacing:.3em;font-family:var(--mono);box-shadow:none}
.rbtn-3::after{content:""}

/* ========== MATCH ========== */
#s-match{background:var(--cream);overflow-y:auto;position:relative}
.m-hdr{padding:14px 20px;background:var(--ink);color:var(--yellow);border-bottom:1px solid var(--ink);text-align:center;position:sticky;top:0;z-index:10;font-size:9px;letter-spacing:.3em;font-weight:900;font-family:var(--mono)}
.m-cards{display:flex;gap:10px;padding:18px 14px}
.m-card{flex:1;background:var(--paper);border:1.5px solid var(--ink);overflow:hidden;box-shadow:4px 4px 0 var(--ink)}
.m-card-stripe{height:5px}
.m-card-in{padding:14px 12px;text-align:center}
.m-card-name{font-size:12px;color:var(--ink-light);margin-bottom:6px;font-weight:700;letter-spacing:.05em}
.m-card-code{font-size:30px;font-weight:900;line-height:1;color:var(--red);font-family:'Helvetica Neue',Arial,sans-serif}
.m-card-label{font-size:13px;font-weight:900;margin-top:4px;color:var(--ink)}
.m-card-char{width:110px;height:110px;margin:8px auto 0;border:1px solid var(--ink);background:var(--cream);overflow:hidden;display:flex;align-items:center;justify-content:center}
.m-card-char svg,.m-card-char img{width:85%;height:85%;object-fit:contain}

.m-result{margin:0 14px 16px;background:var(--paper);border:1.5px solid var(--ink);padding:20px 18px;text-align:center;box-shadow:4px 4px 0 var(--ink)}
.m-pre{font-size:10px;letter-spacing:.4em;color:var(--ink-light);font-weight:900;font-family:var(--mono);margin-bottom:10px}
.m-title{font-size:22px;font-weight:900;color:var(--ink);margin-bottom:12px;letter-spacing:-.5px;text-transform:uppercase;font-family:'Helvetica Neue',Arial,sans-serif}
.m-score-w{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:14px}
.m-score{font-size:64px;font-weight:900;color:var(--red);line-height:1;font-family:'Helvetica Neue',Arial,sans-serif}
.m-unit{font-size:24px;font-weight:900;color:var(--red)}
.m-desc{font-size:13px;line-height:1.6;color:var(--ink-light);text-align:left;font-style:italic}

.mbtns{display:flex;flex-direction:column;gap:10px;padding:0 14px 18px}
.mbtn{padding:16px;border:1.5px solid var(--ink);font-size:13px;font-weight:900;letter-spacing:.4em;border-radius:0;cursor:pointer;font-family:var(--mono)}
.mbtn-1{background:var(--red);color:#fff;box-shadow:5px 5px 0 var(--ink)}
.mbtn-2{background:#fff;color:var(--ink);box-shadow:5px 5px 0 var(--ink)}

/* ========== SHARE OVERLAY ========== */
.share-ov{position:fixed;inset:0;background:rgba(26,20,16,.85);display:none;align-items:flex-end;justify-content:center;z-index:100;backdrop-filter:blur(4px)}
.share-ov.show{display:flex}
.share-sh{background:var(--cream);width:100%;max-width:430px;padding:24px 24px 30px;border-top:3px solid var(--ink);position:relative}
.share-sh::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px)}
.share-t{font-size:18px;font-weight:900;color:var(--ink);text-align:center;margin-bottom:8px;margin-top:8px;text-transform:uppercase;letter-spacing:-.3px}
.share-hint{font-size:12px;color:var(--ink-light);text-align:center;line-height:1.6;margin-bottom:18px;letter-spacing:.02em}
.share-copy{width:100%;padding:16px;background:var(--red);color:#fff;font-size:13px;font-weight:900;border:1.5px solid var(--ink);cursor:pointer;letter-spacing:.4em;font-family:var(--mono);box-shadow:5px 5px 0 var(--ink);margin-bottom:10px}
.share-copy::after{content:" →"}
.share-cancel{width:100%;padding:14px;background:transparent;color:var(--ink-light);font-size:12px;font-weight:900;border:none;cursor:pointer;letter-spacing:.3em;font-family:var(--mono)}

/* ========== CARD PREVIEW OVERLAY ========== */
.card-ov{position:fixed;inset:0;background:rgba(26,20,16,.92);display:none;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(8px);padding:20px;flex-direction:column;gap:14px}
.card-ov.show{display:flex}
.card-ov img{max-width:100%;max-height:75vh;border:1.5px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.card-ov-btns{display:flex;gap:10px;width:100%;max-width:380px}
.card-ov-btn{flex:1;padding:14px;background:var(--cream);color:var(--ink);font-size:12px;font-weight:900;border:1.5px solid var(--ink);cursor:pointer;letter-spacing:.3em;font-family:var(--mono);box-shadow:4px 4px 0 var(--ink)}
.card-ov-btn.primary{background:var(--red);color:#fff}

/* ========== TOAST ========== */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--ink);color:var(--yellow);padding:14px 24px;font-size:12px;font-weight:900;letter-spacing:.3em;font-family:var(--mono);z-index:200;border:1.5px solid var(--yellow);opacity:0;transition:opacity .3s}
.toast.show{opacity:1}

/* Question fade-in animation */
.fu{animation:fadeUp .35s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}