/* FilmLook mobile web. Colours arrive from /api/config as CSS variables; these are the defaults.

   Everything scales from one fluid root size: 15 px on a small phone, 18 px on a desktop, with
   type, spacing and icons in rem so they move together. The column stays a comfortable reading
   width on any screen, and the card section becomes two columns where there is room. */
/* Self-hosted display faces (SIL OFL 1.1, see web/fonts/README.md): a Japanese-designed mincho for
   names and headlines, a rounded gothic for labels. Subsets of the interface's own characters. */
@font-face { font-family: "FilmLook Serif"; src: url("/fonts/filmlook-serif.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "FilmLook Rounded"; src: url("/fonts/filmlook-rounded.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bg: #FBF8F5; --surface: #F4ECE8; --text: #3F3A3B; --text2: #7A6F72; --accent: #9A5F66;
  --on-accent: #FFF9F7; --ink: #34504B; --divider: #E8DFDB; --matcha: #647761;
  --round: "FilmLook Rounded", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  /* Chinese serif faces first. Hiragino Mincho and Yu Mincho are Japanese and lack many simplified
     glyphs, so a line set in them falls back character by character and looks uneven. */
  /* Latin faces first, Chinese after: the browser picks a font per character, so Latin letters
     and digits come from Georgia and every Chinese character from one Chinese face. iPhones ship
     no Chinese serif, so the list ends in the system Chinese sans (PingFang on iOS, Noto Sans CJK
     on Android) rather than the generic serif, which iOS resolves glyph by glyph. */
  --serif: Georgia, "FilmLook Serif", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", -apple-system, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --zh-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --column: 40rem;  /* The widest the reading column gets; narrower screens use their full width. */
  --radius: 1.4rem;
  font-size: clamp(15px, 0.45vw + 13.4px, 18px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.55;
       font-family: var(--zh-sans);
       padding: 0 var(--gutter) calc(1.5rem + env(safe-area-inset-bottom)); }
#app, .top, .foot { width: 100%; max-width: var(--column); margin-inline: auto; min-width: 0; }
.round { font-family: var(--round); font-weight: 500; font-synthesis: none; }
.serif { font-family: var(--serif); font-weight: 400; }
h1, h2, h3, p { margin: 0; }
button, label.cta, label.ghost { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.top { display: flex; align-items: center; justify-content: space-between; padding: clamp(10px, 2vw, 18px) 0 .4rem; }
.wordmark { display: flex; align-items: center; gap: .5rem; color: var(--ink); font-family: var(--round); font-weight: 700; letter-spacing: .06em; font-size: 1.05rem; }
.mascot svg { width: 1.9rem; height: 1.9rem; display: block; }
.switches { display: flex; gap: .35rem; flex-shrink: 0; }
.lang { border: 1px solid var(--divider); background: transparent; color: var(--text2); border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; min-height: 2.2rem; white-space: nowrap; }

.hero { padding-top: .9rem; }
/* The width is in em, not ch: ch is the width of "0", half a Chinese character, so 16ch held only
   eight or nine characters and pushed the last one of 发现你的摄影风格基因 onto its own line. */
.hero h1 { font-size: clamp(1.6rem, .9rem + 3.4vw, 2.5rem); line-height: 1.2; color: var(--ink); margin-bottom: .6rem; max-width: 12em; text-wrap: balance; overflow-wrap: anywhere; }
.sub { font-size: 1rem; color: var(--text2); margin: 0 0 .9rem; max-width: 34rem; }
.pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.pill { font-size: .78rem; letter-spacing: .04em; padding: .32rem .8rem; border-radius: 999px; background: var(--surface); color: var(--accent); }
.cta, .primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.2rem; padding: .85rem 1.2rem; border-radius: 999px;
                 background: var(--accent); color: var(--on-accent); border: 0; font-size: 1.05rem; }
.primary:disabled { opacity: .6; cursor: progress; }
.ghost { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid var(--divider); color: var(--text2); font-size: .95rem; background: transparent; }
.plate { display: flex; justify-content: center; margin: 1.4rem 0 .6rem; }
.plate svg { width: clamp(220px, 62vw, 420px); height: auto; }
.steps { padding: 0 0 0 1.1rem; margin: .4rem 0 .6rem; color: var(--text2); font-size: .9rem; max-width: 34rem; }
.steps li { margin-bottom: .25rem; }
.privacy, .note { font-size: .8rem; color: var(--text2); line-height: 1.5; max-width: 36rem; }

.photo-section { padding-top: .6rem; }
.preview { width: 100%; max-height: 70vh; object-fit: contain; height: auto; border-radius: var(--radius); display: block; margin-bottom: .9rem; background: var(--surface); }
.row { display: flex; gap: .6rem; align-items: stretch; }
.row .primary { flex: 1; }
.status { font-size: .9rem; color: var(--accent); min-height: 1.4em; margin: .5rem 0 0; }

.ornament { display: flex; justify-content: center; align-items: center; gap: .9rem; margin: 1.6rem 0 1.1rem; }
.ornament svg { width: 1.6rem; height: 1.6rem; }
.ornament::before, .ornament::after { content: ""; flex: 1; max-width: 5rem; height: 1px; background: var(--divider); }

.result-card { background: var(--surface); border-radius: var(--radius); padding: 1.4rem 1.25rem 1.1rem; }
.kicker { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.kicker.zh { letter-spacing: .04em; }
.lead { color: var(--text2); margin: .5rem 0 .1rem; font-size: .95rem; }
.name { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.2rem + 3.6vw, 2.9rem); line-height: 1.12; color: var(--ink); overflow-wrap: anywhere; }
.other { color: var(--text2); font-size: .95rem; margin: .15rem 0 .9rem; }
.sim { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.seal { width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center;
        font-family: var(--serif); font-size: 1.3rem; color: var(--ink); flex-shrink: 0; }
.sim-words { color: var(--text2); font-size: .95rem; }
.keywords { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.keyword { font-size: .8rem; letter-spacing: .04em; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--divider); color: var(--accent); }
.quote { font-family: var(--serif); font-size: clamp(1.05rem, .9rem + .6vw, 1.25rem); line-height: 1.6; margin: 0 0 .4rem; }
.badge { display: inline-block; font-size: .72rem; color: var(--text2); border: 1px solid var(--divider); border-radius: 999px; padding: .12rem .6rem; margin-top: .5rem; }
.small { font-size: .8rem; color: var(--text2); line-height: 1.5; margin: .6rem 0 0; }
.loose { font-size: .85rem; color: var(--accent); margin: .5rem 0 0; }

h2.section { font-family: var(--round); font-size: 1.2rem; color: var(--ink); margin: 0 0 .6rem; }
.alts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
.alt { border: 1px solid var(--divider); border-radius: 1.1rem; padding: .9rem .85rem; background: var(--bg); }
.alt .name { font-size: 1.3rem; }
.alt .sim-words { font-size: .82rem; margin: .1rem 0 .4rem; }
.alt .keywords { gap: .25rem; margin-bottom: .5rem; }
.alt .keyword { font-size: .7rem; padding: .2rem .5rem; }
.alt p { font-size: .85rem; color: var(--text); margin: 0; line-height: 1.5; }

details { border: 1px solid var(--divider); border-radius: 1.1rem; padding: .75rem 1rem; margin-top: .9rem; background: var(--bg); }
summary { font-family: var(--round); font-weight: 700; color: var(--ink); cursor: pointer; min-height: 2rem; display: flex; align-items: center; }
details h3 { font-size: .9rem; color: var(--accent); margin: .9rem 0 .35rem; letter-spacing: .02em; }
details ul { padding-left: 1.1rem; margin: 0; font-size: .9rem; }
details li { margin-bottom: .25rem; }
details p { font-size: .9rem; margin: .25rem 0; }

.card-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; align-items: start; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .6rem; }
.chip { border: 1px solid var(--divider); background: transparent; color: var(--text2); border-radius: 999px; padding: .45rem .9rem; font-size: .88rem; min-height: 2.3rem; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#card-box { max-width: 26rem; width: 100%; margin-inline: auto; }
.card-preview { width: 100%; height: auto; border-radius: 1.1rem; display: block; box-shadow: 0 .6rem 1.8rem rgba(0,0,0,.08); }
.card-wait { border-radius: 1.1rem; background: var(--surface); aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; color: var(--text2); padding: 1rem; text-align: center; }
.actions { display: flex; gap: .6rem; margin-top: .75rem; }
.actions > * { flex: 1; }
.secondary { min-height: 3rem; padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: transparent; font-size: 1rem; }
.secondary:disabled { opacity: .6; }
.hint { font-size: .85rem; color: var(--text2); margin-top: .5rem; }

.film .score { font-family: var(--serif); font-size: clamp(2.8rem, 2rem + 3vw, 3.6rem); line-height: 1; color: var(--ink); }
.film .score span { font-size: 1.1rem; color: var(--text2); margin-left: .4rem; }
.film .dims { margin: .75rem 0 .5rem; }
.film h3 { font-size: .9rem; color: var(--accent); margin: 1rem 0 .35rem; letter-spacing: .02em; }
.film h4 { font-size: .9rem; color: var(--ink); margin: .9rem 0 .3rem; font-family: var(--round); }
.film ul { padding-left: 1.1rem; font-size: .9rem; }
.film p { font-size: .92rem; margin: .3rem 0; }
.film .mini { font-size: .78rem; color: var(--text2); line-height: 1.5; margin: .35rem 0; }
.film .target { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin: .1rem 0 .6rem; }
.film .match, .film .cand { border-top: 1px dashed var(--divider); padding-top: .5rem; margin-top: .5rem; }
.film .cand-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }

/* Measured data: bars, tables and the inline SVG charts, all in the page's own tokens. */
.bars { display: grid; gap: .35rem; margin: .4rem 0 .6rem; }
.bar-row { display: grid; grid-template-columns: minmax(5.5rem, 9rem) 1fr 2.6rem; align-items: center; gap: .5rem; font-size: .82rem; }
.bar-row .bar-label { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bar-label:empty { display: none; }
.bar-row:has(.bar-label:empty) { grid-template-columns: 1fr 2.6rem; }
.bar-track { height: .55rem; background: var(--divider); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.bar-value:empty { display: none; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .4rem 0 .6rem; }
table.data { border-collapse: collapse; width: 100%; font-size: .8rem; font-variant-numeric: tabular-nums; }
table.data th, table.data td { text-align: right; padding: .35rem .4rem; border-bottom: 1px solid var(--divider); vertical-align: top; }
table.data td { white-space: nowrap; }
table.data th { font-size: .74rem; line-height: 1.3; }
table.data th { color: var(--text2); font-weight: 500; }
table.data td.lbl, table.data th:first-child { text-align: left; color: var(--text2); }
.chart { margin: .6rem 0 .4rem; }
.chart svg { width: 100%; height: 7rem; display: block; }
.chart .legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .76rem; color: var(--text2); margin-bottom: .25rem; }
.chart .legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .3rem; vertical-align: -.05rem; }
.chart .axis-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text2); margin-top: .15rem; }
.grid { stroke: var(--divider); fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.scope-box, .ab-box { display: flex; justify-content: center; margin: .6rem 0; }
svg.scope { width: min(100%, 22rem); height: auto; }
svg.ab { width: min(100%, 24rem); height: auto; }
svg .dot { stroke: var(--divider); stroke-width: .3; }
svg .shape { fill: none; stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
svg .label { fill: var(--text); font-size: 11px; font-weight: 600; font-family: var(--round); }
svg .axis-title { fill: var(--text2); font-size: 6px; }
svg .move { stroke: var(--text); stroke-width: .6; }
svg .ref { fill: none; stroke: var(--text); stroke-width: .8; }
svg .moved { fill: var(--text); stroke: var(--surface); stroke-width: .8; }
.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; margin: .4rem 0 .6rem; }
.readouts div { background: var(--bg); border: 1px solid var(--divider); border-radius: .9rem; padding: .5rem .7rem; display: flex; flex-direction: column; }
.readouts span { font-size: .72rem; color: var(--text2); }
.readouts b { font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.recipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .4rem; margin: .4rem 0; }
.recipe div { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dashed var(--divider); padding: .25rem 0; font-size: .85rem; }
.recipe b { font-weight: 500; text-align: right; }
.film details.flat { border: 0; padding: 0; margin-top: .3rem; background: transparent; }
.film details.flat summary { font-size: .82rem; font-weight: 500; color: var(--text2); min-height: 1.6rem; }

.rating .scale { display: flex; gap: .5rem; margin: .4rem 0 .75rem; }
.rating .scale button { flex: 1; border: 1px solid var(--divider); background: transparent; border-radius: .8rem; min-height: 2.8rem; font-size: 1rem; color: var(--text2); }
.rating .scale button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rating .best { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .75rem; }
.rating .label { margin: .4rem 0 .1rem; font-size: .9rem; }
.rating textarea { width: 100%; border: 1px solid var(--divider); border-radius: .9rem; padding: .6rem .8rem; font: inherit; background: var(--bg); color: var(--text); resize: vertical; min-height: 4rem; }
.foot { text-align: center; font-size: .78rem; color: var(--text2); padding: 2rem 0 .6rem; }

/* Tablets and laptops: a wider column, the card controls beside the preview. */
@media (min-width: 760px) {
  :root { --column: 46rem; }
  .card-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .card-grid .card-controls { order: 1; }
  .card-grid #card-box { order: 2; }
  .alts { gap: .9rem; }
}
/* Large screens: the column stops growing, so lines never get too long to read. */
@media (min-width: 1200px) {
  :root { --column: 50rem; }
}
/* Short landscape phones: keep the illustration from pushing the upload button away. */
@media (max-height: 520px) and (orientation: landscape) {
  .plate svg { width: clamp(140px, 30vh, 240px); }
}

/* ---- Feedback sheet, badge reveal and the collection ---- */
.icon-btn { padding: .3rem .55rem; display: flex; align-items: center; }
.icon-btn svg { width: 1.3rem; height: 1.3rem; display: block; }
.icon-btn .count { font-size: .72rem; margin-left: .3rem; color: var(--accent); }
dialog.sheet { border: 0; border-radius: var(--radius); background: var(--bg); color: var(--text); padding: 1.3rem 1.2rem 1.1rem;
               width: min(100% - 2rem, 28rem); max-height: 88vh; overflow: auto; box-shadow: 0 1.2rem 3rem rgba(0,0,0,.18); }
dialog.sheet.wide { width: min(100% - 1.5rem, 42rem); }
dialog.sheet::backdrop { background: rgba(40, 32, 30, .45); backdrop-filter: blur(2px); }
dialog.sheet h2 { font-family: var(--round); font-size: 1.25rem; color: var(--ink); margin: 0 0 .3rem; }
dialog.sheet .sub { margin: 0 0 .8rem; }
.rate-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin: .5rem 0 .3rem; }
.rate-scale button { border: 1px solid var(--divider); background: var(--surface); border-radius: .9rem; min-height: 3.1rem; font-size: 1.15rem; color: var(--text2); font-family: var(--serif); }
.rate-scale button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rate-words { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text2); margin-bottom: .7rem; }
.rate-pick { text-align: center; font-size: .9rem; color: var(--accent); min-height: 1.4em; margin: 0 0 .6rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; margin: .5rem 0; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.tag-group { font-size: .74rem; color: var(--text2); margin: .45rem 0 .1rem; letter-spacing: .04em; }
.best.tags { margin: 0; gap: .35rem; }
.best.tags .chip { min-height: 2rem; padding: .3rem .75rem; font-size: .84rem; }
.tag-add { display: flex; gap: .5rem; margin: .55rem 0 .3rem; }
.tag-add input { flex: 1; min-width: 0; border: 1px solid var(--divider); border-radius: 999px; padding: .4rem .85rem; font: inherit; font-size: .86rem; background: var(--surface); color: var(--text); }
.tag-add button { white-space: nowrap; }
dialog.sheet input.stock { width: 100%; border: 1px solid var(--divider); border-radius: .9rem; padding: .5rem .8rem; font: inherit; font-size: .88rem; background: var(--surface); color: var(--text); margin: .1rem 0 .3rem; }
dialog.sheet textarea { width: 100%; border: 1px solid var(--divider); border-radius: .9rem; padding: .6rem .8rem; font: inherit; background: var(--surface); color: var(--text); resize: vertical; min-height: 3.6rem; }
.sheet-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.gate { border: 1px dashed var(--divider); border-radius: 1.1rem; padding: 1rem; text-align: center; background: var(--surface); }
.gate p { margin: 0 0 .7rem; font-size: .92rem; }
.badge-pick { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .6rem; }
.badge-pick button { border: 1px solid var(--divider); background: transparent; border-radius: .9rem; padding: .25rem .5rem .25rem .3rem; display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--text2); min-height: 2.3rem; }
.badge-pick button svg { width: 1.6rem; height: 1.6rem; }
.badge-pick button.on { border-color: var(--ink); color: var(--ink); background: var(--surface); }

.reveal { text-align: center; }
.reveal .art { position: relative; width: 9rem; height: 9rem; margin: .4rem auto .6rem; }
.reveal .art svg { width: 100%; height: 100%; animation: badge-in .7s cubic-bezier(.2,.9,.3,1.2) both; }
.reveal .name { font-family: var(--serif); font-size: 1.6rem; color: var(--ink); margin: .2rem 0 .1rem; }
.reveal .rarity { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.reveal .rarity.zh { letter-spacing: .04em; }
.spark { position: absolute; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); opacity: 0; animation: spark 1.3s ease-out .35s both; }
.spark:nth-child(2) { background: var(--matcha); animation-delay: .5s; }
.spark:nth-child(3) { background: var(--ink); animation-delay: .65s; width: .35rem; height: .35rem; }
.spark:nth-child(4) { animation-delay: .8s; width: .4rem; height: .4rem; }
@keyframes badge-in { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx, 2rem), var(--dy, -2.5rem)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .reveal .art svg, .spark { animation: none; } .spark { display: none; } }

.coll-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.coll-progress { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.coll-next { font-size: .85rem; color: var(--text2); margin: .2rem 0 .8rem; }
.shelf { font-family: var(--round); font-size: 1rem; color: var(--ink); margin: .9rem 0 .1rem; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .6rem; }
.badge-cell { border: 0; background: var(--surface); border-radius: 1.1rem; padding: .6rem .4rem .5rem; text-align: center; color: var(--text); cursor: pointer; }
.badge-cell svg { width: 4.6rem; height: 4.6rem; display: block; margin: 0 auto .3rem; }
.badge-cell.locked svg { filter: grayscale(1) opacity(.42); }
.badge-cell .bn { font-size: .78rem; line-height: 1.25; display: block; }
.badge-cell .bp { font-size: .7rem; color: var(--text2); display: block; margin-top: .15rem; }
.badge-detail { text-align: center; }
.badge-detail svg { width: 7rem; height: 7rem; }
.badge-detail.locked svg { filter: grayscale(1) opacity(.42); }
.meter { height: .5rem; border-radius: 999px; background: var(--divider); overflow: hidden; margin: .5rem 0; }
.meter i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }

/* Mystery badges, the rarity legend and the account sheet. */
.rarity-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .3rem; }
.rarity-pill { font-size: .74rem; padding: .22rem .6rem; border-radius: 999px; border: 1px solid var(--divider); color: var(--text2); }
.rarity-pill.rare { border-color: #9C8FB0; } .rarity-pill.epic { border-color: #B2767F; } .rarity-pill.legendary { border-color: #C2A05A; }
.badge-cell.mystery { cursor: default; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 7.2rem; border: 1.5px dashed var(--divider); background: transparent; }
.badge-cell.mystery .q { font-family: var(--serif); font-size: 2.2rem; color: var(--divider); line-height: 1; margin-bottom: .3rem; }
.badge-cell.mystery.rare { border-color: #9C8FB0; } .badge-cell.mystery.epic { border-color: #B2767F; } .badge-cell.mystery.legendary { border-color: #C2A05A; border-style: double; border-width: 3px; }
.badge-cell.mystery .bn { color: var(--text2); }
label.field { display: block; margin: .5rem 0; font-size: .85rem; color: var(--text2); }
label.field span { display: block; margin-bottom: .2rem; }
label.field input { width: 100%; border: 1px solid var(--divider); border-radius: .9rem; padding: .6rem .8rem; font: inherit; background: var(--surface); color: var(--text); }

/* Chinese pages: the long quote reads in the system Chinese face, one font for every character,
   so weights and sizes cannot drift mid-sentence on phones without a Chinese serif. */
html[lang="zh-CN"] .quote, html[lang="zh-CN"] .alt p, html[lang="zh-CN"] details p, html[lang="zh-CN"] details li { font-family: var(--zh-sans); font-weight: 400; letter-spacing: .01em; }
/* Names and headlines stay in the serif where one exists; Latin and digits come from Georgia. */
html[lang="zh-CN"] .name, html[lang="zh-CN"] .reveal .name { font-weight: 400; font-synthesis: none; }

/* Narrow phones: four header buttons and the wordmark do not fit, so the mascot stands alone. */
@media (max-width: 400px) {
  .wordmark > span:last-child { display: none; }
  .lang { padding: .3rem .55rem; }
  .icon-btn .count { margin-left: .2rem; }
}

/* Small print everywhere, not only in the film block: dialogs used to fall back to body size. */
.mini { font-size: .78rem; color: var(--text2); line-height: 1.5; margin: .35rem 0; }
/* The training choice: the note and the option are the same size and colour, so neither hides. */
.consent { margin: .7rem 0 .2rem; padding: .6rem .75rem; border-radius: .9rem; background: var(--surface); }
.consent .check { font-size: .84rem; line-height: 1.5; color: var(--text); margin: 0; }
.consent .check { align-items: flex-start; }
.consent .check input { margin-top: .2rem; flex-shrink: 0; }