/* fra-game 客戶端視覺 — 沿用 reference/demo_v3.html 的色系語言。
   美術全程佔位（BETA §8）：搜 🎨ART 一次補完，不動邏輯。 */
:root{
  --bg:#1b1530; --panel:#272042cc; --panel2:#322a55; --ink:#f3ecff; --muted:#a99fce;
  --fire:#ff6b4a; --wood:#5ec97a; --water:#4aa8ff; --gold:#ffd24a; --gold-d:#b8902f; --line:#473d6e;
  --hp:#54d98c; --shield:#7fd0ff; --good:#7bf0a8; --bad:#ff7d7d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Segoe UI","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  background:radial-gradient(1200px 700px at 50% -8%,#2c2350,#160f29 70%);color:var(--ink);
  min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column}

/* 🎨ART: 美術待補佔位框 */
.art-ph{display:flex;align-items:center;justify-content:center;color:var(--muted);
  background:repeating-linear-gradient(45deg,#2a2350,#2a2350 8px,#241d40 8px,#241d40 16px);
  border:1px dashed var(--line);border-radius:12px;font-size:12px}

header{padding:10px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#3a2f63,#241d40);position:sticky;top:0;z-index:10}
header h1{font-size:18px;margin:0;letter-spacing:1px}
header .tag{font-size:11px;color:var(--muted);background:#0003;padding:3px 8px;border-radius:20px;border:1px solid var(--line)}
header .right{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:13px}
.cur{display:flex;align-items:center;gap:4px;background:#0003;padding:3px 9px;border-radius:20px;border:1px solid var(--line)}

.wrap{max-width:560px;width:100%;margin:0 auto;padding:16px;flex:1}

/* 畫面切換 */
.screen{display:none;animation:fade .2s}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.btn{cursor:pointer;border:none;border-radius:12px;padding:11px 18px;font-size:15px;font-weight:700;
  color:#1b1530;background:linear-gradient(180deg,#ffe27a,#ffc24a);box-shadow:0 3px 0 #b8860040;transition:.1s}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(2px)}
.btn.ghost{background:#3a3263;color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:7px 13px;font-size:13px;border-radius:9px}
.btn.big{padding:15px 40px;font-size:18px;border-radius:16px}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
.btn.block{display:block;width:100%}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.muted{color:var(--muted)} .center{text-align:center}
.row{display:flex;gap:10px;align-items:center}
.h2{font-size:15px;font-weight:700;margin:0 0 10px;color:var(--gold)}

/* 登入（佈局只在 active 時套用，避免 id 特異性蓋過 .screen 的 display:none）*/
#screen-login.active{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;gap:18px}
#screen-login .logo{font-size:40px;font-weight:800;letter-spacing:2px;
  background:linear-gradient(180deg,#ffe27a,#ff8a4a);-webkit-background-clip:text;background-clip:text;color:transparent}
#screen-login .sub{color:var(--muted);font-size:13px;max-width:300px}

/* 主城 */
.city-hero{height:150px;border-radius:16px;margin-bottom:14px;position:relative;overflow:hidden}
.city-hero .welcome{position:absolute;left:14px;bottom:12px;font-size:13px;color:var(--ink);
  text-shadow:0 1px 4px #000a}
.bignav{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bignav .tile{cursor:pointer;border:1px solid var(--line);border-radius:14px;padding:18px 14px;text-align:center;
  background:var(--panel2);transition:.1s}
.bignav .tile:hover{filter:brightness(1.1);transform:translateY(-1px)}
.bignav .tile .ico{font-size:30px;display:block;margin-bottom:6px}

/* 英雄格 */
.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hero-cell{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:8px;text-align:center}
.hero-cell .face{font-size:30px}
.hero-cell .nm{font-size:13px;font-weight:700;margin-top:2px}
.hero-cell .meta{font-size:11px;color:var(--muted)}
.pill{display:inline-block;font-size:10px;padding:1px 7px;border-radius:20px;border:1px solid var(--line)}
.pill.fire{color:var(--fire)} .pill.wood{color:var(--wood)} .pill.water{color:var(--water)}
.locked{opacity:.35;filter:grayscale(1)}

/* 戰役關卡 */
.stage{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel2);margin-bottom:9px}
.stage .num{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;background:#0003;border:1px solid var(--line)}
.stage.clear .num{background:linear-gradient(180deg,#5ec97a,#3a8f55);color:#102}
.stage.locked{opacity:.4}
.stage .info{flex:1} .stage .info .t{font-weight:700;font-size:14px}
.stage .info .s{font-size:11px;color:var(--muted)}

/* 底部導覽 */
.tabbar{position:sticky;bottom:0;display:flex;background:linear-gradient(0deg,#241d40,#2a2350);
  border-top:1px solid var(--line);z-index:10}
.tabbar button{flex:1;background:none;border:none;color:var(--muted);padding:9px 0 11px;font-size:11px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px}
.tabbar button .ico{font-size:20px}
.tabbar button.on{color:var(--gold)}

/* 戰鬥/編隊是原生 FRA 畫面（無 iframe）；視覺由 battle.css 的 .bz 提供。
   戰鬥畫面需要比主城寬一點才擺得下雙陣盤 → 加寬這兩個畫面的容器。 */
#screen-team .bz, #screen-battle .bz{ max-width:100%; }
body:has(#screen-battle.active) .wrap,
body:has(#screen-team.active) .wrap{ max-width:920px; }

.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#000c;border:1px solid var(--line);
  padding:10px 18px;border-radius:24px;font-size:14px;z-index:50;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1}