:root{
  --ink:#020712;
  --navy:#071426;
  --navy-2:#0a2345;
  --electric:#1d5fae;
  --electric-soft:#2d76c8;
  --panel:rgba(8,15,27,.88);
  --panel-strong:rgba(4,10,19,.94);
  --text:#f7f9fd;
  --muted:#afbacb;
  --line:rgba(81,112,160,.52);
  --gold:#f0cf82;
  --gold-deep:#d3a84c;
  --orange:#ff9a2e;
  --red:#e8473f;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
html{background:var(--ink)}
body{
  min-height:100dvh;
  background:
    radial-gradient(ellipse at 50% 51%,rgba(50,132,229,.34) 0%,rgba(25,94,177,.24) 22%,rgba(5,18,37,0) 48%),
    linear-gradient(180deg,#01040a 0%,#04101e 11%,#08264c 37%,#1c5ba4 50%,#08264c 63%,#04101e 89%,#01040a 100%);
  background-attachment:fixed;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
body.setup-mode{
  background:
    radial-gradient(ellipse at 50% 50%,rgba(42,120,216,.28) 0%,rgba(12,66,130,.18) 27%,rgba(3,15,29,0) 52%),
    linear-gradient(180deg,#01040a 0%,#04101c 13%,#09254a 39%,#174b88 50%,#09254a 61%,#04101c 87%,#01040a 100%);
}
body.game-mode{
  background:
    radial-gradient(ellipse at 50% 50%,rgba(75,157,255,.39) 0%,rgba(32,107,201,.27) 22%,rgba(4,18,37,0) 49%),
    linear-gradient(180deg,#01040a 0%,#04101d 12%,#08274f 37%,#1f64b4 50%,#08274f 63%,#04101d 88%,#01040a 100%);
}
button,input{font:inherit}
button{touch-action:manipulation;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid #8dc4ff;outline-offset:2px}

.app-shell{
  width:min(100%,760px);
  min-height:100dvh;
  margin:0 auto;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));
}

.brand{display:flex;align-items:flex-start;gap:13px;margin-bottom:14px;min-height:60px}
.brand-logo{
  width:58px;height:58px;object-fit:contain;flex:0 0 auto;padding:3px;
  border:1.5px solid rgba(255,255,255,.82);border-radius:12px;
  background:rgba(255,255,255,.035);
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 0 18px rgba(44,112,224,.17);
}
.brand-copy{padding-top:2px}
.sc-name,.brand-title{font-family:"Cinzel",Georgia,"Times New Roman",serif;font-weight:500;font-variant:small-caps;letter-spacing:.018em}
.brand-title{font-size:1.16rem;line-height:1.08}
.tm{font-size:.46em;vertical-align:top;margin-left:2px;letter-spacing:0}
.brand-subtitle{margin-top:4px;font-size:.8rem;color:#f1f4fa;letter-spacing:.005em}
.sc-tagline{font-family:"Eurostile","Helvetica Neue Condensed","Arial Narrow",Arial,sans-serif;font-weight:400}

.panel{
  border:1px solid var(--line);border-radius:24px;padding:22px;
  box-shadow:0 20px 52px rgba(0,0,0,.30);
}
.setup-panel{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(7,14,25,.86),rgba(5,11,20,.89));
  isolation:isolate;
}
.setup-panel::before{
  content:"";position:absolute;z-index:-2;inset:-3% -6%;
  background:url("assets/wargame-watermark.png") center 57% / 94% auto no-repeat;
  opacity:.23;filter:blur(.45px);pointer-events:none;
}
.setup-panel::after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,9,18,.38) 0%,rgba(3,9,18,.12) 30%,rgba(3,9,18,.19) 72%,rgba(3,9,18,.47) 100%),
    radial-gradient(circle at center,rgba(36,123,234,.07),transparent 62%);
}
h1{margin:0 0 8px;font-size:1.7rem;line-height:1.12}
.lead{margin:0 0 21px;color:#bcc6d6;line-height:1.42}
.field{margin:19px 0}
.field label{display:block;font-weight:700;margin-bottom:10px}
.preset-row{display:grid;gap:8px;margin-bottom:10px}
.game-presets{grid-template-columns:repeat(3,1fr)}
.turn-presets{grid-template-columns:repeat(4,1fr)}
.preset-row button{
  min-height:45px;border:1px solid rgba(72,100,144,.48);border-radius:13px;
  background:rgba(5,12,22,.85);color:var(--text);font-weight:650;
}
.preset-row button.active{border-color:#edc974;background:linear-gradient(180deg,#f3d58b,#e8bd5d);color:#0b0d12;font-weight:800}
.input-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border:1px solid rgba(72,100,144,.48);border-radius:14px;background:rgba(4,10,19,.90)}
.input-row input{width:100%;min-height:36px;border:0;outline:0;background:transparent;color:var(--text);font-size:1.12rem;font-weight:650}
.input-row span{color:var(--muted)}
.option-row{margin:17px 0}
.switch-label{display:flex;align-items:center;gap:10px;color:#c3ccda}
.switch-label input{width:20px;height:20px;accent-color:#d5ad52}
.primary,.secondary,.danger,.ghost,.next-turn{border-radius:16px}
.primary{border:0;background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#0c0e12;font-weight:900}
.big{width:100%;min-height:56px;padding:15px;font-size:1rem;letter-spacing:.025em}
.small-note{margin:11px 0 0;color:#abb7c8;text-align:center;font-size:.78rem}

.hidden{display:none!important}
.game{display:flex;flex-direction:column;gap:13px}
.top-actions,.bottom-actions{display:flex;gap:10px;justify-content:space-between}
.ghost,.secondary,.danger{
  min-height:44px;padding:10px 14px;border:1px solid rgba(73,101,145,.48);
  background:rgba(5,13,24,.82);color:var(--text);
}
.danger{border-color:rgba(188,62,58,.58);color:#ffd8d5;background:rgba(37,10,13,.64)}
.bottom-actions button{flex:1}
.timer-card{
  position:relative;overflow:hidden;padding:19px 18px;text-align:center;
  border:1px solid rgba(73,105,154,.55);border-radius:24px;
  background:linear-gradient(180deg,rgba(8,19,35,.88),rgba(3,10,20,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.timer-label{font-size:.82rem;letter-spacing:.20em;color:#aab6c8;font-weight:800}
.timer{font-variant-numeric:tabular-nums;line-height:.95;font-weight:820;letter-spacing:-.045em}
.game-timer{font-size:clamp(4rem,18vw,7.7rem);margin:14px 0 12px}
.turn-timer{font-size:clamp(4.65rem,21.5vw,8.8rem);margin:14px 0 12px}
.timer-caption{color:#aeb9ca;font-size:.82rem;min-height:1em}

.turn-card.warning{
  background:linear-gradient(180deg,rgba(116,53,0,.95),rgba(48,21,4,.97));
  border-color:#ff9a2e;
  box-shadow:0 0 0 1px rgba(255,178,79,.20) inset,0 0 32px rgba(255,135,0,.26);
}
.turn-card.warning .timer-label,.turn-card.warning .timer-caption{color:#ffddb3}
.turn-card.warning .turn-timer{color:#fff9f1}
.turn-card.flash{animation:turnFlash .52s ease-in-out}
@keyframes turnFlash{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.42);box-shadow:0 0 0 2px rgba(255,206,138,.68) inset,0 0 48px rgba(255,145,0,.54)}
}
.turn-card.expired{
  background:linear-gradient(180deg,rgba(108,18,18,.96),rgba(45,7,9,.98));
  border-color:#ff665f;
  box-shadow:0 0 34px rgba(226,39,39,.26);
}
.turn-card.expired .timer-label,.turn-card.expired .timer-caption{color:#ffc2be}
.turn-card.expired .turn-timer{color:#fff3f2}
.game-card.finishing{border-color:#f0a44c;box-shadow:0 0 30px rgba(242,132,22,.16)}
.game-card.finished{border-color:#e9514b;background:linear-gradient(180deg,rgba(91,14,17,.94),rgba(34,6,10,.97));box-shadow:0 0 36px rgba(215,34,34,.22)}

.next-turn{
  width:100%;min-height:136px;border:1px solid rgba(94,130,185,.66);
  background:linear-gradient(180deg,rgba(43,65,99,.91),rgba(18,34,57,.96));color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 12px 26px rgba(0,0,0,.23),0 0 28px rgba(70,120,198,.11);
  user-select:none;-webkit-user-select:none;
}
.next-turn:active{transform:scale(.993);filter:brightness(1.06)}
.next-turn:disabled{cursor:default;opacity:.56;transform:none;filter:none}
.next-turn-main{font-size:clamp(1.85rem,8vw,3rem);font-weight:900;letter-spacing:.015em}
.next-turn-sub{margin-top:7px;color:#c4cfdd;font-size:.84rem}
.paused .timer-card{opacity:.62}
.paused .next-turn{opacity:.74}

#gameFlashOverlay{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0}
#gameFlashOverlay.game-warning{animation:gameWarningFlash .76s ease-in-out}
#gameFlashOverlay.game-critical{animation:gameCriticalFlash .50s ease-in-out}
#gameFlashOverlay.game-finished{animation:gameFinishedFlash 1.0s ease-in-out 2}
@keyframes gameWarningFlash{0%,100%{opacity:0;background:rgba(203,94,0,0)}50%{opacity:1;background:rgba(215,104,0,.25)}}
@keyframes gameCriticalFlash{0%,100%{opacity:0;background:rgba(190,0,0,0)}50%{opacity:1;background:rgba(213,23,18,.38)}}
@keyframes gameFinishedFlash{0%,100%{opacity:0;background:rgba(190,0,0,0)}50%{opacity:1;background:rgba(222,19,17,.50)}}

footer{margin-top:14px;text-align:center;color:#9caabd;font-size:.72rem}
footer .sc-name{font-weight:500}

@media (max-width:600px){
  .app-shell{padding-left:12px;padding-right:12px}
  .brand{gap:10px;min-height:52px;margin-bottom:10px}
  .brand-logo{width:50px;height:50px;border-radius:11px}
  .brand-title{font-size:1.02rem}
  .brand-subtitle{font-size:.73rem}
  .panel{padding:18px;border-radius:20px}
  h1{font-size:1.52rem}
  .lead{font-size:.93rem;margin-bottom:18px}
  .turn-presets{grid-template-columns:repeat(4,1fr);gap:6px}
  .preset-row button{padding:6px 3px;font-size:.91rem}
  .game{gap:10px}
  .timer-card{border-radius:20px;padding:14px 12px}
  .game-timer{font-size:clamp(4rem,22vw,6.5rem);margin:10px 0 8px}
  .turn-timer{font-size:clamp(4.3rem,24vw,7rem);margin:10px 0 8px}
  .next-turn{min-height:116px;border-radius:18px}
  .next-turn-main{font-size:clamp(1.75rem,9vw,2.6rem)}
  footer{margin-top:10px}
}

@media (max-width:600px) and (max-height:900px){
  .app-shell{padding-top:calc(9px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  body.game-mode .brand{min-height:45px;margin-bottom:6px}
  body.game-mode .brand-logo{width:43px;height:43px;padding:2px}
  body.game-mode .brand-title{font-size:.96rem}
  body.game-mode .brand-subtitle{font-size:.69rem;margin-top:2px}
  .game{gap:8px}
  .top-actions .ghost{min-height:38px;padding:7px 11px;font-size:.92rem}
  .timer-card{padding:10px 10px}
  .timer-label{font-size:.72rem}
  .timer-caption{font-size:.74rem}
  .game-timer{font-size:clamp(3.8rem,21vw,5.7rem);margin:8px 0 6px}
  .turn-timer{font-size:clamp(4.15rem,23vw,6.2rem);margin:8px 0 6px}
  .next-turn{min-height:98px}
  .next-turn-main{font-size:clamp(1.65rem,8.4vw,2.35rem)}
  .next-turn-sub{font-size:.75rem;margin-top:4px}
  .bottom-actions button{min-height:39px;padding:7px 8px;font-size:.86rem}
  footer{margin-top:7px;font-size:.66rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}


/* V2.1 – refinado final de identidad y usabilidad */

/* Mismo fondo Special Chess en configuración y partida */
html, body,
body.setup-mode,
body.game-mode{
  background:
    radial-gradient(ellipse at 50% 49%, rgba(72,151,255,.36) 0%, rgba(31,106,200,.25) 20%, rgba(7,27,57,0) 47%),
    linear-gradient(180deg,
      #01040a 0%,
      #04101d 11%,
      #08264d 36%,
      #1c5fa9 49%,
      #0a315f 60%,
      #04101d 88%,
      #01040a 100%);
  background-attachment:fixed;
}

/* Se elimina la marca de agua Wargame: no aportaba lectura suficiente */
.setup-panel::before,
.setup-panel::after{
  display:none !important;
}
.setup-panel{
  background:linear-gradient(180deg,rgba(7,15,27,.84),rgba(4,11,21,.90));
  border-color:rgba(78,111,162,.60);
  box-shadow:
    0 20px 52px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.025);
}

/* El logo de cabecera es el propio perfil del caballo, sin caja */
.brand-logo{
  width:54px;
  height:64px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  object-fit:contain;
  object-position:center;
  filter:
    brightness(1.28)
    saturate(1.18)
    drop-shadow(0 0 8px rgba(48,117,255,.48))
    drop-shadow(0 4px 8px rgba(0,0,0,.32));
}
.brand{
  align-items:center;
  min-height:64px;
}
.brand-copy{
  padding-top:0;
}

/* Confirmación visual clara al pulsar NUEVO TURNO */
.next-turn.turn-ack{
  animation:turnAck .28s ease-out;
}
@keyframes turnAck{
  0%{
    transform:scale(.985);
    border-color:#82c7ff;
    box-shadow:0 0 0 2px rgba(130,199,255,.30) inset,0 0 36px rgba(63,147,255,.34);
    filter:brightness(1.20);
  }
  100%{
    transform:scale(1);
    filter:brightness(1);
  }
}

/* Un poco más de contraste en la pantalla activa */
.timer-card{
  border-color:rgba(89,122,174,.62);
}
.next-turn{
  border-color:rgba(105,146,205,.74);
  background:linear-gradient(180deg,rgba(47,72,111,.94),rgba(17,35,60,.97));
}


/* V2.2 – candidata final: cierre de partida y jerarquía de avisos */

/* Pantalla final */
.end-view{
  display:block;
}
.end-panel{
  position:relative;
  min-height:min(68vh,650px);
  overflow:hidden;
  border:1px solid rgba(99,135,188,.64);
  border-radius:26px;
  background:
    linear-gradient(180deg,rgba(2,8,18,.80),rgba(2,8,18,.92));
  box-shadow:
    0 24px 60px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.03);
  isolation:isolate;
}
.end-panel::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:2% 2% 0;
  background:url("assets/wargame-watermark.png") center 45% / min(94%,720px) auto no-repeat;
  opacity:.36;
  filter:saturate(.88) brightness(.78) contrast(1.06);
  pointer-events:none;
}
.end-panel::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    radial-gradient(circle at 50% 46%,rgba(13,63,124,.06),rgba(2,8,18,.12) 40%,rgba(2,8,18,.73) 78%),
    linear-gradient(180deg,rgba(2,8,18,.34),rgba(2,8,18,.12) 42%,rgba(2,8,18,.84) 82%);
  pointer-events:none;
}
.end-content{
  min-height:min(68vh,650px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  padding:30px 24px 30px;
}
.end-kicker{
  margin-bottom:7px;
  color:#f0cf82;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.18em;
}
.end-content h2{
  margin:0;
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:clamp(1.8rem,7vw,3rem);
  font-weight:600;
  font-variant:small-caps;
  letter-spacing:.035em;
  text-shadow:0 2px 18px rgba(0,0,0,.72);
}
.end-content p{
  margin:9px 0 0;
  color:#edf3fb;
  font-size:1rem;
  text-shadow:0 2px 10px rgba(0,0,0,.76);
}
.end-content .end-note{
  margin-top:4px;
  color:#c5d0df;
  font-size:.88rem;
}
.end-actions{
  width:min(100%,520px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:22px;
}
.end-actions button{
  min-height:52px;
  padding:12px 14px;
  font-weight:850;
}
.end-primary{
  border:0;
  border-radius:15px;
}
.end-secondary{
  border-radius:15px;
  background:rgba(4,13,26,.82);
}

/* 5,4,3,2,1 del turno: destello inequívoco y sincronizado con el pitido */
.turn-card.warning.flash{
  animation:turnFlashFinal .48s ease-in-out;
}
@keyframes turnFlashFinal{
  0%,100%{
    filter:brightness(1);
    background:linear-gradient(180deg,rgba(116,53,0,.95),rgba(48,21,4,.97));
  }
  48%{
    filter:brightness(1.55);
    background:linear-gradient(180deg,rgba(207,91,0,.98),rgba(104,39,0,.99));
    box-shadow:
      0 0 0 2px rgba(255,220,165,.78) inset,
      0 0 58px rgba(255,139,0,.62);
  }
}

@media (max-width:600px){
  .end-panel{min-height:72dvh;border-radius:22px}
  .end-content{min-height:72dvh;padding:24px 16px calc(22px + env(safe-area-inset-bottom))}
  .end-panel::before{
    inset:1% -7% 0;
    background-position:center 42%;
    background-size:106% auto;
    opacity:.38;
  }
  .end-actions{grid-template-columns:1fr}
  .end-actions button{min-height:50px}
}


/* V2.3 – ajustes finales de percepción */

/* 1) Caballo superior izquierdo mucho más visible */
.brand-logo{
  width:60px;
  height:74px;
  object-fit:contain;
  object-position:center;
  filter:
    brightness(1.75)
    contrast(1.22)
    saturate(1.18)
    drop-shadow(0 0 2px rgba(255,255,255,.72))
    drop-shadow(0 0 10px rgba(84,152,255,.58))
    drop-shadow(0 5px 12px rgba(0,0,0,.34));
}
.brand{
  gap:14px;
}
@media (max-width:600px){
  .brand-logo{
    width:56px;
    height:68px;
  }
}

/* 2) Pantalla final: emblema Wargame claramente visible */
.end-panel::before{
  inset:0;
  background:url("assets/wargame-watermark.png") center 40% / min(96%,780px) auto no-repeat;
  opacity:.62 !important;
  filter:saturate(1.0) brightness(.98) contrast(1.18);
}
.end-panel::after{
  background:
    radial-gradient(circle at 50% 42%, rgba(20,93,177,.08), rgba(2,8,18,.06) 32%, rgba(2,8,18,.58) 74%),
    linear-gradient(180deg, rgba(2,8,18,.18), rgba(2,8,18,.08) 26%, rgba(2,8,18,.38) 54%, rgba(2,8,18,.78) 84%);
}
.end-content{
  justify-content:flex-end;
}
.end-content h2{
  text-shadow:0 3px 18px rgba(0,0,0,.74);
}
.end-content p,
.end-content .end-note{
  text-shadow:0 2px 12px rgba(0,0,0,.82);
}

@media (max-width:600px){
  .end-panel::before{
    background-position:center 34%;
    background-size:112% auto;
    opacity:.60 !important;
  }
}


/* V2.5 FINAL – ajuste fino de cabecera de marca
   "Special Chess" se expande ligeramente para alinear visualmente
   su ancho con "The new chess experience". */
.brand-title{
  display:inline-block;
  transform:scaleX(1.105);
  transform-origin:left center;
}
.sc-tagline{
  display:inline-block;
}