/* AnomicFlip — Towers (/towers). Shares the page shell with coinflip.css, .mn-box / .mn-win from mines.css. */
.tw-diffs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.tw-diffs button { grid-column: span 2; height: 54px; border: 0; border-radius: 8px; background: #2a2d33; color: #a7abb2; font: 700 17px 'Archivo', system-ui, sans-serif; cursor: pointer; }
.tw-diffs button:nth-child(n+4) { grid-column: span 3; }
.tw-diffs button:hover:not(:disabled) { background: #33373e; color: #fff; }
.tw-diffs button.on { background: #22c55e; color: #0d1f16; }
.tw-diffs button:disabled { cursor: not-allowed; }
.tw-diffs button:disabled:not(.on) { opacity: .5; }

.tw-stage { position: relative; display: grid; place-items: center; padding: 34px 24px; min-height: 760px; }
.tw-tower { display: flex; gap: 14px; width: min(100%, 760px); }
.tw-nums { display: grid; grid-template-rows: repeat(9, 1fr); padding: 18px 0; gap: 10px; }
.tw-nums span { display: grid; place-items: center; color: #6b7078; font-size: 15px; font-weight: 700; }
.tw-board { flex: 1; display: grid; grid-template-rows: repeat(9, 1fr); gap: 10px; padding: 18px; border-radius: 14px; background: #15171a; box-shadow: 0 0 0 10px #24272c; }
.tw-row { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 10px; transition: opacity .2s; }
.tw-row.dim { opacity: .45; }
.tw-tile {
  position: relative; height: 62px; border: 0; border-radius: 8px; padding: 0; cursor: default; overflow: hidden;
  background: #2a2e34 repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px);
  color: rgba(255,255,255,.25); font: 700 14px 'Archivo', system-ui, sans-serif; font-variant-numeric: tabular-nums; transition: background .15s, transform .12s, box-shadow .15s;
}
.tw-row.active .tw-tile { cursor: pointer; background-color: #3a4048; color: #e6e8eb; box-shadow: inset 0 0 0 2px rgba(63,214,143,.55); }
.tw-row.active .tw-tile:hover { transform: translateY(-3px); background-color: #464d57; }
.tw-tile.open { cursor: default; background: #1d2a23; color: transparent; box-shadow: inset 0 0 0 2px rgba(63,214,143,.4); animation: mn-pop .22s ease-out; }
.tw-tile.open span { display: none; }
.tw-tile.open img { position: absolute; inset: 8% 0; width: 100%; height: 84%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.tw-tile.bomb { background: #2a1a1d; box-shadow: inset 0 0 0 2px rgba(229,57,69,.4); }
.tw-tile.faded { opacity: .38; animation: none; box-shadow: none; }
.tw-tile.boom { box-shadow: inset 0 0 0 2px #e53945, 0 0 22px rgba(229,57,69,.5); animation: mn-shake .4s ease-out; }

@media (max-width: 1100px) { .tw-stage { min-height: 0; padding: 22px 12px; } }
@media (max-width: 600px) {
  .tw-tile { height: 44px; font-size: 11px; }
  .tw-board { gap: 6px; padding: 10px; box-shadow: 0 0 0 6px #24272c; }
  .tw-row { gap: 6px; }
  .tw-nums { padding: 10px 0; gap: 6px; }
}