// OT-MMO: estilos del PvP (ventana H, aviso de partida lista, HUD de arena y marcador final).
// Piel pizarra de la guía (DESIGN.md); el oro de la ventana de dungeon (#C7A86B) solo donde algo importa: la pestaña,
// el modo elegido, la cifra de la cuenta atrás. Lo que te saca de algo (salir de la cola) va en rojo sangre, como HEROICA.

PvpPeligro < UIButton
  size: 140 28
  ttf-font: geistsemibold
  ttf-font-size: 12
  color: #FFE9E9
  background-color: #3A0608
  border-width: 1
  border-color: #B3141C
  click-sound: 2774

  $hover !disabled:
    background-color: #5C0A0F
    border-color: #E8262F

  $pressed !disabled:
    background-color: #260304
    text-offset: 0 1

  $disabled:
    color: #FFE9E960
    border-color: #5A1A1E

// Saldo de una moneda: etiqueta, cifra en mono y el tope semanal como raya fina debajo.
PvpSaldo < UIWidget
  size: 176 50
  focusable: false
  phantom: true

  Label
    id: etiqueta
    anchors.top: parent.top
    anchors.left: parent.left
    ttf-font: geist
    ttf-font-size: 11
    color: $otmmo-text-2
    text-auto-resize: true

  Label
    id: cifra
    anchors.top: etiqueta.bottom
    anchors.left: parent.left
    margin-top: 2
    ttf-font: geistmono
    ttf-font-size: 18
    color: $otmmo-text
    text-auto-resize: true

  Label
    id: tope
    anchors.bottom: cifra.bottom
    anchors.left: cifra.right
    margin-left: 8
    margin-bottom: 2
    ttf-font: geistmono
    ttf-font-size: 11
    color: $otmmo-text-2
    text-auto-resize: true

  UIWidget
    id: raya
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    height: 2
    background-color: $otmmo-surface
    phantom: true

    UIWidget
      id: fill
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.left: parent.left
      width: 0
      background-color: #C7A86B
      phantom: true

// Fila de un modo (arenas y campos de batalla). Se elige con clic: borde de oro y fondo algo más claro.
PvpModo < UIWidget
  height: 58
  background-color: $otmmo-bg
  border-width: 1
  border-color: $otmmo-border
  focusable: false
  change-cursor-image: true
  cursor: pointer

  $hover !disabled:
    background-color: $otmmo-bg-2
    border-color: $otmmo-border-hover

  $checked:
    background-color: $otmmo-surface
    border-color: #C7A86B

  $disabled:
    change-cursor-image: false

  Label
    id: nombre
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 11
    margin-left: 14
    ttf-font: geistsemibold
    ttf-font-size: 14
    color: $otmmo-text
    text-auto-resize: true
    phantom: true

  Label
    id: meta
    anchors.top: nombre.bottom
    anchors.left: nombre.left
    margin-top: 3
    ttf-font: geist
    ttf-font-size: 11
    color: $otmmo-text-2
    text-auto-resize: true
    phantom: true

  Label
    id: rating
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 9
    margin-right: 14
    ttf-font: geistmono
    ttf-font-size: 18
    color: $otmmo-text
    text-auto-resize: true
    phantom: true

  Label
    id: registro
    anchors.top: rating.bottom
    anchors.right: rating.right
    margin-top: 1
    ttf-font: geistmono
    ttf-font-size: 11
    color: $otmmo-text-2
    text-auto-resize: true
    phantom: true

  Label
    id: cola
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    margin-right: 108
    ttf-font: geist
    ttf-font-size: 11
    color: $otmmo-text-2
    text-auto-resize: true
    phantom: true

// Fila de la tabla de la temporada.
PvpFilaTemporada < UIWidget
  height: 30
  focusable: false
  phantom: true
  border-width-bottom: 1
  border-color: $otmmo-border

  Label
    id: modo
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    ttf-font: geistsemibold
    ttf-font-size: 13
    color: $otmmo-text
    text-auto-resize: true

  Label
    id: rating
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    margin-right: 300
    ttf-font: geistmono
    ttf-font-size: 13
    color: $otmmo-text
    text-auto-resize: true

  Label
    id: mejor
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    margin-right: 208
    ttf-font: geistmono
    ttf-font-size: 13
    color: $otmmo-text-2
    text-auto-resize: true

  Label
    id: partidas
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    margin-right: 112
    ttf-font: geistmono
    ttf-font-size: 13
    color: $otmmo-text-2
    text-auto-resize: true

  Label
    id: victorias
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    ttf-font: geistmono
    ttf-font-size: 13
    color: $otmmo-text-2
    text-auto-resize: true

// Miembro del aviso «Tu partida está lista»: punto de estado + nombre + clase.
PvpListo < UIWidget
  height: 22
  focusable: false
  phantom: true

  UIWidget
    id: punto
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    size: 8 8
    background-color: $otmmo-border-hover
    phantom: true

  Label
    id: nombre
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: punto.right
    margin-left: 10
    ttf-font: geistsemibold
    ttf-font-size: 12
    color: $otmmo-text
    text-auto-resize: true

  Label
    id: estado
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    ttf-font: geist
    ttf-font-size: 11
    color: $otmmo-text-2
    text-auto-resize: true

// Marco de un rival en el HUD de arena: clase (letra), nombre, vida, maná y el lanzamiento en curso.
PvpMarco < UIWidget
  size: 200 46
  background-color: #10161CD8
  border-width: 1
  border-color: $otmmo-border
  focusable: false
  phantom: true

  Label
    id: clase
    anchors.top: parent.top
    anchors.left: parent.left
    size: 22 22
    margin: 5
    text-align: center
    ttf-font: geistsemibold
    ttf-font-size: 12
    color: $otmmo-text
    background-color: $otmmo-surface

  Label
    id: nombre
    anchors.top: parent.top
    anchors.left: clase.right
    anchors.right: parent.right
    margin-top: 5
    margin-left: 7
    margin-right: 6
    height: 13
    ttf-font: geistsemibold
    ttf-font-size: 11
    color: $otmmo-text

  UIWidget
    id: vida
    anchors.top: nombre.bottom
    anchors.left: nombre.left
    anchors.right: parent.right
    margin-top: 3
    margin-right: 6
    height: 6
    background-color: #2A1517
    phantom: true

    UIWidget
      id: fill
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.left: parent.left
      width: 0
      background-color: $otmmo-hp
      phantom: true

  UIWidget
    id: mana
    anchors.top: vida.bottom
    anchors.left: vida.left
    anchors.right: vida.right
    margin-top: 2
    height: 3
    background-color: #142030
    phantom: true

    UIWidget
      id: fill
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.left: parent.left
      width: 0
      background-color: $otmmo-mana
      phantom: true

  Label
    id: carga
    anchors.top: mana.bottom
    anchors.left: clase.left
    anchors.right: parent.right
    margin-top: 2
    height: 12
    ttf-font: geist
    ttf-font-size: 10
    color: #D99A45

  Label
    id: pct
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 5
    margin-right: 6
    ttf-font: geistmono
    ttf-font-size: 10
    color: $otmmo-text-2
    text-auto-resize: true

// Fila del marcador final.
PvpFilaFin < UIWidget
  height: 26
  focusable: false
  phantom: true

  Label
    id: nombre
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    margin-left: 8
    ttf-font: geistsemibold
    ttf-font-size: 12
    color: $otmmo-text
    text-auto-resize: true

  Label
    id: clase
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    margin-left: 168
    ttf-font: geist
    ttf-font-size: 11
    color: $otmmo-text-2
    text-auto-resize: true

  Label
    id: danio
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    margin-right: 268
    ttf-font: geistmono
    ttf-font-size: 12
    color: $otmmo-text
    text-auto-resize: true

  Label
    id: cura
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    margin-right: 176
    ttf-font: geistmono
    ttf-font-size: 12
    color: $otmmo-text
    text-auto-resize: true

  Label
    id: derribos
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    margin-right: 96
    ttf-font: geistmono
    ttf-font-size: 12
    color: $otmmo-text
    text-auto-resize: true

  Label
    id: rating
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    margin-right: 8
    ttf-font: geistmono
    ttf-font-size: 12
    color: $otmmo-text-2
    text-auto-resize: true