@font-face { font-family: 'Noto Serif SC'; src: url('assets/unearth/fonts/noto-serif-sc.woff2?v=3') format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'LXGW WenKai TC'; src: url('assets/unearth/fonts/lxgw-wenkai-tc.woff2?v=2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('assets/fonts/cormorant.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('assets/fonts/cormorant-italic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
  --bg: #07080a;
  --ivory: #f3ead8;
  --ivory-2: rgba(243, 234, 216, .9);
  --ivory-3: rgba(243, 234, 216, .66);
  --hair: rgba(243, 234, 216, .3);
  --gold: #e6c58a;
  --zh: 'Noto Serif SC', 'Songti SC', serif;
  --en: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --top: 68px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body { color: var(--ivory); font-family: var(--en); font-size: 18px; -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; border-radius: 8px; }
[hidden] { display: none !important; }

.app { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }

/* ---------- Header ---------- */
.top { position: absolute; z-index: 10; inset: 0 0 auto; height: calc(var(--top) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; }
.mark { display: flex; align-items: center; gap: .6em; font-size: .9rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ivory-3); transition: opacity .4s; }
.mark span { font-family: var(--zh); font-size: 1.5rem; letter-spacing: 0; color: var(--gold); }
.mark { color: var(--ivory-2); }
.back { position: absolute; left: max(8px, env(safe-area-inset-left)); width: 44px; height: 44px; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .4s; }
.back svg { width: 22px; height: 22px; fill: none; stroke: var(--ivory-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.app:not([data-phase="field"]) .back { opacity: 1; pointer-events: auto; transition-delay: .2s; }
.app:not([data-phase="field"]) .mark { opacity: 0; pointer-events: none; }
.clock { margin-top: 6px; font-size: clamp(1.9rem, 4.4vh, 2.6rem); font-weight: 300; line-height: 1; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; color: var(--ivory); opacity: 0; transition: opacity .5s, color .5s; }
.clock::after { content: 's'; font-size: .7em; color: var(--ivory-3); margin-left: 2px; }
.app[data-phase="digging"] .clock { opacity: 1; }
.clock.is-hit { animation: hit .7s ease; }
@keyframes hit { 0% { color: var(--ivory); } 20% { color: #e08a72; transform: scale(1.15); } 100% { color: var(--ivory); transform: none; } }
.app[data-phase="solved"] .era, .app[data-phase="solved"] .date, .app[data-phase="solved"] .clock { visibility: hidden; }

/* ---------- Field ---------- */
.field-view { position: absolute; inset: 0; padding: calc(var(--top) + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 4vh, 44px); overflow-y: auto;
  --g: clamp(1.9rem, min(7vh, 3.6vw), 4rem); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.app:not([data-phase="field"]) .field-view { opacity: 0; transform: scale(.97); pointer-events: none; transition-duration: .35s; }
.intro { margin: 0; font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 2.4vw, 1.45rem); color: var(--ivory); text-align: center; animation: rise 1.2s var(--ease) both .2s; }
.field { display: grid; grid-template-columns: repeat(15, 1fr); gap: clamp(2px, 0.8vh, 14px) clamp(6px, 1.3vw, 26px); }
.tile { display: grid; justify-items: center; gap: 2px; padding: 6px 8px; border-radius: 12px; animation: rise 1.1s var(--ease) backwards; animation-delay: calc(var(--i) * 18ms + 120ms); }
.tile.is-chosen { visibility: hidden; }
.tile-char { font-family: var(--zh); font-weight: 300; font-size: var(--g); line-height: 1; color: var(--ivory); transition: scale .5s var(--ease), color .5s; }
.tile-time { min-height: 1em; font-size: .72rem; letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; color: var(--gold); }
.tile.is-solved .tile-char { color: var(--gold); }
.credit { margin: 0; font-size: .82rem; letter-spacing: .02em; color: var(--ivory-3); text-align: center; animation: rise 1.2s var(--ease) both .4s; }
.credit a { color: var(--ivory-2); text-decoration: underline; text-decoration-color: rgba(243, 234, 216, .3); text-underline-offset: 3px; }
@media (hover: hover) { .credit a:hover { color: var(--ivory); } }
/* Wider screens don't scroll the field, so the credit sits on the bottom edge; phones reach it at the end of the scroll. */
@media (min-width: 641px) { .credit { position: absolute; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); } }
.intro b { font-weight: 500; color: var(--gold); font-style: normal; }
@media (hover: hover) { .tile:hover .tile-char { scale: 1.07; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Play ---------- */
.play { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr);
  padding: calc(var(--top) + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom)); }
.app[data-phase="leaving"] .play { opacity: 0; transition: opacity .5s; }
.stage { position: relative; min-height: 0; margin: 0 -20px; }
.canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* While the first form loads, the stage stays empty; everything fades in together once it's ready. */
.dig-meta, .guess { transition: opacity .6s var(--ease); }
.app[data-phase="lifting"] .dig-meta, .app[data-phase="lifting"] .guess { opacity: 0; }

/* After the dig: every form in a row, oldest on the left, each dated beneath. */
.canvas { transition: opacity .6s var(--ease); }
.canvas.is-gone { opacity: 0; }
.lineage { position: absolute; inset: 0; margin: 0 auto; padding: 0 clamp(14px, 3vw, 56px); max-width: 1320px; list-style: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-content: center; align-items: start; gap: clamp(6px, 1.4vw, 26px); }
.lineage li { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; animation: rise 1s var(--ease) backwards; animation-delay: calc(var(--i) * 110ms + 250ms); }
.lineage li.is-held { animation: none; }
.lineage-art { display: block; width: 100%; max-width: 220px; aspect-ratio: 1; margin-bottom: 8px; }
.lineage-era { margin: 0; font-size: .7rem; letter-spacing: .2em; line-height: 1.35; text-transform: uppercase; color: var(--gold); }
.lineage-date { margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.25; font-variant-numeric: lining-nums; color: var(--ivory-2); }

.dig-meta { display: grid; justify-items: center; gap: 4px; min-height: 96px; text-align: center; }
.era { margin: 0; min-height: 1.2em; font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.date { margin: 0; min-height: 1.2em; font-size: 1.25rem; font-weight: 400; font-variant-numeric: lining-nums; color: var(--ivory-2); }
.era, .date { transition: opacity .18s ease, transform .18s ease; }
.is-out { opacity: 0; transform: translateY(3px); }

.guess { display: grid; justify-items: center; gap: 12px; margin: 26px auto 0; width: min(100%, 380px); transition: opacity .5s; }
.guess-input { width: 100%; height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(243, 234, 216, .1); background: rgba(243, 234, 216, .03);
  font-size: 1.35rem; font-style: italic; text-align: center; letter-spacing: .02em; outline: none; transition: border-color .3s, background .3s; }
.guess-input::placeholder { color: var(--ivory-3); letter-spacing: .08em; }
.guess-input:focus { border-color: rgba(230, 197, 138, .6); background: rgba(243, 234, 216, .06); }
.guess-input.is-wrong { animation: nudge .45s ease; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 60% { transform: translateX(5px); } }
.misses { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 30px; }
.miss { display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(230, 197, 138, .28); font-size: 1.1rem; font-style: italic; color: var(--ivory-2);
  animation: miss .6s var(--ease) both; }
.miss s { text-decoration-color: rgba(243, 234, 216, .4); }
.miss b { font-style: normal; font-weight: 500; font-size: .8rem; color: var(--gold); }
.miss:nth-child(n+2) { opacity: .6; }
.miss:nth-child(n+3) { opacity: .35; }
@keyframes miss { from { opacity: 0; transform: translateY(-14px) scale(.9); } }
.app[data-phase="solved"] .guess { display: none; }
/* Floats above the right end of the input, at the clock's height, so appearing never moves anything. */
.guess { position: relative; }
.give-up { position: absolute; right: 10px; bottom: calc(100% + 31px); padding: 6px 12px; font-size: .9rem; font-style: italic; letter-spacing: .02em; color: var(--ivory-3);
  text-decoration: underline; text-decoration-color: rgba(243, 234, 216, .45); text-underline-offset: 4px; animation: rise 1.2s var(--ease) both; }
@media (hover: hover) { .give-up:hover { color: var(--ivory-2); } }
.result.is-given-up .result-time { display: none; }

.result { display: grid; justify-items: center; gap: 4px; text-align: center; margin-top: 4px; animation: rise .9s var(--ease) both; }
.result-time { margin: 18px 0 0; font-size: clamp(1.9rem, 4.6vh, 2.5rem); font-weight: 300; line-height: 1; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.result-time small { font-size: .45em; margin-left: 3px; color: var(--ivory-3); }
.result-word { margin: 0; font-style: italic; font-size: clamp(2.8rem, 7.5vh, 4.2rem); line-height: 1.05; color: #fff; font-variant-numeric: lining-nums; }
.result-note { margin: 6px 0 0; font-size: 1.15rem; font-style: italic; color: var(--ivory-2); font-variant-numeric: lining-nums; }
.lineage-type { display: grid; place-items: center; font-family: var(--zh); font-weight: 300; line-height: 1; color: var(--ivory); user-select: text; -webkit-user-select: text; cursor: text; }
.lineage-type::selection { background: rgba(230, 197, 138, .35); color: #fff; }
.result-actions { display: flex; gap: 10px; margin-top: 40px; }
.ghost, .primary { min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 1.08rem; display: inline-flex; align-items: center; gap: 8px; }
.ghost { border: 1px solid var(--hair); color: var(--ivory-2); }
.primary { background: var(--gold); color: #17120a; font-weight: 500; }
.primary:focus:not(:focus-visible), .ghost:focus:not(:focus-visible) { outline: none; }
@media (hover: hover) { .ghost:hover { border-color: var(--ivory-3); } .primary:hover { filter: brightness(1.07); } }

@media (min-width: 641px) and (max-width: 1000px) { .field { grid-template-columns: repeat(10, 1fr); } .field-view { --g: min(6.4vw, 5.6vh); } }
/* Wide screens: art, era and controls form one composition in the middle of the screen. */
@media (min-width: 900px) {
  .play { grid-template-rows: minmax(0, min(66vh, 680px)) auto auto; align-content: center; }
  .dig-meta { min-height: 90px; }
}
@media (max-width: 640px) {
  /* Phones, after the dig: the history becomes a vertical list, oldest first, scrolling up behind a result
     panel pinned to the bottom; the panel's top edge fades so the list visibly carries on beneath it. */
  .app[data-phase="solved"] .play { display: block; padding: 0; }
  .app[data-phase="solved"] .stage { position: absolute; inset: 0; height: auto; margin: 0; }
  .app[data-phase="solved"] .dig-meta { display: none; }
  .app[data-phase="solved"] .top { background: linear-gradient(var(--bg) 60%, rgba(7, 8, 10, 0)); }
  .lineage { display: flex; flex-direction: column; justify-content: flex-start; gap: 22px; max-width: none; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--top) + env(safe-area-inset-top) + 12px) 32px calc(var(--panel, 320px) + 24px); }
  .lineage li { width: min(100%, 300px); align-self: center; grid-template-columns: 112px 1fr; grid-template-rows: auto auto; column-gap: 20px; row-gap: 4px; align-items: center; justify-items: start; text-align: left; }
  .lineage-art { grid-row: 1 / span 2; width: 112px; margin: 0; }
  .lineage .lineage-era { align-self: end; font-size: .74rem; letter-spacing: .2em; }
  .lineage .lineage-date { align-self: start; font-size: 1.1rem; }
  .lineage li:has(.lineage-era:only-of-type) .lineage-era { grid-row: 1 / span 2; align-self: center; }
  .app[data-phase="solved"] .result { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0; padding: 56px 20px calc(18px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(7, 8, 10, 0), var(--bg) 52px); }

  :root { --top: 60px; }
  /* Phones: four large characters across; the field scrolls under a solid header. */
  .field { grid-template-columns: repeat(4, 1fr); width: 100%; column-gap: 8px; row-gap: 6px; }
  .field-view { --g: 15vw; gap: 18px; justify-content: flex-start; padding-top: calc(var(--top) + env(safe-area-inset-top) + 8px); -webkit-overflow-scrolling: touch; }
  .app[data-phase="field"] .top { background: linear-gradient(var(--bg) 70%, rgba(7, 8, 10, 0)); }
  .tile { padding: 8px 6px 4px; }
  .tile-time { font-size: .72rem; }
  /* Room between the era and the clock, so the script name sits clear above the timer. */
  .dig-meta { min-height: 108px; }
  .clock { margin-top: 20px; }
  /* Phones: a square stage, centred with its controls as one block, rather than a tall void. */
  .play { grid-template-rows: auto auto auto; align-content: center; }
  .stage { height: min(108vw, 56vh); }
  .result-actions { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .2s !important; }
}