/* ═════════════════════════════════════════════════════════════════
   GUERRA DE FACCIONES · la mesa de campaña
   ─────────────────────────────────────────────────────────────────
   Este juego no comparte nada con los demás. No hay panel, no hay
   tarjeta, no hay barra de casino: hay una mesa de nogal, una lámpara
   colgada encima y un mapa clavado con una frontera que se mueve.

   Paleta: madera oscura y tinta. UN solo calor, el de la lámpara.
   Dos bandos: marfil frío (Luz) y óxido (Furia). Nada de oro.

   Sin degradado sobre texto, sin resplandor de color, sin cristal
   esmerilado, sin bordes dorados translúcidos.
   ════════════════════════════════════════════════════════════════ */

body.escena-guerra{
  --gm-luz:#dcd3bd;          /* marfil frío: la Luz     */
  --gm-luz-h:#8e8877;
  --gm-fur:#b2453a;          /* óxido: la Furia         */
  --gm-fur-h:#6e2a24;
  --gm-lampara:#c98a3c;      /* el único calor          */
  --gm-madera:#241a12;
  --gm-madera-c:#3a2a1c;
  --gm-tinta:#0d0906;
  --gm-papel:#b8a583;
}

/* ── la mesa vista de cerca: vetas y penumbra ──────────────────── */
body.escena-guerra .escena-fondo{
  opacity:1;
  background:
    radial-gradient(ellipse 46% 34% at 50% 26%, rgba(201,138,60,.15), transparent 68%),
    radial-gradient(ellipse 130% 82% at 50% 116%, rgba(0,0,0,.94), transparent 60%),
    linear-gradient(180deg, #1b130d 0%, #140e09 48%, #0a0705 100%);
}
/* vetas de la madera: rectas y largas, no una textura de ruido */
body.escena-guerra .escena-fondo::after{
  content:'';position:absolute;inset:0;opacity:.55;
  background:repeating-linear-gradient(93deg,
    rgba(255,255,255,.016) 0 1px,
    transparent 1px 9px,
    rgba(0,0,0,.16) 9px 10px,
    transparent 10px 34px);
}
/* si la página aún no monta .escena-fondo, el cuerpo ya es la mesa */
body.escena-guerra{
  background:
    radial-gradient(ellipse 46% 34% at 50% 26%, rgba(201,138,60,.13), transparent 68%),
    linear-gradient(180deg, #1b130d 0%, #140e09 48%, #0a0705 100%);
}

/* ── la escena manda sobre el marco compartido ─────────────────── */
body.escena-guerra header,
body.escena-guerra .bonus,
body.escena-guerra .vineta,
body.escena-guerra #j-guerra > .sub,
body.escena-guerra #j-guerra .cabecera-juego h1{display:none}
body.escena-guerra #j-guerra .panel{
  background:none;border:none;box-shadow:none;padding:0;margin:0}
body.escena-guerra #j-guerra .cabecera-juego{
  position:fixed;top:9px;left:14px;z-index:41;margin:0;padding:0}
body.escena-guerra #j-guerra .cabecera-juego::after{display:none}
body.escena-guerra #j-guerra .info-btn{position:static}
body.escena-guerra .env{min-height:100dvh;padding:0;max-width:none}
body.escena-guerra section[id^="j-"]::before{display:none}

/* ══ ESTRUCTURA: todo cabe, nunca hay desplazamiento ══ */
#j-guerra .gm-mesa{
  position:relative;
  display:flex;flex-direction:column;align-items:stretch;
  height:100dvh;min-height:0;overflow:hidden;
  padding:40px clamp(10px,3vw,26px) clamp(8px,2vh,18px);
  gap:clamp(6px,1.2vh,12px);
}

/* ── la lámpara: un cono de luz, no un resplandor de color ─────── */
#j-guerra .gm-lampara{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(560px,92%);height:38%;pointer-events:none;z-index:0;
  background:linear-gradient(180deg, rgba(201,138,60,.13), rgba(201,138,60,0) 76%);
  clip-path:polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}
#j-guerra .gm-lampara > i{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:34px;height:8px;border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#2c2018,#171009);
  border:1px solid #43301e;border-top:none;
}

/* ── la chapa remachada al canto ───────────────────────────────── */
#j-guerra .gm-placa{
  position:relative;z-index:2;align-self:center;flex:none;
  padding:4px 26px;border-radius:2px;
  background:linear-gradient(180deg,#2a1f15,#1c140d);
  border:1px solid #43301e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#j-guerra .gm-placa::before,
#j-guerra .gm-placa::after{
  content:'';position:absolute;top:50%;width:4px;height:4px;border-radius:50%;
  transform:translateY(-50%);
  background:radial-gradient(circle at 34% 30%, #7a6244, #2b2015 70%);
}
#j-guerra .gm-placa::before{left:7px}
#j-guerra .gm-placa::after{right:7px}
#j-guerra .gm-placa span{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(8.5px,1.5vw,10px);letter-spacing:.2em;
  color:#9d8663;text-transform:uppercase;
}

/* ── EL MAPA ───────────────────────────────────────────────────── */
#j-guerra .gm-mapa{
  position:relative;z-index:1;flex:1 1 auto;min-height:96px;
  width:min(760px,100%);margin:0 auto;
  border-radius:2px;overflow:hidden;
  background:#2b2116;
  /* clavado a la mesa: sombra dura abajo, filo claro arriba */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 30px rgba(0,0,0,.6);
  border:1px solid #120c07;
}
#j-guerra #gmLienzo{display:block;width:100%;height:100%}

/* esquinas dobladas del papel: dos triángulos, sin filtros */
#j-guerra .gm-mapa::before,
#j-guerra .gm-mapa::after{
  content:'';position:absolute;width:16px;height:16px;pointer-events:none;z-index:3}
#j-guerra .gm-mapa::before{
  top:0;left:0;background:linear-gradient(135deg,#0a0705 50%,transparent 50%)}
#j-guerra .gm-mapa::after{
  bottom:0;right:0;background:linear-gradient(315deg,#0a0705 50%,transparent 50%)}

/* ── los estandartes clavados en los extremos ──────────────────── */
#j-guerra .gm-poste{
  position:absolute;bottom:8%;width:34px;height:clamp(46px,42%,88px);
  pointer-events:none;z-index:2;transform-origin:50% 100%;
  transition:transform .42s cubic-bezier(.3,.9,.4,1);
}
#j-guerra .gm-poste.luz  {left:clamp(8px,3%,22px)}
#j-guerra .gm-poste.furia{right:clamp(8px,3%,22px)}
#j-guerra .gm-poste .gm-asta{
  position:absolute;bottom:0;left:15px;width:3px;height:100%;border-radius:1px;
  background:linear-gradient(90deg,#1d1409,#6b5231 45%,#241a0e);
}
#j-guerra .gm-poste .gm-tela{
  position:absolute;top:2px;width:26px;height:34px;
  transform-origin:0 0;
}
#j-guerra .gm-poste.luz   .gm-tela{left:17px;background:var(--gm-luz);
  clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%)}
#j-guerra .gm-poste.furia .gm-tela{right:17px;background:var(--gm-fur);
  clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%)}
/* el paño ondea: giro lento y corto, no un aleteo de plantilla */
#j-guerra .gm-poste .gm-tela{animation:gm-ondear 5.2s ease-in-out infinite}
#j-guerra .gm-poste.furia .gm-tela{animation-duration:6.1s;animation-delay:-1.7s}
@keyframes gm-ondear{
  0%,100%{transform:skewY(0deg)   scaleX(1)}
  38%    {transform:skewY(2.4deg) scaleX(.94)}
  70%    {transform:skewY(-1.6deg)scaleX(.99)}
}
/* al lanzar el asalto el asta se inclina hacia el frente */
#j-guerra .gm-poste.luz.gm-carga  {transform:rotate(9deg)}
#j-guerra .gm-poste.furia.gm-carga{transform:rotate(-9deg)}

/* rótulo que viaja pegado a la frontera */
#j-guerra .gm-frente-lab{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:8px;letter-spacing:.24em;
  color:rgba(232,222,200,.62);pointer-events:none;
  padding:1px 5px;background:rgba(10,7,5,.5);border-radius:2px;
}

/* ── EL PARTE DE FUERZAS ───────────────────────────────────────── */
#j-guerra .gm-fuerzas{
  position:relative;z-index:2;flex:none;
  width:min(760px,100%);margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(8px,2vw,20px);
}
#j-guerra .gm-lado{display:grid;gap:3px}
#j-guerra .gm-lado.furia{justify-items:end;text-align:right}
#j-guerra .gm-nom{
  font-size:9.5px;font-weight:600;letter-spacing:.2em}
#j-guerra .gm-lado.luz   .gm-nom{color:var(--gm-luz)}
#j-guerra .gm-lado.furia .gm-nom{color:var(--gm-fur)}
#j-guerra .gm-cif{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(17px,3.4vw,24px);font-weight:600;line-height:1;color:#efe7d6}
#j-guerra .gm-barra{
  display:block;width:100%;max-width:210px;height:3px;
  background:rgba(0,0,0,.55);border-top:1px solid rgba(0,0,0,.7);overflow:hidden}
#j-guerra .gm-lado.furia .gm-barra{justify-self:end}
#j-guerra .gm-barra > i{
  display:block;height:100%;width:0;
  transition:width .9s cubic-bezier(.24,.72,.24,1)}
#j-guerra .gm-barra > i::after{display:none}
#j-guerra .gm-lado.luz   .gm-barra > i{background:var(--gm-luz)}
#j-guerra .gm-lado.furia .gm-barra > i{background:var(--gm-fur);
  margin-left:auto}
#j-guerra .gm-meta{
  font-family:var(--mono);font-size:8px;letter-spacing:.18em;
  color:rgba(200,186,158,.42);white-space:nowrap;text-align:center}

/* ── LAS ÓRDENES ───────────────────────────────────────────────── */
#j-guerra .gm-ordenes{
  position:relative;z-index:2;flex:none;
  width:min(760px,100%);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2.4vw,22px);
}
#j-guerra .gm-orden{position:relative}

/* el botón es un asta con su banderín: todo el adorno en pseudos,
   porque la página le reescribe el texto durante el enfriamiento */
#j-guerra .gm-btn{
  position:relative;display:block;width:100%;
  padding:clamp(9px,1.7vh,13px) 14px clamp(9px,1.7vh,13px) 30px;
  font-family:inherit;font-size:clamp(10px,1.9vw,12px);font-weight:600;
  letter-spacing:.16em;text-align:left;cursor:pointer;
  border-radius:2px;
  background:linear-gradient(180deg,#2c2015,#1d150d);
  border:1px solid #4a3520;
  color:#cdbfa4;
  box-shadow:0 3px 0 #100b06, inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .1s linear, box-shadow .1s linear,
             color .18s ease, border-color .18s ease, background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
/* el banderín, pegado al canto izquierdo */
#j-guerra .gm-btn::before{
  content:'';position:absolute;left:11px;top:50%;width:10px;height:14px;
  transform:translateY(-50%);
  clip-path:polygon(0 0,100% 0,100% 68%,50% 100%,0 68%);
}
#j-guerra .gm-orden.luz   .gm-btn::before{background:var(--gm-luz)}
#j-guerra .gm-orden.furia .gm-btn::before{background:var(--gm-fur)}
#j-guerra .gm-orden.luz   .gm-btn:hover:not(:disabled){
  border-color:var(--gm-luz-h);color:#efe7d6}
#j-guerra .gm-orden.furia .gm-btn:hover:not(:disabled){
  border-color:var(--gm-fur);color:#e7c4bd}
/* clavar el asta: baja de golpe y se queda */
#j-guerra .gm-btn:active:not(:disabled){
  transform:translateY(3px);box-shadow:0 0 0 #100b06, inset 0 1px 0 rgba(255,255,255,.05)}
#j-guerra .gm-btn:disabled{
  cursor:default;color:#6d6152;border-color:#2b2014;
  background:#181109;box-shadow:0 2px 0 #0d0905;
  font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.2em}
#j-guerra .gm-btn:disabled::before{background:#3a2f22}

/* ── la mecha del reagrupamiento ───────────────────────────────── */
#j-guerra .gm-mecha{
  position:relative;z-index:2;flex:none;height:2px;
  width:min(760px,100%);margin:0 auto;background:rgba(0,0,0,.5);overflow:hidden}
#j-guerra .gm-mecha > i{
  display:block;height:100%;width:0;background:var(--gm-lampara);
  transition:width 1s linear}

/* ── EL PARTE DE GUERRA ────────────────────────────────────────── */
#j-guerra .gm-parte{
  position:relative;z-index:2;flex:none;
  width:min(760px,100%);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(4px,1vh,10px);
}
#j-guerra .gm-parte .res{
  margin:0;min-height:0;text-align:center;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
#j-guerra .gm-parte .res .big{
  font-size:clamp(13px,2.6vw,17px);font-weight:600;letter-spacing:.08em;
  text-shadow:none;filter:none;animation:none}
#j-guerra .gm-parte .res .small{
  font-family:var(--ui);font-size:11px;color:#8e8371;margin-top:2px}

/* la marca personal: dos etiquetas cosidas al papel, no dos tarjetas */
#j-guerra .gm-parte .miMarca{margin:0;gap:1px}
#j-guerra .gm-parte .mm{
  min-width:96px;padding:4px 12px;border-radius:0;
  background:rgba(0,0,0,.34);border:none;border-top:1px solid rgba(139,122,90,.3)}
#j-guerra .gm-parte .mm .v{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:13px;color:#e3d9c3}
#j-guerra .gm-parte .mm .l{font-size:8px;letter-spacing:.16em;color:#7d7263}

/* ── alturas cortas: la de Discord (543 px) es la que rompe ────── */
@media(max-height:640px){
  #j-guerra .gm-mesa{padding-top:36px;gap:5px}
  #j-guerra .gm-mapa{min-height:80px}
  #j-guerra .gm-placa{padding:3px 20px}
  #j-guerra .gm-parte .miMarca{display:none}   /* el dato sigue en el mapa */
  #j-guerra .gm-btn{padding-top:8px;padding-bottom:8px}
}
@media(max-height:470px){
  #j-guerra .gm-poste{display:none}
  #j-guerra .gm-meta{display:none}
}
@media(max-width:420px){
  #j-guerra .gm-meta{display:none}
  #j-guerra .gm-btn{letter-spacing:.1em;padding-left:26px}
}
@media(prefers-reduced-motion:reduce){
  #j-guerra .gm-poste .gm-tela{animation:none}
}