:root{
  --bg:#fff7e8; --ink:#4a3520; --paper:#fffdf7; --line:#e6cfa8;
  --gold:#f5b40a; --red:#e8513a; --green:#4caf50;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  background:var(--bg); color:var(--ink);
  background-image:radial-gradient(#f0dcb4 1px,transparent 1px);
  background-size:22px 22px;
}
a{color:var(--red);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:20px}
header.top{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 20px;background:linear-gradient(90deg,#ffd86b,#ffb347);
  border-bottom:4px solid #e07b2a;position:sticky;top:0;z-index:50;
}
header.top h1{font-size:24px;margin:0;color:#7a3c00;text-shadow:1px 1px 0 #fff5}
header.top nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
header.top nav a{
  background:#fff8;padding:7px 14px;border-radius:20px;color:#7a3c00;font-weight:700;
  border:2px solid #ffffff80
}
header.top nav a:hover{background:#fff}

/* hero */
.hero{text-align:center;padding:30px 16px}
.hero img.lineup{max-width:760px;width:100%;border-radius:18px;box-shadow:0 10px 30px #0002}
.hero h2{font-size:30px;margin:18px 0 6px;color:#7a3c00}
.hero p{font-size:17px;color:#6b5436;max-width:640px;margin:6px auto}
.btnrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.btn{
  display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:18px;
  padding:14px 28px;border-radius:30px;border:0;cursor:pointer;box-shadow:0 5px 0 #b53a26;
  transition:transform .05s
}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #b53a26}
.btn.alt{background:var(--green);box-shadow:0 5px 0 #357a38}
.btn.gold{background:var(--gold);color:#5a3c00;box-shadow:0 5px 0 #c08a00}

.section-title{font-size:22px;margin:26px 0 12px;color:#7a3c00;border-left:8px solid var(--gold);padding-left:12px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{padding:8px 16px;border-radius:20px;background:#fff;border:2px solid var(--line);cursor:pointer;font-weight:700}
.tab.on{background:var(--gold);border-color:var(--gold);color:#5a3c00}

/* 卡片 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.card{
  border-radius:16px;overflow:hidden;background:var(--paper);
  border:3px solid var(--line);box-shadow:0 5px 14px #0001;display:flex;flex-direction:column;
  aspect-ratio:3/4.2;position:relative
}
.card .band{padding:8px 10px;color:#fff;font-weight:800;display:flex;align-items:center;gap:6px;font-size:15px}
.card .badge{margin-left:auto;background:#ffffff44;border-radius:50%;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid #fff8}
.card .face{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;text-align:center}
.card .ico{font-size:42px;margin-bottom:8px;line-height:1}
.card .nm{font-size:18px;font-weight:800;margin-bottom:6px}
.card .ds{font-size:13px;color:#6b5436;line-height:1.5}
.card.warn .face::after{content:"提醒卡";position:absolute;top:42px;right:8px;background:#e8513a;color:#fff;font-size:11px;padding:2px 7px;border-radius:10px}
.card .foot{padding:6px 8px;font-size:11px;color:#fff;text-align:center;font-weight:700}
/* 情境卡 */
.card.sit .sceneart{width:100%;aspect-ratio:1/1;overflow:hidden;background:#f3e7cf}
.card.sit .sceneart img{width:100%;height:100%;object-fit:cover;display:block}
.card.sit .face{justify-content:flex-start;padding-top:12px}
.card.sit .scene{font-size:15px;font-weight:700;color:#4a3520;line-height:1.6;margin-bottom:auto}
.card.sit .ans{font-size:12px;color:#fff;padding:4px 10px;border-radius:12px;margin-top:8px;font-weight:700}
.card.sit .why{font-size:12px;color:#6b4e1e;background:#fff7e0;border:1px dashed #d9b75a;border-radius:10px;padding:7px 9px;margin-top:8px;line-height:1.55;text-align:left}

footer{text-align:center;padding:30px;color:#9a7c50;font-size:13px}
.muted{color:#9a7c50}