:root {
  --bg: #f0ede8;
  --card: #fff;
  --muted: #666;
  --felt: #173225;
  --felt-dark: #0e211a;
  --parchment: #fbf2df;
  --parchment-2: #f1e2bd;
  --ink: #2c2013;
  --ink-soft: #7a6a4e;
  --red: #d84c4c;
  --yellow: #f0b52e;
  --green: #3fa15a;
  --blue: #3468e0;
  --gold: #e0a72a;
  --gold-dark: #a97417;
  --black: #222222;
  --shadow: rgba(0, 0, 0, 0.55);
  --radius: 18px;
}
*, *:before, *:after {
  box-sizing: border-box;
}
.parchis, .parchis * {
  user-select: none;
  -webkit-user-select: none;
}
.parchis *:before, .parchis *:after {
  position: absolute;
}

.parchis {
  width: 80vmin;
  height: 80vmin;
  padding: 2vmin;
  background-color: #949494;
  box-shadow: 0px 0px 1px 3px #171717, 0px 0px 14px 15px #171717 inset;
  border-radius: 0.25vmin;
}

.section {
  background: #ffffff;
  width: 33.333%;
  height: 33.333%;
  float: left;
  margin: 0;
  border: 0.1vmin solid var(--black);
  position: relative;
}

.section.home:before {
  content: "";
  width: 88%;
  margin: 6%;
  height: 88%;
  float: left;
  border-radius: 100%;
  border: 0.1vmin solid var(--black);
  box-shadow: 0 0 10vmin -6vmin var(--black) inset;
}

.section.home:after {
  width: 42%;
  margin: 29%;
  height: 42%;
  background: white center/88% no-repeat;
  background-clip: padding-box;
  float: left;
  border-radius: 100%;
  border: 0.1vmin solid var(--black);
  box-shadow: 0 0 0 4vmin transparent, 0 0 0 4.15vmin #fff;
  content: "";
  display: block;
  overflow: hidden;
}
.section.home.blue:before { background: var(--blue); }
.section.home.blue:after { box-shadow: 0 0 0 4vmin var(--blue), 0 0 0 4.15vmin #fff; background-image: url("../img/blue-penguin.gif"); }
.section.home.yellow:before { background: var(--yellow); }
.section.home.yellow:after { box-shadow: 0 0 0 4vmin var(--yellow), 0 0 0 4.15vmin #fff; background-image: url("../img/yellow-tiger.gif"); }
.section.home.red:before { background: var(--red); }
.section.home.red:after { box-shadow: 0 0 0 4vmin var(--red), 0 0 0 4.15vmin #fff; background-image: url("../img/red-panda.gif"); }
.section.home.green:before { background: var(--green); }
.section.home.green:after { box-shadow: 0 0 0 4vmin var(--green), 0 0 0 4.15vmin #fff; background-image: url("../img/green-turtle.gif"); }

.section ul { float: left; margin: 0; padding: 0; list-style: none; width: 33.333%; height: 100%; }
.section ul li { 
  height: 14.28%; 
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.1vmin solid var(--black); 
  border-bottom: 0.1vmin solid var(--black); 
  font-size: 1.5vmin; 
  color: #111;
  position: relative; 
}
.section ul:last-of-type li { text-align: left; border-right: 0; }
.section.blue { transform: rotate(180deg); border-bottom-width: 0; }
.section.red { transform: rotate(90deg); border-bottom-width: 0; }
.section.yellow { transform: rotate(270deg); border-bottom-width: 0; }
.section.green { border-bottom-width: 0; }

.section.blue ul:nth-child(2) li { background: var(--blue); box-shadow: 0 0 5vmin -3vmin var(--black) inset; }
.section.red ul:nth-child(2) li { background: var(--red); box-shadow: 0 0 5vmin -3vmin var(--black) inset; }
.section.yellow ul:nth-child(2) li { background: var(--yellow); box-shadow: 0 0 5vmin -3vmin var(--black) inset; }
.section.green ul:nth-child(2) li { background: var(--green); box-shadow: 0 0 5vmin -3vmin var(--black) inset; }
.section ul:nth-child(2) li:last-of-type { background: #ffffff; box-shadow: none; }
.section ul:nth-child(2) li:last-of-type:before { content: ""; width: 3.2vmin; height: 3.2vmin; border: 0.1vmin solid var(--black); border-radius: 100%; position: absolute; left: calc(50% - 1.6vmin); top: 0.1vmin; }
.section ul:first-of-type li:nth-child(3):before, .section ul:last-of-type li:nth-child(3):before { content: ""; width: 3.2vmin; height: 3.2vmin; border: 0.1vmin solid var(--black); border-radius: 100%; position: absolute; left: calc(50% - 1.6vmin); top: 0.1vmin; }
li.blue, span.blue { background: var(--blue); box-shadow: 0 0 5vmin -3vmin var(--black) inset; }
li.red, span.red { background: var(--red); box-shadow: 0 0 5vmin -3vmin var(--black) inset; }
li.yellow, span.yellow { background: var(--yellow); box-shadow: 0 0 5vmin -3vmin var(--black) inset; }
li.green, span.green { background: var(--green); box-shadow: 0 0 5vmin -3vmin var(--black) inset; }

span.blue { left: 33% !important; width: 34.25% !important; border-top: 0 !important; }
span.red { border-left: 0 !important; left: -0.2% !important; }
span.yellow { border-right: 0 !important; top: 33% !important; }
span.green { border-bottom: 0 !important; left: 32.8% !important; }

.section.center { border: 0; }
.goal { width: 100%; height: 100%; border: 12.55vmin solid red; border-color: var(--blue) var(--yellow) var(--green) var(--red); }
.cross { width: 100%; height: 100%; position: absolute; top: 0; }
.cross:before, .cross:after { width: 141%; height: 0.1vmin; position: absolute; top: 0; content: ""; transform: rotate(45deg); background: var(--black); transform-origin: left top; }
.cross:after { top: initial; bottom: 0; transform: rotate(-45deg); transform-origin: left bottom; }
.cells { position: absolute; width: 100%; height: 100%; background: transparent; border: 4vmin solid #fff; top: 0; box-shadow: 0 0 0 0.1vmin var(--black) inset; }
.color-cells { position: absolute; width: 100%; height: 100%; top: 0; border: 0.1vmin solid var(--black); }
.color-cells span { width: 33.3333%; height: 4vmin; float: left; position: absolute; left: calc(33.333%); border: 0.1vmin solid var(--black); }
.color-cells span:nth-child(2) { width: 3.95vmin; height: 34.5%; float: left; right: 0; left: initial; top: 132.8%; }
.color-cells span:nth-child(3) { width: 8.5vmin; height: 15.5%; float: left; bottom: 0; top: initial; left: 38%; }
.color-cells span:nth-child(4) { width: 3.95vmin; height: 33.55%; float: left; left: 0; top: 33%; }
.section.home.blue { border-right: 0; }
.section.home.yellow { border-left-width: 0px !important; }
.section.home.red { border-bottom-width: 0.1vmin !important; border-right-width: 0.1vmin  !important; }
.section.home.green { border-left-width: 0px !important; border-bottom-width: 0.1vmin !important; }
.section.home { transform: rotate(0deg); }
.section.road { border-top: 0 !important; }

span:before, span:after { 
  font-size: 1.5vmin; 
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, 0.96);
  font-weight: 700;
  text-shadow: 0 0 0.03vmin rgba(255,255,255,0.6);
}
span.blue:before { content: "25"; right: 100%; top: 0; transform: none; }
span.blue:after { content: "9"; left: 100%; top: 0; transform: none; }
span.yellow:before { content: "8"; bottom: 100%; left: 0; transform: none; }
span.yellow:after { content: "60"; top: 100%; left: 0; transform: none; }
span.green:before { content: "59"; left: 100%; top: 0; transform: none; }
span.green:after { content: "43"; right: 100%; top: 0; transform: none; }
span.red:before { content: "42"; top: 100%; left: 0; transform: none; }
span.red:after { content: "26"; bottom: 100%; left: 0; transform: none; }

.rot {
  display: inline-block;
  transform: rotate(180deg);
}
.rot-red {
  display: inline-block;
  transform: rotate(-90deg);
}
.rot-yellow {
  display: inline-block;
  transform: rotate(90deg);
}
.rot-green {
  display: inline-block;
  transform: rotate(0deg);
}

/* ═══════════════════════════════════════════════════════════
   DOM Renderer — Pieces, containers, highlights
   ═══════════════════════════════════════════════════════════ */
.parchis li { position: relative; overflow: visible; }

/* ── Casillas del cruce central (8 celdas sin <li> en los brazos) ── */
.track-cell-anchor {
  position: absolute;
  z-index: 5;
  cursor: pointer;
}
.color-cells span.blue .track-cell-anchor,
.color-cells span.green .track-cell-anchor {
  width: 50%; height: 100%; top: 0;
}
.color-cells span.blue .track-cell-anchor[data-slot="0"],
.color-cells span.green .track-cell-anchor[data-slot="0"] { left: 0; }
.color-cells span.blue .track-cell-anchor[data-slot="1"],
.color-cells span.green .track-cell-anchor[data-slot="1"] { left: 50%; }
.color-cells span.yellow .track-cell-anchor,
.color-cells span.red .track-cell-anchor {
  width: 100%; height: 50%; left: 0;
}
.color-cells span.yellow .track-cell-anchor[data-slot="0"],
.color-cells span.red .track-cell-anchor[data-slot="0"] { top: 0; }
.color-cells span.yellow .track-cell-anchor[data-slot="1"],
.color-cells span.red .track-cell-anchor[data-slot="1"] { top: 50%; }
.track-cell-anchor.cell-highlight {
  background: rgba(255, 202, 40, 0.45) !important;
  box-shadow: inset 0 0 0.8vmin rgba(255, 202, 40, 0.6);
  animation: cell-glow 0.8s ease-in-out infinite alternate;
}

.parchis li .cell-label {
  position: absolute; right: 0.2vmin; top: 0.1vmin;
  font-size: 1.3vmin; color: #555; pointer-events: none; z-index: 1;
}

/* ── Pieces container inside track cells ── */
.pieces-container {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 0.15vmin; z-index: 6; pointer-events: none;
}
/* Counter-rotate containers in rotated road sections */
.section.road.blue .pieces-container { transform: rotate(180deg); }
.section.road.red .pieces-container  { transform: rotate(-90deg); flex-direction: column; }
.section.road.yellow .pieces-container { transform: rotate(90deg); flex-direction: column; }

/* ── Piece token ── */
.piece-dom {
  width: 2.6vmin; height: 2.6vmin; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1vmin; font-weight: 700; color: #fff;
  border: 0.2vmin solid rgba(255,255,255,0.85);
  box-shadow: 0 0.15vmin 0.5vmin rgba(0,0,0,0.35);
  cursor: pointer; position: relative; z-index: 7;
  pointer-events: auto;
  text-shadow: 0 0.1vmin 0.2vmin rgba(0,0,0,0.5);
  transition: box-shadow 0.15s;
  flex-shrink: 0;
}
.piece-dom:hover {
  box-shadow: 0 0 0 0.3vmin rgba(255,255,255,0.7), 0 0.2vmin 0.8vmin rgba(0,0,0,0.4);
}

.piece-anim-hidden {
  visibility: hidden !important;
}

/* Piece colors matching board CSS variables */
.piece-red    { background: var(--red); }
.piece-green  { background: var(--green); color: #111; text-shadow: none; }
.piece-yellow { background: var(--yellow); color: #333; text-shadow: none; }
.piece-blue   { background: var(--blue); }

/* ── Selected piece glow ── */
.piece-selected {
  animation: piece-pulse 0.7s ease-in-out infinite alternate;
  box-shadow: 0 0 0 0.35vmin #ffe082, 0 0 1.2vmin rgba(255, 202, 40, 0.7);
  z-index: 8;
}
@keyframes piece-pulse {
  from { box-shadow: 0 0 0 0.35vmin #ffe082, 0 0 1.2vmin rgba(255, 202, 40, 0.7); }
  to   { box-shadow: 0 0 0 0.5vmin #ffe082, 0 0 1.8vmin rgba(255, 202, 40, 0.9); }
}

/* ── Highlighted destination cells ── */
.cell-highlight {
  background: rgba(255, 202, 40, 0.45) !important;
  box-shadow: inset 0 0 0.8vmin rgba(255, 202, 40, 0.6);
  cursor: pointer !important;
  animation: cell-glow 0.8s ease-in-out infinite alternate;
}
@keyframes cell-glow {
  from { background: rgba(255, 202, 40, 0.35) !important; }
  to   { background: rgba(255, 202, 40, 0.55) !important; }
}

/* ── Home pieces container (inside colored homes) ── */
.home-pieces {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1vmin;
  place-items: center;
  width: 52%; height: 52%;
  z-index: 10;
}
.home-pieces .piece-dom {
  width: 3.5vmin; height: 3.5vmin;
  font-size: 1.5vmin;
  border-width: 0.25vmin;
}

/* ── Finished pieces in center ── */
.finished-pieces {
  display: none !important;
}

.meta-triangle-blue,
.meta-triangle-green,
.meta-triangle-red,
.meta-triangle-yellow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: 0.35vmin;
  padding: 0.35vmin;
  box-sizing: border-box;
  overflow: hidden;
}

.meta-finish-counter {
  width: 4.5vmin;
  height: 4.5vmin;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9vmin;
  font-weight: 900;
  color: #fff;
  background: rgba(0,0,0,0.25);
  border: 0.2vmin solid rgba(255,255,255,0.9);
  box-shadow: 0 0.2vmin 0.6vmin rgba(0,0,0,0.25);
}

.meta-finish-counter.piece-blue { background: rgba(0,0,255,0.85); }
.meta-finish-counter.piece-yellow { background: rgba(255,255,0,0.85); color: #111; }
.meta-finish-counter.piece-red { background: rgba(255,0,128,0.85); }
.meta-finish-counter.piece-green { background: rgba(0,255,128,0.85); color: #111; }

.piece-finished {
  width: 2.1vmin !important;
  height: 2.1vmin !important;
  font-size: 1.1vmin !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 0.15vmin solid rgba(0, 0, 0, 0.25) !important;
  box-shadow: 0 0.1vmin 0.4vmin rgba(0, 0, 0, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  cursor: default !important;
}

.piece-finished.piece-red { color: var(--red) !important; text-shadow: none !important; }
.piece-finished.piece-green { color: #00994d !important; text-shadow: none !important; }
.piece-finished.piece-yellow { color: #b3b300 !important; text-shadow: none !important; }
.piece-finished.piece-blue { color: var(--blue) !important; text-shadow: none !important; }

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Lato', "Segoe UI", Arial, sans-serif;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  color: #fff;
  overflow: hidden;
}

#stars,
#stars2,
#stars3 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 148px 1470px #FFF, 1445px 510px #FFF, 1686px 876px #FFF, 266px 1707px #FFF, 818px 1823px #FFF, 769px 152px #FFF, 1394px 994px #FFF, 930px 867px #FFF, 1222px 1975px #FFF, 1444px 174px #FFF, 1467px 1152px #FFF, 516px 1166px #FFF, 1492px 743px #FFF, 45px 1673px #FFF, 1962px 1877px #FFF, 1340px 143px #FFF, 1459px 453px #FFF, 1205px 1134px #FFF, 269px 933px #FFF, 961px 1689px #FFF, 278px 552px #FFF, 1198px 320px #FFF, 1398px 1698px #FFF, 963px 1326px #FFF, 663px 610px #FFF, 1515px 1441px #FFF, 432px 1890px #FFF, 441px 788px #FFF, 214px 709px #FFF, 1940px 1089px #FFF, 1428px 1181px #FFF, 1254px 1710px #FFF, 728px 1663px #FFF, 38px 1855px #FFF, 1971px 1500px #FFF, 1193px 1108px #FFF, 1875px 1916px #FFF, 873px 1473px #FFF, 1958px 60px #FFF, 928px 1420px #FFF, 1028px 1358px #FFF, 826px 2px #FFF, 979px 1608px #FFF, 936px 402px #FFF, 61px 89px #FFF, 406px 1693px #FFF, 700px 770px #FFF, 152px 732px #FFF, 532px 1234px #FFF, 1086px 1426px #FFF, 712px 863px #FFF, 453px 127px #FFF, 1934px 1730px #FFF, 195px 1558px #FFF, 608px 1061px #FFF, 951px 1970px #FFF, 1830px 1348px #FFF, 1251px 616px #FFF, 941px 1782px #FFF, 259px 1353px #FFF, 698px 331px #FFF, 1041px 753px #FFF, 1334px 2px #FFF, 979px 740px #FFF, 1787px 44px #FFF, 1024px 812px #FFF, 71px 406px #FFF, 1709px 412px #FFF, 359px 1797px #FFF, 371px 1344px #FFF, 1808px 1045px #FFF, 7px 1015px #FFF, 217px 1431px #FFF, 453px 1748px #FFF, 1127px 1335px #FFF, 1529px 1467px #FFF, 1555px 1484px #FFF, 1997px 822px #FFF, 951px 1376px #FFF, 1422px 608px #FFF, 1085px 1715px #FFF, 822px 537px #FFF, 1318px 1574px #FFF, 88px 436px #FFF, 688px 109px #FFF, 1679px 1325px #FFF, 1282px 1912px #FFF, 1198px 740px #FFF, 1658px 1755px #FFF, 1065px 1675px #FFF, 1405px 616px #FFF, 1763px 62px #FFF, 65px 1320px #FFF, 1133px 1272px #FFF, 1167px 1501px #FFF, 332px 1068px #FFF, 1608px 1779px #FFF, 3px 1182px #FFF, 1067px 1253px #FFF, 1501px 1205px #FFF, 1888px 844px #FFF, 1441px 831px #FFF, 32px 1672px #FFF, 771px 688px #FFF, 1265px 1132px #FFF, 1105px 1710px #FFF, 1645px 448px #FFF, 1359px 691px #FFF, 963px 1866px #FFF, 1234px 1665px #FFF, 1651px 535px #FFF, 1197px 25px #FFF, 34px 1523px #FFF, 339px 1040px #FFF, 984px 1216px #FFF, 1226px 1464px #FFF, 1027px 236px #FFF, 832px 751px #FFF, 1448px 160px #FFF, 783px 344px #FFF, 267px 437px #FFF, 589px 1823px #FFF, 1861px 1342px #FFF, 1103px 202px #FFF, 896px 81px #FFF, 1903px 1348px #FFF, 1128px 1400px #FFF, 1322px 498px #FFF, 1968px 561px #FFF, 1724px 71px #FFF, 1927px 757px #FFF, 772px 1113px #FFF, 1400px 80px #FFF, 1313px 825px #FFF, 44px 972px #FFF, 847px 1775px #FFF, 1584px 790px #FFF, 1770px 603px #FFF, 1347px 141px #FFF, 379px 126px #FFF, 1947px 1423px #FFF, 914px 1083px #FFF, 868px 899px #FFF, 106px 1494px #FFF, 1550px 890px #FFF, 1358px 1703px #FFF, 433px 1219px #FFF, 3px 490px #FFF, 894px 469px #FFF, 1806px 1259px #FFF;
  animation: animStar 50s linear infinite;
}

#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 148px 1470px #FFF, 1445px 510px #FFF, 1686px 876px #FFF, 266px 1707px #FFF, 818px 1823px #FFF, 769px 152px #FFF, 1394px 994px #FFF, 930px 867px #FFF, 1222px 1975px #FFF, 1444px 174px #FFF, 1467px 1152px #FFF, 516px 1166px #FFF, 1492px 743px #FFF, 45px 1673px #FFF, 1962px 1877px #FFF, 1340px 143px #FFF, 1459px 453px #FFF, 1205px 1134px #FFF, 269px 933px #FFF, 961px 1689px #FFF, 278px 552px #FFF, 1198px 320px #FFF, 1398px 1698px #FFF, 963px 1326px #FFF, 663px 610px #FFF, 1515px 1441px #FFF, 432px 1890px #FFF, 441px 788px #FFF, 214px 709px #FFF, 1940px 1089px #FFF, 1428px 1181px #FFF, 1254px 1710px #FFF, 728px 1663px #FFF, 38px 1855px #FFF, 1971px 1500px #FFF, 1193px 1108px #FFF, 1875px 1916px #FFF, 873px 1473px #FFF, 1958px 60px #FFF, 928px 1420px #FFF, 1028px 1358px #FFF, 826px 2px #FFF, 979px 1608px #FFF, 936px 402px #FFF, 61px 89px #FFF, 406px 1693px #FFF, 700px 770px #FFF, 152px 732px #FFF, 532px 1234px #FFF, 1086px 1426px #FFF, 712px 863px #FFF, 453px 127px #FFF, 1934px 1730px #FFF, 195px 1558px #FFF, 608px 1061px #FFF, 951px 1970px #FFF, 1830px 1348px #FFF, 1251px 616px #FFF, 941px 1782px #FFF, 259px 1353px #FFF, 698px 331px #FFF, 1041px 753px #FFF, 1334px 2px #FFF, 979px 740px #FFF, 1787px 44px #FFF, 1024px 812px #FFF, 71px 406px #FFF, 1709px 412px #FFF, 359px 1797px #FFF, 371px 1344px #FFF, 1808px 1045px #FFF, 7px 1015px #FFF, 217px 1431px #FFF, 453px 1748px #FFF, 1127px 1335px #FFF, 1529px 1467px #FFF, 1555px 1484px #FFF, 1997px 822px #FFF, 951px 1376px #FFF, 1422px 608px #FFF, 1085px 1715px #FFF, 822px 537px #FFF, 1318px 1574px #FFF, 88px 436px #FFF, 688px 109px #FFF, 1679px 1325px #FFF, 1282px 1912px #FFF, 1198px 740px #FFF, 1658px 1755px #FFF, 1065px 1675px #FFF, 1405px 616px #FFF, 1763px 62px #FFF, 65px 1320px #FFF, 1133px 1272px #FFF, 1167px 1501px #FFF, 332px 1068px #FFF, 1608px 1779px #FFF, 3px 1182px #FFF, 1067px 1253px #FFF, 1501px 1205px #FFF, 1888px 844px #FFF, 1441px 831px #FFF, 32px 1672px #FFF, 771px 688px #FFF, 1265px 1132px #FFF, 1105px 1710px #FFF, 1645px 448px #FFF, 1359px 691px #FFF, 963px 1866px #FFF, 1234px 1665px #FFF, 1651px 535px #FFF, 1197px 25px #FFF, 34px 1523px #FFF, 339px 1040px #FFF, 984px 1216px #FFF, 1226px 1464px #FFF, 1027px 236px #FFF, 832px 751px #FFF, 1448px 160px #FFF, 783px 344px #FFF, 267px 437px #FFF, 589px 1823px #FFF, 1861px 1342px #FFF, 1103px 202px #FFF, 896px 81px #FFF, 1903px 1348px #FFF, 1128px 1400px #FFF, 1322px 498px #FFF, 1968px 561px #FFF, 1724px 71px #FFF, 1927px 757px #FFF, 772px 1113px #FFF, 1400px 80px #FFF, 1313px 825px #FFF, 44px 972px #FFF, 847px 1775px #FFF, 1584px 790px #FFF, 1770px 603px #FFF, 1347px 141px #FFF, 379px 126px #FFF, 1947px 1423px #FFF, 914px 1083px #FFF, 868px 899px #FFF, 106px 1494px #FFF, 1550px 890px #FFF, 1358px 1703px #FFF, 433px 1219px #FFF, 3px 490px #FFF, 894px 469px #FFF, 1806px 1259px #FFF;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 567px 936px #FFF, 758px 1454px #FFF, 2000px 699px #FFF, 917px 1312px #FFF, 1120px 1548px #FFF, 1712px 326px #FFF, 1625px 1298px #FFF, 326px 1693px #FFF, 1377px 1137px #FFF, 1008px 1413px #FFF, 1700px 1904px #FFF, 696px 858px #FFF, 328px 1716px #FFF, 1729px 244px #FFF, 871px 1531px #FFF, 1359px 1129px #FFF, 1342px 1204px #FFF, 15px 1136px #FFF, 1651px 172px #FFF, 756px 124px #FFF, 1727px 538px #FFF, 1942px 1474px #FFF, 587px 534px #FFF, 1405px 1354px #FFF, 173px 428px #FFF, 102px 1729px #FFF, 1397px 1055px #FFF, 1170px 849px #FFF, 1707px 1102px #FFF, 1965px 1470px #FFF, 1277px 568px #FFF, 1186px 529px #FFF, 1234px 1217px #FFF, 778px 1687px #FFF, 1304px 940px #FFF, 480px 1861px #FFF, 1972px 1232px #FFF, 1192px 1585px #FFF, 531px 313px #FFF, 1167px 322px #FFF, 620px 659px #FFF, 476px 240px #FFF, 894px 468px #FFF, 807px 998px #FFF, 1900px 601px #FFF, 733px 399px #FFF, 610px 594px #FFF, 470px 857px #FFF, 253px 607px #FFF, 1383px 415px #FFF, 1091px 1528px #FFF, 1152px 1106px #FFF, 1008px 256px #FFF, 1348px 139px #FFF, 191px 972px #FFF, 1693px 1124px #FFF, 1270px 924px #FFF, 82px 671px #FFF, 1436px 861px #FFF, 1501px 94px #FFF, 1215px 653px #FFF, 287px 1361px #FFF, 1065px 118px #FFF, 766px 1708px #FFF, 1957px 1725px #FFF, 294px 443px #FFF, 1050px 1823px #FFF, 605px 176px #FFF, 1951px 1355px #FFF, 611px 1810px #FFF, 1703px 1594px #FFF, 1458px 689px #FFF, 269px 471px #FFF, 1019px 1100px #FFF, 490px 439px #FFF, 45px 264px #FFF, 1557px 149px #FFF, 1602px 628px #FFF, 1153px 727px #FFF, 1840px 844px #FFF;
  animation: animStar 100s linear infinite;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 80px 940px #FFF, 505px 1146px #FFF, 1371px 1318px #FFF, 840px 250px #FFF, 1369px 924px #FFF, 1823px 1709px #FFF, 1530px 1498px #FFF, 1620px 1918px #FFF, 1827px 1500px #FFF, 338px 1729px #FFF, 390px 1015px #FFF, 710px 960px #FFF, 811px 209px #FFF, 399px 481px #FFF, 1372px 1747px #FFF, 1319px 348px #FFF, 50px 630px #FFF, 538px 894px #FFF, 1561px 723px #FFF, 1005px 1361px #FFF, 79px 1633px #FFF, 127px 27px #FFF, 904px 1786px #FFF, 1500px 1989px #FFF, 1961px 1556px #FFF, 1822px 1279px #FFF, 58px 547px #FFF, 1569px 1815px #FFF, 603px 1222px #FFF, 1868px 192px #FFF, 3px 1542px #FFF, 1716px 1070px #FFF, 530px 291px #FFF, 612px 1970px #FFF, 145px 544px #FFF, 1474px 236px #FFF, 1081px 588px #FFF, 12px 68px #FFF, 1381px 176px #FFF, 1166px 82px #FFF;
  animation: animStar 150s linear infinite;
}

@keyframes animStar {
  from { transform: translateY(0px); }
  to { transform: translateY(-2000px); }
}

.app {
  max-width: 1140px;
  margin: 14px auto;
  padding: 12px 16px;
}

/* Cabecera */
.top {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.top h2 { margin: 0; font-size: 20px; }
.top p  { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

.controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Tarjetas */
.card {
  background: linear-gradient(180deg, rgba(25, 44, 74, 0.94) 0%, rgba(12, 21, 42, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #eef4ff;
  backdrop-filter: blur(10px);
}
.card p,
.card small,
.card label,
.card span,
.card div {
  color: #e5ebff;
}
.card small {
  color: rgba(229, 235, 255, 0.74);
}

/* Botones */
button {
  background: #1976d2;
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: opacity .15s;
}
button:hover  { opacity: .88; }
button:active { opacity: .75; }
button.secondary { background: #555; }
button:disabled  { opacity: .4; cursor: default; }

select {
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* Layout principal */
.row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.board-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
}

/* Selector flotante de dado sobre la ficha */
.move-choice {
  position: absolute;
  z-index: 9999;
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: #fbf2df;
  border: 2px solid rgba(44,32,19,0.15);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  transform: translate(-50%, calc(-100% - 8px));
  pointer-events: auto;
}
.move-choice.hidden {
  display: none;
}
.move-choice button {
  min-width: 42px;
  padding: 8px 10px;
  font-size: 15px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  color: #3a2405;
  border-radius: 12px;
  box-shadow: 0 4px 0 rgba(169,116,23,0.9);
}
.move-choice button:hover {
  opacity: 0.95;
}
.move-choice button.sum-btn {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}
.move-choice button.sum-btn:hover {
  opacity: 0.95;
}

canvas {
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  max-width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}

/* Panel lateral */
.panel {
  width: 310px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* Jugadores */
.players {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.player-badge {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  opacity: .72;
  transition: opacity .2s, box-shadow .2s;
  background: rgba(0,0,0,0.16);
}
.player-badge.active {
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
}

/* Dados 3D */
.dice-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  min-height: 90px;
}

.dice-scene {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  perspective: 600px;
}

.dice-container {
  width: 70px;
  height: 70px;
  position: relative;
}

.dice {
  position: relative;
  width: 70px;
  height: 70px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.dice .side {
  position: absolute;
  background-color: #fff;
  border-radius: 6px;
  width: 70px;
  height: 70px;
  border: 1.5px solid #d0d0d0;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.06);
}

.dice .dot {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background-color: #f25f5c;
  box-shadow: inset 2px 2px #d90429;
}

/* Side positions on the cube */
.dice .side:nth-child(1) { transform: translateZ(2.2em); }
.dice .side:nth-child(6) { transform: rotateY(90deg) translateZ(2.2em); }
.dice .side:nth-child(3) { transform: rotateY(-90deg) translateZ(2.2em); }
.dice .side:nth-child(4) { transform: rotateX(90deg) translateZ(2.2em); }
.dice .side:nth-child(5) { transform: rotateX(-90deg) translateZ(2.2em); }
.dice .side:nth-child(2) { transform: rotateY(-180deg) translateZ(2.2em); }

/* Show-N rotation classes for landing on each face */
.dice.show-1 { transform: rotateX(720deg) rotateY(720deg); }
.dice.show-2 { transform: rotateX(720deg) rotateY(900deg); }
.dice.show-3 { transform: rotateX(720deg) rotateY(810deg); }
.dice.show-4 { transform: rotateX(630deg) rotateY(720deg); }
.dice.show-5 { transform: rotateX(810deg) rotateY(720deg); }
.dice.show-6 { transform: rotateX(720deg) rotateY(630deg); }

/* Dot positions on faces */
.two-1, .three-1, .four-1, .five-1, .six-1 { top: 20%; left: 20%; }
.four-3, .five-3, .six-4 { top: 20%; left: 80%; }
.one-1, .three-2, .five-5 { top: 50%; left: 50%; }
.four-2, .five-2, .six-3 { top: 80%; left: 20%; }
.two-2, .three-3, .four-4, .five-4, .six-6 { top: 80%; left: 80%; }
.six-2 { top: 50%; left: 20%; }
.six-5 { top: 50%; left: 80%; }

/* Used dice dim */
.dice-container.used { opacity: 0.35; transition: opacity 0.3s; }

/* Fresh dice highlight */
.dice-container.fresh .dice .side {
  border-color: #f9a825;
  box-shadow: inset 0 0 8px rgba(249, 168, 37, 0.2);
}

/* Destino previsto */
.selected-preview {
  box-shadow: 0 0 0 3px #ffca28, 0 0 18px rgba(255, 202, 40, .45);
}

.btn-row {
  display: flex;
  gap: 8px;
}

.btn-row button {
  flex: 1;
}

.btn-row button.secondary {
  background: #555;
}

.btn-row button:active {
  transform: none;
  box-shadow: none;
}

/* Log */
.log {
  height: 300px;
  overflow-y: auto;
  background: rgba(255,255,255,0.96);
  border-radius: 16px;
  border: 1px solid rgba(44,32,19,0.14);
  padding: 12px 14px;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.6;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.55);
}
.log .entry {
  border-bottom: 1px solid rgba(44,32,19,0.12);
  padding: 8px 0;
  color: var(--ink);
}
.log .entry span {
  color: var(--ink) !important;
}
.log .entry .t {
  color: var(--ink-soft) !important;
  font-size: 11px;
  margin-right: 4px;
}

/* Controles extra */
.extra-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  background: rgba(251,242,223,0.9);
  border: 1px solid rgba(44,32,19,0.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.55);
}
.extra-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--ink);
}
.extra-controls small {
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
  .row    { flex-direction: column; }
  .panel  { width: 100%; }
}

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(14, 33, 26, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  width: min(100%, 420px);
  background: radial-gradient(circle at top, #ffffff, #fbf2df 30%, #f7e9cf);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -15px var(--shadow), 0 0 0 1px rgba(0,0,0,0.08);
}

.track-strip {
  display: flex;
  height: 14px;
}
.track-strip span {
  flex: 1;
}
.track-strip span:nth-child(4n+1) { background: var(--red); }
.track-strip span:nth-child(4n+2) { background: var(--yellow); }
.track-strip span:nth-child(4n+3) { background: var(--green); }
.track-strip span:nth-child(4n+4) { background: var(--blue); }

.modal-body {
  padding: 28px 26px 26px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.modal-header h2 {
  font-family: 'Baloo 2', cursive;
  font-size: 1.75rem;
  margin: 0 0 4px;
  line-height: 1.05;
  color: var(--ink);
}

.modal-header p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(44,32,19,0.2);
  background: var(--parchment-2);
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.close-btn:focus-visible {
  outline: 3px solid rgba(224,167,42,0.45);
  outline-offset: 3px;
}

.field-label,
fieldset legend,
.toggle-row span {
  display: block;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.name-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid var(--parchment-2);
  background: #fff7eb;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
}
.name-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(224,167,42,0.16);
}

fieldset {
  border: none;
  margin: 22px 0 0;
  padding: 0;
}

fieldset legend {
  margin-bottom: 14px;
}

.modal-dice-row {
  display: flex;
  gap: 12px;
}

.dice-option {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.dice-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.dice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 2px solid var(--parchment-2);
  background: #fff8e9;
  transition: border-color .18s ease, background .18s ease;
}

.dice-option input:checked ~ .dice-card {
  border-color: var(--gold);
  background: #fff2d1;
}

.die {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 8px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.08);
}

.die i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  align-self: center;
  justify-self: center;
}

.die.face-1 i:nth-child(5),
.die.face-2 i:nth-child(1),
.die.face-2 i:nth-child(9) {
  background: var(--parchment);
}

.dice-label {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}

.option-tabs {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.tab-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  min-height: 54px;
  flex: 1;
  border-radius: 18px;
  background: #fff7eb;
  border: 1px solid rgba(44,32,19,0.12);
  cursor: pointer;
  overflow: hidden;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  user-select: none;
}

.tab-option:hover {
  transform: translateY(-1px);
}

.tab-option input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  cursor: pointer;
}

.tab-highlight {
  position: absolute;
  inset: 4px;
  border-radius: 16px;
  background: rgba(224,167,42,0.08);
  opacity: 0;
  transition: opacity .18s ease, background .18s ease;
}

.tab-label {
  position: relative;
  z-index: 1;
  color: var(--ink);
  text-align: center;
  font-weight: 700;
}

.tab-option input:checked + .tab-highlight {
  opacity: 1;
  background: rgba(58,158,64,0.16);
}

.tab-option input:checked + .tab-highlight + .tab-label {
  color: var(--gold-dark);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid rgba(44,32,19,0.14);
  color: var(--ink);
}

.toggle-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.toggle-wrap {
  position: relative;
}

.toggle-wrap input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--parchment-2);
  position: relative;
  transition: background .18s ease;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform .18s ease;
}

.toggle-wrap input:checked ~ .toggle {
  background: var(--green);
}

.toggle-wrap input:checked ~ .toggle::after {
  transform: translateX(18px);
}

.cta {
  width: 100%;
  margin-top: 26px;
  padding: 15px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  color: #3a2405;
  font-family: 'Baloo 2', cursive;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 0 rgba(169,116,23,0.8), 0 16px 28px rgba(0,0,0,0.18);
}

.cta:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(169,116,23,0.9), 0 8px 18px rgba(0,0,0,0.2);
}

.cta:focus-visible,
.dice-option input:focus-visible ~ .dice-card,
.pawn-option input:focus-visible ~ .pawn,
.toggle-wrap input:focus-visible ~ .toggle {
  outline: 3px solid rgba(224,167,42,0.35);
  outline-offset: 3px;
}

/* Force vertical alignment in vertical central cells 42 (idx 41), 60 (idx 59), 8 (idx 7), and 26 (idx 25) */
.track-cell-anchor[data-track-index="41"] .pieces-container,
.track-cell-anchor[data-track-index="59"] .pieces-container,
.track-cell-anchor[data-track-index="7"] .pieces-container,
.track-cell-anchor[data-track-index="25"] .pieces-container {
  flex-direction: column !important;
}