/* 介面風格：仿文明帝國 6 的深藍面板 + 金色邊框，和遊戲風地圖融為一體 */
:root{
  --navy:#1a2b47;
  --navy-d:#0c1628;
  --navy-l:#2e4a76;
  --gold:#e3bd5c;
  --gold-l:#ffe7a3;
  --gold-d:#9a7630;
  --cream:#fff4dc;
  --ink:#2a1d07;
  --panel:linear-gradient(180deg,#22365a 0%,#152440 60%,#101c33 100%);
  --outline:#060b15;          /* 所有框線外側的深色描邊，讓金線更銳利 */
  --rim:#d4ac57;              /* 金屬細框 */
  /* 頂部 / 底部欄位的金色飾條：兩端漸隱、中間最亮 */
  --trim:linear-gradient(90deg,rgba(0,0,0,0) 0%,#6e5120 4%,#cfa954 22%,#fff0bd 50%,#cfa954 78%,#6e5120 96%,rgba(0,0,0,0) 100%);
  --trim-v:linear-gradient(180deg,rgba(0,0,0,0) 0%,#6e5120 4%,#cfa954 22%,#fff0bd 50%,#cfa954 78%,#6e5120 96%,rgba(0,0,0,0) 100%);
  --font:'Fredoka','Nunito','PingFang TC','Microsoft JhengHei','Microsoft YaHei',system-ui,sans-serif;
  /* 指數數字專用：Fredoka 的圓潤粗體在小字級下數字和逗號會黏在一起，改用字形清楚又偏窄的 Barlow Semi Condensed（股票報價常見的風格），沒載入時退回系統字型 */
  --num:'Barlow Semi Condensed','Segoe UI','SF Pro Text','Helvetica Neue','Roboto',Arial,system-ui,sans-serif;
  --emoji:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
/* 各語言的中日韓字型（html 的 lang 由 i18n.js 設定）：日文 / 韓文 / 簡體不能用繁體字型，不然會用到字形不對的字 */
html[lang="ja"]{--font:'Fredoka','Nunito','Hiragino Sans','Yu Gothic UI','Yu Gothic','Meiryo',system-ui,sans-serif}
html[lang="ko"]{--font:'Fredoka','Nunito','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif}
html[lang="zh-CN"]{--font:'Fredoka','Nunito','PingFang SC','Microsoft YaHei',system-ui,sans-serif}
html[lang="en"]{--font:'Fredoka','Nunito',system-ui,'Segoe UI',Roboto,Arial,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--navy-d);color:var(--cream);font-family:var(--font);overscroll-behavior:none}
body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}

/* 共用：金框按鈕。外層深色描邊 → 金色細框 → 內側深色縫 → 淡金內線，做出遊戲 UI 的雙線質感 */
.gbtn{
  border:1px solid var(--rim);
  background:linear-gradient(180deg,#2e4b76 0%,#1b2f50 55%,#132239 100%);
  color:var(--cream);
  box-shadow:0 0 0 1px var(--outline),inset 0 0 0 1px rgba(6,11,21,.85),inset 0 0 0 2px rgba(255,230,170,.13),inset 0 3px 4px -2px rgba(255,255,255,.18),0 3px 5px rgba(0,0,0,.5);
  text-shadow:0 1px 1px rgba(0,0,0,.6);
  transition:filter .15s,transform .1s;
}
.gbtn:hover{filter:brightness(1.15);border-color:var(--gold-l)}
.gbtn:active{transform:translateY(1px)}
.gbtn:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}

/* 共用：浮動面板（概況卡、其它指數面板、提示）——金色雙線框 */
.gpanel{
  background:var(--panel);color:var(--cream);
  border:1px solid var(--rim);border-radius:12px;
  box-shadow:0 0 0 1px var(--outline),inset 0 0 0 1px var(--outline),inset 0 0 0 3px rgba(255,230,170,.12),0 6px 16px rgba(0,0,0,.5);
}
/* ---------- 圖層列：手機版是底部導覽列，桌面版是左側直式欄（見最下方 media query） ---------- */
#rail{
  order:2;flex:none;z-index:6;position:relative;display:flex;align-items:stretch;
  background:var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 -6px 14px rgba(0,0,0,.45);
  padding:5px 2px calc(4px + env(safe-area-inset-bottom));
}
/* 金色飾條（深 1px + 金 2px + 深 1px）與中央的菱形飾釘 */
#rail::after{
  content:'';position:absolute;left:0;right:0;top:-4px;height:4px;pointer-events:none;
  background:linear-gradient(var(--outline),var(--outline)) 0 0/100% 1px no-repeat,var(--trim) 0 1px/100% 2px no-repeat,linear-gradient(var(--outline),var(--outline)) 0 3px/100% 1px no-repeat;
}
#rail::before{
  content:'';position:absolute;left:50%;top:-7px;width:9px;height:9px;z-index:1;pointer-events:none;
  transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#fff3c8 0%,#d9b05a 55%,#8a6526 100%);
  border:1px solid var(--outline);box-shadow:0 0 6px rgba(255,214,120,.55);
}
#rail .brand{display:none}
#layers{display:contents}
/* 手機版：預設隱藏，載入完成後由 JS 設定 display:flex */
#btnSet{display:none}
.rl{
  flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:3px 0;background:none;border:0;color:var(--cream);
}
.rl .ri{
  display:grid;place-items:center;width:50px;height:28px;border-radius:999px;font-size:18px;line-height:1;
  font-family:var(--emoji);border:1px solid transparent;transition:background .15s,box-shadow .15s;
}
.rl .ri svg{width:20px;height:20px;display:block;color:var(--gold-l)}
.rl.on .ri svg{color:var(--ink)}
.rl .rt{font-size:11px;font-weight:700;white-space:nowrap;opacity:.85;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.rl:hover .ri{background:rgba(255,231,163,.12);border-color:rgba(212,172,87,.45)}
.rl.on .ri{
  background:linear-gradient(180deg,#fff0bf 0%,#f0c75e 50%,#c89533 100%);border-color:var(--gold-l);
  box-shadow:0 0 0 1px var(--outline),inset 0 0 0 1px rgba(255,250,225,.55),0 0 10px rgba(255,210,100,.45);
}
.rl.on .rt{color:var(--gold-l);opacity:1}
.rl[aria-disabled="true"] .ri{filter:grayscale(.7);opacity:.6}
.rl[aria-disabled="true"] .rt{opacity:.55}
.rl .soon{
  position:absolute;top:0;left:calc(50% + 12px);font-style:normal;font-size:9px;line-height:12px;font-weight:700;
  padding:0 3px;border-radius:5px;background:var(--gold-d);color:#fff8e6;border:1px solid var(--outline);white-space:nowrap
}
.rl:focus-visible{outline:2px solid var(--gold-l);outline-offset:-2px;border-radius:10px}

/* ---------- 概況卡（標題 + 全球情緒 + 狀態） ---------- */
#side{display:contents}
#hud{
  position:absolute;z-index:5;left:10px;top:calc(env(safe-area-inset-top) + 54px);
  padding:5px 10px 5px;max-width:calc(100% - 20px);border-radius:10px;
}
.logo{display:none;font-size:19px;white-space:nowrap;letter-spacing:.5px}
.logo b{
  font-weight:700;
  background:linear-gradient(180deg,#fff3c4 0%,#f0c75e 55%,#b88a2c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
}
.hp{display:flex;align-items:center;gap:6px;width:200px;max-width:100%}
.hpl{font-size:14px;font-family:var(--emoji)}
.bar{flex:1;height:12px;border:1px solid var(--rim);border-radius:99px;background:var(--navy-d);overflow:hidden;box-shadow:0 0 0 1px var(--outline),inset 0 0 0 1px var(--outline),inset 0 2px 4px rgba(0,0,0,.6)}
.bar i{display:block;height:100%;width:50%;border-radius:99px;transition:width .8s,background .8s;background:#aaa;box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.hpt{font-size:12.5px;font-weight:700;min-width:72px;text-align:right;white-space:nowrap;color:var(--gold-l)}
/* CNN 貪婪與恐慌指數：圓形表情徽章 + 恐慌藍 → 中立金 → 貪婪紅的漸層條，亮的是目前分數的長度，亮點是目前位置 */
.fngi{
  --fc:#f0c75e;flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:15px;line-height:1;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--fc) 55%,#fff) 0%,var(--fc) 55%,color-mix(in srgb,var(--fc) 55%,#000) 100%);
  border:2px solid var(--outline);box-shadow:0 0 0 1px var(--fc),0 0 8px color-mix(in srgb,var(--fc) 70%,transparent),inset 0 1px 1px rgba(255,255,255,.5);
  transition:background .6s,box-shadow .6s;
}
.bar.fng{
  position:relative;overflow:visible;height:11px;
  --fng:linear-gradient(90deg,#2f6fed 0%,#5aa0ff 22%,#f0c75e 50%,#fb923c 78%,#ef4444 100%);
  background:linear-gradient(rgba(12,22,40,.6),rgba(12,22,40,.6)),var(--fng);
}
.bar.fng i{
  position:absolute;inset:0;width:auto;border-radius:99px;background:var(--fng);
  clip-path:inset(0 50% 0 0 round 99px);transition:clip-path .8s;
  box-shadow:none;background-image:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--fng);
}
.bar.fng b{
  position:absolute;top:50%;left:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#ffe7a3 60%,#d4ac57 100%);
  border:1px solid var(--outline);box-shadow:0 0 0 1px var(--rim),0 0 6px rgba(255,231,163,.8);
  transition:left .8s;
}
.sub{font-size:11px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

/* ---------- 篩選列（Google 地圖式的膠囊按鈕，浮在地圖上方，可橫向捲動） ---------- */
#chips{
  position:absolute;z-index:5;left:0;right:0;top:calc(env(safe-area-inset-top) + 6px);
  display:flex;align-items:center;gap:7px;overflow-x:auto;padding:4px 10px 6px;
  scrollbar-width:none;pointer-events:none;
}
#chips::-webkit-scrollbar{display:none}
#chips > *{pointer-events:auto}
/* 桌機版不分列（.crow 只是分組用，版面上不存在）；手機版見下方 media */
.crow{display:contents}
.chip{
  flex:none;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 14px 0 10px;
  border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap;
}
.chip .ci{font-family:var(--emoji);font-size:15px;line-height:1}
.chip .ci img{display:block;width:20px;height:20px;margin:-2px 0}
.chip.on{
  background:linear-gradient(180deg,#fff0bf 0%,#f0c75e 50%,#c89533 100%);
  border-color:var(--gold-l);color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.5);
  box-shadow:0 0 0 1px var(--outline),inset 0 0 0 1px rgba(255,250,225,.55),inset 0 -2px 3px rgba(120,80,20,.35),0 0 10px rgba(255,210,100,.5);
}
.csep{flex:none;width:2px;height:26px;margin:0 2px;background:linear-gradient(transparent,var(--gold),transparent);pointer-events:none!important}
/* 手機畫面窄，篩選列可以左右滑 */
@media (max-width:899px){
  /* 手機版由上到下：概況卡（開盤中…）→ 篩選列 */
  #hud{top:calc(env(safe-area-inset-top) + 6px)}
  /* 手機版分兩列：第一列是股票區域（全球 / 亞太…），第二列是主題（商品 / 匯率…），各自可左右滑 */
  #chips{
    /* 概況卡的實際高度由 app.js 量出來寫進 --hud-h（不同瀏覽器的字高不同，固定數字會讓兩者疊在一起） */
    top:calc(env(safe-area-inset-top) + 11px + var(--hud-h,45px));
    flex-direction:column;align-items:stretch;gap:0;overflow:visible;padding:0 0 2px;
  }
  .crow{
    display:flex;align-items:center;gap:7px;overflow-x:auto;padding:3px 10px;
    scrollbar-width:none;
    /* 整列都能左右滑動（不會被底下的地圖搶走手勢），滑動結束停在按鈕邊緣 */
    pointer-events:auto;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scroll-padding:0 10px;
  }
  .crow::-webkit-scrollbar{display:none}
  .csep{display:none}
  .chip{scroll-snap-align:start}
  /* 有些瀏覽器會吃掉捲動容器右側的 padding，補一個空元素讓最右邊的按鈕能完整滑出來 */
  .crow::after{content:'';flex:none;width:2px}
}

/* ---------- 地標與主題卡片（商品 / 債券 / 利率 / 匯率 / 地緣 / 經濟數據） ---------- */
/* 央行、白宮、地緣圖示：不論哪個篩選都留在地圖上 */
.lm .lm-sh{fill:#0f1a08;opacity:.45}
.lm .lm-i{transform-box:fill-box;transform-origin:50% 100%}
.lm .lm-t{font-family:var(--font);font-weight:700;fill:var(--cream);text-anchor:middle;dominant-baseline:hanging;pointer-events:none;paint-order:stroke;stroke:rgba(5,10,22,.85);stroke-width:3px;stroke-linejoin:round}
.lm .lm-spark{transform-box:fill-box;transform-origin:center;pointer-events:none;opacity:0}
/* 休戰：和平鴿輕輕飄；衝突：雙劍來回交擊，每次交擊迸出火花 */
.lm-float .lm-i{animation:lmFloat 2.8s ease-in-out infinite}
.lm-clash .lm-i{animation:lmClash .8s ease-in-out infinite}
.lm-clash .lm-spark{animation:lmSpark .8s ease-out infinite}
@keyframes lmFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes lmClash{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.1)}}
@keyframes lmSpark{0%,40%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.lm .lm-i,.lm .lm-spark{animation:none}}
/* 主題卡片：國家位置的小圖釘與連到卡片的虛線 */
.tk .lead{pointer-events:none}
.tk .lead line{stroke:var(--gold-l);stroke-width:1.2;stroke-opacity:.85;stroke-dasharray:3 3}
.tk .lead circle{fill:var(--gold-l);stroke:var(--outline);stroke-width:1.5}

/* ---------- 提示訊息 ---------- */
#toast{
  position:absolute;z-index:9;left:50%;bottom:22px;transform:translate(-50%,12px);opacity:0;pointer-events:none;
  padding:8px 16px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap;transition:opacity .2s,transform .2s;
  background:var(--panel);border:1px solid var(--rim);box-shadow:0 0 0 1px var(--outline),0 6px 16px rgba(0,0,0,.5);
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 小角色 / 地標的說明視窗（滑鼠移上或手機點一下） ---------- */
.cr.tipped{cursor:help}
#ctip{
  position:absolute;z-index:9;left:0;top:0;width:max-content;max-width:min(268px,calc(100% - 16px));padding:10px 13px 11px;
  pointer-events:none;opacity:0;transform:translateY(5px) scale(.96);transition:opacity .14s,transform .14s;
  background:var(--panel);color:var(--cream);border:1px solid var(--rim);border-radius:13px;
  box-shadow:0 0 0 1px var(--outline),inset 0 0 0 1px var(--outline),inset 0 0 0 3px rgba(255,230,170,.13),inset 0 6px 10px -6px rgba(255,255,255,.25),0 10px 24px rgba(0,0,0,.6);
}
#ctip.show{opacity:1;transform:none}
/* 四角的金色飾釘 */
#ctip::before,#ctip::after{
  content:'';position:absolute;width:7px;height:7px;transform:rotate(45deg);pointer-events:none;
  background:linear-gradient(135deg,#fff3c8 0%,#d9b05a 55%,#8a6526 100%);border:1px solid var(--outline);box-shadow:0 0 5px rgba(255,214,120,.55);
}
#ctip::before{left:-4px;top:-4px}
#ctip::after{right:-4px;bottom:-4px}
#ctip .th{display:flex;align-items:center;gap:9px;padding-bottom:7px;margin-bottom:7px;border-bottom:1px solid rgba(227,189,92,.3)}
#ctip .ti{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:22px;line-height:1;font-family:var(--emoji);
  background:radial-gradient(circle at 35% 30%,#3d5f94 0%,#223a64 60%,#14233f 100%);
  border:2px solid var(--outline);box-shadow:0 0 0 1px var(--rim),0 0 8px rgba(255,214,120,.35),inset 0 1px 2px rgba(255,255,255,.35);
}
#ctip .ti .flg{height:20px}
#ctip .tt{min-width:0}
#ctip .tn{
  font-size:15.5px;font-weight:800;line-height:1.25;letter-spacing:.3px;
  background:linear-gradient(180deg,#fff3c4 0%,#f0c75e 60%,#c8902a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
}
#ctip .tk{
  display:inline-block;margin-top:3px;padding:1px 8px;border-radius:99px;font-size:10.5px;font-weight:700;color:#fff8e6;
  border:1px solid var(--outline);box-shadow:0 0 0 1px rgba(255,231,163,.35);background:var(--gold-d);
}
#ctip .tk[data-k="動物"]{background:#3f7a3a}
#ctip .tk[data-k="海洋生物"]{background:#23799a}
#ctip .tk[data-k="傳說生物"]{background:#7a3f9a}
#ctip .tk[data-k="世界地標"]{background:#9a7630}
#ctip .tk[data-k="歷史"]{background:#9a4a2a}
#ctip .tk[data-k="自然奇觀"]{background:#2a8a74}
#ctip .tk[data-k="人物文化"]{background:#b0602a}
#ctip .tk[data-k="科技"]{background:#3a62b0}
#ctip .tk[data-k="國家公園"]{background:#2f8a3a}
#ctip .tk[data-k="國家"]{background:#2a5a9a}
#ctip .td{font-size:12.5px;line-height:1.6;color:var(--cream);opacity:.93}
#ctip .tm{margin-top:6px;padding:4px 8px;border-radius:8px;font-size:12px;font-weight:700;background:rgba(6,11,21,.45);border:1px solid rgba(227,189,92,.25)}

/* ---------- 地圖 ---------- */
#stage{position:relative;flex:1;min-height:0;min-width:0;overflow:hidden;background:#2378b8}
/* 地圖四周的暗角，像遊戲畫面的鏡頭邊緣 */
#stage::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 60px rgba(8,16,32,.55)}
#terrain,#clouds,#aurora,#fx,#wfx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* ---------- 上帝視角的災難（只在股市地圖；效果畫在 #fx，邏輯在 disasters.js） ---------- */
#dzBtn{
  position:absolute;z-index:5;right:10px;bottom:20px;display:flex;align-items:center;gap:6px;
  padding:6px 12px 6px 9px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--cream);cursor:pointer;
  box-shadow:0 0 0 1px var(--outline),inset 0 0 0 1px rgba(255,240,190,.2),0 4px 12px rgba(0,0,0,.45)
}
#dzBtn .dz-i{font-size:18px;line-height:1;font-family:var(--emoji)}
#dzBtn .dz-c{font-size:10px;opacity:.7}
#dzBtn[aria-expanded="true"]{border-color:var(--gold-l)}
#dzMenu{position:absolute;z-index:7;width:168px;padding:6px;border-radius:12px;animation:rise .15s ease-out}
#dzMenu[hidden]{display:none}
#dzMenu .dz-h{padding:4px 8px 6px;font-size:13px;font-weight:700;color:var(--gold-l);border-bottom:1px solid rgba(227,189,92,.28);margin-bottom:4px}
#dzMenu .dz-h small{display:block;font-size:10.5px;font-weight:500;color:var(--cream);opacity:.7;margin-top:1px}
.dz-it{
  display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:1px solid transparent;border-radius:8px;
  background:none;color:var(--cream);font:inherit;font-size:14px;font-weight:700;text-align:left;cursor:pointer
}
.dz-it .dz-i{width:22px;font-size:18px;line-height:1;text-align:center;font-family:var(--emoji)}
.dz-it:hover{background:rgba(255,231,163,.1)}

/* ---------- 骰子（原「上帝之手」的位置，右下角）：canvas 畫的 3D 圓角立方體，大富翁風格 ---------- */
#diceBtn{
  position:absolute;z-index:5;right:14px;bottom:24px;display:none;align-items:center;justify-content:center;
  width:92px;height:92px;border:none;background:none;cursor:pointer;padding:0;
  transition:transform .15s;
}
/* 地上一顆獨立的橢圓陰影，跳起來時跟著縮小變淡（不用 filter:drop-shadow，避免整顆按鈕被離屏重繪） */
#diceBtn::before{
  content:'';position:absolute;left:50%;bottom:6px;width:62px;height:14px;margin-left:-31px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none;
}
#diceBtn.rolling::before{animation:diceShadow .9s cubic-bezier(.3,1.6,.4,1)}
@keyframes diceShadow{
  0%  {transform:scale(1);opacity:1}
  28% {transform:scale(.6);opacity:.45}
  55% {transform:scale(.5);opacity:.35}
  100%{transform:scale(1);opacity:1}
}
/* 骰子只在「遊戲」篩選才有意義（之後桃太郎電鐵式玩法），其他篩選下隱藏，避免佔位置又讓人誤以為是上帝之手 */
#stage.region-game #diceBtn{display:flex}
#diceBtn:hover{transform:translateY(-2px) scale(1.04)}
#diceBtn:active{transform:translateY(1px) scale(.97)}
#diceBtn:focus{outline:none}
#diceBtn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold-l)}
/* 外層場景只負責翻滾時的上下跳動（純 2D 位移）。立方體本身由 app.js 畫在 canvas 上，
   canvas 比場景大一圈，轉到斜角時投影輪廓（最大約 112px）才不會被切掉 */
#diceScene{width:68px;height:68px;position:relative;will-change:transform}
#diceCanvas{position:absolute;left:-26px;top:-26px;width:120px;height:120px;pointer-events:none}
#diceBtn.rolling #diceScene{animation:diceHop .9s cubic-bezier(.3,1.6,.4,1)}
@keyframes diceHop{
  0%  {transform:translateY(0)}
  28% {transform:translateY(-100px)}
  55% {transform:translateY(-125px)}
  100%{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){#diceBtn.rolling #diceScene,#diceBtn.rolling::before{animation:none}}
.dz-it:focus-visible{outline:2px solid var(--gold-l);outline-offset:-2px}
.dz-it.on{background:linear-gradient(180deg,#43669b 0%,#27436f 100%);border-color:var(--gold-l);color:var(--gold-l)}
#map{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;user-select:none;-webkit-user-select:none}
/* 國界只畫有股市（或目前主題篩選卡片）的國家：app.js 的 paintLand 加上 .on 並寫入顏色（全球十大市值國家紅色、其他綠色），其餘國家不畫 */
#map .land path,#map .line path,#map .edge path{display:none}
/* 文明帝國的國界感：寬而淡的同色光暈 + 淡淡的國土底色（land）→ 清楚的亮色主線（line）→ 中央白色細線（edge） */
#map .land path.on{display:inline;stroke-width:9;stroke-opacity:.22;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill .8s,stroke .8s}
#map .line path.on{display:inline;fill:none;stroke-width:2.6;stroke-opacity:.95;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none;transition:stroke .8s}
#map .edge path.on{display:inline;fill:none;stroke:#fff;stroke-width:.9;stroke-opacity:.85;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
/* 點擊高亮的國家：國土填亮色浮起 + 邊線加粗發光 + 呼吸動畫 */
#map .land path.hl-land{
  display:inline;
  fill:rgba(255,231,130,.42);
  stroke:rgba(255,220,80,.7);
  stroke-width:14;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 8px rgba(255,220,60,.9)) drop-shadow(0 4px 12px rgba(0,0,0,.5));
  animation:hlPulse 1.8s ease-in-out infinite;
}
#map .line path.hl-line{
  display:inline;
  fill:none;
  stroke:#ffe234;
  stroke-width:4.5;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(255,230,60,.8));
  animation:hlPulse 1.8s ease-in-out infinite;
}
#map .edge path.hl-edge{display:inline;fill:none;stroke:#fff;stroke-width:2;stroke-opacity:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
@keyframes hlPulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}
/* Hover 高亮：比點擊輕，國土微微發亮，邊線加粗但不脈衝。要「立刻」亮起：不轉場、不用 filter 模糊（大國家每次重畫模糊很貴），光暈靠寬的半透明描邊 */
#map .land path.hv-land{
  display:inline;
  fill:rgba(255,231,130,.28);
  stroke:rgba(255,215,60,.55);
  stroke-width:13;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  transition:none;
}
#map .line path.hv-line{
  display:inline;
  fill:none;
  stroke:#ffd840;
  stroke-width:3.5;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
  transition:none;
}
#map .edge path.hv-edge{display:inline;fill:none;stroke:#fff;stroke-width:1.4;stroke-opacity:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
@media (hover:none){#map .land path.hv-land,#map .line path.hv-line{filter:none}}
/* 小角色（海洋生物、船、人物）：陸上用柔和影子，海上用白色水波 */
.cr .shadow{fill:#0f1a08;opacity:.45;transform-box:fill-box;transform-origin:center}
.cr .wake{fill:#e8f6ff;transform-box:fill-box;transform-origin:center}
/* 小人找不到國家附近的空位時，用虛線連回國家的位置（和主題卡片的引線同一個風格） */
.folk-lead{pointer-events:none}
.folk-lead line{stroke:var(--gold-l);stroke-width:1.2;stroke-opacity:.85;stroke-dasharray:3 3}
.folk-lead circle{fill:var(--gold-l);stroke:var(--outline);stroke-width:1.5}
/* 原住民小人：漲跌超過 2% 才顯示的彩帶（歡呼）和閃電（沮喪） */
.cr .nv .big{display:none}
.cr .nv.is-big .big{display:inline}
#attrib{position:absolute;right:4px;bottom:3px;z-index:2;font-size:10px;color:#fff;opacity:.75;text-shadow:0 1px 2px #000;pointer-events:none;font-family:system-ui,sans-serif}

/* 台股市值前十大的建築（corps.js）：漲 → 窗戶亮燈、地上一圈暖光；跌 → 褪色變暗；大漲放煙火、重挫烏雲打雷 */
.corps .bld,.corps .lbl{cursor:pointer}
.corps .bld:focus{outline:none}
.corps .art{filter:drop-shadow(1.2px 1px .8px rgba(20,33,12,.55));transition:filter .8s}
.corps .edge{fill:none;stroke:rgba(10,18,30,.55);stroke-width:.5;stroke-linejoin:round}
.corps .gs{fill:#0f1a08;opacity:.45}
.corps .w{fill:#bcd8f2;transition:fill .8s}
.corps.up .w{fill:#ffe07a}
.corps.up .art{filter:drop-shadow(0 0 2.5px rgba(255,214,90,.85)) drop-shadow(1.2px 1px .8px rgba(20,33,12,.5))}
.corps.up .gs{fill:#ffcf55;opacity:.38}
.corps.down .art{filter:saturate(.35) brightness(.68) drop-shadow(1.2px 1px .8px rgba(20,33,12,.55))}
.corps.down .w{fill:#2c3748}
.corps.down .sign{filter:saturate(.5) brightness(.8)}
.corps .lead{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1;stroke-dasharray:2 2}
.corps .hq{stroke:#fff;stroke-width:1}
.corps .sign{filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.55))}
.corps .sb{stroke:var(--outline);stroke-width:1.5}
.corps .rkb{fill:#f2c14e;stroke:var(--outline);stroke-width:1.5}
.corps text{font-family:var(--font);font-weight:800;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.corps .rkt{font-size:9px;fill:#3a2604}
.corps .snm{font-size:10.5px;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.3);stroke-width:1.2px}
.corps .cfx{pointer-events:none}
/* 嵌在大樓正面的商標：白色外框，像企業總部大樓頂部的標誌 */
.corps .lgf{fill:#fbfaf6;stroke:rgba(10,18,30,.6);stroke-width:.35}
.corps .lgt{font-family:'Arial Black','Segoe UI',system-ui,sans-serif;font-weight:900;letter-spacing:-.02em;stroke:none;paint-order:normal}
/* 玻璃帷幕的窗框、反光；圓柱塔的帶狀窗；天線頂的航空警示燈 */
.corps .mu{fill:none;stroke:rgba(12,22,38,.3);stroke-width:.3}
.corps .gl{fill:url(#corp-sheen);pointer-events:none}
.corps .wl{fill:none;stroke:#bcd8f2;transition:stroke .8s}
.corps.up .wl{stroke:#ffe07a}
.corps.down .wl{stroke:#2c3748}
.corps .bk{animation:corp-blink 1.8s steps(1) infinite}
.corps .flame{transform-box:fill-box;transform-origin:50% 100%;animation:corp-flame .5s ease-in-out infinite alternate}
.corps .fw,.corps .storm{display:none}
.corps.boom .fw,.corps.crash .storm{display:inline}
.corps .burst{transform-box:fill-box;transform-origin:center;opacity:0;animation:corp-burst 2.6s ease-out infinite}
.corps .burst path{fill:none;stroke-width:1.6;stroke-linecap:round}
.corps .rain path{stroke:#9fc3ff;stroke-width:1;stroke-linecap:round;opacity:0;animation:corp-rain .9s linear infinite}
.corps .bolt{fill:#ffe86b;stroke:#fff6c2;stroke-width:.5;opacity:0;animation:corp-bolt 3.4s linear infinite}
@keyframes corp-burst{0%{opacity:0;transform:scale(.15)}8%{opacity:1}45%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.25)}}
@keyframes corp-rain{0%{opacity:0;transform:translateY(-2px)}20%{opacity:.9}100%{opacity:0;transform:translateY(14px)}}
@keyframes corp-bolt{0%,86%,90%,93%,100%{opacity:0}87%,89%,94%,96%{opacity:1}}
@keyframes corp-blink{50%{opacity:.15}}
@keyframes corp-flame{to{transform:scale(.8,1.15)}}
body.noanim .corps .burst{animation:none;opacity:1;transform:none}
body.noanim .corps .rain path{animation:none;opacity:.8}
body.noanim .corps .bolt{animation:none;opacity:1}
body.noanim .corps .bk,body.noanim .corps .flame{animation:none}
@media (prefers-reduced-motion:reduce){
  .corps .burst{animation:none;opacity:1;transform:none}
  .corps .rain path{animation:none;opacity:.8}
  .corps .bolt{animation:none;opacity:1}
  .corps .bk,.corps .flame{animation:none}
}

/* 動物棋子 */
.mk{cursor:pointer}
.emoji{font-family:var(--emoji);text-anchor:middle;dominant-baseline:central}
.mood{font-family:var(--emoji);text-anchor:middle;dominant-baseline:central}
/* 3D 動物：腳下柔和影子 + 開盤時地面擴散的光圈 */
.an .shadow{fill:#0f1a08;opacity:.5;transform-box:fill-box;transform-origin:center}
.an .ring{fill:none;stroke:#3dff9a;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.an.open .ring{animation:ping 2.2s ease-out infinite}
.an.break .ring{stroke:#ffc23d;animation:ping 3s ease-out infinite}
.an.closed .body{filter:saturate(.75) brightness(.95)}
.an .mood{opacity:.9}

/* 城市旗幟（股價框） */
.mk .bubble{filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.bubble .bg{stroke:var(--outline);stroke-width:3}
.bubble .rim{fill:none;stroke:var(--rim);stroke-width:1.1}
.bubble .inner{fill:none;stroke:rgba(255,231,163,.16);stroke-width:1}
.bubble .band{stroke:none}
.bubble .sep{stroke:rgba(255,226,150,.45);stroke-width:1}
.bubble .mlead{pointer-events:none}
.bubble .mlead line{stroke:var(--gold-l);stroke-width:1.3;stroke-opacity:.9;stroke-dasharray:3.5 3}
.bubble .mlead circle{fill:var(--gold-l);stroke:var(--outline);stroke-width:1.4}
.bubble .tail-o{fill:none;stroke:var(--outline);stroke-width:3.2;stroke-linejoin:round}
.bubble .tail{fill:#15243e;stroke:var(--rim);stroke-width:1.1;stroke-linejoin:round}
/* 多指數旗幟：每列一個指數 */
.bubble .rbg{fill:transparent}
.bubble .rbg.odd{fill:rgba(255,255,255,.05)}
/* 經濟數據卡：成長 / 物價 / 就業 不再有標題列，每個區塊一種底色（藍 / 琥珀 / 紫 / 青；避開紅綠，免得和漲跌色混在一起），區塊內不分單雙列 */
.bubble .rbg.g0{fill:rgba(22,52,108,.86)}
.bubble .rbg.g1{fill:rgba(88,60,18,.86)}
.bubble .rbg.g2{fill:rgba(56,40,104,.88)}
.bubble .rbg.g3{fill:rgba(14,68,82,.86)}

/* 報價剛更新（lvr = 紅光、lvg = 綠光，顏色是「這次價格漲或跌」，程式依紅漲綠跌設定決定）：
   旗幟 / 卡片外框發光、數字區塊或該列底色淡出。持續約 2 秒後程式會把 class 拿掉 */
.bubble .fl{fill:transparent;opacity:0;pointer-events:none}
.bubble .fl.lvr{fill:hsl(4,95%,60%);animation:liveWash 1.9s ease-out}
.bubble .fl.lvg{fill:hsl(140,85%,48%);animation:liveWash 1.9s ease-out}
.bubble.lvr .rim{animation:liveRimR 2.2s ease-out}
.bubble.lvg .rim{animation:liveRimG 2.2s ease-out}
.bubble .row.lvr .rbg{animation:liveRowR 1.9s ease-out}
.bubble .row.lvg .rbg{animation:liveRowG 1.9s ease-out}
@keyframes liveWash{0%{opacity:.8}100%{opacity:0}}
@keyframes liveRimR{0%,15%{stroke:#ff9a90;stroke-width:3.2}100%{}}
@keyframes liveRimG{0%,15%{stroke:#8dffb0;stroke-width:3.2}100%{}}
@keyframes liveRowR{0%{fill:rgba(255,80,70,.7)}100%{}}
@keyframes liveRowG{0%{fill:rgba(60,235,120,.65)}100%{}}
@media (prefers-reduced-motion:reduce){.bubble .fl,.bubble.lvr .rim,.bubble.lvg .rim,.bubble .row.lvr .rbg,.bubble .row.lvg .rbg{animation:none!important}}
/* 漲跌幅超過 2% 的底色（實心紅 / 綠 + 白字，顏色由程式寫入） */
.bubble .hl,.bubble .rhl{stroke:rgba(255,255,255,.4);stroke-width:.7}
/* 卡內的分隔標題（成長 / 物價 / 就業）：藍綠色實底帶 + 白字，和金色的資料標籤、深色資料列明顯不同；列高只有 12px */
.bubble .rbg.sec{fill:#1f7f95;stroke:rgba(150,230,245,.6);stroke-width:.6}
.bubble .rn.sec{font-size:9.5px;font-weight:800;letter-spacing:4px;fill:#fff}
.bubble .rn{text-anchor:start;font-size:11px;fill:var(--gold-l);dominant-baseline:alphabetic}
/* 市值前十大的名次：淺藍色，和金色的公司名稱區分 */
.bubble .rk{text-anchor:end;font-size:10px;font-weight:800;fill:#8fdcff;dominant-baseline:alphabetic}
.bubble .rv{text-anchor:end;font-size:15px;fill:#fff;font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.2px;dominant-baseline:alphabetic}
.bubble .rp{text-anchor:end;font-size:13.5px;font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.2px;dominant-baseline:alphabetic}
.bubble .lb{fill:var(--gold-l);font-size:10.5px}
.bubble .dots circle{fill:rgba(255,255,255,.35);stroke:var(--outline);stroke-width:.6}
.bubble .dots circle.on{fill:var(--gold-l)}
.bubble text{font-family:var(--font);font-weight:700;fill:var(--cream);text-anchor:middle;dominant-baseline:central;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.45);stroke-width:2px}
.bubble .t1{font-size:14px;dominant-baseline:alphabetic}
/* 國名：金色漸層字 + 深色描邊（金色呼應旗幟的金邊，在紅 / 綠 / 灰色帶上都清楚），和下方白色的數字分出層次 */
.bubble .t1 .a{fill:url(#nameGold);stroke:rgba(5,10,22,.78);stroke-width:3px;stroke-linejoin:round}
.bubble .tsb{fill:rgba(8,14,28,.55);stroke:rgba(169,216,255,.3);stroke-width:.6}
.bubble .ts{font-size:10px;font-weight:500;text-anchor:end;fill:#b0d4f0;stroke:none;dominant-baseline:alphabetic;letter-spacing:.2px}
.bubble .t2{font-size:15px;fill:#fff;dominant-baseline:alphabetic;font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.2px}
.bubble .t2 .lb{font-size:11.5px;letter-spacing:0}
.bubble .t2 .pc{font-size:13.5px}
/* 白色數值的小數部分與單位（萬、億、K、%…）縮小；倍率要和 app.js 的 NUM_SMALL 一致 */
.bubble .nd{font-size:.72em;letter-spacing:0;fill-opacity:.62}
/* 漲跌幅的 % 與 bp：只縮小，不變色 */
.bubble .nu{font-size:.72em;letter-spacing:0}
.bubble .flag-b{fill:none;stroke:var(--gold-l);stroke-width:1;stroke-opacity:.85}
#sheet p.desc{font-size:14px;line-height:1.6;margin:12px 0 8px}

/* HTML 裡的國旗圖（詳情卡標題、其它指數面板） */
.flg{display:inline-block;height:.9em;width:auto;vertical-align:-.08em;border-radius:2px;box-shadow:0 0 0 1px rgba(255,231,163,.7),0 1px 2px rgba(0,0,0,.5)}
.beast3d{width:56px;height:56px;object-fit:contain;filter:drop-shadow(2px 3px 3px rgba(0,0,0,.45))}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ping{0%{opacity:.95;transform:scale(.6)}100%{opacity:0;transform:scale(1.7)}}


#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#263d63 0%,#0c1628 80%);color:var(--gold-l);font-weight:700;z-index:8;transition:opacity .5s}
#loading.gone{opacity:0;pointer-events:none}
#loading .spin{font-size:64px;animation:bob 1s ease-in-out infinite;font-family:var(--emoji)}
/* 載入中的地球：大一點，外圍有一圈淡淡的大氣光暈 */
#loading canvas.globe{width:clamp(150px,40vmin,240px);height:clamp(150px,40vmin,240px);filter:drop-shadow(0 0 22px rgba(96,176,255,.5))}

/* ---------- 彈窗 ---------- */
#sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
#sheet[hidden]{display:none}
#sheet .back{position:absolute;inset:0;background:rgba(5,10,20,.55)}
#sheet .box{
  position:relative;width:min(460px,100%);
  background:var(--panel);color:var(--cream);
  border:1px solid var(--rim);border-bottom:0;border-radius:14px 14px 0 0;
  box-shadow:0 0 0 1px var(--outline),inset 0 0 0 1px var(--outline),inset 0 0 0 3px rgba(255,230,170,.14),0 -6px 24px rgba(0,0,0,.6);
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));animation:rise .25s ease-out;max-height:85dvh;overflow:auto;
}
#sheet .box.still{animation:none}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
#sheet .x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;font-size:14px;padding:0}
.hd{display:flex;align-items:center;gap:12px;padding-right:40px}
.hd .big{font-size:44px;font-family:var(--emoji);line-height:1;filter:drop-shadow(0 0 2px #fff8e6) drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.nm{font-size:19px;font-weight:700;color:var(--gold-l)}
.sym{font-size:12px;opacity:.65}
.px{font-size:34px;font-weight:700;margin-top:10px;line-height:1.1;color:#fff}
.chg{font-size:16px;font-weight:700;margin-bottom:6px}
/* 漲跌幅超過 2% 的標籤（底色由程式寫入） */
.pill{display:inline-block;padding:0 6px;border-radius:5px;color:#fff;border:1px solid rgba(255,255,255,.4);white-space:nowrap}
/* 多指數國家的分頁 */
.gtabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;margin:12px 0 4px}
.gtab{border-radius:7px;padding:5px 2px;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.25;min-width:0}
.gtab b{font-size:12.5px;white-space:nowrap}
.gtab span{font-size:11px;font-weight:700}
.gtab.on{border-color:var(--gold-l);background:linear-gradient(180deg,#43669b 0%,#27436f 100%);box-shadow:0 0 0 1px var(--outline),inset 0 0 0 1px rgba(255,240,190,.35),0 0 9px rgba(255,210,100,.45)}
.gtab.on b{color:var(--gold-l)}
.meta{font-size:13px;line-height:1.7}
.meta b{font-weight:700;color:var(--gold-l)}
.big-btn{display:block;width:100%;margin-top:10px;border-radius:12px;padding:9px;font-weight:700}
#sheet h3{margin:0 0 6px;font-size:19px;color:var(--gold-l)}
#sheet p.small{font-size:12px;opacity:.75;line-height:1.6;margin:10px 0 0}

/* ---------- 桌面 ---------- */
@media (min-width:900px){
  body{flex-direction:row}
  /* 左側直式圖層列（仿 Google 地圖），右緣是金色飾條 */
  #rail{
    order:0;flex-direction:column;align-items:stretch;width:78px;
    padding:10px 0 calc(12px + env(safe-area-inset-bottom));
    box-shadow:inset -1px 0 0 rgba(255,255,255,.06),6px 0 14px rgba(0,0,0,.45);
  }
  #rail::after{
    left:auto;right:-4px;top:0;bottom:0;width:4px;height:auto;
    background:linear-gradient(90deg,var(--outline),var(--outline)) 0 0/1px 100% no-repeat,var(--trim-v) 1px 0/2px 100% no-repeat,linear-gradient(90deg,var(--outline),var(--outline)) 3px 0/1px 100% no-repeat;
  }
  #rail::before{left:auto;right:-6.5px;top:50%;transform:translateY(-50%) rotate(45deg)}
  #rail .brand{
    display:block;text-align:center;font-size:30px;line-height:1;font-family:var(--emoji);
    padding:2px 0 12px;margin:0 12px 8px;border-bottom:1px solid rgba(227,189,92,.3);
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
  }
  #layers{display:flex;flex-direction:column;gap:8px}
  .rl{flex:none;padding:4px 0}
  .rl .ri{width:52px;height:32px;font-size:19px}
  #btnSet{display:flex;margin-top:auto}

  /* 左上：概況卡；篩選列在它右邊 */
  #side{
    display:flex;flex-direction:column;gap:10px;position:absolute;z-index:6;
    left:12px;top:12px;bottom:12px;width:336px;pointer-events:none;
  }
  #side > *{pointer-events:auto}
  #hud{position:static;flex:none;max-width:none;padding:9px 14px 8px;border-radius:12px}
  .logo{display:block;margin-bottom:5px}
  .hp{width:auto}
  .sub{font-size:12px;margin-top:3px}
  #chips{left:358px;right:12px;top:12px;padding:4px 2px 8px}
  #sheet{align-items:center}
  #sheet .box{border-bottom:1px solid var(--rim);border-radius:14px}
}
@keyframes slidein{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}

body.noanim *,body.noanim *::before{animation:none!important;transition:none!important}

/* 分頁真正切到背景（document.hidden）時，整個地圖 SVG 跟所有 canvas 圖層直接不渲染：
   裝飾動物圖片是用 <image href="critters/xxx.svg"> 外部參照載入的，裡面的 SMIL 動畫不受
   JS 的 requestAnimationFrame 節流控制，只有真的從渲染樹拿掉才會讓瀏覽器停止解碼動畫，
   省下持續的 CPU / GPU 負擔 */
body.tab-hidden #map,body.tab-hidden #terrain,body.tab-hidden #aurora,body.tab-hidden #clouds,body.tab-hidden #wfx,body.tab-hidden #fx{display:none!important}

/* ---------- 嵌入模式（?embed=1）：只留股市地圖，隱藏概況卡與圖層列（也就沒有旅遊等其它圖層、設定按鈕） ---------- */
html.embed #rail,html.embed #hud{display:none}
@media (max-width:899px){
  html.embed #chips{top:calc(env(safe-area-inset-top) + 6px)}
}
@media (min-width:900px){
  /* 沒有概況卡：篩選列靠左 */
  html.embed #chips{left:12px}
}
/* 設定面板的語言選單：3 欄 */
.gtabs.langs{grid-template-columns:repeat(3,minmax(0,1fr))}
.gtabs.langs .gtab{padding:8px 2px}
/* 分隔標題的字距是為中日文設計的（4px）；英文、韓文字母本身就比較寬，字距縮小 */
html[lang="en"] .bubble .rn.sec{letter-spacing:.6px}
html[lang="ko"] .bubble .rn.sec{letter-spacing:1.6px}
/* ---------- 切換篩選的飛行動畫 ----------
   飛行中（app.js 的 animateTo 會在 #map 加上 .flying）：動物、小角色、旗幟、卡片先淡出，飛行過程只畫地形與國界，才順；
   它們的位置要等停下來才排得準，停下後排一次再淡入。 */
#map > g.decor,#map > g.folk-layer,#map > g.geo-layer,#map > g.landmarks,#map > g.markers,#map > g.bubbles,#map > g.topics{transition:opacity .22s ease}
#map.flying > g.decor,#map.flying > g.folk-layer,#map.flying > g.geo-layer,#map.flying > g.landmarks,#map.flying > g.markers,#map.flying > g.bubbles,#map.flying > g.topics{opacity:0;transition-duration:.1s}