/* Pokémon Idle — giao diện game.
   Cảnh idle pixel art chiếm cả màn hình; HUD, thanh menu và các bảng nổi lên trên.
   Khung cửa sổ học theo menu Pokémon đời Black/White: nền xanh đêm, viền đôi, góc bo.
   Font tự host (Activity chặn CDN): VT323 cho chữ pixel + số, Be Vietnam Pro cho chữ thường. */
@font-face { font-family: "VT323"; src: url("fonts/vt323.woff2") format("woff2"); font-display: swap }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/bevn-400.woff2") format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/bevn-600.woff2") format("woff2"); font-weight: 600; font-display: swap }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/bevn-700.woff2") format("woff2"); font-weight: 700; font-display: swap }

:root {
  color-scheme: dark;
  --night: #0c1020; --win: #1b2340; --win-2: #26305a; --win-3: #313d70; --edge: #070912; --rim: #5a6aa6;
  --ink: #f5f1e3; --muted: #a8b2cf; --dim: #6c7699;
  --gold: #f6c453; --gold-d: #b8862a; --red: #ea5a47; --red-d: #a8332a; --green: #57c96d; --green-d: #2f8a43;
  --blue: #5c9bf2; --blue-d: #2f62b3; --purple: #a77cf2;
  --r1: #9aa4b5; --r2: #57c96d; --r3: #5c9bf2; --r4: #b086f5; --r5: #f6c453;
  --toc: #8fb0f5; --he: #6fd3a8;
  --t-normal:#a8a77a; --t-fire:#ee8130; --t-water:#6390f0; --t-grass:#7ac74c; --t-electric:#f7d02c; --t-ice:#96d9d6;
  --t-fighting:#c9483f; --t-poison:#a33ea1; --t-ground:#e2bf65; --t-flying:#a98ff3; --t-psychic:#f95587; --t-bug:#a6b91a;
  --t-rock:#b6a136; --t-ghost:#8a75b0; --t-dragon:#7f5cf6; --t-dark:#8b7466; --t-steel:#b7b7ce; --t-fairy:#d685ad;
  --pix: "VT323", ui-monospace, Consolas, monospace;
  --body: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --dock-h: 96px; --hud-h: 64px;
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--ink); font: 14px/1.45 var(--body); overflow: hidden }
button { font: inherit; color: inherit; cursor: pointer }
button:disabled { cursor: not-allowed }
img { image-rendering: pixelated }
.pix { font-family: var(--pix); letter-spacing: .02em }
.muted { color: var(--muted) } .dim { color: var(--dim) }
.good { color: var(--green) } .bad { color: var(--red) } .gold { color: var(--gold) }
[hidden] { display: none !important }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }

#game { position: fixed; inset: 0; overflow: hidden }

/* ================================================== khung cửa sổ */
.win { background: linear-gradient(180deg, var(--win-2), var(--win) 60%); border: 3px solid var(--edge); border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--rim), inset 0 3px 0 2px #ffffff12, 0 8px 0 #0008, 0 14px 30px #0007 }
.win-title { font: 400 26px/1 var(--pix); color: var(--gold); text-shadow: 2px 2px 0 var(--edge); letter-spacing: .03em }
.panel { background: #0b0f1f99; border: 2px solid #2c3766; border-radius: 10px; padding: 12px; display: grid; gap: 10px; align-content: start; min-width: 0 }
.panel h3 { margin: 0; font: 400 22px/1 var(--pix); color: var(--gold); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap }
.panel h3 .tag-r { margin-left: auto; font: 400 16px var(--pix); color: var(--muted) }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.row.between { justify-content: space-between } .row.end { justify-content: flex-end }
.note { color: var(--muted); font-size: 12px }

/* nút kiểu game: khối dày, ấn xuống được */
.gbtn { --c: var(--win-3); --d: #1d2550; border: 2px solid var(--edge); border-radius: 9px; background: var(--c);
  box-shadow: inset 0 -4px 0 var(--d), inset 0 2px 0 #ffffff30; padding: 7px 14px 10px; font-weight: 700; font-size: 13px;
  text-shadow: 1px 1px 0 #0008; transition: transform .06s }
.gbtn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--d), inset 0 2px 0 #ffffff30 }
.gbtn:hover:not(:disabled) { filter: brightness(1.12) }
.gbtn:disabled { filter: grayscale(.8) brightness(.6) }
.gbtn.go { --c: var(--green); --d: var(--green-d) } .gbtn.red { --c: var(--red); --d: var(--red-d) }
.gbtn.gold { --c: var(--gold); --d: var(--gold-d); color: #2a1d05; text-shadow: none } .gbtn.blue { --c: var(--blue); --d: var(--blue-d) }
.gbtn.sm { padding: 4px 9px 7px; font-size: 12px } .gbtn.lg { padding: 10px 22px 14px; font-size: 16px }
.gbtn.ghost { --c: #ffffff0d; --d: #00000040 }
.icon { width: 30px; height: 30px; image-rendering: pixelated; vertical-align: middle }
.icon.x2 { width: 60px; height: 60px } .icon.s { width: 24px; height: 24px }

/* ================================================== cảnh idle */
.scene { position: absolute; inset: 0; background: #1a2a3a; overflow: hidden }
.layer { position: absolute; left: 0; right: 0; background-repeat: repeat-x; image-rendering: pixelated; will-change: background-position }
.ground { position: absolute; left: 0; right: 0; bottom: 0 }
.walkers { position: absolute; left: 0; right: 0 }
.walker { position: absolute; bottom: 0; transform: translateX(-50%); display: grid; justify-items: center }
.walker img { display: block; transform: scaleX(-1); filter: drop-shadow(0 2px 0 #0006) }
.walker .bob { animation: bob .5s ease-in-out infinite alternate }
.walker .shadow { width: 70%; height: 8px; border-radius: 50%; background: #0006; margin-top: -6px }
.walker .lv { font: 400 15px/1 var(--pix); background: #0009; padding: 0 5px; border-radius: 4px; margin-top: 2px }
.walker.idle .bob { animation-duration: 1.4s }
@keyframes bob { from { transform: translateY(0) } to { transform: translateY(-5px) } }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(#0006, transparent 22%, transparent 70%, #0009); pointer-events: none }
.campfire { position: absolute; bottom: 0; width: 28px; height: 28px; transform: translateX(-50%); border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #ffe27a, #ff8a2a 45%, #ff3d1f 70%, transparent 72%); animation: flicker .25s infinite alternate }
@keyframes flicker { from { transform: translateX(-50%) scale(1) } to { transform: translateX(-50%) scale(1.12, .92) } }

.fx-loot { position: absolute; inset: 0; pointer-events: none; z-index: 3 }
.pop { position: absolute; display: flex; gap: 2px; align-items: center; font: 400 22px/1 var(--pix); color: #fff; text-shadow: 2px 2px 0 #000;
  animation: pop 1.6s ease-out forwards }
.pop img { width: 30px; height: 30px }
@keyframes pop { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0 } 15% { opacity: 1; transform: translate(-50%, 0) scale(1) }
  100% { transform: translate(-50%, -70px); opacity: 0 } }

/* ================================================== HUD */
.hud { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; gap: 10px; align-items: flex-start;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 0; pointer-events: none }
.hud > * { pointer-events: auto }
.pcard { display: flex; gap: 10px; align-items: center; padding: 6px 14px 6px 6px; min-width: 210px }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(#3b4a86, #141a33); border: 3px solid var(--edge);
  box-shadow: inset 0 0 0 2px var(--gold); display: grid; place-items: center; overflow: hidden }
.avatar img { max-width: 60px; max-height: 60px }
.pname { font-weight: 700; font-size: 14px; line-height: 1.1 }
.plv { font: 400 18px/1 var(--pix); color: var(--gold) }
.xpbar { height: 6px; width: 120px; background: #0008; border-radius: 3px; overflow: hidden; margin-top: 3px }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--he)) }
.wallet { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.coin { display: flex; align-items: center; gap: 4px; padding: 2px 12px 2px 4px; border-radius: 99px; background: #0b0f1fcc;
  border: 2px solid var(--edge); box-shadow: inset 0 0 0 1px #3b4a86; font: 400 22px/1 var(--pix) }
.coin img { width: 30px; height: 30px }

/* ================================================== lớp nổi trên cảnh */
.overlay { position: absolute; inset: var(--hud-h) 0 var(--dock-h); z-index: 5; pointer-events: none }
.overlay > * { pointer-events: auto }
.plaque { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); text-align: center; padding: 8px 18px 10px; min-width: 300px }
.plaque .st-key { font: 400 18px/1 var(--pix); color: var(--muted) }
.plaque .st-name { font: 400 30px/1 var(--pix); color: var(--ink); text-shadow: 2px 2px 0 var(--edge) }
.plaque .types { display: flex; gap: 4px; justify-content: center; margin: 4px 0 }
.clockbar { height: 10px; background: #000a; border-radius: 5px; overflow: hidden; border: 1px solid #000; margin-top: 4px }
.clockbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--he), #43c6ff); transition: width 1s linear }
.clockbar i.full { background: linear-gradient(90deg, var(--gold), #ff9c3a) }
.clocktxt { font: 400 18px/1.2 var(--pix); color: var(--muted) }

.chest { position: absolute; right: 24px; top: 50%; transform: translateY(-60%); display: grid; justify-items: center; gap: 4px;
  background: none; border: 0; padding: 0 }
.chest .box { position: relative; width: 96px; height: 76px }
.chest .lid { position: absolute; left: 0; right: 0; top: 0; height: 34px; border-radius: 14px 14px 4px 4px; background: linear-gradient(#b8722f, #8a4d1c);
  border: 3px solid #3d2008; box-shadow: inset 0 3px 0 #e19a52 }
.chest .body { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; border-radius: 4px 4px 8px 8px; background: linear-gradient(#a2601f, #6d3a12);
  border: 3px solid #3d2008; box-shadow: inset 0 3px 0 #c98a46 }
.chest .band { position: absolute; left: 0; right: 0; top: 28px; height: 10px; background: linear-gradient(#ffd977, #c99325); border-block: 2px solid #3d2008 }
.chest .lock { position: absolute; left: 50%; top: 22px; width: 18px; height: 22px; transform: translateX(-50%); background: linear-gradient(#ffe48f, #c99325);
  border: 2px solid #3d2008; border-radius: 4px }
.chest.ready .box { animation: wiggle 1.2s ease-in-out infinite; filter: drop-shadow(0 0 12px #ffd977) }
.chest.full .box { filter: drop-shadow(0 0 18px #ff9c3a) }
@keyframes wiggle { 0%, 70%, 100% { transform: rotate(0) } 75% { transform: rotate(-4deg) } 85% { transform: rotate(4deg) } 95% { transform: rotate(-2deg) } }
.chest .loot-sum { padding: 4px 10px; font: 400 18px/1.1 var(--pix); display: grid; gap: 2px; min-width: 132px }
.chest .loot-sum span { display: flex; align-items: center; gap: 4px; justify-content: space-between }
.chest .loot-sum img { width: 24px; height: 24px }
.chest .cta { font: 400 20px/1 var(--pix); color: var(--gold); text-shadow: 2px 2px 0 #000 }

.siderail { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px }
.railbtn { position: relative; display: grid; grid-template-columns: 44px auto; gap: 8px; align-items: center; padding: 6px 12px 6px 6px; text-align: left; min-width: 180px }
.railbtn .ico { width: 44px; height: 44px; border-radius: 10px; background: #0b0f1f; display: grid; place-items: center; border: 2px solid #2c3766 }
.railbtn b { font: 400 20px/1 var(--pix); color: var(--gold); display: block }
.railbtn small { color: var(--muted); font-size: 12px }
.dot { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red);
  border: 2px solid var(--edge); font: 400 16px/16px var(--pix); text-align: center; color: #fff }

.railbtn.gate { background: linear-gradient(#c4473a, #7d2219); box-shadow: inset 0 0 0 2px #ffb59f, 0 6px 0 #0008; animation: gatepulse 1.8s ease-in-out infinite }
.railbtn.gate b { color: #fff } .railbtn.gate small { color: #ffd9cf }
@keyframes gatepulse { 50% { filter: brightness(1.18) } }

/* ================================================== thanh menu dưới */
.dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; display: flex; justify-content: center; gap: 8px;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, #070912ee 35%) }
.dock-btn { position: relative; width: 86px; display: grid; justify-items: center; gap: 0; padding: 6px 4px 8px; border-radius: 14px;
  background: linear-gradient(var(--win-2), var(--win)); border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px var(--rim), inset 0 -4px 0 #0006 }
.dock-btn img { width: 48px; height: 48px }
.dock-btn span { font: 400 19px/1 var(--pix); letter-spacing: .02em }
.dock-btn.on { box-shadow: inset 0 0 0 2px var(--gold), inset 0 -4px 0 #0006; transform: translateY(-6px) }
.dock-btn:hover { filter: brightness(1.15) }

/* ================================================== bảng menu (sheet) */
.sheet { position: absolute; z-index: 20; top: calc(var(--hud-h) + 6px); bottom: calc(var(--dock-h) + 4px); right: 14px;
  width: min(620px, calc(100vw - 28px)); display: grid; grid-template-rows: auto minmax(0, 1fr); animation: slidein .22s ease-out }
.sheet.wide { width: min(1180px, calc(100vw - 28px)) }
@keyframes slidein { from { transform: translateX(30px); opacity: 0 } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px 14px; border-bottom: 2px solid #2c3766 }
.sheet-head img { width: 40px; height: 40px }
.sheet-head .win-title { flex: 1 }
.xbtn { width: 38px; height: 38px; border-radius: 10px; background: var(--red); border: 2px solid var(--edge); box-shadow: inset 0 -3px 0 var(--red-d);
  font: 400 26px/1 var(--pix); padding: 0 }
.sheet-body { overflow: auto; padding: 12px; display: grid; gap: 12px; align-content: start; min-height: 0 }

/* ================================================== chung cho danh sách */
.ty { display: inline-block; font: 700 10px/1.5 var(--body); text-transform: uppercase; padding: 0 6px; border-radius: 4px; color: #16181d; border: 1px solid #0006 }
.stars { color: var(--gold); letter-spacing: -1px }
.rar-1 { --rc: var(--r1) } .rar-2 { --rc: var(--r2) } .rar-3 { --rc: var(--r3) } .rar-4 { --rc: var(--r4) } .rar-5 { --rc: var(--r5) }
.rar-txt { color: var(--rc); font-weight: 700 }
.mini { position: relative; width: 56px; height: 56px; border-radius: 10px; background: radial-gradient(#ffffff18, #0000 70%), #0b0f1f;
  border: 2px solid var(--rc, #2c3766); display: grid; place-items: center; padding: 0 }
.mini img { max-width: 52px; max-height: 52px }
.mini i { position: absolute; bottom: 1px; right: 3px; font: 400 14px/1 var(--pix); font-style: normal; text-shadow: 1px 1px 0 #000 }
.mini.sel { box-shadow: 0 0 0 3px var(--gold) } .mini.fit { box-shadow: 0 0 0 2px var(--he) inset }
.mini.out { opacity: .35 }
.minis { display: flex; flex-wrap: wrap; gap: 6px }
.bar { height: 8px; background: #0009; border-radius: 4px; overflow: hidden }
.bar i { display: block; height: 100%; background: var(--he) }
.empty { color: var(--muted); padding: 18px; text-align: center }
input[type=search], select { font: inherit; padding: 8px 10px; border-radius: 9px; border: 2px solid var(--edge); background: #0b0f1f;
  color: var(--ink); box-shadow: inset 0 0 0 1px #2c3766; min-width: 0 }

/* ---------- Đội ---------- */
.teamgrid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 12px; align-items: start }
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px }
.slot { aspect-ratio: 1 / 1.15; border-radius: 10px; border: 2px dashed #2c3766; background: #0b0f1f; display: grid; place-items: center;
  font: 400 15px var(--pix); color: var(--dim); position: relative; padding: 2px; min-width: 0 }
.slot.full { border: 2px solid var(--rc, #2c3766); color: var(--ink); background: radial-gradient(#ffffff14, #0000 70%), #0b0f1f }
.slot.full img { max-width: 56px; max-height: 50px }
.slot .nm { font: 600 10px/1.1 var(--body); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.slot .lv { font: 400 14px/1 var(--pix) }
.slot.locked { opacity: .35; border-style: solid }
.trow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px; border: 0; background: none;
  text-align: left; border-radius: 6px; width: 100% }
.trow:hover, .trow.sel { background: #ffffff0d }
.hex { width: 34px; height: 30px; display: grid; place-items: center; font: 400 18px var(--pix); color: #121; background: #3a4566;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%) }
.hex.t1 { background: #c08451 } .hex.t2 { background: #c3ccd6 } .hex.t3 { background: var(--gold) }
.hex.max { background: linear-gradient(135deg, #8a63ff, #1fc2d6); color: #fff }
.tname { font-weight: 600; min-width: 0 } .tname small { display: block; color: var(--muted); font-weight: 400; font-size: 11px }
.trow.off .tname { color: var(--muted); font-weight: 400 }
.bps { font: 400 16px var(--pix); color: var(--dim); white-space: nowrap } .bps .on { color: var(--ink) }
.use { font: 700 9px/1.6 var(--body); letter-spacing: .05em; text-transform: uppercase; padding: 0 5px; border-radius: 3px; border: 1px solid currentColor; margin-left: 4px }
.use.combat { color: var(--red) } .use.farm { color: var(--he) } .use.dispatch { color: var(--toc) } .use.daycare { color: var(--purple) }
.use.daily { color: var(--gold) } .use.train { color: #c3ccd6 }
.fxchips { display: flex; gap: 4px; flex-wrap: wrap }
.fx { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: #0b0f1f; border: 1px solid #2c3766 }
.fx.home { border-color: var(--he); color: var(--he) } .fx.combat { border-color: var(--red); color: #ff9a8c }
.tabs { display: flex; gap: 4px; flex-wrap: wrap }
.tab { font: 400 20px/1 var(--pix); padding: 6px 12px; border-radius: 9px; border: 2px solid var(--edge); background: #0b0f1f; color: var(--muted) }
.tab.on { background: var(--gold); color: #2a1d05 }
.tools { display: flex; gap: 6px; flex-wrap: wrap } .tools input { flex: 1 1 160px }
.mons { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px }
.mon { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; text-align: left; padding: 6px; border-radius: 10px; background: #0b0f1f;
  border: 2px solid #232c52; border-left: 4px solid var(--rc); position: relative }
.mon:hover { border-color: #3c4a85 } .mon.in { background: #1d2a4f; box-shadow: inset 0 0 0 2px var(--gold) }
.mon.away { opacity: .5 }
.mon .nm { font-weight: 700 } .mon .sub { font-size: 11px; color: var(--muted) }
.mon .gain { position: absolute; top: 4px; right: 6px; font: 400 16px var(--pix); color: var(--he) }
.mon img { max-width: 56px; max-height: 56px; align-self: center }
.tags { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px }
.tag { font-size: 10px; padding: 0 6px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap }
.tag.toc { color: var(--toc) } .tag.he { color: var(--he) } .tag.unique { color: var(--red) } .tag.hit { background: currentColor } .tag.hit span { color: #0b0f1f }
.busy { font: 400 14px var(--pix); color: var(--gold) }
.saves { display: grid; gap: 6px }
.save { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; font-size: 12px }
.save .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted) } .save b { color: var(--ink) }
.comps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px }
.comp { padding: 10px; border-radius: 10px; background: #0b0f1f; border: 2px solid #232c52; display: grid; gap: 6px }
.comp h4 { margin: 0; display: flex; justify-content: space-between; font-size: 13px }
.comp .members img { width: 30px; height: 30px } .comp .members img.miss { opacity: .25; filter: grayscale(1) }
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px }
.tcard { text-align: left; padding: 8px; border-radius: 10px; background: #0b0f1f; border: 2px solid #232c52; display: grid; gap: 3px }
.tcard p { margin: 0; font-size: 12px; color: var(--muted) }
.chip { border: 0; background: var(--gold); color: #2a1d05; border-radius: 99px; padding: 2px 10px; font-weight: 700; font-size: 12px }

/* ---------- Bản đồ ---------- */
.stages { display: grid; gap: 8px }
.stagecard { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px;
  border-radius: 12px; border: 3px solid var(--edge); overflow: hidden; min-height: 86px; box-shadow: inset 0 0 0 2px #2c3766 }
.stagecard .bgthumb { position: absolute; inset: 0; background-size: auto 130%; background-position: left bottom; background-repeat: repeat-x; image-rendering: pixelated }
.stagecard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b0f1fe6 0, #0b0f1fb0 45%, #0b0f1f40 75%, #0b0f1f99) }
.stagecard > :not(.bgthumb) { position: relative; z-index: 1 }
.stagecard .num { font: 400 34px/1 var(--pix); text-align: center; text-shadow: 2px 2px 0 #000 }
.stagecard.cleared .num { color: var(--green) } .stagecard.gate { box-shadow: inset 0 0 0 2px var(--gold) } .stagecard.gate .num { color: var(--gold) }
.stagecard.locked { filter: grayscale(1) brightness(.55) }
.stagecard .nm { font: 400 24px/1 var(--pix) } .stagecard .meta { font-size: 12px; color: var(--muted) }
.stagecard .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.farming-flag { font: 400 15px var(--pix); color: var(--he) }

/* ---------- Nhiệm vụ / Phái cử / Nhà trẻ ---------- */
.quest { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px;
  background: #0b0f1f; border: 2px solid #232c52 }
.quest.done { border-color: var(--green) } .quest.claimed { opacity: .5 }
.quest .qn { font: 400 18px var(--pix); color: var(--muted) } .quest > :last-child { justify-self: end }
.jobs { display: grid; gap: 10px }
.job { padding: 10px; border-radius: 12px; background: #0b0f1f; border: 2px solid #232c52; display: grid; gap: 8px }
.job.running { border-color: var(--blue) } .job.claimed { opacity: .55 }
.job h4 { margin: 0; display: flex; gap: 8px; align-items: baseline; font-size: 14px } .job h4 .tag-r { margin-left: auto; font: 400 17px var(--pix); color: var(--muted) }
.req { font-size: 12px; color: var(--muted) } .req b { color: var(--ink) }
.pool { display: flex; flex-wrap: wrap; gap: 4px; max-height: 200px; overflow: auto; padding: 6px; border-radius: 10px; background: #070912 }
.pool .mini { width: 48px; height: 48px } .pool .mini img { max-width: 44px; max-height: 44px }
.timer { font: 400 26px/1 var(--pix); color: var(--blue) }
.care { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px }
.carecell { border-radius: 12px; background: #0b0f1f; border: 2px solid var(--rc, #232c52); padding: 8px; display: grid; justify-items: center; gap: 2px; font-size: 12px }
.carecell.emptyc { border-style: dashed; color: var(--dim); min-height: 120px; align-content: center; font: 400 18px var(--pix) }
.feed { display: grid; gap: 4px; max-height: 420px; overflow: auto }
.feedrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 3px 6px; border-radius: 8px;
  background: #0b0f1f; border-left: 4px solid var(--rc) }
.feedrow img { max-width: 40px; max-height: 40px }

/* ================================================== khởi đầu */
.intro { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: #070912aa }
.intro-box { max-width: 860px; width: 100%; padding: 22px; display: grid; gap: 16px; text-align: center }
.intro-box h1 { margin: 0; font: 400 46px/1 var(--pix); color: var(--gold); text-shadow: 3px 3px 0 var(--edge) }
.starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.starter { padding: 14px 8px; border-radius: 14px; background: radial-gradient(#ffffff1a, transparent 65%), #0b0f1f; border: 3px solid var(--edge);
  box-shadow: inset 0 0 0 2px #2c3766; display: grid; justify-items: center; gap: 6px; transition: transform .12s }
.starter:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--gold) }
.starter img { width: 160px; height: 160px; image-rendering: auto; object-fit: contain }
.starter b { font: 400 28px/1 var(--pix) }

/* ================================================== trận */
.battle { position: absolute; inset: 0; z-index: 40; background: #05070e; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.bt-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font: 400 22px/1 var(--pix) }
.bt-top .chipx { padding: 3px 10px; border-radius: 8px; background: #0b0f1f; border: 2px solid #2c3766; font-size: 18px }
.bt-top .sp { margin-left: auto; display: flex; gap: 6px; align-items: center }
.bt-stage-wrap { display: grid; place-items: center; min-height: 0; padding: 0 10px }
.bt-stage { position: relative; width: min(100%, calc((100vh - 290px) * 16 / 9), 1180px); aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 14px; border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px var(--rim) }
.bt-stage .layer { animation: none !important }
.bt-dim { position: absolute; inset: 0; background: linear-gradient(#0003, #0000 40%, #0005) }
.platform { position: absolute; border-radius: 50%; background: radial-gradient(#00000070, #0000 70%) }
.platform.foe { right: 9%; top: 47%; width: 30%; height: 11% }
.platform.me { left: 5%; bottom: 3%; width: 36%; height: 13% }
.bmon { position: absolute; transform-origin: 50% 100%; display: grid; place-items: end center }
.bmon img { display: block; image-rendering: pixelated }
.bmon.foe { right: 24%; top: 52%; transform: translate(50%, -100%) }
.bmon.me { left: 23%; bottom: 9%; transform: translateX(-50%) }
.bmon.lunge-me { animation: lungeMe .35s ease } .bmon.lunge-foe { animation: lungeFoe .35s ease }
@keyframes lungeMe { 50% { transform: translateX(-50%) translate(34px, -18px) } }
@keyframes lungeFoe { 50% { transform: translate(50%, -100%) translate(-34px, 18px) } }
.bmon.hit img { animation: hitflash .45s steps(2) }
@keyframes hitflash { 0%, 50% { filter: brightness(3) saturate(0) } 25%, 75% { opacity: .2 } 100% { filter: none } }
.bmon.faint img { animation: faintdrop .7s ease-in forwards }
@keyframes faintdrop { to { transform: translateY(60%); opacity: 0; clip-path: inset(0 0 100% 0) } }
.bmon.enter img { animation: enter .5s ease-out }
@keyframes enter { 0% { transform: scale(0); filter: brightness(4) } 60% { transform: scale(1.1); filter: brightness(2) } 100% { transform: scale(1) } }
.bmon.mega img { filter: drop-shadow(0 0 10px #8a63ff) drop-shadow(0 0 18px #1fc2d6) }
.bmon.gone img { opacity: 0 }
.plate { position: absolute; width: min(40%, 360px); padding: 8px 12px 10px; background: linear-gradient(#f4efdc, #ddd5b8); color: #2a2a22;
  border: 3px solid #3b3a2c; border-radius: 12px 4px 12px 4px; box-shadow: 0 4px 0 #0006 }
.plate.foe { left: 3%; top: 6% } .plate.me { right: 3%; bottom: 7% }
.plate .pn { display: flex; gap: 8px; align-items: baseline; font: 400 26px/1 var(--pix) }
.plate .pn .lvx { margin-left: auto; font-size: 22px }
.plate .stt { font: 700 10px/1.6 var(--body); padding: 0 5px; border-radius: 3px; color: #111 }
.hpline { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; margin-top: 4px }
.hpline b { font: 400 18px/1 var(--pix); background: #3b3a2c; color: #f6c453; padding: 0 5px; border-radius: 3px }
.hp { height: 10px; border-radius: 5px; background: #3b3a2c; overflow: hidden; border: 2px solid #3b3a2c }
.hp i { display: block; height: 100%; transition: width .5s ease, background-color .3s }
.hp i.hi { background: #4ccf6a } .hp i.mid { background: #f2c14e } .hp i.lo { background: #e5534b }
.hpnum { text-align: right; font: 400 22px/1 var(--pix); margin-top: 2px }
.balls { display: flex; gap: 2px; margin-top: 4px } .balls img { width: 18px; height: 18px } .balls img.out { filter: grayscale(1) brightness(.5) }
.stt.st-brn { background: #ee8130 } .stt.st-par { background: #f7d02c } .stt.st-psn { background: #a33ea1; color: #fff } .stt.st-frz { background: #96d9d6 } .stt.st-slp { background: #a0a8b8 }
.weather-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3 }
.weather-fx.rain { background: repeating-linear-gradient(105deg, transparent 0 14px, #9cc8ff55 14px 15px); background-size: 200% 200%; animation: rain .35s linear infinite }
@keyframes rain { to { background-position: -40px 120px } }
.weather-fx.sun { background: radial-gradient(circle at 85% 0%, #ffe9a080, transparent 55%) }
.weather-fx.sand { background: repeating-linear-gradient(170deg, transparent 0 8px, #d8b46a40 8px 10px); animation: rain .5s linear infinite }
.proj { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(#fff, var(--pc) 45%, transparent 70%);
  box-shadow: 0 0 22px var(--pc); z-index: 4; animation: fly var(--ft, .38s) ease-in forwards }
@keyframes fly { from { left: var(--x0); top: var(--y0) } to { left: var(--x1); top: var(--y1); transform: scale(1.6) } }
.burst { position: absolute; width: 130px; height: 130px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 4;
  background: radial-gradient(#ffffffcc, var(--pc) 35%, transparent 65%); animation: burst .4s ease-out forwards }
@keyframes burst { from { transform: translate(-50%, -50%) scale(.2); opacity: 1 } to { transform: translate(-50%, -50%) scale(1.4); opacity: 0 } }
.dmg { position: absolute; z-index: 6; font: 400 44px/1 var(--pix); color: #fff; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000; animation: dmg 1s ease-out forwards }
.dmg.super { color: #ffd84a; font-size: 56px } .dmg.weak { color: #9fb2c4; font-size: 34px }
@keyframes dmg { 0% { transform: translate(-50%, 0) scale(.5) } 20% { transform: translate(-50%, -20px) scale(1.15) } 100% { transform: translate(-50%, -70px); opacity: 0 } }
.banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 7; font: 400 46px/1 var(--pix); color: #ffd84a;
  text-shadow: 3px 3px 0 #000; animation: bannerIn 1s ease-out forwards; white-space: nowrap }
.banner.weak { color: #c8d4e0 } .banner.crit { color: #ff7a5c }
@keyframes bannerIn { 0% { transform: translate(-50%, -50%) scale(2); opacity: 0 } 20% { transform: translate(-50%, -50%) scale(1); opacity: 1 } 80% { opacity: 1 } 100% { opacity: 0 } }
.shake { animation: shake .4s }
@keyframes shake { 20% { transform: translate(-8px, 4px) } 40% { transform: translate(7px, -5px) } 60% { transform: translate(-5px, 3px) } 80% { transform: translate(4px, -2px) } }
.vs { position: absolute; inset: 0; z-index: 9; display: grid; grid-template-rows: 1fr auto 1fr; align-items: center; background: linear-gradient(160deg, #1d2b6b, #070912 50%, #6b1d1d);
  animation: vsout .4s ease-in 1.6s forwards; pointer-events: none }
.vs .side { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; padding: 0 20px }
.vs .side img { max-width: 64px; max-height: 64px }
.vs .side.me { animation: fromL .5s ease-out } .vs .side.foe { animation: fromR .5s ease-out }
.vs .big { text-align: center; font: 400 96px/1 var(--pix); color: var(--gold); text-shadow: 4px 4px 0 #000 }
.vs .big small { display: block; font-size: 28px; color: var(--ink) }
@keyframes fromL { from { transform: translateX(-60vw) } } @keyframes fromR { from { transform: translateX(60vw) } }
@keyframes vsout { to { opacity: 0; visibility: hidden } }
.bt-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 10px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
.textbox { padding: 12px 16px; min-height: 120px; font: 400 26px/1.25 var(--pix); background: linear-gradient(#26305a, #161d38);
  border: 3px solid var(--edge); border-radius: 12px; box-shadow: inset 0 0 0 3px #c9c2a0 }
.textbox div { min-height: 1.25em }
.cmds { display: grid; gap: 8px; align-content: start }
.moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.move { --mc: #777; position: relative; text-align: left; padding: 6px 10px 8px; border-radius: 10px; border: 3px solid var(--edge);
  background: linear-gradient(var(--mc), color-mix(in srgb, var(--mc) 62%, #000)); box-shadow: inset 0 -4px 0 #0005, inset 0 2px 0 #fff4;
  color: #fff; text-shadow: 1px 1px 0 #000, 0 0 3px #000 }
.move:hover:not(:disabled) { filter: brightness(1.12) } .move:active:not(:disabled) { transform: translateY(2px) }
.move:disabled { filter: grayscale(.7) brightness(.55) }
.move b { font: 400 24px/1 var(--pix); display: block }
.move .mm { font-size: 11px }
.move .eff { position: absolute; top: 5px; right: 8px; font: 400 16px/1 var(--pix); padding: 1px 5px; border-radius: 4px; background: #000b }
.move .eff.up { color: #ffd84a } .move .eff.down { color: #c8d4e0 } .move .eff.zero { color: #ff8a7a }
.cmdrow { display: flex; gap: 6px; flex-wrap: wrap }
.partygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px }
.pmember { display: grid; grid-template-columns: 48px 1fr; gap: 6px; align-items: center; padding: 4px 8px; border-radius: 10px; background: #0b0f1f;
  border: 2px solid #2c3766; text-align: left }
.pmember img { max-width: 48px; max-height: 48px } .pmember.act { border-color: var(--gold) } .pmember:disabled { opacity: .4 }
.pmember .bar i { background: var(--green) } .pmember .bar i.mid { background: var(--gold) } .pmember .bar i.lo { background: var(--red) }
.result { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: #000a }
.result .win { padding: 24px 30px; text-align: center; display: grid; gap: 12px; min-width: 320px; max-width: 520px }
.result h2 { margin: 0; font: 400 64px/1 var(--pix); color: var(--gold); text-shadow: 3px 3px 0 #000 }
.result.lost h2 { color: var(--red) }

/* ================================================== modal + toast + tải */
.modal { position: fixed; inset: 0; z-index: 60; background: #000b; display: grid; place-items: center; padding: 16px }
.modal-box { max-width: 520px; width: 100%; padding: 18px 20px; display: grid; gap: 10px }
.modal-box h2 { margin: 0; font: 400 34px/1 var(--pix); color: var(--gold) } .modal-box p { margin: 0 }
.loot { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px }
.lootcell { display: grid; justify-items: center; padding: 8px; border-radius: 10px; background: #0b0f1f; border: 2px solid #2c3766; animation: lootin .35s backwards }
.lootcell img { width: 48px; height: 48px } .lootcell b { font: 400 30px/1 var(--pix) } .lootcell span { font-size: 11px; color: var(--muted) }
@keyframes lootin { from { transform: scale(.4); opacity: 0 } }
.toast { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 16px); transform: translateX(-50%); z-index: 70; padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: #111; font-weight: 700; max-width: calc(100vw - 32px); box-shadow: 0 6px 0 #0008 }
.toast.err { background: var(--red); color: #fff }
.loading { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; align-content: center; gap: 14px; background: var(--night);
  font: 400 26px var(--pix); color: var(--muted) }
.loading-ball { width: 56px; height: 56px; border-radius: 50%; border: 4px solid #111; background: linear-gradient(var(--red) 0 45%, #111 45% 55%, #f4f4f4 55%);
  animation: spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.loading.fatal { font: 400 16px var(--body); padding: 24px; text-align: center } .loading.fatal b { color: var(--gold) }

/* ================================================== màn nhỏ */
@media (max-width: 900px) {
  .teamgrid { grid-template-columns: minmax(0, 1fr) }
  .bt-bottom { grid-template-columns: minmax(0, 1fr) }
  .textbox { min-height: 76px; font-size: 22px }
}
@media (max-width: 700px) {
  :root { --dock-h: 78px; --hud-h: 58px }
  .dock { gap: 4px } .dock-btn { width: 62px; padding: 4px 2px 6px } .dock-btn img { width: 36px; height: 36px } .dock-btn span { font-size: 15px }
  .pcard { min-width: 0 } .pcard .xpbar { width: 60px } .pname { display: none }
  .sheet { left: 6px; right: 6px; width: auto; top: calc(var(--hud-h) + 4px) } .sheet.wide { width: auto }
  .plaque { min-width: 0; width: calc(100% - 16px) }
  .siderail { top: 128px; transform: none; left: 8px; gap: 6px } .railbtn { min-width: 0; grid-template-columns: 40px; padding: 4px } .railbtn .rt { display: none }
  .railbtn .ico { width: 40px; height: 40px }
  .chest { right: 8px; top: 128px; transform: none } .chest .box { width: 64px; height: 52px } .chest .lid { height: 23px } .chest .band { top: 19px } .chest .lock { top: 14px; width: 14px; height: 18px }
  .chest .loot-sum { min-width: 96px; font-size: 16px; padding: 3px 6px } .chest .loot-sum img { width: 18px; height: 18px } .chest .cta { font-size: 16px }
  .avatar { width: 42px; height: 42px } .plv { font-size: 16px } .pcard { padding: 4px 10px 4px 4px }
  .wallet { gap: 4px } .coin { font-size: 17px; padding: 1px 7px 1px 2px } .coin img { width: 20px; height: 20px }
  .plaque { top: 4px; padding: 6px 10px 8px } .plaque .st-name { font-size: 22px } .plaque .types { margin: 2px 0 }
  .starters { grid-template-columns: minmax(0, 1fr) } .starter img { width: 96px; height: 96px }
  .stagecard { grid-template-columns: 52px minmax(0, 1fr) } .stagecard .acts { grid-column: 1 / -1; justify-content: flex-start }
  .plate { width: 50%; padding: 5px 8px 6px } .plate .pn { font-size: 19px } .plate .pn .lvx { font-size: 17px } .hpnum { font-size: 17px }
  .bt-stage { width: 100%; aspect-ratio: 1 / 1.05; max-height: calc(100vh - 330px) }
  .bt-top { font-size: 18px; gap: 6px; flex-wrap: wrap; padding: 6px 10px } .bt-top .chipx { font-size: 15px }
  .bt-bottom { padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 6px } .textbox { min-height: 60px; font-size: 19px; padding: 8px 12px }
  .move b { font-size: 20px } .move { padding: 4px 8px 6px } .cmdrow .gbtn { padding: 6px 10px 9px; font-size: 12px }
  .platform.foe { right: 4%; top: 40%; width: 44% } .bmon.foe { right: 26%; top: 46% } .platform.me { width: 52% } .bmon.me { left: 28% }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition: none !important } }