/* wwq_theme.css —— 瓦帮手军事风 · 亮色主题
   复刻 wwqysj.top 设计系统：切角卡 / 窄体字 / 双语副标 / 青绿·红强调 */

:root{
  --bg:#eef1f4;           /* 页面底 */
  --bg2:#e4e9ee;          /* 次级底 */
  --surface:#ffffff;      /* 卡面 */
  --surface2:#f6f8fa;     /* 卡内次级 */
  --ink:#1a2733;          /* 主文字 */
  --ink2:#5b6b78;         /* 次文字 */
  --ink3:#8a99a6;         /* 弱文字 */
  --line:rgba(20,30,40,.10);   /* 细边框 = border-black/10 */
  --line2:rgba(20,30,40,.06);
  --win:#0ea67e;          /* 胜/正 青绿(亮色深一档) */
  --win-bg:#0ea67e14;
  --lose:#e0483c;         /* 负/败 红 */
  --lose-bg:#e0483c12;
  --accent:#1a2733;       /* 主强调(深) */
  --gold:#c88a2a;         /* ACS/高光 */
  --radius:3px;
  --cut:10px;             /* 切角尺寸 */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  line-height:1.5;padding-bottom:50px;
  background-image:
    linear-gradient(var(--line2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:44px 44px;   /* 战术网格底纹 */
}

/* 窄体标题字（军事硬朗感）*/
.font-display{
  font-family:"Arial Narrow","Bahnschrift Condensed","Oswald","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:700;font-stretch:condensed;letter-spacing:.2px;
}

/* ===== 切角卡（核心视觉）===== */
.tactical-cut{
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
/* 切角 + 描边模拟（用双层：底色块做描边）*/
.tcard{
  position:relative;background:var(--surface);
  border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.tcard-wrap{position:relative}
.tcard-wrap::before{  /* 切角描边效果 */
  content:"";position:absolute;inset:0;background:var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.tcard-wrap>.inner{
  position:relative;margin:1px;background:var(--surface);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}

/* ===== 双语区块标题 ===== */
.sec-head{margin-bottom:16px}
.sec-head .en{
  font-family:"Arial Narrow","Bahnschrift Condensed",sans-serif;font-weight:700;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink3);
  display:block;
}
.sec-head .cn{
  font-family:"Arial Narrow","Bahnschrift Condensed","PingFang SC",sans-serif;font-weight:700;
  font-size:24px;color:var(--ink);margin-top:2px;letter-spacing:.5px;
}
.sec-head .cn::before{content:"";display:inline-block;width:4px;height:20px;background:var(--lose);margin-right:9px;vertical-align:-3px;border-radius:1px}

/* 布局 */
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.section{padding:28px 0;border-bottom:1px solid var(--line)}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .in{max-width:1080px;margin:0 auto;height:56px;padding:0 16px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .logo{display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:#fff;font-family:"Arial Narrow",sans-serif;font-weight:700;font-size:19px;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.brand b{font-family:"Arial Narrow","PingFang SC",sans-serif;font-size:17px;letter-spacing:.5px}
.brand .en{font-size:9px;letter-spacing:1.5px;color:var(--ink3);text-transform:uppercase;display:block;line-height:1}

/* 强调色/工具类 */
.win{color:var(--win)} .lose{color:var(--lose)}
.mono{font-family:"JetBrains Mono","SF Mono",Consolas,monospace}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink2);background:var(--surface2);border:1px solid var(--line);padding:3px 9px;border-radius:2px}