/* ============================================================
   规则怪谈 · 复古像素风共享样式
   墨绿 / 亮黄 / 砖红 —— 老游戏机配色
   ============================================================ */

:root {
  --color-bg: #0b1f16;            /* 墨绿深底 */
  --color-bg-2: #123527;          /* 渐变第二层 */
  --color-panel: #173d2c;         /* 卡片面板 */
  --color-panel-2: #1e4a36;       /* 卡片 hover */
  --color-yellow: #f2d53c;        /* 亮黄 */
  --color-red: #c1440e;           /* 砖红 */
  --color-red-bright: #e05a1f;
  --color-text: #e8e6d8;          /* 米白文字 */
  --color-muted: #9fb39a;         /* 弱化文字 */
  --color-border: #3a5a44;
  --pixel-shadow: 4px 4px 0 rgba(0,0,0,.55);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--color-text);
  background: linear-gradient(160deg, var(--color-bg) 0%, var(--color-bg-2) 60%, #0a1a12 100%);
  min-height: 100vh;
  line-height: 1.6;
  image-rendering: pixelated;
}

/* 像素噪点背景（纯 CSS，不引外网） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .06;
  background-image:
    repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 4px);
}

/* ---------- 布局 ---------- */
.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 60px;
  position: relative;
  z-index: 1;
}

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 20px;
  border-bottom: 3px solid var(--color-border);
  margin-bottom: 26px;
}

.topbar .logo {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 1px;
  color: var(--color-yellow);
  text-shadow: 2px 2px 0 var(--color-red);
}

nav.main-nav { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 标题渐变 ---------- */
h1.title {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.2;
  background: linear-gradient(90deg, var(--color-yellow), var(--color-red-bright), var(--color-yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  margin-bottom: 8px;
}

.subtitle { color: var(--color-muted); margin-bottom: 26px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--color-panel);
  border: 2px solid var(--color-border);
  box-shadow: var(--pixel-shadow);
  padding: 18px 20px;
  margin-bottom: 18px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.card:hover {
  transform: translate(-2px, -2px);
  background: var(--color-panel-2);
  box-shadow: 6px 6px 0 rgba(0,0,0,.55);
}

/* 内容随滚动渐现 */
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in.visible { opacity: 1; transform: none; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-bg);
  background: var(--color-yellow);
  border: 2px solid var(--color-bg);
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,.5); }

.btn-red { background: var(--color-red-bright); color: #fff; }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); box-shadow: 3px 3px 0 rgba(0,0,0,.3); }

.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- 规则条目 ---------- */
.rule-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--color-border);
  background: rgba(0,0,0,.18);
  margin-bottom: 12px;
}
.rule-item .num {
  font-weight: 900;
  color: var(--color-yellow);
  min-width: 26px;
}
.rule-item .txt { flex: 1; }
.rule-item .tag {
  font-size: .72rem;
  color: var(--color-bg);
  background: var(--color-yellow);
  padding: 2px 8px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- 惩罚黑屏 ---------- */
.blackout {
  position: fixed;
  inset: 0;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  text-align: center;
  padding: 30px;
}
.blackout.show { display: flex; animation: flicker .5s steps(2) infinite; }
.blackout .msg { color: var(--color-red-bright); font-weight: 800; font-size: 1.4rem; letter-spacing: 2px; text-shadow: 0 0 12px var(--color-red); }
@keyframes flicker { 0%{opacity:1} 50%{opacity:.55} 100%{opacity:1} }

/* 警报闪烁 */
.alarm { animation: alarm .4s steps(2) infinite; }
@keyframes alarm { 0%{background:var(--color-red)} 100%{background:var(--color-bg)} }

/* ---------- 表单 ---------- */
input[type=text], textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  padding: 10px 12px;
  margin-bottom: 12px;
}
input[type=text]:focus, textarea:focus { outline: none; border-color: var(--color-yellow); }

/* ---------- 杂项 ---------- */
.muted { color: var(--color-muted); }
.center { text-align: center; }
.mt { margin-top: 18px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }

footer { margin-top: 40px; text-align: center; color: var(--color-muted); font-size: .85rem; border-top: 2px solid var(--color-border); padding-top: 18px; }

/* 响应式 */
@media (max-width: 520px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; text-align: center; }
}