/* =========================================================
   AI 學習冒險地圖 — style.css
   視覺基準：mockup.html（深色奇幻、星空底、金色光暈）
   斷點：480px（手機直向優先）
========================================================= */
:root{
  --bg0:#0a0d1a; --bg1:#121831; --bg2:#1a2140;
  --panel:#161d38; --panel2:#1e2749;
  --gold:#f0c05a; --gold-dim:#a8863d;
  --purple:#8b6cff; --cyan:#5ad8f0;
  --green:#5ce08a;
  --text:#e8e6f0; --text-dim:#9a97b5;
  --lock:#3a405e;
  --danger:#ff6b81;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 78%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 65%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 65% 88%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(ellipse at 50% -10%, #232b58 0%, var(--bg1) 45%, var(--bg0) 100%);
  background-attachment:fixed;
  color:var(--text);
  min-height:100vh;
  letter-spacing:.03em;
}

/* ====== 頂部玩家狀態列 ====== */
.hud{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(10,13,26,.97), rgba(14,18,38,.92));
  border-bottom:2px solid var(--gold-dim);
  box-shadow:0 4px 18px rgba(0,0,0,.55);
  padding:10px 16px;
}
.hud-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.hud .avatar{
  width:44px;height:44px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(145deg,#3a2f6e,#1e2749);
  border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 0 12px rgba(240,192,90,.35);
  cursor:pointer;text-decoration:none;
}
.hud .who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.hud .name{font-weight:700;font-size:14px;white-space:nowrap;}
.hud .name .lv{color:var(--gold);font-family:Consolas,monospace;margin-left:6px;}
.hud .title-tag{font-size:11px;color:var(--text-dim);}
.hud .bars{flex:1 1 200px;min-width:160px;display:flex;flex-direction:column;gap:5px;}
.bar-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-dim);}
.bar-row .lbl{width:34px;flex:0 0 auto;font-family:Consolas,monospace;color:var(--gold);}
.bar{
  flex:1;height:12px;border-radius:6px;overflow:hidden;position:relative;
  background:#0c1022;border:1px solid #33406e;
}
.bar .fill{
  height:100%;border-radius:6px;
  background:linear-gradient(90deg,#c99a2e,var(--gold),#ffe9a8);
  box-shadow:0 0 8px rgba(240,192,90,.6);
  transition:width .8s cubic-bezier(.22,1,.36,1);
}
.bar.hp .fill{background:linear-gradient(90deg,#2ea05c,var(--green),#b8ffd0);box-shadow:0 0 8px rgba(92,224,138,.5);}
.bar-row .num{font-family:Consolas,monospace;flex:0 0 auto;min-width:76px;text-align:right;}

@media (max-width:480px){
  .hud .title-tag{display:none;}
  .hud .bars{min-width:130px;}
  .hud-inner{gap:10px;}
}

/* ====== 頁面容器 ====== */
.page{display:none;max-width:960px;margin:0 auto;padding:22px 16px 90px;animation:pagein .35s ease;}
.page.active{display:block;}
@keyframes pagein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.crumb{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;
  color:var(--cyan);font-size:13px;cursor:pointer;user-select:none;
  border:1px solid rgba(90,216,240,.35);border-radius:20px;padding:6px 14px;
  background:rgba(90,216,240,.06);text-decoration:none;
}
.crumb:hover{background:rgba(90,216,240,.14);}

h1.game-title{
  text-align:center;font-size:clamp(22px,4.5vw,34px);margin:8px 0 4px;
  color:var(--gold);
  text-shadow:0 0 18px rgba(240,192,90,.45),0 2px 0 #4a3510;
  letter-spacing:.12em;
}
.subtitle{text-align:center;color:var(--text-dim);font-size:13px;margin-bottom:26px;}

h2.sec{
  font-size:clamp(18px,3.5vw,24px);color:var(--gold);margin:4px 0 4px;
  text-shadow:0 0 12px rgba(240,192,90,.35);
}
.sec-sub{color:var(--text-dim);font-size:13px;margin-bottom:20px;}

/* ====== 世界地圖：區域卡 ====== */
.world-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px;}
@media (max-width:760px){.world-grid{grid-template-columns:1fr;}}
.region{
  position:relative;border-radius:14px;padding:20px 18px 18px;min-height:230px;
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:2px solid #33406e;
  cursor:pointer;transition:transform .2s ease, box-shadow .2s ease;
  overflow:hidden;text-decoration:none;color:inherit;display:block;
}
.region .terrain{font-size:44px;display:block;margin-bottom:10px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.region h3{font-size:18px;margin-bottom:4px;}
.region .tag{
  display:inline-block;font-size:11px;padding:2px 10px;border-radius:10px;margin-bottom:10px;
}
.region .desc{font-size:12.5px;color:var(--text-dim);line-height:1.7;}
.region .chapters{margin-top:10px;font-size:12px;color:var(--text-dim);line-height:1.9;}
.region .chapters li{list-style:none;}
.region .progress-mini{margin-top:12px;font-size:12px;color:var(--gold);font-family:Consolas,monospace;}

.region.open{
  border-color:var(--gold);
  animation:glow 2.4s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{box-shadow:0 0 14px rgba(240,192,90,.35), inset 0 0 30px rgba(240,192,90,.05);}
  50%{box-shadow:0 0 30px rgba(240,192,90,.65), inset 0 0 40px rgba(240,192,90,.10);}
}
.region.open:hover{transform:translateY(-4px) scale(1.015);}
.region.open .tag{background:rgba(92,224,138,.15);color:var(--green);border:1px solid rgba(92,224,138,.45);}
.region.open .enter-hint{
  margin-top:12px;font-size:13px;color:var(--gold);font-weight:700;
}
.region.open .enter-hint::after{content:"▶";margin-left:6px;animation:blink 1.2s steps(2) infinite;}
@keyframes blink{50%{opacity:0;}}

.region.locked{cursor:not-allowed;}
.region.locked .terrain,.region.locked h3,.region.locked .chapters{
  filter:grayscale(1) brightness(.6);color:var(--lock);
}
.region.locked h3{color:#6a7194;}
.region.locked .tag{background:rgba(58,64,94,.4);color:#7b82a8;border:1px solid var(--lock);}
.region.locked::after{
  content:"🔒";position:absolute;top:14px;right:16px;font-size:22px;opacity:.85;
}
.region.locked .fog{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(10,13,26,.0) 0 14px, rgba(10,13,26,.28) 14px 28px);
}
.region.locked.shake{animation:shake .4s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}

/* 情報站入口 */
.tavern-entry{
  display:flex;align-items:center;gap:16px;border-radius:14px;padding:16px 20px;
  background:linear-gradient(120deg,#2a1e3f,#1b1530);
  border:2px solid #5b4a8a;cursor:pointer;transition:transform .2s, box-shadow .2s;
  text-decoration:none;color:inherit;
}
.tavern-entry:hover{transform:translateY(-3px);box-shadow:0 0 22px rgba(139,108,255,.4);}
.tavern-entry .icon{font-size:38px;filter:drop-shadow(0 0 10px rgba(139,108,255,.6));}
.tavern-entry h3{font-size:17px;color:#cdbcff;}
.tavern-entry p{font-size:12.5px;color:var(--text-dim);margin-top:3px;}
.tavern-entry .weekly{
  margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--purple);
  border:1px solid rgba(139,108,255,.5);border-radius:10px;padding:3px 10px;
  background:rgba(139,108,255,.1);white-space:nowrap;
}
@media (max-width:480px){.tavern-entry{flex-wrap:wrap;}.tavern-entry .weekly{margin-left:0;}}

/* ====== 區域地圖：關卡路徑 ====== */
.trail-wrap{
  position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(170deg,#18204a 0%, #131a38 55%, #10162e 100%);
  border:2px solid #33406e;
  height:820px;
}
@media (max-width:480px){.trail-wrap{height:940px;}}
.trail-wrap svg{position:absolute;inset:0;width:100%;height:100%;}
.trail-path{
  fill:none;stroke:#3d4a7c;stroke-width:5;stroke-linecap:round;
  stroke-dasharray:2 14;vector-effect:non-scaling-stroke;
}
.trail-path.done-path{stroke:var(--gold);stroke-dasharray:2 12;filter:drop-shadow(0 0 4px rgba(240,192,90,.7));}

.node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;user-select:none;width:120px;text-align:center;
  background:none;border:none;padding:0;color:inherit;font:inherit;
}
.node .orb{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:Consolas,monospace;font-weight:700;font-size:18px;
  border:3px solid var(--lock);background:#141a33;color:#5c6488;
  transition:transform .2s;position:relative;
}
.node:hover .orb{transform:scale(1.12);}
.node .lbl{
  font-size:12px;line-height:1.4;color:var(--text-dim);
  background:rgba(10,13,26,.75);border-radius:8px;padding:3px 8px;
  border:1px solid rgba(51,64,110,.8);
}
.node.done .orb{
  border-color:var(--gold);color:#1a1408;background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--gold) 70%);
  box-shadow:0 0 14px rgba(240,192,90,.75);
}
.node.done .lbl{color:var(--gold);border-color:var(--gold-dim);}
.node.current .orb{
  border-color:var(--cyan);color:var(--cyan);background:#0e2233;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 8px rgba(90,216,240,.5);transform:scale(1);}
  50%{box-shadow:0 0 26px rgba(90,216,240,.95);transform:scale(1.1);}
}
.node.current .lbl{color:var(--cyan);border-color:rgba(90,216,240,.6);font-weight:700;}
.node.current .here{
  position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  font-size:11px;color:#0a0d1a;background:var(--cyan);border-radius:8px;padding:2px 8px;
  font-weight:700;white-space:nowrap;animation:bob 1.4s ease-in-out infinite;
}
@keyframes bob{50%{transform:translate(-50%,-4px);}}
.node.boss .orb{width:66px;height:66px;font-size:26px;}
.node.locked-node{cursor:not-allowed;}
.node.locked-node:hover .orb{transform:none;}

.region-progress{
  display:flex;align-items:center;gap:12px;margin:16px 0 14px;flex-wrap:wrap;
  background:var(--panel);border:1px solid #33406e;border-radius:12px;padding:12px 16px;
}
.region-progress .pct{font-family:Consolas,monospace;font-size:20px;color:var(--gold);font-weight:700;}
.region-progress .bar{flex:1;min-width:140px;height:14px;}
.region-progress .cnt{font-size:12px;color:var(--text-dim);font-family:Consolas,monospace;}

/* ====== 關卡詳情 ====== */
.level-head{
  background:linear-gradient(140deg,var(--panel2),var(--panel));
  border:2px solid var(--gold-dim);border-radius:14px;padding:18px 20px;margin-bottom:20px;
}
.level-head .no{font-family:Consolas,monospace;color:var(--cyan);font-size:13px;}
.level-head h2{color:var(--gold);font-size:clamp(19px,4vw,26px);margin:4px 0 6px;text-shadow:0 0 10px rgba(240,192,90,.3);}
.level-head .reward{margin-top:8px;font-size:12.5px;color:var(--gold);font-family:Consolas,monospace;}

h3.blk{
  font-size:16px;color:var(--cyan);margin:22px 0 12px;display:flex;align-items:center;gap:8px;
}
h3.blk::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(90,216,240,.5),transparent);}

.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.vcard{
  background:var(--panel);border:1px solid #33406e;border-radius:12px;overflow:hidden;
  transition:transform .2s, border-color .2s;
}
.vcard:hover{transform:translateY(-3px);border-color:var(--purple);}
.vthumb{
  position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2b2350,#152040 60%,#0e1830);
}
.vthumb .play{
  width:44px;height:44px;border-radius:50%;background:rgba(240,192,90,.9);color:#1a1408;
  display:flex;align-items:center;justify-content:center;font-size:17px;padding-left:4px;
  box-shadow:0 0 16px rgba(240,192,90,.55);
}
.vthumb .dur{
  position:absolute;right:8px;bottom:8px;font-family:Consolas,monospace;font-size:11px;
  background:rgba(0,0,0,.75);border-radius:4px;padding:2px 6px;color:#fff;
}
.vthumb .badge-tag{
  position:absolute;left:8px;top:8px;font-size:10.5px;color:var(--gold);
  border:1px solid rgba(240,192,90,.6);background:rgba(20,15,5,.75);border-radius:4px;padding:2px 6px;
  font-weight:700;white-space:nowrap;
}
.vbody{padding:12px 14px 14px;}
.vbody .vtitle{font-size:13.5px;font-weight:700;line-height:1.5;margin-bottom:6px;}
.vbody .vtitle a{color:inherit;text-decoration:none;}
.vbody .vtitle a:hover{color:var(--gold);text-decoration:underline;}
.vbody .vmeta{font-size:11.5px;color:var(--text-dim);font-family:Consolas,monospace;margin-bottom:8px;}
.vbody .vwhy{font-size:12.5px;color:#d5d3e4;line-height:1.6;margin-bottom:4px;}
.vbody .vnote{font-size:11px;color:var(--text-dim);line-height:1.5;}

.note{
  background:var(--panel);border:1px solid #33406e;border-left:4px solid var(--gold);
  border-radius:12px;padding:20px 22px;line-height:1.9;font-size:14px;margin-bottom:14px;
}
.note h4{color:var(--gold);font-size:14.5px;margin:16px 0 6px;}
.note h4:first-child{margin-top:0;}
.note ul{padding-left:22px;}
.note li{margin:4px 0;color:#d5d3e4;}
.note li b,.note li strong{color:var(--cyan);font-weight:700;}
.note p{color:#d5d3e4;}
.note .note-src{margin-top:14px;font-size:11.5px;color:var(--text-dim);border-top:1px dashed #33406e;padding-top:10px;}
.note.placeholder{color:var(--text-dim);font-style:italic;border-left-color:var(--lock);}

.clear-zone{text-align:center;margin-top:28px;}
.btn-clear{
  font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.1em;
  color:#1a1408;background:linear-gradient(180deg,#ffe9a8,var(--gold) 55%,#c99a2e);
  border:2px solid #8a6a20;border-radius:12px;padding:14px 46px;cursor:pointer;
  box-shadow:0 4px 0 #7a5c1a, 0 0 22px rgba(240,192,90,.4);
  transition:transform .1s, box-shadow .1s;
}
.btn-clear:hover:not([disabled]){transform:translateY(-2px);}
.btn-clear:active:not([disabled]){transform:translateY(2px);box-shadow:0 1px 0 #7a5c1a;}
.btn-clear[disabled]{
  background:#2a3154;color:#6a7194;border-color:#3a4166;box-shadow:none;cursor:default;
}

/* ====== 情報站 ====== */
.tavern-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;
}
.weekly-badge{
  font-size:12px;color:var(--purple);border:1px solid rgba(139,108,255,.5);
  background:rgba(139,108,255,.12);border-radius:12px;padding:4px 12px;
}
.news{
  background:var(--panel);border:1px solid #33406e;border-left:4px solid var(--purple);
  border-radius:12px;padding:16px 18px;margin-bottom:14px;
}
.news .nmeta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--text-dim);font-family:Consolas,monospace;margin-bottom:6px;flex-wrap:wrap;}
.news .nsrc{color:var(--cyan);border:1px solid rgba(90,216,240,.4);border-radius:8px;padding:1px 8px;}
.news h4{font-size:15px;color:#e9ddff;margin-bottom:6px;line-height:1.5;}
.news h4 a{color:inherit;text-decoration:none;}
.news h4 a:hover{text-decoration:underline;}
.news p{font-size:13px;color:#c9c6dd;line-height:1.85;}
.news-placeholder{color:var(--text-dim);font-style:italic;padding:20px 4px;}

/* ====== 破關獎勵 overlay ====== */
.overlay{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;background:rgba(5,7,15,.8);
  animation:pagein .25s ease;
}
.overlay.show{display:flex;}
.reward-box{
  width:min(400px,88vw);text-align:center;border-radius:18px;padding:34px 26px 28px;
  background:linear-gradient(160deg,#242c58,#151b38);
  border:2px solid var(--gold);
  box-shadow:0 0 50px rgba(240,192,90,.5);
  animation:popin .45s cubic-bezier(.22,1.4,.36,1);
}
@keyframes popin{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}
.reward-box .big{font-size:52px;margin-bottom:8px;filter:drop-shadow(0 0 14px rgba(240,192,90,.8));}
.reward-box h3{color:var(--gold);font-size:22px;letter-spacing:.15em;margin-bottom:10px;text-shadow:0 0 14px rgba(240,192,90,.6);}
.reward-box .exp{font-family:Consolas,monospace;font-size:16px;color:var(--green);margin-bottom:4px;}
.reward-box .msg{font-size:13px;color:var(--text-dim);margin-bottom:20px;line-height:1.7;}
.reward-box button{
  font-family:inherit;font-size:14px;font-weight:700;color:#1a1408;
  background:linear-gradient(180deg,#ffe9a8,var(--gold));border:none;border-radius:10px;
  padding:11px 30px;cursor:pointer;box-shadow:0 3px 0 #7a5c1a;
}
.reward-box button:active{transform:translateY(2px);box-shadow:none;}

/* toast */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(20,26,51,.96);border:1px solid var(--gold-dim);border-radius:10px;
  color:var(--gold);font-size:13px;padding:10px 20px;z-index:110;opacity:0;
  pointer-events:none;transition:opacity .25s, transform .25s;box-shadow:0 6px 20px rgba(0,0,0,.5);
  max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.empty-state{color:var(--text-dim);text-align:center;padding:40px 10px;font-size:13px;}