/* 快打之王 復刻版 — 介面樣式（依 2009 原版截圖重建，設計基準 550×620） */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; background:#2b2117; overflow:hidden;
  font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif; }
#stagefit { position:absolute; left:50%; top:50%; transform-origin:center center; }
#app { width:550px; height:620px; position:relative; background:#fdf8d8;
  background:linear-gradient(#fffbe2,#fdf3c4 40%,#fbeeb6); box-shadow:0 0 40px rgba(0,0,0,.6); }

/* ── 頂部導覽（原圖） ── */
#topnav { width:550px; height:52px; background:url(assets/ui/nav.png) no-repeat; position:relative; }
#topnav .zone { position:absolute; top:8px; height:40px; cursor:pointer; }
#topnav .zone:hover { background:rgba(255,255,255,.18); border-radius:8px 8px 0 0; }

/* ── 金色功能圖示列（原圖） ── */
#iconrow { position:absolute; right:0; top:52px; width:317px; height:62px;
  background:url(assets/ui/icons.png) no-repeat; }
#iconrow .zone { position:absolute; top:0; height:62px; width:52px; cursor:pointer; }
#iconrow .zone:hover { filter:brightness(1.15); background:rgba(255,255,160,.25); border-radius:8px; }
#logo2 { position:absolute; left:10px; top:58px; color:#e2641b; font-weight:bold; font-size:13px;
  text-shadow:1px 1px 0 #fff; }

/* ── 左側角色卡 ── */
#playercard { position:absolute; left:6px; top:118px; width:232px; bottom:6px;
  border:2px solid #e9a13b; border-radius:10px; overflow:hidden;
  background:linear-gradient(#fffce8,#fdf0c0); }
#pc-top { position:relative; height:146px; border-bottom:1px dashed #e0b25f; }
#pc-hero { position:absolute; left:0; top:2px; width:88px; height:144px;
  background:url(assets/ui/hero.png) no-repeat; background-size:cover; }
#pc-hero img { width:88px; height:144px; object-fit:contain; }
#pc-info { position:absolute; left:92px; top:6px; right:4px; font-size:11px; line-height:1.55; }
.stat-line { white-space:nowrap; }
#pc-info .guild { color:#d22; font-weight:bold; }
#pc-info a { color:#1a73c0; cursor:pointer; text-decoration:none; }
#pc-info a:hover { text-decoration:underline; }
.stat-line { display:flex; align-items:center; gap:4px; }
.ico { display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:-2px; }
.ico.heart { background:radial-gradient(circle at 35% 30%,#ff8a8a,#e01818 70%); clip-path:path("M7 13 L1.5 7 A3.4 3.4 0 0 1 7 2.6 A3.4 3.4 0 0 1 12.5 7 Z"); }
.ico.coin  { background:radial-gradient(circle at 35% 30%,#ffe98a,#e0a018 75%); border:1px solid #b07700; }
.ico.honor { background:radial-gradient(circle at 35% 30%,#ffd2f0,#c03894 75%); }
.v-hp { color:#d92b2b; font-weight:bold; } .v-gold { color:#c07c10; font-weight:bold; }
.v-honor { color:#b03890; font-weight:bold; } .v-win { color:#2e8b2e; font-weight:bold; }

/* 強壯/敏捷/速度 12 格條 */
#pc-stats { padding:6px 8px 2px; font-size:12px; }
.seg-row { display:flex; align-items:center; margin:3px 0; }
.seg-row label { width:34px; color:#7a4f12; font-weight:bold; }
.segbar { display:flex; gap:1px; margin-left:4px; }
.segbar i { width:11px; height:12px; background:#e7e3c8; border:1px solid #b9ab7e;
  border-radius:2px; }
.segbar i.on { background:linear-gradient(#b6e86e,#6cb52d); border-color:#4e8c1d; }

/* 領取獎勵木牌（原圖）＋新手牌 */
#pc-rewards { display:flex; gap:4px; padding:6px 4px; }
.plaque { position:relative; width:108px; height:46px; border-radius:8px; font-size:11px;
  background:linear-gradient(#f7df9a,#e8b75e); border:2px solid #c98c2e; color:#6b3c08;
  padding:3px 5px; }
.plaque.wood { background:#fbf2cf url(assets/ui/plaque.png) no-repeat 3px center;
  background-size:auto 38px; width:112px; }
.plaque.wood .btn-claim { top:50%; transform:translateY(-50%); bottom:auto; }
.btn-claim { position:absolute; right:6px; bottom:4px; padding:1px 10px; font-size:11px;
  color:#fff; background:linear-gradient(#9fd84e,#5aa424); border:1px solid #3f7d15;
  border-radius:9px; cursor:pointer; text-shadow:0 1px 1px rgba(0,0,0,.35); }
.btn-claim:disabled { filter:grayscale(.9); cursor:default; }
.btn-claim:not(:disabled):hover { filter:brightness(1.12); }

/* 助手 / 邀請室 */
.pc-sec { margin:4px 6px; border:1px solid #e3b76a; border-radius:8px; background:#fffdf0; }
.pc-sec h4 { background:linear-gradient(#fbe49a,#f3c45e); color:#7a4408; font-size:12px;
  padding:2px 8px; border-radius:7px 7px 0 0; }
.pc-sec .body { padding:5px 8px; font-size:11px; color:#8a6a3a; line-height:1.6; min-height:34px; }

/* ── 右側主面板 ── */
#mainpanel { position:absolute; left:244px; top:118px; right:6px; bottom:6px;
  border:2px solid #e9a13b; border-radius:10px; background:#fffce8; overflow:hidden;
  display:flex; flex-direction:column; }
#panel-banner { height:44px; background:url(assets/ui/banner.png) no-repeat center/contain #fffce8;
  position:relative; }
#panel-banner span { position:absolute; left:50%; top:50%; transform:translate(-50%,-52%);
  font-size:15px; font-weight:bold; color:#fff; text-shadow:0 0 3px #c2541a,1px 1px 0 #a33f08;
  letter-spacing:2px; white-space:nowrap; background:linear-gradient(#f6b04a,#e8821e);
  padding:3px 18px; border-radius:14px; box-shadow:0 1px 4px rgba(120,50,0,.45); }
#panel-tabs { display:flex; gap:6px; padding:4px 8px 0; }
.ptab { padding:3px 12px; font-size:12px; cursor:pointer; border:1px solid #d8a44c;
  border-bottom:none; border-radius:7px 7px 0 0; background:#f6e3ad; color:#7a4f12;
  white-space:nowrap; }
.ptab.on { background:#fffce8; font-weight:bold; color:#c05a10; }
#panel-body { flex:1; overflow-y:auto; padding:6px; }
#panel-body::-webkit-scrollbar { width:8px; }
#panel-body::-webkit-scrollbar-thumb { background:#d8a44c; border-radius:4px; }

/* 對手卡片（競技場） */
.cardgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.oppcard { border:2px solid #e9a13b; border-radius:8px; overflow:hidden; background:#fffef2;
  position:relative; }
.oppcard h5 { background:linear-gradient(#fdf08a,#f5d23e); padding:2px 6px; font-size:12px;
  color:#5f3c08; display:flex; justify-content:space-between; align-items:center; }
.oppcard h5 .hp { color:#d92b2b; font-size:11px; }
.oppcard .row { display:flex; padding:4px 6px 6px; gap:4px; }
.oppcard .meta { flex:1; font-size:10px; color:#7a4f12; line-height:1.55; }
.minibar { display:flex; gap:1px; } .minibar i { width:7px; height:7px; background:#e7e3c8;
  border:1px solid #c2b58a; border-radius:1px; } .minibar i.on { background:#7cc636; border-color:#55961c; }
.oppcard .face { width:48px; height:52px; border:1px solid #d8a44c; border-radius:6px;
  background-size:cover; background-position:center; flex:none; }
.btn { display:inline-block; padding:3px 14px; color:#fff; font-size:12px; cursor:pointer;
  background:linear-gradient(#9fd84e,#5aa424); border:1px solid #3f7d15; border-radius:10px;
  text-shadow:0 1px 1px rgba(0,0,0,.35); }
.btn:hover { filter:brightness(1.1); } .btn:active { transform:translateY(1px); }
.btn.orange { background:linear-gradient(#ffc14e,#e8842a); border-color:#b65f12; }
.btn.red { background:linear-gradient(#ff8a6a,#d8442a); border-color:#a32812; }
.btn.gray, .btn:disabled { filter:grayscale(.85); cursor:default; }
.oppcard .btn { position:absolute; right:6px; bottom:5px; padding:1px 10px; font-size:11px; }
.panel-note { font-size:11px; color:#9a7a44; padding:4px 2px; }

/* 商店 / 清單列 */
.listrow { display:flex; align-items:center; gap:8px; border:1px solid #ecd9a0;
  background:#fffef5; border-radius:8px; padding:5px 8px; margin-bottom:6px; }
.listrow .thumb { width:44px; height:44px; flex:none; border-radius:6px; border:1px solid #d8a44c;
  background:#fdf3cf center/contain no-repeat; display:flex; align-items:center; justify-content:center;
  font-size:22px; }
.listrow .thumb img { max-width:40px; max-height:40px; }
.listrow .info { flex:1; font-size:11px; color:#6b4a16; line-height:1.5; }
.listrow .info b { font-size:12px; color:#5f3404; }
.price { color:#c07c10; font-weight:bold; } .price.honor { color:#b03890; }
.owned { color:#2e8b2e; font-weight:bold; font-size:11px; }

/* 任務 */
.quest-done { opacity:.55; }

/* ── 戰鬥畫面（320×240 原生座標 ×2 顯示） ── */
#battlewrap { position:fixed; inset:0; background:#000; display:none; z-index:50; }
#battlewrap.show { display:block; }
#bstage { position:absolute; left:50%; top:50%; width:320px; height:240px;
  transform-origin:center center; background:url(assets/battle/bg.png); image-rendering:auto; }
.bunit { position:absolute; bottom:0; transition:left .35s ease-in, transform .2s; }
.bunit img { display:block; filter:drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
.bunit.flip img { transform:scaleX(-1); }
.bunit .petimg { position:absolute; }
.idle { animation:idlebob 1.6s ease-in-out infinite; }
@keyframes idlebob { 50% { transform:translateY(-2px); } }
.hpbar { position:absolute; top:8px; width:118px; height:11px; border:2px solid #1a0d04;
  border-radius:3px; background:#3a2410; box-shadow:0 0 0 1px #c8a35a; }
.hpbar .fill { height:100%; background:linear-gradient(#ffd34e,#f08c1e 60%,#d4581a);
  transition:width .3s; }
.hpbar.L { left:42px; } .hpbar.R { right:42px; } .hpbar.R .fill { float:right; }
.bava { position:absolute; top:3px; width:30px; height:30px; border-radius:50%;
  border:2px solid #e8c66a; background-color:#3a2a18; background-size:230%;
  background-position:50% 12%; box-shadow:0 0 4px #000; }
.bava.L { left:6px; } .bava.R { right:6px; }
.bname { position:absolute; top:21px; font-size:7px; color:#fff; text-shadow:1px 1px 0 #000; }
.bname.L { left:44px; } .bname.R { right:44px; }
#brack { position:absolute; left:44px; top:38px; width:80px; height:15px;
  background:url(assets/battle/rack.png) no-repeat; background-size:contain; opacity:.95; }
.dmgcube { position:absolute; padding:1px 3px; font-size:9px; font-weight:bold; color:#fff;
  background:linear-gradient(#e8442a,#a31808); border:1px solid #ffd9a0; border-radius:2px;
  animation:cubeup .8s ease-out forwards; z-index:5; }
.dmgcube.crit { background:linear-gradient(#ff9a1e,#d84808); font-size:11px; }
.dmgcube.miss { background:linear-gradient(#8a8a9a,#55556a); }
@keyframes cubeup { 0%{transform:translateY(0) scale(.6);opacity:0} 15%{opacity:1;transform:scale(1.15)}
  100%{transform:translateY(-26px) scale(1);opacity:0} }
.slashfx { position:absolute; width:40px; height:40px; pointer-events:none; z-index:4;
  background:radial-gradient(circle,#fff 8%,rgba(255,255,255,.85) 22%,rgba(190,120,255,.5) 45%,transparent 70%);
  animation:slash .35s ease-out forwards; }
@keyframes slash { 0%{transform:scale(.2) rotate(0);opacity:1} 100%{transform:scale(1.5) rotate(90deg);opacity:0} }
.panfly { position:absolute; width:18px; height:8px; z-index:4; }
.panfly::before { content:""; position:absolute; left:0; width:11px; height:8px; border-radius:50%;
  background:radial-gradient(#5a5a66,#23232c); border:1px solid #111; }
.panfly::after { content:""; position:absolute; right:0; top:3px; width:8px; height:2px; background:#3a2a14; }
.spin { animation:spin .5s linear infinite; } @keyframes spin { 100%{transform:rotate(360deg)} }
.bubble { position:absolute; max-width:120px; background:#fff; border:2px solid #333; border-radius:8px;
  padding:4px 6px; font-size:8px; color:#222; z-index:6; line-height:1.4; }
.bubble::after { content:""; position:absolute; bottom:-7px; left:18px; border:4px solid transparent;
  border-top-color:#fff; border-right-color:#fff; transform:rotate(45deg); }
#bwin { position:absolute; left:0; right:0; top:88px; text-align:center; z-index:7; display:none; }
#bwin .wname { color:#fff; font-size:13px; font-weight:bold; text-shadow:1px 1px 0 #000,0 0 6px #000; }
#bwin .wtext { font-size:24px; font-weight:900; color:#ff4f1a; letter-spacing:3px;
  text-shadow:2px 2px 0 #7a1500,0 0 10px #ffb86a; animation:winpop .6s cubic-bezier(.2,2.4,.4,1) both; }
@keyframes winpop { 0%{transform:scale(.1)} 100%{transform:scale(1)} }
#breport { position:absolute; left:0; right:0; bottom:2px; text-align:center; font-size:8px;
  color:#ffe9b0; text-shadow:1px 1px 0 #000; z-index:7; }
#bconfetti { position:absolute; inset:0; z-index:6; pointer-events:none; }
#bcontrols { position:absolute; right:8px; bottom:26px; z-index:8; display:flex; gap:6px; }
#bcontrols .btn { font-size:10px; padding:2px 8px; }
#bexit { position:absolute; left:0; right:0; bottom:-40px; text-align:center; }

/* ── 共用彈窗 ── */
.modal { position:fixed; inset:0; background:rgba(30,18,5,.55); display:none;
  align-items:center; justify-content:center; z-index:40; }
.modal.show { display:flex; }
.mbox { width:330px; max-height:78%; overflow-y:auto; background:#fffce8; border:3px solid #e9a13b;
  border-radius:12px; padding:12px; }
.mbox h3 { color:#c05a10; font-size:15px; margin-bottom:8px; text-align:center; }
.mbox .body { font-size:12px; color:#6b4a16; line-height:1.7; }
.mbox .foot { text-align:center; margin-top:10px; display:flex; gap:8px; justify-content:center; }
input.kof { border:1px solid #d8a44c; border-radius:6px; padding:4px 8px; font-size:13px;
  background:#fffef5; width:130px; text-align:center; letter-spacing:2px; }

/* toast */
#toast { position:fixed; left:50%; top:14%; transform:translateX(-50%); background:rgba(60,32,4,.92);
  color:#ffe9b0; padding:7px 18px; border-radius:18px; font-size:13px; z-index:60; display:none;
  border:1px solid #e9a13b; white-space:nowrap; }

/* ── 手機強制橫屏 ── */
#rotatehint { position:fixed; inset:0; background:#2b2117; color:#ffe9b0; z-index:70;
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:12px;
  font-size:15px; }
#rotatehint .phone { width:46px; height:78px; border:3px solid #ffe9b0; border-radius:8px;
  animation:rot 1.6s ease-in-out infinite; }
@keyframes rot { 0%,20%{transform:rotate(0)} 60%,100%{transform:rotate(90deg)} }
body.forcels #rotatehint { display:flex; }