/* 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}
/* 游戏区:手机 2 列(140px 阈值保证 320px 小屏也是 2 列) */
.grid-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
@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))}
}
/* 移动端(<768px)强制两列:摆脱像素阈值与字体/DPR 影响,所有手机恒定两行 */
@media(max-width:767px){
  .grid-auto,.grid-games{grid-template-columns:repeat(2,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){
  .burger{display:flex}
}

/* 移动端搜索抽屉(保留, 无引用也不影响) */
.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.blue{background:var(--blue-soft);color:var(--blue-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:600;font-size:15px;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;
}
/* 游戏像素形象(运行时生成的内联 SVG) */
.game-cover .pixel-art{
  width:74px;height:74px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.38));
  image-rendering:pixelated;
  transition:transform .18s ease;
}
.game-card:hover .game-cover .pixel-art{transform:translateY(-3px) scale(1.05)}
.cover2 .pixel-art{width:86px;height:86px}
.cover3 .pixel-art{width:98px;height:98px}
.cover4 .pixel-art{width:88px;height:88px}
.cover5 .pixel-art{width:88px;height:88px}
@media(min-width:768px){.game-cover{height:140px}}
.cover1{background:#2A1A4B}
.cover2{background:#0F2A5B}
.cover3{background:#0F4B3A}
.cover4{background:#5B1A0F}
.cover5{background:#3A1A2B}
.cover6{background:#1A3A5B}
.cover7 .pixel-art{width:90px;height:90px}
.cover7{background:#7A3B12}
.cover8{background:#4B2A5B}
.cover9{background:#0F3B5B}
.cover10{background:#1A4B2A}
.cover11{background:#5B2A0F}
.cover12{background:#4B1A3B}
.cover13{background:#1A2A5B}
.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;
}

/* 页脚 */
.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}
.site-footer .ver{
  font-variant-numeric:tabular-nums;
  opacity:.6;
  padding:1px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:11px;
  letter-spacing:.3px;
}

/* 通用按钮 */
.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}

/* 广告位预留:低调虚线占位,不干扰浏览;接入后由渲染方替换内容 */
.ad-slot{
  margin:20px 0 4px;display:flex;align-items:center;justify-content:center;
  min-height:64px;border:1px dashed var(--line);border-radius:var(--radius);
  color:var(--ink-3);font-size:11px;letter-spacing:2px;
  overflow:hidden;
}
.ad-slot[data-ad="home"]{min-height:90px}
@media(min-width:768px){.ad-slot{min-height:80px}.ad-slot[data-ad="home"]{min-height:100px}}
.ad-slot:empty::before{content:"AD";opacity:.6}

/* ===== 首页合并品牌头(站名 + 蓝色区合并,黄蓝配色,高度≈顶栏两倍) ===== */
.brand-head{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(135deg,#15306B 0%,#0F1B3D 55%,#13284f 100%);
  color:#fff;
  min-height:104px;
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:12px 16px;
  box-shadow:0 3px 0 var(--yellow);
}
.bh-top{display:flex;align-items:center;gap:10px}
.brand-head .logo{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  background:var(--yellow);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;
}
.brand-head .site-name{font-weight:600;font-size:17px;letter-spacing:.5px;white-space:nowrap}
.brand-head .spacer{flex:1}
.brand-head .bh-sub{display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}
.brand-head .bh-tag{color:var(--yellow);font-weight:500;letter-spacing:1px}
.brand-head .bh-dot{color:var(--navy-soft);opacity:.55}
.brand-head .bh-slogan{color:var(--navy-soft)}
.brand-head .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;
}
.brand-head input.search{color:var(--ink)}
.brand-head .burger{
  display:flex;flex-direction:column;gap:3px;
  padding:8px;min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}
.brand-head .burger span{width:16px;height:2px;background:#fff;border-radius:1px}
/* 首页汉堡按钮: 桌面/移动均常驻(账号菜单入口, 任何尺寸都显示) */
.brand-head .burger{display:flex}

/* ===== 全站分享按钮 + 弹窗 ===== */
.tulu-share-fab{
  position:fixed;right:14px;bottom:18px;z-index:60;
  background:var(--yellow);color:var(--navy);
  border:none;border-radius:999px;
  padding:11px 18px;font-size:14px;font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  cursor:pointer;
}
.tulu-share-fab:active{filter:brightness(.95)}

/* ===== 通用弹窗(全站级;首页等未加载 tool.css 时预约/首启弹窗仍需定位,故此处补一份) ===== */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:18px;z-index:200}
.modal-mask.hidden{display:none}
.modal{background:var(--card);border-radius:16px;width:100%;max-width:420px;padding:22px 20px;max-height:90vh;overflow:auto}