/* The only stylesheet. Every number lives in :root (lib/og.js copies the
   colours). Dark, image-first, app-like: UCHAD's colours (magenta #D344FF accent,
   violet gradient CTA with a white label), green/yellow/neutral score colours.
   Phone first (390); tool column 480, text column 640, centred. */

:root {
  /* colour: charcoal background, white text plus two greys, one magenta accent (uchad.ai #D344FF).
     CTA = UCHAD's in-app violet button (sampled from its iPad "Begin Scan"), white label: >= 4.9:1 under the text */
  --bg: #121317;
  --card: #1b1c23;
  --card-2: #23242d;
  --line: #2b2c36;
  --track: #2b2c36;
  --ink: #ffffff;
  --muted: #a7a8b4;
  --subtle: #70717d;
  --accent: #d344ff;
  --cta-top: #d344ff;
  --cta-bottom: #4d01b1;
  --cta-ink: #ffffff;
  --glow: rgb(211 68 255 / 40%);
  --glow-soft: rgb(211 68 255 / 16%);
  --good: #4ade80;
  --mid: #facc15;
  --low: #9fa1ad;
  /* gacha rarities (public/shared/rarity.js): a game system of its own, used only by .r-rarity and the reveal */
  --rar-n: #9fa1ad;
  --rar-r: #60a5fa;
  --rar-sr: #2dd4bf;
  --rar-ssr: #fbbf24;
  --rar-ur: linear-gradient(135deg, #f87171 0%, #fbbf24 30%, #4ade80 55%, #60a5fa 78%, #c084fc 100%);
  --rar-ur-glow: #f472b6;
  --error-bg: #2a1e22;
  --error-line: #4a2d35;
  --scrim: rgb(18 19 23 / 0%);
  --scrim-end: #121317;
  --shade: rgb(0 0 0 / 55%);
  --overlay-ink: #ffffff;

  /* type scale */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-h1: 32px;
  --fs-h1-lg: 44px;
  --fs-h2: 26px;
  --fs-h2-lg: 32px;
  --fs-score: 88px;
  --fs-score-lg: 96px;
  --fs-chip-num: 28px;
  --fs-rarity: 72px;
  --fs-rarity-lg: 112px;
  --lh-body: 1.7;
  --lh-tight: 1.2;
  --lh-num: 1;
  --track-tight: -0.01em;
  --track-wide: 0.08em;
  --w-regular: 400;
  --w-bold: 700;
  --w-heavy: 800;

  /* spacing scale: 8 inside a group, 24 between groups, 64 between sections */
  --s2: 2px;
  --s4: 4px;
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --s64: 64px;
  --s96: 96px;
  --gutter: 16px;

  /* shapes and widths */
  --hair: 1px;
  --btn-h: 56px;
  --chip-h: 44px;
  --pill: 999px;
  --radius: 16px;
  --radius-sm: 10px;
  --bar-h: 6px;
  --dot: 8px;
  --ring: 4px;
  --avatar: 144px;
  --hero-h: 460px;
  --scan-h: 420px;
  --mcard-h: 150px;
  --col-tool: 480px;
  --col-text: 640px;
  --curve-h: 110px;
  --sw: 36px;
  --sw-sm: 24px;
  --stamp: 72px;
  --hist-h: 140px;
  --rot-stamp: -12deg;
  --header-h: 48px;
  --mark: 16px;
  /* app flow: phone frame, guide oval, shutter, bigger photo blocks per view */
  --phone: 430px;
  --phone-h: 900px;
  --oval-w: 66%;
  --shutter: 72px;
  --gtile-h: 180px;
  --avatar-lg: 176px;
  --curve-h-lg: 200px;
  --mcard-h-lg: 300px;
  --adv-img: 76px;
  --handle: 40px;
  --adv-num: 22px;
  --compare-h: 46dvh;
  --pot-photo-h: 36dvh;
  --pot-photo-h-locked: 26dvh;
  --rot-wm: -18deg;
  --slide-ms: 300ms;
  /* the gacha pull: shake, burst, letters land, the rest fades in (about 1.6 s in all) */
  --capsule: 150px;
  --pull-shake: 700ms;
  --pull-burst: 350ms;
  --pull-land: 400ms;
  --pull-fade: 300ms;
  --pull-t-burst: 650ms;
  --pull-t-land: 950ms;
  --pull-t-fade: 1300ms;
  --shadow-glow: 0 0 var(--s48) var(--glow);
  --shadow-ring: 0 0 0 var(--ring) var(--accent), 0 0 var(--s32) var(--glow);
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-num: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-16);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  line-break: strict;
}

h1, h2, .fine, .note, .btn, .tier, .chip-score, .t-label { word-break: auto-phrase; }
a { color: var(--ink); text-underline-offset: var(--s4); }
img, canvas, svg { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
button { font: inherit; color: inherit; }

/* numbers: heavy geometric sans, Latin digits */
.num, .r-score, .t-num, .chip-score b, .m-num, .kicker { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: calc(var(--col-text) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* header / footer */
.site-header { height: var(--header-h); display: flex; align-items: center; padding: 0 var(--gutter); }
.logo { display: inline-flex; align-items: center; gap: var(--s8); font-weight: var(--w-heavy); font-size: var(--fs-18); color: var(--ink); text-decoration: none; letter-spacing: var(--track-tight); }
/* wordmark capsule: accent top half, white bottom half */
.mark { width: var(--mark); height: var(--mark); border-radius: var(--pill); background: linear-gradient(180deg, var(--accent) 0 48%, var(--bg) 48% 52%, var(--ink) 52%); }
.site-footer { margin-top: var(--s96); padding-top: var(--s24); padding-bottom: var(--s64); border-top: var(--hair) solid var(--line); color: var(--subtle); font-size: var(--fs-14); display: grid; gap: var(--s8); }
.site-footer a { color: var(--subtle); }

/* ---------- first screen: image, H1, one button into the app flow ---------- */
.first { display: grid; gap: var(--s16); max-width: var(--col-tool); margin: 0 auto; }
.hero-img { position: relative; margin: 0 calc(-1 * var(--gutter)); height: var(--hero-h); overflow: hidden; background: var(--card); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--scrim) 60%, var(--scrim-end) 100%); pointer-events: none; }
.chip-score {
  position: absolute; left: var(--s16); bottom: var(--s24); z-index: 1;
  display: inline-flex; align-items: baseline; gap: var(--s8);
  padding: var(--s8) var(--s16); border-radius: var(--pill);
  background: var(--shade); color: var(--overlay-ink); backdrop-filter: blur(var(--s8));
  font-size: var(--fs-14); font-weight: var(--w-bold); line-height: var(--lh-tight);
}
.chip-score b { font-size: var(--fs-chip-num); font-weight: var(--w-heavy); line-height: var(--lh-num); }
.first h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--w-heavy); letter-spacing: var(--track-tight); text-align: center; }

.tool { display: grid; gap: var(--s12); }
.fine { font-size: var(--fs-12); color: var(--subtle); text-align: center; line-height: var(--lh-body); }
.fine a { color: var(--subtle); }
.status { padding: var(--s12) var(--s16); border-radius: var(--radius-sm); background: var(--card); text-align: center; font-size: var(--fs-14); color: var(--muted); }
.status.is-error { background: var(--error-bg); border: var(--hair) solid var(--error-line); color: var(--ink); }
.status.is-busy::after { content: ""; display: inline-block; width: 1em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* buttons: one solid per screen, everything else outline */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
  min-height: var(--btn-h); padding: var(--s12) var(--s24);
  border: var(--hair) solid transparent; border-radius: var(--pill);
  font: inherit; font-weight: var(--w-bold); font-size: var(--fs-16); line-height: var(--lh-tight);
  text-decoration: none; cursor: pointer;
}
.btn-primary { background: linear-gradient(180deg, var(--cta-top), var(--cta-bottom)); color: var(--cta-ink); box-shadow: 0 0 var(--s24) var(--glow); }
.btn-primary:hover { filter: brightness(1.04); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--muted); }
.btn-chip { min-height: var(--chip-h); padding: var(--s8) var(--s16); font-size: var(--fs-14); }
.btn-block { width: 100%; }
.btn.is-busy { opacity: 0.6; pointer-events: none; }
.btn:focus-visible, .gtile:focus-visible, .shutter:focus-visible, summary:focus-visible { outline: var(--s2) solid var(--ink); outline-offset: var(--s2); }

/* ---------- scan state ---------- */
.scan { display: grid; gap: var(--s16); }
.scan-frame { position: relative; height: var(--scan-h); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: 0 0 0 var(--hair) var(--line); }
.scan-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame .mesh { animation: reveal 1.1s ease-out both; }
@keyframes reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.scan-line { position: absolute; left: 0; right: 0; top: 0; height: var(--s2); background: var(--accent); box-shadow: var(--shadow-glow); animation: sweep 2.2s ease-in-out infinite alternate; }
@keyframes sweep { from { top: 0; } to { top: 100%; } }
.scan-steps { list-style: none; padding: 0; display: grid; gap: var(--s4); justify-items: center; font-size: var(--fs-14); color: var(--subtle); }
.scan-steps li { display: flex; align-items: center; gap: var(--s8); }
.scan-steps li::before { content: ""; width: var(--dot); height: var(--dot); border-radius: var(--pill); background: var(--line); }
.scan-steps li.is-active { color: var(--ink); }
.scan-steps li.is-active::before { background: var(--accent); box-shadow: 0 0 var(--s12) var(--glow); }
.scan-steps li.is-done { color: var(--muted); }
.scan-steps li.is-done::before { background: var(--good); }

/* ---------- the one card ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: var(--s16); }
.card-title { font-size: var(--fs-16); font-weight: var(--w-bold); line-height: var(--lh-tight); margin-bottom: var(--s12); }
.note { font-size: var(--fs-14); color: var(--subtle); margin-top: var(--s8); }

/* ---------- result ---------- */
.result { display: grid; gap: var(--s24); max-width: var(--col-tool); margin: 0 auto; }
.result[hidden] { display: none; }
.r-hero { position: relative; display: grid; justify-items: center; gap: var(--s8); padding: var(--s32) 0 var(--s16); text-align: center; }
.r-hero::before { content: ""; position: absolute; inset: 0 var(--s32); background: radial-gradient(ellipse at 50% 20%, var(--glow-soft), transparent 70%); pointer-events: none; }
.r-hero > * { position: relative; }
.avatar { width: var(--avatar); height: var(--avatar); border-radius: var(--pill); overflow: hidden; box-shadow: var(--shadow-ring); margin-bottom: var(--s16); background: var(--card); }
.avatar canvas { width: 100%; height: 100%; object-fit: cover; }
.r-label { font-size: var(--fs-14); font-weight: var(--w-bold); color: var(--muted); letter-spacing: var(--track-wide); }
.r-score { font-size: var(--fs-score); font-weight: var(--w-heavy); line-height: var(--lh-num); letter-spacing: var(--track-tight); }
.r-score small { font-size: var(--fs-30); color: var(--muted); margin-left: var(--s4); font-weight: var(--w-bold); }
.r-top { font-size: var(--fs-20); font-weight: var(--w-bold); color: var(--muted); }
.r-name { font-size: var(--fs-40); font-weight: var(--w-heavy); line-height: var(--lh-tight); letter-spacing: var(--track-tight); }
.tier { display: inline-flex; align-items: center; gap: var(--s8); min-height: var(--chip-h); padding: 0 var(--s16); border: var(--hair) solid var(--line); border-radius: var(--pill); font-weight: var(--w-bold); font-size: var(--fs-14); background: var(--card); }
.dot { width: var(--dot); height: var(--dot); border-radius: var(--pill); background: var(--low); flex: none; }
.dot.good { background: var(--good); box-shadow: 0 0 var(--s8) var(--good); }
.dot.mid { background: var(--mid); box-shadow: 0 0 var(--s8) var(--mid); }

/* rarity badge: letters in the rarity colour (UR a rainbow), one line under them */
.r-rarity { display: grid; justify-items: center; gap: var(--s4); --rc: var(--rar-n); --rc-glow: var(--rar-n); }
.r-rarity.is-R { --rc: var(--rar-r); --rc-glow: var(--rar-r); }
.r-rarity.is-SR { --rc: var(--rar-sr); --rc-glow: var(--rar-sr); }
.r-rarity.is-SSR { --rc: var(--rar-ssr); --rc-glow: var(--rar-ssr); }
.r-rarity.is-UR { --rc: var(--rar-ur-glow); --rc-glow: var(--rar-ur-glow); }
.r-rarity b { font-family: var(--font-num); font-size: var(--fs-rarity); font-weight: var(--w-heavy); line-height: var(--lh-num); letter-spacing: var(--track-tight); color: var(--rc); text-shadow: 0 0 var(--s24) var(--rc-glow); }
.r-rarity.is-UR b { background: var(--rar-ur); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 var(--s12) var(--rc-glow)); }
.r-rarity span { font-size: var(--fs-14); font-weight: var(--w-bold); color: var(--muted); }
/* the small chip under heroes led by another number (animal, PSL, age, ...): same letters and line, in a pill, no reveal */
.r-rarity.is-small { display: inline-flex; align-items: center; gap: var(--s8); min-height: var(--chip-h); padding: 0 var(--s16); border: var(--hair) solid var(--line); border-radius: var(--pill); background: var(--card); }
.r-rarity.is-small b { font-size: var(--fs-18); text-shadow: none; }

/* the gacha pull (public/app.js reveal): the hero's children wait, the capsule shakes and bursts, the letters land, the rest fades in */
.capsule { position: absolute; left: 50%; top: 50%; width: var(--capsule); height: var(--capsule); margin: calc(-0.5 * var(--capsule)) 0 0 calc(-0.5 * var(--capsule)); border-radius: var(--pill); background: linear-gradient(180deg, var(--accent) 0 49%, var(--bg) 49% 51%, var(--ink) 51%); box-shadow: var(--shadow-glow); }
.capsule i { position: absolute; inset: calc(-0.5 * var(--capsule)); border-radius: var(--pill); background: radial-gradient(circle, var(--rc-glow) 0%, transparent 60%); opacity: 0; }
.is-pull { --rc-glow: var(--rar-n); min-height: calc(var(--capsule) * 2); }
.is-pull:has(.is-R) { --rc-glow: var(--rar-r); }
.is-pull:has(.is-SR) { --rc-glow: var(--rar-sr); }
.is-pull:has(.is-SSR) { --rc-glow: var(--rar-ssr); }
.is-pull:has(.is-UR) { --rc-glow: var(--rar-ur-glow); }
.is-pull > :not(.capsule) { opacity: 0; }
.is-pull .capsule { animation: shake var(--pull-shake) ease-in-out, burst var(--pull-burst) ease-in var(--pull-t-burst) forwards; }
.is-pull .capsule i { animation: flash var(--pull-burst) ease-out var(--pull-t-burst) forwards; }
.is-pull .r-rarity { animation: land var(--pull-land) cubic-bezier(0.2, 1.4, 0.4, 1) var(--pull-t-land) forwards; }
.is-pull > :not(.capsule, .r-rarity) { animation: rise var(--pull-fade) ease-out var(--pull-t-fade) forwards; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg) translateX(-6px); } 30% { transform: rotate(12deg) translateX(6px); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } 75% { transform: rotate(-5deg); } 90% { transform: rotate(3deg); } }
@keyframes burst { to { transform: scale(1.8); opacity: 0; } }
@keyframes flash { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes land { 0% { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(var(--s8)); } to { opacity: 1; transform: none; } }

/* percentile curve */
.curve { position: relative; padding: var(--s8) 0 var(--s32); }
.curve svg { width: 100%; height: var(--curve-h); }
.curve-you { position: absolute; bottom: 0; transform: translateX(-50%); font-size: var(--fs-12); font-weight: var(--w-bold); color: var(--ink); white-space: nowrap; }
.curve-you::before { content: ""; display: block; margin: 0 auto var(--s4); width: 0; height: 0; border-left: var(--s8) solid transparent; border-right: var(--s8) solid transparent; border-bottom: var(--s8) solid var(--ink); }

/* tiles: potential pair and part scores */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.tile { position: relative; background: var(--card); border-radius: var(--radius); padding: var(--s16); display: grid; gap: var(--s8); align-content: start; }
.tile.is-accent { box-shadow: inset 0 0 0 var(--hair) var(--accent), 0 0 var(--s24) var(--glow-soft); }
.t-label { font-size: var(--fs-12); font-weight: var(--w-bold); color: var(--muted); letter-spacing: var(--track-wide); }
.t-label.good { color: var(--good); }
.t-label.mid { color: var(--mid); }
.t-num { font-size: var(--fs-40); font-weight: var(--w-heavy); line-height: var(--lh-num); letter-spacing: var(--track-tight); }
.t-delta { position: absolute; top: var(--s12); right: var(--s12); font-size: var(--fs-14); font-weight: var(--w-heavy); color: var(--good); font-family: var(--font-num); }
.bar { height: var(--bar-h); border-radius: var(--pill); background: var(--track); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: var(--pill); background: var(--low); }
.bar.good span { background: var(--good); }
.bar.mid span { background: var(--mid); }

/* measurement image cards */
.mcard { padding: 0; overflow: hidden; }
.mcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
.m-img { height: var(--mcard-h); background: var(--card-2); }
.m-img:empty { display: none; }
.m-img canvas { width: 100%; height: 100%; object-fit: cover; }
.m-body { padding: var(--s12) var(--s16) var(--s16); display: grid; gap: var(--s4); }
.m-num { font-size: var(--fs-24); font-weight: var(--w-heavy); line-height: var(--lh-num); letter-spacing: var(--track-tight); }
.m-line { font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-tight); }
.row { display: flex; align-items: baseline; gap: var(--s12); padding: var(--s8) 0; border-top: var(--hair) solid var(--line); font-size: var(--fs-14); line-height: var(--lh-tight); }
.card-title + .row { border-top: 0; }
.row-label { flex: 0 0 auto; color: var(--muted); }
.row-value { margin-left: auto; text-align: right; font-weight: var(--w-bold); }
.row-value small { display: block; margin-top: var(--s4); font-weight: var(--w-regular); color: var(--subtle); font-size: var(--fs-12); }

.tips { padding-left: 1.2em; display: grid; gap: var(--s8); font-size: var(--fs-14); color: var(--muted); }

.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.share-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* advice cards (advice view): part crop, name + verdict chip, the one action, the gain; change items numbered */
.advice { list-style: none; padding: 0; display: grid; gap: var(--s8); }
.adv { display: grid; grid-template-columns: var(--adv-img) 1fr; gap: var(--s12); align-items: center; padding: var(--s12); background: var(--card); border-radius: var(--radius); }
.adv.is-change { box-shadow: inset 0 0 0 var(--hair) var(--accent); }
.adv-img { position: relative; width: var(--adv-img); height: var(--adv-img); border-radius: var(--radius-sm); overflow: hidden; background: var(--card-2); }
.adv-img canvas { width: 100%; height: 100%; object-fit: cover; }
.adv-num, .mark-n { position: absolute; display: grid; place-items: center; width: var(--adv-num); height: var(--adv-num); border-radius: var(--pill); background: var(--accent); color: var(--cta-ink); font-family: var(--font-num); font-size: var(--fs-12); font-weight: var(--w-heavy); font-style: normal; line-height: var(--lh-num); box-shadow: 0 0 var(--s8) var(--glow); }
.adv-num { left: var(--s4); top: var(--s4); }
.adv-body { position: relative; display: grid; gap: var(--s4); min-width: 0; }
.adv-head { display: flex; align-items: center; gap: var(--s8); font-size: var(--fs-16); line-height: var(--lh-tight); }
.adv-chip { display: inline-flex; align-items: center; gap: var(--s4); font-size: var(--fs-12); color: var(--muted); }
.adv-text { font-size: var(--fs-14); color: var(--muted); line-height: 1.5; padding-right: var(--s48); }
.adv-gain { position: absolute; right: 0; bottom: 0; color: var(--accent); font-size: var(--fs-18); font-weight: var(--w-heavy); }

/* before / after control (public/app.js compare): the after on the LEFT of the bar, a round handle with arrows,
   numbered markers on the changed parts, press-and-hold (.is-hold) shows the whole before */
.compare { position: relative; border-radius: var(--radius-sm); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; cursor: ew-resize; outline: none; }
.compare img { width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.compare .after-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--cut, 50%)) 0 0); }
.compare .after { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.compare.is-hold .after-wrap, .compare.is-hold .compare-line, .compare.is-hold .compare-tag.l { opacity: 0; }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: var(--s2); margin-left: -1px; background: var(--overlay-ink); box-shadow: 0 0 var(--s4) var(--shade); pointer-events: none; }
.compare-handle { position: absolute; top: 50%; left: 50%; width: var(--handle); height: var(--handle); transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: var(--pill); background: var(--overlay-ink); color: var(--bg); font-size: var(--fs-20); font-weight: var(--w-heavy); font-style: normal; letter-spacing: var(--s2); line-height: var(--lh-num); box-shadow: 0 0 var(--s12) var(--shade); }
.compare:focus-visible .compare-handle { box-shadow: 0 0 0 var(--s2) var(--accent), 0 0 var(--s12) var(--shade); }
.compare-tag { position: absolute; top: var(--s8); padding: var(--s2) var(--s8); border-radius: var(--radius-sm); background: var(--shade); color: var(--overlay-ink); font-size: var(--fs-12); font-weight: var(--w-bold); pointer-events: none; }
.compare-tag.l { left: var(--s8); }
.compare-tag.r { right: var(--s8); }
.mark-n { transform: translate(-50%, -50%); box-shadow: 0 0 0 var(--s2) var(--overlay-ink), 0 0 var(--s8) var(--shade); }
/* paywall (locked state): blurred action text with a lock line, a smaller after preview with a watermark band */
.adv.is-locked .blur { filter: blur(var(--s4)); user-select: none; }
.adv-lock { display: block; margin-top: var(--s4); font-size: var(--fs-12); font-weight: var(--w-bold); color: var(--accent); }
.pot-photo.is-locked { height: var(--pot-photo-h-locked); }
.wm { position: absolute; left: -20%; right: -20%; top: 50%; transform: translateY(-50%) rotate(var(--rot-wm)); padding: var(--s8) 0; text-align: center; background: var(--shade); color: var(--overlay-ink); font-size: var(--fs-14); font-weight: var(--w-heavy); letter-spacing: var(--track-wide); pointer-events: none; }

/* ---------- example gallery ---------- */
.gallery { margin-top: var(--s64); max-width: var(--col-tool); margin-left: auto; margin-right: auto; display: grid; gap: var(--s16); }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.example { margin: 0; background: var(--card); border-radius: var(--radius); overflow: hidden; }
.example img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; background: var(--card-2); }
.example[data-kind="card"] img, .example[data-kind="mirror"] img { object-fit: contain; background: var(--bg); }
.example figcaption { padding: var(--s12) var(--s16); font-size: var(--fs-14); color: var(--muted); line-height: var(--lh-tight); }
.example figcaption b { display: block; margin-bottom: var(--s4); font-size: var(--fs-20); color: var(--ink); font-weight: var(--w-heavy); font-family: var(--font-num); }

/* ---------- content sections (numbered, app cards, accordions) ---------- */
.content { margin-top: var(--s64); display: grid; gap: var(--s64); }
.sec { display: grid; gap: var(--s16); }
.kicker { font-size: var(--fs-12); font-weight: var(--w-bold); letter-spacing: var(--track-wide); color: var(--accent); margin-bottom: calc(-1 * var(--s8)); }
.sec h2, .content h1 { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--w-heavy); letter-spacing: var(--track-tight); text-wrap: balance; }
.content h1 { font-size: var(--fs-h1); }
.sec p, .prose p, .prose li { color: var(--muted); }
.sec p strong { color: var(--ink); }
.cards { display: grid; gap: var(--s8); }
.cards .card h3 { font-size: var(--fs-18); font-weight: var(--w-bold); line-height: var(--lh-tight); margin-bottom: var(--s8); color: var(--ink); }
.list { padding-left: 1.4em; display: grid; gap: var(--s8); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); background: var(--card); border-radius: var(--radius); overflow: hidden; }
.table th, .table td { padding: var(--s12) var(--s16); border-bottom: var(--hair) solid var(--line); text-align: left; }
.table tr:last-child td { border-bottom: 0; }
.table th { color: var(--subtle); font-weight: var(--w-bold); }
.acc { padding: 0; }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s16); padding: var(--s16); font-weight: var(--w-bold); line-height: var(--lh-tight); color: var(--ink); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; flex: none; color: var(--subtle); font-size: var(--fs-20); font-family: var(--font-num); line-height: var(--lh-num); }
.acc[open] summary::after { content: "\2212"; }
.acc-body { padding: 0 var(--s16) var(--s16); display: grid; gap: var(--s12); font-size: var(--fs-14); color: var(--muted); }
.faq { display: grid; gap: var(--s8); }
.others { font-size: var(--fs-14); color: var(--subtle); }
.others a { color: var(--muted); }
.center { text-align: center; }
.prose { display: grid; gap: var(--s16); max-width: var(--col-text); }
.prose h2 { margin-top: var(--s32); font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--w-heavy); letter-spacing: var(--track-tight); }

/* share page */
.stack { display: grid; gap: var(--s8); margin: var(--s24) auto 0; max-width: var(--col-tool); }
.hero-share { padding: var(--s24) 0 0; text-align: center; }
.hero-share h1 { font-size: var(--fs-20); color: var(--muted); font-weight: var(--w-bold); }

/* Phase D blocks: colour swatches, lighting warning, mirror pair, 100-point sheet, age input, answer card, histogram */
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s12) var(--s8); margin-bottom: var(--s16); }
.swatches.is-small { grid-template-columns: repeat(5, 1fr); }
.sw { display: grid; justify-items: center; gap: var(--s4); font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-tight); text-align: center; }
.sw i { width: var(--sw); height: var(--sw); border-radius: var(--pill); background: var(--c); box-shadow: 0 0 0 var(--hair) var(--line); }
.is-small .sw i { width: var(--sw-sm); height: var(--sw-sm); }
.palette .card-title:not(:first-child) { margin-top: var(--s8); }
.warn { padding: var(--s12) var(--s16); border-radius: var(--radius-sm); border: var(--hair) solid var(--line); background: var(--card); font-size: var(--fs-14); color: var(--muted); }
.mirror { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.mirror figure { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.mirror canvas { width: 100%; height: auto; }
.mirror figcaption { padding: var(--s8) var(--s12); font-size: var(--fs-12); color: var(--muted); }
.cert { margin-top: var(--s16); padding: var(--s32) var(--s16) var(--s24); border: var(--hair) solid var(--line); border-radius: var(--radius); background: var(--card); }
.cert-title { font-size: var(--fs-18); font-weight: var(--w-heavy); letter-spacing: var(--track-wide); padding-bottom: var(--s8); border-bottom: var(--hair) solid var(--line); }
.cert-rows { width: 100%; text-align: left; margin-top: var(--s8); }
.stamp { position: absolute; top: var(--s16); right: var(--s16); width: var(--stamp); height: var(--stamp); display: grid; place-items: center; border: var(--s2) solid var(--accent); border-radius: var(--pill); color: var(--accent); font-size: var(--fs-14); font-weight: var(--w-heavy); transform: rotate(var(--rot-stamp)); }
.age-in { display: grid; gap: var(--s8); justify-items: center; text-align: center; }
.age-in label { font-size: var(--fs-14); color: var(--muted); }
.age-in input { width: 50%; min-height: var(--chip-h); border-radius: var(--pill); border: var(--hair) solid var(--line); background: var(--card-2); color: var(--ink); font: inherit; font-size: var(--fs-20); text-align: center; }
.answer { max-width: var(--col-tool); margin: var(--s48) auto 0; }
.answer p { color: var(--muted); }
.hist { display: grid; gap: var(--s8); }
.hist svg { width: 100%; height: var(--hist-h); }
.hist-axis { display: flex; justify-content: space-between; font-size: var(--fs-12); color: var(--subtle); font-family: var(--font-num); }

/* ---------- app flow (/app): one full-screen view per step, phone frame on desktop ---------- */
body.bare { overflow: hidden; }
.app { height: 100dvh; max-width: var(--phone); margin: 0 auto; display: flex; flex-direction: column; padding: 0 var(--gutter) var(--s16); }
.topbar { flex: none; height: var(--header-h); display: grid; grid-template-columns: var(--chip-h) 1fr var(--chip-h); align-items: center; }
.back { width: var(--chip-h); height: var(--chip-h); margin-left: calc(-1 * var(--s12)); border: 0; background: transparent; color: var(--muted); font-size: var(--fs-30); line-height: var(--lh-num); cursor: pointer; border-radius: var(--pill); }
.back:hover { color: var(--ink); }
.dots { display: flex; justify-content: center; gap: var(--s8); }
.dots i { width: var(--dot); height: var(--dot); border-radius: var(--pill); background: var(--line); }
.dots i.is-done { background: var(--muted); }
.dots i.is-now { background: var(--accent); box-shadow: 0 0 var(--s12) var(--glow); }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s16); }
.v-cap { flex: none; font-size: var(--fs-20); font-weight: var(--w-heavy); line-height: var(--lh-tight); letter-spacing: var(--track-tight); text-align: center; }
.v-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; gap: var(--s16); overflow-y: auto; }
.v-cta { flex: none; display: grid; gap: var(--s8); justify-items: center; padding-bottom: env(safe-area-inset-bottom); }
.v-cta .btn { width: 100%; }
.v-cta:empty { display: none; }
.link { display: inline-flex; align-items: center; min-height: var(--chip-h); padding: 0 var(--s16); border: 0; background: none; color: var(--muted); font-size: var(--fs-14); text-decoration: underline; text-underline-offset: var(--s4); cursor: pointer; }
.gtiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); }
.gtile { min-height: var(--gtile-h); border: var(--hair) solid var(--line); border-radius: var(--radius); background: var(--card); font-size: var(--fs-24); font-weight: var(--w-heavy); cursor: pointer; }
.gtile:hover { border-color: var(--accent); }
.guide, .cam { position: relative; flex: 1; min-height: 0; border-radius: var(--radius); background: var(--card); overflow: hidden; }
.guide { aspect-ratio: 3 / 4; align-self: center; max-width: 100%; }
.oval { position: absolute; left: 50%; top: 45%; width: var(--oval-w); aspect-ratio: 4 / 5; transform: translate(-50%, -50%); border: var(--s2) solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 100vmax var(--shade); pointer-events: none; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam.is-hold .oval { border-color: var(--good); box-shadow: 0 0 0 100vmax var(--shade), 0 0 var(--s24) var(--good); }
.shutter { width: var(--shutter); height: var(--shutter); border-radius: var(--pill); background: var(--ink); border: var(--s4) solid var(--bg); box-shadow: 0 0 0 var(--s2) var(--ink); cursor: pointer; }
.shutter:active { transform: scale(0.94); }
.view .scan { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s16); }
.view .scan-frame { flex: 1; min-height: 0; height: auto; }
.view .r-hero { padding: var(--s16) 0; }
/* score view: the rarity letters and 上位% carry the result; the raw 偏差値 is the small line under them */
.is-score .r-rarity b { font-size: var(--fs-rarity-lg); }
.is-score .r-rarity span { font-size: var(--fs-16); color: var(--ink); }
.is-score .r-score { font-size: var(--fs-36); order: 2; }
.is-score .r-label { order: 2; }
.is-score .r-top { order: 1; font-size: var(--fs-30); color: var(--ink); }
.is-score .tier { order: 3; }
.view .avatar { width: var(--avatar-lg); height: var(--avatar-lg); }
.view .curve svg { height: var(--curve-h-lg); }
.slides-wrap { overflow: hidden; }
.slides { display: flex; transition: transform var(--slide-ms) ease; }
.slide { flex: 0 0 100%; min-width: 0; display: grid; gap: var(--s8); align-content: start; }
.slide .m-img { height: var(--mcard-h-lg); }
.view .compare .before { max-height: var(--compare-h); object-fit: cover; }
.scard { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s12); }
.scard img { flex: 1; min-height: 0; width: 100%; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.scard .share-grid { width: 100%; }
.pot-photo { flex: none; height: var(--pot-photo-h); aspect-ratio: 1; margin: 0 auto; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-ring); background: var(--card); }
.pot-photo canvas, .pot-photo .compare, .view .pot-photo .compare img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.pot-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 var(--s8); text-align: center; font-family: var(--font-num); font-size: var(--fs-30); font-weight: var(--w-heavy); line-height: var(--lh-tight); letter-spacing: var(--track-tight); }
.pot-line b { color: var(--accent); font-size: var(--fs-24); }

@media (min-width: 720px) {
  body.bare { padding: var(--s24) 0; }
  .app { height: calc(100dvh - 2 * var(--s24)); max-height: var(--phone-h); border: var(--hair) solid var(--line); border-radius: var(--s32); padding: var(--s8) var(--s16) var(--s16); }
  .hero-img { margin: 0; border-radius: var(--radius); }
  .first h1 { font-size: var(--fs-h1-lg); }
  .sec h2 { font-size: var(--fs-h2-lg); }
  .r-score { font-size: var(--fs-score-lg); }
  .content { margin-top: var(--s96); }
  .site-header { max-width: calc(var(--col-text) + 2 * var(--gutter)); margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .status.is-busy::after { animation: none; content: "..."; }
  .scan-line, .scan-frame .mesh { animation: none; }
  .slides { transition: none; }
}