/* Tower: eight floors stacked bottom-up; the current floor glows lime, climbed floors are green, bombs flash pink. */
.play-tower::before { background: linear-gradient(135deg, rgba(163, 230, 53, 0.7), rgba(163, 230, 53, 0) 35%, rgba(139, 92, 255, 0) 65%, rgba(139, 92, 255, 0.55)); }
.tower-screen { align-content: start; gap: 12px; background: radial-gradient(120% 90% at 50% 100%, rgba(163, 230, 53, 0.14), transparent 60%), linear-gradient(180deg, #0f1326, #0a0819); }
.tgrid { display: grid; gap: clamp(5px, 0.8vw, 8px); width: 100%; max-width: 440px; margin: 0 auto; }
.trow { display: grid; grid-template-columns: 44px repeat(var(--tiles, 3), minmax(0, 1fr)); gap: inherit; align-items: stretch; }
.trow-mult { display: grid; place-items: center; border-radius: 8px; font: 800 0.72rem/1 var(--display); color: var(--dim); background: rgba(255, 255, 255, 0.03); box-shadow: 0 0 0 1px var(--line) inset; font-variant-numeric: tabular-nums; }
.trow.is-current .trow-mult { color: #d9ff8a; box-shadow: 0 0 0 1px rgba(163, 230, 53, 0.5) inset; }
.trow.is-done .trow-mult { color: var(--win); }
.ttile {
  position: relative; display: grid; place-items: center; min-height: clamp(34px, 4.6vw, 44px); min-width: 0; padding: 0; border: 0; border-radius: 10px; cursor: default;
  background: linear-gradient(180deg, #232a52, #171c3d); box-shadow: 0 3px 0 #10132b, 0 0 0 1px rgba(190, 180, 255, 0.12) inset; color: var(--mute);
  transition: transform 120ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease), filter var(--fast);
}
.ttile.is-locked { filter: brightness(0.6) saturate(0.5); }
.ttile.is-live { cursor: pointer; background: linear-gradient(180deg, #3b4a2a, #263518); box-shadow: 0 3px 0 #15200c, 0 0 0 1px rgba(163, 230, 53, 0.45) inset; }
.ttile.is-live:hover { transform: translateY(-2px); filter: brightness(1.15); box-shadow: 0 5px 0 #15200c, 0 0 0 1px rgba(163, 230, 53, 0.9) inset, 0 0 18px -6px rgba(163, 230, 53, 0.9); }
.ttile.is-live:active, .ttile.is-pressing { transform: translateY(3px); box-shadow: 0 0 0 #15200c, 0 0 0 1px rgba(163, 230, 53, 0.6) inset; }
.ttile.is-safe { background: radial-gradient(circle at 50% 40%, rgba(31, 224, 138, 0.4), rgba(11, 157, 94, 0.2) 70%), #10241e; box-shadow: 0 2px 0 #08301f, 0 0 0 1px rgba(31, 224, 138, 0.55) inset, 0 0 20px -6px rgba(31, 224, 138, 0.8); animation: tile-pop 380ms var(--ease); }
.ttile.is-safe .tile-ico, .ttile.is-rest .tile-ico { color: #4cfbae; --gi-b: #eafff4; }
.ttile.is-hit { background: radial-gradient(circle, rgba(255, 61, 110, 0.6), rgba(194, 24, 74, 0.35)), #2a0b18; box-shadow: 0 2px 0 #4a0b20, 0 0 0 2px var(--lose) inset, 0 0 26px -2px rgba(255, 61, 110, 0.9); animation: tile-shake 420ms var(--ease); }
.ttile.is-bomb { background: #1a1235; box-shadow: 0 2px 0 #120d26, 0 0 0 1px rgba(255, 61, 110, 0.35) inset; }
.ttile.is-hit .tile-ico, .ttile.is-bomb .tile-ico { color: var(--lose); --gi-b: #ffd0dc; }
.ttile.is-rest { background: #15122e; box-shadow: 0 2px 0 #0d0b20, 0 0 0 1px var(--line) inset; }
.ttile.is-rest .tile-ico { opacity: 0.35; }
.ttile .tile-ico { width: 60%; height: 60%; max-height: 28px; }
@keyframes tile-pop { 0% { transform: scale(0.82); } 60% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes tile-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px) rotate(-3deg); } 40% { transform: translateX(5px) rotate(3deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.play-tower .field-profit .readonly { color: var(--gold); background: rgba(255, 201, 64, 0.07); box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.3) inset; }
.play-tower .action-btn:not(.is-cashout) { color: #142000; background: linear-gradient(180deg, #d9ff8a, #8fd320); box-shadow: 0 6px 0 #4d7a08, 0 14px 30px -8px rgba(163, 230, 53, 0.75); }
.play-tower .action-btn:not(.is-cashout):active:not([aria-disabled="true"]) { box-shadow: 0 2px 0 #4d7a08, 0 6px 16px -8px rgba(163, 230, 53, 0.75); }
@media (max-width: 560px) {
  .trow { grid-template-columns: 38px repeat(var(--tiles, 3), minmax(0, 1fr)); }
  .ttile { min-height: 32px; }
}
/* turbo: tiles land at once (the flash and the sound still play) */
:root.is-turbo .ttile { animation: none; transition: none; }
/* polish: 44 px floors on phones (the live row is the tap target; the rest keep the same height so nothing jumps) */
@media (max-width: 480px) { .tgrid { gap: 4px; } .ttile { min-height: 44px; } }
