:root {
  --bg: #101418;
  --ink: #d8d3c8;
  --dim: #8a857b;
  --lamp: #e8b96a;
  --line: #2a2f36;
  --card: #1a2027;
  --card-hi: #232b34;
  font-size: 17px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, #1c232c 0%, var(--bg) 55%) fixed,
    var(--bg);
  color: var(--ink);
  font-family: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  line-height: 1.9;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.screen {
  max-width: 34rem;
  margin: 0 auto;
  padding: 4.5rem 1.4rem 3rem;
  animation: fadein 0.5s ease both;
}
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

.brand { color: var(--dim); letter-spacing: 0.2em; font-size: 0.8rem; margin: 0 0 1.2rem; }
h1 { font-size: 1.9rem; font-weight: 600; letter-spacing: 0.06em; margin: 0 0 0.6rem; }
.slogan { color: var(--lamp); margin: 0 0 2.4rem; letter-spacing: 0.04em; }
.msg { color: var(--dim); font-size: 0.9rem; }
footer { color: var(--dim); font-size: 0.75rem; letter-spacing: 0.15em; margin-top: 4rem; }

.menu { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.6rem 0; }

.btn {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.78rem 1.2rem;
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.btn:hover { background: var(--card-hi); border-color: #3a424c; }
.btn:active { transform: scale(0.99); }
.btn.primary { border-color: #4a4030; background: linear-gradient(180deg, #262d36, #1f262e); }
.btn.ghost { color: var(--dim); }
.btn.small { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.linklike {
  background: none; border: none; color: var(--dim); font: inherit; font-size: 0.85rem;
  cursor: pointer; margin-top: 2.2rem; text-decoration: underline dotted;
}
.linklike:hover { color: var(--ink); }

.hud {
  position: fixed; top: 0; left: 0; right: 0;
  text-align: center; padding: 0.6rem 1rem;
  color: var(--dim); font-size: 0.8rem; letter-spacing: 0.25em;
  background: linear-gradient(180deg, rgba(16, 20, 24, 0.95), rgba(16, 20, 24, 0));
  pointer-events: none; z-index: 5;
}

#text p { margin: 0 0 1.1rem; animation: fadein 0.4s ease both; }
#choices { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.8rem 0 0; }

.card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "cls title" "cls author";
  column-gap: 0.9rem;
  align-items: center;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  animation: fadein 0.5s ease both;
}
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }
.card:hover { background: var(--card-hi); border-color: #3a424c; }
.card.plain { display: block; line-height: 1.7; }
.c-cls {
  grid-area: cls;
  font-size: 0.72rem; color: var(--lamp); letter-spacing: 0.1em;
  border: 1px solid #4a4030; border-radius: 6px; padding: 0.15rem 0.5rem;
  white-space: nowrap; align-self: start; margin-top: 0.2rem;
}
.c-title { grid-area: title; font-size: 1.05rem; letter-spacing: 0.04em; }
.c-author { grid-area: author; color: var(--dim); font-size: 0.82rem; }
.tip { color: var(--dim); font-size: 0.78rem; letter-spacing: 0.12em; margin: 0.6rem 0 0; }

.toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  background: #2a2417; color: var(--lamp); border: 1px solid #4a4030;
  border-radius: 999px; padding: 0.5rem 1.2rem; font-size: 0.85rem; letter-spacing: 0.1em;
  animation: fadein 0.3s ease both; z-index: 9;
}

.io { margin-top: 2.4rem; color: var(--dim); font-size: 0.88rem; }
.io summary { cursor: pointer; letter-spacing: 0.08em; }
.io textarea {
  width: 100%; height: 4.6rem; margin-top: 0.7rem;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 0.8rem; padding: 0.5rem;
  resize: vertical;
}
.row { display: flex; gap: 0.6rem; margin-top: 0.6rem; }

.gallery { color: var(--lamp); letter-spacing: 0.08em; }

.cols { display: flex; flex-direction: column; gap: 1.6rem; }
.cl-table { list-style: none; margin: 0; padding: 0.8rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--dim); font-size: 0.82rem; line-height: 2; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; }
.g-cell {
  display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.7rem 0.8rem; min-height: 4.6rem;
}
.g-cell.miss { opacity: 0.45; }
.g-cls { color: var(--lamp); font-size: 0.7rem; letter-spacing: 0.1em; }
.g-t { font-size: 0.95rem; }
.g-cell.miss .g-t { color: var(--dim); }
.g-a { color: var(--dim); font-size: 0.75rem; }

#paywall:not([hidden]) {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(10, 12, 15, 0.8); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1.4rem;
}
#paywall .card {
  background: #171d24; border: 1px solid var(--line); border-radius: 16px;
  max-width: 26rem; padding: 1.8rem; line-height: 1.9;
  animation: fadein 0.3s ease both;
}
.pw-tag { color: var(--lamp); letter-spacing: 0.15em; font-size: 0.8rem; margin: 0 0 0.8rem; }
.pw-price { font-size: 1.5rem; color: var(--ink); margin: 0.6rem 0 1rem; }
#pw-code {
  width: 100%; font: inherit; font-size: 1rem; letter-spacing: 0.12em;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.7rem;
}
.pw-hint { color: var(--dim); font-size: 0.8rem; margin: 0.9rem 0 0; }