/* A second, quiet combat row leaves all movement and class controls intact. */
.class-skills {
  position: absolute; z-index: 3;
  left: calc(10px + var(--safe-left, 0px)); right: calc(10px + var(--safe-right, 0px));
  bottom: calc(78px + var(--safe-bottom, 0px));
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  pointer-events: none;
}
.class-skills .class-skill {
  pointer-events: auto; touch-action: manipulation; user-select: none;
  flex: 0 0 80px; width: 80px; min-width: 44px; min-height: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px; border: 1px solid #a5b8ae50; border-radius: 10px;
  color: #d2e0d3; background: #1d332beF; box-shadow: none; font: 600 10px/1.15 system-ui, sans-serif;
}
.class-skills .class-skill-name { font-size: 9px; font-weight: 500; white-space: nowrap; }
.class-skills .class-skill small, .class-skills .class-skill > span:last-child { font: 600 10px/1.15 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.class-skills .class-skill:disabled { color: #9cafa4; border-color: #8faaa030; background: #1c2b25ed; opacity: 1; }
.class-skills .class-skill.class-skill-active { color: #e1f4ed; border-color: #92c3b2; background: #294b3fee; }
.class-skills .class-skill:focus-visible { outline: 2px solid #c6ddbd; outline-offset: 2px; }
.class-passive { min-width: 0; margin-right: auto; max-width: 145px; padding: 4px 7px; border-radius: 7px; background: #17291bd9; color: #b4c8b0; font: 500 10px/1.4 system-ui, sans-serif; overflow-wrap: anywhere; }
.class-passive:empty { display: none; }
.forest-rpg.rpg-shared #app > #classSkills { display: none; }
.forest-rpg #app.class-skills-visible > .rpg-notices,
.forest-rpg #sharedScreen.class-skills-visible > .rpg-shared-notices { bottom: calc(132px + var(--safe-bottom, 0px)); }
#app.class-skills-visible > #interact, #app.class-skills-visible > #lootNotice,
#sharedScreen.class-skills-visible > #realmNotice { bottom: calc(132px + var(--safe-bottom, 0px)); }
@media (max-width: 350px) {
  .class-skills { left: calc(8px + var(--safe-left, 0px)); right: calc(8px + var(--safe-right, 0px)); gap: 4px; }
  .class-passive { font-size: 9px; padding: 4px 5px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .class-skills { bottom: calc(66px + var(--safe-bottom, 0px)); }
  .forest-rpg #app.class-skills-visible > .rpg-notices,
  .forest-rpg #sharedScreen.class-skills-visible > .rpg-shared-notices { bottom: calc(116px + var(--safe-bottom, 0px)); }
}