:root {
  --bg: #f7f3e8;
  --grid: #d8d8d8;
  --border: #ead8a6;
  --wall: #4a90e2;
  --road: #6f7b84;
  --road-dash: #f8f8f5;
  --start: #6fc44a;
  --end: #d64532;
  --text: #20242a;
  --shadow: 0 18px 50px rgba(72,69,49,.12);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}



.app{

  width:100%;

}
.board-wrap{

  position:relative;

  width:100%;

  aspect-ratio:1;

  background:linear-gradient(
          180deg,
          #FFFFFF 0%,
          #FCFCFA 100%
  );

  border:3px solid rgba(234,216,166,.8);

  border-radius:30px;

  overflow:hidden;

  box-shadow:var(--shadow);

  touch-action:none;

}

/* Layers */

.grid-lines,
.cells,
.walls,
.tokens,
.trace-layer{
  position:absolute;
  inset:0;
}

.cells{
  display:grid;
}

.cell{
  position:relative;
  border-radius:18px;
}

.cell.visited::after{
  content:"";
  position:absolute;
  inset:18%;
  border-radius:24px;
  background:rgba(111,123,132,.12);
}

/* SVG trace */

.trace-layer{
  pointer-events:none;
  z-index:3;
}

.trace-road{
  fill:none;
  stroke:var(--road);
  stroke-width: 52;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.trace-dash{
  fill:none;
  stroke:var(--road-dash);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:20 20;
}

/* Walls */

.wall{
  position:absolute;
  background:var(--wall);
  border-radius:999px;
  box-shadow:0 2px 0 rgba(255,255,255,.5);
}

.wall.vertical{
    width:8px;
}

.wall.horizontal{
    height:8px;
}

/* Tokens */

.token{

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  position:absolute;
  aspect-ratio:1;
  border-radius:50%;
  color:#fff;
  font-weight:800;
  transform:translate(-50%,-50%);
  z-index:4;
  pointer-events:none;
  box-shadow:
    0 0 0 10px rgba(255,220,142,.35),
    0 0 0 4px rgba(255,233,176,.75),
    0 14px 24px rgba(0,0,0,.14);
}

.token span{

  position:relative;
  z-index:1;

  white-space:nowrap;
  font-size:clamp(10px, 1.8vw, 20px);
  line-height:1;
  user-select:none;

}

.token::before{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:rgba(255,255,255,.12);
}

.token.start{
  background:linear-gradient(135deg,#84d85f 0%,#4fad2f 100%);
}

.token.end{
  background:linear-gradient(135deg,#e65540 0%,#ca2f23 100%);
}

.token span{
  position:relative;
  z-index:1;
}

.game-shell{

  width:100%;
  max-width:760px;

  margin:auto;

}