/* TULU 图路在线应用 · base.css v0.1.0 */
/* 设计令牌 + 基础组件 · 移动优先 */
:root{
  --ink:#1A1A1A;
  --ink-2:#5F5E5A;
  --ink-3:#888;
  --paper:#F5F2EC;
  --card:#FFFFFF;
  --navy:#0F1B3D;
  --navy-soft:#B5C0E0;
  --yellow:#FFD93D;
  --pink:#FF6F91;
  --line:#D8D4C8;
  --amber-soft:#FAEEDA; --amber-ink:#854F0B;
  --purple-soft:#EEEDFE; --purple-ink:#3C3489;
  --blue-soft:#E6F1FB; --blue-ink:#0C447C;
  --pink-soft:#FBEAF0; --pink-ink:#993556;
  --green-soft:#EAF3DE; --green-ink:#3B6D11;
  --teal-soft:#E1F5EE; --teal-ink:#0F6E56;
  --gray-soft:#E8E5DC; --gray-ink:#5F5E5A;
  --radius:12px;
  --fs:clamp(14px,2.2vw,17px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:var(--fs);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--ink)}

/* 布局容器 */
.container{max-width:1200px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.container{padding:0 24px}}

/* 自动折列网格:手机2列/平板3列/桌面4列,零断点 */
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.grid-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
@media(min-width:768px){
  .grid-auto{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
  .grid-games{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}

/* 顶栏 */
.topbar{
  background:var(--yellow);color:var(--ink);
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  position:sticky;top:0;z-index:50;
}
.topbar .logo{
  width:28px;height:28px;border-radius:50%;flex:0 0 28px;
  background:var(--ink);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  font-weight:500;font-size:13px;
}
.topbar .site-name{font-weight:500;font-size:15px;white-space:nowrap}
.topbar .spacer{flex:1}
.topbar .back{
  font-size:18px;padding:4px 8px;margin-left:-6px;
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
}
.topbar .search{
  display:none;
  background:var(--card);border-radius:16px;
  height:32px;padding:0 12px;font-size:13px;color:var(--ink-3);
  align-items:center;width:200px;
}
.topbar input.search{color:var(--ink)}
.burger{
  display:flex;flex-direction:column;gap:3px;
  padding:8px;min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}
.burger span{width:16px;height:2px;background:var(--ink);border-radius:1px}
@media(min-width:768px){
  .topbar .search{display:flex}
  .burger{display:none}
}

/* 移动端搜索抽屉 */
.search-sheet{
  display:none;background:var(--yellow);padding:0 16px 14px;
}
.search-sheet.show{display:block}
.search-sheet input{
  width:100%;height:40px;border-radius:20px;border:none;
  padding:0 16px;font-size:14px;outline:none;
}

/* Hero */
.hero{
  background:var(--navy);color:#fff;
  padding:36px 16px 32px;position:relative;overflow:hidden;
}
.hero-deco::before,.hero-deco::after{
  content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.10);
}
.hero-deco::before{right:-40px;top:-40px;width:220px;height:220px}
.hero-deco::after{right:90px;top:70px;width:70px;height:70px;border-color:rgba(255,255,255,.14)}
.hero-line-1,.hero-line-2{position:absolute;height:1px;background:rgba(255,255,255,.10)}
.hero-line-1{right:36px;top:40px;width:150px;transform:rotate(-22deg)}
.hero-line-2{right:70px;top:150px;width:110px;transform:rotate(15deg)}
.hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.hero-tag{color:var(--yellow);font-size:12px;letter-spacing:2px;margin-bottom:10px}
.hero h1{
  font-size:clamp(22px,4.5vw,34px);font-weight:500;
  letter-spacing:1px;margin-bottom:8px;
}
.hero-line{width:60px;height:3px;background:var(--yellow);margin-bottom:12px}
.hero-sub{color:var(--navy-soft);max-width:560px;font-size:13px}
@media(min-width:768px){
  .hero{padding:52px 24px 44px}
}

/* 统计行(一行文字) */
.stats-line{
  padding:16px 0 2px;font-size:13px;color:var(--ink-2);
}
.stats-line b{color:var(--navy);font-weight:500;padding:0 2px}

/* 板块头 */
.sec-head{margin:26px 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sec-tag{padding:4px 10px;border-radius:4px;font-size:12px;font-weight:500}
.sec-tag.amber{background:var(--amber-soft);color:var(--amber-ink)}
.sec-tag.pink{background:#FFE0E0;color:var(--pink-ink)}
.sec-tag.gray{background:var(--gray-soft);color:var(--gray-ink)}
.sec-title{font-size:17px;font-weight:500}

/* 工具卡片 */
.tool-card{
  background:var(--card);border-radius:var(--radius);
  padding:14px;min-height:86px;display:block;
  transition:transform .15s ease;
}
.tool-card:active{transform:scale(.97)}
.tool-card .tc-name{font-weight:500;font-size:14px;margin-bottom:4px}
.tool-card .tc-desc{font-size:12px;color:var(--ink-3);line-height:1.5}
.tool-card.soft-amber{background:var(--amber-soft)}
.tool-card.soft-purple{background:var(--purple-soft)}
.tool-card.soft-blue{background:var(--blue-soft)}
.tool-card.soft-pink{background:var(--pink-soft)}
.tool-card.soft-green{background:var(--green-soft)}
.tool-card.soft-teal{background:var(--teal-soft)}

/* 游戏卡片 */
.game-card{
  background:var(--card);border:1.5px solid var(--ink);
  border-radius:var(--radius);overflow:hidden;display:block;
  transition:transform .15s ease;
}
.game-card:active{transform:scale(.97)}
.game-cover{
  height:120px;position:relative;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);font-size:12px;
}
@media(min-width:768px){.game-cover{height:140px}}
.cover1{background:#2A1A4B}
.cover2{background:#0F2A5B}
.cover3{background:#0F4B3A}
.cover4{background:#5B1A0F}
.cover5{background:#3A1A2B}
.game-tag{
  position:absolute;top:8px;left:8px;
  background:var(--card);color:var(--ink);
  padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;
}
.game-body{padding:10px 12px 4px}
.game-name{font-size:14px;font-weight:500}
.game-meta{font-size:11px;color:var(--ink-3);margin-top:2px}
.game-foot{padding:0 12px 12px;display:flex;justify-content:flex-end}
.game-start{
  background:var(--yellow);color:var(--ink);
  border-radius:14px;padding:6px 14px;font-size:12px;font-weight:500;
  display:inline-flex;align-items:center;gap:4px;
  min-height:30px;
}

/* 待开发卡片 */
.wip-card{
  border:1.5px dashed var(--line);border-radius:var(--radius);
  padding:14px;opacity:.75;min-height:86px;
}
.wip-card .wc-name{font-weight:500;font-size:14px;margin-bottom:4px}
.wip-card .wc-why{font-size:12px;color:var(--ink-3)}

/* 页脚 */
.site-footer{
  background:var(--gray-soft);
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  font-size:12px;color:var(--ink-3);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  margin-top:32px;
}
.site-footer .spacer{flex:1}

/* 通用按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 18px;border-radius:22px;
  font-size:14px;font-weight:500;
}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--yellow)}
.btn-outline{background:var(--card);color:var(--ink);border:1px solid var(--ink)}
.btn:disabled{opacity:.5;pointer-events:none}

/* 隐藏 */
.hidden{display:none!important}