/* A reversible material/motion study. Ordinary themes and game rules stay untouched. */
body[data-theme="discovery"] {
  --bg: #191f20;
  --panel: #252e2f;
  --panel-strong: #34403f;
  --ink: #edf2ec;
  --muted: #a8bab4;
  --line: #43514e;
  --accent: #a2d6c3;
  --accent-strong: #81bda6;
  --warn: #e4c37e;
  --danger: #df887c;
  --page-background: #191f20;
  --board-background: #327f73;
  --tile-hidden: #327f73;
  --tile-hidden-2: #327f73;
  --tile-open: #eff3eb;
  --tile-open-alt: #eff3eb;
  --tile-text: #29433e;
  --surface-background: #242d2e;
  --control-background: #283334;
  --popover-background: #222c2d;
  --hud-background: transparent;
  --primary-background: #a2d6c3;
}

body[data-theme="discovery"] .brand-mark,
body[data-theme="discovery"] .icon-button,
body[data-theme="discovery"] .control-button,
body[data-theme="discovery"] .secondary-action {
  box-shadow: none;
  border-color: #445351;
  background: var(--control-background);
}

body[data-theme="discovery"] .brand-mark {
  background: transparent;
  border-color: transparent;
}

body[data-theme="discovery"] .brand-flag { fill: #ef8e79; }
body[data-theme="discovery"] .hud-stat { border-color: transparent; box-shadow: none; }
body[data-theme="discovery"] .hud-stat + .hud-stat { border-left-color: #43514e; border-radius: 0; }
body[data-theme="discovery"] .board-frame {
  border-color: #568e80;
  border-radius: 3px;
  box-shadow: none;
}

body[data-theme="discovery"] .board {
  background-color: #327f73;
  background-image: url("./discovery-field.svg");
  background-size: calc(var(--tile-size) * 16) calc(var(--tile-size) * 16);
  background-position: var(--field-offset-x, 0px) var(--field-offset-y, 0px);
}

body[data-theme="discovery"] .tile {
  border-radius: 0;
  border: 0;
  font-weight: 750;
  text-shadow: none;
  transition: background-color 140ms ease;
}

body[data-theme="discovery"] .tile.hidden {
  background: transparent;
  box-shadow: inset -1px -1px #205d5466, inset 1px 1px #d8fff017;
}

body[data-theme="discovery"] .tile.hidden:active { transform: none; }
body[data-theme="discovery"] .tile.origin.hidden::after { content: none; }
body[data-theme="discovery"] .tile.revealed {
  background: #eff3eb;
  box-shadow: inset -1px -1px #c4d1c7;
}

body[data-theme="discovery"] .tile.flagged:not(.correct-flag):not(.wrong-flag) {
  background: #285f57;
  box-shadow: inset -1px -1px #1e4a43, inset 0 0 0 1px #90beac88;
}

body[data-theme="discovery"] .tile.flagged:not(.correct-flag):not(.wrong-flag)::before {
  display: block;
  width: max(2px, calc(var(--tile-size) * .055));
  background: #e3eee0;
  border-radius: 1px;
  box-shadow: none;
}

body[data-theme="discovery"] .tile.flagged:not(.correct-flag):not(.wrong-flag)::after {
  display: block;
  content: "";
  top: 23%;
  left: 37%;
  width: 40%;
  height: 31%;
  border-radius: 0;
  opacity: 1;
  background: #f59a82;
  clip-path: polygon(0 0, 100% 12%, 76% 48%, 100% 86%, 0 76%);
  box-shadow: none;
  transform-origin: left center;
}

body[data-theme="discovery"] .tile.correct-flag {
  background: #a0d2af;
  box-shadow: inset -1px -1px #689b7d, inset 0 0 0 2px #d8eed6;
}
body[data-theme="discovery"] .tile.correct-flag::before { display: block; background: #305c46; box-shadow: none; }
body[data-theme="discovery"] .tile.correct-flag::after { display: block; background: #f8fff2; box-shadow: none; }
body[data-theme="discovery"] .tile.mine:not(.correct-flag) {
  background: #b98278;
  box-shadow: inset -1px -1px #835d58;
}
body[data-theme="discovery"] .tile.mine:not(.correct-flag)::before,
body[data-theme="discovery"] .tile.mine:not(.correct-flag)::after { display: block; }
body[data-theme="discovery"] .tile.mine.exploded {
  background: #ed997f;
  box-shadow: inset 0 0 0 3px #ffe8cf;
}
body[data-theme="discovery"] .tile.wrong-flag {
  background: #a64f50;
  box-shadow: inset -1px -1px #753d3e;
}
body[data-theme="discovery"] .tile.wrong-flag::before,
body[data-theme="discovery"] .tile.wrong-flag::after {
  display: block;
  top: 45%;
  left: 24%;
  width: 52%;
  height: max(3px, calc(var(--tile-size) * .08));
  background: #ffece2;
  clip-path: none;
  box-shadow: none;
}

body[data-theme="discovery"] .tile.touch-preview { box-shadow: inset 0 0 0 2px #d8f1cf; }
body[data-theme="discovery"] .tile.flag-preview,
body[data-theme="discovery"] .tile.pending { box-shadow: inset 0 0 0 2px #f6c889; }
body[data-theme="discovery"] .tile:focus-visible { outline-color: #f6c889; }
body[data-theme="discovery"] #flagModeButton.is-active {
  border-color: #ec9c88;
  background: #f0a590;
  color: #352e2a;
}

body[data-theme="discovery"] .tile.just-revealed {
  animation: discovery-uncover 500ms ease-out both;
  animation-delay: var(--tile-effect-delay, 0ms);
}
body[data-theme="discovery"] .tile.just-flagged,
body[data-theme="discovery"] .tile.just-unflagged { animation: none; }
body[data-theme="discovery"] .tile.just-flagged::before { animation: discovery-plant 240ms ease-out both; }
body[data-theme="discovery"] .tile.just-flagged::after { animation: discovery-pennant 400ms ease-out both; }
body[data-theme="discovery"] .tile.just-verified,
body[data-theme="discovery"] .tile.just-wrong,
body[data-theme="discovery"] .tile.exploded,
body[data-theme="discovery"] .tile.mine.just-revealed-mine {
  animation: discovery-settle 450ms ease-out both;
  animation-delay: var(--tile-effect-delay, 0ms);
}
body[data-theme="discovery"] .board-frame.run-ended { animation: discovery-round-close 800ms ease-out both; }
body[data-theme="discovery"] .pb-notice {
  border: 1px solid #b5c891;
  border-left: 4px solid #d7cf95;
  border-radius: 2px;
  background: #253b33;
  box-shadow: 0 6px 20px #14211c33;
}
body[data-theme="discovery"] .pb-notice span { color: #e4dca2; }
body[data-theme="discovery"] .pb-notice button { background: #d7dfb1; border-color: transparent; }

@keyframes discovery-uncover {
  from { background-color: #b6d5bd; box-shadow: inset 0 0 0 2px #d4e9d9; }
  to { background-color: #eff3eb; box-shadow: inset -1px -1px #c4d1c7; }
}
@keyframes discovery-plant {
  from { transform: translateY(-18%); }
  to { transform: translateY(0); }
}
@keyframes discovery-pennant {
  0% { transform: translateY(-24%) scaleX(.7) skewY(-8deg); }
  55% { transform: translateY(0) scaleX(1) skewY(5deg); }
  100% { transform: translateY(0) scaleX(1) skewY(0); }
}
@keyframes discovery-settle {
  from { filter: brightness(1.16); }
  to { filter: brightness(1); }
}
@keyframes discovery-round-close {
  from { border-color: #eed8b6; box-shadow: inset 0 0 0 2px #eed8b666; }
  to { border-color: #568e80; box-shadow: inset 0 0 0 0 transparent; }
}

body[data-theme="discovery"].reduced-motion .tile,
body[data-theme="discovery"].reduced-motion .tile::before,
body[data-theme="discovery"].reduced-motion .tile::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  body[data-theme="discovery"] .tile,
  body[data-theme="discovery"] .tile::before,
  body[data-theme="discovery"] .tile::after { animation: none; }
}