/* Primeira prancha da HUD: skills, taxas e controles do rodape. */
.dock {
  --hud-azul: #061d28;
  --hud-azul-claro: #0c3442;
  --hud-ouro: #d8ad53;
  --hud-ouro-claro: #ffe19a;
  --hud-ciano: #36d8ea;
  width: min(100%, 680px);
  gap: 6px;
  container-type: inline-size;
}

.dock .plate,
.action-frame {
  background: linear-gradient(150deg, #fff0ab 0%, #b88a35 22%, #f9d575 48%, #6c4918 77%, #e4bb60 100%);
  filter: drop-shadow(0 4px 8px #000b);
}
.dock .plate::before,
.action-frame::before {
  background: linear-gradient(180deg, #0b3541 0%, #041824 24%, #061c27 78%, #102e35 100%);
  box-shadow: inset 0 0 0 1px #275967, inset 0 0 18px #000b;
}
.dock .plate.ornate::after,
.action-frame.ornate::after {
  inset: 5px;
  opacity: 1;
  background:
    radial-gradient(circle, #e2ffff 0 21%, #26ddec 28% 48%, #b68530 55% 69%, transparent 75%) 0 50% / 13px 13px no-repeat,
    radial-gradient(circle, #e2ffff 0 21%, #26ddec 28% 48%, #b68530 55% 69%, transparent 75%) 100% 50% / 13px 13px no-repeat,
    linear-gradient(#e8c671, #865d21) 12px 2px / calc(100% - 24px) 2px no-repeat,
    linear-gradient(#835b24, #d6ad56) 12px calc(100% - 2px) / calc(100% - 24px) 2px no-repeat;
}

/* Oito slots, os botoes de talentos/organizacao e o rotulo inferior. */
.action-bar {
  --slot: clamp(34px, 4.2vw, 60px);
  --hud-ouro-claro: #ffe19a;
  --hud-ciano: #36d8ea;
  width: max-content;
  max-width: 100%;
  color: #f3dca3;
}
.action-frame {
  --chanfro: 14px;
  gap: 8px;
  padding: 9px 12px;
}
.action-slots { gap: 5px; }
.action-slot {
  --chanfro: 7px;
  width: var(--slot);
  height: var(--slot);
  padding: 3px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro));
  background: linear-gradient(145deg, #e6bc60, #815b21 45%, #c69e4b);
  box-shadow: none;
  overflow: hidden;
}
.action-slot::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: 0;
  clip-path: inherit;
  background: radial-gradient(ellipse at 50% 0, #133947, #061824 76%);
}
.action-slot.learned { background: linear-gradient(145deg, #ffe297, #9c7027 50%, #e3b957); }
.action-slot.learned::before { background: radial-gradient(ellipse at 50% 45%, #154053, #041624 80%); }
.action-slot:hover,
.action-slot:focus-visible { outline: 2px solid var(--hud-ciano); outline-offset: 1px; box-shadow: 0 0 10px #48e8f080; }
.action-slot img { position: relative; z-index: 1; }
.action-slot kbd,
.action-slot b,
.action-passive {
  z-index: 2;
  border: 1px solid #98702b;
  border-radius: 0;
  background: #061824ee;
  color: var(--hud-ouro-claro);
}
.action-slot kbd { top: 3px; left: 3px; }
.action-slot b { bottom: 3px; right: 3px; }
.action-passive { top: 3px; right: 3px; color: #9df3ec; }
.action-empty { position: relative; z-index: 1; color: #5f7687; font-size: 22px; }
.action-cooldown { z-index: 3; background: #00131bd9; color: #f8dc90; }
.action-tools { gap: 4px; }
.action-tools button {
  --chanfro: 6px;
  width: calc(var(--slot) * .72);
  height: calc((var(--slot) - 4px) / 2);
  border: 1px solid var(--hud-ouro);
  border-radius: 0;
  clip-path: polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro));
  background: linear-gradient(180deg, #103643, #061b27);
  color: #ffda7c;
  font-size: clamp(15px, 1.6vw, 22px);
  line-height: 1;
}
.action-tools button:hover,
.action-tools button:focus-visible { color: #fff2c5; box-shadow: inset 0 0 0 1px #55dce6, 0 0 8px #32d9e680; }
.action-hint {
  width: max-content;
  max-width: 100%;
  margin: 5px auto 0;
  padding: 2px 18px;
  border: 1px solid #9c762e;
  border-radius: 12px;
  background: linear-gradient(180deg, #103340ed, #061a27ed);
  color: #f3dfb4;
  font: 11px/1.5 Georgia, serif;
}
.action-feedback { color: #ffdb91; }
.action-buffs span { background: #0a2b39ed; border-color: #ad863b; }
.action-config {
  border-color: #d0a74a;
  background: linear-gradient(180deg, #0d3440f7, #061720f8);
  box-shadow: 0 8px 26px #000c, inset 0 0 0 1px #2b6975;
}
.action-config button { background: #0b2b38; }

/* A faixa completa conserva as quatro informacoes inclusive em celular. */
.dock-rates { width: 100%; --chanfro: 11px; }
.dock-rates .linha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  padding: 9px 13px;
}
.dock-rates .taxa {
  justify-content: center;
  min-width: 0;
  gap: 6px;
  padding: 0 8px;
  color: #e8dcc0;
  font: 12px/1.3 Georgia, serif;
}
.dock-rates .taxa + .taxa { border-left: 1px solid #9b752c; }
.dock-rates .taxa b { font: bold 16px/1.2 Georgia, serif; color: var(--hud-ouro-claro); }
.dock-rates .ic { width: 21px; height: 21px; color: #f5c55a; opacity: 1; }

/* Controles de caca e skills dos lados do mouse. */
.dock-main { justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
.dock-modes,
.mouse-quadro { --chanfro: 12px; gap: 5px; padding: 5px; }
.dock-modes > :is(.gear-btn, .modos) { margin: 3px; }
.dock-modes .modos { gap: 4px; margin-left: 0; }
.dock .gear-btn,
.dock .modo,
.mouse-botao {
  --chanfro: 7px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #ad8539;
  border-radius: 0;
  clip-path: polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro));
  background: linear-gradient(180deg, #123844, #061b28);
  color: #ffdb82;
}
.dock .gear-btn:hover,
.dock .modo:hover,
.mouse-botao:hover { box-shadow: inset 0 0 0 1px #48dbe7, 0 0 7px #46dbe670; }
.dock .modo.on { background: linear-gradient(180deg, #3a4b2c, #142818); }
.dock .modo[data-modo="move"].on { background: linear-gradient(180deg, #174458, #092632); }
.mouse-botao { width: 48px; height: 48px; }
.mouse-sem { width: 32px; height: 32px; border-color: #5b777e; }
.mouse-botao kbd { color: #ffdc88; border-color: #ad8539; background: #061b28; }
.mouse-botao img { width: 38px; height: 38px; }
.mouse-lista { left: auto; right: 0; transform: none; background: #092631f5; border-color: #b18b44; }
.mouse-opcao:hover { background: #174250; }

@container (max-width: 600px) {
  .dock-rates .linha { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 5px; }
  .dock-rates .taxa { justify-content: flex-start; }
  .dock-rates .taxa:nth-child(3) { border-left: 0; }
}

@media (max-width: 620px) {
  .action-bar { --slot: clamp(33px, 8vw, 42px); }
  .action-frame { gap: 5px; padding: 7px; }
  .action-slots { gap: 3px; }
  .action-tools button { min-width: 24px; min-height: 17px; }
  .dock-rates .linha { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 5px; padding: 7px; }
  .dock-rates .taxa { justify-content: flex-start; padding: 2px 6px; font-size: 11px; }
  .dock-rates .taxa:nth-child(3) { border-left: 0; }
  .dock .dock-rates .taxa:nth-child(n+3) { display: flex; }
  .dock-rates .taxa b { font-size: 13px; }
  .dock-rates .ic { width: 16px; height: 16px; }
  .dock .gear-btn, .dock .modo, .mouse-botao { width: 37px; height: 37px; }
  .dock .modo .ic { width: 20px; height: 20px; }
  .mouse-sem { width: 25px; height: 25px; }
}