.board-wrap {
  display: flex;
  gap: 8px;
  align-items: start;
  justify-content: center;
}

.row-labels, .col-labels {
  display: none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(10, var(--cell));
  grid-template-rows: repeat(10, var(--cell));
  grid-auto-flow: row;
  width: max-content;
  touch-action: none;
  gap: 5px;
  background: var(--board-face);
  padding: 14px;
  border-radius: 22px;
  border: 4px solid #ffe566;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -10px 22px rgba(0, 0, 0, 0.35),
    0 10px 0 var(--board-lip),
    0 18px 28px rgba(0, 0, 0, 0.35);
}

.cell {
  appearance: none;
  display: grid;
  place-items: stretch;
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  border: none;
  border-radius: 7px;
  background: var(--empty);
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.45),
    inset -1px -1px 2px rgba(255, 255, 255, 0.06);
}

.cell:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  z-index: 2;
}

.cell.ghost-fit {
  box-shadow: inset 0 0 0 3px var(--fit);
}

.cell.ghost-no {
  box-shadow: inset 0 0 0 3px var(--nofit);
}

.cell.clearing .block {
  animation: calmie-clear 200ms ease forwards;
  transform-origin: center;
}

@keyframes calmie-clear {
  from { transform: scale(1); filter: brightness(1.35); }
  to { transform: scale(.72); opacity: .15; }
}

.drag-ghost.miss .block {
  background: var(--nofit) !important;
}

.cell.will-clear {
  box-shadow: 0 0 0 3px var(--clear);
}

.cell.will-clear.cursor {
  box-shadow: 0 0 0 3px var(--gold);
}

.block {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 7px;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.42),
    inset -3px -4px 0 rgba(0, 0, 0, 0.22),
    0 3px 0 rgba(0, 0, 0, 0.28);
}

.block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.46), transparent 46%, rgba(0, 0, 0, 0.26));
  pointer-events: none;
  z-index: 2;
}

.block::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0.45;
}

.color-cream { background-color: #f4e4c1; }
.color-sky { background-color: #4da3ff; }
.color-teal { background-color: #2ec4b6; }
.color-coral { background-color: #ff6b4a; }
.color-amber { background-color: #f4b942; }
.color-indigo { background-color: #6c63ff; }
.color-mint { background-color: #3ddc97; }
.color-rose { background-color: #ff5d8f; }
.color-pink { background-color: #ff8ba7; }
.color-slate { background-color: #8b9bb4; }
.color-steel { background-color: #6b7c99; }
.color-stone { background-color: #94a3b8; }
.color-orchid { background-color: #e879f9; }
.color-lime { background-color: #84cc16; }
.color-violet { background-color: #a855f7; }
.color-purple { background-color: #7c3aed; }
.color-gold { background-color: #f5c518; }
.color-aqua { background-color: #2dd4bf; }
.color-cyan { background-color: #22d3ee; }
.color-salmon { background-color: #fb7185; }
.color-chartreuse { background-color: #a3e635; }
.color-orange { background-color: #f97316; }
.color-ice { background-color: #38bdf8; }
.color-olive { background-color: #65a30d; }
.color-crimson { background-color: #e11d48; }
.color-grape { background-color: #7e22ce; }
.color-pewter { background-color: #94a3b8; }
.color-lilac { background-color: #c084fc; }
.color-ruby { background-color: #dc2626; }
.color-maroon { background-color: #991b1b; }

.pat-stripes-h::after { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 6px); }
.pat-stripes-v::after { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 6px); }
.pat-dots::after { background-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,.4) 1.4px, transparent 1.6px); background-size: 7px 7px; }
.pat-checker::after { background-image: conic-gradient(rgba(0,0,0,.28) 25%, transparent 0 50%, rgba(0,0,0,.28) 0 75%, transparent 0); background-size: 8px 8px; }
.pat-diagonal::after { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.3) 0 3px, transparent 3px 8px); }
.pat-zigzag::after { background-image: repeating-linear-gradient(115deg, rgba(0,0,0,.32) 0 3px, transparent 3px 7px); }
.pat-dashes::after { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 5px, transparent 5px 9px); }
.pat-plus::after { background-image: linear-gradient(rgba(0,0,0,.35) 0 0), linear-gradient(rgba(0,0,0,.35) 0 0); background-size: 55% 2px, 2px 55%; background-position: center; background-repeat: no-repeat; }
.pat-grid::after { background-image: linear-gradient(rgba(0,0,0,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.3) 1px, transparent 1px); background-size: 6px 6px; }
.pat-weave::after { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.22) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(0,0,0,.18) 0 2px, transparent 2px 6px); }
.pat-steps::after { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 4px, transparent 4px 8px); }
.pat-branch::after { background-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,.4) 2px, transparent 2px); background-size: 8px 8px; }
.pat-u::after { background-image: linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)); background-size: 70% 2px; background-repeat: no-repeat; background-position: 50% 80%; }
.pat-hatch-l::after { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 2px, transparent 2px 7px); }
.pat-solid::after { background-image: none; }

body[data-contrast="high"] .grid,
body[data-contrast="extra"] .grid {
  border: var(--chrome-border) solid var(--stroke);
  box-shadow: 0 8px 0 var(--board-lip);
}

body[data-contrast="high"] .cell,
body[data-contrast="extra"] .cell {
  box-shadow: inset 0 0 0 2px var(--stroke);
}

body[data-contrast="high"] .block,
body[data-contrast="extra"] .block {
  box-shadow:
    inset 0 0 0 2px #000,
    0 3px 0 rgba(0, 0, 0, 0.45);
}

body[data-theme="dark"][data-contrast="extra"] .block {
  box-shadow:
    inset 0 0 0 2px #fff,
    0 3px 0 #000;
}

.cell.has-grass {
  background: #2f8a3a;
  padding: 3px;
}

.block.obstacle::before {
  display: none;
}

.block.obstacle::after {
  opacity: 1;
  background: none;
  content: attr(data-hp);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #1b140c;
  font-size: 0.85rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.block.obstacle:not([data-hp])::after {
  content: "";
}

.obstacle-box {
  background:
    linear-gradient(#6b3a16, #6b3a16) center / 70% 3px no-repeat,
    linear-gradient(#6b3a16, #6b3a16) center / 3px 70% no-repeat,
    #d08945;
}

.obstacle-grass {
  background: repeating-linear-gradient(90deg, #3caa4c 0 4px, #2f8a3a 4px 8px);
}

.obstacle-vase {
  background: linear-gradient(#f7d7e4 0 28%, #e36b93 28% 70%, #f4c4d4 70%);
  border-radius: 40% 40% 18% 18%;
}

.obstacle-honey {
  background: radial-gradient(circle at 50% 30%, #ffe08a, #e39b14 70%);
}

.obstacle-ice {
  background:
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.85) 46% 52%, transparent 56%),
    #b9e7ff;
}

.obstacle-ice.hp-1 {
  background:
    linear-gradient(115deg, transparent 38%, #ffffff 46% 54%, transparent 62%),
    linear-gradient(25deg, transparent 46%, rgba(255, 255, 255, 0.9) 50%, transparent 54%),
    #d7f3ff;
}

.obstacle-egg {
  background: radial-gradient(circle at 40% 35%, #fff4c2, #f0c84a 62%, #c99216);
  border-radius: 50% 50% 46% 46%;
}

.obstacle-cupboard {
  background:
    linear-gradient(#3a2158, #3a2158) 20% 38% / 60% 3px no-repeat,
    linear-gradient(#3a2158, #3a2158) 20% 68% / 60% 3px no-repeat,
    #8b5cf6;
}

.obstacle-chain {
  background:
    linear-gradient(#2a241c, #2a241c) center / 100% 4px no-repeat,
    linear-gradient(#2a241c, #2a241c) center / 4px 100% no-repeat,
    #b7a48a;
}

.obstacle-safe {
  background:
    radial-gradient(circle at 50% 50%, #d6dde8 0 18%, #243044 20% 34%, #8ea0b8 36%);
}