:root{
  --bg:#efe9d8;
  --panel:#fbf8ee;
  --ink:#2e3a2c;
  --ink-soft:#61705c;
  --line:#cfc4a5;
  --green:#4a7c59;
  --green-d:#33553d;
  --cell-a:#e8e0c6;
  --cell-b:#dcd2b2;
  --p0:#3f7d4e;
  --p1:#b05f33;
  --move:#7bb489;
  --atk:#c0503c;
  --dive:#7b6cae;
  --cell:min(52px, 7.6vw);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(circle at 15% 10%, #f6f2e4 0%, transparent 45%),
    var(--bg);
  color:var(--ink);
  min-height:100vh;
  padding:14px 16px 40px;
}

/* ---------- cabecera ---------- */
.top{text-align:center;margin:4px 0 18px}
.top h1{
  margin:0;font-size:30px;letter-spacing:3px;text-transform:uppercase;
  color:var(--green-d);font-weight:800;
}
.top .tag{margin:4px 0 0;color:var(--ink-soft);font-size:13px}

/* ---------- visibilidad de pantallas ---------- */
.screen{display:none}
body[data-phase="map"] #screen-map{display:block}
body[data-phase="names"] #screen-names{display:block}
body[data-phase="select"] #screen-select{display:block}
body[data-phase="place"] #screen-board,
body[data-phase="play"]  #screen-board,
body[data-phase="over"]  #screen-board{display:flex}

/* ---------- pantalla selección ---------- */
#screen-select{max-width:1080px;margin:0 auto}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pickcol{
  background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:10px 12px 12px;
}
.pickcol[data-p="0"]{border-color:var(--p0)}
.pickcol[data-p="1"]{border-color:var(--p1)}
.pickcol h2{margin:0 0 8px;font-size:15px;display:flex;align-items:center;gap:8px}
.pickcol .dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.pickcol[data-p="0"] .dot{background:var(--p0)}
.pickcol[data-p="1"] .dot{background:var(--p1)}
.pickcol.active{box-shadow:0 0 0 3px rgba(74,124,89,.25)}

.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{
  border:2px dashed var(--line);border-radius:10px;min-height:52px;
  display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13px;color:var(--ink-soft);
  background:#fff;
}
.slot.filled{border-style:solid;cursor:pointer;color:var(--ink);font-weight:600}
.slot.filled:hover{background:#fdeee9;border-color:var(--atk)}
.slot .tok{width:34px;height:34px;flex:0 0 34px}

.hint{text-align:center;color:var(--ink-soft);font-size:14px;margin:14px 0 10px;min-height:20px}

.animals{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.card{
  background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:8px 10px;
  cursor:pointer;transition:transform .08s, box-shadow .08s;
  display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:start;
}
.card:hover:not(.taken){transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.12);border-color:var(--green)}
.card.taken{opacity:.55;cursor:not-allowed;background:#eee9db}
.card.taken[data-owner="0"]{border-color:var(--p0)}
.card.taken[data-owner="1"]{border-color:var(--p1)}
.card h3{margin:0;font-size:14px}
.card .stats{display:flex;gap:8px;font-size:12px;color:var(--ink-soft);margin:2px 0 3px;flex-wrap:wrap}
.card .stats b{color:var(--ink)}
.card .terr{display:flex;flex-wrap:wrap;gap:4px;font-size:10px;margin:0 0 3px;color:var(--ink-soft)}
.card .terr span{background:#eee7d2;border-radius:4px;padding:1px 4px;white-space:nowrap}
.card .terr span.no{background:#f0d8d2;color:#a33;text-decoration:none}
.tmini{font-size:10px;color:var(--ink-soft);letter-spacing:.5px}
.card .abil{font-size:11px;line-height:1.35;color:var(--ink-soft)}
.card .abil b{color:var(--green-d)}

.actions{display:flex;gap:10px;justify-content:center;margin:18px 0 0}
button{
  font:inherit;font-size:14px;padding:9px 16px;border-radius:9px;border:2px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;
}
button:hover:not(:disabled){border-color:var(--green)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--green);border-color:var(--green-d);color:#fff;font-weight:600}
button.primary:hover:not(:disabled){background:var(--green-d)}
button.ghost{background:transparent;color:var(--ink-soft)}

/* ---------- tablero ---------- */
#screen-board{gap:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.boardwrap{flex:0 0 auto}
.board{
  display:grid;
  grid-template-columns:repeat(var(--n,10),var(--cell));
  grid-template-rows:repeat(var(--n,10),var(--cell));
  gap:1px;background:var(--green-d);padding:6px;border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.boardfoot{margin-top:8px;font-size:12px;color:var(--ink-soft);text-align:center}

.cell{
  position:relative;border-radius:2px;background-color:var(--cell-a);
  background-size:100% 100%;          /* la textura llena la casilla, y es cuadrada */
  background-repeat:no-repeat;
}

/* Color de terreno: respaldo debajo de la textura, y color de la minivista del
   mapa y de la leyenda. Nunca el atajo 'background', que borraria la imagen. */
.t-P{background-color:#cfe08a}   /* pradera */
.t-B{background-color:#4b7d4f}   /* bosque  */
.t-M{background-color:#a97a5c}   /* montaña */
.t-K{background-color:#f2f2ee}   /* picos   */
.t-A{background-color:#7cc4dd}   /* agua    */
.cell.t-B .num,.cell.t-M .num{background:#fff}

.leg{display:inline-block;padding:2px 7px;border-radius:5px;margin:2px 3px;font-size:11px;color:#22331f}
.leg.t-B{color:#fff}

.cell.half{box-shadow:inset 0 0 0 2px rgba(74,124,89,.45)}
.cell.half.p1{box-shadow:inset 0 0 0 2px rgba(176,95,51,.45)}
/* Los resaltados van SOBRE el color del terreno, sin taparlo */
.cell.placeable{cursor:pointer;box-shadow:inset 0 0 0 3px rgba(255,255,255,.75)}
.cell.placeable:hover{filter:brightness(1.15)}

.cell.mv,.cell.dive,.cell.necro{cursor:pointer}
.cell.mv::before,.cell.dive::before,.cell.necro::before,.cell.placeable::before{
  content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;
}
.cell.mv::before{background:rgba(95,190,110,.42);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.cell.dive::before{background:rgba(123,108,174,.45);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.cell.necro::before{background:rgba(215,154,43,.45);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.cell.placeable::before{background:rgba(255,255,255,.3);box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
.cell.mv::after,.cell.dive::after,.cell.necro::after{
  content:"";position:absolute;left:50%;top:50%;width:30%;height:30%;
  transform:translate(-50%,-50%);border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);pointer-events:none;
}
.cell.mv::after{background:var(--move)}
.cell.dive::after{background:var(--dive)}
.cell.necro::after{background:#d79a2b}
.cell.mv:hover,.cell.dive:hover,.cell.necro:hover{filter:brightness(1.2)}
.cell.path{box-shadow:inset 0 0 0 3px rgba(123,108,174,.8)}

.grave{
  position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;
  image-rendering:pixelated;opacity:.75;pointer-events:none;
}
.grave.txt{
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cell)*.5);color:#5b4a3a;opacity:.5;
}
.cell.tgt{cursor:pointer;box-shadow:inset 0 0 0 3px var(--atk),inset 0 0 12px rgba(192,80,60,.75)}
.cell.sel{box-shadow:inset 0 0 0 3px #f0c04a,inset 0 0 12px rgba(240,192,74,.6)}
.cell.half{position:relative}
.cell.half::after{content:"";position:absolute;inset:0;background:rgba(63,125,78,.18);pointer-events:none}
.cell.half.p1::after{background:rgba(176,95,51,.18)}

/* ---------- fichas ---------- */
.tok{
  position:absolute;inset:5%;border-radius:50%;
  border:3px solid var(--p0);background:#f7f3e6;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:calc(var(--cell)*.30);color:var(--green-d);
  overflow:hidden;user-select:none;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}
.tok.p1{border-color:var(--p1);color:#8a4826;background:#fdf1e6}
.tok.p0{background:#eef6ec}
.tok img{width:104%;height:104%;object-fit:contain;image-rendering:pixelated}
.tok.dead{opacity:.25;filter:grayscale(1)}
.tok.stunned{border-style:dashed}

.piece{position:absolute;inset:0;cursor:pointer}
.piece .hp{
  position:absolute;left:12%;right:12%;bottom:2%;height:5px;border-radius:3px;
  background:rgba(0,0,0,.28);overflow:hidden;
}
.piece .hp i{display:block;height:100%;background:#63b06f}
.piece .hp i.mid{background:#e0a83c}
.piece .hp i.low{background:#c8503c}
.piece .num{
  position:absolute;right:-3px;top:-3px;font-size:calc(var(--cell)*.2);font-weight:700;
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 2px;line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.piece .stun{position:absolute;left:-2px;top:-3px;font-size:calc(var(--cell)*.24)}
.piece .pois{position:absolute;left:-2px;bottom:8%;font-size:calc(var(--cell)*.24)}
.piece .clon{
  position:absolute;right:-3px;bottom:6%;
  width:calc(var(--cell)*.32);height:calc(var(--cell)*.32);
  display:flex;align-items:center;justify-content:center;
  background:#8e2de2;color:#fff;border:2px solid #fff;border-radius:50%;
  font-size:calc(var(--cell)*.2);font-weight:800;line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.tok.poison{box-shadow:0 0 0 2px #7db83f, 0 2px 4px rgba(0,0,0,.25)}

/* ---------- panel lateral ---------- */
.side{flex:1 1 300px;max-width:380px;min-width:280px;display:flex;flex-direction:column;gap:10px}
.banner{
  border-radius:10px;padding:10px 12px;color:#fff;font-weight:700;font-size:15px;
  background:var(--p0);border:2px solid rgba(0,0,0,.15);
}
.banner.p1{background:var(--p1)}
.banner small{display:block;font-weight:500;opacity:.9;font-size:12px;margin-top:2px}
.hintbox{
  background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:9px 11px;
  font-size:13px;line-height:1.4;min-height:44px;
}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btns button{flex:1 1 auto;padding:8px 10px;font-size:13px}

.teams{display:grid;gap:8px}
.team{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:8px 10px}
.team[data-p="0"]{border-color:var(--p0)}
.team[data-p="1"]{border-color:var(--p1)}
.team h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft)}
.prow{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:3px 0;font-size:13px}
.prow .mini{position:relative;width:30px;height:30px}
.prow .mini .tok{position:absolute;inset:0;font-size:12px;border-width:2px}
.prow .bar{background:#e3dcc7;border-radius:4px;height:9px;overflow:hidden;margin-top:3px}
.prow .bar i{display:block;height:100%;background:#63b06f}
.prow .bar i.mid{background:#e0a83c}
.prow .bar i.low{background:#c8503c}
.prow .nm{font-size:12px;font-weight:600}
.prow .st{font-size:10px;color:var(--ink-soft)}
.prow.out{opacity:.4}
.prow .val{font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-soft)}

.rules{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px}
.rules summary{cursor:pointer;font-weight:600;color:var(--green-d)}
.rules div{margin-top:6px;line-height:1.45;color:var(--ink-soft);max-height:180px;overflow:auto}
.rules b{color:var(--ink)}

.logbox{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:6px 10px}
.logbox h3{margin:2px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft)}
#log{max-height:220px;overflow:auto;font-size:12px;line-height:1.45}
#log p{margin:0 0 3px;padding-left:8px;border-left:3px solid var(--line)}
#log p.hit{border-color:var(--atk)}
#log p.good{border-color:var(--green)}
#log p.turn{border-color:#d3ae4e;font-weight:600;color:var(--ink)}
#log p.dead{border-color:#000;font-weight:600}

/* ---------- overlay final ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(30,40,30,.6);display:flex;align-items:center;justify-content:center;z-index:20;
}
.overlay.hidden{display:none}
.modal{
  background:var(--panel);border:3px solid var(--green-d);border-radius:14px;padding:22px 28px;text-align:center;max-width:420px;
}
.modal h2{margin:0 0 8px;color:var(--green-d)}
.modal p{margin:0 0 16px;color:var(--ink-soft);font-size:14px}

@media (max-width:900px){
  .picks{grid-template-columns:1fr}
  #screen-board{flex-direction:column;align-items:center}
  .side{max-width:none;width:100%}
}


/* ---------- pantalla de elección de mapa ---------- */
#screen-map{max-width:1000px;margin:0 auto}
.maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.mapcard{
  background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:12px;
  cursor:pointer;text-align:center;transition:transform .08s,box-shadow .08s,border-color .08s;
}
.mapcard:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(0,0,0,.15);border-color:var(--green)}
.mapcard h3{margin:0 0 8px;font-size:15px;color:var(--green-d)}
.mapcard .mini{
  display:grid;grid-template-columns:repeat(var(--mn),1fr);gap:0;
  width:min(210px,100%);aspect-ratio:1;margin:0 auto;
  border:2px solid var(--green-d);border-radius:6px;overflow:hidden;
}
.mapcard .mini i{display:block;width:100%;aspect-ratio:1}
.mapcard .msize{margin-top:8px;font-size:12px;color:var(--ink-soft)}
.mapcard .mleg{
  display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:6px;font-size:10px;color:var(--ink-soft);
}
.mapcard .mleg span{background:#eee7d2;border-radius:4px;padding:1px 5px;white-space:nowrap}


/* ---------- pantalla de nombres y moneda ---------- */
#screen-names{max-width:640px;margin:0 auto;text-align:center}
.names{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:6px 0 4px}
.namecol{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:10px 12px;flex:1 1 0}
.namecol[data-p="0"]{border-color:var(--p0)}
.namecol[data-p="1"]{border-color:var(--p1)}
.namecol label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);margin-bottom:5px}
.namecol input{
  font:inherit;font-size:17px;font-weight:700;text-align:center;width:100%;
  padding:7px 6px;border:2px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
}
.namecol input:focus{outline:none;border-color:var(--green)}
.namecol input:disabled{background:#eee9db;opacity:.8}
.vs{font-weight:800;color:var(--ink-soft);padding-bottom:14px}

.monedazona{min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.moneda{
  width:92px;height:92px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;color:#7a5c12;
  background:radial-gradient(circle at 34% 30%,#ffe9a8,#e8bf52 55%,#c9992e);
  border:4px solid #b8862a;box-shadow:0 4px 10px rgba(0,0,0,.25);
  overflow:hidden;word-break:break-all;padding:6px;text-align:center;line-height:1.1;
}
.moneda.girando{animation:giramoneda .28s linear infinite}
.moneda.cae{animation:cae .5s ease-out}
.moneda.cae.p0{border-color:var(--p0);color:#1f4a2c}
.moneda.cae.p1{border-color:var(--p1);color:#7a3a17}
@keyframes giramoneda{
  0%{transform:rotateY(0) scale(1)}
  50%{transform:rotateY(90deg) scale(1.08)}
  100%{transform:rotateY(180deg) scale(1)}
}
@keyframes cae{
  0%{transform:scale(1.35) rotateY(180deg)}
  100%{transform:scale(1) rotateY(0)}
}
.monedatxt{margin:0;font-size:14px;color:var(--ink)}
.monedatxt small{color:var(--ink-soft);font-size:11px}
@media (prefers-reduced-motion:reduce){
  .moneda.girando,.moneda.cae{animation:none}
}

/* Tableros grandes: la casilla es tan pequena que el numero y los distintivos
   no se leen, asi que se dejan solo la ficha y la barra de vida. El dato exacto
   sigue en el panel lateral y en el tooltip de la casilla. */
.board.mini .piece .num,
.board.mini .piece .stun,
.board.mini .piece .pois,
.board.mini .piece .clon{display:none}
.board.mini .piece .hp{height:4px;left:8%;right:8%;bottom:1%}
.board.mini .tok{inset:3%;border-width:2px}
.board.mini .tok.poison{box-shadow:0 0 0 2px #7db83f}

/* ---------- cabecera con autoría y frase, y botón de volver ---------- */
.top{position:relative}
.top .autor{margin:2px 0 0;font-size:12px;color:var(--ink-soft)}
.top .autor b{color:var(--green-d);font-weight:700}
.top .frase{
  margin:8px auto 0;max-width:620px;font-size:12.5px;line-height:1.45;
  color:var(--ink-soft);font-style:italic;
}
.top .frase span{font-style:normal;font-weight:600;color:var(--green-d);white-space:nowrap}

.atras{
  position:absolute;left:0;top:0;font-size:13px;padding:7px 14px;
  background:var(--panel);border:2px solid var(--line);border-radius:9px;
  color:var(--ink-soft);font-weight:600;cursor:pointer;z-index:5;
}
.atras:hover{border-color:var(--green);color:var(--green-d)}
body[data-phase="map"] .atras{display:none}

@media (max-width:700px){
  .atras{position:static;margin:0 auto 10px;display:block}
}