/* Estética Matías Camacho para toda la portada debajo del cabezal. */
body {
  background:
    radial-gradient(circle at 84% 35%, #075be82b, transparent 32rem),
    radial-gradient(circle at 7% 62%, #0b9fd61d, transparent 28rem),
    linear-gradient(180deg, #080b11, #0b121d 45%, #070b12);
  color: #eaf2ff;
}
.shell > section.panel {
  position: relative;
  overflow: hidden;
  border-color: #5d8fc63a;
  color: #eaf2ff;
  background:
    radial-gradient(circle at 92% 2%, #087bff24, transparent 22rem),
    linear-gradient(145deg, #121b29f7, #080d15f8 72%);
  box-shadow: inset 0 1px 0 #ffffff10, 0 24px 65px #0005;
  backdrop-filter: blur(14px);
}
.shell > section.panel::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(#ffffff05 1px, transparent 1px),
    linear-gradient(90deg, #ffffff05 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(135deg, #0009, transparent 68%);
  content: "";
}
.shell > section.panel > * {
  position: relative;
  z-index: 1;
}
.shell > section.panel h2,
.shell > section.panel h3 {
  color: #f7faff;
}
.shell > section.panel .tag {
  color: #29c8ff;
}
#ahora {
  margin-top: 0;
}
#status {
  border: 1px solid #53a6ff2e;
  color: #8eb7e7;
  background: #0b31592d;
}
.grid article {
  border-color: #ffffff14;
  background:
    linear-gradient(145deg, #162235d9, #0c131fd9);
  box-shadow: inset 0 1px 0 #ffffff0d;
}
.grid article::after {
  position: absolute;
  width: 100px;
  height: 100px;
  right: -42px;
  bottom: -52px;
  border-radius: 50%;
  background: #087bff1c;
  content: "";
}
.grid i {
  border: 1px solid #4ba5ff38;
  color: #66cfff;
  background: linear-gradient(145deg, #173d68, #10253f);
  box-shadow: inset 0 1px 0 #ffffff12, 0 8px 22px #0005;
}
.grid p,
.rates span {
  color: #8fa3bd;
}
.grid article > strong,
.rates b {
  color: #f4f8ff;
}
.grid small {
  color: #7187a2;
}
.game {
  border-color: #4d8dcc42 !important;
}
.steps li {
  color: #93a5bd;
}
.steps li > b {
  border: 1px solid #56b7ff42;
  background: linear-gradient(145deg, #0d4f9e, #087bd5);
  box-shadow: 0 7px 18px #0059c32e;
}
.player {
  border-color: #ffffff17;
  color: #bfd0e3;
  background: #ffffff07;
}
.player input {
  border-color: #3f5571;
  color: #f5f9ff;
  background: #070c14;
  outline: 0;
}
.player input:focus {
  border-color: #1688ff;
  box-shadow: 0 0 0 3px #1688ff20;
}
.player button {
  border: 1px solid #5aafff42;
  background: linear-gradient(135deg, #07489f, #087de4);
}
.player small {
  color: #7489a3;
}
.scores span {
  border: 1px solid #ffffff12;
  color: #8398b1;
  background: #ffffff06;
}
.scores b {
  color: #f1f7ff;
}
.zone.idle,
.zone.result {
  border: 1px solid #4ba6ff4a;
  background:
    radial-gradient(circle at 50% 30%, #1885ff42, transparent 65%),
    linear-gradient(145deg, #0c1b2f, #07275a 60%, #075fa5);
  box-shadow: inset 0 1px 0 #ffffff1a, 0 18px 42px #001d4d7a;
}
.ranking .heading {
  margin-bottom: 16px;
}
.ranking button {
  border: 1px solid #4b9cff3c;
  color: #dcecff;
  background: #0e29482e;
}
.ranking button:hover {
  border-color: #48a3ff80;
  background: #12365f66;
}
.table-wrap {
  border-color: #ffffff15;
  background: #070c1499;
}
table {
  color: #dfe9f7;
}
th,
td {
  border-bottom-color: #ffffff0d;
}
th {
  color: #7fa0c3;
  background: #ffffff06;
}
td:first-child {
  color: #4fbfff;
}
tbody tr {
  transition: background 0.15s ease;
}
tbody tr:hover {
  background: #1688ff0c;
}
.empty {
  color: #7187a2 !important;
}
.public-games {
  border-color: #5d9ee64a !important;
}
.duels-heading > div > p:not(.tag) {
  color: #90a3bb;
}
.duel-picker button {
  border-color: #ffffff16;
  color: #e6f0ff;
  background: linear-gradient(145deg, #152236, #0c141f);
  box-shadow: inset 0 1px 0 #ffffff0c;
}
.duel-picker button.selected {
  border-color: #278fff7a;
  color: #fff;
  background:
    radial-gradient(circle at 0 0, #1688ff2d, transparent 12rem),
    linear-gradient(145deg, #173153, #0b1727);
  box-shadow: inset 0 1px 0 #ffffff13, 0 12px 30px #001a4380;
}
.duel-picker span {
  color: #7d91ab;
}
.duel-sidebar {
  border-color: #ffffff16;
  color: #dfe9f7;
  background: linear-gradient(145deg, #152236, #0b131f);
  box-shadow: inset 0 1px 0 #ffffff0c;
}
.duel-name label {
  color: #b9c8db;
}
.duel-name input {
  border-color: #405570;
  color: #f4f8ff;
  background: #070c14;
  outline: 0;
}
.duel-name input:focus {
  border-color: #1688ff;
  box-shadow: 0 0 0 3px #1688ff20;
}
.duel-name button {
  border: 1px solid #5aafff48;
  background: linear-gradient(135deg, #0749a1, #087de4);
}
.duel-status {
  border: 1px solid #ffffff0d;
  background: #ffffff06;
}
.duel-status small {
  color: #8195ae;
}
.duel-players span {
  border-color: #ffffff10;
  background: #ffffff05;
}
.duel-players b {
  color: #dcecff;
  background: #1268c948;
}
.duel-players span:last-child b {
  color: #6fddff;
  background: #159fd02f;
}
.duel-players i {
  color: #8194ad;
}
.duel-stage {
  border: 1px solid #4d98ec4f;
  background:
    linear-gradient(#ffffff07 1px, transparent 1px),
    linear-gradient(90deg, #ffffff07 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, #0c62bc55, transparent 68%),
    #07101d;
  background-size: 38px 38px, 38px 38px, auto, auto;
  box-shadow: inset 0 0 55px #086fd12e, 0 22px 55px #0007;
}
.connect-board {
  border: 1px solid #5ba8ff42;
  background: linear-gradient(145deg, #12356e, #091c3e);
  box-shadow: inset 0 0 24px #0005, 0 15px 35px #0005;
}
.connect-cell::before {
  background: #101d2e;
  box-shadow: inset 0 4px 9px #0008, 0 1px 0 #ffffff0e;
}
.naval-cell {
  border-color: #5d9fc550;
  color: #dff6ff;
  background: #12314a;
}
.naval-cell.ship {
  background: #71839a;
}
.naval-cell.miss {
  background: #286079;
}
.rps-choice {
  border-color: #ffffff1d;
  color: #ddecff;
  background: linear-gradient(145deg, #17273b, #0d1725);
  box-shadow: inset 0 1px 0 #ffffff12;
}
.rps-choice.selected {
  outline-color: #42cfff;
  color: #fff;
  background: #153962;
}
footer {
  color: #71859f;
}
footer a {
  color: #5eb9ff;
}
@media (max-width: 540px) {
  body {
    background:
      radial-gradient(circle at 85% 32%, #075be824, transparent 23rem),
      linear-gradient(180deg, #080b11, #0b121d 48%, #070b12);
  }
  .shell > section.panel {
    border-radius: 22px;
  }
}