/* 雲渺仙途 · 直式古風介面（框體、按鈕、圖示均取自素材圖集，經 CSS 變數以 border-image 九宮格套用） */
:root{
  --ink:#2b2a22; --ink2:#5d5644; --paper:#f4efdf; --jade:#3f8f6a; --jade2:#1f5a44; --gold:#e7b54a; --gold2:#ffe7a6;
  --cinna:#c4472f; --violet:#8b5ab8; --night:#0f1a17; --sans:"Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --brush:"LXGW WenKai TC","Noto Serif TC","KaiTi","DFKai-SB",serif;
  --app-w:min(100vw,480px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:#0b1210;color:var(--ink);font-family:var(--sans);overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:not-allowed;filter:grayscale(.8) brightness(.9);opacity:.7}
img{display:block}
.u{display:inline-block;background:no-repeat center/contain}
.u.ico{width:22px;height:22px;vertical-align:middle;flex:none}
.backdrop{position:fixed;inset:-40px;background:#10201b center/cover;filter:blur(18px) brightness(.45) saturate(1.1)}
.app{position:relative;width:var(--app-w);height:100dvh;margin:0 auto;overflow:hidden;background:#13201c;box-shadow:0 0 60px rgba(0,0,0,.6)}
.stage{position:absolute;inset:0;background:#162b25 radial-gradient(circle at 50% 30%,#2c4a3e,#0f1a17)}
.app:not([data-tab="home"]):not([data-tab="inn"]) .stage{background:url(../assets/map/scene_yh/thumb.jpg) center/cover;filter:blur(3px) brightness(.55)}
.scene-canvas{position:absolute;inset:0;touch-action:none;cursor:pointer}

/* ---------------- HUD ---------------- */
.hud{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 6px) 8px 6px;
  background:linear-gradient(rgba(8,16,13,.7),rgba(8,16,13,0));pointer-events:none}
.hud>*{pointer-events:auto}
.hud-me{position:relative;display:grid;grid-template-columns:58px auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;text-align:left}
.hud-avatar{grid-row:1/3;grid-column:1;position:relative;z-index:1;width:50px;height:50px;margin:4px;border-radius:50%;overflow:hidden;background:#20352d}
.hud-avatar img{width:100%;transform:scale(1.35) translateY(6%);transform-origin:50% 15%}
.hud-frame{grid-row:1/3;grid-column:1;width:58px;height:58px;z-index:0}
.hud-name{font-family:var(--brush);font-size:16px;color:#fff;text-shadow:0 1px 2px #000}
.hud-fc{display:flex;align-items:center;gap:2px;color:var(--gold2);font-weight:700;font-size:14px;text-shadow:0 1px 2px #000}
.hud-fc i{width:30px;height:30px}
.hud-res{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.res{display:flex;align-items:center;gap:4px;min-width:112px;height:28px;padding:0 12px 0 4px;color:#fff;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;
  border-radius:14px;background:rgba(10,18,15,.72);border:1px solid rgba(231,181,74,.45);justify-content:space-between}
.res.sm{min-width:86px;height:24px;font-size:12px}
.res .ico{width:26px;height:26px}
.app[data-tab="home"] .hud,.app[data-tab="inn"] .hud{background:linear-gradient(rgba(8,16,13,.55),rgba(8,16,13,0))}

/* ---------------- 主區 ---------------- */
.main{position:absolute;left:0;right:0;top:0;bottom:calc(70px + env(safe-area-inset-bottom));z-index:10;overflow:hidden auto;pointer-events:none;scrollbar-width:none}
.main::-webkit-scrollbar{display:none}
.main>*{pointer-events:auto}
.panel-page{margin:84px 10px 16px;padding:18px 14px 20px;border:30px solid transparent;border-image:var(--win-paper) 40 fill/30px;background-clip:padding-box;min-height:calc(100% - 100px)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-6px 0 6px}
h2{font-family:var(--brush);font-size:24px;margin:0;color:#3b2f1c;letter-spacing:.06em}
h3{font-family:var(--brush);font-size:18px;margin:16px 0 8px;color:#3b2f1c}
.sub{font-size:13px;color:var(--ink2);margin:4px 0 8px;line-height:1.55}
.line{line-height:1.8;font-size:15px}
.row{display:flex;gap:10px;align-items:center}
.row.center{justify-content:center;margin-top:12px}
.row.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:8px}
.label{font-size:12px;color:var(--ink2)}
.bar{height:10px;border-radius:6px;background:rgba(40,36,28,.25);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#f0c860,#e08a2c);border-radius:6px;transition:width .4s}

/* 按鈕：素材按鈕底圖 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:96px;height:44px;padding:0 18px;font-family:var(--brush);font-size:17px;font-weight:700;color:#4a2a0c;
  border:0 solid transparent;border-image:var(--btn-yellow) 0 46 fill/0 22px;text-shadow:0 1px 0 rgba(255,255,255,.5);white-space:nowrap}
.btn.green{border-image-source:var(--btn-green);color:#123d2a}
.btn.red{border-image-source:var(--btn-red);color:#5a1609}
.btn.gray{border-image-source:var(--btn-gray);border-image-slice:0 60 fill;color:#3a3a3a}
.btn.sm{height:36px;min-width:72px;font-size:15px;padding:0 12px}
.btn:active:not(:disabled){transform:scale(.96)}

/* 視窗 */
.ov{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,10,8,.62);animation:fade .2s}
.box.win{position:relative;width:100%;max-width:440px;max-height:calc(100% - 20px);display:flex;flex-direction:column;
  border:solid transparent;border-width:58px 22px 24px;border-image:var(--win-alert) 76 32 34 fill/58px 22px 24px;animation:pop .22s}
.win-title{position:absolute;left:0;right:0;top:-46px;text-align:center;font-family:var(--brush);font-size:21px;font-weight:700;color:#fff;text-shadow:0 2px 2px #0b3a26,0 0 6px #0b3a26;letter-spacing:.12em}
.win-body{overflow:auto;padding:8px 6px 6px;scrollbar-width:thin}
.xbtn{position:absolute;right:-20px;top:-60px;width:52px;height:52px;z-index:2}
@keyframes pop{from{transform:scale(.9);opacity:0}}
@keyframes fade{from{opacity:0}}
.toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:90;padding:10px 20px;border-radius:20px;background:rgba(14,22,18,.9);color:#ffeec0;font-size:14px;
  border:1px solid rgba(231,181,74,.6);animation:toast 1.8s forwards;pointer-events:none;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.tabs{display:flex;gap:2px;margin:-6px -4px 10px;flex-wrap:wrap;justify-content:center}
.tabs button{height:38px;min-width:64px;padding:0 10px;font-family:var(--brush);font-size:15px;border:0 solid transparent;border-image:var(--tab-off) 0 40 fill/0 18px;color:#5b4a2c;font-weight:700}
.tabs button[aria-pressed="true"]{border-image-source:var(--tab-on);color:#3c2a08;font-weight:700}
input[type=text]{width:100%;height:44px;margin-top:4px;padding:0 12px;border-radius:8px;border:2px solid #c8b78f;background:#fffaf0;font-size:16px}
.news p{margin:8px 0;line-height:1.7;font-size:14px}

/* ---------------- 底部導覽 ---------------- */
.nav{position:absolute;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);height:calc(70px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:var(--nav-bg) center top/100% 100% no-repeat, #0e2a26}
.nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px;color:#cfe8dc;font-family:var(--brush);font-size:14px;text-shadow:0 1px 2px #000}
.nav button i{width:44px;height:44px;margin-bottom:-2px;transition:transform .2s}
.nav .nav-head{border-radius:50%;overflow:hidden;width:40px;height:40px;border:2px solid #9fd2b6;background:#203a31;margin-bottom:1px}
.nav .nav-head img{width:100%;transform:scale(1.3) translateY(4%)}
.nav button[aria-current="true"]{color:var(--gold2)}
.nav button[aria-current="true"] i{transform:translateY(-6px) scale(1.12);filter:drop-shadow(0 0 6px rgba(255,220,120,.8))}
.nav button[aria-current="true"]::after{content:"";position:absolute;bottom:3px;left:30%;right:30%;height:2px;background:var(--gold);border-radius:2px}

/* ---------------- 地圖場景 UI ---------------- */
.quest{position:absolute;left:6px;top:calc(env(safe-area-inset-top) + 82px);width:min(230px,62%);min-height:64px;padding:8px 14px 8px 44px;
  border:0 solid transparent;border-image:var(--quest-bg) 0 40 0 30 fill/0 34px 0 26px;color:#2c3b2f;cursor:pointer;animation:fade .3s}
.quest-tag{position:absolute;left:4px;top:8px;width:40px;height:22px}
.quest-text{display:flex;flex-direction:column;gap:1px;font-size:12px}
.quest-text b{font-family:var(--brush);font-size:15px;color:#1d4a33}
.quest-text small{color:#7b5c22}
.side{position:absolute;right:4px;top:calc(env(safe-area-inset-top) + 104px);display:flex;flex-direction:column;gap:6px;align-items:center}
.sbtn{position:relative;width:62px;display:flex;flex-direction:column;align-items:center}
.sbtn i{width:58px;height:58px}
.sbtn em{font-style:normal;font-family:var(--brush);font-size:13px;color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000;margin-top:-10px}
.sbtn:first-child i{height:34px;width:70px}
.sbtn.sm i{width:40px;height:40px}
.dot{position:absolute;top:0;right:4px;width:10px;height:10px;border-radius:50%;background:#e8402a;box-shadow:0 0 0 2px #fff}
.scene-tip{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:6px 14px;border-radius:14px;background:rgba(8,16,13,.7);color:#e9f3e9;font-size:12px;white-space:nowrap;transition:opacity .6s;pointer-events:none}
.scene-tip.hide{opacity:0}

/* ---------------- 對話 ---------------- */
.dlg{position:absolute;inset:0;z-index:70;cursor:pointer;animation:fade .2s}
.dlg-shade{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.78) 55%)}
.dlg-header{position:absolute;top:calc(env(safe-area-inset-top) + 18px);left:50%;transform:translateX(-50%);padding:6px 26px;color:#fff;font-family:var(--brush);font-size:17px;letter-spacing:.1em;
  background:linear-gradient(90deg,transparent,rgba(10,30,22,.85),transparent);white-space:nowrap}
.dlg-portrait{position:absolute;left:-6%;bottom:150px;width:78%;height:66%;pointer-events:none;display:flex;align-items:flex-end;justify-content:flex-start}
.dlg-portrait.right{left:auto;right:-6%;justify-content:flex-end}
.dlg-art{max-width:100%;max-height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));animation:slidein .3s}
.dlg-portrait.right .dlg-art{animation-name:slidein2}
@keyframes slidein{from{transform:translateX(-30px);opacity:0}}
@keyframes slidein2{from{transform:translateX(30px);opacity:0}}
.dlg-box{position:absolute;left:10px;right:10px;bottom:calc(16px + env(safe-area-inset-bottom));min-height:150px;padding:30px 18px 26px;color:#fff;
  background:linear-gradient(rgba(12,26,20,.88),rgba(8,16,13,.94));border:1px solid rgba(160,214,180,.45);border-radius:10px;box-shadow:0 0 0 3px rgba(10,20,16,.6)}
.dlg-name{position:absolute;left:12px;top:-20px;min-width:130px;height:38px;padding:0 26px;display:flex;align-items:center;justify-content:center;border:0 solid transparent;border-image:var(--name-bg) 0 40 fill/0 22px}
.dlg-name span{font-family:var(--brush);font-size:18px;font-weight:700;color:#1d4a33}
.dlg-text{font-size:16px;line-height:1.85;min-height:60px;letter-spacing:.02em}
.dlg.narr .dlg-text{font-family:var(--brush);font-size:17px;color:#f2ead2}
.dlg-next{position:absolute;right:16px;bottom:8px;width:30px;height:24px;animation:bob 1s infinite}
@keyframes bob{50%{transform:translateY(4px)}}
.dlg-skip{position:absolute;right:8px;top:calc(env(safe-area-inset-top) + 72px);width:64px;height:64px}
.dlg.choosing .dlg-next,.dlg.choosing .dlg-skip{display:none}
.dlg-choices{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.opt{height:50px;padding:0 30px;font-size:16px;color:#1d3a2c;font-weight:600;border:0 solid transparent;border-image:var(--opt-bg) 0 40 fill/0 24px;text-align:center}
.opt:hover,.opt:focus-visible{border-image-source:var(--opt-hi)}

/* ---------------- 夢境章節 ---------------- */
.chap{display:flex;align-items:center;gap:10px;padding:10px 14px;text-align:left;min-height:64px;border:0 solid transparent;border-image:var(--list-yellow) 30 fill/18px}
.chap.cur{filter:drop-shadow(0 0 4px rgba(231,181,74,.9))}
.chap.lock{filter:grayscale(1);opacity:.6}
.chap .no{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--jade2);color:#fff;font-family:var(--brush);font-size:20px;flex:none}
.chap .ct{flex:1;min-width:0}.chap .cn{font-family:var(--brush);font-size:17px;font-weight:700}.chap .cs{font-size:12px;color:var(--ink2)}
.chap .st{font-size:12px;color:#7b5c22;white-space:nowrap}

/* ---------------- 頭像 ---------------- */
.med{position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;background:#26453a;border:3px solid #8a9a7c;flex:none}
.med.sm{width:44px;height:44px;border-width:2px}
.med-img{width:100%;transform:scale(1.35) translateY(8%);transform-origin:50% 15%}
.med.r-SR{border-color:#a777e0}.med.r-SSR{border-color:#f0c050;box-shadow:0 0 8px rgba(240,192,80,.7)}

/* ---------------- 夥伴 ---------------- */
.fc-big{display:flex;align-items:center;font-weight:700;color:#9c5a12;font-size:18px}.fc-big i{width:36px;height:36px}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slot{position:relative;aspect-ratio:3/4;border-radius:8px;border:2px dashed #b8a882;display:grid;place-items:center;color:#9a8c6c;font-size:13px;overflow:hidden;background:rgba(255,255,255,.35)}
.slot.filled{border:2px solid #c9a75a;background:linear-gradient(#3c5e50,#1d3329)}
.slot-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.slot-name{position:absolute;left:0;right:0;bottom:0;padding:2px 0;background:rgba(0,0,0,.6);color:#fff;font-size:12px;text-align:center}
.heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hcard{position:relative;aspect-ratio:158/244;border-radius:8px;overflow:hidden;background:#38485a;border:2px solid #7b8798;text-align:left;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.hcard.r-SR{background:linear-gradient(#6f4c9c,#2c1e45);border-color:#a777e0}
.hcard.r-SSR{background:linear-gradient(#c0882e,#4d2e0c);border-color:#f0c050}
.hcard.r-R{background:linear-gradient(#3e6f8f,#1b3142);border-color:#7fb0d0}
.hcard.in{outline:3px solid #6fd39a;outline-offset:-3px}
.hc-art{position:absolute;inset:0}.hc-art img{width:100%;height:100%;object-fit:cover}
.hcard .rar{position:absolute;left:4px;top:4px}
.rar{display:inline-block;padding:1px 6px;border-radius:4px;font-size:11px;font-weight:800;color:#fff;background:#4e7fa0;letter-spacing:.04em}
.rar.SR{background:#8b5ab8}.rar.SSR{background:linear-gradient(90deg,#e9a830,#d1761b)}
.hcard .stars{position:absolute;right:3px;top:4px;display:flex}.stars i{width:13px;height:13px}
.hcard .lv{position:absolute;left:4px;bottom:34px;font-size:11px;color:#fff;text-shadow:0 1px 2px #000;font-weight:700}
.hcard .nm{position:absolute;left:0;right:0;bottom:15px;text-align:center;font-family:var(--brush);font-size:15px;color:#fff;text-shadow:0 1px 3px #000}
.hcard .rl{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:11px;color:#ffe7a6}
.hcard .nm,.hcard .rl{background:linear-gradient(transparent,rgba(0,0,0,.5))}
.in-tag{position:absolute;right:0;bottom:36px;padding:1px 6px;background:#2f9a55;color:#fff;font-size:11px;border-radius:4px 0 0 4px}
.sheet-art{position:relative;height:300px;margin:-8px -6px 6px;border-radius:8px;overflow:hidden;background:radial-gradient(circle at 50% 70%,#f6e9c8,#c9b28a)}
.sheet.r-SSR .sheet-art{background:radial-gradient(circle at 50% 70%,#ffe9b0,#c98a2c)}
.sheet.r-SR .sheet-art{background:radial-gradient(circle at 50% 70%,#eadcff,#8b6ab8)}
.sheet-art img{position:absolute;left:50%;bottom:-6px;height:118%;transform:translateX(-50%)}
.sheet-name{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:16px;background:rgba(0,0,0,.55);color:#fff}
.sheet-name b{font-family:var(--brush);font-size:20px}
.desc small{color:var(--ink2);font-size:12px}
.attrs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;border:0 solid transparent;border-image:var(--inner) 16 fill/10px}
.attrs div{display:flex;flex-direction:column;align-items:center;font-size:12px;color:var(--ink2)}
.attrs i{width:22px;height:22px}.attrs b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.frag{margin:10px 0;font-size:13px}.frag small{color:var(--ink2)}

/* ---------------- 結緣 ---------------- */
.gacha-page{padding-top:10px}
.banner{position:relative;height:330px;margin:0 -8px;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#fbe9c8,#e4c690 55%,#b07a3c)}
.banner-art{position:absolute;right:-46px;bottom:40px;height:100%;width:58%;z-index:0}
.banner-art img{height:100%;width:100%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 6px 10px rgba(80,40,0,.4))}
.banner-info{position:absolute;left:12px;top:12px;width:56%;z-index:1;text-shadow:0 0 6px #fbe9c8,0 0 3px #fbe9c8}
.banner-tab{width:110px;height:34px}
.banner-info h2{font-size:26px;color:#5a2f08;margin:4px 0}
.banner-info p{font-size:13px;line-height:1.65;color:#5d4024;margin:4px 0}
.rates{font-size:12px;color:#7b4c12;font-weight:700}
.banner-pick{margin-top:6px;font-size:12px;color:#5d4024}
.pity-wrap{position:absolute;z-index:1;left:12px;right:12px;bottom:78px;text-shadow:0 0 4px #fbe9c8;display:grid;grid-template-columns:1fr auto;gap:2px 6px;font-size:12px;color:#5a2f08;font-weight:600}
.pity-wrap .bar{grid-column:1/3}
.gacha-btns{position:absolute;z-index:1;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:16px}
.gbtn{display:flex;flex-direction:column;align-items:center}
.gbtn>i{width:150px;height:48px}
.gbtn span{display:flex;align-items:center;gap:2px;font-weight:700;color:#4a2a0c;font-size:13px;margin-top:-2px;background:rgba(255,255,255,.6);padding:0 8px;border-radius:10px}
.gacha-res{margin-top:12px;min-height:60px}
.pulls{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pull{position:relative;aspect-ratio:158/244;perspective:600px}
.pull>div{position:absolute;inset:0;backface-visibility:hidden;transition:transform .45s;transform-style:preserve-3d}
.pull-back{transform:rotateY(0)}
.pull-front{transform:rotateY(180deg)}
.pull.flipped .pull-back{transform:rotateY(-180deg)}
.pull.flipped .pull-front{transform:rotateY(0)}
.pull .hcard{width:100%;height:100%;font-size:10px}
.pull .hcard .nm{font-size:12px}.pull .hcard .rl,.pull .hcard .lv,.pull .hcard .stars{display:none}
.pull-tag{position:absolute;right:0;top:20px;padding:0 4px;font-size:10px;background:rgba(0,0,0,.6);color:#fff;border-radius:3px 0 0 3px}
.pull.r-SSR.flipped{filter:drop-shadow(0 0 8px #ffd36a)}
.pool{display:flex;flex-wrap:wrap;gap:8px}
.pool-i{display:flex;flex-direction:column;align-items:center;font-size:11px;width:52px;text-align:center}
.pool-i.no{opacity:.4;filter:grayscale(.7)}

/* ---------------- 迷宮 ---------------- */
.maze-page{background:none}
.layer{font-family:var(--brush);color:#7b4c12;font-weight:700}
.maze{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:8px;border-radius:10px;background:linear-gradient(#21362e,#0f1d18);box-shadow:inset 0 0 20px rgba(0,0,0,.7)}
.tile{position:relative;aspect-ratio:1;border-radius:6px;display:grid;place-items:center}
.tile.open{background:linear-gradient(145deg,#8a9a7c,#5d6e58);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.tile.wall{background:linear-gradient(145deg,#3b3326,#241d14);box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
.tile.fog{background:radial-gradient(#33493f,#1a2a24);opacity:.9;box-shadow:inset 0 0 6px rgba(0,0,0,.5)}
.tile.me{background:linear-gradient(145deg,#a8d8b0,#4f9a6c);box-shadow:0 0 10px rgba(140,240,170,.8)}
.tile i{width:86%;height:86%}
.me-head{width:84%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid #fff}
.me-head img{width:100%;transform:scale(1.4) translateY(10%)}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;font-size:12px;color:var(--ink2)}
.legend span{display:flex;align-items:center;gap:2px}.legend i{width:24px;height:24px}

/* ---------------- 客棧 ---------------- */
.inn-panel{position:absolute;left:8px;right:8px;bottom:6px;padding:14px 12px 12px;border:24px solid transparent;border-image:var(--win-paper) 40 fill/24px;transition:transform .3s}
.inn-panel.mini{transform:translateY(calc(100% - 92px))}
.inn-toggle{position:absolute;right:-6px;top:-18px;padding:2px 10px;border-radius:10px;background:rgba(14,30,24,.85);color:#e9f3e9;font-size:12px}
.till-row{display:flex;align-items:center;gap:8px;margin:-10px 0 6px}
.till-ico{width:64px;height:64px;flex:none}
.till-info{flex:1;min-width:0}
.till{font-family:var(--brush);font-size:26px;font-weight:700;color:#7b4c12;font-variant-numeric:tabular-nums}
.facs{display:flex;flex-direction:column;gap:4px}
.fac{display:flex;align-items:center;gap:8px;padding:6px 10px;border:0 solid transparent;border-image:var(--list-yellow) 30 fill/12px}
.fac .tx{flex:1;display:flex;flex-direction:column;font-size:12px;color:var(--ink2)}.fac .tx b{font-size:15px;color:var(--ink)}
.host-row{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px}
.host-row>div:first-child{flex:1;display:flex;flex-direction:column;color:var(--ink2)}.host-row b{color:var(--ink);font-size:14px}

/* ---------------- 簽到 ---------------- */
.sign{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sign div{display:flex;flex-direction:column;align-items:center;padding:6px 2px;font-size:12px;border:0 solid transparent;border-image:var(--list-green) 30 fill/10px;color:#1d3a2c}
.sign div i{width:40px;height:40px}.sign div b{font-size:12px}
.sign .done{filter:grayscale(1) opacity(.55)}
.sign .today{filter:drop-shadow(0 0 5px #f0c050)}

/* ---------------- 戰鬥 ---------------- */
.battle{position:absolute;inset:0;z-index:50;background:#0b1210;animation:fade .3s}
.battle-canvas{position:absolute;inset:0;width:100%;height:100%}
.battle-top{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 8px);display:flex;align-items:center;gap:8px;padding:0 10px}
.battle-title{position:relative;flex:1;min-width:0;height:40px;display:flex;align-items:center;justify-content:center}
.battle-title .u{position:absolute;inset:0;background-size:100% 100%}
.battle-title b{position:relative;font-family:var(--brush);font-size:18px;color:#5a2f08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 18px}
.battle-round{color:#fff;font-size:13px;text-shadow:0 1px 2px #000;white-space:nowrap}
.battle-btns{display:flex;gap:6px}
.pill{height:32px;min-width:52px;padding:0 10px;border-radius:16px;background:rgba(10,18,15,.75);color:#ffe7a6;border:1px solid rgba(231,181,74,.6);font-weight:700}
.battle-power{position:absolute;left:12px;top:calc(env(safe-area-inset-top) + 56px);color:#ffe7a6;font-size:13px;text-shadow:0 1px 2px #000}
.battle-log{position:absolute;left:8px;right:8px;bottom:calc(10px + env(safe-area-inset-bottom));max-height:96px;overflow:hidden;padding:6px 10px;border-radius:8px;background:rgba(6,12,10,.62);color:#e9f3e9;font-size:12px;line-height:1.6}
.battle-log .e{color:#ffb4a2}.battle-log .h{color:#a8f0c0}.k{color:#ffd36a;font-weight:700}
.ov-result .box.win{max-width:380px}
.result{text-align:center}
.result-title{width:240px;height:76px;margin:0 auto}
.result h2{font-size:32px;margin:4px 0}
.result.win h2{color:#b8741a}.result.lose h2{color:var(--cinna)}

/* ---------------- 特效層 / 載入 ---------------- */
.fx-layer{position:absolute;inset:0;width:100%;height:100%;z-index:80;pointer-events:none}
.loading{position:absolute;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;transition:opacity .6s}
.loading.out{opacity:0;pointer-events:none}
.loading-bg{position:absolute;inset:0;background:#1b2a24 center/cover}
.loading-box{position:relative;width:100%;padding:24px 28px calc(48px + env(safe-area-inset-bottom));text-align:center;background:linear-gradient(transparent,rgba(5,10,8,.85) 40%)}
.loading-box h1{font-family:var(--brush);font-size:46px;color:#fff;margin:0 0 16px;letter-spacing:.2em;text-shadow:0 3px 8px rgba(0,0,0,.8),0 0 20px rgba(120,220,170,.5)}
.loading-box .bar{height:8px;background:rgba(255,255,255,.2)}
.loading-box p{color:#e9f3e9;font-size:14px;margin:10px 0 0;animation:bob 1.6s infinite}
.img-missing,.ui-missing{opacity:.25}

@media (min-width:700px){ :root{--app-w:min(480px,100vw)} }
@media (max-height:700px){ .banner{height:300px} .dlg-portrait{height:56%} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

.app.in-dialog .hud,.app.in-dialog .main,.app.in-dialog .nav{opacity:0;pointer-events:none;transition:opacity .2s}

/* ---------------- 登入 ---------------- */
.login{display:flex;flex-direction:column;gap:10px;max-width:320px;margin:0 auto;cursor:default}
.login input{width:100%;height:46px;padding:0 14px;border-radius:10px;border:2px solid rgba(231,181,74,.7);background:rgba(255,250,240,.95);font-size:16px;color:var(--ink)}
.login .row.center{margin-top:4px}
.loading-box p.login-msg{min-height:20px;margin:0;color:#ffd7a0;animation:none;font-size:13px}