/* PongPong 寶可夢 — Activity 版面 A「掌機雙螢幕」
   手機直式：上面是畫面、下面是操作；電腦橫式：左邊畫面、右邊操作。整個畫面不捲動、沒有捲軸。 */
:root {
  --bg: #121317;
  --shell: #1a1b20;
  --panel: #1f2127;
  --panel2: #2a2d35;
  --line: #34373f;
  --text: #f1f2f4;
  --muted: #a3a7b0;
  --accent: #5865f2;
  --good: #3ba55d;
  --warn: #f0b232;
  --bad: #ed4245;
  --gold: #f5c542;
  --r: 12px;
  --scene-sky: linear-gradient(#8fd3ff, #d7f0ff 52%, #a6dc7c 52%, #6fbf57);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
html { font-size: calc(clamp(11.5px, 1.75vh + 0.2vw, 15px) * var(--fit, 1) / var(--tz, 1)); }   /* --tz：App 被系統字體放大的倍率（app.js textZoomFix） */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* 不讓手機自動放大字 */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
body { font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Hiragino Sans", system-ui, sans-serif; line-height: 1.4; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
/* 手機版 Discord 上方會蓋一條工具列（名字、拖曳條、退出）：照 Discord 給的安全區域留白 */
:root {
  --sat: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sal: var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px));
  --sar: var(--discord-safe-area-inset-right, env(safe-area-inset-right, 0px));
}
:root.mobile { --sat: max(52px, var(--discord-safe-area-inset-top, 0px), env(safe-area-inset-top, 0px)); }
#app { height: 100dvh; overflow: hidden; box-sizing: border-box; padding: var(--sat) var(--sar) var(--sab) var(--sal); }
#shell { height: 100%; display: flex; flex-direction: column; max-width: 620px; margin: 0 auto; background: var(--shell); }
#top { flex: 0 0 53%; padding: 8px 8px 4px; min-height: 0; }
#bezel { position: relative; height: 100%; border-radius: 16px; overflow: hidden; background: #15161b; box-shadow: 0 0 0 3px #000, 0 0 0 6px #2f3138; }
/* iPhone（WebKit）：圓角＋overflow 對模糊、動畫的子元素裁不乾淨，上緣會霧霧的 → 強制裁切（2026-10-01） */
#bezel { isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
#view { position: absolute; inset: 0; overflow: hidden; }
#ctl { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#ctlc { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.55rem 0.7rem 0.45rem; overflow: hidden; }
/* 按鍵排列 B：最下排 ◀ ⌂ 💬（像 DS 的觸控螢幕下緣） */
#dock { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem 0.5rem; }
#dock[hidden] { display: none; }
#dock .dk, #dock .chat-fab { position: relative; right: auto; bottom: auto; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%;
  background: #f8f8f0; border: 3px solid #3b4a7a; color: #28304a; font-size: 1.15rem; font-weight: 900; line-height: 1;
  box-shadow: 0 0 0 2px #f8f8f0, 0 3px 8px #0007; display: flex; align-items: center; justify-content: center; }
#dock .chat-fab .ic { font-size: 1.1rem; }
#dock .chat-fab[hidden] { display: none; }
#dock { display: grid; grid-template-columns: 1fr auto 1fr; }
#dock > .dk:first-child { justify-self: start; }
#dock .dk-r { justify-self: end; display: flex; gap: 0.6rem; }
#dock .chat-fab .chat-badge { top: -6px; right: -6px; }
#ctlc [data-back] { display: none !important; }
.actions.b-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1.35fr 1fr; }
.actions.b-menu > :first-child { grid-column: 1 / -1; font-size: 1.25rem; }
.enc-note { color: #ffe37a; font-weight: 800; }
@media (orientation: landscape) and (min-aspect-ratio: 6/5) {
  #shell { flex-direction: row; max-width: none; }
  #top { flex: 0 0 58%; padding: 10px; }
  #ctlc { padding: 0.8rem 0.8rem 0.45rem 0.3rem; }
  #dock { padding: 0 0.8rem 0.7rem 0.3rem; }
}

/* ── 共用 ── */
.fill { flex: 1; min-height: 0; }
.row { display: flex; gap: 0.45rem; align-items: center; min-width: 0; }
.col { display: flex; flex-direction: column; gap: 0.45rem; min-height: 0; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.tiny { font-size: 0.75rem; }
.center { text-align: center; }
.pre { white-space: pre-line; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2, .clamp3, .clamp4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp2 { -webkit-line-clamp: 2; } .clamp3 { -webkit-line-clamp: 3; } .clamp4 { -webkit-line-clamp: 4; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 0.6rem; border-radius: 99px; background: var(--panel2); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.chip.on { background: var(--accent); }
.chip.gold { background: var(--gold); color: #222; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 0.55rem 0.75rem; min-height: 0; overflow: hidden; }
.msg { background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); padding: 0.45rem 0.75rem; min-height: 2.9em; font-weight: 700; white-space: pre-line; overflow: hidden; flex-shrink: 0; }
.msg.grow { min-height: 0; }
.bar-head { display: flex; align-items: center; gap: 0.45rem; font-weight: 800; min-height: 1.9rem; flex-shrink: 0; }
.bar-head .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; }
.hint { font-size: 0.75rem; color: var(--muted); text-align: center; flex-shrink: 0; }

button, select, input { font: inherit; color: var(--text); }
button { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.6rem; cursor: pointer; font-weight: 800;
  transition: transform .08s, filter .15s; touch-action: manipulation; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; text-align: center; line-height: 1.25; }
button:hover:not(:disabled) { filter: brightness(1.15); }
button:active:not(:disabled) { transform: scale(.96); }
button:disabled { opacity: .4; cursor: default; }
button.red { background: #e2424a; border-color: transparent; }
button.blue { background: var(--accent); border-color: transparent; }
button.green { background: var(--good); border-color: transparent; }
button.gold { background: var(--gold); border-color: transparent; color: #222; }
button.ghost { background: transparent; }
button.sm { padding: 0.25rem 0.55rem; font-size: 0.8rem; border-radius: 8px; }
button.lg { padding: 0.75rem; font-size: 1.1rem; border-radius: 14px; }
.end3 button.lg { padding: 0.75rem 0.2rem; font-size: clamp(0.78rem, 3.6vw, 1.05rem); white-space: nowrap; }   /* 結束畫面三顆：一行放得下 */
select, input { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.5rem; font-size: 0.85rem; min-width: 0; }
/* 長按不會變成選字（iPhone 要加 -webkit-）；只有輸入框、聊天訊息可以選 */
input, textarea, [contenteditable], .cb .bubble, .cb.sys, .chat-input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.grid { display: grid; gap: 0.4rem; min-height: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid.fill > * { min-height: 0; }

/* HP 條 */
.hpbar { height: 7px; border-radius: 99px; background: #0d0e11; overflow: hidden; box-shadow: 0 0 0 1px #0006 inset; flex-shrink: 0; }
.hpbar > i { display: block; height: 100%; width: 100%; background: #4ade80; border-radius: 99px; transition: width .6s ease, background-color .3s; }
.hpbar > i.mid { background: #facc15; } .hpbar > i.low { background: #f87171; }

/* 載入 */
.center-box { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 16px; }
.spinner { width: 48px; height: 48px; border-radius: 50%; position: relative; animation: spin 1s linear infinite;
  background: linear-gradient(var(--bad) 0 47%, #111 47% 53%, #eee 53%); box-shadow: 0 0 0 3px #111 inset; }
.spinner::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: #eee; box-shadow: 0 0 0 3px #111; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 畫面區的背景 */
.stage { position: absolute; inset: 0; overflow: hidden; background: var(--scene-sky); }
.stage.dark { background: radial-gradient(circle at 50% 30%, #262a3a, #121318 75%); }
.stage.pad { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; }
.night .stage:not(.dark), .night .scene { filter: brightness(.82) saturate(.9); }

/* ── 首頁 ── */
.home-stage .buddy { position: absolute; left: 50%; bottom: 30%; height: 42%; max-width: 70%; transform: translateX(-50%); object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 4px #0005); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, -5px); } }
.home-stage .plat { position: absolute; bottom: 25%; left: 25%; width: 50%; height: 11%; border-radius: 50%; background: radial-gradient(#e8f5d0, #9ccc65 68%, #0000 70%); }
.home-card { position: absolute; left: 0.6rem; right: 0.6rem; top: 0.6rem; background: #0d0f14c0; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 12px; padding: 0.45rem 0.75rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.home-card .nm { font-weight: 900; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-party { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.5rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.3rem; }
.home-party div { background: #0d0f14a0; border-radius: 8px; padding: 2px 2px 3px; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.home-party img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.home-party .hpbar { width: 90%; height: 4px; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 0.5rem; }
.menu-grid button { flex-direction: column; font-size: 1.05rem; gap: 0.1rem; }
.menu-grid button .em { font-size: 1.5rem; line-height: 1; }
.menu-grid button .sub { font-size: 0.72rem; font-weight: 600; opacity: .85; }
.menu-grid button.wide { grid-column: span 2; flex-direction: row; gap: 0.6rem; }

/* ── 地點 ── */
.locs { position: absolute; inset: 0.6rem; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.loc { position: relative; overflow: hidden; border-radius: 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0.5rem 0.8rem; text-align: left; border: 0; gap: 2px;
  background: linear-gradient(180deg, #0000 10%, #000b), var(--scene-img, none) center 75% / cover no-repeat, var(--scene-sky); animation: slidein .4s ease both; }
.loc:nth-child(2) { animation-delay: .08s; } .loc:nth-child(3) { animation-delay: .16s; }
@keyframes slidein { from { transform: translateY(18px); opacity: 0; } }
.loc .emo { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); font-size: 2.4rem; }
.loc .nm { font-size: 1.15rem; font-weight: 900; text-shadow: 0 1px 3px #000a; }
.loc .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.loc .tags span { font-size: 0.7rem; padding: 0 0.5rem; border-radius: 99px; background: #0006; font-weight: 600; }
.loc.rare { box-shadow: 0 0 0 2px var(--gold) inset, 0 0 18px #f5c54255; }
.pill { font-size: 0.72rem; padding: 0 0.5rem; border-radius: 99px; font-weight: 800; background: #0006; }
.pill.rare { background: var(--gold); color: #222; } .pill.uncommon { background: #7dd3fc; color: #0b2530; }

/* ── 翻牌 ── */
.cards { position: absolute; inset: 0.55rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 0.4rem; perspective: 800px; }
.card { position: relative; padding: 0; border: 0; background: none; min-height: 0; cursor: pointer; border-radius: 10px; }
.card:disabled { opacity: 1; cursor: default; }
.card .inner { position: absolute; inset: 0; transition: transform .55s cubic-bezier(.3,1.4,.5,1); transform-style: preserve-3d; }
.card.flipped .inner { transform: rotateY(180deg); }
.card .face { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; font-size: 0.76rem; font-weight: 800; word-break: break-word; overflow: hidden; }
.card .back { background: repeating-linear-gradient(45deg, #3b4bd8 0 8px, #4c5cf0 8px 16px); box-shadow: 0 0 0 2px #fff3 inset; }
.card .back::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(#e3353b 0 46%, #1b1b1b 46% 54%, #f4f4f4 54%); box-shadow: 0 0 0 2px #1b1b1b; }
.card .front { transform: rotateY(180deg); background: #f4f1e8; color: #222; }
.card .front .fi { display: block; font-size: 1.1rem; line-height: 1.1; }
.card .front.split { flex-direction: column; gap: 1px; }
.card .front .fn { display: block; max-width: 100%; }
.card .front.rare { background: linear-gradient(135deg, #fde68a, #fbbf24); box-shadow: 0 0 14px #fbbf24aa; }
.card .front.epic { background: linear-gradient(135deg, #f5d0fe, #c084fc); box-shadow: 0 0 16px #c084fcaa; }
.card .front.coin { background: #e9e3cf; }
.card.dim .front { filter: grayscale(.6) brightness(.65); }
.card:not(.flipped):not(:disabled):hover .inner { transform: translateY(-3px); }
.card.deal { animation: deal .5s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes deal { from { transform: translate(var(--dx), var(--dy)) rotate(-25deg) scale(.4); opacity: 0; } }
.card.pop .inner { animation: cardpop .6s ease; }
@keyframes cardpop { 50% { transform: rotateY(180deg) scale(1.15); } }
.card.won .front { animation: wonpulse 1s ease 2; }
@keyframes wonpulse { 50% { box-shadow: 0 0 0 3px #4ade80, 0 0 18px #4ade80; } }
.spark { position: absolute; pointer-events: none; font-size: 1.1rem; animation: spark .9s ease-out forwards; z-index: 5; }
@keyframes spark { to { transform: translate(var(--sx), var(--sy)) scale(.3) rotate(160deg); opacity: 0; } }
.reward-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.reward-list .chip { animation: popin .35s ease both; background: #2d3a2f; }
.reward-list .chip.rare { background: var(--gold); color: #222; }
.reward-list .chip.epic { background: #c084fc; color: #222; }
@keyframes popin { from { transform: scale(.3); opacity: 0; } }
.flyer { position: fixed; z-index: 60; pointer-events: none; font-weight: 900; font-size: 1rem; transition: transform .8s cubic-bezier(.5,-0.3,.3,1), opacity .8s; }

/* ── 猜謎 ── */
.quiz-stage { background: radial-gradient(circle at 50% 45%, #ffffff 0%, #dbe7f5 55%, #9fb6d2 100%); }
.quiz-img { position: absolute; left: 50%; top: 52%; height: 80%; aspect-ratio: 1; max-width: 86%; transform: translate(-50%, -50%); }
.quiz-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s, transform .5s; }
.quiz-img img.art { opacity: 0; transform: scale(.9); }
.quiz-img.show img.art { opacity: 1; transform: scale(1); }
.quiz-img.show img.sil { opacity: 0; }
.quiz-img.wrong { animation: shake .5s ease; }
.scan { position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(#0000, #5865f240, #0000); animation: scan 2.2s linear infinite; pointer-events: none; }
@keyframes scan { from { top: -18%; } to { top: 100%; } }
.quiz-dots { position: absolute; top: 0.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.quiz-dots i { width: 12px; height: 12px; border-radius: 50%; background: #0002; box-shadow: 0 0 0 2px #fff inset; }
.quiz-dots i.right { background: #3ba55d; } .quiz-dots i.wrong { background: #ed4245; } .quiz-dots i.now { background: #5865f2; }
.banner { position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; font-size: 1.25rem; font-weight: 900; color: #fff; padding: 0.3rem; background: linear-gradient(90deg, #0000, #000c 20%, #000c 80%, #0000); animation: banner .45s ease both; z-index: 3; }
.banner.right { color: #bbf7d0; } .banner.wrong { color: #fecaca; }
@keyframes banner { from { transform: scaleX(0); opacity: 0; } }
.opts button.right { background: var(--good); border-color: transparent; opacity: 1; }
.opts button.wrong { background: var(--bad); border-color: transparent; opacity: 1; }
.confetti { position: absolute; top: -5%; width: 8px; height: 12px; pointer-events: none; animation: fall 1.4s ease-in forwards; z-index: 4; }
@keyframes fall { to { transform: translate(var(--cx), 120vh) rotate(720deg); } }
.count-up { font-size: 1.6rem; font-weight: 900; color: var(--gold); }

/* ── 遭遇 ── */
.enc-sprite { position: absolute; left: 50%; bottom: 15%; height: 52%; max-width: 70%; transform: translateX(-50%); object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 6px #0004); animation: appear .8s ease both; }
@keyframes appear { from { transform: translateX(-20%) scale(.6); opacity: 0; filter: brightness(0); } 70% { filter: brightness(0); } to { transform: translateX(-50%); opacity: 1; } }
.enc-title { position: absolute; left: 50%; top: 0.6rem; transform: translateX(-50%); background: #000b; padding: 0.3rem 0.9rem; border-radius: 10px; font-weight: 900; text-align: center; max-width: 94%; }
.enc-title div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-plat { position: absolute; left: 22%; width: 56%; bottom: 10%; height: 12%; border-radius: 50%; background: radial-gradient(#e8f5d0, #9ccc65 68%, #0000 70%); }
.legend-glow { box-shadow: 0 0 0 3px var(--gold) inset; }

/* ── 寶可夢格子（隊伍選擇、盒子、圖鑑）── */
.cell { position: relative; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; min-width: 0; padding: 2px; overflow: hidden; touch-action: none; cursor: pointer; color: var(--text); }
.cell img { width: 100%; height: 100%; min-height: 0; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.cell .lv { position: absolute; right: 3px; bottom: 1px; font-size: 0.6rem; font-weight: 900; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.cell .no { position: absolute; left: 3px; top: 1px; font-size: 0.58rem; color: #9aa; font-weight: 700; }
.cell .mark { position: absolute; left: 2px; top: 0; font-size: 0.6rem; }
.cell .mark.shy { left: auto; right: 2px; }
/* 圖鑑大圖：有閃光的話右下角 ✨ 切換一般／閃光（2026-10-06） */
.dex-art { position: relative; width: 28%; flex: none; aspect-ratio: 1; }
.dex-art img { width: 100%; height: 100%; object-fit: contain; }
.dex-art .dex-shy { position: absolute; right: -2px; bottom: -2px; padding: 0.1rem 0.3rem; line-height: 1; opacity: 0.85; }
.dex-art .dex-shy.on { background: #f5c84c; color: #222; opacity: 1; }
.cell .mark.bud .gi { color: #ff6f9f; }                     /* 夥伴：愛心（左上，取代 ⭐） */
.cell.sel { box-shadow: 0 0 0 2px var(--gold) inset; background: #3a3522; }
.cell.empty { background: #1c1e24; border-style: dashed; cursor: default; }
.cell.empty.pick-empty { cursor: pointer; color: #5c6272; font-size: 1.6rem; font-weight: 900; }
.cell.empty.pick-empty:hover { color: #9aa3b5; border-color: #5c6272; }
.cell.faint img { filter: grayscale(1) brightness(.6); }
.cell.drop-on { box-shadow: 0 0 0 2px #4ade80 inset; background: #1d3325; }
.cell.inparty { outline: 2px solid var(--pc, #4ade80); outline-offset: -2px; }   /* 在隊伍中：外框＝現在這組隊伍的顏色（2026-10-06 使用者） */
.cell.sil img { filter: brightness(0) opacity(.5); }
.cell.unknown { color: #555; font-size: 1.1rem; font-weight: 900; }
.pcell { justify-content: space-between; padding: 0.25rem 0.35rem; }
.pcell .top { display: flex; justify-content: space-between; width: 100%; font-size: 0.7rem; font-weight: 800; gap: 4px; }
.pcell .top span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcell .top span:last-child { color: var(--muted); flex-shrink: 0; }
.pcell img { flex: 1; min-height: 0; }
.pcell .foot { width: 100%; }
.pcell .foot .n { font-size: 0.6rem; color: var(--muted); line-height: 1.2; display: flex; justify-content: space-between; gap: 4px; white-space: nowrap; }
.pcell .foot .n .lv { color: var(--text); font-weight: 800; }
.ghost-drag { position: fixed; z-index: 80; pointer-events: none; width: 64px; height: 64px; transform: translate(-50%, -60%) rotate(-6deg) scale(1.1); filter: drop-shadow(0 8px 8px #000a); }
.ghost-drag img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.drop-zone.drop-on { box-shadow: 0 0 0 2px #4ade80 inset; }

/* ── 對戰 ── */
.scene { position: absolute; inset: 0; overflow: hidden; background: var(--scene-sky); }
/* 寶可夢腳下（2026-10-10 使用者：發亮的綠色圓台很突兀）→ 只留一圈淡淡的地面影子，什麼背景都搭 */
.scene .plat { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, #0000004a, #00000030 45%, #00000012 75%, #0000 100%); }
/* 對手站的高度（2026-10-10 使用者：圓台拿掉了 → 要站在地上）：腳＝地平線（--hz，各地點不同）往下 9%；影子跟著 */
.scene .plat.foe { right: 5%; top: calc(var(--hz) + 2.5%); width: 42%; height: 13%; }
.scene .plat.me { left: 1%; bottom: 1%; width: 52%; height: 15%; }
.scene.raid .plat.foe { left: 26%; right: auto; top: calc(var(--hz) + 2%); width: 48%; height: 12%; }
.sprite { position: absolute; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.sprite img { object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 3px #0004); transform-origin: 50% 100%; max-width: none; max-height: none; }
.sprite.foe { right: 9%; bottom: calc(91% - var(--hz)); width: 34%; height: 44%; }
.sprite.me { left: 6%; bottom: 6%; width: 40%; height: 52%; }
.scene.raid .sprite.foe { left: 25%; right: auto; bottom: calc(92% - var(--hz)); width: 50%; height: 40%; }
/* 鏡頭：兩邊各一層（地板＋寶可夢），以地板中心為準放大縮小（app.js camSync） */
.scene .side { position: absolute; inset: 0; pointer-events: none; transition: transform .9s cubic-bezier(.3, 1.15, .4, 1); }
.scene .side.foe { transform-origin: 74% 48.5%; }
.scene .side.me { transform-origin: 27% 91.5%; }
.scene.dbl .side.foe { transform-origin: 70% 46.5%; }
.scene.dbl .side.me { transform-origin: 31% 92.5%; }
.scene.zoom-me .side.me { transform: translate(10%, 0) scale(1.55); }
.scene.zoom-me .side.foe { transform: translate(4%, calc(0.4 * var(--hz) - 22.4%)) scale(.6); }   /* 縮小後腳還在地平線下一點 */
.scene.zoom-foe .side.foe { transform: translate(-10%, calc(83.5% - 1.5 * var(--hz))) scale(1.5); }   /* 放大後腳在 72% */
.scene.zoom-foe .side.me { transform: translate(-6%, 2%) scale(.6); }
.scene.dbl.zoom-me .side.me { transform: translate(8%, 0) scale(1.3); }
.scene.dbl.zoom-me .side.foe { transform: translate(6%, calc(0.35 * var(--hz) - 19%)) scale(.65); }
.scene.dbl.zoom-foe .side.foe { transform: translate(-12%, calc(66.7% - 1.3 * var(--hz))) scale(1.3); }
.scene.dbl.zoom-foe .side.me { transform: translate(-6%, 2%) scale(.65); }
/* 極巨化、太晶化的光（2026-10-07 使用者：周圍有矩形邊框）：寶可夢圖被 Chrome 單獨分層畫時，濾鏡的光會被切在圖框附近 → 方框。
   改成 app.js 的 glowTrack：光先算好畫在 canvas.halo（墊在圖後面、跟著圖的動畫動），不用濾鏡。img 要 position: relative 才會蓋在 canvas 上面 */
.sprite img { position: relative; }
.halo { position: absolute; pointer-events: none; }   /* 光暈畫布（app.js glowTrack）：太晶化、極巨化、進化剪影 */
/* 變身演出 */
.sprite.dmax-charge img { animation: dmaxcharge .65s ease-in forwards; }
@keyframes dmaxcharge { to { transform: scale(.3); filter: brightness(0) invert(.3) sepia(1) saturate(8) hue-rotate(-40deg) drop-shadow(0 0 16px #f33); } }
.sprite.dmax-grow img { animation: dmaxgrow .9s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes dmaxgrow { 0% { transform: scale(.3); filter: brightness(2) drop-shadow(0 0 20px #f33); } }   /* 結尾＝app.js dmaxScale 設的大小（cubic-bezier 自帶衝過頭再回來） */
.sprite.dmax-shrink img { animation: dmaxshrink .65s ease-in forwards; }
@keyframes dmaxshrink { 30% { filter: brightness(1.8) drop-shadow(0 0 18px #f33); } 100% { transform: scale(1); } }
.dmax-burst { position: absolute; width: 60%; aspect-ratio: 1; transform: translate(-50%, -60%); border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, #ff5b5bcc 0 18%, #d6002a88 34%, #6a00ff44 52%, transparent 68%); animation: dmaxburst 1.6s ease-out forwards; }
.dmax-burst.end { background: radial-gradient(circle, #ff8a8a99 0 20%, transparent 60%); animation-duration: .9s; }
@keyframes dmaxburst { 0% { transform: translate(-50%, -60%) scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1.8); opacity: 0; } }
.scene.quake { animation: quake .12s linear 6; }
@keyframes quake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-4px, 2px); } 75% { transform: translate(4px, -2px); } }
.flash.red { background: #ff4040; }
.sprite.mega-hide img { animation: megahide .8s ease-in forwards; }
@keyframes megahide { to { filter: brightness(3) drop-shadow(0 0 20px #fff); transform: scale(.9); } }
.sprite.mega-pop img { animation: megapop .7s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes megapop { 0% { transform: scale(.8); filter: brightness(2.5); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
.mega-orb { position: absolute; width: 46%; aspect-ratio: 1; transform: translate(-50%, -62%); border-radius: 50%; pointer-events: none; z-index: 3;
  background: conic-gradient(#ff5ea8, #ffd84d, #6cf0a0, #58b7ff, #b27cff, #ff5ea8); mix-blend-mode: screen; opacity: .85;
  animation: megaorb 1.5s ease-in-out forwards; -webkit-mask: radial-gradient(circle, #000 55%, transparent 72%); mask: radial-gradient(circle, #000 55%, transparent 72%); }
@keyframes megaorb { 0% { transform: translate(-50%, -62%) scale(.2) rotate(0); opacity: 0; } 35% { opacity: .9; }
  55% { transform: translate(-50%, -62%) scale(1) rotate(200deg); opacity: .9; } 100% { transform: translate(-50%, -62%) scale(1.7) rotate(360deg); opacity: 0; } }
.sprite.tera-in img { animation: terain .75s ease-in forwards; }
@keyframes terain { to { filter: brightness(1.8) saturate(.2); transform: scale(1.05); } }   /* 不疊 drop-shadow（會被切成方框） */
.tera-shell { position: absolute; width: 40%; aspect-ratio: .87; transform: translate(-50%, -62%); pointer-events: none; z-index: 3;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(135deg, #bff6ffcc, #8fd3ff88 40%, #d9b8ffaa 70%, #ffffffcc); animation: terashell 1.3s ease-out forwards; }
@keyframes terashell { 0% { transform: translate(-50%, -62%) scale(.3); opacity: 0; } 45% { transform: translate(-50%, -62%) scale(1); opacity: .9; }
  60% { transform: translate(-50%, -62%) scale(1.05); opacity: .9; } 100% { transform: translate(-50%, -62%) scale(1.5); opacity: 0; } }
.tera-bit { position: absolute; width: 10px; height: 14px; pointer-events: none; z-index: 4; background: #cfefff;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation: terabit .8s ease-out forwards; }
@keyframes terabit { from { transform: translate(-50%, -300%); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-300% + var(--dy))) rotate(180deg); opacity: 0; } }
.tera-crown { position: absolute; transform: translate(-50%, -500%); font-size: 1.6rem; pointer-events: none; z-index: 4;
  filter: drop-shadow(0 0 8px #9ef); animation: teracrown 1.4s ease-out forwards; }
@keyframes teracrown { 0% { transform: translate(-50%, -300%) scale(.3); opacity: 0; } 30% { transform: translate(-50%, -520%) scale(1.2); opacity: 1; }
  80% { opacity: 1; } 100% { transform: translate(-50%, -560%) scale(1); opacity: 0; } }
.sprite.gone { opacity: 0; }
.hud { position: absolute; background: #fbfbf7ee; color: #222; border-radius: 10px; padding: 0.25rem 0.55rem 0.35rem; box-shadow: 0 2px 6px #0003; min-width: 0; z-index: 2; }
.hud.foe { left: 3%; top: 4%; width: 46%; }
.hud.me { right: 3%; bottom: 4%; width: 47%; }
.scene.raid .hud.foe { left: 50%; transform: translateX(-50%); width: 66%; top: 3%; }
.hud .top { display: flex; align-items: baseline; gap: 0.35rem; font-weight: 900; font-size: 0.85rem; white-space: nowrap; }
.hud .top .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hud .lv { font-size: 0.72rem; color: #555; margin-left: auto; }
.hud .hpbar { margin-top: 3px; height: 6px; }
.hud .nums { font-size: 0.72rem; text-align: right; color: #444; font-variant-numeric: tabular-nums; }
/* 能力變化 7 格（2026-10-06 使用者選 H1）：貼在名牌下緣的留白裡，名牌大小不變 */
.hud .stg7 { position: absolute; left: 0.55rem; right: 0.55rem; bottom: 1px; display: flex; gap: 2px; pointer-events: none; }
.hud .stg7[hidden] { display: none; }
.hud .stg7 i { flex: 1; height: 3px; border-radius: 2px; background: #0000001a; }
.st { font-size: 0.65rem; padding: 0 5px; border-radius: 5px; color: #fff; font-weight: 900; }
.st.brn { background: #e8703a; } .st.par { background: #d1b21a; } .st.psn, .st.tox { background: #a04ac0; }
.st.slp { background: #7b8794; } .st.frz { background: #4fb3e0; } .st.cnf { background: #c05a8a; }
.dots { display: flex; gap: 3px; margin-top: 2px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #d33; box-shadow: 0 0 0 1px #0003 inset; }
.dots i.out { background: #999; }
/* 天氣、場地（2026-10-10 使用者：放在下面中間會壓到寶可夢和血條）→ 右上角，一個一個小標籤 */
.field { position: absolute; top: 2.5%; right: 2.5%; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; z-index: 2; pointer-events: none; }
.field span { font-size: 0.66rem; line-height: 1.5; background: #0b0f18b0; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #fff; padding: 0 0.55rem; border-radius: 99px; white-space: nowrap; box-shadow: 0 1px 3px #0005; }
.scene.raid .field { top: 18%; }   /* 團體戰：對手名牌在上面中間 → 放在名牌下面 */
/* ── 天氣、場地特效（2026-10-03 使用者看過草稿 docs/mockups）：畫在寶可夢後面；動態效果關＝只剩顏色 ── */
.weather, .terrain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* 場地（2026-10-03 使用者：要鋪滿真正的地面）：從地平線（--hz，各地點不同）往下整片，有透視（遠的小、近的大）；兩邊的平台也發光 */
.scene { --hz: 52%; }
.scene.bg-lake { --hz: 48%; } .scene.bg-sea { --hz: 45%; } .scene.bg-gym { --hz: 44%; } .scene.bg-desert, .scene.bg-special { --hz: 50%; }
.scene.bg-cave, .scene.bg-city, .scene.bg-powerplant, .scene.bg-tomb, .scene.bg-ultraspace { --hz: 55%; } .scene.bg-skypillar, .scene.bg-space { --hz: 60%; }
.terrain { top: calc(var(--hz) - 6%); -webkit-mask: linear-gradient(#0000, #000 8%); mask: linear-gradient(#0000, #000 8%); perspective: 240px; perspective-origin: 50% 0; }
.terrain .plane { left: -80%; right: -80%; top: 0; height: 300%; transform-origin: 50% 0; transform: rotateX(64deg); }
.weather > *, .terrain > * { position: absolute; }
.wx-rain { background: linear-gradient(#1c2b4466, #1c2b4433); }
.wx-rain .drop { top: -10%; width: 1.5px; border-radius: 1px; background: linear-gradient(#cfe8ff00, #cfe8ffcc); transform: rotate(12deg); animation: wx-fall linear infinite; }
@keyframes wx-fall { to { transform: translate(-12vh, 115vh) rotate(12deg); } }
.wx-rain .splash { width: 10px; height: 3px; border: 1px solid #e6f3ffaa; border-radius: 50%; opacity: 0; animation: wx-splash .7s ease-out infinite; }
@keyframes wx-splash { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.wx-sun { background: linear-gradient(160deg, #fff1b04d, #ffb3471a 50%, #ff8a3d14); }
.wx-sun .beam { top: -6%; width: 170%; transform-origin: 0 50%; border-radius: 50%; background: linear-gradient(90deg, #fff6c800 0, #fffbe0c8 12%, #fff3c070 45%, #fff6c800 92%);
  filter: blur(3px); animation: wx-beam 4.5s ease-in-out infinite; }
@keyframes wx-beam { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
.wx-sun .speck, .ter-grassy .leaf { width: 3px; height: 3px; border-radius: 50%; background: #fffbe0; box-shadow: 0 0 5px 2px #ffe9a0; opacity: 0; animation: wx-speck linear infinite; }
@keyframes wx-speck { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(40px, 60px); opacity: 0; } }
.wx-sand { background: linear-gradient(#c9a05f66, #a77a3a55); }
.wx-sand .grain { left: 105%; height: 2px; border-radius: 2px; background: #f3d9a0; animation: wx-blow linear infinite; }
@keyframes wx-blow { to { transform: translate(-130vw, 6vh); } }
.wx-sand .haze { inset: -20%; background: radial-gradient(ellipse at 30% 50%, #e2c08a55, #0000 60%), radial-gradient(ellipse at 80% 30%, #d6ae6c44, #0000 55%); animation: wx-drift 6s ease-in-out infinite alternate; }
@keyframes wx-drift { to { transform: translateX(-40px); } }
.wx-snow { background: linear-gradient(#dfefff44, #ffffff22); }
.wx-snow .flake { top: -3%; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; animation: wx-snowfall linear infinite; }
@keyframes wx-snowfall { 25% { transform: translate(12px, 28vh); } 50% { transform: translate(-6px, 56vh); } 75% { transform: translate(10px, 84vh); } 100% { transform: translate(0, 112vh); } }
.wx-wind .gust { left: 105%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #0000, #ffffffcc, #0000); animation: wx-gust ease-in infinite; }
@keyframes wx-gust { to { transform: translateX(-140vw); } }
.ter-electric { background: linear-gradient(#ffe95c33, #ffd60a66 50%, #ffcf0099); }
.ter-electric .plane { animation: wx-grid 1.4s ease-in-out infinite alternate;
  background-image: linear-gradient(90deg, #fff6a000 46%, #fff6a0cc 50%, #fff6a000 54%), linear-gradient(#fff6a000 46%, #fff6a0aa 50%, #fff6a000 54%); background-size: 40px 40px; }
@keyframes wx-grid { from { opacity: .35; } to { opacity: .9; } }
.ter-electric .arc { overflow: visible; filter: drop-shadow(0 0 3px #fff200) drop-shadow(0 0 6px #ffd400); }
.ter-electric .arc polyline { fill: none; stroke: #fffbd0; stroke-width: 2; stroke-linejoin: round; }
.ter-grassy { background: linear-gradient(#69d16f44, #4cb85566 35%, #3a9d4a99); }
.ter-grassy .plane { background-image: radial-gradient(#6fdc7a 1.5px, #0000 2px); background-size: 14px 14px; opacity: .6; }
.ter-grassy .tuft { transform-origin: 50% 100%; }
.ter-grassy .tuft svg { display: block; transform-origin: 50% 100%; animation: wx-sway 3s ease-in-out infinite; animation-delay: inherit; }
.ter-grassy .tuft path { fill: currentColor; }
@keyframes wx-sway { 0%, 100% { transform: skewX(-6deg); } 50% { transform: skewX(8deg); } }
.ter-grassy .flower { width: 7px; height: 7px; border-radius: 50%; animation: wx-sway 3s ease-in-out infinite; }
.ter-grassy .flower::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: #ffe36b; }
.ter-misty { background: linear-gradient(#ffc8f044, #ffc8f077); }
.ter-misty .fog { width: 50%; height: 40%; border-radius: 50%; background: radial-gradient(#ffd9f4aa, #ffd9f400 70%); animation: wx-fog 7s ease-in-out infinite alternate; }
@keyframes wx-fog { to { transform: translateX(80px); } }
.ter-psychic { background: linear-gradient(#c070ff44, #b05cf277); }
.ter-psychic .plane { background: repeating-radial-gradient(circle at 50% 30%, #e2a8ff00 0 18px, #e2a8ff66 19px 21px, #e2a8ff00 22px 40px); animation: wx-grid 2s ease-in-out infinite alternate; }
.ter-psychic .ring { width: 40px; height: 12px; margin: -6px 0 0 -20px; border: 2px solid #e2a8ff; border-radius: 50%; opacity: 0; animation: wx-ring2 2.4s ease-out infinite; }
@keyframes wx-ring2 { 0% { transform: scale(calc(.3 * var(--s, 1))); opacity: .9; } 100% { transform: scale(calc(7 * var(--s, 1))); opacity: 0; } }
@keyframes wx-ring { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(9); opacity: 0; } }
/* 組隊：下面一排隊友 */
.allies { position: absolute; left: 1%; right: 1%; bottom: 1.5%; display: flex; justify-content: space-around; align-items: flex-end; gap: 1%; height: 42%; z-index: 2; }
.ally { position: relative; flex: 1; max-width: 25%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.ally .sprite { position: relative; width: 100%; height: 62%; left: auto; right: auto; top: auto; bottom: auto; }
.ally .mini { width: 100%; background: #fbfbf7ee; color: #222; border-radius: 8px; padding: 2px 5px 3px; font-size: 0.64rem; font-weight: 900; box-shadow: 0 2px 5px #0003; }
.ally .mini .r { display: flex; justify-content: space-between; gap: 3px; align-items: center; }
.ally .mini .r span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ally .mini .hpbar { height: 5px; margin-top: 2px; }
.ally.mine .mini { box-shadow: 0 0 0 2px var(--accent), 0 2px 5px #0003; }
.rdot { width: 8px; height: 8px; border-radius: 50%; background: #aaa; flex-shrink: 0; display: inline-block; }
.rdot.ok { background: #22c55e; } .rdot.wait { background: #facc15; animation: blink 1s infinite; } .rdot.down { background: #555; }
@keyframes blink { 50% { opacity: .3; } }
.ring { --p: 100; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--p) * 1%), #333 0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ring span { width: 78%; height: 78%; border-radius: 50%; background: var(--shell); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.8rem; }
.ring.idle { background: #333; }
.pstat { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; font-size: 0.74rem; font-weight: 700; min-width: 0; }
.pstat span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }

.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 0.4rem; }
.move { flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; color: #fff; border: 0; text-shadow: 0 1px 2px #0007; position: relative; padding: 0.3rem 0.6rem; }
.prep-btn { flex-direction: column; gap: 0; padding: 0.3rem 0.4rem; }
.prep-btn small { font-size: 0.68rem; font-weight: 600; opacity: .85; max-width: 100%; }
.prep-plus { position: absolute; right: 6px; top: 40%; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #3ba55d; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 #0004; }
.pcell { position: relative; }
.prep-items { gap: 0.3rem; flex-shrink: 0; }
.prep-item { flex-direction: column; gap: 0; padding: 0.25rem; font-size: 0.72rem; border: 2px solid transparent; min-width: 0; }
.prep-item.on { border-color: var(--gold); }
.prep-item .pi-img { width: 1.6rem; height: 1.6rem; object-fit: contain; image-rendering: pixelated; }
.prep-item b { font-size: 0.7rem; }
.prep-sets { gap: 0.35rem; }
.prep-set { flex-direction: column; align-items: stretch; gap: 0.2rem; padding: 0.3rem 0.45rem; border-left: 5px solid var(--pc); min-width: 0; }
.prep-set.on { outline: 2px solid var(--gold); }
.prep-set { position: relative; }
.prep-set .ps-cur { position: absolute; right: 4px; top: 4px; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--gold); color: #28304a; display: flex; align-items: center; justify-content: center; }
.prep-set .ps-cur .gi { width: 0.8rem; height: 0.8rem; }
.prep-set.on .ps-n { padding-right: 1.2rem; }
.prep-set .ps-n { display: flex; justify-content: space-between; gap: 0.3rem; font-size: 0.8rem; min-width: 0; }
.prep-set .ps-m { display: flex; gap: 2px; min-height: 1.6rem; }
.prep-set .ps-m img { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.prep-set .ps-m img.away { filter: grayscale(1); opacity: .45; }
.cat-ic { width: 1.05em; height: 1.05em; flex-shrink: 0; vertical-align: -0.15em; margin-right: 0.2em; filter: drop-shadow(0 1px 1px #0005); }
.mv-tip { position: fixed; z-index: 70; width: min(20rem, calc(100vw - 16px)); background: #fff; color: #28304a; border: 2px solid #3b4a7a; border-radius: 12px;
  padding: 0.5rem 0.65rem; box-shadow: 0 6px 18px #0006; pointer-events: none; font-size: 0.82rem; line-height: 1.45; text-shadow: none; }
.mv-tip-h { display: flex; align-items: center; gap: 0.35rem; font-size: 0.95rem; }
.mv-tip-h .cat-ic { width: 1.25em; height: 1.25em; margin: 0; filter: none; }
.mv-tip-n { font-size: 0.75rem; color: #4a5370; font-weight: 700; margin: 0.15rem 0; }
.mv-tip-d { font-weight: 600; }
.mv-tip-e { font-size: 0.75rem; color: #2d6cc0; font-weight: 800; margin-top: 0.2rem; }
.move .t { font-size: 0.72rem; opacity: .92; font-weight: 700; }
.move .se { position: absolute; right: 8px; top: 6px; }
.move .pp { position: absolute; right: 8px; bottom: 5px; font-size: 0.62rem; font-weight: 800; opacity: .9; }
.move .pp.low { color: #fde68a; }
.move .pp.out { color: #fca5a5; }
.move .nm { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* 動畫 */
.lunge-me { animation: lunge-me .38s ease; }
.lunge-foe { animation: lunge-foe .38s ease; }
@keyframes lunge-me { 45% { transform: translate(22%, -16%); } }
@keyframes lunge-foe { 45% { transform: translate(-22%, 16%); } }
.scene.raid .lunge-foe { animation-name: lunge-down; }
@keyframes lunge-down { 45% { transform: translate(0, 12%) scale(1.05); } }
.hit { animation: hit .5s steps(1), shake .5s ease; }
@keyframes hit { 0%, 40%, 80% { opacity: .15; } 20%, 60%, 100% { opacity: 1; } }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.faint img { animation: faint .6s ease forwards; }
@keyframes faint { to { transform: translateY(45%); opacity: 0; } }
.enter-me img { animation: enter-me .45s ease; }
.enter-foe img { animation: enter-foe .45s ease; }
@keyframes enter-me { from { transform: translateX(-120%); opacity: 0; } }
@keyframes enter-foe { from { transform: translateX(120%); opacity: 0; } }
.exit img { animation: exit .35s ease forwards; }
@keyframes exit { to { transform: scale(.2); opacity: 0; filter: brightness(3); } }
.glow img { animation: glow 1s ease; }
@keyframes glow { 30% { filter: brightness(2.5) drop-shadow(0 0 18px #fff); transform: scale(1.1); } }
.heal-fx img { animation: healfx .8s ease; }
@keyframes healfx { 40% { filter: drop-shadow(0 0 12px #5f5) brightness(1.3); } }
.flash { position: absolute; inset: 0; background: #fff; pointer-events: none; animation: flash .35s ease forwards; z-index: 6; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
.burst { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(.2); animation: burst .45s ease-out forwards; mix-blend-mode: screen; z-index: 5; }
@keyframes burst { 60% { opacity: .95; } to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
.arrows { position: absolute; pointer-events: none; font-size: 1.5rem; font-weight: 900; animation: arrows .9s ease forwards; text-shadow: 0 0 6px #fff; z-index: 5; }
.dmgnum { position: absolute; pointer-events: none; z-index: 6; margin-top: -2.2rem; line-height: 0; animation: dmgnum 1.1s ease-out forwards; }
.dmgnum svg { display: block; height: 1.9rem; width: auto; }        /* 像素數字（pixelText）：一格＝高度的 1/10 */
.dmgnum.super svg { height: 2.4rem; }
.dmgnum.weak svg { height: 1.45rem; }
.dmgnum.minor svg { height: 1.3rem; }
@keyframes dmgnum { 0% { transform: translate(-50%, 0) scale(.5); opacity: 0; } 15% { transform: translate(-50%, -40%) scale(1.2); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -140%); opacity: 0; } }
.arrows.up { color: #ff6b3d; } .arrows.down { color: #3d8bff; animation-name: arrows-down; }
@keyframes arrows { from { transform: translateY(20px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }
@keyframes arrows-down { from { transform: translateY(-20px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(30px); opacity: 0; } }

/* 精靈球 */
.ball { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; z-index: 5;
  background: linear-gradient(var(--ball-top, #e3353b) 0 46%, #1b1b1b 46% 54%, #f4f4f4 54%); box-shadow: 0 0 0 2px #1b1b1b inset, 0 3px 6px #0005; }
.ball::after { content: ""; position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: #f4f4f4; box-shadow: 0 0 0 2px #1b1b1b; }
.ball.great { --ball-top: #2f7bea; } .ball.ultra { --ball-top: #2b2b2b; } .ball.master { --ball-top: #8a3fd1; }
.ball.quick { --ball-top: #2fa8e6; } .ball.premier { --ball-top: #f2f2f2; }
.ft-panel { align-items: center; justify-content: center; gap: 0.6rem; text-align: center; }
.ft-icon { position: relative; width: 3.2rem; }
.cell .evo-up { position: absolute; right: 2px; bottom: 0; font-size: 0.6rem; color: #7ee787; font-weight: 900; text-shadow: 0 0 3px #000; }
/* 進化演出 */
.evo-ov { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 1rem; background: radial-gradient(circle at 50% 40%, #23305a, #06080f 70%); }
.evo-stage { position: relative; width: min(70vw, 42vh); aspect-ratio: 1; }
.evo-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated;
  transition: opacity .08s linear, transform .12s ease; }
.evo-stage img.sil { filter: brightness(0) invert(1); }   /* 光在 app.js glowTrack 的畫布上（drop-shadow 會被切成方框，2026-10-09） */
.evo-stage img.pop { animation: evopop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes evopop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.evo-rays { position: absolute; inset: -30%; border-radius: 50%; opacity: 0; transition: opacity .6s;
  background: repeating-conic-gradient(#ffffff22 0 8deg, transparent 8deg 20deg); animation: evospin 8s linear infinite; }
.evo-stage.glow .evo-rays, .evo-stage.done .evo-rays { opacity: 1; }
@keyframes evospin { to { transform: rotate(360deg); } }
.evo-text { text-align: center; font-weight: 800; font-size: 1.05rem; white-space: pre-line; max-width: 30rem; min-height: 3em; }
.evo-btns { display: flex; gap: 0.6rem; }
.evo-btns[hidden] { display: none; }
.evo-flash { position: fixed; inset: 0; background: #fff; pointer-events: none; animation: evoflash 1s ease-out forwards; }
.evo-stage.fuse img.side { transition: opacity .15s linear, transform .5s ease; }          /* 合體／分離：左右兩隻 */
.evo-stage.fuse.moving img.side { transition: opacity .15s linear, transform 1s cubic-bezier(.5, 0, .7, 1); }
@keyframes evoflash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.ball.throw { animation: throw .7s cubic-bezier(.3,.6,.5,1) forwards; }
@keyframes throw { from { left: 12%; top: 88%; transform: rotate(0); } 50% { top: 8%; } to { left: var(--bx, 71%); top: var(--by, 36%); transform: rotate(720deg); } }
.ball.shake { animation: bshake .7s ease; left: var(--bx, 71%); top: var(--by, 36%); }
@keyframes bshake { 25% { transform: rotate(-24deg); } 60% { transform: rotate(18deg); } 100% { transform: rotate(0); } }
.ball.open { animation: bopen .4s ease forwards; left: var(--bx, 71%); top: var(--by, 36%); }
@keyframes bopen { to { transform: scale(1.4); opacity: 0; } }
.ball.caught { left: var(--bx, 71%); top: var(--by, 36%); filter: brightness(.75); }
/* 圖片版的球（2026-09-30）＋新的丟球、收服動畫 */
.ball.img { background: center / contain no-repeat; border-radius: 0; box-shadow: none; filter: drop-shadow(0 3px 3px #0006); }
.ball.img::after { display: none; }
.ball.img.px { image-rendering: pixelated; background-size: 135%; }
.ball.img:not(.throw) { left: var(--bx, 71%); top: var(--by, 36%); }
.bico .ball.img, .ft-icon .ball.img { position: static; display: block; width: 100%; height: 100%; }
.ft-icon { width: 3.4rem; height: 3.4rem; }
.ball.img.throw { animation: throw .68s cubic-bezier(.3,.6,.5,1) forwards; }
.ball.hit { animation: bhit .62s ease-out forwards; }
@keyframes bhit { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-55%) rotate(-25deg); } 100% { transform: translateY(-55%) rotate(0); } }
.ball.drop { animation: bdrop .76s ease-in forwards; }
@keyframes bdrop { 0% { transform: translateY(-55%); } 45% { transform: translateY(0); } 62% { transform: translateY(-18%); } 78% { transform: translateY(0); } 89% { transform: translateY(-6%); } 100% { transform: translateY(0); } }
.ball.wobble { animation: bwobble .9s ease; transform-origin: 50% 90%; }
@keyframes bwobble { 20% { transform: rotate(-26deg); } 45% { transform: rotate(18deg); } 65% { transform: rotate(-8deg); } 100% { transform: rotate(0); } }
.ball.click { animation: bclick .7s ease forwards; }
@keyframes bclick { 25% { transform: scale(1.18); } 100% { transform: scale(1); filter: brightness(.65) saturate(.7) drop-shadow(0 3px 3px #0006); } }
.ball.burst { animation: bopen .45s ease forwards; }
.catch-beam { position: absolute; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 4;
  background: radial-gradient(circle, #fff 0 12%, #ff6b6bcc 28%, #ff2d2d55 48%, transparent 66%); animation: beam 1s ease-out forwards; }
@keyframes beam { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
/* 收進球裡：只動 transform／opacity（iPhone 的 Safari 動畫 filter 會卡住，寶可夢就一直留在場上）；
   縮完之後 .inball 直接藏起來，不靠動畫停在最後一格 */
.sprite.suck img, .enc-sprite.suck { animation: suck .55s ease-in forwards; }
@keyframes suck { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(.85); opacity: .9; }
  100% { transform: scale(.04) translateY(70%); opacity: 0; } }
.sprite.inball img, .enc-sprite.inball { visibility: hidden; opacity: 0; animation: none; }
.catch-glow { position: absolute; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, #ffd0d0 0 20%, #ff3b3bcc 45%, transparent 70%); animation: catchglow .6s ease-in forwards; }
@keyframes catchglow { 0% { transform: translate(-50%, -50%) scale(1.3); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(.1); opacity: 0; } }
.sprite.popout img, .enc-sprite.popout { animation: popout .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes popout { from { transform: scale(.1); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.click-stars { position: absolute; transform: translate(-50%, -100%); color: #ffe37a; font-size: 1.2rem; letter-spacing: .3em; pointer-events: none; z-index: 6;
  text-shadow: 0 0 8px #fff; animation: clickstars 1.2s ease-out forwards; }
@keyframes clickstars { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1.1); } }
.stars { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-size: 1.6rem; pointer-events: none; animation: arrows 1.2s ease forwards; z-index: 6; }
.bico { position: relative; width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: inline-block; }
.bico .ball { width: 100%; }

/* 結果、首領 */
.result-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.6rem; }
.result-stage img { height: 64%; max-width: 80%; object-fit: contain; }
.result-stage.caught img { animation: glow 1.2s ease; }
.result-stage h2 { margin: 0; font-size: 1.2rem; text-shadow: 0 1px 3px #000a; }
.boss-stage { background: radial-gradient(circle at 50% 40%, #5a1f2b, #1b0f14 72%); }
.boss-stage img.boss { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); height: 60%; max-width: 86%; object-fit: contain; filter: drop-shadow(0 0 22px #ff6b8a88); }
.boss-stage .kind { position: absolute; left: 0.6rem; top: 0.6rem; }
.boss-stage .name { position: absolute; left: 0; right: 0; bottom: 0.5rem; text-align: center; font-weight: 900; font-size: 1.15rem; text-shadow: 0 2px 4px #000; padding: 0 0.5rem; }
.boss-stage .lineup { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 2.3rem; display: flex; justify-content: center; gap: 0.4rem; }
.boss-stage .lineup div { width: 17%; aspect-ratio: 1; background: #0007; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.boss-stage .lineup img { width: 90%; height: 90%; object-fit: contain; image-rendering: pixelated; }
.cands { position: absolute; inset: 0.6rem; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.cand { background: linear-gradient(135deg, #2b1d33, #1a1622); border: 1px solid #4a3858; border-radius: 12px; padding: 0.45rem 0.7rem; display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; min-height: 0; }
.cand .x { font-size: 1.25rem; font-weight: 900; color: var(--gold); }
.cand { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.cand.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(250, 204, 21, .35); }
.cand-text { font-size: clamp(0.8rem, 2.6vmin, 1rem); line-height: 1.4; color: #d9d3e3; }
.sp-text { font-size: clamp(0.85rem, 2.8vmin, 1.05rem); line-height: 1.45; }
.sp-center { display: flex; align-items: center; justify-content: center; text-align: center; }
.sp-center > div { min-width: 0; max-width: 100%; }
.room { display: flex; align-items: center; gap: 0.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.25rem 0.5rem; min-height: 0; }
.room img { width: 2.1rem; height: 2.1rem; object-fit: contain; }
.member { display: flex; align-items: center; gap: 0.45rem; background: var(--panel); border-radius: 9px; padding: 0.15rem 0.45rem; font-size: 0.8rem; font-weight: 700; min-height: 0; overflow: hidden; }
.member img { width: 1.8rem; height: 1.8rem; object-fit: contain; image-rendering: pixelated; }

/* 個體詳細 */
.mon-stage { display: flex; flex-direction: column; background: linear-gradient(160deg, #262a3a, #14151b 70%); }
.mon-stage .head { display: flex; gap: 0.6rem; align-items: center; padding: 0.5rem 0.7rem 0.2rem; min-height: 0; }
.mon-stage .head img { width: 30%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 4px #0006); }
.mon-stage .head .nm { font-weight: 900; font-size: 1.1rem; }
.mon-stage .tabs { display: flex; gap: 0.3rem; padding: 0 0.7rem; flex-shrink: 0; }
.mon-stage .body { flex: 1; min-height: 0; padding: 0.35rem 0.7rem 0.5rem; overflow: hidden; font-size: 0.8rem; display: flex; flex-direction: column; gap: 0.28rem; }
.ivgrid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.28rem 0.5rem; align-items: center; }
.ivrow { display: contents; }
.ivval { text-align: right; font-variant-numeric: tabular-nums; }
.ivval.up { color: #ff8a8a; } .ivval.down { color: #7fb2ff; }
.ivbar { display: flex; gap: 2px; } .ivbar i { flex: 1; height: 7px; border-radius: 2px; background: #333; } .ivbar i.on { background: #4ade80; }
.ivrow.best .ivbar i.on { background: var(--gold); }
.mvrow { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.45rem; border-radius: 8px; color: #fff; font-weight: 800; text-shadow: 0 1px 2px #0007; }
.hearts { color: #f472b6; letter-spacing: 1px; }
.pick-list { display: grid; gap: 0.35rem; grid-auto-rows: minmax(0, 1fr); }
.pick-list button { justify-content: flex-start; text-align: left; font-size: 0.8rem; padding: 0.25rem 0.5rem; flex-direction: column; align-items: flex-start; gap: 0; }
.pick-list button { justify-content: flex-start; overflow: hidden; }
.upd-pill { position: fixed; left: 50%; top: calc(var(--sat, 0px) + 6px); transform: translateX(-50%); z-index: 90; display: flex; align-items: center;
  background: #1f6f43; border-radius: 99px; box-shadow: 0 4px 14px #0008; animation: upd-pop .4s ease-out; max-width: calc(100vw - 32px); }
.upd-pill[hidden] { display: none; }
.upd-pill button { background: none; border: 0; box-shadow: none; color: #eafff1; font-weight: 900; font-size: 0.8rem; padding: 6px 4px 6px 12px; gap: 6px; min-height: 0; white-space: nowrap; }
.upd-pill button.x { padding: 6px 12px 6px 6px; opacity: .75; font-weight: 700; }
.upd-note { position: fixed; left: 16px; right: 16px; top: calc(var(--sat, 0px) + 44px); z-index: 89; background: #3b2f12; border: 1px solid #a8862a; color: #ffe7a3;
  border-radius: 10px; padding: 7px 10px; font-size: 0.76rem; line-height: 1.45; pointer-events: none; display: flex; align-items: flex-start; gap: 8px; }
.upd-note .t { flex: 1; min-width: 0; }
.upd-note .x { pointer-events: auto; flex: none; background: none; border: 0; box-shadow: none; color: #ffe7a3; font-weight: 900; font-size: 0.85rem;
  min-height: 0; padding: 0 2px; margin: -2px -2px 0 0; opacity: .85; }
.upd-down { position: fixed; left: 50%; top: calc(var(--sat, 0px) + 6px); transform: translateX(-50%); z-index: 91; background: #2a2d35; color: #dfe3ea; border-radius: 99px;
  padding: 6px 14px; font-size: 0.78rem; font-weight: 800; white-space: nowrap; display: flex; gap: 6px; align-items: center; box-shadow: 0 4px 14px #0008; }
.upd-down .dots::after { content: '●●●'; letter-spacing: 2px; font-size: 0.6rem; animation: upd-blink 1s steps(3) infinite; }
@keyframes upd-blink { 0% { opacity: .3; } 50% { opacity: 1; } }
@keyframes upd-pop { from { transform: translate(-50%, -8px); opacity: 0; } }
.tr-peek { gap: 0.3rem; padding: 0.45rem 0.6rem; } .tr-peek .pk-ic { width: 2.2rem; height: 2.2rem; object-fit: contain; image-rendering: pixelated; flex: none; }
.tr-peek .ivgrid { font-size: 0.74rem; gap: 0.15rem 0.5rem; }
.tr-card.viewing { border-color: var(--gold); }
.enc-ty { display: flex; justify-content: center; align-items: center; gap: 4px; font-weight: 600; margin-top: 3px; }
.pick-list button .d { font-size: 0.68rem; font-weight: 600; color: var(--muted); overflow: hidden; max-width: 100%; line-height: 1.3;
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }   /* 道具說明：格子裡放得下就換行（2026-10-03） */
.pick-list button.on { box-shadow: 0 0 0 2px var(--gold) inset; }
.bag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; min-height: 0; }
.bag-tile { position: relative; flex-direction: column; justify-content: center; gap: 1px; padding: 0.15rem 0.2rem; min-height: 0; min-width: 0; }
.bag-tile .bt-img { width: 34px; height: 34px; image-rendering: pixelated; object-fit: contain; flex-shrink: 1; min-height: 0; }
.bag-tile .bt-img.emo { font-size: 1.5rem; line-height: 34px; text-align: center; }
.bag-tile .bt-n { font-size: 0.72rem; max-width: 100%; }
.bag-tile .bt-q { position: absolute; top: 2px; right: 5px; font-size: 0.66rem; color: var(--muted); font-weight: 700; }

.err-ov { position: fixed; inset: 0; z-index: 120; background: #0009; display: flex; align-items: center; justify-content: center; padding: 16px; }
.err-card { background: #23262f; border: 1px solid #ffffff22; border-radius: 14px; padding: 14px; width: min(100%, 360px); display: flex; flex-direction: column; gap: 0.6rem; box-shadow: 0 10px 30px #0008; }
.err-t { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.05rem; }
.err-t .gi { width: 1.6em; height: 1.6em; flex-shrink: 0; }
.err-d { color: #c9ccd6; line-height: 1.55; font-size: 0.92rem; }
.err-x { color: var(--muted); font-size: 0.75rem; word-break: break-all; }
.err-code { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: #15171d; border-radius: 9px; padding: 0.35rem 0.6rem; font-size: 0.82rem; white-space: nowrap; }
.err-code b { font-family: ui-monospace, monospace; font-size: 0.95rem; letter-spacing: .06em; color: #ffd23f; user-select: all; }
.err-btns button { white-space: nowrap; }
/* 提示（2026-10-03 使用者：以前在最下面擋到返回／首頁／聊天按鈕）→ 移到上半部的圖片區，而且點得穿（不擋按鈕） */
#toast { position: fixed; left: 50%; top: calc(var(--sat, 0px) + 28%); bottom: auto; transform: translateX(-50%); pointer-events: none; background: #111e; color: #fff; padding: 0.45rem 1rem; border-radius: 10px; font-size: 0.9rem; max-width: 90vw; z-index: 90; white-space: pre-line; text-align: center; }

/* 屬性顏色 */
.ty-normal { background: #9fa19f; } .ty-fire { background: #e62829; } .ty-water { background: #2980ef; }
.ty-electric { background: #d6b400; } .ty-grass { background: #3fa129; } .ty-ice { background: #3dcef3; }
.ty-fighting { background: #ff8000; } .ty-poison { background: #9141cb; } .ty-ground { background: #915121; }
.ty-flying { background: #81b9ef; } .ty-psychic { background: #ef4179; } .ty-bug { background: #91a119; }
.ty-rock { background: #afa981; } .ty-ghost { background: #704170; } .ty-dragon { background: #5060e1; }
.ty-dark { background: #624d4e; } .ty-steel { background: #60a1b8; } .ty-fairy { background: #ef70ef; }
.ty-stellar { background: linear-gradient(90deg, #f66, #fc6, #6f6, #6cf, #c6f); }
.tchip { color: #fff; font-size: 0.68rem; font-weight: 800; padding: 0 0.45rem; border-radius: 99px; text-shadow: 0 1px 1px #0006; white-space: nowrap; }

/* 地點背景 */
.bg-grassland { --scene-sky: linear-gradient(#8fd3ff, #d7f0ff 52%, #a6dc7c 52%, #6fbf57); }
.bg-forest { --scene-sky: linear-gradient(#2f6b3a, #5aa05a 52%, #4b8a3c 52%, #2f6a2c); }
.bg-lake { --scene-sky: linear-gradient(#9ed8ff, #e0f4ff 48%, #5fb0e8 48%, #3b8fd0); }
.bg-sea { --scene-sky: linear-gradient(#7cc8ff, #cfefff 45%, #3aa0e0 45%, #f3dfa6 78%); }
.bg-cave { --scene-sky: linear-gradient(#2a2420, #4a3f36 55%, #5b4c3f 55%, #3a3029); }
.bg-city { --scene-sky: linear-gradient(#a8c8e8, #e6eef8 55%, #9aa3ad 55%, #7c858f); }
.bg-volcano { --scene-sky: linear-gradient(#4a1d12, #b3471f 52%, #5a2a1c 52%, #2e1510); }
.bg-snowmount { --scene-sky: linear-gradient(#b9d9f2, #f2f8ff 52%, #ffffff 52%, #d7e6f3); }
.bg-powerplant { --scene-sky: linear-gradient(#3b3f4a, #6b7280 55%, #8a8f99 55%, #5d626b); }
.bg-ruins { --scene-sky: linear-gradient(#d8c39a, #efe2c4 52%, #b9a27a 52%, #8f7a55); }
.bg-desert { --scene-sky: linear-gradient(#ffcf7a, #ffe9b8 50%, #e8c27a 50%, #c99a4e); }
.bg-tomb { --scene-sky: linear-gradient(#1c1a26, #3a3450 55%, #2d2a38 55%, #19171f); }
.bg-skypillar { --scene-sky: linear-gradient(#3b7bd8, #a9d4ff 60%, #c9d2dc 60%, #8e99a6); }
.bg-space { --scene-sky: radial-gradient(#fff 1px, #0000 1.5px) 0 0 / 30px 30px, linear-gradient(#050818, #1b1f4a 60%, #6b6f86 60%, #3d4052); }
.bg-ultraspace { --scene-sky: linear-gradient(#2a0f3d, #7a2f9a 55%, #3d1a52 55%, #1c0b28); }
.bg-areazero { --scene-sky: linear-gradient(#0e3b3a, #3fb8a6 52%, #6a4fb3 52%, #2e1f5c); }
.bg-special { --scene-sky: linear-gradient(#3a0f1a, #9a2a3a 50%, #4a1d22 50%, #231012); }
.bg-pvp { --scene-sky: linear-gradient(#10213f, #2d4f8f 50%, #5b4a2f 50%, #2c2418); background: var(--scene-sky); }
.pvp-stage { display: flex; align-items: center; justify-content: space-around; gap: 0.5rem; padding: 1rem; flex-direction: column; }
.pvp-vs { font-size: 2.2rem; font-weight: 900; color: #ffd84d; text-shadow: 0 3px 0 #b33, 0 0 16px #f80; letter-spacing: .1em; }
.pvp-party { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 0.2rem; width: 100%; max-width: 30rem; }   /* 6 隻排同一排（2026-09-30） */
.pvp-party img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.pvp-side { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-weight: 800; }
.pvp-side.wait { opacity: .7; }
.pvp-mons { display: flex; gap: 0.2rem; }
.pvp-mons img { width: 2.6rem; height: 2.6rem; object-fit: contain; image-rendering: pixelated; opacity: .6; }
.pvp-mons img.lead { opacity: 1; filter: drop-shadow(0 0 4px #ffd84d); }

/* 動態效果：關（設定裡的開關；沒設過就跟著手機的「減少動態效果」，app.js MOTION） */
html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }   /* 只跑一次：無限重複的（蛋晃、夥伴晃、提示燈）不然會變成狂閃（2026-10-01） */

/* ── 隊伍：回復 ── */
.cell.healed { animation: healcell 1s ease-out; }
@keyframes healcell { 30% { box-shadow: 0 0 0 3px #4ade80 inset, 0 0 22px #4ade80; background: #1d3325; } }
.floater { position: fixed; z-index: 60; pointer-events: none; font-weight: 900; transform: translateX(-50%); animation: floatup 1.3s ease-out forwards; }
.floater.minus { color: #ff8a8a; }
@keyframes floatup { to { transform: translate(-50%, -48px); opacity: 0; } }

/* ── 蛋 ── */
.egg { position: relative; width: 100%; aspect-ratio: 0.78; border-radius: 50% 50% 50% 50% / 60% 60% 42% 42%;
  background: radial-gradient(circle at 32% 28%, #fff9 0 10%, #0000 11%), radial-gradient(circle at 68% 58%, var(--eb) 0 12%, #0000 13%),
    radial-gradient(circle at 34% 72%, var(--eb) 0 9%, #0000 10%), radial-gradient(circle at 62% 24%, var(--eb) 0 7%, #0000 8%),
    linear-gradient(160deg, var(--ea), color-mix(in srgb, var(--ea) 72%, #000));
  box-shadow: inset -5px -7px 0 #0002, 0 3px 6px #0005; transform-origin: 50% 90%; }
.egg.wobble { animation: wobble 1.6s ease-in-out infinite; }
.egg.idle { animation: wobble 3.2s ease-in-out infinite; }
@keyframes wobble { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-9deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
.egg.shake1 { animation: shakeegg .6s ease-in-out; }
@keyframes shakeegg { 20% { transform: rotate(-16deg); } 45% { transform: rotate(14deg); } 70% { transform: rotate(-8deg); } 100% { transform: rotate(0); } }
.egg.dropin { animation: dropin .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes dropin { from { transform: translateY(-60%) scale(.6); opacity: 0; } }
.egg-stage { background: radial-gradient(circle at 50% 30%, #2e3550, #14161d 75%); display: flex; flex-direction: column; padding: 0.6rem; gap: 0.5rem; }
.incubator { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; }
.dome { height: 82%; aspect-ratio: 1; max-width: 70%; border-radius: 50% 50% 18% 18%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 25%, #ffffff30, #ffffff08 55%, #0000 70%), #1b2030; border: 2px solid #ffffff30; box-shadow: inset 0 -10px 20px #0006, 0 0 24px #7aa2ff30; }
.dome .egg { width: 45%; }
.ring { width: 60%; height: 8px; border-radius: 99px; background: #0007; overflow: hidden; }
.ring i { display: block; height: 100%; background: linear-gradient(90deg, #7cf, #7f9); border-radius: 99px; }
/* 孵蛋器 1–3（2026-10-04 使用者 157） */
.incs { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.inc { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  border-radius: 14px; border: 2px solid #ffffff18; background: #ffffff08; padding: 0.3rem; cursor: pointer; }
.inc.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.inc .dome { height: auto; width: 80%; max-width: 80%; max-height: 75%; }
.inc .ring { width: 80%; height: 6px; }
.inc .n { position: absolute; top: 3px; left: 7px; font-size: 0.68rem; font-weight: 900; color: #9cc8ff; }
.inc.lock { border-style: dashed; background: #0003; color: var(--muted); cursor: default; }
.inc.lock .lk { font-size: 1.4rem; }
.inc.lock .t { font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
/* 圖鑑搜尋（2026-10-04 使用者 152） */
.dex-q { display: flex; align-items: center; gap: 0.4rem; background: #0e1014; border: 2px solid #2557b5; border-radius: 10px; padding: 0.15rem 0.3rem 0.15rem 0.55rem; }
.dex-q input { flex: 1; min-width: 0; background: transparent; border: 0; color: inherit; font-size: 16px; font-weight: 700; outline: none; padding: 0.25rem 0; }
.eggbox { flex: 0 0 34%; display: grid; gap: 0.2rem; background: #0005; border-radius: 10px; padding: 0.3rem; }
.ecell { display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #ffffff0a; min-height: 0; padding: 8% 16%; }
.ecell .egg { height: 100%; width: auto; max-width: 100%; }
.ecell.empty { background: #ffffff05; }
.ecell.ready { background: #f5c54230; box-shadow: 0 0 0 1px var(--gold) inset; }
.ecell.pick { cursor: pointer; box-shadow: 0 0 0 1px #7cf inset; }
.ecell.pick:hover { background: #7cf3; }
.ecell.newegg { animation: newegg .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes newegg { from { transform: translateY(-120%) scale(1.6); } }
.candy-btn { flex-direction: column; gap: 0.1rem; }
.candy-btn .em { font-size: 1.4rem; line-height: 1; }
.candy-btn .sub { font-size: 0.75rem; opacity: .85; }
.hatch-stage { cursor: pointer; }
.typed { cursor: pointer; }
.typed > div { min-height: 1.2em; }
.hatch-stage .rays { position: absolute; inset: -50%; background: repeating-conic-gradient(#ffffff10 0 8deg, #0000 8deg 20deg); animation: spin 14s linear infinite; }
.hatch-egg { position: absolute; left: 50%; top: 50%; width: 26%; transform: translate(-50%, -50%); transform-origin: 50% 90%;
  transition: filter .6s ease, transform .45s ease; }
.hatch-stage .rays { opacity: 0; transition: opacity .8s; }
.hatch-stage.open .rays { opacity: 1; }
.hatch-egg.wob1 { animation: hwob1 .7s ease-in-out; }
.hatch-egg.wob2 { animation: hwob2 .7s ease-in-out; }
.hatch-egg.wob3 { animation: hwob3 .9s ease-in-out; }
.hatch-egg.jitter { animation: hjit .09s linear infinite; }
.hatch-egg.glow { filter: brightness(1.5) drop-shadow(0 0 14px #fff) drop-shadow(0 0 30px #ffe9a8); }
.hatch-egg.white { filter: brightness(0) invert(1) drop-shadow(0 0 30px #fff) drop-shadow(0 0 60px #fff); transform: translate(-50%, -50%) scale(1.18); animation: none; }
@keyframes hwob1 { 0%, 100% { transform: translate(-50%, -50%) rotate(0); } 30% { transform: translate(-50%, -50%) rotate(-7deg); } 70% { transform: translate(-50%, -50%) rotate(7deg); } }
@keyframes hwob2 { 0%, 100% { transform: translate(-50%, -50%) rotate(0); } 20% { transform: translate(-50%, -50%) rotate(-12deg); } 45% { transform: translate(-50%, -50%) rotate(11deg); }
  70% { transform: translate(-50%, -50%) rotate(-8deg); } 85% { transform: translate(-50%, -50%) rotate(4deg); } }
@keyframes hwob3 { 0%, 100% { transform: translate(-50%, -50%) rotate(0); } 15% { transform: translate(-50%, -56%) rotate(-18deg); } 35% { transform: translate(-50%, -50%) rotate(16deg); }
  55% { transform: translate(-50%, -54%) rotate(-14deg); } 75% { transform: translate(-50%, -50%) rotate(10deg); } }
@keyframes hjit { 0% { transform: translate(-51%, -50%) rotate(-3deg); } 50% { transform: translate(-49%, -51%) rotate(3deg); } 100% { transform: translate(-51%, -50%) rotate(-3deg); } }
.shard { position: absolute; left: 50%; top: 50%; width: 5%; aspect-ratio: 1; z-index: 5; background: #fbf6e9; pointer-events: none;
  clip-path: polygon(10% 0, 100% 30%, 70% 100%, 0 60%); animation: shardfly .8s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes shardfly { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); opacity: 0; } }
.hatch-mon.hatch-sil { z-index: 2; filter: brightness(0) invert(1) drop-shadow(0 0 20px #fff);
  animation: hatchpop .5s cubic-bezier(.3, 1.6, .5, 1), hatchsil .9s ease-out forwards; }
@keyframes hatchsil { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }
.crack { position: absolute; left: 6%; right: 6%; top: 40%; height: 16%; opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path .25s, opacity .1s; }
.crack svg { width: 100%; height: 100%; display: block; }
.crack.c1 { opacity: 1; clip-path: inset(0 45% 0 0); }
.crack.c2 { clip-path: inset(0 0 0 0); }
.whiteflash { position: absolute; inset: 0; background: #fff; animation: flash .7s ease-out forwards; z-index: 4; pointer-events: none; }
.hatch-mon, .trade-anim .got { position: absolute; left: 50%; top: 46%; height: 58%; max-width: 80%; transform: translate(-50%, -50%); object-fit: contain; animation: hatchpop .5s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 6px 10px #0008); }
@keyframes hatchpop { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
.hatch-name { position: absolute; left: 0; right: 0; bottom: 4%; z-index: 3; text-align: center; font-weight: 900; font-size: 1.3rem; text-shadow: 0 2px 6px #000; animation: banner .4s ease-out; }

/* ── 商店 ── */
.shop-stage { background: linear-gradient(180deg, #2b2233, #1a1622); }
.shop-stage .tabs { flex-wrap: nowrap; }
.shop-stage .tabs button { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0.3rem 0.2rem; font-size: 0.76rem; }   /* 照字數分寬度：「招式學習器」不被截斷 */
.ms-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; }
.ms-tabs button { white-space: nowrap; padding: 0.25rem 0.1rem; font-size: 0.76rem; }
.shop-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; min-height: 0; padding: 0.3rem;
  background: linear-gradient(160deg, #3a3044, #2a2332); border: 1px solid #54456a; border-radius: 12px; overflow: hidden; }
.shop-card.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 14px #f5c54255; }
.shop-card.owned { opacity: .6; }
.shop-card.empty { background: #ffffff06; border-style: dashed; }
.shop-card .nm { font-size: 0.72rem; max-width: 100%; }
.shop-card .pr { font-size: 0.7rem; color: var(--gold); }
.shop-card .have { position: absolute; right: 5px; top: 3px; font-size: 0.62rem; color: #cfc6dd; }
.shop-card.bought { animation: bought .6s ease-out; }
@keyframes bought { 30% { transform: scale(1.1); box-shadow: 0 0 0 3px #4ade80, 0 0 20px #4ade80; } }
.item-img { flex: 1; min-height: 0; max-height: 3.4rem; width: auto; max-width: 80%; object-fit: contain; image-rendering: pixelated; }
.item-img.emo { flex: 0 1 auto; font-size: 2rem; line-height: 1.2; }
.item-img.sm { flex: 0 0 auto; height: 2.2rem; width: 2.2rem; max-height: none; font-size: 1.5rem; }
.tm-disc { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; aspect-ratio: 1; max-height: 3.4rem; padding: 4px; }
.tm-disc.sm { flex: 0 0 auto; height: 2.4rem; }
.tm-disc .item-img { max-width: 100%; }

/* ── 交換 ── */
.trade-stage { background: radial-gradient(circle at 50% 40%, #243a4d, #121620 75%); display: flex; align-items: center; justify-content: center; gap: 2%; padding: 0.6rem; }
.tr-card { position: relative; flex: 1; height: 88%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  background: #ffffff0c; border: 1px solid #ffffff22; border-radius: 14px; padding: 0.4rem; text-align: center; }
.tr-card.mine { cursor: pointer; }
.tr-card.ok { border-color: #4ade80; box-shadow: 0 0 0 2px #4ade80, 0 0 16px #4ade8055; }
.tr-card .who { font-weight: 900; font-size: 0.85rem; max-width: 100%; }
.tr-card .spr { flex: 1; min-height: 0; max-width: 90%; object-fit: contain; image-rendering: pixelated; }
.tr-card .q { flex: 1; display: flex; align-items: center; font-size: 2.6rem; color: #ffffff40; font-weight: 900; }
.tr-card .nm { font-size: 0.8rem; font-weight: 800; max-width: 100%; }
.tr-card .evo { font-size: 0.68rem; color: #7cf; }
.tr-card .okmark { position: absolute; right: 8px; top: 6px; color: #4ade80; font-size: 1.3rem; font-weight: 900; }
.swap-arrows { font-size: 1.8rem; font-weight: 900; color: #7cf; }
.swap-arrows.wait { animation: blink 1.2s infinite; }
.trade-stage.lobby { flex-direction: column; gap: 1rem; }
.lobby-art { display: flex; align-items: center; gap: 1.2rem; }
.lobby-art .arr { font-size: 2rem; color: #7cf; animation: blink 1.4s infinite; }
.ball-a, .ball-b, .tball { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: linear-gradient(#e2424a 0 46%, #111 46% 54%, #eee 54%); box-shadow: 0 0 0 3px #111 inset, 0 4px 10px #0007; position: relative; }
.ball-a::after, .ball-b::after, .tball::after { content: ""; position: absolute; inset: 37%; border-radius: 50%; background: #eee; box-shadow: 0 0 0 3px #111; }
.ball-a { animation: ballbob 2s ease-in-out infinite; }
.ball-b { animation: ballbob 2s ease-in-out infinite .5s; }
@keyframes ballbob { 50% { transform: translateY(-8px); } }
.lobby-text { max-width: 80%; text-align: center; color: #cfd8e8; font-size: 0.9rem; }
.dots { color: #7cf; letter-spacing: 4px; animation: blink 1s infinite; margin-bottom: 0.3rem; }
.room.invite { border-color: var(--gold); background: #3a3522; }
.room .em { font-size: 1.3rem; }
.trade-anim { cursor: pointer; }
.trade-anim .give { position: absolute; left: 50%; top: 45%; height: 50%; transform: translate(-50%, -50%); object-fit: contain; image-rendering: pixelated; transition: transform .5s, opacity .5s; }
.trade-anim .give.away { transform: translate(-50%, -50%) scale(.1); opacity: 0; }
.trade-anim .tball { position: absolute; top: 45%; opacity: 0; width: 2.6rem; height: 2.6rem; }
.trade-anim .tball.a { left: 10%; }
.trade-anim .tball.b { right: 10%; }
.trade-anim.go .tball.a { animation: crossA 1.4s ease-in-out forwards; }
.trade-anim.go .tball.b { animation: crossB 1.4s ease-in-out forwards; }
@keyframes crossA { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 50% { transform: translate(35vw, -30%) rotate(360deg); } 100% { opacity: 0; transform: translate(70vw, 0) rotate(720deg); } }
@keyframes crossB { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 50% { transform: translate(-35vw, 30%) rotate(-360deg); } 100% { opacity: 0; transform: translate(-70vw, 0) rotate(-720deg); } }

.shop-card > .item-img { flex: 0 1 auto; width: 52%; height: auto; max-height: 58%; }
.shop-card > .item-img.emo { width: auto; font-size: 2.4rem; }
.shop-card .tm-disc { flex: 0 1 auto; width: 52%; height: auto; max-height: 58%; }
.shop-card .tm-disc .item-img { width: 100%; height: auto; max-height: none; }

/* 首頁選單 8 格（2×4）：圖示在左、文字在右，矮的時候也放得下 */
.menu-grid button { flex-direction: row; justify-content: flex-start; gap: 0.45rem; padding: 0.3rem 0.7rem 0.3rem 0.35rem; text-align: left; }   /* 左邊圖示靠左一點（2026-09-30 使用者） */
.menu-grid button .em { font-size: 1.45rem; }
.menu-grid button .sub { margin-left: auto; }
.menu-grid button .sub.dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #ffe066; opacity: 1;
  box-shadow: 0 0 0 2px #fff8, 0 0 6px #ffe066; animation: readyDot 1.6s ease-in-out infinite; }
@keyframes readyDot { 50% { transform: scale(.7); box-shadow: 0 0 0 2px #fff4, 0 0 2px #ffe066; } }

/* 子母畫面：#app 用固定的大尺寸排版再縮小（見 app.js fitWindow） */
html.scaled { font-size: calc(14px * var(--fit, 1) / var(--tz, 1)); }
html.scaled #app { position: absolute; padding: 0; }
@media (orientation: landscape) and (min-aspect-ratio: 6/5) { html.scaled #app #shell { max-width: none; } }

/* ── 聊天室：外框是遊戲文字框（白底、深藍雙線框），裡面是泡泡對話（自己右邊綠色、別人左邊） ── */
#app { position: relative; }
.chat-fab { position: absolute; z-index: 81; right: calc(var(--sar) + 10px); bottom: calc(var(--sab) + 10px); width: 2.9rem; height: 2.9rem; padding: 0;
  background: #f8f8f0; border: 3px solid #3b4a7a; border-radius: 12px; box-shadow: 0 0 0 2px #f8f8f0, 0 4px 12px #0008; }
.chat-fab .ic { font-size: 1.35rem; line-height: 1; }
.chat-fab.bump { animation: chatbump .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes chatbump { 30% { transform: translateY(-8px) scale(1.12); } }
.chat-badge { position: absolute; top: -8px; right: -8px; min-width: 1.3rem; height: 1.3rem; padding: 0 4px; border-radius: 99px; background: var(--bad);
  color: #fff; font-size: 0.75rem; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #f8f8f0; }
.chat-fab[hidden], .chat-box[hidden], .chat-badge[hidden], .chat-cmds[hidden] { display: none; }
.chat-box { position: absolute; z-index: 80; top: var(--sat); right: var(--sar); bottom: var(--sab);
  width: min(calc(100% - var(--sal) - var(--sar)), 28rem); display: flex; flex-direction: column; gap: 0.4rem; padding: 0.55rem 0.65rem 0.6rem; color: #28304a;
  background: #f8f8f0; border: 5px double #3b4a7a; border-right: none; border-radius: 16px 0 0 16px; box-shadow: -10px 0 30px #0009;
  animation: chatin .25s ease-out; }
@media (orientation: landscape) and (min-aspect-ratio: 6/5) { .chat-box { width: min(42%, 30rem); } }
@keyframes chatin { from { transform: translateX(100%); } }
.chat-head { display: flex; align-items: center; gap: 0.4rem; font-weight: 900; font-size: 1rem; flex-shrink: 0; }
.chat-head .em { font-size: 1.1rem; }
.chat-nav { background: #e6e8ef; color: #3b4a7a; border: 2px solid #3b4a7a; border-radius: 8px; padding: 0.1rem 0.55rem; font-size: 0.85rem; }
.chat-nav.x { background: #3b4a7a; color: #f8f8f0; }
.chat-people { display: flex; flex-wrap: wrap; gap: 0.3rem; flex-shrink: 0; max-height: 3.6rem; overflow: hidden; }
.pchip { background: #e3e7f0; color: #28304a; border-radius: 99px; padding: 0.05rem 0.55rem; font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.pchip.me { box-shadow: 0 0 0 2px #3ba55d inset; }
.pchip.owner { background: #fbe7a6; }
.pchip.admin { background: #d7e4ff; }
.chat-mid { position: relative; flex: 1; min-height: 0; display: flex; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.4rem;
  border-top: 2px solid #3b4a7a33; padding: 0.4rem 0.1rem 0.2rem; touch-action: pan-y; }
.chat-list > :first-child { margin-top: auto; }
.chat-down { position: absolute; left: 50%; bottom: 0.4rem; transform: translateX(-50%); background: #3b4a7a; color: #f8f8f0; border: none;
  border-radius: 99px; padding: 0.2rem 0.8rem; font-size: 0.75rem; box-shadow: 0 3px 8px #0005; }
.chat-down[hidden] { display: none; }
.chat-empty { text-align: center; color: #7a8198; font-weight: 700; padding: 1rem 0; }
.cb { display: flex; flex-direction: column; max-width: 82%; flex-shrink: 0; }
.cb.them { align-self: flex-start; align-items: flex-start; }
.cb.me { align-self: flex-end; align-items: flex-end; }
.cb .who { font-size: 0.72rem; font-weight: 800; color: #6a7390; margin: 0 0.4rem 1px; }
.cb .bubble { padding: 0.3rem 0.7rem; border-radius: 14px; font-size: 0.95rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; user-select: text; }
.cb.them .bubble { background: #e3e7f0; color: #28304a; border-bottom-left-radius: 4px; }
.cb.me .bubble { background: #3ba55d; color: #fff; border-bottom-right-radius: 4px; }
.cb.sys { align-self: center; max-width: 96%; background: #eef1f8; border: 2px dashed #3b4a7a88; border-radius: 10px; padding: 0.3rem 0.6rem;
  font-size: 0.85rem; font-weight: 700; color: #28304a; user-select: text; overflow-wrap: anywhere; }
.cb.sys .tag { font-size: 0.68rem; color: #6a7390; margin-bottom: 1px; }
/* 指令按鈕：固定顯示兩行，多的用滾輪／手指上下滑（沒有邊框的小區塊） */
.chat-cmds { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.3rem; flex-shrink: 0; max-height: calc(3.5rem + 4px); padding: 2px 1px;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.chat-cmd { height: 1.6rem; background: #fff; color: #28304a; border: 2px solid #3b4a7a; border-radius: 8px; padding: 0 0.45rem; font-size: 0.75rem; font-weight: 700; gap: 0.3rem; flex-shrink: 0; }
.chat-cmd b { color: #2d6cc0; }
.chat-foot { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; border-top: 2px solid #3b4a7a; padding-top: 0.45rem; }
.chat-input { flex: 1; min-width: 0; background: #fff; color: #28304a; border: 2px solid #3b4a7a55; border-radius: 10px; padding: 0.4rem 0.6rem; font-size: 0.95rem;
  user-select: text; outline: none; }
.chat-input:focus { border-color: #3b4a7a; }
.chat-input::placeholder { color: #8a8f9e; }
.chat-send { background: #3b4a7a; color: #f8f8f0; border: none; border-radius: 10px; padding: 0.4rem 0.8rem; }

/* 經驗條（我方血條下面） */
.expbar { height: 4px; margin-top: 3px; border-radius: 99px; background: #0d0e11; overflow: hidden; box-shadow: 0 0 0 1px #0006 inset; }
.expbar[hidden] { display: none; }
.expbar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3b9cff, #5fd0ff); border-radius: 99px; transition: width .6s ease; }
.expbar.max > i { background: linear-gradient(90deg, #f5c542, #ffe28a); }
.mini .expbar { height: 3px; margin-top: 2px; }

/* 盒子：多選、我的排列 */
.cell.dim { opacity: .28; }
.cell.picked { box-shadow: 0 0 0 2px #4aa3ff inset, 0 0 10px #4aa3ff88; background: #1d3350; }
.cell .tick { position: absolute; left: 3px; top: 1px; font-size: 0.7rem; font-weight: 900; color: #7cc4ff; }
.stage.multi .cell:not(.empty) { cursor: pointer; }
.multi-btn { background: #2b3550; border-color: #4aa3ff66; }
.multi-panel { min-height: 3.2rem; justify-content: center; }
.multi-icons { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.multi-icons img { width: 1.9rem; height: 1.9rem; object-fit: contain; image-rendering: pixelated; }
.multi-acts button { padding: 0.65rem 0.5rem; }
/* 最下面一列：右邊留給聊天按鈕 */
.fab-gap { margin-right: 0; }          /* 以前右下角有聊天按鈕要讓位；按鍵排列 B 之後聊天在最下排 */

/* 對手名字後面的寶貝球（灰色＝遇過沒抓到；紅白＝已經收錄） */
.dexball { flex-shrink: 0; width: 0.8rem; height: 0.8rem; border-radius: 50%; align-self: center; position: relative;
  background: linear-gradient(#e2424a 0 44%, #222 44% 56%, #f4f4f4 56%); box-shadow: 0 0 0 1.5px #222 inset; }
.dexball::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: #f4f4f4; box-shadow: 0 0 0 1.5px #222; }
.dexball.seen { background: linear-gradient(#a9adb5 0 44%, #555 44% 56%, #d9dbe0 56%); box-shadow: 0 0 0 1.5px #555 inset; }
.dexball.seen::after { background: #d9dbe0; box-shadow: 0 0 0 1.5px #555; }
.dexball[hidden] { display: none; }
/* 變身：發光、晶體閃爍 → 換圖 → 收光 */
.formchange img { animation: formchange .75s ease-in forwards; }
@keyframes formchange {
  0% { filter: none; transform: scale(1); }
  40% { filter: brightness(1.8) saturate(2) hue-rotate(90deg) drop-shadow(0 0 12px #7cf); transform: scale(1.05); }
  100% { filter: brightness(4) drop-shadow(0 0 26px #fff) drop-shadow(0 0 40px #9ef); transform: scale(1.15); }
}
.formdone img { animation: formdone .7s ease-out; }
@keyframes formdone { 0% { filter: brightness(4) drop-shadow(0 0 30px #fff); transform: scale(1.15); } 100% { filter: none; transform: scale(1); } }
/* 亂流（德爾塔氣流） */


/* 個人資料：訓練家卡片 */
.pf-stage { background: #1b1f33; padding: 0.6rem; display: flex; }
.pf-card { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem 1rem; border-radius: 18px;
  background: linear-gradient(135deg, #2c2f6e, #3c3489 55%, #4a3a8f); border: 3px solid #fac775; color: #eeedfe; overflow: hidden; }
.pf-label { color: #fac775; font-weight: 900; font-size: 0.85rem; letter-spacing: 0.05em; }
.pf-main { flex: 1; min-height: 0; display: flex; gap: 1rem; align-items: center; }
.pf-avatar { width: min(36%, 13rem); aspect-ratio: 1; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 3px solid #afa9ec; background: #534ab7; box-shadow: 0 0 0 5px #ffffff14; }
.pf-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.pf-name { font-size: 1.9rem; font-weight: 900; max-width: 100%; line-height: 1.15; }
.pf-title { background: #fac775; color: #412402; border-radius: 99px; padding: 1px 0.7rem; font-size: 0.8rem; font-weight: 800; }
.pf-dex { font-size: 0.85rem; color: #cecbf6; margin-top: 0.15rem; }
.pf-bar { width: 100%; height: 7px; border-radius: 4px; background: #534ab7; overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: #5dcaa5; border-radius: 4px; }
.pf-badges { display: flex; gap: 0.4rem; margin-top: 0.15rem; }
.pf-badge { width: 3rem; height: 3rem; }
.pf-badge.empty { border-radius: 50%; border: 2px dashed #7f77dd; box-sizing: border-box; }
.pf-foot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.5rem; flex-shrink: 0; }
.pf-foot > div { background: #ffffff14; border-radius: 12px; padding: 0.4rem 0.6rem; min-width: 0; }
.pf-foot .k, .pf-partner .k { font-size: 0.72rem; color: #cecbf6; }
.pf-rare img { width: 2.6rem; height: 2.6rem; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.pf-tier { font-size: 0.68rem; font-weight: 800; padding: 0 0.45rem; border-radius: 99px; background: #7f77dd; color: #fff; }
.pf-tier.legendary { background: #fac775; color: #412402; }
.pf-stats { display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; }
.pf-stats > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 0.4rem; }
.pf-stats .k { white-space: nowrap; }
.pf-stats b { margin-left: auto; }
.pf-stats b { font-size: 0.95rem; white-space: nowrap; }
.pf-partner { display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem; padding: 0.5rem 0.8rem; min-height: 0; position: relative; }
.pf-partner img { flex: 1; min-height: 0; width: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 4px #0006); }
.pf-partner .top { display: flex; justify-content: space-between; align-items: center; }
.pf-partner .bot { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.pf-partner .lv { font-size: 1.3rem; font-weight: 900; color: #fac775; }
.pf-partner .k { color: var(--muted); }
.pf-input { width: 100%; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); font-size: 1.1rem; }
.pf-bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.pf-bcell { position: relative; display: flex; align-items: center; justify-content: center; padding: 0.2rem; min-height: 0; }
.pf-bcell img { height: 100%; max-height: 3.2rem; aspect-ratio: 1; }
.pf-bcell img.off { filter: grayscale(1) brightness(.5); }
.pf-bcell.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.pf-bcell .n { position: absolute; top: 3px; right: 6px; font-size: 0.75rem; font-weight: 900; color: var(--gold); }
button.home-card { color: inherit; border: none; text-align: left; font-weight: inherit; cursor: pointer; }

/* 商店：數量選擇 */
.qty-row { display: grid; grid-template-columns: auto auto minmax(3rem, 1fr) auto auto auto; gap: 0.3rem; align-items: center; }
.qty-in { width: 100%; min-width: 0; text-align: center; font-weight: 900; font-size: 1rem; padding: 0.25rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel2); -moz-appearance: textfield; }
.qty-in::-webkit-outer-spin-button, .qty-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 首頁：玩家頭像＝個人資料的入口 */
.home-av { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #534ab7;
  border: 2px solid #fac775; box-shadow: 0 0 0 3px #fac77533; transition: transform .15s; }
.home-card:hover .home-av { transform: scale(1.08); }

/* 首頁：每日獎勵 */
.home-gift { position: absolute; right: 0.6rem; top: 4.1rem; width: 2.8rem; height: 2.8rem; padding: 0; border-radius: 50%;
  font-size: 1.4rem; background: #0d0f14c0; border: 2px solid #fff3; }
.gi { width: 1.25em; height: 1.25em; fill: currentColor; flex-shrink: 0; vertical-align: -0.24em; }   /* 遊戲圖標（app.js GI） */
.gi .d { opacity: .45; }
.gi .ds { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .45; }
.gi .s { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gi.gold { color: #ffd23f; }
.gi .k { fill: #0000004d; } .gi .ks { fill: none; stroke: #00000059; stroke-width: 1.6; stroke-linecap: round; }
/* 第 4 批的顏色（按鈕裡跟著按鈕的字色） */
.gi-burst, .gi-target, .gi-fire { color: #ff8a4c; } .gi-popper, .gi-gold, .gi-dizzy, .gi-moneybag, .gi-electric { color: #ffd23f; }
.gi-chart, .gi-right, .gi-grassy, .gi-sprout, .gi.green { color: #7ee787; } .gi-dmax, .gi-wrong, .gi-bobber, .gi-bang, .gi-balloon, .gi-banned { color: #ff5a6a; }
.gi-omega { color: #ff6b4a; } .gi-alpha { color: #4aa8ff; }   /* 原始回歸 */
.gi-sun { color: #ffb74d; } .gi-rain, .gi.blue { color: #64b5f6; } .gi-sand { color: #d7b86a; } .gi-snow { color: #b3e5fc; } .gi-wind { color: #9fd3ff; }
.gi-misty { color: #f4a6d7; } .gi-psychic { color: #ce93d8; } .gi-tree { color: #4caf50; } .gi-basket { color: #c8945a; } .gi-apple { color: #e2424a; }
.gi-pear { color: #c6d84a; } .gi-peach { color: #ffab91; } .gi-grapes { color: #9c6ade; } .gi-rock { color: #9e9e9e; } .gi-pickaxe, .gi-hammer { color: #b0bec5; }
.gi-eyes { color: #fff; } .gi-shopbag { color: #ff7ab0; } .gi-bone { color: #e8dcc0; } .gi-moon { color: #fff3b0; } .gi-fuse, .gi-split { color: #ffd76a; }
.gi.silver { color: #cfd8dc; } .gi.purple { color: #b388ff; }
button .gi { color: inherit; }
/* 名字前的記號、訊息裡的圖標有自己的顏色；按鈕裡跟著按鈕的字色（金色按鈕上的金星才看得到） */
.gi-star, .gi-crown, .gi-warn { color: #ffd23f; } .gi-shiny, .gi-up, .gi-gem { color: #9fd3ff; } .gi-heart { color: #ff7ab0; } .gi-fire { color: #ff8a4c; }
button .gi-star, button .gi-crown, button .gi-warn, button .gi-shiny, button .gi-up, button .gi-gem, button .gi-heart, button .gi-fire { color: inherit; }
/* 等待中的沙漏：停一下 → 翻過來 → 沙子流到下面（不管怎麼轉，停下來時沙子多的一邊都在下面；2026-10-01 使用者）
   沙漏外形上下對稱：翻到 180° 的那一刻換回 0°、同時把沙子換到上面，看起來沒有跳 */
.gi-hourglass { animation: hgFlip 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
.gi-hourglass .hs-t, .gi-hourglass .hs-b { transform-box: fill-box; transform-origin: 50% 100%; }
.gi-hourglass .hs-t { transform: scaleY(0); animation: hgTop 2.4s linear infinite; }
.gi-hourglass .hs-b { animation: hgBot 2.4s linear infinite; }
@keyframes hgFlip { 0%, 10% { transform: rotate(0); } 35% { transform: rotate(180deg); } 35.01%, 100% { transform: rotate(0); } }
@keyframes hgTop { 0%, 35% { transform: scaleY(0); } 35.01% { transform: scaleY(1); } 60%, 100% { transform: scaleY(0); } }
@keyframes hgBot { 0%, 35% { transform: scaleY(1); } 35.01% { transform: scaleY(0); } 60%, 100% { transform: scaleY(1); } }
html.no-motion .gi-hourglass, html.no-motion .gi-hourglass .hs-t, html.no-motion .gi-hourglass .hs-b { animation: none !important; }   /* 設定「動態效果：關」（預設跟著手機） */
button.gold .gi, .chip.gold .gi, .pill.gold .gi, .tag.gold .gi { color: #7a5200; }   /* 金底上的金幣、金星改深色才看得到 */
.chip .gi, .pill .gi, .dp-lb .gi, .tag .gi, .k .gi, .title .gi, .set-title .gi, .pf-ms .gi { width: 1.15em; height: 1.15em; }
.set-l .gi { margin-right: 0; }
.g3 > button:has(> .gi) { gap: 0.18rem; }                          /* 三欄的按鈕窄：圖標小一點、靠近字，才不用縮字 */
.g3 > button > .gi { width: 1.05em; height: 1.05em; }
.candy-btn .em .gi { width: 1.4em; height: 1.4em; }
.menu-grid button .em .gi { width: 0.9em; height: 0.9em; vertical-align: middle; }
.menu-grid button .sub .gi { width: 1.1em; height: 1.1em; }
.home-gift { display: flex; align-items: center; justify-content: center; color: #fff; }
.home-gift .gi { width: 1.4rem; height: 1.4rem; }
.home-gift.ready { color: #ffd23f; }
#dock .dk .gi, #dock .chat-fab .gi { width: 1.3rem; height: 1.3rem; }
.chat-fab .gi { width: 1.5rem; height: 1.5rem; }
.home-gift.ready { border-color: var(--gold); animation: giftbob 1.4s ease-in-out infinite; box-shadow: 0 0 0 4px #fac77544; }
@keyframes giftbob { 50% { transform: translateY(-4px) rotate(-6deg); } }
/* 新手任務（2026-10-05）：首頁左上角、禮物那一排的對面 */
.home-nq { right: auto; left: 0.6rem; }
/* 公告欄（2026-10-07）：新手任務下面；沒有新手任務就在第一格 */
.home-news { right: auto; left: 0.6rem; } .home-news.below { top: 7.3rem; }
.news-dot { position: absolute; top: -2px; right: -2px; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--bad); border: 2px solid #0d0f14; }
.news-stage { gap: 0.45rem; }
.news-site { display: flex; align-items: center; gap: 0.5rem; background: #2b3a5a; border: 1px solid #4a6aa8; border-radius: 12px; padding: 0.45rem 0.6rem; flex-shrink: 0; }
.news-site .tiny { color: #c7d4ee; }
.news-list { display: grid; gap: 0.3rem; min-height: 0; }
.news-ent { display: flex; align-items: center; gap: 0.45rem; min-height: 0; padding: 0.2rem 0.6rem; border-radius: 10px; font-size: 0.85rem; text-align: left; }
.news-ent .d { color: #9aa3b5; font-size: 0.72rem; white-space: nowrap; }
.news-ent.on { border-color: var(--gold); background: #3a3522; }
.news-body { display: flex; flex-direction: column; overflow: hidden; font-size: 0.84rem; line-height: 1.5; }
.news-body ul { margin: 0.3rem 0 0; padding-left: 1.1em; } .news-body li { margin-bottom: 0.25rem; }
.news-more { margin-top: auto; padding-top: 0.3rem; }
.home-nq.ready { color: #ffd23f; border-color: var(--gold); box-shadow: 0 0 0 4px #fac77544; animation: giftbob 1.4s ease-in-out infinite; }
.nq-stage { display: flex; flex-direction: column; gap: 0.45rem; }
.nq-title { font-size: 1.1rem; }
.nq-list { display: grid; gap: 0.3rem; min-height: 0; }
.nq-row { display: flex; align-items: center; gap: 0.55rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.25rem 0.55rem; min-height: 0; overflow: hidden; }
.nq-row.ready { border-color: var(--gold); }
.nq-row.got { opacity: .55; }
.nq-row button { white-space: nowrap; flex-shrink: 0; }
.nq-ck { min-width: 2.3rem; text-align: center; font-size: 0.8rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.nq-ck .gi { width: 1.3rem; height: 1.3rem; }
.nq-row.got .nq-ck { color: #5dcaa5; }
.nq-t { font-size: 0.92rem; line-height: 1.2; }
.nq-r { line-height: 1.25; }
/* 收件匣（2026-09-30） */
.home-mail { top: 7.3rem; }
.home-set { top: 10.5rem; }
.set-stage { display: flex; flex-direction: column; gap: 0.8rem; }
.set-title { font-size: 1.2rem; }
.set-card { background: #ffffff10; border-radius: 12px; padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.8rem; }
.set-rows { display: flex; flex-direction: column; gap: 1rem; padding: 0.2rem 0.1rem; }   /* 音樂／音效／動態效果：沒有外框（2026-10-01 使用者） */
.set-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 3em; align-items: center; gap: 0.6rem; min-width: 0; }   /* 標籤固定寬 → 四種語言的音量條一樣長 */
.set-row .set-seg { grid-column: 2 / 4; }
.set-l { font-weight: 800; white-space: nowrap; min-width: 4.8em; display: inline-flex; align-items: center; gap: 0.3rem; }
.set-row > .set-l { min-width: 0; }
.set-mute { background: none; border: none; border-radius: 6px; padding: 0.3rem 0; color: inherit; justify-content: flex-start; text-align: left; font-size: 0.95rem; }   /* 沒有框，但還是按鈕：點了靜音 */
.set-row.muted .set-mute { color: var(--muted); }
.set-row.muted input[type=range], .set-row.muted .set-v { opacity: .4; }
.set-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--gold); }
.set-v { width: 3em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-mail.new { border-color: #7ab8ff; box-shadow: 0 0 0 4px #7ab8ff44; }
.mail-badge { position: absolute; top: -5px; right: -5px; min-width: 1.2rem; height: 1.2rem; padding: 0 3px; border-radius: 99px; background: var(--bad);
  color: #fff; font-size: 0.7rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.mail-stage { background: radial-gradient(circle at 50% 20%, #2a3350, #11141c 75%); }
.mail-paper { background: #f8f8f0; color: #28304a; border: 5px double #3b4a7a; border-radius: 12px; padding: 0.7rem 0.9rem; display: flex;
  flex-direction: column; gap: 0.4rem; min-height: 0; overflow: hidden; }
.mail-paper .pill { background: #3b4a7a; color: #fff; }
.mail-paper .pill.gold { background: var(--gold); color: #222; }
.mail-meta { color: #6a7390; }
.mail-body { flex: 1; min-height: 0; overflow: hidden; font-size: 0.9rem; line-height: 1.5; }
.mail-att { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mail-att .chip { background: #e7e9f3; color: #28304a; }
.mail-att .chip.gold { background: var(--gold); color: #222; }
.mail-row, .pick-list .mail-row { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; min-width: 0; text-align: left; font-size: 0.9rem; padding: 0.35rem 0.7rem; }
.mail-row .mdot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.mail-row.unread .mdot { background: #7ab8ff; }
.mail-row.unread { font-weight: 900; }
.mail-row.sel { outline: 2px solid var(--accent); }
.mail-paper .pf-input { background: #fff; color: #28304a; border-color: #c9cde0; font-size: 1rem; }
.mail-ta { resize: none; min-height: 0; font-family: inherit; }
.sm-in { font-size: 0.9rem; padding: 0.4rem 0.6rem; }
.seg2 { display: inline-flex; gap: 0.3rem; flex-shrink: 0; }
.seg2 button { padding: 0.35rem 0.6rem; font-size: 0.85rem; }
.mail-prev { display: flex; align-items: center; }
/* 彩色蛋：彩虹 */
.egg.rainbow { background: radial-gradient(circle at 32% 28%, #fffc 0 10%, #0000 11%),
  conic-gradient(from 20deg at 50% 60%, #ff5f7e, #ffb84d, #ffe95c, #6de08a, #5fb4ff, #9d7bff, #ff6fd0, #ff5f7e);
  box-shadow: inset -5px -7px 0 #0002, 0 3px 6px #0005, 0 0 12px #fff8; }
/* 每日獎勵：7 天 */
.dl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.dl-day { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.4rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; text-align: center; min-height: 0; overflow: hidden; }
.dl-day:last-child { grid-column: span 2; background: linear-gradient(135deg, #3c3489, #26215c); border-color: #7f77dd; }
.dl-day.now { border: 2px solid var(--gold); box-shadow: 0 0 0 3px #fac77533; }
.dl-day.past { opacity: .55; }
.dl-n { font-size: 0.7rem; color: var(--muted); font-weight: 800; }
.dl-egg { font-size: 1.5rem; }
.dl-c { font-weight: 900; font-size: 0.9rem; }
.dl-i { font-size: 0.65rem; color: var(--muted); white-space: pre-line; }
.dl-ok { position: absolute; top: 4px; right: 8px; color: var(--good); font-weight: 900; }
/* 選御三家 */
.st-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding: 0.8rem; align-items: center; }
.st-mon { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; background: #0d0f14a0; border: 2px solid transparent;
  border-radius: 16px; padding: 0.5rem; min-height: 0; height: 80%; }
.st-mon img { flex: 1; min-height: 0; width: 100%; object-fit: contain; filter: drop-shadow(0 6px 4px #0006); }
.st-mon.sel { border-color: var(--gold); background: #3c3489c0; transform: translateY(-4px); }
/* 地點：熱門、加成；翻牌大獎 */
.loc.hot { box-shadow: 0 0 0 2px #ff7a3d inset; }
.loc-bonus { font-size: 0.72rem; font-weight: 800; color: #ffd166; text-shadow: 0 1px 2px #000a; }
.face.front.jackpot { background: linear-gradient(135deg, #fac775, #ef9f27); color: #412402; font-weight: 900; }

/* 里程碑 */
.ms-head { display: flex; align-items: center; gap: 0.8rem; background: linear-gradient(135deg, #3c3489, #26215c);
  border: 2px solid #fac775; border-radius: 14px; padding: 0.5rem 0.8rem; flex-shrink: 0; }
.ms-lv { font-size: 2rem; font-weight: 900; color: #fac775; line-height: 1; white-space: nowrap; }
.ms-lv small { font-size: 0.9rem; margin-right: 2px; }
.ms-bar { height: 6px; border-radius: 4px; background: #ffffff1f; overflow: hidden; }
.ms-bar.big { height: 9px; }
.ms-bar i { display: block; height: 100%; background: #5dcaa5; border-radius: 4px; }
.ms-list { display: grid; gap: 0.3rem; }
.ms-row { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.3rem 0.6rem;
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; min-height: 0; overflow: hidden; }
.ms-row.empty { visibility: hidden; }
.ms-row.done { border-color: #5dcaa566; }
.ms-dots { display: flex; gap: 3px; }
.ms-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff26; }
.ms-dots i.on { background: #fac775; }
.ms-rw { display: flex; align-items: center; gap: 0.5rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.35rem 0.6rem; flex: 1; min-height: 0; overflow: hidden; }
.ms-rw .lv { font-weight: 900; color: var(--muted); white-space: nowrap; min-width: 3rem; }
.ms-rw.ready { border-color: var(--gold); } .ms-rw.ready .lv { color: var(--gold); }
.ms-rw.got { opacity: .5; }
.ms-rw.ready { cursor: pointer; }
.ms-rw.sel { box-shadow: 0 0 0 2px var(--gold) inset; background: #f5c54222; }
.ms-rw.big { background: linear-gradient(135deg, #3c348955, transparent); }
.ms-pick button { display: flex; align-items: center; gap: 4px; justify-content: flex-start; font-size: 0.72rem; }
.item-img.xs { width: 1.3rem; height: 1.3rem; }
.pf-ms { flex-shrink: 0; background: #fac775; color: #412402; border-radius: 99px; padding: 1px 0.6rem; font-size: 0.8rem; font-weight: 900; }
.home-avw { position: relative; flex-shrink: 0; display: inline-flex; }
.home-avw .dot { position: absolute; top: -2px; right: -2px; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px #0d0f14; }
.ach-toast { position: fixed; left: 50%; top: calc(var(--sat, 0px) + 12px); transform: translateX(-50%); z-index: 120; pointer-events: none;
  background: linear-gradient(135deg, #fac775, #ef9f27); color: #412402; font-weight: 900; padding: 0.5rem 1rem; border-radius: 99px;
  box-shadow: 0 6px 20px #0008; animation: achin .35s cubic-bezier(.3, 1.4, .5, 1); max-width: 90vw; text-align: center; }
.ach-toast.out { opacity: 0; transition: opacity .4s; }
@keyframes achin { from { transform: translate(-50%, -30px); opacity: 0; } }

/* 派遣 */
.dp-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.3rem; flex-shrink: 0; }
.dp-slot { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.25rem; display: flex;
  flex-direction: column; align-items: center; gap: 2px; min-width: 0; height: 4.6rem; justify-content: center; }
.dp-slot img { width: 1.4rem; height: 1.4rem; image-rendering: pixelated; }
.dp-slot.empty { color: var(--muted); border-style: dashed; font-size: 1.2rem; }
.dp-slot.done { border-color: var(--gold); }
.loc, .dp-job, .dp-slot.dp-scene { --scene-img: var(--scene-n); }     /* 地點橫幅；探索的地點卡夠寬（電腦）時換寬版 */
.locs { container-type: inline-size; }
@container (min-width: 560px) { .loc { --scene-img: var(--scene-w); } }
.dp-slot.dp-scene { background: linear-gradient(#0000 30%, #000a), var(--scene-img) center 75% / cover no-repeat, var(--panel); }   /* 派遣中：地點橫幅 */
.dp-slot.dp-scene .t { text-shadow: 0 1px 2px #000, 0 0 4px #000; font-weight: 800; }
.box-search { display: flex; align-items: center; gap: 0.4rem; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 0.2rem 0.5rem; min-width: 0; }
.box-search.on, .box-search:focus-within { border-color: var(--accent); }
.box-search input { background: none; border: none; padding: 0.3rem 0; font-size: 0.9rem; outline: none; min-width: 0; color: inherit; }
.box-search input::-webkit-search-cancel-button { display: none; }
.box-search .n { font-size: 0.75rem; color: #9fd3ff; white-space: nowrap; }
.box-search .x { padding: 0 0.35rem; }
.box-search .ck { gap: 3px; cursor: pointer; white-space: nowrap; flex-shrink: 0; font-size: 0.7rem; }
.box-search .ck input { margin: 0; }
.dp-slot button { padding: 0 0.4rem; font-size: 0.7rem; }
.dp-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.dp-job { background: var(--scene-img, none) center 75% / cover no-repeat, var(--scene-sky, var(--panel2)); position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 3px;
  text-align: left; padding: 0.4rem 0.55rem; border-radius: 12px; min-height: 0; overflow: hidden; text-shadow: 0 1px 2px #000c; }
.dp-job::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, #000b); z-index: 0; }
.dp-job > * { position: relative; z-index: 1; }
.dp-job.sel { box-shadow: 0 0 0 3px var(--gold) inset; }
.dp-job .dp-h { position: absolute; top: 6px; right: 6px; }
.dp-job > b { font-size: 0.86rem; }
.dp-job .row { flex-wrap: wrap; row-gap: 2px; }          /* 屬性名稱長（フェアリー、かくとう）就排兩行，不截字 */
.dp-job .dp-egg { position: absolute; top: 4px; left: 6px; font-size: 1.05rem; filter: drop-shadow(0 1px 2px #000a); }
.dp-eggs { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 0.15rem; min-width: 0; }   /* 四種蛋一排（2026-09-30 使用者） */
.dp-et { min-width: 0; overflow: hidden; text-align: center; white-space: nowrap; font-size: 0.74rem; letter-spacing: -0.02em; border-radius: 6px; padding: 0.05rem 0; background: #ffffff14; }
.dp-et.t1 { color: #7fc4ff; } .dp-et.t2 { color: #d9a3ff; } .dp-et.t3 { color: #ffd166; }
.dp-lb.eg.no { opacity: .45; }
.dp-lb.ic { min-width: 0; padding: 0.05rem 0.3rem; }
.dp-rw { display: flex; flex-direction: column; gap: 4px; background: var(--panel2, #ffffff10); border-radius: 10px; padding: 0.45rem 0.6rem; font-size: 0.92rem; font-weight: 700; }
.dp-rw .row { gap: 0.5rem; min-width: 0; }
.dp-lb { flex-shrink: 0; min-width: 4.6em; text-align: center; border-radius: 6px; padding: 0.05rem 0.4rem; font-size: 0.78rem; font-weight: 900; white-space: nowrap; }
.dp-lb.co { background: #fac775; color: #412402; } .dp-lb.it { background: #b5d4f4; color: #042c53; } .dp-lb.eg { background: #c0dd97; color: #173404; }
.dp-job.taken { opacity: .45; }
.dp-tag { position: absolute !important; top: 6px; right: 8px; background: #000a; border-radius: 99px; padding: 0 0.5rem; font-size: 0.7rem; }
.cell.match { box-shadow: 0 0 0 2px #5dcaa5 inset; }
.cell .busy { position: absolute; left: 3px; bottom: 2px; font-size: 0.8rem; }
.cell .evo-up .gi { color: #7ee787; width: 1.6em; height: 1.6em; filter: drop-shadow(0 0 2px #000); }   /* 可進化：綠色箭頭 */
.cell .mark .gi { width: 1.6em; height: 1.6em; filter: drop-shadow(0 0 2px #000); }
@media (orientation: portrait), (max-aspect-ratio: 6/5) {
  .dp-slots { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0.25rem; }   /* 欄位一排；每格只放地點和第一隻 */
  .dp-slot { height: 3.4rem; padding: 0.15rem; }
  .dp-slot img:nth-of-type(n+2) { display: none; }
}
#shell.short-top #top { flex-basis: 44%; }
@media not ((orientation: landscape) and (min-aspect-ratio: 6/5)) { #shell.tall-top #top { flex-basis: 66%; } }   /* 新手任務 */

/* 小遊戲 */
.fish-stage { position: absolute; inset: 0; overflow: hidden; }
.fish-water { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(#3b82c4cc, #1e4f8acc); }
.bobber { position: absolute; left: 50%; top: 52%; z-index: 1; transform: translate(-50%, -50%); font-size: 1.6rem; transition: top .2s; }
.bobber.p-wait { animation: bobwave 1.2s ease-in-out infinite; }
@keyframes bobwave { 50% { transform: translate(-50%, -80%); } }
.bobber.p-bite { font-size: 2.6rem; animation: bitejump .25s ease-in-out infinite alternate; }
@keyframes bitejump { to { transform: translate(-50%, -70%); } }
.reel { position: absolute; left: 8%; right: 8%; bottom: 12%; height: 3.2rem; background: #0009; border-radius: 12px; border: 2px solid #fff4; }
.reel .zone { position: absolute; top: 0.35rem; height: 1.4rem; width: 24%; background: #5dcaa5aa; border-radius: 8px; }
.reel .cur { position: absolute; top: 0.2rem; width: 0.5rem; height: 1.7rem; margin-left: -0.25rem; background: #fff; border-radius: 4px; }
.reel .cur.in { background: #fac775; box-shadow: 0 0 10px #fac775; }
.reel .prog { position: absolute; left: 0.4rem; right: 0.4rem; bottom: 0.3rem; height: 0.45rem; background: #ffffff26; border-radius: 4px; overflow: hidden; }
.reel .prog i { display: block; height: 100%; background: #5dcaa5; }
.cave-wall { background: radial-gradient(circle at 50% 30%, #6b5a45, #2e2419 80%); }
.mine-grid, .grass-grid, .lab-grid { display: grid; gap: 3px; }
.mine-c { padding: 0; border-radius: 6px; border: 1px solid #0006; min-height: 0; display: flex; align-items: center; justify-content: center; }
.mine-c.h3 { background: #5b4630; } .mine-c.h2 { background: #7a6043; } .mine-c.h1 { background: #9c7f5c; }
.mine-c.h0 { background: #2a2018; border-color: transparent; }
.mine-c.item { background: #fac77544; box-shadow: 0 0 0 2px #fac775 inset; }
.mine-c b { font-size: 0.8rem; } .mine-c .n1 { color: #9fe1cb; } .mine-c .n2 { color: #fac775; } .mine-c .n3 { color: #f09595; }
.mine-c:disabled { opacity: 1; }
.grass-c { padding: 0; border-radius: 10px; min-height: 0; background: radial-gradient(#6fbf57, #3b7d2f); border: 2px solid #2f6a2c;
  font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.grass-c::after { content: "🌿"; opacity: .8; }
.grass-c.open { background: #d8c79a; } .grass-c.open::after { content: none; }
.grass-c:disabled { opacity: 1; }
.g-hint { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 0.72rem; font-weight: 900; white-space: nowrap; line-height: 1.1; }
.g-hint i { font-style: normal; font-size: 1.1rem; } .g-hint.hot { color: #d85a30; } .g-hint.warm { color: #ba7517; } .g-hint.cold { color: #378add; } .g-hint.none { color: var(--muted); }
.g-mon { font-size: 1.6rem; color: #d85a30; }
.berry-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.berry-stage .tree { position: absolute; left: 50%; top: -1.2rem; transform: translateX(-50%); font-size: 7rem; opacity: .9; }
.berry-stage .basket { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); font-size: 2.6rem; }
.berry-stage .fall { position: absolute; transform: translate(-50%, -50%); font-size: 1.5rem; pointer-events: none; }
.berry-stage .b-score { position: absolute; top: 0.5rem; right: 0.7rem; background: #000a; border-radius: 99px; padding: 0.1rem 0.7rem; font-weight: 900; }
.photo-stage { position: absolute; inset: 0; overflow: hidden; }
.photo-stage .finder { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 3px dashed #fff; border-radius: 12px; box-shadow: 0 0 0 999px #0005; }
.photo-stage .runner { position: absolute; left: -20%; top: 45%; height: 30%; transform: translate(-50%, -50%); image-rendering: pixelated; }
.photo-stage .shots { position: absolute; left: 0.6rem; top: 0.6rem; display: flex; flex-direction: column; gap: 4px; }
.photo-stage .flash { position: absolute; inset: 0; background: #fff; animation: flash .4s ease-out forwards; }
@keyframes flash { to { opacity: 0; } }
.lab-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); align-content: start; }
.lab-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem; display: flex; flex-direction: column;
  align-items: center; gap: 0.25rem; text-align: center; }

/* ══ 道館（2026-09-29）══ */
.bg-gym { background: radial-gradient(ellipse at 50% 115%, #f4e3b5 0 30%, #d7b778 31% 36%, #0000 37%), linear-gradient(#3b4a78, #6c7fb8 55%, #a9b8d8); }
.scene.bg-gym { background: linear-gradient(#2e3a66 0%, #5b6ea6 44%, #c9b27a 44.5%, #b39455 100%); }
.gym-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0.45rem; height: 100%; }
.gym-ch { position: relative; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1px; padding: 0.35rem 0.5rem; overflow: hidden;
  color: #fff; text-shadow: 0 1px 2px #0009; border: 0; background: linear-gradient(160deg, var(--rc1, #4b5d8f), var(--rc2, #25304f)); }
.gym-ch img { position: absolute; right: -4%; top: -6%; width: 58%; height: auto; opacity: .95; image-rendering: pixelated; pointer-events: none; }
.gym-ch .lb { font-size: 0.66rem; opacity: .85; font-weight: 700; }
.gym-ch .nm { font-size: 1.05rem; font-weight: 900; }
.gym-ch-foot { width: 100%; justify-content: space-between; font-size: 0.7rem; font-weight: 800; }
.gym-ch-foot .st { color: #ffd76a; letter-spacing: -1px; }
.gym-ch.locked { filter: grayscale(.9) brightness(.55); }
.gym-ch.cleared { box-shadow: 0 0 0 2px #ffd76a inset; }
.rg-kanto { --rc1: #d9534f; --rc2: #6d1f1d; } .rg-johto { --rc1: #c9a227; --rc2: #5e4a0c; } .rg-hoenn { --rc1: #2f9e6e; --rc2: #10402c; }
.rg-sinnoh { --rc1: #5b7bd5; --rc2: #1f2e63; } .rg-unova { --rc1: #555; --rc2: #151515; } .rg-kalos { --rc1: #3b8ee0; --rc2: #173a66; }
.rg-alola { --rc1: #f0913a; --rc2: #7a3a0b; } .rg-galar { --rc1: #b33a8e; --rc2: #4a1239; } .rg-paldea { --rc1: #9b59d0; --rc2: #3c1b5c; }
.gym-weekly-btn { justify-content: flex-start; gap: 0.5rem; padding: 0.4rem 0.6rem; text-align: left; }
.gym-weekly-btn .em { font-size: 1.4rem; }
.wk-ic { width: 1.7rem; height: 1.7rem; object-fit: contain; image-rendering: pixelated; }
.wk-ic.done { opacity: .35; }
/* 章節的路線 */
.gym-route { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0.6rem; background: linear-gradient(170deg, var(--rc1, #4b5d8f) -40%, #161a24 70%); }
.gym-rhead { display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 0.95rem; }
.gym-path { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 0.4rem; }
.gym-path.n11, .gym-path.n12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gym-node { position: relative; flex-direction: column; gap: 0; padding: 2px; background: #ffffff10; border: 2px solid #ffffff22; border-radius: 12px; color: #fff; overflow: hidden; }
.gym-node img.gb { width: 72%; height: 62%; object-fit: contain; }
.gym-node img.ic { width: 78%; height: 62%; object-fit: contain; image-rendering: pixelated; }
.gym-node .trophy { font-size: 1.6rem; line-height: 1.2; }
.gym-node .n { font-size: 0.66rem; font-weight: 800; opacity: .9; }
.gym-node .ok { position: absolute; right: 4px; top: 2px; font-size: 0.7rem; color: #4ade80; font-weight: 900; }
.gym-node .pin { position: absolute; left: 50%; top: -2px; transform: translateX(-50%); color: #ffd76a; font-size: 0.7rem; animation: pinbob 1s ease-in-out infinite; }
.gym-node.done { border-color: color-mix(in srgb, var(--tc) 70%, #fff); background: color-mix(in srgb, var(--tc) 22%, #0000); }
.gym-node.now { border-color: #ffd76a; box-shadow: 0 0 10px #ffd76a88; }
.gym-node.locked img { filter: brightness(0) opacity(.45); }
.gym-node.sel { outline: 2px solid #fff; outline-offset: 1px; }
.gym-node.final { grid-column: span 2; background: linear-gradient(135deg, #ffd76a33, #0000); }
@keyframes pinbob { 50% { transform: translate(-50%, 3px); } }
.gym-stars { display: flex; gap: 0.3rem; }
.gym-stars button { flex: 1; }
.gym-stars button.done:not(.gold) { color: #ffd76a; }
.gym-ace { width: 2.6rem; height: 2.6rem; object-fit: contain; image-rendering: pixelated; }
.gym-round { gap: 0.4rem; padding: 1px 4px; border-radius: 6px; }
.gym-round.now { background: #ffd76a33; font-weight: 800; }
.gym-round.done { opacity: .55; text-decoration: line-through; }
.row.wrap { flex-wrap: wrap; }
/* 本週道館 */
.gym-weekly { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; height: 100%; }
.wk-card { flex-direction: column; gap: 0.2rem; padding: 0.4rem; color: #fff; border: 2px solid color-mix(in srgb, var(--tc) 80%, #fff);
  background: linear-gradient(170deg, color-mix(in srgb, var(--tc) 55%, #000) , #151922 80%); overflow: hidden; }
.wk-card img { flex: 1; min-height: 0; width: 100%; object-fit: contain; image-rendering: pixelated; }
.wk-card .nm { font-weight: 900; font-size: 0.9rem; text-align: center; }
.wk-card.done { filter: saturate(.5) brightness(.8); }
/* 對戰前 */
.gym-lead { background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tc, #889) 55%, #fff) 0 18%, #0000 45%), linear-gradient(#27304f, #6c7fb8); }
.gym-trainer { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: 4.5rem; }
.result-stage.champ { background: radial-gradient(circle, #ffe8a0 0 20%, #d4a017 60%, #6b4a00); }
/* 對手的隊伍（還剩幾隻） */
.hud .fdots { display: flex; gap: 3px; margin-top: 2px; }
.hud .fdots i { width: 7px; height: 7px; border-radius: 50%; background: #e04a4a; box-shadow: 0 0 0 1px #0004 inset; }
.hud .fdots i.out { background: #bbb; }
/* 雙打：兩邊各兩隻 */
.scene.dbl .plat.foe { right: 1%; top: calc(var(--hz) - 1%); width: 58%; height: 13%; }
.scene.dbl .plat.me { left: 0; bottom: 0; width: 62%; height: 15%; }
.scene.dbl .sprite.foe { right: 30%; bottom: calc(93% - var(--hz)); width: 26%; height: 38%; }
.scene.dbl .sprite.foe.f2 { right: 3%; bottom: calc(96% - var(--hz)); width: 26%; height: 38%; }   /* 後面那隻站遠一點 */
.scene.dbl .sprite.me { left: 1%; bottom: 4%; width: 32%; height: 46%; }
.scene.dbl .sprite.me.m2 { left: 29%; bottom: 2%; width: 32%; height: 46%; }
.scene.dbl .hud.foe { left: 2%; top: 2%; width: 38%; padding: 0.15rem 0.45rem 0.25rem; }
.scene.dbl .hud.foe.f2 { top: 21%; }
.scene.dbl .hud.me { right: 2%; bottom: 25%; width: 38%; padding: 0.15rem 0.45rem 0.25rem; }
.scene.dbl .hud.me.m2 { bottom: 3%; }
.scene.dbl .hud .top { font-size: 0.74rem; }
.scene.dbl .hud .nums { font-size: 0.64rem; }
.scene.dbl .hud .dots { display: none; }
/* 個人資料：道館徽章盒 */
.pf-gym { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; background: #ffffff14; border-radius: 12px; padding: 0.3rem 0.5rem; min-width: 0; }
.pf-gym .k { font-size: 0.7rem; color: #cecbf6; white-space: nowrap; }
.pf-gym .gbs { display: flex; gap: 2px; flex-wrap: wrap; min-width: 0; }
.pf-gym .gbs img { width: 1.55rem; height: 1.55rem; }
.pf-gym .gbs img.off { filter: grayscale(1) brightness(.35); opacity: .6; }
.scene.raid.dbl .sprite.foe { left: auto; }
.scene.raid.dbl .hud.foe { transform: none; left: 2%; width: 38%; }
.scene.raid.dbl .plat.foe { left: auto; }
.evo-hint { color: #fde68a; font-weight: 700; }

/* 手機 App：Google 登入、綁定碼 */
.app-login { gap: 0.6rem; align-items: center; text-align: center; padding: 0 1rem; max-width: 36rem; }
.app-login img { width: min(36vw, 9rem); height: auto; }
.app-login img.app-logo { width: min(30vw, 7rem); filter: drop-shadow(0 4px 10px #0008); }
.app-login img.app-logo.sm { width: min(18vw, 3.6rem); }
.app-steps { text-align: left; }
.app-t { font-weight: 800; font-size: 1.25rem; }
.app-code { font-size: 2.2rem; font-weight: 900; letter-spacing: 0.3em; font-family: ui-monospace, monospace; }
/* 房間清單在最下面（沒有換頁列）時，最後一個「加入」會被右下角的聊天按鈕蓋住 */
.ball-nq { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; }
.ball-nq .bn { max-width: 100%; }
.ball-nq .bn.long { font-size: 0.86em; }        /* 日文長球名（スターダストボール）：手機寬度放得下 */
.ball-nq .bq { font-size: 0.72rem; font-weight: 700; color: var(--muted); }

/* 首頁選單分頁（2026-10-01 使用者）：冒險／寶可夢／城鎮，每頁 2×3；下面的分頁列有滑動的底線，左右滑也能換 */
.menu-slider { overflow: hidden; touch-action: pan-y; }
.menu-track { display: flex; height: 100%; transition: transform .32s cubic-bezier(.25,.8,.3,1); will-change: transform; }
.menu-page { flex: 0 0 100%; height: 100%; grid-template-rows: repeat(3, minmax(0, 1fr)); padding: 0 1px; }
.menu-grid button .lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-grid button.soon { opacity: .45; }
.menu-grid button.soon .sub .gi { width: 0.95em; height: 0.95em; }
.menu-blank { border: 1px dashed #ffffff14; border-radius: 10px; }
.menu-tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex-shrink: 0; background: var(--panel); border-radius: 12px; padding: 3px; }
.menu-ink { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc((100% - 6px) / 3); border-radius: 9px; background: var(--accent);
  transition: transform .32s cubic-bezier(.25,.8,.3,1); box-shadow: 0 2px 8px #0005; }
.menu-tab { position: relative; z-index: 1; background: none; border: 0; padding: 0.35rem 0.2rem; gap: 0.3rem; font-size: 0.86rem; color: var(--muted); transition: color .2s; min-width: 0; }
.menu-tab.on { color: #fff; }
.menu-tab .gi { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.menu-tab .lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-tab .dot { position: absolute; top: 4px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ff4757; box-shadow: 0 0 0 2px var(--panel); }

/* 背包 */
.bag-tabs button { font-size: 0.72rem !important; }
.bag-card { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0.2rem; border-radius: 10px; }
.bag-card.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 14px #f5c54255; }
.bag-card.empty { background: #ffffff06; border: 1px dashed var(--line); }
.bag-card > .item-img { width: 62%; height: auto; max-height: 70%; object-fit: contain; }
.bag-card > .item-img.emo { width: auto; font-size: 1.8rem; }
.bag-card .have { position: absolute; right: 4px; bottom: 2px; font-size: 0.64rem; color: #cfc6dd; }
.bag-card.bought { animation: bought .6s ease-out; }
.bag-mon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 0; padding: 0.2rem; }
.bag-mon img { height: 46%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.bag-mon .nm { font-size: 0.74rem; max-width: 100%; }
.bag-mon .hpbar { width: 80%; height: 4px; }
.bag-mon.off { opacity: .35; }
.bag-mon.empty { border: 1px dashed var(--line); border-radius: 10px; background: none; }

/* 隊伍組（2026-10-01）：隊伍頁上面一排 ◀ 標記＋名字 ✏️ 1/3 ▶ */
.pz-bar { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.pz-bar > .sm { flex: 0 0 auto; padding: 0.25rem 0.6rem; }
.pz-name { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.25rem 0.5rem; font-size: 0.92rem; }
.pz-name .clip { min-width: 0; }
.pz-name .gi { width: 0.9em; height: 0.9em; opacity: .6; flex-shrink: 0; }
.pz-n { font-size: 0.72rem; color: var(--muted); flex-shrink: 0; }
.pz-dot { display: inline-block; flex-shrink: 0; width: 0.8rem; height: 0.8rem; border-radius: 50%; box-shadow: 0 0 0 2px #fff3; vertical-align: middle; }
.pz-mon { width: 1.6rem; height: 1.6rem; margin: -0.3rem 0; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; vertical-align: middle; }
.pz-away { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); }
.pz-away img { width: 46%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; opacity: .4; filter: grayscale(.7); }
.pz-away .gi { width: 1em; height: 1em; vertical-align: -2px; }
.pz-in-r { animation: pzInR .28s ease-out; }
.pz-in-l { animation: pzInL .28s ease-out; }
@keyframes pzInR { from { opacity: 0; transform: translateX(14%); } }
@keyframes pzInL { from { opacity: 0; transform: translateX(-14%); } }
.no-motion .pz-in-r, .no-motion .pz-in-l { animation: none; }

/* 標題畫面（2026-10-01）：地點橫幅＋夥伴＋標誌；按鈕小一點、置中 */
#shell.titling #dock { display: none !important; }
#shell.titling #ctlc [data-back] { display: inline-flex !important; }   /* 標題畫面沒有下面那排 ◀：標題列的返回直接顯示（帳號綁定，2026-10-01 使用者回報） */
.title-stage { background: linear-gradient(180deg, #0000 40%, #0008), var(--title-bg) center 70% / cover no-repeat, var(--scene-sky); }
.title-logo, .intro-logo { position: absolute; left: 0; right: 0; top: 9%; text-align: center; font-size: 2.9rem; font-weight: 900; letter-spacing: -1px; line-height: 1;
  filter: drop-shadow(0 3px 0 #1d2b53) drop-shadow(0 6px 8px #0007); animation: titleIn .7s cubic-bezier(.2,1.4,.4,1) both; }
/* 外框用 text-shadow 畫（-webkit-text-stroke 在 iPhone 上會蓋到隔壁的字，2026-10-01 使用者回報） */
.title-logo .a, .intro-logo .a, .title-logo .b, .intro-logo .b { text-shadow: 2px 0 #2a4b9b, -2px 0 #2a4b9b, 0 2px #2a4b9b, 0 -2px #2a4b9b,
  1.5px 1.5px #2a4b9b, -1.5px 1.5px #2a4b9b, 1.5px -1.5px #2a4b9b, -1.5px -1.5px #2a4b9b; }
.title-logo .a, .intro-logo .a { color: #ffcb05; }
.title-logo .b, .intro-logo .b { color: #fff; }
@keyframes titleIn { from { opacity: 0; transform: translateY(-30px) scale(.8); } }
.title-buddy { position: absolute; left: 50%; bottom: 14%; height: 38%; max-width: 70%; transform: translateX(-50%); object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 6px 4px #0006); animation: bob 2.4s ease-in-out infinite; }
.title-who { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-size: 0.85rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; padding: 0 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-btns { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; }
.title-btns button { width: min(72%, 300px); padding: 0.55rem 0.8rem; }
.title-btns button.lg { font-size: 1.05rem; padding: 0.7rem 0.8rem; }

/* 開場故事、博士教學：對話框 */
.intro-stage { display: flex; align-items: center; justify-content: center; }
.intro-stage.dark { background: radial-gradient(circle at 50% 40%, #1f2a44, #0b0d12 70%); }
.intro-night { background: linear-gradient(#141833, #3a2a5a 55%, #1d2a26 55%, #111a17); }
.intro-prof { position: absolute; left: 50%; bottom: 0; height: 72%; transform: translateX(-50%); object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 6px 6px #0006); animation: profIn .45s ease-out both; }
@keyframes profIn { from { opacity: 0; transform: translate(-50%, 12%); } }
.intro-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; max-width: 88%; align-self: flex-start; margin-top: 8%; }
.intro-chips .chip { font-size: 0.85rem; padding: 0.25rem 0.7rem; background: #ffffffe6; color: #1d2b53; box-shadow: 0 2px 6px #0005; animation: chipIn .4s ease-out both; }
.intro-chips.badges .chip { background: #ffcb05; }
@keyframes chipIn { from { opacity: 0; transform: translateY(10px) scale(.8); } }
.intro-logo { top: 38%; font-size: 3.2rem; }
.intro-flash { position: fixed; inset: 0; z-index: 130; background: #fff; pointer-events: none; animation: flashOut .4s ease-out forwards; }
@keyframes flashOut { from { opacity: .95; } to { opacity: 0; } }
.intro-box { position: relative; background: #fbfbf7; color: #1d2230; border: 3px solid #3a4560; border-radius: 12px; padding: 0.65rem 0.8rem 1.1rem; min-height: 5.4rem;
  font-size: 0.98rem; line-height: 1.55; cursor: pointer; box-shadow: 0 4px 0 #0004; flex-shrink: 0; }
.intro-nm { position: absolute; top: -0.85rem; left: 0.7rem; background: #3a4560; color: #fff; font-size: 0.78rem; padding: 0.1rem 0.6rem; border-radius: 99px; white-space: nowrap; }
.intro-nx { position: absolute; right: 0.6rem; bottom: 0.25rem; font-style: normal; font-size: 0.75rem; color: #3a4560; animation: nxBob .8s ease-in-out infinite; }
@keyframes nxBob { 50% { transform: translateY(3px); } }
.intro-skip { flex-shrink: 0; }
.intro-box + .row input { flex: 1; min-width: 0; }
.tut-ov { position: fixed; inset: 0; z-index: 110; background: linear-gradient(#0000 25%, #000a); display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 12px calc(var(--sab, 0px) + 18px); animation: fadeIn .25s ease both; }
.tut-prof { height: min(34vh, 230px); object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 6px #0008); animation: profIn2 .4s ease-out both; margin-bottom: 0.6rem; }
@keyframes profIn2 { from { opacity: 0; transform: translateY(12%); } }
.tut-box { width: min(100%, 560px); }
@keyframes fadeIn { from { opacity: 0; } }
.menu-grid button.glow-hint { animation: glowHint 1.4s ease-in-out infinite; }
@keyframes glowHint { 50% { box-shadow: 0 0 0 3px #fff, 0 0 18px 4px #7dff8a; } }
.no-motion .title-logo, .no-motion .intro-chips .chip, .no-motion .menu-grid button.glow-hint { animation: none; }

/* 好友、訓練家卡片（2026-10-01）：好友列表可以捲動（跟聊天列表一樣） */
.fr-stage { display: flex; flex-direction: column; gap: 0.4rem; }
.fr-tabs button { position: relative; flex: 1 1 auto; min-width: 0; font-size: 0.78rem; padding: 0.3rem 0.2rem; }
.fr-tabs button .dot { position: absolute; top: 3px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #ff4757; }
.fr-list { overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; min-height: 0; overscroll-behavior: contain; }
.fr-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.45rem; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; flex-shrink: 0; }
.fr-row.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.fr-av { width: 2.3rem; height: 2.3rem; border-radius: 50%; object-fit: cover; background: #0003; flex-shrink: 0; image-rendering: auto; }
.fr-who { min-width: 0; gap: 1px; }
.fr-on { color: #6ee787; }
.fr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; margin-right: 4px; vertical-align: 1px; }
.fr-more { flex-shrink: 0; font-size: 1.1rem; padding: 0.1rem 0.6rem; }
.fr-sec { padding: 0.2rem 0.2rem 0; }
.fr-empty { margin: auto; text-align: center; padding: 1rem; }
.fr-code { gap: 0.5rem; align-items: center; }
.fr-code-v { font-size: 1.15rem; letter-spacing: 3px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.fr-found { overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; min-height: 0; }
button.fr-sent { background: #3a3d46; color: #9aa0ad; opacity: 1; }
.grid > button.wide { grid-column: span 2; }
.cb .who.tap, .pchip.tap { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.finv { position: fixed; left: 50%; top: calc(var(--sat, 0px) + 10px); transform: translateX(-50%); z-index: 115; width: min(94vw, 460px);
  display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.6rem; border-radius: 12px; background: #24324f; border: 1px solid #4b6cb7;
  box-shadow: 0 6px 18px #0008; animation: finvIn .3s ease-out both; }
@keyframes finvIn { from { opacity: 0; transform: translate(-50%, -20px); } }

/* 聊天室三個分頁、私訊（2026-10-01） */
.chat-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; flex-shrink: 0; }
.chat-tab { position: relative; background: #e6e8ef; color: #3b4a7a; border: 2px solid #3b4a7a55; border-radius: 9px; padding: 0.25rem 0.3rem; font-size: 0.85rem; min-width: 0; }
.chat-tab.on { background: #3b4a7a; color: #f8f8f0; border-color: #3b4a7a; }
.chat-tbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 4px; border-radius: 99px;
  background: var(--bad); color: #fff; font-size: 0.68rem; font-weight: 900; margin-left: 0.3rem; flex-shrink: 0; }
.chat-tab .chat-tbadge { position: absolute; top: -7px; right: -5px; margin: 0; }
.chat-dmhead { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; padding: 0.15rem 0; }
.chat-dmhead[hidden], .chat-people[hidden] { display: none; }
.chat-dmhead .chat-nav .gi { width: 1.05em; height: 1.05em; }
.fr-av.sm { width: 1.9rem; height: 1.9rem; }
.chat-list.fr-mode > :first-child { margin-top: 0; }
.chat-list.fr-mode { gap: 0.35rem; }
.chat-list .chat-empty .gi { width: 2.2rem; height: 2.2rem; opacity: .5; display: block; margin: 0 auto 0.4rem; }
.fr-row.light { background: #fff; border: 2px solid #3b4a7a22; color: #28304a; }
.fr-row.light .muted { color: #7a8198; }
.fr-row.light .fr-on { color: #2f9e57; }
.fr-row.light .fr-more { color: #3b4a7a; }
.fr-code.light { display: flex; align-items: center; gap: 0.4rem; background: #eef1f8; border-radius: 10px; padding: 0.3rem 0.5rem; flex-shrink: 0; }
.chat-list .fr-sec { display: flex; align-items: center; gap: 0.3rem; color: #6a7390; font-weight: 800; padding: 0.25rem 0.1rem 0; flex-shrink: 0; }
.chat-x { margin-left: auto; background: none; border: none; color: #6a7390; padding: 0 0.3rem; }
.fr-blk { background: none; border: none; justify-content: flex-start; }
.fr-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; padding: 0.1rem 0 0.3rem 0.4rem; flex-shrink: 0; }
.fr-menu button { font-size: 0.78rem; }

/* 戰隊（2026-10-01） */
.gemb { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; color: #fff; flex-shrink: 0;
  box-shadow: inset 0 -3px 0 #0003, 0 0 0 2px #fff2; }
.gemb .gi { width: 62%; height: 62%; }
.gemb .gi .d, .gemb .gi .ds { opacity: .55; }
.gemb.lg { width: 3.2rem; height: 3.2rem; border-radius: 13px; }
.gemb.xl { width: 4.2rem; height: 4.2rem; border-radius: 16px; }
.gd-row.inv { border-color: var(--gold); }
.gd-search { gap: 0.4rem; flex-shrink: 0; }
.gd-search input { min-width: 0; }
.gd-head { gap: 0.6rem; flex-shrink: 0; }
.gd-name { font-size: 1.05rem; }
.gd-notice { flex-shrink: 0; padding: 0.35rem 0.55rem; }
.gd-notice .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.gd-role { font-size: 0.66rem; font-weight: 800; padding: 0 0.4rem; border-radius: 99px; background: #3a4a7a; color: #dfe6ff; white-space: nowrap; flex-shrink: 0; }
.gd-role.leader { background: #f0b429; color: #4a3200; }
.fr-tabs .gi { width: 0.9em; height: 0.9em; margin-left: 2px; opacity: .6; }
.gd-make { display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }
.gd-big { font-size: 1.2rem; min-width: 0; }
.gd-icons { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.3rem; }
.gd-ic { aspect-ratio: 1; padding: 0; display: flex; align-items: center; justify-content: center; min-width: 0; }
.gd-ic .gi { width: 62%; height: 62%; }
.gd-ic.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); color: var(--gold); }
.gd-colors { display: flex; justify-content: space-between; gap: 0.4rem; padding: 0 0.3rem; }
.gd-col { width: 2.1rem; height: 2.1rem; border-radius: 50%; padding: 0; border: 2px solid #fff3; }
.gd-col.on { box-shadow: 0 0 0 3px var(--shell, #10141c), 0 0 0 5px #fff; }
.gd-ta { width: 100%; resize: none; font: inherit; border-radius: 10px; padding: 0.5rem; background: var(--panel2); color: inherit; border: 1px solid var(--line); }
.gd-bar { height: 6px; border-radius: 99px; background: #ffffff1f; overflow: hidden; }
.gd-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f0b429, #ffd86b); }

/* 戰隊任務、商店（2026-10-01） */
.gt-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); flex-shrink: 0; }
.gt-row.done { opacity: .55; }
.gt-row.draw { border-color: #f0b42966; }
.gt-row.draw.ready { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.gt-row.draw > .gi { width: 1.4rem; height: 1.4rem; color: #f0b429; }
.gt-ok { color: #4ade80; display: inline-flex; }
.gt-ok .gi { width: 1.3rem; height: 1.3rem; }
.fr-tabs button .dot { position: absolute; top: 3px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #ff4757; }
.gt-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 0.3rem; min-height: 0; }
.gt-card { flex-direction: column; gap: 0; }
.gt-card .item-img { width: 52%; max-height: 52%; }
.gt-card .gt-egg .gi { width: 100%; height: 100%; }
.gt-card .gt-egg { display: inline-flex; width: 46%; aspect-ratio: 1; }
.gt-card .have { top: 3px; bottom: auto; }
.gt-price { font-size: 0.7rem; font-weight: 800; color: var(--gold); }
.gt-card.locked { opacity: .45; }
.gt-card.locked .gt-price { color: var(--muted); }
.item-img.sm.gt-egg { display: inline-flex; width: 1.8rem; height: 1.8rem; }
.item-img.sm.gt-egg .gi { width: 100%; height: 100%; }
.cand.done { opacity: .45; }
.gt-list { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 0.25rem; min-height: 0; }
.gt-list .gt-row { padding: 0.15rem 0.5rem; min-height: 0; }
.gt-rw { display: inline-flex; align-items: center; gap: 2px; color: var(--gold); font-weight: 800; flex-shrink: 0; }
.gt-rw .gi { width: 1em; height: 1em; }

/* 戰隊 Boss（2026-10-01） */
.gb-view { display: flex; flex-direction: column; gap: 0.35rem; min-height: 0; }
.gb-boss { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; border-radius: 12px; background: linear-gradient(135deg, #3a1f2f, #1e2238); border: 1px solid #ff6b8155; flex-shrink: 0; }
.gb-boss img { width: 5.2rem; height: 5.2rem; object-fit: contain; filter: drop-shadow(0 4px 6px #0008); flex-shrink: 0; }
.gb-boss.down img { filter: grayscale(.8) brightness(.7); }
.gb-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.gb-info .chip { align-self: flex-start; font-size: 0.7rem; }
.gb-hp { height: 9px; border-radius: 99px; background: #ffffff1c; overflow: hidden; }
.gb-hp i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff4757, #ff9f43); transition: width .4s; }
.gb-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); grid-auto-flow: column; gap: 0.2rem 0.4rem; flex: 1; min-height: 0; }
.gb-rk { display: flex; align-items: center; gap: 0.3rem; padding: 0 0.4rem; border-radius: 8px; background: var(--panel); font-size: 0.74rem; min-height: 0; min-width: 0; }
.gb-rk .n { width: 1.1rem; text-align: center; font-weight: 900; color: var(--muted); flex-shrink: 0; }
.gb-rk .d { font-weight: 800; flex-shrink: 0; }
.gb-rk.eggL .n { color: #f0b429; } .gb-rk.eggE .n { color: #b38bff; } .gb-rk.eggR .n { color: #5aa8ff; }
.gb-rk.me { box-shadow: 0 0 0 1px var(--gold) inset; }
.gb-best { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border-radius: 10px; background: #3a3522; border: 1px solid #f5c84c88; font-size: 0.78rem; flex-shrink: 0; min-width: 0; }
.gb-best b { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.gb-best .d { font-weight: 800; flex-shrink: 0; }
.gb-best.me { box-shadow: 0 0 0 1px var(--gold) inset; }
.chip.gb-turn { background: #ff475733; color: #ffb3bd; }
/* 圖鑑：地區型態那一排（2026-10-01） */
.dex-forms { display: flex; gap: 0.25rem; min-width: 0; }
.dex-form { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0.15rem; background: #ffffff10; border-radius: 0.4rem; padding: 0.1rem 0.25rem; font-size: 0.68rem; }
.dex-form img { width: 1.4rem; height: 1.4rem; object-fit: contain; flex-shrink: 0; }
.dex-form i { width: 1.4rem; text-align: center; font-style: normal; color: var(--muted); flex-shrink: 0; }
.dex-form.off { color: var(--muted); }
.dex-forms.many { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 招式動畫（Phaser 畫布，fx-stage.js）：寶可夢上面、名牌下面；fx-under＝寶可夢後面變暗用 */
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fx-layer canvas { display: block; width: 100% !important; height: 100% !important; }
.fx-under { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
/* 對戰背景（fx-bg.js，2026-10-09）：Phaser 畫布墊在最底下；有它的時候舊的天氣／場地 DOM 不顯示 */
.bg-layer { position: absolute; inset: 0; pointer-events: none; }
.bg-layer canvas { display: block; width: 100% !important; height: 100% !important; }
.scene.bgx .weather, .scene.bgx .terrain { display: none; }