/* ── 全域像素中文字型：Fusion Pixel 12px（繽紛像素體，SIL OFL 授權） ──
   消除預設字體的抽離感；12 的倍數字級渲染最銳利 */
@font-face{
  font-family:'FusionPixel';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/fusion-pixel-tc.woff2') format('woff2');
}
/* ───────────────────────────────────────
   base.css — 版面、HUD、共用標籤
─────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0a;display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden}
#wrap{position:relative;width:480px;height:270px}
canvas{position:absolute;top:0;left:0;display:block;image-rendering:pixelated;image-rendering:crisp-edges;width:100%;height:100%}
#c2{pointer-events:none}
/* 場景內清晰文字層：夾在背景 canvas 與角色 canvas 之間 → 文字清楚且永遠在角色後方 */
#scene-labels{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;font-family:'FusionPixel','Microsoft JhengHei',sans-serif}
#scene-labels .sl{position:absolute;transform:translate(-50%,-50%);white-space:nowrap}
.sl-title2{font-size:12px;letter-spacing:5px;color:#f2e6c4;font-weight:bold}
.sl-en{font-size:5.5px;letter-spacing:2px;color:#9fb2cc;font-family:monospace}
.sl-cap{font-size:6.5px;color:#22304a;font-weight:bold;letter-spacing:1px}
.sl-desk{font-size:7px;color:#e8d8a8;font-weight:bold;letter-spacing:2px}
.sl-shop{font-size:7.5px;color:#fff;font-weight:bold;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.85)}
#ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;
    font-family:'FusionPixel','Microsoft JhengHei','PingFang TC','Heiti TC',sans-serif}

/* HUD */
#hud{position:absolute;top:0;left:0;width:100%;height:16px;background:rgba(0,0,0,0.82);
     display:flex;align-items:center;padding:0 8px;gap:10px;font-size:9.5px;color:#e0c878;
     white-space:nowrap;border-bottom:1px solid #3a2e10}
#hud b{color:#ffe040;text-shadow:0 0 4px rgba(255,220,0,.4)}

/* 互動提示泡泡 */
.bbl{position:absolute;transform:translate(-50%,-100%);background:rgba(0,0,0,0.92);border:1px solid;
     padding:3px 8px;font-size:9px;font-weight:bold;white-space:nowrap;border-radius:2px;text-shadow:0 1px 2px #000}

/* 地點標籤 — 預設隱藏（修正：標題畫面左上角不再出現 NPC 名字） */
.loc{position:absolute;transform:translateX(-50%);font-size:8.5px;font-weight:bold;color:#ffe066;
     white-space:nowrap;background:#171410;border:1px solid #6a5530;box-shadow:0 0 0 2px #0a0806;
     padding:1px 6px;display:none}

#tower-title{position:absolute;top:20px;left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:bold;
     color:#dfe6f2;white-space:nowrap;letter-spacing:3px;background:#1a202c;border:1px solid #3c4658;
     box-shadow:0 0 0 2px #0c0e14;padding:3px 12px}

#elev-hint{position:absolute;font-size:8.5px;color:#70d8ff;background:rgba(0,0,0,.88);
     border:1px solid #70d8ff;padding:2px 7px;transform:translateX(-50%);white-space:nowrap;display:none}

/* 樓層指示器 */
#floor-ind{display:none!important}
#floor-ind .fi{width:16px;height:11px;border:1px solid #5a5a66;background:rgba(0,0,0,.25);border-radius:1px}
#floor-ind .fi.cur{background:#ffe040;border-color:#ffe040;box-shadow:0 0 6px rgba(255,224,64,.8)}
#floor-ind .fi.locked{border-color:#33333c;background:rgba(0,0,0,.5)}
#floor-ind .fi-locked-perm{height:7px;border-style:dashed;border-color:#2c2c34;background:rgba(0,0,0,.5)}

/* NPC 標籤 */
#npc-label{position:absolute;transform:translateX(-50%);font-size:8.5px;font-weight:bold;white-space:nowrap;
     background:#171410;border:1px solid #6a5530;box-shadow:0 0 0 2px #0a0806;padding:1px 6px;display:none}
#npc-bubble{position:absolute;transform:translate(-50%,-100%);background:rgba(0,0,0,0.92);border:1px solid #f8e030;
     color:#f8e030;padding:3px 8px;font-size:9px;font-weight:bold;white-space:nowrap;border-radius:2px;display:none}

/* 電梯轉場 DOM 文字（修正：原 canvas 文字像素化問題） */
#elev-ov{position:absolute;top:0;left:0;width:100%;height:100%;display:none;pointer-events:none;z-index:80}
#elev-ov.on{display:block}
#elev-ov-main{position:absolute;top:24%;left:50%;transform:translateX(-50%);font-size:11px;color:#ffe070;
     letter-spacing:3px;text-shadow:0 0 10px rgba(255,224,112,.5);animation:elevPulse 1.2s ease-in-out infinite}
#elev-ov-sub{position:absolute;top:33%;left:50%;transform:translateX(-50%);font-size:8px;color:#a0b4c8;letter-spacing:1px}
#elev-ov-floor{position:absolute;top:46%;left:64%;font-size:13px;color:#ffe040;font-family:'FusionPixel',monospace;
     font-weight:bold;background:rgba(0,0,0,.6);border:1px solid #7090b0;padding:2px 8px;letter-spacing:1px}
@keyframes elevPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* 浮動台詞層（不阻塞的對話：第一關放置成功、攤位呢喃等） */
#float-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:70}
.float-line{position:absolute;transform:translate(-50%,-100%);max-width:230px;text-align:left;
     background:rgba(8,6,2,0.92);border:1px solid;padding:4px 9px;font-size:9px;font-weight:bold;
     line-height:1.55;border-radius:2px;text-shadow:0 1px 2px #000;
     animation:floatIn .25s ease-out}
.float-line.out{animation:floatOut .4s ease-in forwards}
@keyframes floatIn{from{opacity:0;transform:translate(-50%,-80%)}to{opacity:1;transform:translate(-50%,-100%)}}
@keyframes floatOut{from{opacity:1}to{opacity:0;transform:translate(-50%,-120%)}}
@keyframes blink{0%,65%{opacity:1}66%,100%{opacity:0}}

/* 標題畫面 */
#title-ui{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;
     align-items:center;justify-content:center;gap:0}
#title-main{font-family:'FusionPixel','Microsoft JhengHei',sans-serif;
  font-size:48px;color:#f2efe6;letter-spacing:10px;margin-top:-52px;text-indent:10px;
  text-shadow:0 3px 0 #10131e,3px 0 0 #10131e,3px 3px 0 #10131e,6px 6px 0 rgba(0,0,0,.45)}

#title-start{font-size:11px;color:#e8c860;margin-top:44px;text-shadow:1px 1px 0 #11141f,-1px -1px 0 #11141f;letter-spacing:2px;animation:blink 1s step-end infinite}
#title-ver{position:absolute;bottom:8px;left:10px;font-size:8px;color:#6a5638;font-family:'FusionPixel',monospace}




/* 大廳工人呢喃：低調版浮動台詞（不搶玩家焦點） */
.float-line.subtle{font-size:7px;font-weight:normal;color:#b3a88e!important;
  background:rgba(12,10,6,.62);border-color:rgba(150,130,95,.4);padding:2px 6px;max-width:170px}

/* 城市場景地名（清晰 DOM，位於角色層之下） */
.sl-plaque{font-size:8px;color:#f8d040;font-weight:bold;letter-spacing:3px}
.sl-fishsign{font-size:8px;color:#eaf4fa;font-weight:bold;letter-spacing:4px}