:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f6f0e8;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#09090d;font-family:Inter,SF Pro Display,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}button{color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;border:0}a{color:inherit;-webkit-tap-highlight-color:transparent;text-decoration:none}.app{min-height:100svh;padding:max(16px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));background:linear-gradient(#ffffff14,#0000 22%),radial-gradient(circle at 50% 0,#9b23353d,#0000 34%),#09090d;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.particles{width:100%;height:100%;position:absolute;inset:0}.phone-shell{-webkit-backdrop-filter:blur(28px)saturate(132%);backdrop-filter:blur(28px)saturate(132%);background:#11111794;border:1px solid #ffffff24;border-radius:28px;width:min(100%,430px);height:min(900px,100svh - 28px);max-height:calc(100svh - 28px);position:relative;overflow:hidden;box-shadow:0 28px 90px #0000008f,inset 0 1px #ffffff1f}.screen{z-index:1;-webkit-overflow-scrolling:touch;flex-direction:column;gap:18px;min-height:100%;max-height:100%;padding:22px;display:flex;position:relative}.home{scrollbar-width:none;gap:12px;overflow-y:auto}.game{scrollbar-width:none;overflow-y:auto}.game::-webkit-scrollbar{display:none}.home::-webkit-scrollbar{display:none}.chat-stack{flex-direction:column;gap:9px;margin-top:4px;display:flex}.bubble{color:#fff;background:#ffffff1a;border:1px solid #ffffff1f;border-radius:18px 18px 18px 6px;width:fit-content;max-width:78%;padding:10px 13px;line-height:1.55}.bubble.me{background:#d8b36a29;border-radius:18px 18px 6px;align-self:flex-end}.bubble small{color:#f6f0e87a;margin-bottom:5px;font-size:11px;display:block}.hero-copy{margin-top:6px}.kicker{color:var(--accent);letter-spacing:0;margin:0 0 9px;font-size:12px;font-weight:700}h1,h2,p{margin:0}h1{letter-spacing:0;max-width:9em;font-size:clamp(35px,11vw,52px);line-height:.98}.hero-copy>p:last-child{color:#f6f0e8b3;margin-top:10px;line-height:1.7}.world-card,.scene-panel,.death-card,.poster{background:#ffffff13;border:1px solid #ffffff1f;border-radius:22px;box-shadow:inset 0 1px #ffffff1a}.world-card{color:#f6f0e8b3;padding:13px;line-height:1.7}.world-stats{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;display:grid}.world-stats span{color:#f6f0e885;background:#0000003d;border-radius:14px;align-content:center;gap:5px;min-height:55px;padding:9px;font-size:11px;display:grid}.world-stats strong{color:#fff;font-size:14px}.boss-grid{gap:10px;display:grid}.product-hall,.category-list,.featured-strip{gap:14px;display:grid}.compact-grid .boss-card{min-height:132px}.list-heading{justify-content:space-between;align-items:end;gap:12px;padding:0 4px;display:flex}.list-heading span{color:var(--accent);font-size:13px;font-weight:800}.list-heading strong{color:#f6f0e885;font-size:12px}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.category-card{background:radial-gradient(circle at 14% 0,#d8b36a24,#0000 42%),#ffffff13;border:1px solid #ffffff21;border-radius:22px;align-content:stretch;gap:10px;min-height:156px;padding:13px;display:grid;box-shadow:inset 0 1px #ffffff1a}.category-card.zodiac{background:radial-gradient(circle at 14% 0,#74d9ff29,#0000 42%),radial-gradient(circle at 86% 0,#e9b4d81f,#0000 42%),#ffffff13}.category-card.xingxiu{background:radial-gradient(circle at 14% 0,#b99cff2b,#0000 42%),radial-gradient(circle at 86% 0,#e15d681f,#0000 42%),#ffffff13}.category-card.npd{background:radial-gradient(circle at 14% 0,#ff6c603d,#0000 42%),radial-gradient(circle at 88% 4%,#ec39552e,#0000 46%),linear-gradient(135deg,#ffffff17,#ffffff0b);border-color:#ff6c603d}.npd-mode{background:linear-gradient(#ffffff13,#0000 22%),radial-gradient(circle at 70% 2%,#ff875f29,#0000 34%),radial-gradient(circle at 6% 86%,#ec395538,#0000 30%),#09090d}.npd-shell{background:linear-gradient(#ffffff09,#0000 28%),#0c0c11e0}.npd-home{gap:16px}.npd-chat-preview{flex-direction:column;justify-content:center;gap:14px;min-height:214px;display:flex}.npd-chat-bubble{background:#423b3ec7;border:1px solid #fff8ef29;border-radius:18px;width:72%;padding:10px 14px 12px;box-shadow:0 18px 50px #00000047}.npd-chat-bubble.mine{background:#47372be6;border-color:#ff875f3d;margin-left:auto}.npd-chat-bubble.short{width:78%}.npd-chat-bubble small{color:#f6f0e880;margin-bottom:5px;font-size:11px;font-weight:800;display:block}.npd-chat-bubble p{color:#fff;font-size:16px;line-height:1.32}.npd-hero-stats{margin:4px 0 0}.npd-disclaimer,.npd-ending-subtitle{color:#f6f0e894;text-align:center;font-size:12px;line-height:1.6}.npd-play-layout{grid-template-columns:34px minmax(0,1fr);gap:10px;min-height:0;display:grid}.npd-question-stack{gap:12px;min-width:0;display:grid}.npd-blood-pack{align-self:start;justify-items:center;gap:7px;padding-top:2px;display:grid;position:sticky;top:12px}.npd-blood-pack span{writing-mode:vertical-rl;color:#ff8f75;font-size:12px;font-weight:900;line-height:1}.npd-blood-pack div{background:#fff8ef14;border:1px solid #ec395575;border-radius:999px;align-items:end;width:18px;height:258px;display:flex;overflow:hidden;box-shadow:inset 0 0 16px #00000073,0 0 18px #ec39551f}.npd-blood-pack i{border-radius:inherit;background:linear-gradient(#ff8a7f,#ec3955 55%,#9d102b);width:100%;min-height:2px;transition:height .3s}.npd-blood-pack strong{font-size:12px}.npd-meter-grid{grid-template-columns:repeat(2,1fr);gap:9px;display:grid}.npd-meter{background:#fff8ef0e;border:1px solid #fff8ef1a;border-radius:13px;padding:10px}.npd-meter-head{justify-content:space-between;gap:8px;margin-bottom:7px;font-size:12px;font-weight:900;display:flex}.npd-track{background:#fff8ef1a;border-radius:999px;height:7px;overflow:hidden}.npd-track i{border-radius:inherit;background:#61d7b8;height:100%;transition:width .26s;display:block}.npd-track i.danger{background:#ec3955}.npd-track i.warn{background:#f1a73a}.npd-pulse{flex-wrap:wrap;grid-column:1/-1;gap:6px;min-height:28px;display:flex}.npd-pulse span{background:#fff8ef12;border:1px solid #fff8ef1a;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:900}.npd-pulse .positive{color:#61d7b8}.npd-pulse .negative{color:#ff6d83}.npd-scene h2{margin:8px 0 0;font-size:28px;line-height:1.08}.npd-ending{overflow-y:auto}.npd-reason-card{margin-top:14px}.npd-ending-stats{grid-template-columns:repeat(2,1fr);gap:9px;margin-top:16px;display:grid}.npd-ending-stats span{background:#fff8ef11;border:1px solid #fff8ef1a;border-radius:13px;padding:12px;font-size:13px;font-weight:800}.npd-app-cta{background:#ff875f1f;border:1px solid #ff875f3d;border-radius:20px;margin-top:16px;padding:16px}.npd-app-cta h3{margin:8px 0;font-size:22px}.npd-app-cta p:last-of-type{color:#f6f0e8ad;font-size:14px;line-height:1.65}.npd-app-cta .primary{width:100%;margin-top:12px}.category-card span{width:fit-content;color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, #0000004d);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}.category-card strong{color:#fff;word-break:keep-all;gap:3px;font-size:19px;line-height:1.06;display:grid}.category-card strong b{font-weight:900}.category-card p{color:#f6f0e8a8;font-size:12px;line-height:1.6}.category-card-meta{flex-wrap:wrap;align-content:start;gap:6px;display:flex}.category-card-meta em{color:#ffd690db;white-space:nowrap;background:#00000038;border-radius:10px;align-items:center;width:fit-content;max-width:100%;min-height:28px;padding:6px 7px;font-size:10px;font-style:normal;font-weight:800;display:flex}.category-card i{color:#f6f0e885;font-size:11px;font-style:normal;font-weight:700}.featured-strip{padding-top:4px}.featured-strip .boss-card{opacity:.94}.category-intro{gap:10px;padding:12px 14px;display:grid}.category-zodiac .category-intro{background:radial-gradient(circle at 0 0,#74d9ff1f,#0000 42%),radial-gradient(circle at 100% 10%,#e9b4d81a,#0000 42%),#ffffff13;border-color:#74d9ff33}.category-xingxiu .category-intro{background:radial-gradient(circle at 0 0,#b99cff24,#0000 42%),radial-gradient(circle at 100% 8%,#e15d681a,#0000 42%),#ffffff13;border-color:#b99cff38}.category-style-note{width:fit-content;color:var(--accent);background:color-mix(in srgb, var(--accent) 13%, #0000003d);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}.category-intro p{color:#f6f0e8b8}.zodiac-card{background:radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 40%), radial-gradient(circle at 88% 0%, #ffffff14, transparent 34%), #ffffff13}.xingxiu-card{background:radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 40%), radial-gradient(circle at 88% 8%, #9b23351f, transparent 38%), #ffffff13}.boss-card{text-align:left;border:1px solid color-mix(in srgb, var(--card-accent) 38%, #ffffff1f);background:radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 40%), #ffffff13;cursor:pointer;border-radius:20px;gap:8px;width:100%;min-height:154px;padding:14px;display:grid;box-shadow:inset 0 1px #ffffff1a}.boss-card .boss-tag{background:color-mix(in srgb, var(--card-accent) 18%, #00000047);width:fit-content;color:color-mix(in srgb, var(--card-accent) 86%, white);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}.boss-card strong{color:#fff;font-size:22px;line-height:1.12}.boss-card small,.boss-card p{color:#f6f0e8a3;line-height:1.55}.boss-card p{font-size:12px}.boss-card-stats{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.boss-card-stats span{color:#f6f0e8b8;white-space:nowrap;background:#00000038;border-radius:10px;place-items:center;min-height:32px;font-size:11px;display:grid}.boss-card em{color:color-mix(in srgb, var(--card-accent) 74%, white);font-size:11px;font-style:normal}.boss-card i{text-overflow:ellipsis;white-space:nowrap;color:#f6f0e86b;font-size:11px;font-style:normal;overflow:hidden}.single-boss-card{gap:14px;display:grid}.single-boss-card .primary{width:100%}.text-link{color:#f6f0e894;place-items:center;min-height:34px;font-size:13px;display:grid}.memory-note,.adaptive-alert{border:1px solid color-mix(in srgb, var(--accent) 34%, #ffffff14);background:color-mix(in srgb, var(--accent) 10%, #0000003d);color:#f6f0e8bd;border-radius:14px;margin-top:12px;padding:10px 11px;font-size:12px;line-height:1.55}.primary,.ghost{cursor:pointer;border-radius:18px;justify-content:center;align-items:center;gap:8px;min-height:50px;padding:0 18px;display:inline-flex}.primary{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, white), #f4eee7);color:#151217;box-shadow:0 16px 32px color-mix(in srgb, var(--accent) 20%, transparent);font-weight:800}.ghost{background:#ffffff14;border:1px solid #ffffff1f}.topbar{justify-content:space-between;align-items:center;gap:14px;display:flex}.topbar div{gap:4px;display:grid}.topbar span,.scene-label,.death-card span{color:#f6f0e87a;font-size:12px}.topbar strong{font-size:22px}.icon-button{background:#ffffff14;border-radius:50%;place-items:center;width:42px;height:42px;display:grid}.stat-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.stat{background:#00000042;border-radius:16px;gap:5px;min-height:56px;padding:10px 11px;display:grid;position:relative;overflow:hidden}.stat:before{content:"";background:#ffffff14;height:8px;position:absolute;bottom:0;left:0;right:0}.stat span{color:#f6f0e880;font-size:12px}.stat strong{z-index:1;font-size:18px;position:relative}.stat i{background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 48%, white));height:8px;box-shadow:0 0 24px color-mix(in srgb, var(--accent) 80%, transparent);border-radius:0 999px 999px 0;position:absolute;bottom:0;left:0;overflow:hidden}.stat i:after{content:"";background:linear-gradient(90deg,#0000,#ffffffb8,#0000);animation:.92s ease-out statShine;position:absolute;inset:0;transform:translate(-115%)}@keyframes statShine{0%{opacity:0;transform:translate(-115%)}28%{opacity:.95}to{opacity:0;transform:translate(115%)}}.scene-panel{padding:18px}.scene-panel p{color:#f6f0e8b8;margin-top:9px;line-height:1.75}.adaptive-alert{color:#fff;margin:10px 0 0}blockquote{color:#fff;border-top:1px solid #ffffff1c;margin:18px 0 0;padding:18px 0 0;font-size:30px;line-height:1.22}.choice-section{gap:10px;margin-top:auto;display:grid}.choice-heading{justify-content:space-between;align-items:end;gap:12px;padding:0 4px 2px;display:flex}.choice-heading span{color:var(--accent);font-size:13px;font-weight:800}.choice-heading strong{color:#f6f0e885;font-size:12px;font-weight:600}.choices{gap:10px;display:grid}.choices button{text-align:left;background:#ffffff17;border:1px solid #ffffff1f;border-radius:18px;grid-template-columns:32px 1fr;align-items:center;gap:10px;width:100%;min-height:64px;padding:12px;display:grid}.choices b{width:32px;height:32px;color:var(--accent);background:#ffffff1a;border-radius:50%;place-items:center;display:grid}.choices span{line-height:1.45}.choices.npd-choices button{grid-template-columns:1fr;display:block}.choices.npd-choices span{white-space:normal;word-break:normal;overflow-wrap:break-word;width:100%;min-width:0;display:block}.choices em{color:#f6f0e87a;margin-top:4px;font-size:11px;font-style:normal;display:block}.death{text-align:center;scrollbar-width:none;padding-bottom:max(22px, calc(env(safe-area-inset-bottom) + 22px));justify-content:flex-start;overflow-y:auto}.death::-webkit-scrollbar{display:none}.death-mark{width:78px;height:78px;color:var(--accent);background:#9b23352e;border:1px solid #ffffff1f;border-radius:50%;place-items:center;margin:0 auto;display:grid}.death h2,.result h2{font-size:32px;line-height:1.18}.death-card{text-align:left;padding:16px}.death-card p{margin-top:8px;font-size:20px;line-height:1.45}.toxic-list,.poster-lines{text-align:left;color:#f6f0e8ad;gap:9px;font-size:13px;line-height:1.55;display:grid}.actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.result{scrollbar-width:none;padding-bottom:max(22px, calc(env(safe-area-inset-bottom) + 22px));justify-content:flex-start;overflow-y:auto}.result::-webkit-scrollbar{display:none}.poster{background:linear-gradient(155deg, #ffffff1f, #ffffff0a), radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 44%), #0d0d13;padding:20px}.poster h2{margin-bottom:16px}.rank{color:#f6f0e8d1;background:#ffffff1a;border-radius:999px;align-items:center;gap:8px;min-height:44px;padding:0 12px;display:inline-flex}.title-badge{color:var(--accent);margin:16px 0;font-size:30px;font-weight:900;line-height:1.1;display:block}.rebel-line{border-left:3px solid var(--accent);color:#f6f0e8c7;background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);margin:-4px 0 14px;padding:10px 0 10px 12px;font-size:13px;line-height:1.6}.poster .stat-grid{margin:12px 0 16px}.poster small{color:#f6f0e88c;margin-top:18px;display:block}.text-button{color:#f6f0e894;background:0 0;min-height:38px}.app-download-entry{z-index:20;border:1px solid color-mix(in srgb, var(--accent) 42%, #ffffff29);background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, #ffffff1f), #121218f0), #121218eb;color:#fff;width:100%;box-shadow:0 18px 52px #0000006b, 0 0 28px color-mix(in srgb, var(--accent) 15%, transparent), inset 0 1px #ffffff29;-webkit-backdrop-filter:blur(22px)saturate(142%);backdrop-filter:blur(22px)saturate(142%);text-align:left;cursor:pointer;border-radius:20px;grid-template-columns:38px minmax(0,1fr);grid-template-areas:"icon title""icon body"".action";align-items:center;gap:7px 10px;margin:0;padding:12px 13px;display:grid;position:relative;bottom:auto;left:auto;transform:none}.app-download-entry span{width:38px;height:38px;color:color-mix(in srgb, var(--accent) 72%, white);background:color-mix(in srgb, var(--accent) 18%, #ffffff14);border-radius:50%;grid-area:icon;place-items:center;display:grid}.app-download-entry strong{white-space:normal;overflow-wrap:anywhere;grid-area:title;min-width:0;font-size:13px;line-height:1.35}.app-download-entry em{color:#f6f0e89e;overflow-wrap:anywhere;grid-area:body;min-width:0;font-size:11px;font-style:normal;line-height:1.45}.app-download-entry b{background:color-mix(in srgb, var(--accent) 84%, white);color:#151217;white-space:nowrap;border-radius:999px;grid-area:action;justify-self:start;padding:7px 9px;font-size:11px}.death .app-download-entry{animation:.28s ease-out both ctaReveal}@keyframes ctaReveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width<=360px){.screen{padding:14px}h1{font-size:34px}blockquote,.death h2,.result h2{font-size:26px}.world-stats{grid-template-columns:1fr}.app-download-entry{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"icon title""icon body"".action";width:100%;padding:11px}.app-download-entry span{width:34px;height:34px}.app-download-entry b{grid-area:action;width:fit-content;margin-top:3px}.app-download-entry em{grid-area:body}}.client-back-button{top:max(16px, calc(env(safe-area-inset-top) + 10px));z-index:100;color:#d8b36a;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#d8b36a47;border:1px solid #d8b36a66;border-radius:50%;place-items:center;width:44px;height:44px;transition:background .2s,transform .15s;display:grid;position:fixed;left:14px;box-shadow:0 4px 16px #d8b36a33}.client-back-button:hover{background:#d8b36a5c}.client-back-button:active{background:#d8b36a7a;transform:scale(.94)}.web-back-button{color:#f6f0e8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffff14;border:1px solid #ffffff24;border-radius:50%;align-self:flex-start;place-items:center;width:42px;height:42px;min-height:42px;margin-bottom:-4px;display:grid;box-shadow:0 10px 30px #00000047}.web-back-button:active{transform:scale(.94)}html.reduce-ambient-effects .phone-shell{-webkit-backdrop-filter:none;backdrop-filter:none;background:#111117e0;box-shadow:0 18px 48px #0000006b,inset 0 1px #ffffff1a}html.reduce-ambient-effects .app-download-entry,html.reduce-ambient-effects .web-back-button{-webkit-backdrop-filter:none;backdrop-filter:none}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app.has-client-back{padding-top:max(76px, calc(env(safe-area-inset-top) + 66px))}.copyright-footer{padding:12px 14px max(18px, env(safe-area-inset-bottom));text-align:center;color:#f6f0e861;font-size:11px;line-height:1.5}

/* ==========================================================================
   Rails port additions (challenge.sbti-test.com) — everything above this
   line is the frozen original stylesheet, byte-for-byte
   (lib/challenge/vendor/challengembti-styles-20260707.css). Do not edit the
   frozen block; add overrides/extensions down here instead.
   ========================================================================== */

/* Generic show/hide utility — this layout stands alone (no Tailwind), so the
   sbti-poster Stimulus controller's classList.toggle("hidden", ...) calls
   need their own rule here instead of relying on Tailwind's .hidden. */
.hidden {
  display: none !important;
}

/* Same controller adds this class to <body> while the poster modal is open. */
.sbti-modal-open {
  overflow: hidden;
}

/* Zero-state stat rows collapse to a single centered line instead of a lonely
   1-of-3 grid cell (world-stats / boss-card-stats normally hold 3 spans). */
.world-stats:has(> span:only-child),
.boss-card-stats:has(> span:only-child) {
  grid-template-columns: 1fr;
}
.world-stats:has(> span:only-child) span,
.boss-card-stats:has(> span:only-child) span {
  color: #f6f0e8b8;
  font-weight: 700;
}

/* Share-poster overlay (sbti-poster Stimulus controller, unchanged) — dark
   theme re-skin of app/assets/tailwind/application.css's .poster-* /.p-*
   rules so the shared controller renders correctly against this subdomain's
   dark palette instead of the main site's light one. */
.poster-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgb(0 0 0 / 70%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.poster-container {
  display: flex;
  flex-direction: column;
  width: min(100%, 380px);
  max-height: 78vh;
  overflow: hidden;
  border-radius: 22px;
  background: #111117f2;
  border: 1px solid #ffffff24;
  box-shadow: 0 28px 90px #0000008f, inset 0 1px #ffffff1f;
}

.poster-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  -webkit-overflow-scrolling: touch;
}

.poster-preview {
  width: 100%;
  border-radius: 14px;
  -webkit-touch-callout: default;
}

.poster-bottom {
  flex-shrink: 0;
  padding: 10px 14px;
  padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
  border-top: 1px solid #ffffff1f;
  background: #111117f2;
}

.poster-loading,
.poster-error {
  padding: 60px 20px;
  color: #f6f0e8b8;
  text-align: center;
}

.poster-error {
  color: #ff8f75;
}

.poster-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.poster-btn-primary,
.poster-btn-secondary {
  cursor: pointer;
  border-radius: 14px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 800;
}

.poster-btn-primary {
  border: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, white), #f4eee7);
  color: #151217;
}

.poster-btn-secondary {
  border: 1px solid #ffffff24;
  background: #ffffff14;
  color: #f6f0e8;
}

/* Offscreen template captured by html-to-image — same technique as the sbti
   result page: parked at left:-9999px, briefly moved onscreen (still hidden
   under the overlay, which paints above it) while toPng() rasterizes it. */
.poster-html {
  position: fixed;
  top: 0;
  left: -9999px;
  z-index: 199;
  width: 375px;
  pointer-events: none;
  background: linear-gradient(180deg, #14141b 0%, #0d0d13 60%, #09090d 100%);
  color: #f6f0e8;
  font-family: Inter, SF Pro Display, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.poster-html--rendering {
  left: 0;
  opacity: 1;
}

.poster-html .p-top-bar,
.poster-html .p-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 16%, #14141b), #0d0d13);
}

.poster-html .p-top-bar {
  padding: 20px 22px 14px;
}

.poster-html .p-footer {
  padding: 14px 22px 20px;
}

.poster-html .p-footer-site {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.poster-html .p-footer-note {
  margin-top: 2px;
  color: #f6f0e89e;
  font-size: 11px;
}

.poster-html .p-header {
  padding: 22px 22px 20px;
  text-align: center;
}

.poster-html .p-kicker {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 22px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.poster-html .p-code {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 850;
  color: #fff;
}

.poster-html .p-badge {
  display: inline-block;
  margin-top: 12px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, #ffffff33);
  border-radius: 999px;
  padding: 8px 18px;
  background: color-mix(in srgb, var(--accent) 16%, #00000040);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.poster-html .p-content {
  padding: 0 22px 22px;
}

.poster-html .p-section {
  margin-top: 20px;
}

.poster-html .p-section-title {
  margin-bottom: 8px;
  border-bottom: 1.5px solid #ffffff1f;
  padding-bottom: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.poster-html .p-desc {
  color: #f6f0e8c7;
  font-size: 13px;
  line-height: 1.8;
}

/* ---------------------------------------------------------------------------
   Entrance animations — CSS port of the original bundle's framer-motion
   parameters (delays/offsets/easings transcribed 1:1 from the frozen JS).
   Deliberately NOT gated on prefers-reduced-motion: the original runs these
   regardless (only the ambient canvas respects reduce-motion/low-power). */
  @keyframes challenge-bubble-in {
    from { opacity: 0; transform: translateY(12px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  @keyframes challenge-fade-up-18 { from { opacity: 0; transform: translateY(18px); } }
  @keyframes challenge-fade-up-20 { from { opacity: 0; transform: translateY(20px); } }
  @keyframes challenge-fade-up-24 { from { opacity: 0; transform: translateY(24px); } }
  @keyframes challenge-fade-in { from { opacity: 0; } }
  @keyframes challenge-screen-in-x { from { opacity: 0; transform: translateX(28px); } }
  @keyframes challenge-screen-out-x { to { opacity: 0; transform: translateX(-28px); } }
  @keyframes challenge-scale-in { from { opacity: 0; transform: scale(.97); } }
  @keyframes challenge-stat-cell { from { transform: scale(.985); filter: brightness(1.45); } }
  @keyframes challenge-bar-grow { from { width: 0; opacity: .45; } }

  .screen.home, .screen.npd-home { animation: challenge-fade-in .45s ease-out both; }

  .chat-stack .bubble { animation: challenge-bubble-in .62s cubic-bezier(.22, 1, .36, 1) both; }
  .chat-stack .bubble:nth-child(1) { animation-delay: .45s; }
  .chat-stack .bubble:nth-child(2) { animation-delay: 1.15s; }
  .chat-stack .bubble:nth-child(3) { animation-delay: 1.85s; }

  .hero-copy { animation: challenge-fade-up-18 .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: 2.05s; }
  .screen.home > .hero-copy:first-child, .home-immediate .hero-copy { animation-delay: .12s; }
  .screen.npd-home .hero-copy { animation-delay: .12s; }

  .product-hall { animation: challenge-fade-up-20 .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .24s; }
  .world-card.single-boss-card { animation: challenge-fade-up-20 .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: 2.18s; }
  .category-list { animation: challenge-fade-up-20 .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: 3.45s; }

  .screen.game { animation: challenge-screen-in-x .3s cubic-bezier(.22, 1, .36, 1) both; }
  .screen.death { animation: challenge-scale-in .34s cubic-bezier(.22, 1, .36, 1) both; }
  .screen.result { animation: challenge-fade-up-24 .4s cubic-bezier(.22, 1, .36, 1) both; }
  .challenge-screen-exit { animation: challenge-screen-out-x .22s ease-in both; }

  .stat { animation: challenge-stat-cell .52s cubic-bezier(.22, 1, .36, 1) both; }
  .stat i { animation: challenge-bar-grow .92s cubic-bezier(.16, 1, .3, 1) both; }

  .challenge-cta-reveal { animation: challenge-fade-up-20 .45s cubic-bezier(.22, 1, .36, 1) both; }

  .choices button { transition: transform .12s ease; }
  .choices button:active { transform: scale(.98); }

/* The vendor sheet ends with a global reduce-motion kill-switch
   (animation-duration:.01ms!important on *). The original site's entrance
   animations were JS-driven inline styles and ran regardless of that setting,
   so re-assert our CSS durations to match the observed behavior. */
@media (prefers-reduced-motion: reduce) {
  .chat-stack .bubble { animation-duration: .62s !important; }
  .hero-copy, .product-hall, .world-card.single-boss-card, .category-list { animation-duration: .6s !important; }
  .screen.home, .screen.npd-home { animation-duration: .45s !important; }
  .screen.game { animation-duration: .3s !important; }
  .screen.death { animation-duration: .34s !important; }
  .screen.result { animation-duration: .4s !important; }
  .challenge-screen-exit { animation-duration: .22s !important; }
  .stat { animation-duration: .52s !important; }
  .stat i { animation-duration: .92s !important; }
  .challenge-cta-reveal { animation-duration: .45s !important; }
}

/* ---------------------------------------------------------------------------
   Rich death-report poster: QR, big heading/badge, toxic quote list and final
   stat bars. Empty sections collapse so the same template serves death /
   clear / npd posters. */
.poster-html .p-qr-box {
  flex: none;
  width: 62px;
  height: 62px;
  padding: 5px;
  background: #fdfaf4;
  border-radius: 10px;
}

.poster-html .p-qr-box svg {
  display: block;
  width: 100%;
  height: 100%;
}

.poster-html .p-heading {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .02em;
}

.poster-html .p-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 16px;
  font-size: 17px;
  font-weight: 700;
  color: #f2e7c9;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #d8b36a) 32%, #1a1a22), #1a1a22);
  border: 1px solid color-mix(in srgb, var(--accent, #d8b36a) 55%, transparent);
  border-radius: 999px;
}

.poster-html .p-toxic {
  display: grid;
  gap: 10px;
  margin: 14px 0 4px;
}

.poster-html .p-toxic p {
  margin: 0;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #d9d2c6;
  background: #ffffff08;
  border-left: 2px solid color-mix(in srgb, var(--accent, #d8b36a) 70%, transparent);
  border-radius: 0 10px 10px 0;
}

.poster-html .p-stats {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  background: #ffffff06;
  border: 1px solid #ffffff12;
  border-radius: 12px;
}

.poster-html .p-stats:empty { display: none; }

.poster-html .p-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.poster-html .p-stat-label {
  flex: none;
  width: 44px;
  color: #b9b1a4;
}

.poster-html .p-stat-track {
  flex: 1;
  height: 6px;
  overflow: hidden;
  background: #ffffff10;
  border-radius: 999px;
}

.poster-html .p-stat-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #d8b36a) 55%, #6b5a33), var(--accent, #d8b36a));
  border-radius: 999px;
}

.poster-html .p-stat-value {
  flex: none;
  width: 26px;
  text-align: right;
  color: #f2e7c9;
}

.poster-html .p-reason-section:has(.p-desc:empty),
.poster-html .p-stat-section:has(.p-desc:empty),
.poster-html .p-toxic:empty { display: none; }

/* ---------------------------------------------------------------------------
   Sibling-screen structure (original AnimatePresence tree): the JS render
   slot and the SSR shared-report wrapper are transparent to the shell's flex
   layout. The ambient canvas must never intercept clicks. */
.particles { pointer-events: none; }

.challenge-screen-slot { display: contents; }

[data-challenge-game-target="sharedReport"]:not(.hidden) { display: contents; }

   SSR SEO content section below the game (landing-copy layer). Dark, quiet,
   readable — deliberately secondary to the phone-shell above it. */
.challenge-seo {
  max-width: 560px;
  margin: 42px auto 0;
  padding: 0 22px 28px;
  color: #cfc8bb;
  font-size: 14.5px;
  line-height: 1.85;
}

.challenge-seo h2 {
  margin: 34px 0 12px;
  font-size: 19px;
  font-weight: 700;
  color: #f2e7c9;
}

.challenge-seo p { margin: 0 0 12px; }

.challenge-seo-data,
.challenge-seo-stages,
.challenge-seo-related {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.challenge-seo-data li,
.challenge-seo-related li a {
  display: block;
  padding: 10px 14px;
  background: #ffffff08;
  border: 1px solid #ffffff12;
  border-radius: 10px;
}

.challenge-seo-related li a {
  color: #e9ddba;
  text-decoration: none;
}

.challenge-seo-related li a:hover { border-color: #d8b36a66; }

.challenge-seo-stages { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.challenge-seo-stages li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  background: #ffffff06;
  border: 1px solid #ffffff10;
  border-radius: 9px;
}

.challenge-seo-stages li span {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #d8b36a;
  background: #d8b36a1f;
  border-radius: 50%;
}

.challenge-seo-faq details {
  padding: 12px 14px;
  margin-bottom: 8px;
  background: #ffffff06;
  border: 1px solid #ffffff10;
  border-radius: 10px;
}

.challenge-seo-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: #ece2cb;
}

.challenge-seo-faq details p { margin: 10px 0 0; }