:root{
  --paper:#e9b54a; --paper2:#f1c96a; --ink:#1f1b16; --cream:#fffaf0;
  --orange:#f0842a; --brown:#5a3a1e; --green:#5f9e4e; --sky:#8fb3e0; --pink:#f2a1a8;
  --rail:190px;
  font-size:19px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); line-height:1.6;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",sans-serif;
  background:var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.12) 0 2px,transparent 3px),
    radial-gradient(circle at 70% 80%,rgba(120,70,0,.08) 0 2px,transparent 3px);
  background-size:38px 38px,53px 53px;
}
main{margin-left:var(--rail); padding:0 5vw 40vh}
body.rec-mode main{margin-left:0}
body.rec-mode #rail{display:none}

/* ---------- 章節軌 ---------- */
#rail{position:fixed; left:0; top:0; bottom:0; width:var(--rail); padding:22px 14px;
  background:var(--ink); color:var(--cream); font-size:.72rem; display:flex; flex-direction:column; z-index:5}
.rail-title{font-weight:900; letter-spacing:.2em; color:var(--paper); margin-bottom:10px}
#rail ol{list-style:none; margin:0; padding:0; flex:1; overflow:auto}
#rail li{padding:5px 8px; border-radius:6px; cursor:pointer; opacity:.55; line-height:1.3}
#rail li.ch{opacity:.85; font-weight:700; margin-top:10px; color:var(--paper)}
#rail li.on{opacity:1; background:var(--orange); color:var(--ink)}
#rail li .t{float:right; color:#9f9; font-family:monospace}
.rail-keys{border-top:1px solid #444; padding-top:10px; line-height:1.9; opacity:.7}
.rail-keys b{display:inline-block; min-width:1.4em; text-align:center; background:var(--cream); color:var(--ink); border-radius:3px; margin-right:2px}
#rec{position:fixed; right:14px; top:12px; width:12px; height:12px; border-radius:50%; background:#d22; display:none; z-index:9; box-shadow:0 0 0 3px rgba(0,0,0,.25)}
body.timing #rec{display:block; animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- 共用 ---------- */
section{padding:12vh 0 6vh; position:relative; max-width:1300px; margin:0 auto}
h1{font-size:4.2rem; line-height:1.15; margin:.3em 0; font-weight:900; letter-spacing:.04em}
h2{font-size:2.1rem; margin:0 0 .8em; font-weight:900}
h2 .num{display:inline-block; background:var(--ink); color:var(--cream); font-size:.8em; padding:0 .45em; border-radius:8px; margin-right:.5em}
h3{margin:.1em 0 .4em; font-size:1.3rem}
.sub{font-size:1.05rem; margin:-.6em 0 1.2em; color:var(--brown)}
.small{font-size:.8rem; color:var(--brown)}
.lead{font-size:1.35rem; font-weight:500}
.tag,.label{display:inline-block; background:var(--ink); color:var(--cream); padding:.2em .8em; border-radius:8px; font-weight:700; font-size:.9rem}
.card,.chapters-card{background:var(--cream); border:4px solid var(--ink); border-radius:18px; padding:1.2em 1.4em; box-shadow:8px 8px 0 rgba(0,0,0,.18)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start}
figure{margin:0}
figure img{width:100%; display:block; border:4px solid var(--ink); border-radius:12px; background:var(--cream)}
figcaption{font-size:.85rem; margin-top:.4em; font-weight:600}
img.zoom{cursor:zoom-in}
.hazard{height:26px; background:repeating-linear-gradient(-45deg,var(--ink) 0 22px,var(--orange) 22px 44px); border:3px solid var(--ink); border-radius:6px}
.stamp{position:absolute; right:0; bottom:4vh; transform:rotate(-6deg); border:5px solid #c0392b; color:#c0392b; font-weight:900; padding:.2em .8em; font-size:1.3rem; border-radius:10px; background:rgba(255,250,240,.6)}

/* ---------- 講稿 ---------- */
aside.note{display:none; margin-top:24px; background:#fff8c9; border:3px dashed var(--brown); border-radius:12px; padding:.6em 1.2em; font-size:.85rem}
aside.note::before{content:"講稿提示"; font-weight:900; color:var(--brown)}
aside.note ul{margin:.3em 0; padding-left:1.2em}
body.show-notes aside.note{display:block}

/* ---------- 封面 ---------- */
.cover{min-height:100vh; padding-top:6vh}
.cover-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center; margin:4vh 0}
.facts{list-style:none; padding:0; margin:1.2em 0}
.facts li{padding:.35em 0; border-bottom:2px dashed rgba(0,0,0,.25)}
.facts b{display:inline-block; width:3.2em; background:var(--ink); color:var(--cream); text-align:center; border-radius:6px; margin-right:.7em; font-size:.85em}
.cover-art{position:relative; height:520px}
.float{position:absolute; filter:drop-shadow(10px 14px 0 rgba(0,0,0,.18))}
.f1{width:70%; left:0; top:0; animation:bob 6s ease-in-out infinite}
.f2{width:58%; right:0; bottom:0; animation:bob 7s ease-in-out infinite reverse}
@keyframes bob{50%{transform:translateY(-14px)}}
.big-ol{margin:.6em 0 0; padding-left:1.4em; font-size:1.5rem; font-weight:900}
.big-ol li{margin:.2em 0}
.big-ol a{color:var(--ink); text-decoration:none; border-bottom:4px solid var(--orange)}
.big-ol span{font-size:.95rem; font-weight:500; margin-left:1em; color:var(--brown)}

/* ---------- 時程 ---------- */
.timeline{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.ms{background:var(--cream); border:3px solid var(--ink); border-radius:14px; padding:.7em .8em; position:relative}
.ms .d{font-weight:900; font-size:1.05rem}
.ms .k{display:inline-block; font-size:.72rem; background:var(--ink); color:var(--cream); padding:0 .4em; border-radius:4px; margin-right:.3em}
.ms p{margin:.3em 0 0; font-size:.8rem}
.ms.now{background:var(--orange)}
.ms.hot{background:#cfe8b8}

/* ---------- 章節封面 ---------- */
.chapter{min-height:92vh; display:flex; flex-direction:column; justify-content:center; border-top:10px solid var(--ink)}
.chapter-no{font-size:9rem; font-weight:900; line-height:1; color:var(--cream); -webkit-text-stroke:5px var(--ink)}
.chapter-title{font-size:5rem; margin:.1em 0}
.chapter-sub{font-size:1.5rem; margin:0; max-width:55%}
.chapter-art{position:absolute; right:0; top:50%; transform:translateY(-50%); width:44%; max-height:80%; object-fit:contain; filter:drop-shadow(12px 14px 0 rgba(0,0,0,.2))}

/* ---------- 旅程 ---------- */
.journey{display:grid; grid-template-columns:repeat(9,1fr); gap:8px}
.step{border:3px solid var(--ink); border-radius:12px; padding:.6em .4em; text-align:center; font-weight:800; font-size:.9rem; position:relative; min-height:110px; display:flex; flex-direction:column; justify-content:center; gap:.3em}
.step i{font-style:normal; display:block; width:1.8em; height:1.8em; line-height:1.8em; margin:0 auto; border-radius:50%; background:var(--ink); color:var(--cream)}
.step.web{background:var(--cream)}
.step.game{background:#bfe3a6}
.step:not(:last-child)::after{content:"▶"; position:absolute; right:-12px; top:50%; transform:translateY(-50%); font-size:.8rem; z-index:2}
.legend{margin-top:14px; display:flex; gap:14px; font-size:.85rem}
.legend span{padding:.1em .7em; border:2px solid var(--ink); border-radius:6px}
.legend .web{background:var(--cream)} .legend .game{background:#bfe3a6}

/* ---------- 裝置 ---------- */
.devices{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.dev{background:var(--cream); border:3px solid var(--ink); border-radius:14px; padding:.8em}
.dev b{display:block; font-size:1.05rem}
.dev span{display:inline-block; margin:.3em 0; padding:0 .6em; border-radius:6px; font-weight:800; font-size:.8rem; color:var(--cream)}
.dev.ok span{background:var(--green)} .dev.cond span{background:var(--orange)} .dev.no span{background:#8a8a8a}
.dev p{margin:0; font-size:.8rem}

/* ---------- 工具圖鑑 ---------- */
.tools{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.tool{display:grid; grid-template-columns:62px auto 26px 1fr; align-items:center; gap:8px; background:var(--cream); border:3px solid var(--ink); border-radius:14px; padding:.55em .7em}
.tool .ico{font-size:2.1rem; text-align:center}
.tool .tname{background:var(--ink); color:var(--cream); font-weight:800; font-size:.8rem; padding:.15em .45em; border-radius:6px; writing-mode:vertical-rl; letter-spacing:.1em}
.tool .arrow{font-weight:900; text-align:center}
.tool .op{font-size:.8rem; line-height:1.4}
.tool .op b{display:block; font-size:1rem}
.book-ref{width:46%; margin-top:26px; border:4px solid var(--ink); border-radius:12px; transform:rotate(-1.5deg)}

/* ---------- 操作表 ---------- */
table.ctrl{width:100%; border-collapse:separate; border-spacing:0; background:var(--cream); border:4px solid var(--ink); border-radius:16px; overflow:hidden; font-size:1rem}
.ctrl th{background:var(--ink); color:var(--cream); text-align:left; padding:.6em 1em}
.ctrl td{padding:.5em 1em; border-top:2px solid rgba(0,0,0,.12)}
.ctrl td:first-child{font-weight:800; width:18%}
kbd{display:inline-block; min-width:1.8em; text-align:center; padding:.05em .45em; margin:0 .12em; border:2px solid var(--ink); border-bottom-width:4px; border-radius:6px; background:#fff; font-family:inherit; font-weight:800; font-size:.85em}

/* ---------- 基地 ---------- */
.checks{list-style:none; padding:0; margin:.8em 0 0}
.checks li{padding:.3em 0 .3em 1.7em; position:relative}
.checks li::before{content:"✔"; position:absolute; left:0; color:var(--green); font-weight:900}
.deliver{margin:.8em 0 .4em; padding-left:1.4em}
.deliver li{margin:.4em 0}
.deliver b{display:block; font-size:1.1rem}

/* ---------- 世界 ---------- */
.world{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.zone{border:4px solid var(--ink); border-radius:16px; padding:1em; min-height:170px; display:flex; flex-direction:column; gap:.4em}
.zone b{font-size:1.3rem}
.zone span{font-size:.85rem}
.z1{background:repeating-linear-gradient(-45deg,#fbe0b8 0 16px,#f7d19a 16px 32px)}
.z2{background:#f7c7cb} .z3{background:#c9e6b2} .z4{background:#cfe0f5}
.wide-ref{margin-top:24px; max-width:62%}

/* ---------- 小豬 ---------- */
.pigs{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.pig img{aspect-ratio:4/3; object-fit:cover}
.pig figcaption{background:var(--cream); border:3px solid var(--ink); border-radius:12px; padding:.6em .9em; margin-top:10px; font-weight:500; font-size:.9rem}
.pig figcaption b{display:block; font-size:1.15rem}
.pig figcaption em{display:block; font-style:normal; font-weight:800; color:var(--brown); margin-top:.2em}

/* ---------- 概念建築 ---------- */
.concept-grid{display:grid; gap:34px}
.pending{background:var(--cream); border:4px dashed var(--ink); border-radius:16px; padding:3em; text-align:center; font-weight:800}
.cbuild{background:var(--cream); border:4px solid var(--ink); border-radius:18px; padding:1em 1.2em; box-shadow:8px 8px 0 rgba(0,0,0,.18)}
.cbuild h3{display:flex; gap:.6em; align-items:baseline}
.cbuild h3 small{font-size:.75rem; background:var(--ink); color:var(--cream); padding:0 .5em; border-radius:5px}
.cbuild p{margin:.2em 0 .8em; font-size:.9rem}
.cimgs{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px}
.cimgs figure img{background:#2a2830; aspect-ratio:16/10; object-fit:contain}
.ops-slot:empty{display:none}
.ops-slot{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-top:24px}

/* ---------- 過往活動 ---------- */
.past{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.event{background:var(--cream); border:4px solid var(--ink); border-radius:18px; overflow:hidden; box-shadow:8px 8px 0 rgba(0,0,0,.18)}
.event img{width:100%; display:block; border-bottom:4px solid var(--ink)}
.ev-body{padding:.8em 1.1em 1em}
.ev-year{display:inline-block; background:var(--orange); font-weight:900; padding:0 .5em; border-radius:6px; border:2px solid var(--ink)}
.kpis{display:flex; flex-wrap:wrap; gap:10px; margin:.4em 0}
.kpis div{background:var(--paper2); border:2px solid var(--ink); border-radius:10px; padding:.2em .6em; font-size:.78rem; line-height:1.3}
.kpis b{display:block; font-size:1.3rem}
.kpis small{display:block; opacity:.7}
.ev-body p{margin:.3em 0 0; font-size:.88rem}
.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:26px}
.strip img{width:100%; border:3px solid var(--ink); border-radius:10px}
.iso-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:end}
.iso-row img{border:none; background:none; filter:drop-shadow(8px 10px 0 rgba(0,0,0,.18))}
.iso-row figcaption{text-align:center}

/* ---------- 技術 ---------- */
.tech{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
.tech img{aspect-ratio:16/10; object-fit:cover; background:#2a2830}
.pal{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.pal img{background:#2a2830}

/* ---------- 網站 ---------- */
.sitemap{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.sm{border:3px solid var(--ink); border-radius:12px; padding:.6em .8em; font-size:.8rem; background:var(--cream)}
.sm b{display:block; font-size:1.05rem}
.sm.back{background:var(--ink); color:var(--cream); grid-column:span 2}
.phones{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.phone{text-align:center; font-weight:700; font-size:.85rem}
.phone .scr{background:#fff; border:6px solid var(--ink); border-radius:30px; padding:34px 14px 20px; min-height:430px; text-align:left; position:relative; box-shadow:8px 8px 0 rgba(0,0,0,.18)}
.phone .scr::before{content:""; position:absolute; top:12px; left:50%; width:60px; height:8px; margin-left:-30px; border-radius:4px; background:var(--ink)}
.bar{background:var(--paper); border:2px solid var(--ink); border-radius:8px; padding:.3em .6em; font-weight:900; margin-bottom:.8em}
.fld{font-size:.72rem; font-weight:700; margin:.6em 0}
.fld i{display:block; font-style:normal; font-weight:500; border:2px solid #bbb; border-radius:8px; padding:.35em .6em; margin-top:.2em; color:#555; font-size:.8rem}
.btn{margin-top:1em; background:var(--orange); border:3px solid var(--ink); border-radius:10px; text-align:center; font-weight:900; padding:.4em}
.note-in{font-size:.7rem; background:#fff3c4; border-radius:6px; padding:.4em .6em; margin-top:.6em}
.ok-in{margin-top:1.2em; background:#c9e6b2; border:3px solid var(--green); border-radius:12px; padding:1em; text-align:center; font-weight:900}
.doc{height:120px; border:2px solid #bbb; border-radius:8px; background:repeating-linear-gradient(#fff 0 14px,#e6e6e6 14px 16px)}
.browser{background:#fff; border:5px solid var(--ink); border-radius:16px; overflow:hidden; box-shadow:8px 8px 0 rgba(0,0,0,.18)}
.bbar{background:var(--ink); padding:.4em .7em; display:flex; gap:6px; align-items:center; color:var(--cream); font-size:.8rem; font-weight:700}
.bbar i{width:12px; height:12px; border-radius:50%; background:#e55} .bbar i:nth-child(2){background:#eb5} .bbar i:nth-child(3){background:#5c5}
.bbar span{margin-left:1em}
.bbody{padding:1em 1.2em}
.upl{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.upl div{aspect-ratio:1; border-radius:8px; background:linear-gradient(135deg,#9fd08a,#6aa0d8)}
.upl .plus{background:#eee; border:2px dashed #999; display:flex; align-items:center; justify-content:center; font-size:1.5rem}
.tabs{display:flex; gap:8px; margin-bottom:.8em}
.tabs b,.tabs span{padding:.2em .8em; border:2px solid var(--ink); border-radius:8px; font-size:.8rem}
.tabs b{background:var(--paper)}
.works{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.work{border:2px solid var(--ink); border-radius:10px; overflow:hidden; font-size:.75rem; font-weight:700}
.work img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block}
.work span{display:inline-block; padding:.3em .5em}
.work em{float:right; font-style:normal; color:#c0392b; padding:.3em .5em}
.vote-rule{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:24px}
.vote-rule div{background:var(--cream); border:3px solid var(--ink); border-radius:12px; padding:.6em .8em; font-size:.8rem}
.vote-rule b{display:block; font-size:1rem}
.safety{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.safety div{background:var(--cream); border:4px solid var(--ink); border-radius:16px; padding:1em 1.2em; font-size:.9rem}
.safety b{display:block; font-size:1.35rem; color:var(--brown)}

/* ---------- 結尾 ---------- */
.end h2{font-size:3rem; margin-top:1em}
.decide{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.decide div{background:var(--cream); border:4px solid var(--ink); border-radius:16px; padding:.9em 1.1em; font-size:.9rem}
.decide b{display:block; font-size:1.2rem}

/* ---------- 工具 ---------- */
.tool-panel{position:fixed; inset:8vh 12vw auto; background:var(--cream); border:5px solid var(--ink); border-radius:18px; padding:1.4em; z-index:20; box-shadow:0 20px 60px rgba(0,0,0,.4)}
.tool-panel textarea{width:100%; font-family:monospace; font-size:1rem; border:2px solid var(--ink); border-radius:8px; padding:.6em}
.tool-panel .row{display:flex; gap:10px; margin-top:10px}
.tool-panel button{font:inherit; font-weight:800; background:var(--orange); border:3px solid var(--ink); border-radius:10px; padding:.3em 1em; cursor:pointer}
#lightbox{position:fixed; inset:0; background:rgba(20,16,10,.88); z-index:30; display:flex; align-items:center; justify-content:center; cursor:zoom-out}
#lightbox[hidden]{display:none}
#lightbox img{max-width:94vw; max-height:92vh; border:5px solid var(--cream); border-radius:10px; background:#2a2830}

@media (max-width:1100px){
  :root{--rail:0px}
  #rail{display:none}
  .two,.past,.pigs,.cover-grid{grid-template-columns:1fr}
  .journey{grid-template-columns:repeat(3,1fr)}
  .tools,.devices,.phones,.sitemap,.tech,.pal,.world,.timeline,.decide,.safety,.vote-rule,.iso-row,.strip{grid-template-columns:1fr 1fr}
  .chapter-art{position:static; transform:none; width:80%}
  .chapter-sub{max-width:none}
}

/* ---------- 小豬導覽員 ---------- */
.lineup{width:100%; display:block; margin:0 0 20px; filter:drop-shadow(8px 10px 0 rgba(0,0,0,.15))}
.npcs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.npc{display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:center; background:var(--cream); border:4px solid var(--ink); border-radius:16px; padding:.5em .8em; box-shadow:6px 6px 0 rgba(0,0,0,.15)}
.npc img{width:110px; height:165px; object-fit:contain}
.npc-body b{display:block; font-size:1.4rem}
.npc-body .look{display:block; font-size:.78rem; color:var(--brown)}
.npc-body em{display:inline-block; font-style:normal; font-weight:800; font-size:.8rem; background:var(--paper2); border:2px solid var(--ink); border-radius:6px; padding:0 .4em; margin:.3em 0}
.npc-body q{display:block; font-size:.82rem; margin:.2em 0}
.npc-body small{display:block; font-size:.7rem; opacity:.75}
.ingame{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px}
.how{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px}
.how div{background:var(--cream); border:3px solid var(--ink); border-radius:12px; padding:.5em .8em; font-size:.8rem}
.how b{display:block; font-size:1.05rem}
@media (max-width:1100px){ .npcs,.ingame,.how{grid-template-columns:1fr 1fr} }
.gesture{display:grid; grid-template-columns:240px 240px 1fr; gap:16px; margin-top:18px; align-items:start}
.gesture img{width:240px; border:4px solid var(--ink); border-radius:12px}
@media (max-width:1100px){ .gesture{grid-template-columns:1fr 1fr} }