* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

:root {
  --bg: #0a0e1a;
  --bg-2: #101728;
  --card: #151d31;
  --card-2: #1b2540;
  --line: rgba(255, 255, 255, 0.08);
  --ink: #edf2fb;
  --muted: #8496b8;
  --accent: #5cc9ff;
  --accent-2: #7c6bff;
  --gold: #ffca5f;
  --radius: 16px;
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
body {
  background:
    radial-gradient(1200px 620px at 12% -8%, rgba(124, 107, 255, 0.20), transparent 62%),
    radial-gradient(900px 520px at 96% 4%, rgba(92, 201, 255, 0.14), transparent 60%),
    var(--bg);
}

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
           calc(20px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}

/* ---------- header ---------- */
.top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px 14px;
}
.brand { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.brand-mark {
  height: 38px; width: auto;
  flex: 0 0 auto;
  display: block;
}
/* The name is drawn, not set: five Latin letters were being rendered by
   PingFang's western glyphs. See tools/build-wordmark.js. */
/* Nudged down against the mark: the fox is centred on its full outline,
   but its visual weight is the face, and the ears above it are mostly
   empty. Centring the two boxes therefore leaves the name sitting high.
   A transform keeps this out of the layout, so the width and height the
   pages reserve still describe the box. */
.brand-word { height: 22px; width: auto; display: block; flex: 0 0 auto; transform: translateY(2px); }
.top-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.chip-btn {
  min-width: 40px; height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.chip-btn:hover { background: rgba(255, 255, 255, 0.1); }
.chip-btn-text { font-size: 13px; font-weight: 700; }

/* ---------- search ---------- */
.search-wrap { position: relative; margin-bottom: 16px; }
.search {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 38px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
}
.search::placeholder { color: var(--muted); }
.search:focus { border-color: rgba(92, 201, 255, 0.55); background: rgba(92, 201, 255, 0.07); }
.search::-webkit-search-cancel-button { display: none; }
.search-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted); font-size: 19px; pointer-events: none;
}
.search-clear {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer;
}

/* ---------- daily ---------- */
.daily {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(255, 202, 95, 0.22);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(255, 202, 95, 0.13), rgba(255, 202, 95, 0.03));
}
.daily-head { display: flex; align-items: center; gap: 10px; }
.daily-head h2 { font-size: 15px; font-weight: 800; color: var(--gold); flex: 1; }
.streak {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 202, 95, 0.18);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}
.daily-note { margin-top: 3px; font-size: 12px; color: var(--muted); }
.daily-row { display: flex; gap: 8px; margin-top: 11px; }
.daily-item {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.daily-item.done {
  border-color: rgba(120, 220, 150, 0.5);
  background: rgba(120, 220, 150, 0.14);
  color: #9ff0bb;
}
.daily-item .tick { margin-right: 4px; }

/* ---------- continue ---------- */
.resume { margin-bottom: 18px; }
.resume h2, .cats-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.resume-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--card-2), var(--card));
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.resume-card:hover { border-color: rgba(92, 201, 255, 0.4); }
.resume-art { width: 92px; height: 60px; border-radius: 10px; flex: 0 0 auto; display: block; }
.resume-body { flex: 1; min-width: 0; }
.resume-title { display: block; font-size: 16px; font-weight: 800; }
.resume-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.resume-go {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #06101d; font-size: 13px;
}

/* ---------- categories ---------- */
.cats {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.cat.on {
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #06101d;
}

/* ---------- grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1060px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.card:hover { transform: translateY(-2px); border-color: rgba(92, 201, 255, 0.42); }
.card:active { transform: translateY(0); }
.card-art { width: 100%; aspect-ratio: 8 / 5; display: block; background: var(--bg-2); }
.card-body { padding: 9px 10px 11px; }
.card-title { font-size: 14px; font-weight: 800; line-height: 1.25; }
.card-tag {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-stat {
  position: absolute;
  top: 8px; right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(6, 12, 24, 0.74);
  backdrop-filter: blur(6px);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.card-new {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #06101d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 14px; }

.foot {
  margin-top: 26px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.foot-dot { margin: 0 6px; opacity: 0.5; }
.foot-line { margin-bottom: 10px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font-size: 13px; }
.foot-nav a { color: var(--muted); text-decoration: none; }
.foot-nav a:hover { color: var(--ink); }
.foot-copy { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* ---------- detail sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 16, 0.72); backdrop-filter: blur(3px); }
.sheet {
  position: relative;
  width: 100%;
  max-width: 460px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, var(--card-2), var(--bg-2));
  border: 1px solid var(--line);
  border-bottom: 0;
  overflow: hidden;
  animation: rise 0.22s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 560px) {
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: 22px; border-bottom: 1px solid var(--line); }
}
.sheet-art { width: 100%; aspect-ratio: 8 / 4; display: block; }
.sheet-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: rgba(6, 12, 24, 0.7);
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
  z-index: 2;
}
.sheet-body { padding: 14px 18px 18px; }
.sheet-kicker { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 1px; }
.sheet-body h2 { margin-top: 3px; font-size: 22px; font-weight: 800; }
.sheet-desc { margin-top: 8px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.sheet-stats { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sheet-stat {
  padding: 7px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  color: var(--muted);
}
.sheet-stat b { display: block; margin-top: 1px; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.play-btn {
  width: 100%;
  height: 50px;
  margin-top: 14px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #04121f;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.play-btn:active { transform: translateY(1px); }

/* Off the screen but not out of the page: a heading and the game list are read
   by a screen reader and by anything that does not run the script, and hiding
   them with display:none would take them out of both. */
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The list the markup carries before the grid is built. It is real content,
   so it is styled to be readable rather than hidden; the script replaces it
   the moment it runs. */
.all-games[hidden] { display: none; }
.all-games { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none;
             display: grid; gap: 8px; }
.all-games a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; border-radius: 12px;
    background: var(--card); border: 1px solid var(--line);
    color: var(--ink); text-decoration: none;
}
.all-games b { font-size: 14px; font-weight: 700; }
.all-games span { font-size: 12px; color: var(--muted); }