.tower-board { background: linear-gradient(#24124f, #0f0a2e); }
.tower { display: grid; gap: 7px; max-width: 520px; margin: 0 auto; }
.floor { display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: center; opacity: .55; }
.floor.active, .floor.done { opacity: 1; }
.floor .mult { font: 700 14px var(--body); color: var(--muted); text-align: right; }
.floor.active .mult { color: var(--gold); }
.floor.done .mult { color: #4dff8f; }
.tiles { display: grid; gap: 7px; }
.tile { height: 40px; border: 0; border-radius: 9px; background: #3a2a7a; cursor: default; font-size: 22px; line-height: 1;
        transition: transform .1s, background-color .15s; }
.floor.active .tile { background: #6a4ad0; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.floor.active .tile:hover { background: #8a6af0; transform: translateY(-2px); }
.tile.egg { background: #4dff8f !important; }
.tile.dragon { background: #d8344d !important; }
.tile.shown { opacity: .7; }
.tile.picked.dragon { opacity: 1; animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (max-width: 560px) { .floor { grid-template-columns: 54px 1fr; } .tile { height: 36px; } }