/* Ventanas, botones y puntero estilo cliente clásico. Compartido por la portada y /game. */

html, body { cursor: url("/cursor.svg") 3 2, auto; }
button, a, select, label { cursor: url("/cursor.svg") 3 2, pointer; }

.ro-win {
  background: #fff;
  border: 1px solid #7d89a6;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #fff, 0 6px 18px rgba(20, 40, 110, 0.28);
  font: 12px/1.6 Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
  color: #000;
  overflow: hidden;
}
.ro-title {
  height: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px 0 6px;
  background: linear-gradient(to bottom, #fbfcff 0%, #e3e9f5 55%, #cdd6ea 100%);
  border-bottom: 1px solid #a7b2cb;
  font-size: 11px;
  color: #313b57;
  user-select: none;
}
.ro-title .gem {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #e8fbff, #3a8ee0);
  border: 1px solid #2b5ea8;
}
.ro-body { padding: 8px 12px 10px; }
.ro-foot {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 4px 6px;
  background: #f0f3f9;
  border-top: 1px solid #d5dbe8;
}
.ro-btn {
  font: 11px Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
  height: 20px;
  min-width: 52px;
  padding: 0 10px;
  color: #1b2440;
  border: 1px solid #8a96b2;
  border-radius: 3px;
  background: linear-gradient(to bottom, #ffffff 0%, #eef1f8 50%, #d6deee 100%);
  box-shadow: inset 0 1px 0 #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.ro-btn:hover { border-color: #5a72b4; background: linear-gradient(to bottom, #ffffff 0%, #f3f7ff 50%, #dfe8fb 100%); }
.ro-btn:active, .ro-btn[aria-pressed="true"] {
  background: linear-gradient(to bottom, #d6deee 0%, #eef1f8 60%, #ffffff 100%);
  border-color: #4a63a8;
  color: #1f3fa8;
  font-weight: bold;
}
.ro-btn:focus-visible { outline: 1px dotted #1f3fa8; outline-offset: 1px; }

.ro-select {
  font: 11px Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
  height: 18px;
  padding: 0 2px;
  color: #1b2440;
  border: 1px solid #8a96b2;
  border-radius: 2px;
  background: #fff;
}

/* Barras de HP/SP/Exp */
.ro-bar {
  height: 7px;
  border: 1px solid #6b7796;
  border-radius: 1px;
  background: #3b4152;
  overflow: hidden;
}
.ro-bar > i { display: block; height: 100%; width: 100%; transition: width 0.2s ease; }
.ro-bar.hp > i { background: linear-gradient(#7fe07f, #2e9a2e); }
.ro-bar.hp.low > i { background: linear-gradient(#ff8a8a, #c42020); }
.ro-bar.sp > i { background: linear-gradient(#8fb4ff, #2c5fd6); }
.ro-bar.exp > i { background: linear-gradient(#ffe38a, #d69a12); }