.creature.enemy-art.face-left { --face: -1; }
.creature.enemy-art.face-front { --face: 1; }
.card.unplayable,.card.rare.unplayable,.card.abyss.unplayable{filter:grayscale(.82) brightness(.46)!important;box-shadow:0 5px 12px #000c!important}.card.unplayable:before{animation:none!important;opacity:.16!important;filter:none!important;text-shadow:none!important}.card.unplayable .card-art{animation:none!important;filter:saturate(.25) brightness(.62)!important}

#playerHpFill {
  background: linear-gradient(90deg, #16884f, #43d477 58%, #8cf0a8);
  box-shadow: inset 0 0 8px #d5ffe688, 0 0 8px #35c96b55;
}
.hptext { display:grid; place-items:center; line-height:1; padding:0 2px; }

@media (max-width: 700px) {
  .hud {
    box-sizing: border-box;
    height: 98px;
    padding: 6px 8px;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: visible;
  }
  .logo {
    max-width: 108px;
    flex: 0 1 108px;
    white-space: nowrap;
  }
  .res {
    margin-left: auto;
    flex-wrap: nowrap;
  }
  .quick-nav {
    position: absolute;
    top: 53px;
    left: 8px;
    right: auto;
    z-index: 15;
    margin: 0;
  }
  .quick-nav button {
    min-height: 38px;
    padding: 5px 8px;
    white-space: nowrap;
  }
  .screen { inset: 98px 0 0; }
  #battle > .arena { height: auto; flex: 1 1 auto; min-height: 0; align-items: flex-end; padding: 64px 2vw 12px; }
  .hpbar { height:19px; }
  #battle > .handArea { height: 250px; flex: 0 0 250px; padding-top: 4px; }
  .battlelog {
    top: 3px;
    z-index: 8;
    max-width: 86vw;
  }
  .energy { left: 8px; top: 8px; }
  .deckInfo {
    left: 58px;
    right: 126px;
    top: 14px;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .endTurn {
    top: 7px;
    right: 8px;
    bottom: auto;
    width: 112px;
    min-height: 40px;
    padding: 7px 6px;
    white-space: nowrap;
  }
}

@media (max-width: 370px) {
  .quick-nav { gap: 4px; }
  .quick-nav button { padding-inline: 7px; font-size: 10px; }
  .deckInfo { right: 116px; font-size: 10px; }
  .endTurn { width: 104px; font-size: 13px; }
}

/* Keep the battle controls directly above the hand and separate from combat text. */
.handArea .energy,.handArea .deckInfo,.handArea .endTurn{top:auto}
.handArea .energy{bottom:calc(clamp(160px,25vh,230px) + 24px)}
.handArea .deckInfo{bottom:calc(clamp(160px,25vh,230px) + 40px)}
.handArea .endTurn{bottom:calc(clamp(160px,25vh,230px) + 24px)}
@media (max-width:700px){
  #battle>.battlelog{top:6px;left:88px;right:136px;width:auto;max-width:none;transform:none;font-size:10px;line-height:1.35;text-align:center;white-space:normal;overflow:visible;text-overflow:clip}
  body.scene-battle .suspend-run{top:104px;left:8px}
  #battle>.arena{padding-top:64px}
  .handArea .energy{top:auto;bottom:186px;left:8px}
  .handArea .deckInfo{top:auto;bottom:199px;left:58px;right:126px}
  .handArea .endTurn{top:auto;bottom:186px;right:8px}
}
@media (max-width:700px) and (max-height:680px){
  #battle>.handArea{height:224px;flex-basis:224px}
  #battle .card{height:146px}
  .handArea .energy,.handArea .endTurn{bottom:160px}
  .handArea .deckInfo{bottom:173px}
}