/* COPYCAT RANK (experimental prototype). Archivo Black is self-hosted (OFL, see fonts/);
   mono and Chinese text use system fonts, no third-party font CDN. */
@font-face {
  font-family: "Archivo Black";
  src: url("/fonts/archivo-black.woff2") format("woff2");
  font-display: swap;
}
:root {
  --paper: #edeae2;
  --ink: #111;
  --orange: #ff4e1a;
  --blue: #1f33ff;
  --yellow: #ffd200;
  --pink: #e8186d;
  --display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cjk: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.45 var(--mono), var(--cjk);
  min-height: 100vh;
}
a { color: inherit; }
main { max-width: 480px; margin: 0 auto; padding: 0 16px 24px; }
.en { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.02em; opacity: 0.75; }
[lang="zh-CN"] { font-family: var(--cjk); }

.banner {
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 6px 16px;
  border-bottom: 2px solid var(--ink);
}
.banner .en { opacity: 1; }
.top {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.brand { font: 28px/0.95 var(--display); text-decoration: none; letter-spacing: -0.01em; }
.tag {
  font: 13px/1.15 var(--display);
  background: var(--orange);
  color: var(--paper);
  padding: 6px 8px;
  text-align: right;
}
footer {
  max-width: 480px;
  margin: 8px auto 0;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  font-size: 12px;
  opacity: 0.7;
  border-top: 2px solid var(--ink);
}
h1 { font: 26px/1.1 var(--display); margin: 8px 0 12px; }
h1 .en { font: inherit; opacity: 0.45; font-size: 0.6em; display: block; }
.small { font-size: 13px; }
.note { padding: 10px 12px; border: 2px solid var(--ink); }
.note.warn { background: var(--pink); color: var(--paper); border-color: var(--pink); }
.note.good { background: var(--blue); color: var(--paper); border-color: var(--blue); font-size: 18px; }
.note .en { opacity: 0.9; }

.stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stage {
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  text-decoration: none;
  border: 2px solid var(--ink);
  min-height: 72px;
}
.stage b { font: 20px/1 var(--display); }
.stage small { margin-top: auto; font-size: 11px; opacity: 0.7; }
.stage.s0 { background: var(--orange); color: var(--paper); }
.stage.s1 { background: var(--blue); color: var(--paper); }
.stage.s2 { background: var(--yellow); }
.stage.s3 { background: var(--ink); color: var(--paper); }

.result { padding: 18px 16px 14px; margin: 4px 0 16px; border: 2px solid var(--ink); }
.r-try { background: #121212; color: #edebe4; }
.r-ok { background: var(--blue); color: var(--paper); }
.r-superb { background: var(--orange); color: var(--paper); }
.r-perfect { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 4px var(--yellow); }
.stage-name { font: 14px/1 var(--display); letter-spacing: 0.06em; opacity: 0.85; }
.rating { font: 40px/1 var(--display); margin: 10px 0 4px; }
.rating small { font-size: 16px; margin-left: 8px; opacity: 0.8; }
.score b { font: 64px/1 var(--display); }
.score span { font-size: 16px; opacity: 0.7; margin-left: 4px; }
.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 14px 0 0; }
.counts div { border-top: 2px solid currentColor; padding-top: 4px; }
.counts dt { font-size: 10px; opacity: 0.75; }
.counts dd { margin: 0; font: 20px/1.1 var(--display); }

.submit { display: flex; flex-direction: column; gap: 10px; }
.submit label { font-weight: 700; }
.submit input {
  font: 20px var(--mono), var(--cjk);
  padding: 12px;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  border-radius: 0;
  width: 100%;
}
.submit input:focus { outline: 3px solid var(--blue); outline-offset: 0; }
.btn {
  display: inline-block;
  font: 18px/1 var(--display);
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 16px 18px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
.submit .btn { width: 100%; }
.btn .en { opacity: 0.7; }

.board-title { display: flex; justify-content: space-between; align-items: center; }
.board-title a { text-decoration: none; padding: 0 8px; }
.tabs { display: flex; gap: 0; border: 2px solid var(--ink); margin-bottom: 8px; }
.tab { flex: 1; text-align: center; padding: 10px 4px; text-decoration: none; font-weight: 700; font-size: 14px; }
.tab.on { background: var(--ink); color: var(--paper); }
.rows { list-style: none; padding: 0; margin: 0; }
.row {
  display: grid;
  grid-template-columns: 2.2em 1fr auto 2.6em;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
}
.row .pos { font: 18px var(--display); }
.row:nth-child(1) .pos { color: var(--orange); }
.row:nth-child(2) .pos { color: var(--blue); }
.row:nth-child(3) .pos { color: var(--pink); }
.row .who { min-width: 0; overflow-wrap: anywhere; }
.row .who b { font-family: var(--mono), var(--cjk); }
.row .who small { margin-left: 6px; font-size: 11px; opacity: 0.5; }
.row .rate { font: 10px/1 var(--display); padding: 4px 6px; }
.row .pts { font: 20px var(--display); text-align: right; }
.row.me { background: var(--yellow); }
.empty { padding: 24px 0; opacity: 0.7; }
.error h1 { color: var(--pink); }