/* A light preparation hint needs its own dark text, independent of battle colours. */
#paktweber215 #app[data-game-active=true] .entry-tip{
  box-sizing:border-box;flex:none;margin:0;padding:8px 12px;
  border:1px solid #c8b78f;border-left:3px solid #567653;border-radius:10px;
  background:#fff8e6;color:#3d4b3c;text-shadow:none;font-size:13px;line-height:1.4;
}
#paktweber215 #app[data-game-active=true] .entry-tip strong{
  display:block;color:#243a31;font-size:14px;line-height:1.3;font-weight:700;
}
#paktweber215 #app[data-game-active=true] .entry-tip p{
  display:block;margin:3px 0 0;color:#3d4b3c;font-size:13px;line-height:1.4;
}
/* The two equal battle lanes own the available size. Card names and trap text
   must never determine a lane's width or the height of its illustration. */
#app .ui-battle :is(#combat-scene,.board-combat) .combat-lineup{
  align-items:stretch;min-width:0;
}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-minis{
  container-type:size;box-sizing:border-box;width:100%;min-width:0;min-height:0;
  display:grid;flex:1 1 0;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;padding:0;margin:0;
  align-content:stretch;align-items:start;justify-items:center;overflow:hidden;
}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-mini,
#app .ui-battle :is(#combat-scene,.board-combat) .combat-mini:nth-child(5){
  box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;
  justify-content:flex-start;align-self:start;justify-self:center;
  width:min(100%,150px);min-width:0;max-width:none;height:auto;min-height:0;max-height:none;
  padding:0;border-width:1px;overflow:hidden;
}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-mini:nth-child(5){grid-column:1/-1}
/* Both axes constrain the same 2:3 picture, including the centred fifth card.
   64px caption + 2px card border. The small floor keeps tiny windows usable. */
@supports(width:1cqh){
 #app .ui-battle :is(#combat-scene,.board-combat) .combat-mini,
 #app .ui-battle :is(#combat-scene,.board-combat) .combat-mini:nth-child(5){
  width:min(150px,calc((100cqw - 6px)/2),max(28px,calc(((100cqh - 12px)/3 - 66px)*2/3 + 2px)));
 }
}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-mini>.combat-portrait{
  position:relative;display:block;flex:none!important;width:100%;height:auto;
  min-height:0;max-height:none;max-width:none;aspect-ratio:2/3;overflow:hidden;
}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-portrait>.art.portrait{
  box-sizing:border-box;position:absolute;inset:0;display:block;flex:none!important;
  width:100%;height:100%!important;min-height:0!important;max-height:none!important;
  min-width:0;max-width:none;aspect-ratio:auto!important;margin:0;border:0;
}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-portrait>.art.portrait>.card-art-image{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  max-width:none;max-height:none;object-fit:contain!important;object-position:center!important;
}
/* Identical caption rows keep healthy, poisoned and trap units aligned. */
#app .ui-battle :is(#combat-scene,.board-combat) .battle-card-info{
  box-sizing:border-box;flex:none;width:100%;height:64px;min-height:64px;max-height:64px;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:24px 12px 12px 4px;
  gap:2px;padding:3px 4px;align-content:start;
}
#app .ui-battle :is(#combat-scene,.board-combat) .battle-card-info>:is(.rarity-label,.battle-card-rank){display:none}
#app .ui-battle :is(#combat-scene,.board-combat) .battle-card-info>strong{
  grid-row:1;grid-column:1;min-height:0;min-width:0;max-height:24px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;white-space:normal;overflow-wrap:anywhere;text-overflow:ellipsis;
  font-size:11px;line-height:12px;text-align:center;
}
#app .ui-battle :is(#combat-scene,.board-combat) .battle-vitals{
  grid-row:2;grid-column:1;display:flex;justify-content:center;gap:3px;
  min-width:0;white-space:nowrap;font-size:10px;line-height:12px;
}
#app .ui-battle :is(#combat-scene,.board-combat) .battle-vitals :is(b,small){font-size:inherit;line-height:inherit}
#app .ui-battle :is(#combat-scene,.board-combat) .battle-status219{
  grid-row:3;grid-column:1;display:flex;align-items:center;justify-content:center;gap:3px;
  width:100%;min-width:0;height:12px;overflow:hidden;
}
#app .ui-battle :is(#combat-scene,.board-combat) .battle-status219>:is(.battle-poison,.battle-trap){
  min-width:0;margin:0;padding:0 2px;font-size:9px;line-height:12px;
  white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
}
#app .ui-battle :is(#combat-scene,.board-combat) .battle-health{
  grid-row:4;grid-column:1;width:100%;height:4px;min-height:4px;margin:0;align-self:end;
}
@media(orientation:landscape) and (max-height:600px){
 #app .ui-battle :is(#combat-scene,.board-combat) .combat-minis{
  grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:minmax(0,1fr);
 }
 #app .ui-battle :is(#combat-scene,.board-combat) .combat-mini:nth-child(5){grid-column:auto}
 @supports(width:1cqh){
  #app .ui-battle :is(#combat-scene,.board-combat) .combat-mini,
  #app .ui-battle :is(#combat-scene,.board-combat) .combat-mini:nth-child(5){
   width:min(150px,calc((100cqw - 24px)/5),max(28px,calc((100cqh - 66px)*2/3 + 2px)));
  }
 }
}