:root {
  --page: #10151b;
  --top: #11171e;
  --top-border: #222933;
  --panel: #1b222a;
  --panel-dark: #151b22;
  --panel-line: #252e39;
  --text: #f4f7fb;
  --text-soft: #c8d0dd;
  --muted: #788394;
  --muted-dark: #5d6878;
  --purple: #7c3cff;
  --purple-soft: #9f74ff;
  --red: #ff1d1d;
  --shadow: 0 16px 48px rgba(0, 0, 0, .32);
  --radius: 7px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: 14px;
}
body::selection { background: rgba(124, 60, 255, .4); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  background: var(--top);
  border-bottom: 1px solid var(--top-border);
}
.topbar-inner {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 68px;
}
.brand {
  width: 178px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.brand-box {
  width: 40px;
  height: 40px;
  border: 2px solid #8354ff;
  position: relative;
  display: grid;
  place-items: center;
  color: #bca8ff;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(124,60,255,.22);
}
.brand-box::before,
.brand-box::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-left: 2px solid #b5a4ff;
  border-bottom: 2px solid #b5a4ff;
  opacity: .6;
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 19px; letter-spacing: 7px; font-weight: 700; }
.brand-copy em { margin-top: 5px; color: #d6dce7; font-style: normal; font-size: 10px; letter-spacing: 7px; transform: scaleX(.95); transform-origin: left; }

.nav {
  display: flex;
  height: 56px;
  align-items: stretch;
}
.nav a {
  min-width: 74px;
  padding: 0 19px;
  height: 56px;
  display: grid;
  place-items: center;
  position: relative;
  font-size: 14px;
  font-weight: 700;
  color: #f6f8fc;
  transition: background .18s ease, color .18s ease;
}
.nav a:hover { background: rgba(255,255,255,.035); }
.nav a.active { background: #171d25; color: #fff; }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  background: var(--purple);
}
.top-spacer { flex: 1; }
.search {
  width: 430px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid #202832;
  background: #171d25;
  display: flex;
  align-items: center;
  margin-right: 18px;
  overflow: hidden;
}
.search input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #dce3ee;
  padding: 0 12px;
  font-size: 13px;
}
.search input::placeholder { color: #606a78; }
.search button {
  width: 42px;
  height: 34px;
  border: 0;
  background: transparent;
  position: relative;
}
.search button::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid #3d4654;
  border-radius: 50%;
  left: 12px;
  top: 8px;
}
.search button::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  background: #3d4654;
  transform: rotate(45deg);
  left: 25px;
  top: 22px;
  border-radius: 2px;
}

.page-shell {
  width: 1320px;
  margin: 0 auto;
  padding: 0 0 80px;
}
.hero {
  position: relative;
  height: 222px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #19202a;
}
.hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.hero-arrow {
  position: absolute;
  top: 50%;
  margin-top: -22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,.24);
  font-size: 40px;
  line-height: 36px;
  opacity: .9;
}
.hero-prev { left: 50%; transform: translateX(-320px); }
.hero-next { right: 50%; transform: translateX(320px); }
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  min-width: 246px;
  height: 42px;
  border-radius: 22px;
  background: rgba(0, 0, 0, .32);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  backdrop-filter: blur(6px);
}
.hero-dots span { width: 9px; height: 9px; background: #7b8596; border-radius: 50%; }
.hero-dots .active { width: 11px; height: 11px; background: #fff; }

.game-toolbar {
  padding: 25px 0 18px;
}
.media-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  height: 42px;
}
.media-tab {
  border: 0;
  background: transparent;
  color: #8994a6;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  padding-bottom: 14px;
}
.media-tab.active { color: #fff; }
.media-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--purple);
}
.category-line {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.category-pill {
  border: 1px solid #293342;
  background: #171e27;
  color: #b4bece;
  height: 30px;
  border-radius: 15px;
  padding: 0 14px;
  font-size: 13px;
}
.category-pill b { color: #808b9c; font-weight: 600; margin-left: 4px; }
.category-pill.active,
.category-pill:hover {
  color: #fff;
  border-color: var(--purple);
  background: rgba(124,60,255,.18);
}
.game-title {
  margin: 18px 0 0;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-weight: 700;
}
.section-row {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  min-height: 32px;
}
.section-row h2 {
  margin: 0;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
}
.submit-mini {
  height: 32px;
  border: 1px solid #30394a;
  background: #171e27;
  color: #dce3ee;
  border-radius: 16px;
  padding: 0 18px;
  font-weight: 700;
}
.submit-mini:hover { border-color: var(--purple); color: #fff; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px 18px;
}
.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid transparent;
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: #343e4d;
  background: #202833;
}
.card-media {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 100%;
  height: 166px;
  overflow: hidden;
  background: #202733;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform .35s ease;
}
.card:hover .card-media img { transform: scale(1.035); }
.card-content { padding: 14px 15px 13px; }
.card-topline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title {
  flex: 1;
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hot {
  width: 15px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-block;
  position: relative;
}
.hot::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 12px;
  height: 16px;
  border-radius: 50% 50% 50% 50%;
  background: var(--red);
  clip-path: polygon(50% 0,70% 25%,100% 50%,85% 100%,18% 100%,0 56%,30% 24%);
}
.card-category { margin-top: 6px; color: #6f7988; font-size: 13px; }
.card-stats {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #7f8999;
  font-size: 13px;
  line-height: 1;
}
.stat-eye,
.stat-comment {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: #7f8999;
  font-weight: 400;
}
.stat-eye::before,
.stat-comment::before {
  content: "";
  width: 17px;
  height: 17px;
  margin-right: 6px;
  background: currentColor;
  opacity: .95;
  flex: 0 0 auto;
}
.stat-eye::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.2 10.1 1.3 11.2c-.4.5-.4 1.1 0 1.6C2.2 13.9 6.5 19 12 19s9.8-5.1 10.7-6.2c.4-.5.4-1.1 0-1.6C21.8 10.1 17.5 5 12 5Zm0 11.2A4.2 4.2 0 1 1 12 7.8a4.2 4.2 0 0 1 0 8.4Zm0-2.2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.2 10.1 1.3 11.2c-.4.5-.4 1.1 0 1.6C2.2 13.9 6.5 19 12 19s9.8-5.1 10.7-6.2c.4-.5.4-1.1 0-1.6C21.8 10.1 17.5 5 12 5Zm0 11.2A4.2 4.2 0 1 1 12 7.8a4.2 4.2 0 0 1 0 8.4Zm0-2.2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.stat-comment::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H9.4l-4.1 3.1A.8.8 0 0 1 4 20.5V18a2.9 2.9 0 0 1-2-2.8V7a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v2.4L8.8 16H19a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H9.4l-4.1 3.1A.8.8 0 0 1 4 20.5V18a2.9 2.9 0 0 1-2-2.8V7a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v2.4L8.8 16H19a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tags {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 20px;
}
.tag {
  max-width: 86px;
  height: 20px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  color: #939dad;
  background: #151b22;
  border: 1px solid #2a3340;
  border-radius: 10px;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tag:hover { color: #fff; border-color: var(--purple); }
.card-divider { height: 1px; margin: 13px 0 10px; background: #2c3542; }
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.author {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatar {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  object-fit: cover;
  background: #273140;
  flex: 0 0 auto;
}
.author-name {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-time { color: #cbd3df; font-size: 12px; flex: 0 0 auto; }
.empty {
  grid-column: 1 / -1;
  min-height: 170px;
  display: grid;
  place-items: center;
  color: #8994a6;
  background: #1b222a;
  border-radius: var(--radius);
  border: 1px solid #28313d;
}
.floatbar {
  position: fixed;
  right: 18px;
  top: 48%;
  transform: translateY(-50%);
  width: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #1a2129;
  z-index: 30;
}
.floatbar a,
.floatbar button {
  width: 72px;
  height: 70px;
  border: 0;
  border-bottom: 1px solid #3a4452;
  background: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.floatbar a:last-child { border-bottom: 0; }
.float-ico { font-size: 23px; line-height: 1; }
.floatbar strong { font-size: 12px; font-weight: 700; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: start center;
  padding: 20px;
  background: rgba(4, 8, 14, .72);
  backdrop-filter: blur(8px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal {
  width: min(640px, 100%);
  max-height: calc(100dvh - 40px);
  background: #1b222b;
  border: 1px solid #323b49;
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid #2a3442;
  flex: 0 0 auto;
}
.modal-header h2 { margin: 0 0 8px; font-size: 22px; }
.modal-header p { margin: 0; color: #8290a2; font-size: 13px; }
.modal-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #111720;
  color: #dbe2ee;
  font-size: 24px;
  line-height: 1;
}
.submit-form {
  padding: 20px 24px 24px;
  display: grid;
  gap: 14px;
  overflow-y: auto;
  min-height: 0;
}
.submit-form label { display: grid; gap: 8px; color: #d6deea; font-weight: 700; }
.submit-form input,
.submit-form select,
.submit-form textarea {
  height: 42px;
  width: 100%;
  border: 1px solid #303a49;
  background: #121821;
  color: #fff;
  border-radius: 6px;
  outline: 0;
  padding: 0 12px;
}
.submit-form textarea {
  min-height: 150px;
  max-height: 42dvh;
  height: auto;
  padding: 12px;
  line-height: 1.55;
  resize: vertical;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
}
.submit-form input:focus,
.submit-form select:focus,
.submit-form textarea:focus { border-color: var(--purple); }
.image-preview {
  min-height: 110px;
  border-radius: 8px;
  border: 1px dashed #3e4a5b;
  background: #121821;
  overflow: hidden;
}
.image-preview img { width: 100%; max-height: 240px; object-fit: contain; display: block; }
.form-message { min-height: 20px; margin: 0; color: #fbbf24; }
.optional {
  margin-left: 6px;
  color: #6f7988;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
}
.required {
  margin-left: 6px;
  color: #ff6464;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
}
.submit-form input.field-error,
.submit-form select.field-error,
.submit-form textarea.field-error {
  border-color: #ff6464;
  box-shadow: 0 0 0 2px rgba(255, 100, 100, .15);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  position: sticky;
  bottom: -24px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(27,34,43,0), #1b222b 26%);
}
.btn-ghost,
.btn-primary {
  height: 40px;
  border-radius: 20px;
  padding: 0 22px;
  font-weight: 700;
}
.btn-ghost { border: 1px solid #3b4655; background: transparent; color: #dce4ef; }
.btn-primary { border: 1px solid var(--purple); background: var(--purple); color: #fff; }

.card-link-action {
  margin-top: 10px;
  width: 100%;
  height: 34px;
  border: 1px solid #313b49;
  background: #141b24;
  color: #dce4ef;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}
.card-link-action:hover {
  color: #fff;
  border-color: var(--purple);
  background: #1d2530;
}
.link-modal { width: min(720px, 100%); }
.link-viewer { padding: 20px 24px 12px; }
.link-viewer textarea {
  width: 100%;
  min-height: 190px;
  max-height: 52vh;
  resize: vertical;
  border: 1px solid #303a49;
  background: #121821;
  color: #fff;
  border-radius: 8px;
  outline: 0;
  padding: 13px 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.link-modal-footer { padding: 0 24px 22px; }
.link-open-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 1500px) {
  .topbar-inner { padding: 0 42px; }
  .page-shell { width: 1180px; }
  .card-grid { grid-template-columns: repeat(5, 1fr); }
  .card-media { height: 150px; }
}
@media (max-width: 1280px) {
  .page-shell { width: calc(100% - 32px); }
  .search { width: 300px; }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .floatbar { display: none; }
}
@media (max-width: 640px) {
  .modal-backdrop {
    padding: 10px;
    place-items: start center;
  }

  .modal {
    max-height: calc(100dvh - 20px);
  }

  .modal-header {
    padding: 16px 16px 12px;
  }

  .submit-form {
    padding: 16px;
  }

  .submit-form textarea {
    min-height: 140px;
  }
}

@media (max-width: 900px) {
  .topbar { height: auto; position: static; }
  .topbar-inner { height: auto; padding: 12px 16px; flex-wrap: wrap; }
  .brand { width: auto; }
  .nav { order: 3; width: 100%; overflow-x: auto; }
  .top-spacer { display: none; }
  .search { width: 100%; order: 2; margin: 0; }
  .hero { height: 160px; margin-top: 4px; }
  .hero-dots, .hero-arrow { display: none; }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .card-media { height: 140px; }
}
@media (max-width: 560px) {
  .nav a { min-width: 84px; }
  .card-grid { grid-template-columns: 1fr; }
  .card-media { height: 190px; }
}

/* NIUMO brand polish: close to the referenced dark resource-card layout, without copying assets. */
:root {
  --page: #0f141b;
  --top: #10151c;
  --top-border: #242b35;
  --panel: #1b222a;
  --panel-dark: #151b22;
  --purple: #7d48ff;
  --purple-soft: #a586ff;
  --red: #ff1f1f;
}

.topbar {
  background: #10151c;
  box-shadow: 0 1px 0 rgba(255,255,255,.02);
}

.brand {
  width: 174px;
  gap: 10px;
}

.brand-box {
  width: 40px;
  height: 40px;
  border: 2px solid #7d48ff;
  background:
    linear-gradient(135deg, rgba(125,72,255,.28), rgba(12,18,27,.2));
  box-shadow:
    inset 0 0 0 2px rgba(186,166,255,.18),
    0 0 18px rgba(125,72,255,.12);
}

.brand-box span {
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 900;
  color: #cdbdff;
  text-shadow: 0 0 10px rgba(125,72,255,.45);
}

.brand-box::before {
  border-left: 2px solid #c7b9ff;
  border-bottom: 2px solid #c7b9ff;
  opacity: .5;
}

.brand-box::after {
  inset: 7px;
  border-left: 0;
  border-bottom: 0;
  border-top: 2px solid #7150ff;
  border-right: 2px solid #7150ff;
  opacity: .65;
}

.brand-copy strong {
  font-size: 20px;
  letter-spacing: 8px;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255,255,255,.08);
}

.brand-copy em {
  margin-top: 5px;
  color: #e5e9f2;
  font-size: 10px;
  letter-spacing: 5.2px;
}

.nav a {
  min-width: 78px;
  padding: 0 20px;
  color: #f1f5fb;
}

.nav a.active {
  background: #171e27;
}

.nav a.active::after {
  left: 16px;
  right: 16px;
  height: 3px;
  background: #7d48ff;
  box-shadow: 0 0 12px rgba(125,72,255,.5);
}

.search {
  width: 438px;
  height: 34px;
  border-color: #202832;
  background: #171d25;
  border-radius: 6px;
}

.page-shell {
  width: 1320px;
  padding-bottom: 86px;
}

.hero {
  height: 222px;
  border-radius: 7px;
  box-shadow: 0 16px 50px rgba(0,0,0,.12);
}

.section-row {
  justify-content: center;
  position: relative;
  margin-top: 22px;
  margin-bottom: 20px;
}

.section-row h2 {
  position: relative;
  padding-bottom: 14px;
  font-size: 16px;
}

.section-row h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 60px;
  height: 2px;
  transform: translateX(-50%);
  background: #7d48ff;
}

.submit-mini {
  position: absolute;
  right: 0;
  top: 0;
}

.card-grid {
  gap: 24px 18px;
}

.card {
  background: #1b222a;
  border-radius: 7px;
  border-color: transparent;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(125,72,255,.45);
  background: #202833;
}

.card-media {
  height: 166px;
  background: #222b36;
}

.card-content {
  padding: 14px 15px 13px;
}

.card-title {
  font-size: 15px;
  line-height: 1.35;
}

.card-category {
  color: #6d7684;
}

.card-stats {
  margin-top: 20px;
  gap: 14px;
  color: #828c9b;
}

.card-divider {
  background: #2d3642;
}

.author-name {
  font-size: 13px;
}

.floatbar {
  background: #1b222b;
  box-shadow: 0 12px 32px rgba(0,0,0,.24);
}

.modal {
  border-radius: 8px;
}