.tower { width: min(100%, 420px); display: flex; flex-direction: column-reverse; gap: 7px; }

.trow {
  display: grid;
  gap: 7px;
  padding: 6px;
  border-radius: var(--r);
  background: var(--panel);
  opacity: .45;
  transition: opacity .18s var(--ease), background .18s var(--ease);
}
.trow.live { opacity: 1; background: var(--panel-2); }
.trow.done { opacity: .8; }

.ttile {
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  border-bottom: 3px solid #16242E;
  display: grid;
  place-items: center;
  font-size: 17px;
  cursor: default;
  transition: background .14s var(--ease), transform .1s var(--ease);
}
.trow.live .ttile { cursor: pointer; background: var(--panel-3); }
.trow.live .ttile:hover { background: var(--line-2); transform: translateY(-2px); }
.ttile.safe { background: var(--green-dim); border-bottom-color: rgba(0,231,1,.4); }
.ttile.trap { background: var(--red-dim); border-bottom-color: rgba(237,65,99,.45); }
.trow .pay {
  position: absolute;
  right: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.trow { position: relative; }
.trow.live .pay, .trow.done .pay { color: var(--green); }

.seg { display: flex; gap: 3px; padding: 3px; border-radius: var(--r-sm); background: var(--panel-2); }
.seg button { flex: 1; padding: 9px 0; border-radius: 3px; color: var(--muted); font-size: 13px; font-weight: 600;
              transition: background .14s var(--ease), color .14s var(--ease); }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--panel-3); color: var(--text); }
#start, #cash { width: 100%; }