* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  font-family: Arial, sans-serif;
  background:
    radial-gradient(circle at center, #343434 0%, #171717 75%);
  color: white;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.top-section {
  padding: 16px 20px 20px;
  background:
    linear-gradient(
      180deg,
      #3b3b3b 0%,
      #242424 100%
    );
  border-bottom: 2px solid #111;
  box-shadow: 0 6px 15px rgba(0,0,0,.5);
  position: relative;
  z-index: 10;
}

h1 {
  margin: 0 0 15px;
  text-shadow:
    0 2px 2px #000,
    0 4px 8px rgba(0,0,0,.6);
}

.grid-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.grid-controls input {
  width: 65px;
  padding: 8px;
  font-size: 16px;
  text-align: center;

  color: white;
  background: #222;

  border:
    1px solid #555;

  border-radius: 6px;

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.7),
    0 1px 1px rgba(255,255,255,.15);
}

.name-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.name-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.name-field input {
  width: 155px;
  padding: 9px;

  color: white;

  background:
    linear-gradient(
      180deg,
      #3e3e3e,
      #272727
    );

  border: 1px solid #666;
  border-radius: 6px;

  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.6);
}

.name-field input:focus {
  outline: 2px solid #4ba3ff;
}

.toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.tool-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.clear-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

button {
  position: relative;

  padding: 10px 20px;

  border: 1px solid rgba(255,255,255,.25);

  border-radius: 7px;

  font-size: 15px;
  font-weight: bold;

  cursor: pointer;

  transition:
    transform .1s,
    box-shadow .1s,
    filter .1s;

  box-shadow:
    0 5px 0 rgba(0,0,0,.55),
    0 7px 10px rgba(0,0,0,.35),
    inset 0 1px 2px rgba(255,255,255,.5);
}

button:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

button:active {
  transform: translateY(4px);

  box-shadow:
    0 1px 0 rgba(0,0,0,.7),
    0 2px 4px rgba(0,0,0,.4);
}

button.selected {
  border: 2px solid white;

  box-shadow:
    0 5px 0 rgba(0,0,0,.6),
    0 0 12px white,
    inset 0 1px 3px rgba(255,255,255,.5);
}

.barrier-btn {
  background:
    linear-gradient(#fff16a, #d5aa00);
  color: #111;
}

.player-btn {
  background:
    linear-gradient(#5ff094, #168947);
  color: #111;
}

.enemy-btn {
  background:
    linear-gradient(#c77bea, #71308e);
  color: white;
}

.erase-btn {
  background:
    linear-gradient(#fff, #aaa);
  color: #111;
}

.clear-btn {
  min-width: 160px;

  background:
    linear-gradient(#ff6b5e, #b5261b);

  color: white;
}

.middle-section {
  flex: 1;

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

  padding: 40px;

  min-height: 0;

  perspective: 1100px;
}

#grid-container {
  max-width: 100%;
  max-height: 100%;

  overflow: auto;

  padding:
    25px 35px 45px;

  transform:
    rotateX(5deg);

  transform-style:
    preserve-3d;
}

#grid {
  display: grid;
  gap: 4px;

  width: max-content;

  margin: auto;

  padding: 10px;

  background:
    linear-gradient(
      145deg,
      #383838,
      #181818
    );

  border:
    3px solid #555;

  border-radius: 8px;

  box-shadow:
    0 8px 0 #111,
    0 15px 25px rgba(0,0,0,.65),
    inset 0 1px 2px rgba(255,255,255,.15);

  transform-style:
    preserve-3d;
}

body.painting-cover,
body.painting-cover .cell {
  cursor: crosshair !important;
}

/* .cell {
  user-select: none;
  touch-action: none;
} */

.cell {
  // Select/Drag to craete tokens
  user-select: none;
  touch-action: none;

  position: relative;

  width: 65px;
  height: 65px;

  background:
    linear-gradient(
      145deg,
      #929292 0%,
      #747474 48%,
      #5c5c5c 100%
    );

  border-top:
    1px solid #aaa;

  border-left:
    1px solid #999;

  border-right:
    1px solid #444;

  border-bottom:
    1px solid #3a3a3a;

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

  padding: 4px;

  font-size: 11px;
  font-weight: bold;

  cursor: pointer;
  user-select: none;

  overflow-wrap: anywhere;

  transition:
    transform .12s,
    filter .12s,
    box-shadow .12s;

  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,.12),
    inset -2px -2px 3px rgba(0,0,0,.25);
}

.cell:hover {
  filter: brightness(1.15);

  transform:
    translateZ(5px);

  z-index: 5;
}

.cell::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.05),
      transparent 35%,
      rgba(0,0,0,.08)
    );
}

.cell.barrier {
  background:
    linear-gradient(
      145deg,
      #8b5a2b 0%,
      #68401f 55%,
      #442713 100%
    );

  color: white;
  font-size: 52px;
  line-height: 1;
  padding: 0;

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

  overflow: hidden;

  transform:
    translateY(-5px)
    translateZ(12px);

  border-top: 2px solid #a97444;
  border-left: 2px solid #8b5a2b;
  border-right: 3px solid #3c2110;
  border-bottom: 5px solid #321a0b;

  box-shadow:
    5px 8px 8px rgba(0, 0, 0, 0.55),
    inset 2px 2px 3px rgba(255, 255, 255, 0.18);

  z-index: 4;
}

.cell.barrier:hover {
  transform:
    translateY(-7px)
    translateZ(15px);

  filter: brightness(1.12);
}

.cell.player {
  // Keep the tile itself gray.
  // The circular pseudo-element becomes
  // the actual token.
  background:
    linear-gradient(
      145deg,
      #929292,
      #626262
    );

  color: white;

  overflow: visible;

  z-index: 3;
}

.cell.player::after {
  content: "";

  position: absolute;

  width: 47px;
  height: 47px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 32% 25%,
      #aaffc5 0%,
      #39d976 32%,
      #168a47 68%,
      #075a2a 100%
    );

  border:
    3px solid #b8ffce;

  box-shadow:
    0 6px 0 #064e24,
    0 10px 9px rgba(0,0,0,.55),
    inset 0 3px 4px rgba(255,255,255,.5);

  transform:
    translateZ(15px);

  z-index: -1;
}

.cell.enemy {
  background:
    linear-gradient(
      145deg,
      #929292,
      #626262
    );

  color: white;

  overflow: visible;

  z-index: 3;
}

.cell.enemy::after {
  content: "";

  position: absolute;

  width: 47px;
  height: 47px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 32% 25%,
      #edb8ff 0%,
      #ae55d1 32%,
      #742b91 68%,
      #421052 100%
    );

  border:
    3px solid #e4aaff;

  box-shadow:
    0 6px 0 #3b0d49,
    0 10px 9px rgba(0,0,0,.55),
    inset 0 3px 4px rgba(255,255,255,.45);

  transform:
    translateZ(15px);

  z-index: -1;
}

/* Keep character names above the token */

.cell.player,
.cell.enemy {
  text-shadow:
    0 1px 2px black,
    0 2px 4px black;
}

.cell.has-los {
  box-shadow:
    inset 0 0 0 4px #ff2525,
    0 0 10px #ff2525,
    0 0 22px rgba(255,0,0,.7);

  animation:
    losPulse 1.2s infinite alternate;
}

@keyframes losPulse {

  from {
    filter: brightness(1);
  }

  to {
    filter: brightness(1.3);
  }

}

.bottom-section {
  padding: 16px 20px;

  background:
    linear-gradient(
      180deg,
      #292929,
      #1d1d1d
    );

  border-top:
    2px solid #444;

  box-shadow:
    0 -5px 15px rgba(0,0,0,.35);

  position: relative;
  z-index: 10;
}

#status {
  min-height: 25px;

  margin-bottom: 12px;

  font-size: 18px;
  font-weight: bold;

  text-shadow:
    0 2px 3px black;
}

.safe {
  color: #55ff88;
}

.danger {
  color: #ff5555;
}

.legend {
  display: flex;

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

  gap: 24px;

  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 22px;
  height: 22px;

  border: 1px solid white;

  box-shadow:
    2px 3px 4px rgba(0,0,0,.6);
}

.los-example {
  background: #9b59b6;

  box-shadow:
    inset 0 0 0 3px red,
    0 0 7px red;
}

.help-text {
  color: #bbb;
  font-size: 12px;
  margin-top: 12px;
}

/* MOBILE */
@media (max-width: 700px) {

  .cell {
    width: 48px;
    height: 48px;

    font-size: 9px;
  }

  .cell.player::after,
  .cell.enemy::after {
    width: 35px;
    height: 35px;
  }

  .middle-section {
    padding: 10px;
  }
}

.cell.player,
.cell.enemy,
.cell.barrier {
  cursor: grab;
}

body.dragging-piece,
body.dragging-piece .cell {
  cursor: grabbing !important;
}

body.dragging-piece .cell:hover {
  transform:
    translateY(-10px)
    translateZ(25px);

  filter: brightness(1.2);

  box-shadow:
    0 15px 18px rgba(0, 0, 0, 0.65);
}

.cell.drag-target-valid {
  outline: 4px solid #39ff88;
  outline-offset: -4px;

  box-shadow:
    inset 0 0 15px rgba(57, 255, 136, 0.8),
    0 0 15px rgba(57, 255, 136, 0.9);

  filter: brightness(1.3);

  z-index: 20;
}

.cell.drag-target-invalid {
  outline: 4px solid #ff3b3b;
  outline-offset: -4px;

  box-shadow:
    inset 0 0 15px rgba(255, 59, 59, 0.8),
    0 0 15px rgba(255, 59, 59, 0.9);

  filter: brightness(1.2);

  z-index: 20;
}

.cell.enemy-visible {
  position: relative;
}

.cell.enemy-visible::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    rgba(155, 89, 182, 0.30);

  box-shadow:
    inset 0 0 12px
    rgba(180, 70, 220, 0.45);

  pointer-events: none;

  z-index: 1;
}

.cell.enemy,
.cell.player,
.cell.barrier {
  position: relative;
}

.cell.player.has-los {
  box-shadow:
    inset 0 0 0 5px #ff3333,
    0 0 12px #ff3333,
    0 0 24px rgba(255, 0, 0, 0.8);

  z-index: 20;
}

.cover-dropdown {
  position: relative;
  display: inline-block;
}

.cover-menu {
  display: none;

  position: absolute;

  top: calc(100% + 7px);
  left: 0;

  min-width: 190px;

  padding: 6px;

  background:
    linear-gradient(
      145deg,
      #2f3540,
      #171a20
    );

  border:
    1px solid #666;

  border-radius:
    8px;

  box-shadow:
    0 10px 20px
    rgba(0, 0, 0, 0.65);

  z-index: 1000;
}

.cover-menu.open {
  display: block;
}

.cover-menu button {
  display: block;

  width: 100%;

  padding:
    10px 14px;

  margin: 2px 0;

  text-align: left;

  color: white;

  background:
    linear-gradient(
      180deg,
      #555,
      #333
    );

  border:
    1px solid #666;

  border-radius:
    6px;

  cursor: pointer;
}

.cover-menu button:hover {
  background:
    linear-gradient(
      180deg,
      #777,
      #444
    );

  transform:
    translateY(-1px);
}

.cell.half-cover {
  background:
    linear-gradient(
      145deg,
      #9a814e 0%,
      #735f39 55%,
      #493b24 100%
    );

  color: white;

  font-size: 42px;
  line-height: 1;

  padding: 0;

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

  overflow: hidden;

  transform:
    translateY(-3px)
    translateZ(7px);

  border-top: 2px solid #c4a96c;
  border-left: 2px solid #a58b57;
  border-right: 3px solid #49391f;
  border-bottom: 4px solid #392c18;

  box-shadow:
    4px 6px 7px rgba(0, 0, 0, 0.5),
    inset 2px 2px 3px rgba(255, 255, 255, 0.15);

  cursor: grab;

  z-index: 3;
}

.cell.darkness-overlay::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle,
      rgba(5, 5, 12, 0.88),
      rgba(0, 0, 0, 0.96)
    );

  box-shadow:
    inset 0 0 14px
    rgba(80, 50, 130, 0.35);

  pointer-events: none;

  z-index: 30;
}

.cell.darkness-preview {
  position: relative;
}

.cell.darkness-preview::before {
  content: "";

  position: absolute;
  inset: 2px;

  background: rgba(20, 10, 35, 0.35);

  border: 2px dashed rgba(190, 140, 255, 0.95);

  box-shadow:
    inset 0 0 10px rgba(150, 80, 255, 0.45),
    0 0 5px rgba(150, 80, 255, 0.35);

  box-sizing: border-box;

  pointer-events: none;

  z-index: 40;
}


/*
  Center square is more obvious so you
  know where the Darkness is anchored.
*/

.cell.darkness-preview-center::before {
  border: 3px solid rgba(220, 180, 255, 1);

  background: rgba(80, 35, 110, 0.45);

  box-shadow:
    inset 0 0 14px rgba(180, 100, 255, 0.7),
    0 0 10px rgba(180, 100, 255, 0.7);
}

.cell.darkness-erase-preview {
  position: relative;
}

.cell.darkness-erase-preview::before {
  content: "";

  position: absolute;
  inset: 2px;

  border: 3px solid rgba(255, 60, 60, 0.95);

  background:
    rgba(255, 40, 40, 0.18);

  box-shadow:
    inset 0 0 12px
      rgba(255, 50, 50, 0.6),
    0 0 8px
      rgba(255, 50, 50, 0.7);

  pointer-events: none;

  z-index: 50;
}