/* Gen 3/4 style battle screen. Logical size 512x384 (DS x2), scaled to fit by JS. */
:root {
  --ink: #2a2a3a;
  --box: #f8f8f0;
  --box-edge: #405060;
  --frame: #3a6078;
  --frame-2: #88b0c8;
  --hp-green: #58d080;
  --hp-green-hi: #70f8a8;
  --hp-yellow: #e8c020;
  --hp-yellow-hi: #f8e038;
  --hp-red: #e04030;
  --hp-red-hi: #f85838;
  --sp: #4890f8;
  --exp: #40a8f8;
}

.battle-wrap {
  position: fixed; inset: 0; background: #101018; z-index: 1000 !important;
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.battle {
  position: relative; flex: none; width: 512px; height: 384px; overflow: hidden;
  font-family: "DotGothic16", "Lucida Console", monospace; color: var(--ink);
  transform-origin: center; image-rendering: pixelated; user-select: none;
  box-shadow: 0 0 0 4px #000, 0 10px 40px #000a;
}

/* ---------- field & themes ---------- */
.field { position: absolute; inset: 0 0 96px 0; overflow: hidden; }
.field::before, .field::after { content: ""; position: absolute; left: 0; right: 0; }
.field::before { top: 0; height: 58%; background: var(--sky); }
.field::after { top: 58%; bottom: 0; background: var(--ground); }
.theme-plains   { --sky: linear-gradient(#78c8f8, #c8ecf8); --ground: linear-gradient(#a8e070, #70b848); --pf: #58a038; --pf-hi: #90d060; }
.theme-forest   { --sky: linear-gradient(#5aa070, #a8d898); --ground: linear-gradient(#78b850, #40803a); --pf: #3a7030; --pf-hi: #70a850; }
.theme-city     { --sky: linear-gradient(#f0a868, #f8d8a8); --ground: linear-gradient(#b0b0b8, #808088); --pf: #686870; --pf-hi: #a0a0a8; }
.theme-tech     { --sky: linear-gradient(#203858, #4878a8); --ground: linear-gradient(#486078, #283848); --pf: #30a0c8; --pf-hi: #78e0f8; }
.theme-snow     { --sky: linear-gradient(#a8c8e8, #e8f0f8); --ground: linear-gradient(#f0f8ff, #c8d8f0); --pf: #a0b8d8; --pf-hi: #e0ecf8; }
.theme-desert   { --sky: linear-gradient(#f8c870, #f8e8b8); --ground: linear-gradient(#e8c880, #c89848); --pf: #b08038; --pf-hi: #e0b868; }
.theme-water    { --sky: linear-gradient(#68b8f0, #c0e8f8); --ground: linear-gradient(#f0e0a8, #c8b070); --pf: #d8c890; --pf-hi: #f8f0c0; }
.theme-mountain { --sky: linear-gradient(#8098c8, #c8d0e8); --ground: linear-gradient(#a89880, #786858); --pf: #685848; --pf-hi: #a89070; }
.theme-cave     { --sky: linear-gradient(#302838, #504858); --ground: linear-gradient(#585060, #383040); --pf: #706878; --pf-hi: #988ca0; }
.theme-digital  { --sky: linear-gradient(#182048, #3858a0); --ground: repeating-linear-gradient(90deg, #1838a0 0 2px, #0c1c58 2px 32px); --pf: #2850c8; --pf-hi: #70a8f8; }
.theme-dark     { --sky: linear-gradient(#100818, #301838); --ground: linear-gradient(#281830, #100810); --pf: #483050; --pf-hi: #785880; }

.platform {
  position: absolute; border-radius: 50%; z-index: 1;
  background: radial-gradient(ellipse at 50% 40%, var(--pf-hi), var(--pf) 70%);
  box-shadow: inset 0 -4px 0 #0003;
}
.platform.enemy { left: 268px; top: 128px; width: 216px; height: 52px; }
.platform.player { left: 8px; top: 236px; width: 268px; height: 64px; }

.mon { position: absolute; z-index: 2; display: flex; align-items: flex-end; justify-content: center; }
.mon img { image-rendering: pixelated; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.mon.enemy { left: 300px; top: 14px; width: 152px; height: 144px; }
.mon.player { left: 36px; top: 96px; width: 208px; height: 184px; }
.mon.player img { transform: scaleX(-1); }

/* intro slides */
.mon.enemy.intro { animation: slideL calc(.7s / var(--spd, 1)) steps(14) both; }
.mon.player.intro { animation: slideR calc(.7s / var(--spd, 1)) steps(14) both; }
@keyframes slideL { from { transform: translateX(-340px); filter: brightness(0); } 80% { filter: brightness(0); } to { transform: none; } }
@keyframes slideR { from { transform: translateX(340px); } to { transform: none; } }

/* action anims */
.mon.player.lunge { animation: lungeR calc(.3s / var(--spd, 1)) ease-out; }
.mon.enemy.lunge { animation: lungeL calc(.3s / var(--spd, 1)) ease-out; }
@keyframes lungeR { 50% { transform: translate(28px, -10px); } }
@keyframes lungeL { 50% { transform: translate(-28px, 10px); } }
.mon.hit { animation: blink calc(.5s / var(--spd, 1)) steps(1) 1; }
@keyframes blink { 0%, 40%, 80% { opacity: 0; } 20%, 60%, 100% { opacity: 1; } }
.mon.faint { animation: faint calc(.6s / var(--spd, 1)) ease-in forwards; }
@keyframes faint { to { transform: translateY(160px); opacity: 0; } }
.mon.recall { animation: recall calc(.35s / var(--spd, 1)) ease-in forwards; }
@keyframes recall { to { transform: scale(.1); filter: brightness(4) saturate(0); opacity: 0; } }
.mon.sendout { animation: sendout calc(.4s / var(--spd, 1)) ease-out both; }
@keyframes sendout { from { transform: scale(.1); filter: brightness(4) saturate(0); } to { transform: none; } }
.mon.boss img { filter: drop-shadow(0 0 6px #f04050) drop-shadow(0 0 2px #f04050); }
.mon.buff { animation: buff calc(.5s / var(--spd, 1)) ease-out; }
@keyframes buff { 50% { filter: brightness(1.8) hue-rotate(40deg); } }

/* ---------- info boxes ---------- */
.info {
  position: absolute; z-index: 3; background: var(--box);
  border: 3px solid var(--box-edge); border-radius: 10px 4px 10px 4px;
  box-shadow: 4px 4px 0 #0004; padding: 6px 10px 6px 12px;
}
.info.enemy { left: 16px; top: 22px; width: 232px; }
.info.player { left: 262px; top: 178px; width: 236px; padding-bottom: 4px; }
.info .row1 { display: flex; align-items: baseline; gap: 6px; font-size: 19px; line-height: 1; }
.info .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info .tag { font-size: 12px; color: #c03040; }
.info .lv { font-size: 16px; }
.info .attr { font-size: 11px; padding: 1px 4px; border-radius: 3px; color: #fff; }
.attr.Vaccine { background: #2e9a4e; } .attr.Virus { background: #c8343c; } .attr.Data { background: #2f6fd0; } /* DMO colours: Vaccine green, Data blue, Virus red */
.attr.Free, .attr.Unknown { background: #888; }
.bar { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.bar .lbl { font-size: 11px; font-weight: 700; background: #f0a030; color: #fff8e0; padding: 0 4px; border-radius: 3px; line-height: 13px; }
.bar.sp .lbl { background: #3878d8; }
.bar .track { flex: 1; height: 8px; background: #485058; border: 2px solid #283038; border-radius: 4px; overflow: hidden; }
.bar .fill { height: 100%; width: 100%; background: linear-gradient(var(--hp-green-hi) 0 40%, var(--hp-green) 40%); }
.bar .fill.mid { background: linear-gradient(var(--hp-yellow-hi) 0 40%, var(--hp-yellow) 40%); }
.bar .fill.low { background: linear-gradient(var(--hp-red-hi) 0 40%, var(--hp-red) 40%); }
.bar.sp .fill { background: linear-gradient(#88c0ff 0 40%, var(--sp) 40%); }
.info .nums { text-align: right; font-size: 15px; margin-top: 2px; }
.info .status { display: inline-block; font-size: 11px; color: #fff; padding: 0 4px; border-radius: 3px; margin-left: 4px; }
.status.Burn { background: #e05828; } .status.Poison, .status.Dot { background: #9040a8; } .status.Paralyze { background: #c8a818; }
.status.Sleep { background: #788090; } .status.Stun { background: #d8a030; } .status.Chill { background: #58a8d8; }
.status.Panic { background: #e04890; } .status.Mute, .status.Bug, .status.DataBreak { background: #505058; }
.exp { margin-top: 4px; height: 5px; background: #485058; border-radius: 2px; overflow: hidden; }
.exp .fill { height: 100%; background: var(--exp); width: 0; }

/* ---------- bottom panel ---------- */
.panel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 5;
  background: var(--frame); padding: 6px; display: flex; gap: 6px;
}
.textbox {
  flex: 1; background: var(--box); border: 3px solid var(--frame-2); border-radius: 6px;
  padding: 8px 14px; font-size: 21px; line-height: 1.3; position: relative; white-space: pre-wrap;
}
.textbox .more { position: absolute; right: 10px; bottom: 6px; font-size: 14px; color: #e04030; animation: bob calc(.6s / var(--spd, 1)) steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
.el { display: inline-block; font-size: 12px; color: #fff; padding: 0 5px; border-radius: 3px; background: #888; }
.el.Fire { background: #e05828; } .el.Water { background: #3880e0; } .el.Plant { background: #48a838; } .el.Ice { background: #60c0e0; }
.el.Electric { background: #d8b018; } .el.Earth { background: #a07838; } .el.Wind { background: #58c8a0; } .el.Steel { background: #8898a8; }
.el.Light { background: #e8c848; color: #4a3a10; } .el.Dark { background: #503868; } .el.Neutral { background: #a09888; }

.flash { position: absolute; inset: 0; background: #fff; z-index: 20; pointer-events: none; opacity: 0; }
.flash.go { animation: flash calc(.5s / var(--spd, 1)) steps(2) 3; }
@keyframes flash { 50% { opacity: 1; } }
.dmgnum { position: absolute; z-index: 8; font-size: 22px; color: #fff; text-shadow: 2px 2px 0 #000; animation: rise calc(.8s / var(--spd, 1)) ease-out forwards; pointer-events: none; }
.dmgnum.crit { color: #f8d030; font-size: 26px; }
@keyframes rise { to { transform: translateY(-30px); opacity: 0; } }

/* ---------- auto battle ---------- */
.speed { position: absolute; right: 8px; top: 6px; z-index: 7; display: flex; gap: 3px; }
.speed button { font: inherit; font-size: 13px; padding: 1px 7px; border-radius: 5px; border: 2px solid #283038; background: #f8f8f0d0; color: var(--ink); cursor: pointer; }
.speed button.on { background: #f8d030; }
.turn { position: absolute; left: 10px; bottom: 6px; z-index: 7; font-size: 13px; color: #fff; text-shadow: 1px 1px 0 #000; }
.rates {
  width: 200px; background: var(--box); border: 3px solid var(--frame-2); border-radius: 6px;
  padding: 3px 6px; font-size: 14px; display: flex; flex-direction: column; justify-content: center; gap: 1px; overflow: hidden;
}
.rate { display: flex; align-items: center; gap: 5px; padding: 0 3px; border-radius: 3px; line-height: 1.25; }
.rate .el { width: 9px; height: 9px; padding: 0; border-radius: 50%; flex: none; }
.rate .rn { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rate .rp { color: #586878; }
.rate.used { background: #f8d030; }
.rate.nosp { opacity: .45; }

/* real DMO backdrop (map loading screen) behind the Gen-style platforms */
.battle.hasbg .field::before, .battle.hasbg .field::after { display: none; }
.battle.hasbg .field { background: center 45% / cover no-repeat; image-rendering: pixelated; }
.battle.hasbg .field .platform { opacity: .92; }

/* ---------- roll call-outs: CRITICAL / BLOCK / DODGE / MISS ---------- */
.btag { position: absolute; z-index: 9; pointer-events: none; white-space: nowrap; font-size: 20px; letter-spacing: 1px;
  color: #fff; -webkit-text-stroke: 1px #000; text-shadow: 2px 2px 0 #000, 0 0 8px var(--glow, transparent);
  animation: tagpop calc(1s / var(--spd, 1)) ease-out forwards; }
@keyframes tagpop {
  0% { transform: translate(-50%, 6px) scale(.4); opacity: 0; }
  15% { transform: translate(-50%, 0) scale(1.35); opacity: 1; }
  30% { transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -26px) scale(1); opacity: 0; } }
.btag.crit { font-size: 27px; color: #ffe04a; --glow: #ff8a00; animation-name: tagcrit; }
@keyframes tagcrit {
  0% { transform: translate(-50%, 0) scale(2.2) rotate(-8deg); opacity: 0; filter: brightness(3); }
  12% { transform: translate(-50%, 0) scale(1.2) rotate(-4deg); opacity: 1; filter: brightness(1.6); }
  25% { transform: translate(-50%, 0) scale(1) rotate(-4deg); filter: none; }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -30px) scale(1) rotate(-4deg); opacity: 0; } }
.btag.block { color: #9fd0ff; --glow: #3a8cff; }
.btag.dodge { color: #7ff5e6; --glow: #10c0b0; font-style: italic; animation-name: tagdodge; }
@keyframes tagdodge {
  0% { transform: translate(-90%, 0) skewX(-20deg); opacity: 0; }
  20% { transform: translate(-40%, 0) skewX(-12deg); opacity: 1; }
  35% { transform: translate(-50%, 0) skewX(-8deg); }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -22px) skewX(-8deg); opacity: 0; } }
.btag.miss { color: #c8ccd4; --glow: #000; font-size: 18px; }
.dmgnum.crit { color: #ffd23a; font-size: 30px; text-shadow: 2px 2px 0 #000, 0 0 10px #ff8a00; }
.dmgnum.blocked { color: #a8c8ec; font-size: 18px; }
/* target reactions */
.mon.dodge { animation: dodge calc(.45s / var(--spd, 1)) ease-out; }
@keyframes dodge { 30% { transform: translateX(26px) skewX(-10deg); opacity: .45; } 60% { transform: translateX(18px); opacity: .7; } }
.mon.player.dodge { animation-name: dodgeP; }
@keyframes dodgeP { 30% { transform: translateX(-26px) skewX(10deg); opacity: .45; } 60% { transform: translateX(-18px); opacity: .7; } }
.mon.blocked img { animation: blocked calc(.45s / var(--spd, 1)) ease-out; }
@keyframes blocked { 0%, 60% { filter: drop-shadow(0 0 6px #4aa0ff) drop-shadow(0 0 2px #cfe6ff) brightness(1.3); } }
.battle.shake { animation: bshake calc(.35s / var(--spd, 1)) linear; }
@keyframes bshake { 20% { translate: -5px 2px; } 40% { translate: 5px -2px; } 60% { translate: -3px 1px; } 80% { translate: 3px 0; } }

/* ---------- team battles (js/battle.js SquadBattle): Final Fantasy style — enemies left, the team in a column right ---------- */
.battle.squad .sq { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.battle.squad .sqmon { position: absolute; display: flex; flex-direction: column; align-items: center; transition: opacity .4s, filter .4s; }
.battle.squad .sqmon .mon { position: relative; left: auto; top: auto; }
.battle.squad .sqmon.foes .mon img { transform: scaleX(-1); }
.battle.squad .sqmon.mine .mon img { transform: none; }
.battle.squad .sqmon.acting .mon { filter: drop-shadow(0 0 4px #f8e038) drop-shadow(0 0 2px #fff); }
.battle.squad .sqmon.mine.acting { transform: translateX(-10px); transition: transform .15s; }
.battle.squad .sqmon.down { opacity: .2; filter: grayscale(1); }
.battle.squad .bar.mini { width: 56px; margin-top: 1px; }
.battle.squad .sqmon.boss .bar.mini { width: 150px; }
.battle.squad .bar.mini .track { height: 5px; border-width: 1px; }
.battle.squad .sqname { font-size: 9px; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; white-space: nowrap; }
.battle.squad .sqmon.boss .sqname { font-size: 12px; }
.battle.squad .sqmon .st { font-size: 7px; }
.battle.squad .turn { left: 8px; right: auto; top: 4px; bottom: auto; z-index: 5; }
/* the team window (bottom right): name, attribute, HP */
.battle.squad .rates.team { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 6px; }
.battle.squad .rates.team .tm { display: grid; grid-template-columns: 1fr 26px 34px; grid-template-rows: auto 4px; column-gap: 3px; font-size: 10px; line-height: 11px; }
.battle.squad .rates.team .tm .tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; }
.battle.squad .rates.team .tm .attr { font-size: 7px; text-align: center; }
.battle.squad .rates.team .tm .th { text-align: right; }
.battle.squad .rates.team .tm .track { grid-column: 1 / 4; height: 3px; border: 0; border-radius: 2px; background: #485058; overflow: hidden; }
.battle.squad .rates.team .tm .fill { height: 100%; }
.battle.squad .rates.team .tm.act .tn { color: #c06000; }
.battle.squad .rates.team .tm.down { opacity: .4; }
.battle.squad .rates.team .tm .fill { width: 100%; background: linear-gradient(var(--hp-green-hi) 0 40%, var(--hp-green) 40%); }
.battle.squad .rates.team .tm .fill.mid { background: var(--hp-yellow); }
.battle.squad .rates.team .tm .fill.low { background: var(--hp-red); }

.battle.squad .fixedspd { background: #f8e038; color: #2a2a3a; border: 2px solid #283038; border-radius: 6px; padding: 1px 8px; font-weight: bold; }

/* v0.47 solo battles: a taller bottom panel so all 5 skills read in full (Attack is never listed) */
.battle:not(.squad) { height: 404px; }
.battle:not(.squad) .field { bottom: 116px; }
.battle:not(.squad) .panel { height: 116px; }
.battle:not(.squad) .rates { width: 232px; font-size: 15px; padding: 3px 5px; gap: 1px; justify-content: space-evenly; }
.battle:not(.squad) .rate { line-height: 18px; padding: 0 4px; }
.battle:not(.squad) .rate .el { width: 10px; height: 10px; }
.battle:not(.squad) .rate .rp { min-width: 32px; text-align: right; }
.rate.none { color: #586878; }
.info .spnum { font-size: 13px; white-space: nowrap; }
/* v0.48 instant kill: the big DELETED!! */
.btag.deleted { font-size: 44px; letter-spacing: 3px; color: #ff3b3b; -webkit-text-stroke: 2px #000; --glow: #ff0040; z-index: 12;
  text-shadow: 3px 3px 0 #000, 0 0 14px #ff0040, 0 0 28px #ff0040; animation: tagdeleted calc(1.8s / var(--spd, 1)) ease-out forwards; }
@keyframes tagdeleted {
  0% { transform: translate(-50%, 0) scale(3) rotate(-10deg); opacity: 0; filter: brightness(3); }
  10% { transform: translate(-50%, 0) scale(1.25) rotate(-6deg); opacity: 1; filter: brightness(1.8); }
  18% { transform: translate(-46%, 0) scale(1.1) rotate(-6deg); filter: none; }
  22% { transform: translate(-54%, 0) scale(1.1) rotate(-6deg); }
  26% { transform: translate(-50%, 0) scale(1.1) rotate(-6deg); }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -20px) scale(1.1) rotate(-6deg); opacity: 0; } }
/* v0.53 timeline: the next actions (portraits), a boss warning marked */
/* v0.58.3 (the player: "it overlaps other windows, it still doesn't fit"): every floating spot (top centre v0.54, right column
   v0.57) collided with something — enemy box, partner box, a boss's head. Turn-order games (FFX, Octopath, Star Rail) give it a
   lane of its own, so it gets one here: a strip between the arena and the bottom panel. The battle grows by --tl, the arena
   keeps its 288px, so nothing in it moves. */
.battle { --tl: 26px; height: calc(384px + var(--tl)); }
.battle .field { bottom: calc(96px + var(--tl)); }
.battle:not(.squad) { height: calc(404px + var(--tl)); }
.battle:not(.squad) .field { bottom: calc(116px + var(--tl)); }
.tlbar { position: absolute; left: 0; right: 0; bottom: 96px; height: var(--tl); z-index: 6; display: flex; gap: 4px; align-items: center;
  padding: 0 8px; background: var(--frame); border-top: 2px solid var(--frame-2); overflow: hidden; }
.battle:not(.squad) .tlbar { bottom: 116px; }
.tlbar small { color: #fff; font-size: 11px; letter-spacing: 1px; opacity: .75; margin-right: 2px; }
.tlbar img { width: 18px; height: 18px; flex: none; image-rendering: pixelated; object-fit: contain; border-radius: 3px; border: 1px solid #6b9; background: rgba(255,255,255,.12); }
.tlbar img.foe { border-color: #e66; }
.tlbar img.warn { border-color: #fc3; box-shadow: 0 0 5px #fc3; }
.tlbar .now { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 2px; margin-right: 2px; border-radius: 4px; background: rgba(255,255,255,.14); color: #fff; font-size: 11px; white-space: nowrap; }
.tlbar .now img { width: 22px; height: 22px; border-width: 2px; border-color: #fc3; }
.tlbar .now.foe img { border-color: #f55; }
.tlbar .now.foe { background: rgba(230,80,80,.28); }
.tlbar i { color: #fff; opacity: .45; font-style: normal; font-size: 10px; }
.warnmark { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); color: #fc3; font-size: 18px; text-shadow: 0 0 4px #000; z-index: 8; animation: warnpulse .8s infinite alternate; }
@keyframes warnpulse { from { opacity: .55 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .warnmark { animation: none } }
.tp-orders { display: grid; gap: 6px; margin: 6px 0; padding: 6px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; }
.tp-orders .row { gap: 6px; flex-wrap: wrap; }
.rolechip { font-size: 10px; padding: 0 4px; border-radius: 3px; margin-left: 4px; background: rgba(255,255,255,.12); white-space: nowrap; }
.rolechip.Tank { background: #2a6f3a; color: #fff } .rolechip.SK { background: #5a3fb0; color: #fff } .rolechip.AA { background: #b4472a; color: #fff }
.frontbtn.on { outline: 2px solid #fc3; }
.rulelist { margin: 4px 0; padding-left: 16px; font-size: 12px; }

/* ---------- v0.57 portrait layout (phones held upright; G.fitBattle sets --fh and the team-fight stacking) ----------
   mobile-game style: the arena takes most of the screen, one caption line, then compact chips (moves, or the team's HP) */
.battle.portrait .field { inset: 0 0 auto 0; height: var(--fh); }
.battle.portrait .panel { top: var(--fh); bottom: 0; height: auto !important; flex-direction: column; gap: 6px; padding: 6px 8px; }
.battle.portrait .textbox { flex: none; height: 58px; font-size: 18px; line-height: 1.25; padding: 6px 12px; overflow: hidden; }
.battle.portrait .rates { width: auto !important; flex: 1; padding: 6px 10px; }
.battle.portrait:not(.squad) .rates { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 4px 12px; font-size: 17px; }
.battle.portrait .rate { line-height: 1.45; }
.battle.portrait .rate .el { width: 12px; height: 12px; }
.battle.portrait .speed { top: 8px; }
/* solo: the enemy up top, your partner big at the bottom of the arena */
.battle.portrait:not(.squad) .info.enemy { top: 24px; }
.battle.portrait:not(.squad) .mon.enemy { top: 140px; left: 268px; width: 200px; height: 190px; }
.battle.portrait:not(.squad) .platform.enemy { top: 296px; left: 236px; width: 264px; height: 62px; }
.battle.portrait:not(.squad) .mon.player { top: auto; bottom: 96px; left: 18px; width: 264px; height: 244px; }
.battle.portrait:not(.squad) .platform.player { top: auto; bottom: 56px; left: 0; width: 300px; height: 72px; }
.battle.portrait:not(.squad) .info.player { top: auto; bottom: 24px; }
/* team fights (js/battle.js place): the boss at the back, its minions in a row in front, the team in a row at the bottom; the team's HP as one row of chips */
.battle.squad.portrait .sqmon.boss .bar.mini { width: 200px; }
.battle.squad.portrait .sqmon.boss .sqname { font-size: 14px; }
.battle.squad.portrait .bar.mini { width: 72px; }
.battle.squad.portrait .sqmon.mine.acting { transform: translateY(-12px); }
.battle.squad.portrait .sqname { font-size: 10px; }
.battle.squad.portrait .rates.team { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; gap: 6px; padding: 6px 8px; }
.battle.squad.portrait .rates.team .tm { grid-template-columns: auto 1fr; grid-template-rows: auto auto 7px; font-size: 14px; line-height: 18px; column-gap: 4px; min-width: 0; }
.battle.squad.portrait .rates.team .tm .tn { grid-column: 1 / 3; }
.battle.squad.portrait .rates.team .tm .attr { font-size: 9px; align-self: center; }
.battle.squad.portrait .rates.team .tm .track { height: 7px; border-radius: 3px; }
.battle.portrait { --tl: 40px; }
.battle.portrait .tlbar { top: var(--fh); bottom: auto; gap: 5px; }
.battle.portrait .panel { top: calc(var(--fh) + var(--tl)); }
.battle.portrait .tlbar img { width: 30px; height: 30px; }
.battle.portrait .tlbar .now img { width: 34px; height: 34px; }
.battle.portrait .tlbar .now, .battle.portrait .tlbar small { font-size: 16px; }
.speed button.lockspd { opacity: .45; cursor: not-allowed; }
/* v0.65 speed: one square button, a compact menu with every speed and a few words each */
.speed .spdbtn { min-width: 46px; font-weight: 700; }
.speed .spdmenu { position: absolute; right: 0; top: calc(100% + 3px); display: grid; gap: 2px; background: #f8f8f0f2; border: 2px solid #283038; border-radius: 5px; padding: 3px; width: 168px; box-shadow: 0 3px 10px #0006; }
.speed .spdmenu.hidden { display: none; }
.speed .spdmenu button { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 4px; text-align: left; padding: 2px 5px; width: 100%; border-width: 1px; }
.speed .spdmenu button b { font-size: 11px; }
.speed .spdmenu button small { font-size: 7.5px; line-height: 1.15; opacity: .8; }
/* v0.67: statuses and attributes as small icons (phones showed them as big stacked words) */
.status.ico { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; margin: 0 1px; border-radius: 50%; font-size: 9px; line-height: 1; color: #fff; box-shadow: 0 0 0 1px #000a; }
.battle.squad .sqmon .sts { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 1px; min-height: 0; }
.battle.squad .sqmon .sts:empty { display: none; }
.attr.ico { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; padding: 0; border-radius: 50%; font-size: 8px; line-height: 1; vertical-align: middle; }
.battle.squad .rates.team .tm .attr.ico, .battle.squad.portrait .rates.team .tm .attr.ico { font-size: 8px; width: 13px; height: 13px; align-self: center; justify-self: center; }
.battle.squad .sqmon.boss .attr.ico { width: 16px; height: 16px; font-size: 10px; }
/* v0.69: DMO's own attribute orbs (img/attr) replace the text glyphs */
.attr-orb { width: 18px; height: 18px; vertical-align: middle; flex: none; }
.battle.squad .sqmon.boss .attr-orb { width: 22px; height: 22px; }