/* ==================================================================================
   madera_web.css: ESTILO MADERA DE AO FOREVER para las paginas web de aoforever.cc
   (CLAUDE_SKINS_CINETICAS\ESTILO_MADERA_AOFOREVER.md y PAGINAS_WEB_MADERA.md)
   Mismo arte que las ventanas del juego (Reincorporaciones, Fotodenuncias, /cuarzos): tabla de madera del
   PSD, tablones de boton, letra dorada serif negrita cursiva, cajas veladas y hundidas con filete dorado.
   Sin emojis ni iconos de colores. Piezas: imagenes/madera/ (herramientas\gen_madera_web.py).
   Las paginas lo cargan solo con define('NUEVO_MODO_CSS', 1). Las rutas de las imagenes son relativas a
   este archivo, asi que sirve igual desde la raiz y desde /cuenta/.
   ================================================================================== */
/* ==================================================================================
   ESTILO MADERA DE AO FOREVER (CLAUDE_SKINS_CINETICAS\ESTILO_MADERA_AOFOREVER.md)
   Mismo arte que online.php, Reincorporaciones, Fotodenuncias y /cuarzos: tabla de madera del PSD,
   tablones de boton, letra dorada serif negrita cursiva, cajas veladas y hundidas con filete dorado.
   Sin emojis ni iconos de colores. Piezas: imagenes/madera/ (herramientas\gen_madera_web.py).
   ================================================================================== */
.mad-fondo {
  background: #221308;
  padding: 18px 8px 4px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #281608, inset 0 0 0 2px rgba(196,150,60,.45), inset 0 0 34px rgba(0,0,0,.9);
  cursor: default;
}
.mad-tabla {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 16px;
  border-style: solid;
  border-width: 18px 24px 24px 24px;
  border-color: transparent;
  border-image: url(imagenes/madera/tabla.png) 58 70 118 70 fill / 58px 70px 118px 70px stretch round;
  padding: 14px 12px 10px;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.75));
  text-align: center;
  font: bold 12px Tahoma, "Liberation Sans", Arial, sans-serif;
  color: #ffecaa;
  text-shadow: 1px 1px 0 #000;
}
.mad-tabla a { color: #f0c860; }
.mad-tabla a:hover { color: #fff6b0; }
.oro {
  display: inline-block;
  font-family: "Liberation Serif", "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  background: linear-gradient(180deg, #fff6b0 8%, #f0c860 52%, #c8902c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 1px #28160a) drop-shadow(0 0 1px #28160a) drop-shadow(2px 3px 2px rgba(0,0,0,.85));
  padding: 0 3px;
}
.mad-titulo {
  display: block;
  margin: 0 0 4px;
  font-family: "Liberation Serif", "Times New Roman", Times, serif;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.15;
  color: transparent;
}
.mad-subtitulo { display: block; margin: 0 0 12px; color: #c9b68f; font-size: 12px; letter-spacing: .5px; }
.mad-sub { margin: 0 0 8px; font-size: 17px; line-height: 1.2; }
.mad-rot { font-size: 15px; line-height: 1.2; }
.mad-velada {
  box-sizing: border-box;
  background: rgba(24,12,3,.46);
  border: 1px solid rgba(240,200,96,.38);
  border-radius: 10px;
  padding: 10px 12px 12px;
  margin-bottom: 10px;
  text-align: center;
}
.mad-cols { display: flex; gap: 10px; align-items: stretch; }
.mad-cols > .mad-velada { flex: 1 1 0; min-width: 0; }
.mad-hundido {
  background: #180c04;
  border: 1px solid #c4963c;
  box-shadow: 0 0 0 1px #281608, inset 0 2px 8px rgba(0,0,0,.85);
}
.mad-sep { height: 1px; background: rgba(196,150,60,.6); border: 0; border-bottom: 1px solid #281608; margin: 12px 4px; }
.mad-dato {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  border-bottom: 1px solid rgba(196,150,60,.22);
  text-align: right;
}
.mad-dato:last-child { border-bottom: 0; }
.mad-dato .mad-rot { text-align: left; flex: 0 0 auto; }
.mad-valor { color: #ffecaa; font-size: 12px; }
.mad-texto { color: #ffecaa; font-size: 12px; line-height: 1.65; text-align: left; margin: 0; }
.mad-texto strong { color: #f0c860; }
.mad-total { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 6px; }
.mad-total img { width: 42px; height: auto; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.8)); }
.mad-total .oro { font-size: 34px; line-height: 1; font-style: normal; }
.mad-total .mad-total-txt { display: block; color: #ffecaa; font-size: 12px; margin-top: 3px; }
.mad-error { color: #ff7864; font-size: 13px; }

/* Boton de tablon (la letra dorada va encima, sin deformarse) */
.mad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 150px;
  height: 41px;
  margin: 4px 3px;
  padding: 0 8px;
  border-style: solid;
  border-width: 0 20px;
  border-color: transparent;
  border-image: url(imagenes/madera/tablon.png) 0 20 fill / 0 20px stretch;
  background: none;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  font: inherit;
  line-height: 1;
  color: inherit;
  outline: none;
}
.mad-btn .oro { font-size: 17px; line-height: 1; vertical-align: middle; }
.mad-btn:hover, .mad-btn.activa { border-image-source: url(imagenes/madera/tablon_h.png); }
.mad-btn:hover .oro, .mad-btn.activa .oro {
  filter: brightness(1.12) drop-shadow(0 0 3px rgba(255,230,120,.55)) drop-shadow(0 0 1px #28160a) drop-shadow(2px 3px 2px rgba(0,0,0,.85));
}
.mad-btn-chico { min-width: 0; height: 32px; padding: 0 4px; border-width: 0 15px; border-image: url(imagenes/madera/tablon.png) 0 20 fill / 0 15px stretch; }
.mad-btn-chico .oro { font-size: 14px; }
/* solapas (Desafios / Torneos, Oficial / Battle): la elegida es el tablon encendido */
.mad-solapas { display: flex; justify-content: center; gap: 4px; margin: 2px 0 4px; flex-wrap: wrap; }
.mad-solapas .mad-btn { min-width: 168px; }
.mad-solapas .mad-btn:not(.activa) .oro { opacity: .72; }

/* Campo de texto (TextBox del VB6: #261406 / #ffecb4, filete dorado) */
.mad-campo {
  box-sizing: border-box;
  width: 250px;
  height: 34px;
  padding: 0 10px;
  background: #261406;
  color: #ffecb4;
  border: 1px solid #c4963c;
  box-shadow: 0 0 0 1px #281608, inset 0 2px 5px rgba(0,0,0,.7);
  font: bold 14px "Times New Roman", "Liberation Serif", serif;
  outline: none;
}
.mad-campo::placeholder { color: #96826e; font-weight: normal; }
.mad-campo:focus { border-color: #e6be5a; }

/* Codigo / comandos */
code.mad, .mad-tabla code {
  background: #180c04;
  border: 1px solid rgba(196,150,60,.55);
  color: #f0c860;
  font: bold 12px Consolas, "Liberation Mono", monospace;
  padding: 1px 5px;
  text-shadow: none;
}
/* Listas de reglas: rombo dorado en vez de punto */
.mad-lista-reglas { list-style: none; margin: 6px 0 0; padding: 0; text-align: left; }
.mad-lista-reglas li { position: relative; padding: 4px 0 4px 18px; color: #ffecaa; line-height: 1.55; }
.mad-lista-reglas li::before {
  content: "";
  position: absolute;
  left: 3px; top: 10px;
  width: 6px; height: 6px;
  background: linear-gradient(135deg, #fff6b0, #c8902c);
  border: 1px solid #281608;
  transform: rotate(45deg);
}
.mad-lista-reglas strong { color: #f0c860; }

/* Podio del top 3 */
.podio { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 8px; align-items: end; margin: 4px 0 14px; }
.podio-p {
  position: relative;
  box-sizing: border-box;
  background: rgba(24,12,3,.55);
  border: 1px solid rgba(240,200,96,.38);
  border-radius: 10px;
  padding: 26px 6px 10px;
  margin-top: 18px;
  text-align: center;
  min-width: 0;
}
.podio-p.p1 { padding-top: 34px; padding-bottom: 16px; border-color: rgba(240,200,96,.8); box-shadow: 0 0 14px rgba(240,200,96,.18), inset 0 0 18px rgba(240,200,96,.08); }
.podio-p.p2 { border-color: rgba(207,214,220,.6); }
.podio-p.p3 { border-color: rgba(208,138,74,.65); }
.podio-p.clickeable { cursor: pointer; }
.podio-p.clickeable:hover { background: rgba(40,22,8,.7); }
.medalla {
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid #281608;
  box-shadow: 0 3px 6px rgba(0,0,0,.7), inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 4px rgba(0,0,0,.35);
  font: bold italic 21px/34px "Liberation Serif", "Times New Roman", serif;
  color: #281608;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.p1 .medalla { width: 46px; height: 46px; top: -24px; font-size: 26px; line-height: 42px; }
.oro-m    { background: radial-gradient(circle at 35% 30%, #fffbd0 0%, #f0c860 45%, #a8741e 100%); }
.plata-m  { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #cfd6dc 45%, #7d8890 100%); }
.bronce-m { background: radial-gradient(circle at 35% 30%, #ffe0c0 0%, #d08a4a 45%, #7a4a20 100%); }
.podio-nick { display: block; font-size: 14px; color: #ffecaa; word-break: break-word; line-height: 1.25; }
.p1 .podio-nick { font: bold italic 19px "Liberation Serif", "Times New Roman", serif; }
.podio-clan { display: block; color: #c9b68f; font-size: 11px; margin-top: 2px; }
.podio-dato { display: block; margin-top: 6px; color: #c9b68f; font-size: 11px; }
.podio-dato b { color: #f0c860; font-size: 14px; }

/* Tabla del ranking */
.mad-rank { width: 100%; border-collapse: collapse; }
.mad-rank th {
  padding: 8px 6px 7px;
  border-bottom: 1px solid rgba(196,150,60,.6);
  box-shadow: 0 1px 0 #281608;
  text-align: center;
  font-weight: normal;
}
.mad-rank th.nick-col { text-align: left; }
.mad-rank td {
  padding: 7px 6px;
  border-top: 1px solid rgba(196,150,60,.14);
  text-align: center;
  color: #ffecaa;
  font: bold 12px Tahoma, "Liberation Sans", Arial, sans-serif;
  text-shadow: 1px 1px 0 #000;
}
.mad-rank tbody tr:nth-child(even) td { background: rgba(255,236,170,.03); }
.mad-rank tbody tr:hover td { background: rgba(240,200,96,.09); }
.mad-rank td.nick-col { text-align: left; }
.mad-rank .pos-col { width: 40px; color: #b8a27a; }
.mad-rank .gan-col, .mad-rank .per-col, .mad-rank .diff-col { width: 70px; font-variant-numeric: tabular-nums; }
.mad-rank .gan-col { color: #96e678; }
.mad-rank .per-col { color: #ff9a88; }
.dif-pos { color: #f0c860; }
.dif-neg { color: #ff7864; }
.dif-cero { color: #c9b68f; }
.mad-rank tr.top1-row td { background: linear-gradient(90deg, rgba(240,200,96,.22), rgba(240,200,96,0) 75%) !important; }
.mad-rank tr.top2-row td { background: linear-gradient(90deg, rgba(207,214,220,.16), rgba(207,214,220,0) 75%) !important; }
.mad-rank tr.top3-row td { background: linear-gradient(90deg, rgba(208,138,74,.18), rgba(208,138,74,0) 75%) !important; }
.mad-rank tr.top1-row td.pos-col { box-shadow: inset 3px 0 0 #f0c860; }
.mad-rank tr.top2-row td.pos-col { box-shadow: inset 3px 0 0 #cfd6dc; }
.mad-rank tr.top3-row td.pos-col { box-shadow: inset 3px 0 0 #d08a4a; }
.pos-medalla {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid #281608;
  font: bold italic 13px/21px "Liberation Serif", "Times New Roman", serif;
  color: #281608;
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.7), inset 0 1px 2px rgba(255,255,255,.5);
}
.badge-top1, .badge-top2, .badge-top3 {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font: bold 10px Tahoma, "Liberation Sans", Arial, sans-serif;
  letter-spacing: .4px;
  background: #180c04;
  vertical-align: 1px;
  text-shadow: none;
}
.badge-top1 { color: #f0c860; border: 1px solid #f0c860; box-shadow: 0 0 6px rgba(240,200,96,.35); }
.badge-top2 { color: #e2e7ea; border: 1px solid #cfd6dc; }
.badge-top3 { color: #e8a568; border: 1px solid #d08a4a; }
.clan-tag { margin-left: 6px; color: #c9b68f; font-weight: normal; font-size: 11px; }
.efe-pct { display: block; color: #f0c860; font-size: 14px; }
.efe-sub { display: block; color: #c9b68f; font-size: 10px; font-weight: normal; margin-top: 1px; }
.efe-barra { display: block; height: 4px; margin: 3px auto 0; width: 110px; background: #0e0602; border: 1px solid #6b4a1e; overflow: hidden; }
.efe-barra span { display: block; height: 100%; background: linear-gradient(180deg, #fff0a0, #c8902c); }
.th-sub { display: block; font: normal 10px Tahoma, "Liberation Sans", Arial, sans-serif; color: #c9b68f; text-shadow: none; }

/* X redonda para cerrar ventanas (la del celular del juego) */
.mad-x {
  position: absolute;
  top: 0; right: 30px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #6a4420, #2a170a);
  border: 1px solid #c8963e;
  color: #f0c860;
  font: bold 17px/30px "Liberation Serif", "Times New Roman", serif;
  text-align: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
.mad-x:hover { color: #fff6b0; border-color: #e6be5a; }