/* FireRed UI reconstruction.
   The browser game uses the GBA's 240x160 logical coordinate system.
   1 logical px = 0.4166667cqw. This file deliberately loads after style.css. */

#gameFrame{container-type:inline-size}
#gameFrame button:focus{outline:none}

/* -------------------------------------------------------------------------- */
/* FireRed bitmap fonts                                                       */
/* -------------------------------------------------------------------------- */

/* latin_small.png is a 256x256 atlas of 16x16 cells. Do NOT half-scale it.
   The visible small-font strokes occupy only part of each 16px cell in-game. */
.frGlyphSmall{
  width:calc(var(--fr-width) * .4166667cqw)!important;
  height:6.666667cqw!important;
  background-image:url('./native/fr_font_small.png')!important;
  background-size:106.666667cqw 106.666667cqw!important;
  background-position:
    calc(var(--fr-col) * -6.666667cqw)
    calc(var(--fr-row) * -6.666667cqw)!important;
  image-rendering:pixelated!important;
}
.frTextLineSmall{
  height:6.666667cqw!important;
  min-height:6.666667cqw!important;
}

/* -------------------------------------------------------------------------- */
/* Field message box                                                          */
/* -------------------------------------------------------------------------- */

/* sStandardTextBox_WindowTemplates:
   inner x=16, y=120, width=208, height=32.
   The standard frame occupies the full 240x48 region from y=112. */
.dialog{
  left:0!important;right:auto!important;bottom:0!important;
  width:100cqw!important;height:20cqw!important;min-height:20cqw!important;
  padding:3.75cqw 6.666667cqw 0!important; /* x=16, y=121 */
  border:0!important;border-image:none!important;border-radius:0!important;
  background:url('./native/fr_field_message_bg.png') 0 0/100cqw 20cqw no-repeat!important;
  overflow:hidden!important;box-shadow:none!important;
}
#dialogText{
  width:86.666667cqw!important; /* 208px */
  height:13.333333cqw!important;
  overflow:hidden!important;
}
#dialogText .frTextLine{
  height:6.25cqw!important;      /* 15px: 14px glyph height + 1px line spacing */
  min-height:6.25cqw!important;
}
.dialogHint{
  right:9.166667cqw!important;bottom:2.916667cqw!important;
  width:0!important;height:0!important;font-size:0!important;
  border-left:1.666667cqw solid transparent!important;
  border-right:1.666667cqw solid transparent!important;
  border-top:1.666667cqw solid #dc463e!important;
}

/* The user still needs a visible/tappable A button while reading dialogue. */
#gameFrame.dialog-open #mobileControls{display:block!important;z-index:50!important}
#gameFrame.dialog-open .interact{
  display:block!important;
  opacity:1!important;
  pointer-events:auto!important;
  right:var(--ui-safe-right)!important;
  bottom:calc(20cqw + 8px)!important;
  width:56px!important;height:56px!important;
  font-size:24px!important;z-index:55!important;
}
#gameFrame.dialog-open .teamButton{display:none!important}

/* -------------------------------------------------------------------------- */
/* Field YES / NO prompts                                                     */
/* -------------------------------------------------------------------------- */

/* sYesNo_WindowTemplate:
   inner x=168,y=72,width=48,height=32; standard frame -> x=160,y=64,w64,h48.
   The question itself remains in the normal field message box. */
.battlePrompt,.onlinePrompt{
  left:0!important;right:auto!important;bottom:0!important;
  width:100cqw!important;height:20cqw!important;min-height:20cqw!important;
  padding:0!important;border:0!important;border-image:none!important;
  background:url('./native/fr_field_message_bg.png') 0 0/100cqw 20cqw no-repeat!important;
  overflow:visible!important;box-shadow:none!important;
}
#battleChoiceTitle,.onlinePromptText{
  position:absolute!important;
  left:6.666667cqw!important;     /* x=16 */
  top:3.75cqw!important;         /* y=121 */
  width:86.666667cqw!important;
  height:13.333333cqw!important;
  overflow:hidden!important;
}
#battleChoiceTitle .frTextLine,.onlinePromptText .frTextLine{
  height:6.25cqw!important;
  min-height:6.25cqw!important;
}
.battleChoiceButtons,.onlinePromptButtons{
  position:absolute!important;
  left:66.666667cqw!important;   /* x=160 */
  top:-20cqw!important;          /* y=64 because prompt starts at y=112 */
  width:26.666667cqw!important;  /* 64px */
  height:20cqw!important;        /* 48px */
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:6.666667cqw 6.666667cqw!important;
  gap:0!important;
  padding:3.333333cqw 3.333333cqw!important; /* inner x=168,y=72 */
  margin:0!important;
  border:0!important;border-image:none!important;
  background:url('./native/fr_yesno_bg.png') 0 0/100% 100% no-repeat!important;
  box-shadow:none!important;z-index:2!important;
}
.battleChoiceButtons button,.onlinePromptButtons button{
  position:relative!important;
  display:block!important;
  width:20cqw!important;height:6.666667cqw!important;
  min-width:0!important;min-height:0!important;
  padding:.416667cqw 0 0 4.166667cqw!important;
  border:0!important;background:transparent!important;
  text-align:left!important;overflow:visible!important;
}
.battleChoiceButtons button .frMenuCursor,.onlinePromptButtons button .frMenuCursor{
  left:0!important;top:0!important;
}

/* -------------------------------------------------------------------------- */
/* Battle field and battlers                                                  */
/* -------------------------------------------------------------------------- */

.battleLayer{background:#e9f9e9!important;overflow:hidden!important}
.battleTerrain{
  left:0!important;top:0!important;
  width:100cqw!important;height:46.666667cqw!important;
  object-fit:fill!important;image-rendering:pixelated!important;
}
.battleSprite{
  width:26.666667cqw!important;height:26.666667cqw!important;
  max-height:none!important;object-fit:contain!important;
  filter:none!important;image-rendering:pixelated!important;
}
.battleEnemySprite{right:auto!important}
.battlePlayerSprite{}

/* InitBattlerHealthboxCoords singles:
   opponent center 44,30 -> x=12,y=14,w128,h32
   player   center 158,88 -> x=126,y=56,w128,h64 (right edge clips at 240). */
.battleHealth{
  position:absolute!important;
  padding:0!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;background-color:transparent!important;
  background-position:0 0!important;background-repeat:no-repeat!important;
  background-size:100% 100%!important;overflow:visible!important;
}
.enemyHealth{
  left:5cqw!important;top:5.833333cqw!important;
  width:53.333333cqw!important;height:13.333333cqw!important;
  background-image:url('./native/fr_health_enemy_clean.png')!important;
}
.playerHealth{
  left:52.5cqw!important;top:23.333333cqw!important;
  width:53.333333cqw!important;height:26.666667cqw!important;
  background-image:url('./native/fr_health_player_clean.png')!important;
}

/* Healthbox text is FONT_SMALL in battle_interface.c.
   Never compress those glyph cells to 8px again. */
.battleHealth .frGlyphSmall{
  height:6.666667cqw!important;
}
.battleHealth .frTextLineSmall{
  height:6.666667cqw!important;
  min-height:6.666667cqw!important;
}
.battleMonLine,.playerHealth .battleMonLine{
  position:absolute!important;
  left:3.333333cqw!important;top:1.25cqw!important;
  width:40cqw!important;height:6.666667cqw!important;
  display:block!important;overflow:visible!important;
}
.battleMonLine strong{
  position:absolute!important;left:0!important;top:0!important;
  max-width:25cqw!important;overflow:hidden!important;
}
.battleLevelValue{
  position:absolute!important;
  right:11.666667cqw!important;top:.833333cqw!important;
  white-space:nowrap!important;
}
.battleStatus{
  position:absolute!important;
  left:4.166667cqw!important;top:4.166667cqw!important;
  background:transparent!important;padding:0!important;
}
.hpLine,.playerHealth .hpLine{
  position:absolute!important;
  left:16.666667cqw!important;top:8.75cqw!important;
  width:20cqw!important;height:1.666667cqw!important;
  display:block!important;margin:0!important;
}
.hpLine>span{display:none!important}
.hpTrack{
  width:100%!important;height:1.666667cqw!important;
  padding:.416667cqw!important;background:#344948!important;
  border-radius:0!important;
}
.hpFill{height:100%!important;border-radius:0!important}
.enemyHealth small{display:none!important}
.playerHealth small{
  position:absolute!important;
  right:6.666667cqw!important;top:10.416667cqw!important;
  width:23.333333cqw!important;height:6.666667cqw!important;
  overflow:visible!important;margin:0!important;text-align:right!important;
}

/* -------------------------------------------------------------------------- */
/* Battle command/message windows                                             */
/* -------------------------------------------------------------------------- */

.battleCommand{
  position:absolute!important;
  left:0!important;bottom:0!important;
  width:100cqw!important;height:20cqw!important;
  background-position:0 0!important;background-size:100cqw 20cqw!important;
  background-repeat:no-repeat!important;overflow:hidden!important;border:0!important;
}
.battleCommand[data-mode='message']{background-image:url('./native/fr_battle_message_bg.png')!important}
.battleCommand[data-mode='action']{background-image:url('./native/fr_battle_action_bg.png')!important}
.battleCommand[data-mode='moves']{background-image:url('./native/fr_battle_move_bg.png')!important}
.battleCommand[data-mode='pokemon']{background-image:url('./native/fr_battle_action_bg.png')!important}
.battleMessageFrame,.battleActionMenu,.battleMoveMenu,.battlePokemonMenu{
  border:0!important;border-image:none!important;
  box-shadow:none!important;background:transparent!important;
}

/* B_WIN_MSG / B_WIN_ACTION_PROMPT: tileLeft=1 (x8), tileTop=15 after scroll
   (y120); printer offset x2,y2 -> screen x10,y122. */
.battleMessageFrame{
  left:0!important;top:0!important;
  width:50cqw!important;height:20cqw!important;
  padding:4.166667cqw 4.166667cqw 0!important; /* y=122, x=10 */
}
.battleMessageFrame.message-wide{width:100cqw!important}
.battleText{
  width:43.333333cqw!important;height:13.333333cqw!important;
  overflow:hidden!important;padding:0!important;
}
.battleMessageFrame.message-wide .battleText{width:90cqw!important}
.battleText .frTextLine{
  height:6.666667cqw!important;min-height:6.666667cqw!important;
}
.battleMessageFrame[data-reading='true']::after{
  content:'';
  position:absolute;right:4.166667cqw;bottom:1.666667cqw;
  border-left:1.25cqw solid transparent;
  border-right:1.25cqw solid transparent;
  border-top:1.666667cqw solid #e04437;
  animation:dialogPrompt .7s steps(2,end) infinite;
  pointer-events:none;
}
.battleText .frGlyph{background-image:url('./native/fr_font_light.png')!important}
#battleChoiceTitle .frGlyph,.onlinePromptText .frGlyph{background-image:url('./native/fr_font.png')!important}

/* B_WIN_ACTION_MENU and cursor coordinates from battle_controller_player.c:
   cursor x=128/184,y=120/136; text x=136/192,y=122/138. */
.battleActionMenu{
  position:absolute!important;
  left:50cqw!important;top:0!important;width:50cqw!important;height:20cqw!important;
  display:grid!important;
  grid-template-columns:23.333333cqw 23.333333cqw!important; /* 56px apart */
  grid-template-rows:6.666667cqw 6.666667cqw!important;     /* 16px apart */
  gap:0!important;
  padding:3.333333cqw 0 0!important;                       /* first row y=120 */
}
.battleActionMenu button{
  position:relative!important;
  width:23.333333cqw!important;height:6.666667cqw!important;
  min-width:0!important;min-height:0!important;
  box-sizing:border-box!important;
  padding:.833333cqw 0 0 6.666667cqw!important;            /* text +2px, x+16 */
  border:0!important;background:transparent!important;
  overflow:visible!important;text-align:left!important;
}
.battleActionMenu button .frMenuCursor{
  left:3.333333cqw!important;top:0!important;               /* x+8, row top */
}

/* Move windows:
   cursor x=8/80,y=120/136; move text x=16/88,y=121/137.
   PP x=168,y122, type x=168,y138. */
.battleMoveMenu{
  position:absolute!important;
  left:0!important;top:0!important;width:100cqw!important;height:20cqw!important;
  display:block!important;
}
.battleMoves{
  position:absolute!important;
  left:0!important;top:0!important;width:66.666667cqw!important;height:20cqw!important;
  display:grid!important;
  grid-template-columns:30cqw 30cqw!important;              /* 72px */
  grid-template-rows:6.666667cqw 6.666667cqw!important;
  gap:0!important;
  padding:3.333333cqw 0 0!important;                       /* row y=120 */
  background:transparent!important;
}
.battleMove{
  position:relative!important;
  width:30cqw!important;height:6.666667cqw!important;min-width:0!important;
  box-sizing:border-box!important;
  padding:.416667cqw 0 0 6.666667cqw!important;            /* text y+1, x+16 */
  border:0!important;background:transparent!important;
  overflow:hidden!important;text-align:left!important;
}
.battleMove strong{
  display:block!important;
  width:26.666667cqw!important;height:6.666667cqw!important;
  overflow:hidden!important;
}
.battleMove .frTextLine{display:flex!important}
.battleMove .frGlyph{display:inline-block!important}
.battleMove .frMenuCursor{
  left:3.333333cqw!important;top:0!important;               /* cursor x+8 */
}
.battleMoveInfo{
  position:absolute!important;
  left:66.666667cqw!important;top:0!important;
  width:33.333333cqw!important;height:20cqw!important;
  padding:3.333333cqw 0 0 3.333333cqw!important;           /* x=168,y=120 */
  border:0!important;background:transparent!important;display:block!important;
}
.battleMoveInfo>div{
  display:flex!important;align-items:flex-start!important;
  gap:1.666667cqw!important;
  height:6.666667cqw!important;min-height:0!important;
  padding-top:.833333cqw!important;                        /* printer y=2 */
  box-sizing:border-box!important;white-space:nowrap!important;
}
#battleMoveTypeLabel{display:none!important}
#battleMoveBack{
  position:absolute!important;right:1.25cqw!important;bottom:.833333cqw!important;
  min-height:5cqw!important;padding:0!important;
  border:0!important;background:transparent!important;opacity:.82!important;
}

/* Always render a selector ourselves; never rely on browser focus outlines. */
.frMenuCursor{
  display:block!important;position:absolute!important;
  width:0!important;height:0!important;
  border-top:1.666667cqw solid transparent!important;
  border-bottom:1.666667cqw solid transparent!important;
  border-left:2.083333cqw solid #252b30!important;
  pointer-events:none!important;z-index:3!important;
}

/* -------------------------------------------------------------------------- */
/* Party screen                                                               */
/* -------------------------------------------------------------------------- */

/* sSinglePartyMenuWindowTemplate:
   lead x8,y24,w80,h56; right x96,y8/32/56/80/104,w144,h24. */
.teamLayer,.teamBackdrop{
  position:absolute!important;inset:0!important;
  background:#5e8f83 url('./native/fr_party_bg.png') 0 0/100cqw 66.666667cqw no-repeat!important;
}
.teamSlots{position:absolute!important;inset:0!important;display:block!important}
.teamSlot,.teamSlot:nth-child(1),.teamSlot:nth-child(n+2){
  position:absolute!important;grid-column:auto!important;grid-row:auto!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;opacity:1!important;color:#333!important;overflow:visible!important;
}
.teamSlot:nth-child(1){
  left:3.333333cqw!important;top:10cqw!important;
  width:33.333333cqw!important;height:23.333333cqw!important;
}
.teamSlot:nth-child(n+2){
  left:40cqw!important;width:60cqw!important;height:10cqw!important;
}
.teamSlot:nth-child(2){top:3.333333cqw!important}
.teamSlot:nth-child(3){top:13.333333cqw!important}
.teamSlot:nth-child(4){top:23.333333cqw!important}
.teamSlot:nth-child(5){top:33.333333cqw!important}
.teamSlot:nth-child(6){top:43.333333cqw!important}
.teamSlot.empty:nth-child(n+2){
  left:36.666667cqw!important;width:63.333333cqw!important;
  background:url('./native/fr_party_empty_overlay.png') 0 0/63.333333cqw 10cqw no-repeat!important;
}
.teamSlot.empty .teamBall,.teamSlot.empty .teamSlotText{display:none!important}

/* sPartyMenuSpriteCoords centers:
   lead (16,40) => top-left (0,24)
   right (104,18/42/66/90/114) => top-left (88,2/26/50/74/98).
   Relative to the party windows that is x=-8 for all, y=0 lead / -6 right. */
.teamIcon{
  position:absolute!important;
  left:-3.333333cqw!important;top:-2.5cqw!important;
  width:13.333333cqw!important;height:13.333333cqw!important;
  overflow:hidden!important;
}
.teamSlot:nth-child(1) .teamIcon{
  left:-3.333333cqw!important;top:0!important;
}
.teamIcon img,.teamSlot:nth-child(1) .teamIcon img{
  position:absolute!important;left:0!important;top:0!important;transform:none!important;
  width:13.333333cqw!important;height:26.666667cqw!important;
  max-width:none!important;max-height:none!important;object-fit:fill!important;
  image-rendering:pixelated!important;
}
.teamBall{display:none!important}
.teamSlotText,.teamSlot:nth-child(1) .teamSlotText{
  position:absolute!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;
  display:block!important;width:100%!important;height:100%!important;transform:none!important;
}
.teamSlotText .frGlyphSmall{background-image:url('./native/fr_font_small_light.png')!important}
.teamSlotText>*{position:absolute!important;white-space:nowrap!important;overflow:hidden!important}

/* sPartyBoxInfoRects right column. */
.teamSlotText strong{
  left:9.166667cqw!important;top:1.25cqw!important;         /* 22,3 */
  width:45cqw!important;height:5.416667cqw!important;      /* room for full nickname */
}
.teamSlotText > span{
  left:13.333333cqw!important;top:5cqw!important;          /* 32,12 */
  width:13.333333cqw!important;height:3.333333cqw!important;
}
.teamSlotText .teamHpLabel{display:none!important}
.teamSlotText .teamHpBar{
  left:36.666667cqw!important;top:4.166667cqw!important;   /* 88,10 */
  width:20cqw!important;height:1.25cqw!important;           /* 48x3 */
  padding:0!important;border-radius:0!important;
}
.teamSlotText .teamHpBar i{border-radius:0!important}
.teamSlotText small{
  left:42.5cqw!important;top:5cqw!important;                /* 102,12 */
  width:16.25cqw!important;height:3.333333cqw!important;
  text-align:right!important;
}

/* sPartyBoxInfoRects lead/left column. */
.teamSlot:nth-child(1) .teamSlotText strong{
  left:10cqw!important;top:4.583333cqw!important;           /* 24,11 */
  width:22cqw!important;height:5.416667cqw!important;
}
.teamSlot:nth-child(1) .teamSlotText > span{
  left:13.333333cqw!important;top:8.333333cqw!important;    /* 32,20 */
  width:13.333333cqw!important;height:3.333333cqw!important;
}
.teamSlot:nth-child(1) .teamSlotText .teamHpBar{
  left:10cqw!important;top:14.583333cqw!important;          /* 24,35 */
  width:20cqw!important;
}
.teamSlot:nth-child(1) .teamSlotText small{
  left:15.833333cqw!important;top:15cqw!important;          /* 38,36 */
  width:16.25cqw!important;height:3.333333cqw!important;
}

/* Party message window x8,y136,w168,h16 and cancel x192,y136,w48,h16. */
.teamFooter{
  position:absolute!important;
  left:0!important;bottom:0!important;width:100cqw!important;height:13.333333cqw!important;
  padding:3.333333cqw 0 0 3.333333cqw!important;            /* global x8,y136 */
  border:0!important;border-radius:0!important;background:transparent!important;
  display:block!important;color:#333!important;
}
.teamFooter>div{
  width:70cqw!important;height:6.666667cqw!important;overflow:hidden!important;
}
.teamFooter button{
  position:absolute!important;
  left:80cqw!important;top:3.333333cqw!important;           /* x192,y136 */
  width:20cqw!important;height:6.666667cqw!important;       /* 48x16 */
  min-width:0!important;
  padding:.416667cqw 0 0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;color:#fff!important;
}
.teamFooter button .frGlyphSmall{background-image:url('./native/fr_font_small_light.png')!important}

/* Hidden battle menus must neither paint nor steal touch events. */
.battleLayer [hidden]{display:none!important;pointer-events:none!important}
.battleActionMenu button,.battleMove,#battleMoveBack{
  touch-action:manipulation!important;cursor:pointer;
}


/* -------------------------------------------------------------------------- */
/* FireRed framebuffer canvas renderer                                        */
/* -------------------------------------------------------------------------- */

#fireRedUiCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:95;
  pointer-events:none;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* Once the source-driven renderer has loaded, keep the existing DOM controls
   as hit targets/state holders but stop painting duplicate browser UI. */
html.firered-canvas-ready #dialog,
html.firered-canvas-ready #battlePrompt,
html.firered-canvas-ready #onlinePrompt,
html.firered-canvas-ready #specialPrompt,
html.firered-canvas-ready #teamLayer{
  opacity:0!important;
}
html.firered-canvas-ready .battleHealth,
html.firered-canvas-ready .battleCommand{
  opacity:0!important;
}

/* The field A button must remain visibly above the framebuffer overlay. */
html.firered-canvas-ready #gameFrame.dialog-open .interact{
  z-index:110!important;
}
html.firered-canvas-ready .onlineToast{
  z-index:110!important;
}


/* FONT_SMALL is an 8x16 half-width atlas cell, 32 columns per row.
   Earlier passes treated it as 16x16, which produced the wrong glyphs in
   healthboxes and the move menu. */
.frGlyphSmall{
  background-position:
    calc(var(--fr-col) * -3.333333cqw)
    calc(var(--fr-row) * -6.666667cqw)!important;
}


/* -------------------------------------------------------------------------- */
/* FireRed native battle-animation sprites                                    */
/* -------------------------------------------------------------------------- */
.battleFx.nativeFxActive{
  left:0!important;
  top:0!important;
  right:auto!important;
  width:100cqw!important;
  height:46.666667cqw!important; /* y 0..112, above battle command */
  opacity:1!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:hidden!important;
  z-index:12!important;
}
.frNativeFxSprite{
  position:absolute;
  display:block;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  pointer-events:none;
  transform-origin:center;
}
.frNativeFxBackdrop{
  position:absolute;
  inset:0;
  display:block;
  background-repeat:repeat;
  background-size:53.333333cqw auto;
  image-rendering:pixelated;
  pointer-events:none;
  z-index:0;
}
#gameFrame.battle-screen-shake .battleTerrain,
#gameFrame.battle-screen-shake .battleEnemySprite,
#gameFrame.battle-screen-shake .battlePlayerSprite{
  animation:frBattleScreenShake .08s steps(2,end) 7;
}
@keyframes frBattleScreenShake{
  from{transform:translateX(-.833333cqw)}
  to{transform:translateX(.833333cqw)}
}


/* Four invisible actions match the FireRed canvas window at x144,y32,w88,h80. */
.teamActionMenu{
  position:absolute!important;
  left:60cqw!important;            /* x144 */
  top:13.3333cqw!important;        /* y32 */
  width:36.6667cqw!important;      /* 88px */
  height:33.3333cqw!important;      /* 80px: four actions */
  min-height:33.3333cqw!important;
  z-index:8!important;
  display:grid!important;
  grid-template-rows:repeat(4,1fr)!important;
  gap:0!important;
  padding:3.3333cqw 5cqw!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-sizing:border-box!important;
}
.teamActionMenu[hidden]{display:none!important}
.teamActionMenu button{
  position:relative!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:auto!important;height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:transparent!important;
  touch-action:manipulation!important;
  pointer-events:auto!important;
}


/* Three-Pokémon switch selector occupies the same 2x2 command grid. */
.battlePokemonMenu{
  position:absolute!important;
  left:0!important;top:0!important;
  width:100cqw!important;height:20cqw!important;
  display:block!important;
}
.battlePokemonChoices{
  position:absolute!important;
  left:0!important;top:0!important;
  width:66.666667cqw!important;height:20cqw!important;
  display:grid!important;
  grid-template-columns:33.333333cqw 33.333333cqw!important;
  grid-template-rows:10cqw 10cqw!important;
}
.battlePokemonChoice{
  position:relative!important;
  width:33.333333cqw!important;height:10cqw!important;
  padding:1.25cqw 0 0 6.666667cqw!important;
  overflow:hidden!important;
}
.battlePokemonChoice strong{
  display:block!important;
  width:25cqw!important;height:5cqw!important;
  overflow:hidden!important;
}
.battlePokemonChoice small{
  display:block!important;
  width:20cqw!important;height:4cqw!important;
  overflow:hidden!important;
}
.battlePokemonChoice .frMenuCursor{
  left:3.333333cqw!important;top:1.666667cqw!important;
}
#battlePokemonBack{
  position:absolute!important;
  right:2cqw!important;bottom:1.25cqw!important;
  width:26cqw!important;height:5cqw!important;
  opacity:.82!important;
}
.battleLayer [hidden]{display:none!important;pointer-events:none!important}

/* Experimental Baby Gimmick: still singles (one HP box per team), with
   a second, visual-only partner on the player's side. */
.battleLayer.baby-gimmick-battle #battlePlayerSprite{
 /* Same 64×64 logical box as ordinary battles, only shifted right
    enough to make room for the partner. Leave species-specific top alone. */
 left:26.666667cqw!important;
 width:26.666667cqw!important;height:26.666667cqw!important;
}
.battleLayer.baby-gimmick-battle #battleOshawottSupport{
 /* Full-size back sprite, immediately LEFT of the lead Pokémon.
    Its top is synced to the lead's FireRed back-sprite baseline. */
 position:absolute!important;left:.5cqw!important;
 width:26.666667cqw!important;height:26.666667cqw!important;
 max-height:none!important;z-index:6!important;
 object-fit:contain!important;image-rendering:pixelated!important;
 filter:none!important;pointer-events:none;
}
.battleLayer #battleOshawottSupport[hidden]{display:none!important}
.battleLayer.baby-gimmick-battle #battleOshawottSupport.slashing{
 animation:babySlashes .36s steps(5,end) 3;
}
@keyframes babySlashes{
 0%{transform:translate(0,0);filter:none}
 35%{transform:translate(5cqw,-2cqw);filter:brightness(1.5)}
 75%{transform:translate(10cqw,-4cqw);filter:brightness(2)}
 100%{transform:translate(0,0);filter:none}
}

/* 100 SLASHES — purely visual cut trails; the effect alters future damage. */
.battleLayer.baby-gimmick-battle .babySlash{
 position:absolute;z-index:13;width:10cqw;height:.8cqw;
 background:linear-gradient(90deg,transparent,#fff 20%,#8ee9ff 55%,transparent);
 border-radius:70%;pointer-events:none;
 transform:rotate(var(--slash-angle));
 box-shadow:0 0 .65cqw #fff;
 animation:babySlashSweep .46s ease-out both;
}
@keyframes babySlashSweep{
 0%{opacity:0;transform:rotate(var(--slash-angle)) scaleX(.15)}
 35%{opacity:1;transform:rotate(var(--slash-angle)) scaleX(1.6)}
 100%{opacity:0;transform:rotate(var(--slash-angle)) translateX(7cqw) scaleX(.4)}
}