/* OPC 新手村小酒馆 — night tavern, amber light, parchment notes, pixel headings. */
@font-face {
  font-family: "TavernPixel";
  src: url("/static/fonts/pixel.woff2") format("woff2");
  font-display: swap;
}

:root {
  --night: #0f0b08;
  --night-2: #19120c;
  --wood: #2b1e14;
  --wood-edge: #4a3322;
  --amber: #f5b544;
  --amber-soft: #f5b54433;
  --amber-deep: #c9801f;
  --ember: #e3643b;
  --parchment: #ead9b4;
  --parchment-deep: #d7c091;
  --ink: #36261a;
  --ink-soft: #6b5440;
  --text: #efe4d0;
  --muted: #a8977f;
  --moss: #7fae67;
  --blood: #c4473a;
  --sea: #5b86b8;
  --violet: #9b7cc9;
  --pixel: "TavernPixel", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --gutter: 16px;
  --radius: 4px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 45% at 50% -8%, #f5b54426, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, #e3643b14, transparent 70%),
    var(--night);
  color: var(--text);
  font: 16px/1.7 var(--sans);
  overflow-x: hidden;
}
/* film grain over everything, matches the poster */
body::after {
  content: "";
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 100;
  opacity: .09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .8  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

a { color: var(--amber); }
img { max-width: 100%; display: block; }
.sr-agent {                       /* visible to agents / screen readers, not eyes */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 24px var(--gutter) 64px; }
.pixel { font-family: var(--pixel); letter-spacing: .02em; -webkit-font-smoothing: none; }
h1, h2, h3 { font-family: var(--pixel); font-weight: normal; line-height: 1.3; margin: 0 0 12px; }
h1 { font-size: 36px; color: var(--amber); text-shadow: 0 0 18px #f5b54455, 3px 3px 0 #000; }
h2 { font-size: 24px; color: var(--amber); }
h3 { font-size: 18px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); font-size: 14px; }
.center { text-align: center; }

/* ---- wooden sign -------------------------------------------------------- */
.sign {
  position: relative; margin: 8px auto 24px; padding: 14px 18px 12px;
  background: linear-gradient(180deg, #5a3d27, #3b271a);
  border: 3px solid #1a0f08; border-radius: 6px;
  box-shadow: inset 0 2px 0 #7a5537, inset 0 -3px 0 #24170e, 0 8px 24px #0009;
  text-align: center;
}
.sign::before, .sign::after {          /* chains */
  content: ""; position: absolute; top: -26px; width: 3px; height: 26px;
  background: repeating-linear-gradient(#8a7a66 0 5px, #3a2f24 5px 8px);
}
.sign::before { left: 22%; } .sign::after { right: 22%; }
.sign h1 { margin: 0; font-size: 28px; }
.sign .muted { margin: 2px 0 0; color: #d9c6a3; }

/* ---- parchment note ----------------------------------------------------- */
.note {
  position: relative; color: var(--ink);
  background:
    radial-gradient(circle at 20% 15%, #fff6 0, transparent 40%),
    radial-gradient(circle at 85% 90%, #9c7a4a33 0, transparent 45%),
    linear-gradient(180deg, var(--parchment), var(--parchment-deep));
  border-radius: 2px; padding: 20px 18px;
  box-shadow: 0 1px 0 #fff4 inset, 0 10px 30px #000a;
  margin: 0 0 20px;
}
.note::before {                         /* nail */
  content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px;
  margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c9b79a, #4a3b2c);
  box-shadow: 0 2px 2px #0006;
}
.note.tilt-l { transform: rotate(-.6deg); } .note.tilt-r { transform: rotate(.5deg); }
.note h2, .note h3 { color: var(--ink); text-shadow: none; }
.note .muted { color: var(--ink-soft); }
.note a { color: #8a3b12; }

/* ---- RPG dialog box ----------------------------------------------------- */
.dialog {
  background: #0c0a14f0; color: #fff;
  border: 4px solid #fff; border-radius: 6px;
  box-shadow: 0 0 0 4px #0c0a14, 0 12px 40px #000c;
  padding: 16px 16px 14px; font-size: 16px;
}
.dialog .who { font-family: var(--pixel); font-size: 12px; color: var(--amber); margin-bottom: 6px; }
.dialog .title { font-family: var(--pixel); font-size: 18px; color: #ffd7a0; margin-bottom: 10px; line-height: 1.5; }
.dialog .count { font-family: var(--pixel); font-size: 12px; color: var(--muted); margin-top: 10px; }
.dialog .next { float: right; animation: blink 1s steps(2) infinite; font-family: var(--pixel); }
@keyframes blink { 50% { opacity: 0; } }

/* ---- buttons & forms ---------------------------------------------------- */
.btn {
  display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
  font: 18px/1 var(--pixel); color: #1d1206; background: var(--amber);
  border: 3px solid #1d1206; border-radius: 4px; padding: 14px 20px;
  box-shadow: 0 4px 0 #8a5311, 0 0 24px #f5b54444;
  transition: transform .06s; white-space: nowrap;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a5311; }
.btn.block { display: block; width: 100%; }
.btn.ghost { background: transparent; color: var(--amber); border-color: var(--amber); box-shadow: none; }
.btn.small { font-size: 14px; padding: 10px 14px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

label { display: block; font-size: 14px; color: var(--ink-soft); margin: 14px 0 6px; }
label .req { color: var(--blood); }
input[type=text], input[type=url], textarea, select {
  width: 100%; font: 16px/1.5 var(--sans); color: var(--ink);
  background: #fffaf0cc; border: 2px solid #b39a70; border-radius: 3px; padding: 10px 12px;
}
input:focus, textarea:focus { outline: none; border-color: var(--amber-deep); box-shadow: 0 0 0 3px #f5b5443d; }
textarea { min-height: 96px; resize: vertical; }
input[type=file] { font-size: 14px; color: var(--ink-soft); max-width: 100%; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span {
  display: block; padding: 8px 12px; border: 2px solid #b39a70; border-radius: 3px;
  background: #fffaf099; color: var(--ink); font-size: 14px; cursor: pointer;
}
.choice input:checked + span { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px #f5b5443d; }

.error {
  background: #c4473a22; border: 2px solid var(--blood); color: #ffd9d2;
  padding: 10px 12px; border-radius: 3px; margin-bottom: 16px; font-size: 14px;
}

/* ---- roster ------------------------------------------------------------- */
.roster { list-style: none; margin: 0; padding: 0; }
.roster li {
  display: grid; grid-template-columns: 2.4em 1fr auto; gap: 8px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px dashed #9c7a4a66; font-size: 14px;
}
.roster .seq { font-family: var(--pixel); color: var(--ink-soft); font-size: 12px; }
.roster .id { font-family: var(--pixel); font-size: 14px; color: var(--ink); }
.roster .who { color: var(--ink-soft); }
.roster .badge { font-size: 16px; }
.roster .klass-tag { display: inline-block; font-size: 12px; color: var(--ink-soft); background: #9c7a4a22; border-radius: 3px; padding: 0 6px; margin-left: 2px; }
.roster .line { display: block; font-size: 13px; color: var(--ink); margin-top: 2px; }
.roster .when { grid-column: 2 / 4; font-size: 12px; color: var(--ink-soft); margin-top: -4px; }

/* ---- stats card ---------------------------------------------------------- */
.stat-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #9c7a4a55; }
.stat-row img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.stat-row .big { font-family: var(--pixel); font-size: 24px; margin-left: auto; color: var(--ink); }
.verdict { font-family: var(--pixel); font-size: 18px; line-height: 1.6; color: #8a3b12; margin-top: 14px; }

.card-id {
  text-align: center; padding: 28px 16px;
  background: linear-gradient(160deg, #3a2716, #1d130b);
  border: 3px solid var(--amber-deep); border-radius: 8px;
  box-shadow: 0 0 0 3px #1d130b, 0 0 40px #f5b54433, 0 16px 40px #000c;
  margin-bottom: 24px;
}
.card-id .tid { font-family: var(--pixel); font-size: 36px; color: var(--amber); letter-spacing: .06em; }
.card-id .seqline { font-family: var(--pixel); font-size: 14px; color: #d9c6a3; margin-top: 6px; }

.copy-line {
  display: flex; gap: 8px; align-items: center; background: #1d130b; border: 2px dashed var(--amber-deep);
  padding: 10px 12px; border-radius: 3px; font-family: var(--pixel); font-size: 14px; color: var(--amber);
}
.copy-line code { flex: 1; overflow-wrap: anywhere; font-family: inherit; }

.hero { position: relative; margin: 0 calc(-1 * var(--gutter)) 20px; }
.hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; image-rendering: pixelated; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--night)); }

footer.foot { text-align: center; color: #6c5d4b; font-size: 12px; padding: 24px 0 8px; }

@media (min-width: 600px) {
  .hero { margin: 0 0 20px; border-radius: 6px; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  *, *::before, *::after { animation-duration: 0s !important; transition: none !important; }
}