/* ============================================================
   STYLES.CSS — Frutiger Home Guide
   皮肤：Frutiger Aero / 玻璃拟态（照抄游戏内窗口 + 胶囊按钮 + 气泡 + 蓝天绿地）
   结构件来源见 DESIGN-BRIEF.md；本文件不含通用模板皮肤。
   ============================================================ */
:root{
  --sky-top:#2a8fd0; --sky-mid:#63c9e8; --sky-bot:#d9f4fb;
  --sea:#2fc6d9; --grass:#8ede6a; --grass-2:#5cc95f;
  --glass:rgba(255,255,255,.34); --glass-2:rgba(255,255,255,.62); --glass-line:rgba(255,255,255,.75);
  --win:rgba(244,253,255,.86); --win-2:rgba(255,255,255,.95);
  --ink:#0a2f3d; --ink-2:#15586d; --muted:#3f7286;
  --accent:#0f9dc4; --accent-2:#12b0d6; --green:#3aa84f; --danger:#d8432c; --orange:#e0862b;
  --radius:20px; --radius-sm:13px; --maxw:1120px;
  --font:"Segoe UI",Frutiger,"Helvetica Neue",system-ui,-apple-system,Roboto,sans-serif;
  --display:"Segoe UI",Frutiger,"Helvetica Neue",system-ui,sans-serif;
  --glow:0 10px 26px rgba(9,60,86,.18);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:#bfeaf7}
body{
  margin:0;color:var(--ink);font:16px/1.7 var(--font);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 55%),
    radial-gradient(38% 30% at 12% 22%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),
    radial-gradient(44% 34% at 88% 62%,rgba(255,255,255,.42),rgba(255,255,255,0) 72%),
    radial-gradient(30% 26% at 62% 8%,rgba(190,240,255,.55),rgba(190,240,255,0) 70%),
    linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 38%,#a9e4f3 68%,var(--sky-bot) 100%);
  background-attachment:fixed;
  min-height:100vh;overflow-x:hidden;
}
/* 顶部公告条（玻璃条 + 白字深底，窄屏允许换行） */
.ribbon{
  background:linear-gradient(180deg,#14618f,#0b4c6f);color:#fff;font-size:13.5px;font-weight:600;
  letter-spacing:.01em;padding:8px 0;text-align:center;border-bottom:1px solid rgba(255,255,255,.5)
}
.ribbon .wrap{padding:0 16px;overflow-wrap:anywhere}
.ribbon a{color:#eafaff}
/* 正文行宽=面板宽度（面板已按可读行宽设定，不再二次限宽） */
article p,article li{max-width:100%}
/* 官方 UI 截图与宽表突破正文栏，保证图内文字可读（窄屏取消突破） */
@media (min-width:1000px){
  article img.zoom{width:calc(100% + 180px);max-width:none;margin-left:-90px}
  article .tbl-wrap{width:calc(100% + 120px);margin-left:-60px}
}
/* 底部草地 + 水面剪影（纯 CSS，无图） */
body::after{
  content:"";position:fixed;left:0;right:0;bottom:0;height:210px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 100% at 12% 100%,var(--grass) 0 60%,transparent 61%),
    radial-gradient(70% 100% at 78% 100%,var(--grass-2) 0 60%,transparent 61%),
    linear-gradient(180deg,rgba(47,198,217,0) 0%,rgba(47,198,217,.55) 55%,rgba(47,198,217,.85) 100%);
  opacity:.5;
}
img{max-width:100%;height:auto}
a{color:#0b6d8f;text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:var(--win-2);padding:9px 14px;z-index:60;border-radius:10px}

/* ---------- 玻璃面板母题（游戏内窗口） ---------- */
.win,.card,.callout,.quick-answer,table,.facts-strip .fact,.toc{
  position:relative;border:1px solid var(--glass-line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(233,249,255,.52));
  box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(9px) saturate(120%);
}
.win::before,.card::before,.callout::before,.quick-answer::before{
  content:"";position:absolute;inset:0 0 auto 0;height:34%;
  border-radius:var(--radius) var(--radius) 40% 40%/var(--radius) var(--radius) 100% 100%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));
  pointer-events:none;
}

/* ---------- 顶部玻璃工具条 ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(224,246,253,.62));
  border-bottom:1px solid var(--glass-line);
  backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 6px 18px rgba(9,60,86,.12);
}
.topbar .bar{display:flex;align-items:center;gap:14px;min-height:66px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:700;font-size:17px;letter-spacing:.01em}
.brand img{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.9);box-shadow:0 3px 10px rgba(9,60,86,.18);background:#fff}
.nav{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav ul{display:flex;gap:6px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.nav a{color:var(--ink-2);font-weight:600;padding:7px 13px;border-radius:999px;display:inline-block}
.nav a:hover,.nav a:focus-visible{background:rgba(255,255,255,.72);color:var(--ink);text-decoration:none}
.nav .kids{display:none;position:absolute;top:100%;min-width:200px;padding:9px;flex-direction:column;
  border:1px solid var(--glass-line);border-radius:var(--radius-sm);background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(226,247,254,.9));
  box-shadow:var(--glow);backdrop-filter:blur(12px);z-index:40}
.nav .kids a{border-radius:10px;font-weight:500;font-size:15px}
.nav li{position:relative}
.nav li.has-kids::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:12px;z-index:39}
.nav li.has-kids > a::after{content:" ▾";opacity:.6}
.nav li.has-kids:hover .kids,.nav li.has-kids:focus-within .kids{display:flex}
.nav .cta{
  color:#fff;font-weight:700;padding:9px 16px;border-radius:999px;
  background:linear-gradient(180deg,#2ba9cd 0%,#0f7ea3 55%,#0a5f7d 100%);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 6px 16px rgba(10,95,125,.35),inset 0 1px 0 rgba(255,255,255,.75)
}
.nav .cta:hover{text-decoration:none;filter:brightness(1.06)}
@media (max-width:860px){
  .topbar .bar{flex-wrap:wrap;padding-top:9px;padding-bottom:11px}
  .nav{margin-left:0;width:100%;overflow-x:auto}
  .nav ul{flex-wrap:nowrap;white-space:nowrap}
  /* 窄屏不展开下拉子项（否则卡片会撑破 390px 视口）；子页统一走 All guides 与攻略索引 */
  .nav .kids{display:none}
}

/* ---------- hero：官方大图 + 玻璃面板承载标题 ---------- */
.hero{position:relative;padding:34px 0 30px}
.hero::before{
  content:"";position:absolute;inset:-90px 0 auto 0;height:420px;z-index:-1;
  background:radial-gradient(60% 70% at 50% 0%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%);
}
.hero-in{padding:0}
.hero-shot{
  border:1px solid var(--glass-line);border-radius:calc(var(--radius) + 6px);overflow:hidden;
  box-shadow:0 18px 40px rgba(9,60,86,.28);position:relative;background:#7fd4ea;
}
.hero-shot img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;object-position:50% 42%}
.hero-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%,rgba(10,47,61,.16))}
.hero-panel{
  position:relative;margin:-58px auto 0;max-width:940px;padding:22px 26px 24px;text-align:center;
  border-radius:var(--radius);border:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(228,248,255,.86));
  box-shadow:0 18px 40px rgba(9,60,86,.22),inset 0 1px 0 #fff;backdrop-filter:blur(14px)
}
.hero-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:40%;border-radius:var(--radius) var(--radius) 45% 45%/var(--radius) var(--radius) 100% 100%;background:linear-gradient(180deg,rgba(255,255,255,.9),transparent);pointer-events:none}
.hero h1{font-family:var(--display);font-size:clamp(30px,5.6vw,54px);line-height:1.06;margin:6px 0 10px;letter-spacing:-.01em;color:#06303f}
.hero h1 span{display:block;font-size:.62em;font-weight:600;color:var(--ink-2);letter-spacing:.02em;margin-top:4px}
.eyebrow{margin:0;color:#08465c;font-weight:700;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase}
.lead{color:var(--ink-2);font-size:17.5px;max-width:62ch;margin:0 auto}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.sticker{
  position:absolute;top:-14px;right:26px;transform:rotate(6deg);
  background:linear-gradient(180deg,#fff,#dff5fc);border:1px solid var(--glass-line);
  color:#0b6d8f;font-weight:700;font-size:10.5px;line-height:1.25;letter-spacing:.1em;
  padding:8px 12px;border-radius:12px;text-align:center;box-shadow:0 6px 16px rgba(9,60,86,.18)
}
/* 玻璃胶囊按钮（游戏内 Confirm / Close） */
.btn{
  display:inline-block;padding:12px 22px;border-radius:999px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,#5fd6ee 0%,var(--accent) 52%,#0a7fa3 100%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 20px rgba(10,127,163,.34),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .12s ease,filter .12s ease
}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn.ghost{color:#0b6d8f;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(226,247,254,.85));box-shadow:0 5px 14px rgba(9,60,86,.14),inset 0 1px 0 #fff}
.btn.green{background:linear-gradient(180deg,#8ee86f 0%,#3aa84f 55%,#26803a 100%);box-shadow:0 8px 20px rgba(38,128,58,.3),inset 0 1px 0 rgba(255,255,255,.8)}

/* ---------- 分区标题 + 计数胶囊 ---------- */
.section-head{display:flex;align-items:center;gap:12px;margin:34px 0 14px;flex-wrap:wrap}
.section-head h2{margin:0;font-size:24px;color:#06303f}
.overline{color:#0b6d8f;font-weight:700;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase}
.count-pill{
  display:inline-block;margin-left:9px;padding:2px 11px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,#63d3ea,#0f9dc4);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}
h2{font-family:var(--display)}

/* ---------- 卡片网格（末行拉伸填满，不留洞） ---------- */
.grid{display:flex;flex-wrap:wrap;gap:18px;margin:16px 0 34px}
.card{flex:1 1 290px;display:flex;flex-direction:column;overflow:hidden;color:var(--ink);transition:transform .14s ease,box-shadow .14s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(9,60,86,.26),inset 0 1px 0 #fff;text-decoration:none}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%;border-bottom:1px solid rgba(255,255,255,.7)}
.card .swatches{display:flex;height:6px;width:100%}
.card .swatches i{flex:1}
.card-body{padding:14px 16px 18px;position:relative}
.card h3{margin:4px 0 7px;font-size:18.5px;color:#06303f}
.card p{margin:0 0 10px;color:var(--ink-2);font-size:14.5px}
.card .go{color:#0b5c77;font-weight:700;font-size:14px}
.card .stamp{display:block;color:var(--muted);font-size:12px;margin-top:8px}
.pill-tag{
  position:absolute;top:-14px;right:14px;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;color:#0b6d8f;
  background:linear-gradient(180deg,#fff,#dff5fc);border:1px solid var(--glass-line);box-shadow:0 5px 12px rgba(9,60,86,.16)
}

/* ---------- 速答卡（build_site 产出的是 .quick-answer / .qa-stamp） ---------- */
.quick-answer{padding:16px 18px;margin:18px 0 22px;border-radius:var(--radius)}
.quick-answer .qa-stamp{display:inline-block;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#07381a;background:linear-gradient(180deg,#b6f59a,#5fd06a);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.quick-answer p{margin:9px 0 0;font-weight:600;color:#07333f}

/* ---------- 事实条 ---------- */
.facts-strip{margin:0 0 26px}
.facts{display:flex;gap:14px;flex-wrap:wrap;padding:0}
.fact{flex:1 1 190px;padding:13px 16px;border-radius:var(--radius-sm)}
.fact-k{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#0b6d8f;font-weight:700}
.fact-v{display:block;font-size:17px;font-weight:700;color:#06303f;margin-top:3px}

/* ---------- 正文 ---------- */
/* ---------- 正文：一块「游戏窗口」大小的玻璃面板（宽度=可读行宽，图/表允许突破） ---------- */
article{--measure:700px;max-width:var(--measure);margin:24px auto 30px;padding:26px 26px 34px;position:relative;
  border:1px solid var(--glass-line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(233,249,255,.46));
  box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(135%)}
article h1{font-family:var(--display);font-size:clamp(27px,5vw,43px);line-height:1.1;color:#06303f;margin:0 0 8px}
article h2{margin-top:36px;font-size:23px;color:#06303f;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.85);text-shadow:0 1px 0 #fff}
article h3{margin-top:26px;font-size:19px;color:#0b4a5e}
article p,article li{color:#0a3543}
article img.zoom{border:1px solid var(--glass-line);border-radius:var(--radius-sm);cursor:zoom-in;display:block;margin:16px 0;box-shadow:var(--glow)}
.tbl-wrap{overflow-x:auto;margin:16px 0}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px;overflow:hidden;border-radius:var(--radius-sm)}
th{background:linear-gradient(180deg,#cdefff,#a7e2f4);color:#06303f;font-weight:700;text-align:left;padding:11px 13px;border-bottom:1px solid var(--glass-line)}
td{padding:10px 13px;border-bottom:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.55);color:#0a3543}
tr:last-child td{border-bottom:0}
.callout{padding:15px 17px;margin:18px 0;border-radius:var(--radius-sm)}
.callout p{margin:0}
.callout.note{border-left:5px solid var(--accent-2)}
.callout.warn{border-left:5px solid var(--danger);background:linear-gradient(180deg,rgba(255,244,242,.92),rgba(255,232,228,.7))}
.callout.tip{border-left:5px solid var(--green)}
blockquote{margin:18px 0;padding:6px 16px;border-left:4px solid rgba(255,255,255,.9);color:var(--ink-2)}
code{background:rgba(255,255,255,.8);padding:2px 7px;border-radius:7px;font-size:.94em}
.toc{margin:18px 0;padding:14px 16px;border-radius:var(--radius-sm)}
.toc-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.toc-list a{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.8);font-size:13.5px;font-weight:600}
.crumb{font-size:12.5px;color:#0b5c77;margin:0 0 10px}
.crumb a{color:#0b5c77}
.crumb .sep{opacity:.6;padding:0 6px}
.crumb .here{font-weight:600;color:#0a4f66}
.muted{color:var(--muted)}
.stamp{display:block;color:var(--muted);font-size:12px;margin-top:8px}
.sep{opacity:.55}

/* ---------- 广告位（桌面指针门控；命名沿用舰队三态选择器） ---------- */
@media (hover: hover) and (pointer: fine){ .ad-slot-native{display:block} }
@media not all and (hover: hover) and (pointer: fine){ .ad-slot-native{display:none} }
@media (hover: hover) and (pointer: fine){ .ad-slot-mobile{display:none} }
@media not all and (hover: hover) and (pointer: fine){ .ad-slot-mobile{display:block} }
.ad-slot,.ad-slot-native,.ad-slot-mobile{margin:28px auto;max-width:var(--maxw)}
.ad-label{margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ad-inner{min-height:90px;border:1px solid var(--glass-line);border-radius:var(--radius-sm);background:rgba(255,255,255,.7);overflow:hidden}

/* ---------- 页脚 ---------- */
.foot{margin-top:34px;padding:24px 0;border-top:1px solid var(--glass-line);background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(214,243,252,.5));backdrop-filter:blur(12px)}
.foot .muted{color:var(--muted);font-size:13px}
.foot-links a{color:#0b6d8f;font-weight:600}
.disclaimer{color:var(--muted);font-size:13px;max-width:88ch}

/* ---------- 气泡装饰（低透明度，动效可关） ---------- */
.bubbles{position:fixed;inset:auto 0 0 0;height:100vh;z-index:-1;pointer-events:none;overflow:hidden}
.bubbles i{
  position:absolute;bottom:-90px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(255,255,255,.28) 45%,rgba(214,243,252,.12) 70%);
  border:1px solid rgba(255,255,255,.6);animation:rise linear infinite
}
.bubbles i:nth-child(1){left:6%;width:26px;height:26px;animation-duration:26s}
.bubbles i:nth-child(2){left:22%;width:14px;height:14px;animation-duration:20s;animation-delay:4s}
.bubbles i:nth-child(3){left:47%;width:34px;height:34px;animation-duration:32s;animation-delay:9s}
.bubbles i:nth-child(4){left:68%;width:18px;height:18px;animation-duration:23s;animation-delay:2s}
.bubbles i:nth-child(5){left:86%;width:24px;height:24px;animation-duration:29s;animation-delay:12s}
@keyframes rise{0%{transform:translateY(0) scale(.9);opacity:0}12%{opacity:.85}100%{transform:translateY(-105vh) scale(1.05);opacity:0}}
@media (prefers-reduced-motion: reduce){.bubbles{display:none}.card{transition:none}}

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .hero{padding:22px 0 20px}
  .hero-panel{margin-top:-30px;padding:20px 16px 22px;max-width:100%}
  .hero-shot img{aspect-ratio:4/3}
  .sticker{position:static;display:inline-block;transform:none;margin:0 0 12px;font-size:10px}
  .hero h1{font-size:clamp(26px,8vw,38px)}
  .lead{font-size:16px}
  .ribbon{font-size:12.5px}
  body::after{height:150px}
  .card{flex:1 1 100%}
  .section-head h2{font-size:21px}
}