:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: one full-bleed sky is the stage. Chrome hugs the edges like the lettering on an atlas plate:
   a vertical title at the left, vertical tabs at the right, the pen dock at the bottom. Results arrive as a bound sheet. */
:root {
  --ink: #090d20;        /* the night behind everything */
  --indigo: #131b3d;     /* 瓷青 paper */
  --indigo-2: #1c2653;   /* raised paper */
  --gold: #dcb96f;       /* 泥金: lines, titles, the one accent */
  --gold-dim: #a48d57;
  --moon: #eef1fb;       /* 月白: body text and stars */
  --mist: #9aa5cc;       /* secondary text */
  --seal: #c8452f;       /* 朱砂: stamps and 忌 only */
  --hair: rgba(220, 185, 111, .32);
  --f-display: "ZCOOL XiaoWei", "Noto Serif SC", "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --f-body: "Noto Serif SC", "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --f-latin: "Cormorant Garamond", "Noto Serif SC", "Songti SC", Georgia, serif;
  color-scheme: dark;
}
html, body { height: 100%; }
body { background: var(--ink); color: var(--moon); font-family: var(--f-body); font-size: 15px; line-height: 1.75; overflow: hidden; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
#sky, .mast, .tabs, .hud { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#app { position: relative; height: 100%; overflow: hidden; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#sky:focus-visible { outline-offset: -3px; }
#sky.star { cursor: pointer; }

/* ---- lettering on the plate ---- */
.mast { position: absolute; left: 16px; top: 16px; display: flex; gap: 9px; writing-mode: vertical-lr; pointer-events: none; }
.mast-title { margin: 0; font: 400 25px/1 var(--f-display); letter-spacing: .4em; color: var(--gold); white-space: nowrap; }
.mast-sub { margin: 0; white-space: nowrap; padding-left: 8px; border-left: 1px solid var(--hair); font-size: 11.5px; line-height: 1; letter-spacing: .34em; color: var(--mist); }
.tabs { position: absolute; right: 16px; top: 16px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.tab { writing-mode: vertical-rl; padding: 11px 7px 8px; font-size: 13px; line-height: 1; letter-spacing: .28em; color: var(--gold); background: rgba(19, 27, 61, .78); border: 1px solid var(--hair); border-radius: 2px; }
.tab[aria-pressed="false"] { color: var(--mist); border-color: rgba(154, 165, 204, .28); }
.tab:hover { background: var(--indigo-2); }
.plain .tabs { display: none; }

.hud { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; }
.status { margin: 0; max-width: 100%; padding: 3px 12px; font-size: 13px; text-align: center; text-wrap: balance; color: var(--moon); background: rgba(9, 13, 32, .6); border-radius: 2px; }
.status b { font-weight: 600; color: var(--gold); }
.dock { display: flex; max-width: 100%; pointer-events: auto; background: rgba(19, 27, 61, .9); border: 1px solid var(--hair); border-radius: 3px; overflow: hidden; }
.dock button { padding: 12px 14px; white-space: nowrap; letter-spacing: .12em; font-size: 14px; background: none; border: 0; border-right: 1px solid var(--hair); }
.dock button:hover:not(:disabled) { background: var(--indigo-2); }
.dock button:disabled { color: rgba(154, 165, 204, .42); cursor: default; }
.dock .primary { padding-inline: 18px; border-right: 0; font-weight: 600; color: #1b1505; background: var(--gold); }
.dock .primary:hover:not(:disabled) { background: #e8c984; }
.dock .primary:disabled { color: rgba(238, 241, 251, .42); background: rgba(220, 185, 111, .16); }

/* ---- shared pieces ---- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.latin { margin: 0; font: italic 500 17px/1.2 var(--f-latin); letter-spacing: .08em; color: var(--gold-dim); }
.btn { padding: 9px 16px; font-size: 14px; letter-spacing: .1em; color: var(--gold); background: none; border: 1px solid var(--hair); border-radius: 2px; }
.btn:hover { background: rgba(220, 185, 111, .1); }
.btn.solid { font-weight: 600; color: #1b1505; background: var(--gold); border-color: var(--gold); }
.btn.solid:hover { background: #e8c984; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.field { display: flex; gap: 8px; min-width: 0; }
.field input, .names input, .codeout { flex: 1; min-width: 0; padding: 8px 10px; color: var(--moon); background: rgba(9, 13, 32, .55); border: 1px solid rgba(154, 165, 204, .3); border-radius: 2px; }
.field input { width: 0; }   /* grows to fill the row; left at its built-in width it would push a narrow plate wider than the screen */
.field input:focus, .names input:focus, .codeout:focus { outline: none; border-color: var(--gold); }
.codeout { width: 100%; font-size: 13px; }
.hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mist); }
.err { margin: 6px 0 0; font-size: 12.5px; color: #f0a391; }

/* ---- the opening plate ---- */
.veil { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: radial-gradient(ellipse at 50% 45%, rgba(9, 13, 32, .1), rgba(9, 13, 32, .5)); }
.plate { width: 100%; max-width: 408px; padding: 28px 26px 22px; display: flex; flex-direction: column; gap: 14px; background: rgba(19, 27, 61, .93); border: 1px solid var(--hair); outline: 1px solid var(--hair); outline-offset: 5px; }
.plate-title { margin: 0; font: 400 clamp(34px, 10vw, 44px)/1.15 var(--f-display); letter-spacing: .06em; color: var(--gold); text-wrap: balance; }
.plate p { margin: 0; }
.code-row { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--hair); }
.code-row label { font-size: 13px; color: var(--mist); }

/* ---- the committee at work ---- */
.judge { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(9, 13, 32, .5); pointer-events: none; }
.judge ol { margin: 0; padding: 18px 26px; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; letter-spacing: .12em; background: rgba(19, 27, 61, .93); border: 1px solid var(--hair); }
.judge li { opacity: .25; transition: opacity .25s; }
.judge li.on { opacity: 1; }
.judge li.on:last-child { color: var(--gold); }

/* ---- the bound sheet ---- */
.sheet { position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: min(460px, 100%); padding: 0 20px 26px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; overscroll-behavior: contain; background: var(--indigo); border-left: 1px solid var(--hair); }
.sheet-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -6px; padding: 13px 0 11px; background: var(--indigo); border-bottom: 1px solid rgba(220, 185, 111, .16); }
.card { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; background: var(--indigo-2); border: 1px solid var(--hair); -webkit-touch-callout: default; user-select: auto; }
.sheet section { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sheet h3 { margin: 0; display: flex; align-items: center; gap: 10px; font: 400 14px/1.4 var(--f-body); letter-spacing: .32em; color: var(--gold); }
.sheet h3::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.sheet h3 .num { order: 2; letter-spacing: .04em; color: var(--gold-dim); }
.sheet p { margin: 0; overflow-wrap: anywhere; }
.names { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.names label { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; color: var(--mist); }
.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px; }
.facts dt { font-size: 13px; letter-spacing: .1em; color: var(--mist); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.num { font-family: var(--f-latin); font-size: 1.12em; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em; }
.almanac { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.almanac p { display: flex; gap: 10px; align-items: baseline; }
.almanac b { flex: none; width: 1.75em; height: 1.75em; display: inline-grid; place-items: center; font: 400 15px/1 var(--f-display); color: #1b1505; background: var(--gold); border-radius: 2px; }
.almanac b.ji { color: var(--moon); background: var(--seal); }
.pair-score { font: 400 44px/1.1 var(--f-latin); color: var(--gold); font-variant-numeric: lining-nums; }
.pair-score small { font: 13px var(--f-body); letter-spacing: .2em; color: var(--mist); }
.credits { font-size: 11.5px; line-height: 1.6; color: rgba(154, 165, 204, .7); }
.credits a { color: inherit; }

/* ---- the field guide ---- */
.mine { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mine li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(154, 165, 204, .16); }
.mine .nm { min-width: 0; overflow-wrap: anywhere; font-family: var(--f-display); font-size: 17px; color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips:empty { display: none; }
.chip { padding: 2px 9px; font-size: 13px; border: 1px solid rgba(154, 165, 204, .22); border-radius: 2px; color: rgba(154, 165, 204, .6); }
.chip.got { color: var(--gold); border-color: var(--hair); }
.riddles { margin: 4px 0 0; padding-left: 1.2em; font-size: 13px; color: var(--mist); }
.riddles li.got { color: var(--gold-dim); text-decoration: line-through; }

.drawing .toast { bottom: 118px; }
.toast { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 8px 16px; font-size: 13.5px; text-align: center; color: #1b1505; background: var(--gold); border-radius: 2px; z-index: 5; }

/* ---- language switch ---- */
.lang-row { margin: 0; display: flex; justify-content: flex-end; }
.lang { padding: 4px 0; font-size: 13px; color: var(--mist); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.lang:hover { color: var(--gold); }
.wait #app { visibility: hidden; }   /* English is filled in by script; nothing shows until it is */

/* ---- English: the same plate, set in Latin type ---- */
/* A Latin face comes first for running text: in the Chinese faces the curly quotes and apostrophes are a full square wide. */
:root[lang="en"] {
  --f-display: "Cormorant Garamond", "Source Serif 4", Georgia, "Noto Serif SC", "Songti SC", serif;
  --f-body: "Source Serif 4", Georgia, "Noto Serif", "Noto Serif SC", "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
}
:root[lang="en"] body { line-height: 1.62; }
:root[lang="en"] .mast-title { font-weight: 600; font-size: 24px; letter-spacing: .05em; font-variant-numeric: lining-nums; }
:root[lang="en"] .mast-sub { font: italic 500 14.5px/1 var(--f-latin); letter-spacing: .06em; }
:root[lang="en"] .tab { padding: 10px 6px; font: 600 14.5px/1 var(--f-latin); letter-spacing: .1em; }
:root[lang="en"] .dock button { letter-spacing: .02em; }
:root[lang="en"] .btn { letter-spacing: .01em; }
:root[lang="en"] .plate-title { font-weight: 600; line-height: 1.02; letter-spacing: 0; font-variant-numeric: lining-nums; }
:root[lang="en"] .sheet h3 { font: 600 14px/1.4 var(--f-latin); letter-spacing: .2em; text-transform: uppercase; }
:root[lang="en"] .sheet h3 .num { font-size: 1.1em; letter-spacing: .04em; }
:root[lang="en"] .facts dt { letter-spacing: .01em; }
:root[lang="en"] .judge ol { letter-spacing: .02em; }
:root[lang="en"] .almanac b { width: auto; min-width: 4.6em; height: 1.9em; padding: 0 .5em; font: 600 13px/1 var(--f-latin); letter-spacing: .14em; text-transform: uppercase; }
:root[lang="en"] .mine .nm { font-weight: 600; font-size: 19px; line-height: 1.2; }
:root[lang="en"] .pair-score small { letter-spacing: .04em; }

@media (max-width: 760px) {
  .sheet { left: 0; width: 100%; border-left: 0; }
  .mast-title { font-size: 22px; }
  .opening .mast { display: none; }   /* the opening plate carries the title and would sit on top of this one */
}
@media (max-height: 560px) { .mast-sub { display: none; } }
@media (max-height: 700px) { :root[lang="en"] .mast-sub { display: none; } }   /* the English lettering runs longer; on a short screen the title alone */
@media (max-height: 440px) {   /* a phone on its side: the tabs sit side by side, and the status line keeps clear of the title down the left */
  .tabs { flex-direction: row; align-items: flex-start; }
  .hud { padding-inline: 64px; }
}
@media (max-width: 380px) {
  .dock button { padding-inline: 11px; }
  .names { grid-template-columns: 1fr 1fr; }
  .names .btn { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }