/* chikui.meme — the world is the page. Copy floats over it; numbers live inside it. */
:root {
  --canvas: #e9dcc4; --surface: #fbf7ee; --ink: #1f1b16; --ink-soft: #5a5148; --line: rgba(31, 27, 22, .16);
  --accent: #c8322b; --accent-ink: #fbf7ee; --gold: #b8861f; --green: #1e8a4c; --amber: #d98a2b;
  --font-display: 'Fraunces', Georgia, serif; --font-text: 'Archivo', system-ui, sans-serif; --font-calli: 'Ma Shan Zheng', 'Noto Sans SC', serif; --font-zh: 'Noto Sans SC', system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(14px, 3vw, 40px); --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-reveal: cubic-bezier(.22, .8, .3, 1);
  color-scheme: only light;
  /* text over the world: white with a red-to-black outline (readable on paper, sky, bamboo and gold, and immune to forced dark mode) */
  --outline: 0 0 1px #7a1a12, 1px 1px 0 #7a1a12, -1px -1px 0 #7a1a12, 1px -1px 0 #7a1a12, -1px 1px 0 #7a1a12, 0 2px 2px rgba(60,10,8,.85), 0 6px 18px rgba(0,0,0,.45);
}
html { color-scheme: only light; }
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--canvas); scroll-behavior: smooth; }
body { color: var(--ink); font-family: var(--font-text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
html.zh body, html.zh .btn, html.zh h1, html.zh h2 { font-family: var(--font-zh); }
h1, h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
html.zh h1, html.zh h2 { letter-spacing: 0; font-weight: 700; }
a { color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.num { font-variant-numeric: tabular-nums; } .dim { color: var(--ink-soft); }

.intro { position: fixed; inset: 0; z-index: 90; background: var(--canvas); pointer-events: none; transition: opacity 1.2s ease; }
html.ready .intro { opacity: 0; }
.world { position: fixed; inset: 0; z-index: 0; background: var(--canvas); overflow: hidden; }
.world canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.world .poster { position: absolute; inset: 0; } .world .poster img { width: 100%; height: 100%; object-fit: cover; transition: opacity 1s ease; }
.world.is-live .poster img { opacity: 0; }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }

/* ---------- top ---------- */
.top { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gutter); pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .08em; min-height: 44px; }
.seal-mini { width: 40px; height: 40px; display: grid; place-items: center; background: #a8271f; color: #fff; font-family: var(--font-calli); font-size: 26px; border-radius: 6px; box-shadow: 0 2px 10px rgba(200, 50, 43, .35); }
.top-r { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklab, var(--surface) 80%, transparent); padding: 3px; }
.lang button { font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 6px 14px; min-height: 40px; min-width: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.lang button.is-on { background: var(--ink); color: var(--surface); }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(200, 50, 43, .7); transition: transform 140ms var(--ease-out), background 140ms var(--ease-out); white-space: nowrap; }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #a8271f; } }

/* ---------- screen one ---------- */
.scene { touch-action: pan-y; position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; }
.calli { position: absolute; left: var(--gutter); top: 13vh; display: flex; gap: .04em; font-family: var(--font-calli); font-size: clamp(3.2rem, 7.2vw, 7rem); line-height: 1; color: #fff; text-shadow: var(--outline); }
.calli .stroke { display: inline-block; opacity: 0; transform: translateY(8px) scale(.96); animation: stroke .9s var(--ease-reveal) forwards; animation-delay: calc(var(--i, 0) * .32s + 1.2s); }
.calli .stroke:nth-child(1) { --i: 0; } .calli .stroke:nth-child(2) { --i: 1; } .calli .stroke:nth-child(3) { --i: 2; } .calli .stroke:nth-child(4) { --i: 3; }
@keyframes stroke { to { opacity: 1; transform: none; } }
.seal { position: absolute; left: calc(var(--gutter) + clamp(14rem, 31vw, 30rem)); top: 11vh; width: clamp(64px, 7vw, 92px); aspect-ratio: 1; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-family: var(--font-calli); font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1.05; text-align: center; border-radius: 6px; transform: rotate(-8deg) scale(1.6); opacity: 0; filter: blur(4px); animation: stamp .55s cubic-bezier(.2, 1.2, .3, 1) forwards; animation-delay: 2.6s; }
@keyframes stamp { to { opacity: .94; transform: rotate(-8deg) scale(1); filter: blur(0); } }
.copy { position: absolute; left: var(--gutter); top: calc(13vh + clamp(3.2rem, 7.2vw, 7rem) + 16px); width: min(46vw, 560px); display: grid; gap: 10px; }
.copy, .hud, .legend, .calli, .seal { z-index: 5; }
h1 { font-size: clamp(1.6rem, 2.7vw, 2.5rem); max-width: 18ch; color: #fff; text-shadow: var(--outline); }
.lead { max-width: 44ch; font-size: clamp(.95rem, 1.1vw, 1.05rem); font-weight: 600; color: #fff; text-shadow: var(--outline); }
.sr-numbers { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html:not(.js) .sr-numbers { position: static; width: auto; height: auto; clip: auto; display: grid; grid-template-columns: auto auto; gap: 4px 16px; margin: 24px var(--gutter); }
.paying-toast { position: absolute; z-index: 5; right: var(--gutter); top: 84px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: color-mix(in oklab, var(--green) 12%, var(--surface)); border: 1px solid color-mix(in oklab, var(--green) 45%, transparent); font-size: 13px; }
.paying-toast[hidden] { display: none; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(30, 138, 76, .6); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(30, 138, 76, 0); } }
/* paid wallets float up as red talisman strips */
.strips { position: absolute; z-index: 5; right: var(--gutter); top: 130px; display: grid; gap: 6px; width: min(300px, 60vw); pointer-events: none; }
.strip { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 11.5px; border-radius: 3px; box-shadow: 0 6px 16px -8px rgba(200, 50, 43, .8); animation: strip 6s var(--ease-reveal) forwards; pointer-events: auto; }
.strip a { color: #ffd9a8; text-decoration: none; }
@keyframes strip { 0% { opacity: 0; transform: translateY(14px) rotate(-1deg); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
.hud { position: absolute; z-index: 5; left: var(--gutter); bottom: 34px; display: grid; gap: 2px; }
.hud .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: -.02em; color: #fff; text-shadow: var(--outline); }
.hud .dim { font-size: 12.5px; font-weight: 600; color: #fff; text-shadow: var(--outline); }
.legend { position: absolute; z-index: 5; right: var(--gutter); bottom: 34px; display: flex; gap: 14px; font-size: 12px; font-weight: 600; color: #fff; text-shadow: var(--outline); }
.legend .d { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .d.e { background: var(--green); } .d.p { background: var(--amber); }

/* ---------- screen two ---------- */
.check { position: relative; z-index: 2; display: grid; gap: 14px; max-width: 760px; padding: 32px var(--gutter) 28px; margin-inline: auto; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--canvas) 80%, transparent) 14%, color-mix(in oklab, var(--canvas) 92%, transparent)); }
.check h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.check-f { display: flex; gap: 8px; }
.check-f input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.check-out { padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; }
.check-out[hidden] { display: none; }
.check-out.ok { border-color: color-mix(in oklab, var(--green) 50%, transparent); } .check-out.mid { border-color: color-mix(in oklab, var(--amber) 60%, transparent); } .check-out.no { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.rules { padding-left: 18px; display: grid; gap: 4px; max-width: 62ch; }
.rounds { display: grid; gap: 6px; font-size: 13px; }
.round { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); flex-wrap: wrap; }
.quote { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); font-size: .95rem; }
html.zh .quote { font-style: normal; font-family: var(--font-calli); font-size: 1.15rem; }
.foot { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .calli { top: 74px; font-size: clamp(2.4rem, 13vw, 3.4rem); left: var(--gutter); }
  .seal { left: auto; right: var(--gutter); top: 70px; width: 60px; }
  .copy { top: calc(74px + clamp(2.4rem, 13vw, 3.4rem) + 10px); width: calc(100% - 2 * var(--gutter)); }
  h1 { font-size: clamp(1.35rem, 6vw, 1.8rem); } .lead { font-size: .92rem; max-width: none; }
  .strips { right: var(--gutter); top: auto; bottom: 92px; width: calc(100% - 2 * var(--gutter)); }
  .hud { bottom: 18px; } .legend { display: none; }
  .paying-toast { right: var(--gutter); left: var(--gutter); top: auto; bottom: 104px; justify-content: center; font-size: 12px; }
  .brand-t { display: none; } .top-r .btn { font-size: 12px; padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) { .calli .stroke { animation: none; opacity: 1; transform: none; } .seal { animation: none; opacity: .94; transform: rotate(-8deg); filter: none; } .pulse, .strip { animation: none; } .intro { transition: none; } }