/* Interactive mine cards. Closed cards intentionally contain no result hint. */
.board {
  perspective: 900px;
}

.tile {
  --drag-x: 0px;
  --drag-y: 0px;
  --flip-x: 0deg;
  --flip-y: 0deg;
  --drag-scale: 1;
  isolation: isolate;
  overflow: visible;
  border: 1px solid #3b3d42;
  background: linear-gradient(155deg, #16181d 0%, #0b0c10 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 9px 20px rgba(0,0,0,.48);
  transform: translateZ(0);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, filter .22s ease;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.tile:not(:disabled) {
  cursor: grab;
}

.tile:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: none;
  border-color: #6f5b17;
  box-shadow: 0 12px 25px rgba(0,0,0,.55), 0 0 18px rgba(255,196,0,.08);
}

.tile-lid {
  position: absolute;
  z-index: 3;
  inset: -1px;
  overflow: hidden;
  border: 1px solid #41444b;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.065), transparent 31%),
    radial-gradient(circle at 50% 35%, #30333a 0%, #23262d 48%, #17191f 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.07),
    inset 0 -10px 22px rgba(0,0,0,.28),
    0 8px 14px rgba(0,0,0,.32);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .28s cubic-bezier(.2,.75,.25,1), border-color .22s ease, box-shadow .22s ease;
}

.tile-lid::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: calc(12px - 5px);
  pointer-events: none;
}

.tile-lid::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e2b900, transparent);
  opacity: .22;
  transition: opacity .22s ease, box-shadow .22s ease;
}

.tile-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255,211,51,.56);
  transform: translate(-50%,-50%) rotate(45deg);
  background: linear-gradient(135deg, #574b20, #292310);
  box-shadow: 0 0 12px rgba(255,196,0,.08);
  opacity: .7;
}

.tile:hover:not(:disabled) .tile-lid {
  transform: perspective(540px) translateY(-5px) rotateX(-11deg);
  border-color: #8d7118;
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    inset 0 -10px 22px rgba(0,0,0,.24),
    0 15px 20px rgba(0,0,0,.5);
}

.tile.peeking {
  cursor: grabbing;
  border-color: #8d7118;
  box-shadow: 0 14px 28px rgba(0,0,0,.58),0 0 22px rgba(255,196,0,.12);
  transform: translate3d(var(--drag-x),var(--drag-y),18px) scale(var(--drag-scale));
  z-index: 8;
}

.tile.peeking .tile-lid {
  transform:
    perspective(520px)
    translateZ(8px)
    rotateX(var(--flip-x))
    rotateY(var(--flip-y));
  border-color: #9c7b19;
  box-shadow: 0 20px 32px rgba(0,0,0,.66),0 0 18px rgba(242,196,0,.12);
}

.tile.peeking.dragging .tile-lid {
  transition: none;
}

.tile.peeking.dragging {
  transition: border-color .12s ease,box-shadow .12s ease,filter .12s ease;
}

.tile.peel-ready {
  border-color: #f2c400;
  box-shadow: 0 16px 34px rgba(0,0,0,.62),0 0 24px rgba(242,196,0,.3);
}

.tile.flip-commit {
  z-index: 9;
  transform: translate3d(var(--drag-x),var(--drag-y),22px) scale(var(--drag-scale));
}

.tile.flip-commit .tile-lid {
  transform: perspective(520px) translateZ(10px) rotateX(var(--flip-x)) rotateY(var(--flip-y));
  transition: transform .12s cubic-bezier(.2,.85,.28,1),opacity .1s ease;
  opacity: .2;
}

.tile:hover:not(:disabled) .tile-lid::after {
  opacity: .8;
  box-shadow: 0 0 9px rgba(255,197,0,.55);
}

.tile.revealed .tile-lid,
.tile.mine .tile-lid {
  display: none;
}

/* Auto mode: the player builds a repeatable cell-opening sequence on the board. */
.tile.auto-selectable {
  cursor: pointer;
}

.tile.auto-selectable:hover {
  border-color: #b28d12;
  box-shadow: 0 14px 28px rgba(0,0,0,.58), 0 0 20px rgba(255,196,0,.13);
}

.tile.auto-selected {
  border-color: #e5b900;
  background: radial-gradient(circle at 50% 45%,rgba(255,199,0,.12),transparent 55%),linear-gradient(155deg,#24210f,#0b0c0f);
  box-shadow: inset 0 0 0 1px rgba(255,218,65,.12),0 0 20px rgba(255,193,0,.17),0 10px 22px rgba(0,0,0,.5);
}

.tile.auto-selected .tile-lid {
  border-color: #c49a0a;
  background: linear-gradient(135deg,rgba(255,231,112,.09),transparent 31%),radial-gradient(circle at 50% 35%,#302b18 0%,#232013 48%,#15140f 100%);
}

.tile.auto-selected .tile-seal {
  opacity: .18;
}

.auto-cell-order {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  transform: translate(-50%,-50%);
  border: 1px solid #ffe15b;
  border-radius: 50%;
  color: #171000;
  background: linear-gradient(145deg,#ffe455,#ffb800);
  box-shadow: 0 0 0 4px rgba(255,195,0,.08),0 0 18px rgba(255,195,0,.32);
  font-size: 13px;
  font-weight: 900;
  pointer-events: none;
}

@media (max-width: 520px) {
  .auto-cell-order {
    width: 27px;
    height: 27px;
    font-size: 12px;
  }
}

.tile.revealed {
  border-color: #f2c400;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,210,28,.28), transparent 42%),
    linear-gradient(145deg, #322907, #111006 78%);
  box-shadow:
    inset 0 0 28px rgba(255,190,0,.08),
    0 0 18px rgba(255,195,0,.17),
    0 10px 22px rgba(0,0,0,.46);
}

.tile .symbol {
  z-index: 2;
  font-size: 0;
}

.gem-shape {
  position: relative;
  display: block;
  width: 37%;
  aspect-ratio: 1;
  transform: rotate(45deg);
  border: 1px solid #fff2a4;
  border-radius: 3px 9px 3px 9px;
  background: linear-gradient(135deg, #fff7a3 0 14%, #ffde25 15% 48%, #ffb800 49% 100%);
  box-shadow: 0 0 11px #ffe45d, 0 0 28px rgba(255,190,0,.82);
}

.gem-shape::before,
.gem-shape::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.46);
}

.gem-shape::before { width: 1px; height: 100%; left: 48%; }
.gem-shape::after { height: 1px; width: 100%; top: 48%; }

.gem-glint {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -29% 0 0 29%;
}

.gem-glint::before,
.gem-glint::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff9cf;
  border-radius: 3px;
  box-shadow: 0 0 7px #fff;
  transform: translate(-50%,-50%);
}

.gem-glint::before { width: 100%; height: 1px; }
.gem-glint::after { width: 1px; height: 100%; }

.tile.mine {
  /* The loss state deliberately uses the requested yellow outline. */
  border-color: #f2c400;
  background:
    radial-gradient(circle at 50% 52%, rgba(255,190,0,.08), transparent 45%),
    linear-gradient(145deg, #251313, #0d0b0c 76%);
  box-shadow:
    inset 0 0 0 1px rgba(255,223,85,.09),
    0 0 18px rgba(255,195,0,.16),
    0 10px 22px rgba(0,0,0,.5);
}

.bomb-symbol {
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.56));
}

.bomb-body {
  display: block;
  width: 39%;
  aspect-ratio: 1;
  border: 1px solid #7d628e;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 25%, #83609d 0 5%, transparent 7%),
    radial-gradient(circle at 35% 30%, #58346f, #23142e 56%, #0d0911 100%);
  box-shadow: inset -8px -9px 13px rgba(0,0,0,.38), 0 0 15px rgba(119,61,158,.22);
}

.bomb-cap {
  position: absolute;
  top: 24%;
  left: 60%;
  width: 15%;
  height: 11%;
  border: 1px solid #9a7b25;
  border-radius: 3px;
  background: linear-gradient(#dbc14b,#665016);
  transform: rotate(37deg);
}

.bomb-fuse {
  position: absolute;
  top: 13%;
  left: 68%;
  width: 17%;
  height: 18%;
  border-top: 3px solid #d0a32e;
  border-right: 3px solid #d0a32e;
  border-radius: 0 9px 0 0;
  transform: rotate(-15deg);
}

.bomb-spark {
  position: absolute;
  top: 8%;
  left: 81%;
  width: 9px;
  height: 9px;
  background: #ffdc36;
  clip-path: polygon(50% 0,61% 35%,100% 16%,70% 50%,100% 78%,62% 66%,50% 100%,39% 66%,5% 81%,30% 50%,0 20%,39% 35%);
  filter: drop-shadow(0 0 5px #ff9d00);
}

.tile.revealed.fresh .gem-symbol {
  animation: storm-gem-in .42s cubic-bezier(.16,1.35,.42,1) both;
}

@media (max-width:520px) {
  .tile-lid::before { inset: 5px; border-radius: 5px; }
  .tile-seal { width: 11px; height: 11px; }
  .bomb-fuse { border-width: 2px; }
  .bomb-spark { width: 7px; height: 7px; }
}

@media (prefers-reduced-motion:reduce) {
  .tile,
  .tile-lid { transition-duration: .01ms !important; }
}