/* ============ 中一電腦科 · 冒險基地 Portal ============ */
:root{
  --yellow:#FFD93D; --red:#FF4757; --blue:#3742FA; --cyan:#2ED9FF;
  --pink:#FF6B9D; --green:#2ED573; --purple:#8C7AE6;
  --ink:#1A1A2E; --paper:#FFF9EC;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{font-size:16px; scroll-behavior:smooth;}
body{
  font-family:"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif;
  background:var(--paper); color:var(--ink); overflow-x:hidden; min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(circle, rgba(26,26,46,.08) 1.5px, transparent 1.6px) 0 0/18px 18px,
    linear-gradient(135deg,#FFF9EC 0%, #FFEFC2 100%);
}
#starCanvas{position:fixed; inset:0; z-index:-2; pointer-events:none;}
.zoom-lines{
  position:fixed; inset:0; z-index:-1; opacity:.05; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 30%, var(--ink) 0 1.2deg, transparent 1.2deg 9deg);
}
button{font-family:inherit; cursor:pointer;}
a{color:inherit;}
h1,h2,h3{line-height:1.25;}

/* ============ localhost 提示 bar（只喺 file:// 顯示） ============ */
#protoBar{
  display:none; background:var(--ink); color:var(--yellow); text-align:center;
  font-weight:900; font-size:.9rem; padding:8px 14px; letter-spacing:.5px;
  border-bottom:4px solid var(--yellow);
}
#protoBar.show{display:block; animation:fadeUp .5s both;}
#protoBar code{background:var(--yellow); color:var(--ink); padding:1px 8px; border-radius:6px; margin:0 4px;}

/* ============ Hero ============ */
#hero{
  min-height:92vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:60px 20px 40px; gap:22px;
  position:relative;
}
.hero-tag{
  display:inline-block; background:var(--ink); color:var(--yellow);
  padding:6px 20px; border-radius:999px; font-weight:900; letter-spacing:2px;
  box-shadow:var(--shadow-sm); animation:fadeUp .6s .1s both;
}
.hero-title{
  font-size:clamp(2.4rem, 7vw, 4.6rem); font-weight:900; letter-spacing:3px;
  color:var(--yellow); -webkit-text-stroke:2px var(--ink);
  text-shadow:6px 6px 0 var(--ink);
}
.hero-title .ch{
  display:inline-block; opacity:0; transform:translateY(60px) scale(.2) rotate(-14deg);
  animation:chPop .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes chPop{to{opacity:1; transform:none;}}
.hero-title .ch.accent{color:var(--red);}
.hero-sub{
  font-size:clamp(1.05rem, 2.4vw, 1.4rem); font-weight:900; max-width:640px;
  background:#fff; border:4px solid var(--ink); border-radius:20px;
  padding:14px 26px; box-shadow:var(--shadow); position:relative;
  animation:fadeUp .7s 1.2s both;
}
.hero-sub::after{
  content:""; position:absolute; bottom:-18px; left:50%; margin-left:-11px;
  width:0; height:0; border:11px solid transparent; border-top:16px solid var(--ink);
}
.hero-sub::before{
  content:""; position:absolute; bottom:-8px; left:50%; margin-left:-8px; z-index:1;
  width:0; height:0; border:8px solid transparent; border-top:12px solid #fff;
}
.hero-stats{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; animation:fadeUp .7s 1.5s both;}
.stat-chip{
  background:#fff; border:4px solid var(--ink); border-radius:14px; box-shadow:var(--shadow-sm);
  padding:10px 20px; font-weight:900; font-size:1rem;
  transition:transform .15s;
}
.stat-chip:hover{transform:translateY(-4px) rotate(-1.5deg);}
.stat-chip b{font-size:1.35rem; display:block;}
.hero-emoji-row{display:flex; gap:12px; animation:fadeUp .6s .3s both;}
.hero-emoji{
  width:74px; height:74px; background:#fff; border:4px solid var(--ink); border-radius:16px;
  box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; animation:bob 2.6s ease-in-out infinite;
}
.hero-emoji:nth-child(2){animation-delay:.4s; background:#FFE9A8;}
.hero-emoji:nth-child(3){animation-delay:.8s; background:#FFD6DE;}
.hero-emoji:nth-child(4){animation-delay:1.2s; background:#D6E4FF;}
.hero-emoji:nth-child(5){animation-delay:1.6s; background:#D8FFE3;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-10px) rotate(3deg);}}
@keyframes fadeUp{from{opacity:0; transform:translateY(30px);}to{opacity:1; transform:none;}}
.scroll-hint{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-weight:900; font-size:.9rem; opacity:.65; animation:bob 1.8s infinite;
}

/* ============ 頂部工具列（搜尋＋語言） ============ */
#toolbar{
  position:sticky; top:0; z-index:100; background:var(--ink);
  border-bottom:5px solid var(--yellow); padding:12px 18px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center;
}
#searchBox{
  flex:1 1 280px; max-width:460px; display:flex; align-items:center; gap:8px;
  background:#fff; border:3px solid var(--yellow); border-radius:999px; padding:8px 18px;
}
#searchBox span{font-size:1.1rem;}
#searchInput{border:none; outline:none; flex:1; font-size:1.05rem; font-weight:700; background:transparent; min-width:0;}
#langToggle{
  display:flex; background:#fff; border:3px solid var(--yellow); border-radius:999px;
  overflow:hidden; font-weight:900;
}
#langToggle button{
  border:none; background:transparent; padding:7px 16px; font-weight:900; font-size:.95rem;
  transition:background .15s;
}
#langToggle button.on{background:var(--yellow);}

/* ============ 階段導航 ============ */
#stageNav{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  padding:26px 18px 6px; max-width:1200px; margin:0 auto;
}
.stage-pill{
  border:4px solid var(--ink); border-radius:999px; background:#fff;
  box-shadow:var(--shadow-sm); padding:10px 20px; font-weight:900; font-size:1rem;
  display:flex; align-items:center; gap:9px; transition:transform .15s, box-shadow .15s;
}
.stage-pill:hover{transform:translate(-2px,-3px); box-shadow:5px 6px 0 var(--ink);}
.stage-pill:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink);}
.stage-pill .dot{width:16px; height:16px; border-radius:50%; border:3px solid var(--ink);}
.stage-pill small{font-size:.75rem; opacity:.7;}

/* ============ 階段區塊 + 卡片牆 ============ */
main{max-width:1240px; margin:0 auto; padding:10px 22px 90px;}
.stage-section{padding-top:34px; scroll-margin-top:80px;}
.stage-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px;}
.stage-head .band{
  width:52px; height:52px; border-radius:14px; border:4px solid var(--ink);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.25rem; flex:0 0 auto;
}
.stage-head h2{font-size:1.8rem; font-weight:900; text-shadow:3px 3px 0 rgba(255,217,61,.7);}
.stage-head .range{
  background:var(--ink); color:var(--yellow); border-radius:999px; padding:3px 14px;
  font-weight:900; font-size:.85rem;
}
.stage-desc{font-weight:700; margin:0 0 18px 66px; opacity:.8;}
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px;
}
.lesson-card{
  display:block; text-decoration:none; background:#fff; border:4px solid var(--ink);
  border-radius:18px; box-shadow:var(--shadow); overflow:hidden; position:relative;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  opacity:0; transform:translateY(46px) scale(.9);
}
.lesson-card.in{
  animation:cardPop .55s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes cardPop{to{opacity:1; transform:none;}}
.lesson-card:hover{
  transform:translateY(-8px) rotate(-.8deg);
  box-shadow:8px 10px 0 var(--ink), 0 0 0 5px var(--stage,#FFD93D), 0 0 34px var(--stage,#FFD93D);
}
.lesson-card:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink);}
.card-band{height:12px; background:var(--stage,#FFD93D); border-bottom:4px solid var(--ink);}
.card-body{padding:16px 18px 18px;}
.card-top{display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.card-emoji{
  width:56px; height:56px; border-radius:14px; border:3px solid var(--ink);
  background:var(--stage-soft,#FFF3C4); display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; flex:0 0 auto; transition:transform .2s;
}
.lesson-card:hover .card-emoji{transform:scale(1.12) rotate(-6deg);}
.card-badge{
  background:var(--ink); color:var(--yellow); font-weight:900; font-size:.8rem;
  border-radius:999px; padding:3px 12px; letter-spacing:1px;
}
.card-title{font-size:1.15rem; font-weight:900; margin:2px 0 6px;}
.card-desc{font-size:.92rem; font-weight:700; opacity:.75; line-height:1.5;}
.card-go{
  margin-top:12px; display:inline-flex; align-items:center; gap:6px;
  font-weight:900; font-size:.9rem; color:var(--blue);
}
.lesson-card:hover .card-go{animation:nudge .5s infinite alternate;}
@keyframes nudge{from{transform:translateX(0);}to{transform:translateX(6px);}}
.mini-badge{
  position:absolute; top:22px; right:-1px; background:var(--red); color:#fff;
  font-size:.72rem; font-weight:900; padding:3px 10px; border:3px solid var(--ink);
  border-right:none; border-radius:10px 0 0 10px; z-index:2;
}
.mini-badge.local{background:var(--purple);}
.no-result{
  text-align:center; font-weight:900; font-size:1.2rem; padding:50px 0; display:none;
}

/* ============ Footer ============ */
footer{
  text-align:center; padding:30px 18px 44px; font-weight:700; font-size:.9rem; opacity:.75;
}

/* ============ 老師模式 ============ */
#teacherPanel{display:none; max-width:1240px; margin:0 auto; padding:0 22px 60px;}
#teacherPanel.show{display:block; animation:fadeUp .4s;}
.t-card{
  background:#fff; border:4px solid var(--ink); border-radius:18px; box-shadow:var(--shadow);
  padding:22px; margin-bottom:22px;
}
.t-card h2{margin-bottom:10px;}
.t-card p, .t-card li{font-size:.95rem; line-height:1.7; font-weight:700;}
.t-card li{margin-left:20px;}
.t-card code{background:#FFF3C4; border:2px solid var(--ink); border-radius:6px; padding:1px 8px; font-weight:900;}
.t-table{width:100%; border-collapse:collapse; margin-top:10px; font-size:.88rem;}
.t-table th,.t-table td{border:2px solid var(--ink); padding:6px 9px; text-align:left;}
.t-table th{background:var(--ink); color:var(--yellow);}
.t-table td.stage-cell{font-weight:900;}
.t-table a{font-weight:900; color:var(--blue); text-decoration:none;}
.t-table a:hover{text-decoration:underline;}
.t-table .t-link{color:var(--purple);}

@media (max-width:720px){
  .stage-desc{margin-left:0;}
  .hero-emoji{width:58px; height:58px; font-size:1.7rem;}
  #toolbar{position:static;}
}