[data-tile-finish="shoreline"] {
  --tile-hidden: #50a99d;
  --tile-hidden-2: #3b918c;
  --tile-open: #faf5e5;
  --tile-open-alt: #faf5e5;
  --tile-text: #20434a;
}

/* Direct children keep store previews independent of the currently worn skin. */
[data-tile-finish="shoreline"] > :is(.tile, .tutorial-tile) {
  border-radius: 2px;
  border: 1px solid #398b854d;
  background: var(--tile-hidden);
  box-shadow: inset 0 1px 0 #d2efdd38;
  text-shadow: none;
  font-weight: 750;
  transition: none;
}
[data-tile-finish="shoreline"] > :is(.tile, .tutorial-tile).revealed {
  border-color: #acb6a347;
  background: var(--tile-open);
  box-shadow: none;
}
[data-tile-finish="shoreline"] > :is(.tile, .tutorial-tile).flagged {
  background: #cbe5ce;
  border-color: #7eaf9766;
  box-shadow: none;
}
[data-tile-finish="shoreline"] > :is(.tile, .tutorial-tile).flagged::before,
[data-tile-finish="shoreline"] > .tile.correct-flag::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  background: url("./shoreline/tile-flag.svg") center / 94% 94% no-repeat;
  box-shadow: none;
  transform: none;
}
[data-tile-finish="shoreline"] > :is(.tile, .tutorial-tile).flagged::after,
[data-tile-finish="shoreline"] > .tile.flagged.origin.hidden::after { content: none; }
[data-tile-finish="shoreline"] > .tile.mine {
  background: #ebc0ac;
  border-color: #b8847066;
  box-shadow: none;
}
[data-tile-finish="shoreline"] > .tile.mine::before {
  content: "";
  inset: 0;
  width: 100%; height: 100%;
  background: url("./shoreline/tile-mine.svg") center / 78% 78% no-repeat;
  border-radius: 0;
  box-shadow: none;
}
[data-tile-finish="shoreline"] > .tile.mine::after { content: none; }
[data-tile-finish="shoreline"] > .tile.exploded { background: #eb927a; box-shadow: inset 0 0 0 3px #9f4431; }
[data-tile-finish="shoreline"] > .tile.correct-flag { background: #a8d8b8; border-color: #639b7955; box-shadow: none; }
[data-tile-finish="shoreline"] > .tile.correct-flag::before {
  background: url("./shoreline/tile-flag.svg") center / 94% 94% no-repeat;
}
[data-tile-finish="shoreline"] > .tile.correct-flag::after {
  content: "";
  position: absolute;
  top: auto; left: auto; right: 11%; bottom: 13%;
  width: 20%; height: 11%;
  border: solid #235d3b;
  border-width: 0 0 3px 3px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  transform: rotate(-45deg);
}
[data-tile-finish="shoreline"] > .tile.wrong-flag { background: #efd4c5; border-color: #b8847066; }
[data-tile-finish="shoreline"] > .tile.wrong-flag::before,
[data-tile-finish="shoreline"] > .tile.wrong-flag::after {
  content: ""; position: absolute;
  inset: auto; width: 44%; height: max(3px, calc(var(--tile-size) * .07));
  top: 50%; left: 50%;
  background: #a74636; box-shadow: none; border-radius: 2px;
}
[data-tile-finish="shoreline"] > .tile.wrong-flag::before { transform: translate(-50%, -50%) rotate(45deg); }
[data-tile-finish="shoreline"] > .tile.wrong-flag::after { transform: translate(-50%, -50%) rotate(-45deg); }
[data-tile-finish="shoreline"] > :is(.tile, .tutorial-tile):focus-visible { outline: 3px solid #154e61; outline-offset: -3px; }
[data-tile-finish="shoreline"] > .tile.touch-preview,
[data-tile-finish="shoreline"] > .tile.pending,
[data-tile-finish="shoreline"] > .tile.flag-preview { box-shadow: inset 0 0 0 3px #a77720; }
[data-tile-finish="shoreline"] > .tutorial-tile.is-target {
  outline: 3px solid #b77316;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 5px #fff1b3;
  transform: none; animation: none; filter: none;
}
[data-tile-finish="shoreline"] > .tutorial-tile:is(.is-neighbor, .is-clue-number):not(.is-target) {
  box-shadow: inset 0 0 0 2px #278ba6;
}
[data-tile-finish="shoreline"] > .tutorial-tile.is-possible:not(.is-target) {
  outline: 3px solid #17647d; outline-offset: -4px;
  box-shadow: inset 0 0 0 5px #b5e5e8;
  animation: none; filter: none;
}
body[data-tile-finish="shoreline"] :is(.board-frame, .tutorial-board, .control-tutorial-viewport) {
  background-color: #b9ded5;
  border-color: #84b5ac;
  box-shadow: none;
}
body[data-tile-finish="shoreline"] .board-frame { background-image: none; }
body[data-tile-finish="shoreline"] .control-tutorial-viewport {
  background-image: linear-gradient(#398b854d 1px, transparent 1px), linear-gradient(90deg, #398b854d 1px, transparent 1px);
}

.cosmetic-board-preview:not([data-tile-finish="shoreline"]) { --tile-open: #fffbea; --tile-open-alt: #edf7df; }